/* animations.css — ETAP 183: Анімаційна система VSOC 2.0 */
:root {
    --anim-duration-instant:   80ms;
    --anim-duration-fast:      150ms;
    --anim-duration-operative: 300ms;
    --anim-duration-smooth:    500ms;
    --anim-duration-ambient:   2000ms;
    --anim-ease-out:    cubic-bezier(0.4,0,0.2,1);
    --anim-ease-in:     cubic-bezier(0.4,0,1,1);
    --anim-ease-bounce: cubic-bezier(0.34,1.56,0.64,1);
    --anim-ease-spring: cubic-bezier(0.175,0.885,0.32,1.275);
    --vsoc-bg-base:      #0F1923;
    --vsoc-palette-tint: rgba(37,99,235,.04);
    --vsoc-energy-pct:   100%;
}
.vsoc-skeleton { background:linear-gradient(90deg,#f0f4f8 25%,#e2e8f0 50%,#f0f4f8 75%);background-size:200% 100%;animation:vsoc-skeleton-sweep 1.5s ease-in-out infinite;border-radius:4px;display:block; }
.vsoc-skeleton--blue { background:linear-gradient(90deg,#EFF6FF 25%,#DBEAFE 50%,#EFF6FF 75%);background-size:200% 100%;animation:vsoc-skeleton-sweep 1.5s ease-in-out infinite; }
.vsoc-skeleton--red  { background:linear-gradient(90deg,#FEF2F2 25%,#FEE2E2 50%,#FEF2F2 75%);background-size:200% 100%;animation:vsoc-skeleton-sweep 1.5s ease-in-out infinite; }
.vsoc-skeleton--green{ background:linear-gradient(90deg,#F0FDF4 25%,#DCFCE7 50%,#F0FDF4 75%);background-size:200% 100%;animation:vsoc-skeleton-sweep 1.5s ease-in-out infinite; }
@keyframes vsoc-skeleton-sweep { 0%{background-position:200% 0} 100%{background-position:-200% 0} }
.vsoc-stagger>*:nth-child(1){animation-delay:0ms} .vsoc-stagger>*:nth-child(2){animation-delay:60ms} .vsoc-stagger>*:nth-child(3){animation-delay:120ms} .vsoc-stagger>*:nth-child(4){animation-delay:180ms} .vsoc-stagger>*:nth-child(5){animation-delay:240ms} .vsoc-stagger>*:nth-child(6){animation-delay:300ms}
.vsoc-fade-in { animation:vsoc-fade-in var(--anim-duration-operative) var(--anim-ease-out) both }
@keyframes vsoc-fade-in { from{opacity:0;transform:translateY(8px)} to{opacity:1;transform:translateY(0)} }
.vsoc-slide-up { animation:vsoc-slide-up var(--anim-duration-smooth) var(--anim-ease-spring) both }
@keyframes vsoc-slide-up { from{opacity:0;transform:translateY(24px)} to{opacity:1;transform:translateY(0)} }
#vsoc-energy-bar { position:fixed;top:0;left:0;right:0;height:3px;z-index:8999;pointer-events:none;background:transparent }
#vsoc-energy-fill { height:100%;width:100%;background:linear-gradient(90deg,#22C55E 0%,#F59E0B 55%,#EF4444 100%);transform-origin:left center;transition:transform var(--anim-duration-operative) ease-out }
#vsoc-energy-fill.vsoc-energy-refill { animation:vsoc-energy-refill 1.2s ease-out forwards }
@keyframes vsoc-energy-refill { 0%{filter:brightness(1)} 30%{filter:brightness(2) saturate(1.5)} 100%{filter:brightness(1)} }
#vsoc-ambient-bg { position:fixed;inset:0;z-index:-1;pointer-events:none;opacity:0;transition:opacity 1s ease }
#vsoc-ambient-bg.vsoc-ambient-active { opacity:1 }
@keyframes vsoc-ambient-drift { 0%{transform:scale(1) translate(0px,0px)} 33%{transform:scale(1.05) translate(8px,-6px)} 66%{transform:scale(0.98) translate(-6px,8px)} 100%{transform:scale(1) translate(0px,0px)} }
.vsoc-celebrate-flash { position:fixed;inset:0;z-index:9990;pointer-events:none;background:rgba(250,204,21,.18);animation:vsoc-celebrate-flash 1.2s ease-out forwards }
@keyframes vsoc-celebrate-flash { 0%{opacity:1} 60%{opacity:0.4} 100%{opacity:0} }
.vsoc-node-pulse { animation:vsoc-node-pulse 0.6s var(--anim-ease-bounce) both }
@keyframes vsoc-node-pulse { 0%{transform:scale(1)} 40%{transform:scale(1.28)} 70%{transform:scale(0.95)} 100%{transform:scale(1)} }
@media (prefers-reduced-motion:reduce) { *,*::before,*::after{animation-duration:0.01ms!important;animation-iteration-count:1!important;transition-duration:0.01ms!important} #vsoc-energy-fill{transition:none!important} .vsoc-skeleton,.vsoc-skeleton--blue,.vsoc-skeleton--red,.vsoc-skeleton--green{animation:none!important;background:#e2e8f0!important} }