/* Vision Solution — premium static animations */

/* Respect reduced motion */
@media (prefers-reduced-motion: reduce){
  *,*::before,*::after{animation-duration:.001ms!important;transition-duration:.001ms!important;animation-iteration-count:1!important}
}

/* ---------- Keyframes ---------- */
@keyframes vs-fade-up    {from{opacity:0;transform:translate3d(0,28px,0)}to{opacity:1;transform:none}}
@keyframes vs-fade-down  {from{opacity:0;transform:translate3d(0,-22px,0)}to{opacity:1;transform:none}}
@keyframes vs-fade-left  {from{opacity:0;transform:translate3d(-32px,0,0)}to{opacity:1;transform:none}}
@keyframes vs-fade-right {from{opacity:0;transform:translate3d(32px,0,0)}to{opacity:1;transform:none}}
@keyframes vs-zoom-in    {from{opacity:0;transform:scale(.94)}to{opacity:1;transform:none}}
@keyframes vs-fade       {from{opacity:0}to{opacity:1}}
@keyframes vs-shine      {0%{background-position:-200% 0}100%{background-position:200% 0}}
@keyframes vs-float      {0%,100%{transform:translateY(0)}50%{transform:translateY(-10px)}}
@keyframes vs-pulse-ring {0%{box-shadow:0 0 0 0 rgba(34,166,222,.45)}70%{box-shadow:0 0 0 18px rgba(34,166,222,0)}100%{box-shadow:0 0 0 0 rgba(34,166,222,0)}}
@keyframes vs-glow       {0%,100%{filter:drop-shadow(0 0 0 rgba(120,200,255,0))}50%{filter:drop-shadow(0 0 24px rgba(120,200,255,.45))}}
@keyframes vs-kenburns   {0%{transform:scale(1.04) translate3d(0,0,0)}100%{transform:scale(1.14) translate3d(-1.5%,-1%,0)}}

/* ---------- Reveal base ---------- */
[data-anim]{opacity:0;will-change:transform,opacity}
[data-anim].is-in{animation-duration:.9s;animation-timing-function:cubic-bezier(.22,1,.36,1);animation-fill-mode:both}
[data-anim="fade-up"].is-in   {animation-name:vs-fade-up}
[data-anim="fade-down"].is-in {animation-name:vs-fade-down}
[data-anim="fade-left"].is-in {animation-name:vs-fade-left}
[data-anim="fade-right"].is-in{animation-name:vs-fade-right}
[data-anim="zoom-in"].is-in   {animation-name:vs-zoom-in}
[data-anim="fade"].is-in      {animation-name:vs-fade}

/* Stagger delays */
[data-stagger] > *{opacity:0}
[data-stagger].is-in > *{animation:vs-fade-up .85s cubic-bezier(.22,1,.36,1) both}
[data-stagger].is-in > *:nth-child(1){animation-delay:.05s}
[data-stagger].is-in > *:nth-child(2){animation-delay:.13s}
[data-stagger].is-in > *:nth-child(3){animation-delay:.21s}
[data-stagger].is-in > *:nth-child(4){animation-delay:.29s}
[data-stagger].is-in > *:nth-child(5){animation-delay:.37s}
[data-stagger].is-in > *:nth-child(6){animation-delay:.45s}
[data-stagger].is-in > *:nth-child(7){animation-delay:.53s}
[data-stagger].is-in > *:nth-child(8){animation-delay:.61s}
[data-stagger].is-in > *:nth-child(n+9){animation-delay:.7s}

/* ---------- Hero entrance ---------- */
.vs-hero-in > *{opacity:0;transform:translate3d(0,24px,0);animation:vs-fade-up 1s cubic-bezier(.22,1,.36,1) both}
.vs-hero-in > *:nth-child(1){animation-delay:.15s}
.vs-hero-in > *:nth-child(2){animation-delay:.35s}
.vs-hero-in > *:nth-child(3){animation-delay:.55s}
.vs-hero-in > *:nth-child(4){animation-delay:.75s}
.vs-hero-in > *:nth-child(5){animation-delay:.95s}

/* Hero carousel ken-burns on active slide */
#hero-carousel [data-slide]{transition:opacity 1.6s ease;will-change:opacity,transform}
#hero-carousel [data-slide][data-active]{animation:vs-kenburns 9s ease-out forwards}

/* Soft moving glow behind hero */
.vs-hero-glow{position:absolute;inset:auto;pointer-events:none;width:60rem;height:60rem;left:50%;top:-20%;transform:translateX(-50%);
  background:radial-gradient(closest-side, rgba(120,200,255,.22), transparent 70%);
  filter:blur(10px);animation:vs-float 10s ease-in-out infinite;z-index:0}

/* ---------- Cards & buttons polish ---------- */
.group, [class*="rounded-3xl"], [class*="rounded-2xl"]{transition:transform .45s cubic-bezier(.22,1,.36,1), box-shadow .45s ease, border-color .45s ease}
a[class*="rounded-full"], button[class*="rounded-full"]{transition:transform .35s cubic-bezier(.22,1,.36,1), box-shadow .35s ease, background-color .35s ease, color .35s ease}

/* Lift effect for cards */
.vs-lift{transition:transform .5s cubic-bezier(.22,1,.36,1), box-shadow .5s ease}
.vs-lift:hover{transform:translateY(-6px);box-shadow:0 24px 60px -24px rgba(20,40,80,.28)}

/* Shine sweep on primary buttons */
a.bg-gradient-primary, button.bg-gradient-primary{position:relative;overflow:hidden;isolation:isolate}
a.bg-gradient-primary::after, button.bg-gradient-primary::after{
  content:"";position:absolute;inset:0;background:linear-gradient(120deg,transparent 30%,rgba(255,255,255,.35) 50%,transparent 70%);
  background-size:200% 100%;background-position:-200% 0;transition:background-position .9s ease;pointer-events:none;mix-blend-mode:overlay
}
a.bg-gradient-primary:hover::after, button.bg-gradient-primary:hover::after{background-position:200% 0}

/* Underline grow for nav links */
header nav a{position:relative}
header nav a::after{content:"";position:absolute;left:14px;right:14px;bottom:6px;height:2px;border-radius:2px;
  background:linear-gradient(90deg, var(--primary,#22A6DE), #7fd3ff);
  transform:scaleX(0);transform-origin:right center;transition:transform .35s cubic-bezier(.22,1,.36,1)}
header nav a:hover::after, header nav a[aria-current="page"]::after{transform:scaleX(1);transform-origin:left center}

/* Project / image hover zoom */
.vs-zoom{overflow:hidden}
.vs-zoom img, .vs-zoom > [style*="background-image"]{transition:transform .9s cubic-bezier(.22,1,.36,1)}
.vs-zoom:hover img, .vs-zoom:hover > [style*="background-image"]{transform:scale(1.06)}

/* Counter highlight */
.vs-count{font-variant-numeric:tabular-nums}

/* Smooth section reveal helper */
section{scroll-margin-top:80px}