/* ===========================================================================
   Motion. Keyframes plus the scroll-reveal system.

   Everything here is decoration. The .js gate in the header means that if
   JavaScript fails, revealed content is simply visible -- a medical site must
   never render blank because an animation library did not load.
   ========================================================================= */

@keyframes kenburns{
  from{transform:scale(1) translate3d(0,0,0);}
  to{transform:scale(1.12) translate3d(0,-1.5%,0);}
}
@keyframes float{
  0%,100%{transform:translate(0,0) scale(1);}
  33%{transform:translate(28px,-22px) scale(1.06);}
  66%{transform:translate(-22px,16px) scale(.96);}
}
@keyframes bounce{
  0%,20%,50%,80%,100%{transform:translate(-50%,0);}
  40%{transform:translate(-50%,-12px);}
  60%{transform:translate(-50%,-6px);}
}
@keyframes pulseGlow{
  0%,100%{box-shadow:0 0 0 0 rgba(81,194,188,.45),0 20px 60px rgba(0,0,0,.35);}
  50%{box-shadow:0 0 0 22px rgba(81,194,188,0),0 20px 60px rgba(0,0,0,.35);}
}
@keyframes fadeUp{
  from{opacity:0;transform:translateY(26px);}
  to{opacity:1;transform:translateY(0);}
}
@keyframes fadeDown{
  from{opacity:0;transform:translateY(-18px);}
  to{opacity:1;transform:translateY(0);}
}
@keyframes drift{
  from{transform:translateY(0) rotate(0deg);}
  to{transform:translateY(-26px) rotate(12deg);}
}

/* Hero entrance -- staged so the eye lands on the headline first.

   The delays are deliberately short. An earlier pass ran to 1.05s before the
   stats appeared, which meant the "Book an Appointment" button was not on
   screen for the first second of a visit. On a clinic site the booking button
   is the point of the page; a cinematic stagger that hides it is a cost, not a
   flourish. The sequence still reads as layered, it just finishes fast. */
.hero__badge{animation:fadeDown .55s var(--ease) .08s both;}
.hero h1{animation:fadeUp .6s var(--ease) .16s both;}
.hero__sub{animation:fadeUp .6s var(--ease) .28s both;}
.hero__ctas{animation:fadeUp .6s var(--ease) .38s both;}
.hero__stats{animation:fadeUp .6s var(--ease) .48s both;}

/* Glow on the featured HBOT image. */
.glow{animation:pulseGlow 3.4s ease-in-out infinite;border-radius:var(--r);}

/* Floating medical crosses in the CTA band. */
.drift{position:absolute;color:rgba(255,255,255,.14);font-size:2rem;animation:drift 9s ease-in-out infinite alternate;z-index:1;}

/* Scroll reveal. Only hides when JS is present, and AOS drives the rest. */
.js [data-reveal]{opacity:0;transform:translateY(26px);transition:opacity .7s var(--ease),transform .7s var(--ease);}
.js [data-reveal].is-in{opacity:1;transform:none;}
.js [data-reveal][data-delay="1"]{transition-delay:.1s;}
.js [data-reveal][data-delay="2"]{transition-delay:.2s;}
.js [data-reveal][data-delay="3"]{transition-delay:.3s;}
.js [data-reveal][data-delay="4"]{transition-delay:.4s;}
.js [data-reveal][data-delay="5"]{transition-delay:.5s;}

@media (prefers-reduced-motion:reduce){
  .hero__media img,.blob,.drift,.glow,.hero__scroll{animation:none!important;}
  .js [data-reveal]{opacity:1!important;transform:none!important;}
}