/* SNK Business - animations.css (works with style.css: .site-header .hero .service-card .stat ...) */
:root{--ease:cubic-bezier(.2,.7,.2,1)}

/* 1 + 2: scroll reveal + stagger (class added by JS only) */
.rv{opacity:0;transform:translateY(28px);
  transition:opacity .75s var(--ease),transform .75s var(--ease),box-shadow .35s ease,border-color .35s ease,background .35s ease;
  transition-delay:var(--d,0ms);will-change:opacity,transform}
.rv.in{opacity:1;transform:none}
.rv.done{transition-delay:0ms;will-change:auto}
.hero-visual.rv{transform:translateY(28px) scale(.96)}
.hero-visual.rv.in{transform:none}

/* keep the featured card raised (style.css sets translateY(-14px)) */
.service-card.featured.rv{transform:translateY(40px)}
.service-card.featured.rv.in{transform:translateY(-14px)}
.service-card.featured.rv.in.done:hover{transform:translateY(-22px)}
@media(max-width:1100px){
  .service-card.featured.rv{transform:translateY(28px)}
  .service-card.featured.rv.in{transform:none}
  .service-card.featured.rv.in.done:hover{transform:translateY(-8px)}
}

/* 3: header (style.css already styles .scrolled; also works on any <header>) */
header.scrolled{-webkit-backdrop-filter:saturate(180%) blur(14px);backdrop-filter:saturate(180%) blur(14px)}

/* 5: scroll progress bar */
#scroll-progress{position:fixed;top:0;left:0;height:3px;width:100%;z-index:9999;
  transform:scaleX(0);transform-origin:0 50%;pointer-events:none;
  background:linear-gradient(90deg,#91aa16,#b8d62b,#c8e63b)}

/* 7: card lift + glow */
.service-card.in.done:hover,.program.in.done:hover{
  box-shadow:0 22px 50px rgba(16,38,0,.14),0 0 0 1px rgba(184,214,43,.55)}
.about-point{transition:transform .3s var(--ease)}
.about-point:hover{transform:translateX(6px)}
.why-item{transition:transform .3s var(--ease)}
.why-item:hover{transform:translateX(6px)}
.program.in.done{transition:transform .35s var(--ease),box-shadow .35s ease,opacity .5s ease}
.program.in.done:hover{transform:translateY(-8px)}

/* 9: button shine */
.btn,.nav-cta,.form-button{position:relative;overflow:hidden}
.btn::after,.nav-cta::after,.form-button::after{
  content:"";position:absolute;top:0;left:-80%;width:50%;height:100%;pointer-events:none;
  background:linear-gradient(115deg,transparent,rgba(255,255,255,.45),transparent);
  transform:skewX(-20deg);transition:left .75s var(--ease)}
.btn:hover::after,.nav-cta:hover::after,.form-button:hover::after{left:140%}

/* 14: FAQ + filter (only if those exist) */
.faq-a:not([hidden]){animation:faqIn .38s var(--ease)}
@keyframes faqIn{from{opacity:0;transform:translateY(-8px)}to{opacity:1;transform:none}}
.refilter .program:not([hidden]){animation:cardPop .45s var(--ease) both;animation-delay:var(--pd,0ms)}
@keyframes cardPop{from{opacity:0;transform:translateY(16px) scale(.97)}to{opacity:1;transform:none}}

@media (prefers-reduced-motion:reduce){
  .rv{opacity:1!important;transform:none!important;transition:none!important}
  .service-card.featured.rv{transform:translateY(-14px)!important}
  #scroll-progress{display:none}
}