/* =========================================================
   Dr. Luis Rodríguez — Animaciones de scroll
   Intersection Observer + CSS transforms + stagger.
   Respetar prefers-reduced-motion.
   ========================================================= */

/* ---------- Base: elementos ocultos antes de entrar ---------- */
[data-reveal]{opacity:0;will-change:transform,opacity}

/* ---------- Fade up (default) ---------- */
[data-reveal="up"]{transform:translateY(clamp(24px,4vw,48px))}
[data-reveal="up"].is-visible{opacity:1;transform:translateY(0)}

/* ---------- Fade down ---------- */
[data-reveal="down"]{transform:translateY(clamp(-24px,-4vw,-48px))}
[data-reveal="down"].is-visible{opacity:1;transform:translateY(0)}

/* ---------- Fade left ---------- */
[data-reveal="left"]{transform:translateX(clamp(-32px,-5vw,-60px))}
[data-reveal="left"].is-visible{opacity:1;transform:translateX(0)}

/* ---------- Fade right ---------- */
[data-reveal="right"]{transform:translateX(clamp(32px,5vw,60px))}
[data-reveal="right"].is-visible{opacity:1;transform:translateX(0)}

/* ---------- Scale up (cards) ---------- */
[data-reveal="scale"]{transform:scale(.92);transform-origin:center bottom}
[data-reveal="scale"].is-visible{opacity:1;transform:scale(1)}

/* ---------- Zoom in suave ---------- */
[data-reveal="zoom"]{transform:scale(.85)}
[data-reveal="zoom"].is-visible{opacity:1;transform:scale(1)}

/* ---------- Clip reveal (de abajo hacia arriba) ---------- */
[data-reveal="clip"]{clip-path:inset(100% 0 0 0)}
[data-reveal="clip"].is-visible{clip-path:inset(0 0 0 0);opacity:1}

/* ---------- Blur in ---------- */
[data-reveal="blur"]{filter:blur(8px);transform:translateY(16px)}
[data-reveal="blur"].is-visible{filter:blur(0);opacity:1;transform:translateY(0)}

/* ---------- Transición común ---------- */
[data-reveal].is-visible{
  transition:
    opacity .7s cubic-bezier(.215,.61,.355,1),
    transform .7s cubic-bezier(.215,.61,.355,1),
    filter .7s cubic-bezier(.215,.61,.355,1),
    clip-path .8s cubic-bezier(.215,.61,.355,1);
}

/* ---------- Stagger: delay progresivo para hijos ---------- */
[data-stagger] > [data-reveal]:nth-child(1){transition-delay:.05s}
[data-stagger] > [data-reveal]:nth-child(2){transition-delay:.12s}
[data-stagger] > [data-reveal]:nth-child(3){transition-delay:.19s}
[data-stagger] > [data-reveal]:nth-child(4){transition-delay:.26s}
[data-stagger] > [data-reveal]:nth-child(5){transition-delay:.33s}
[data-stagger] > [data-reveal]:nth-child(6){transition-delay:.40s}
[data-stagger] > [data-reveal]:nth-child(7){transition-delay:.47s}
[data-stagger] > [data-reveal]:nth-child(8){transition-delay:.54s}
[data-stagger] > [data-reveal]:nth-child(9){transition-delay:.61s}

/* ---------- Hero-specific animations ---------- */
.hero__content .eyebrow{opacity:0;transform:translateY(20px)}
.hero__content .h1{opacity:0;transform:translateY(30px)}
.hero__content .lead{opacity:0;transform:translateY(25px)}
.hero__actions{opacity:0;transform:translateY(20px)}
.hero__features{opacity:0;transform:translateY(20px)}
.hero__doctor{opacity:0;transform:translateX(60px)}

.hero.is-animated .hero__content .eyebrow{opacity:1;transform:translateY(0);transition:opacity .6s .1s cubic-bezier(.215,.61,.355,1),transform .6s .1s cubic-bezier(.215,.61,.355,1)}
.hero.is-animated .hero__content .h1{opacity:1;transform:translateY(0);transition:opacity .7s .25s cubic-bezier(.215,.61,.355,1),transform .7s .25s cubic-bezier(.215,.61,.355,1)}
.hero.is-animated .hero__content .lead{opacity:1;transform:translateY(0);transition:opacity .6s .45s cubic-bezier(.215,.61,.355,1),transform .6s .45s cubic-bezier(.215,.61,.355,1)}
.hero.is-animated .hero__actions{opacity:1;transform:translateY(0);transition:opacity .6s .6s cubic-bezier(.215,.61,.355,1),transform .6s .6s cubic-bezier(.215,.61,.355,1)}
.hero.is-animated .hero__features{opacity:1;transform:translateY(0);transition:opacity .6s .75s cubic-bezier(.215,.61,.355,1),transform .6s .75s cubic-bezier(.215,.61,.355,1)}
.hero.is-animated .hero__doctor{opacity:1;transform:translateX(0);transition:opacity .9s .3s cubic-bezier(.215,.61,.355,1),transform .9s .3s cubic-bezier(.215,.61,.355,1)}

/* ---------- KPI counter glow ---------- */
.kpi.is-visible .kpi__value{animation:kpi-glow .6s .3s ease-out both}
@keyframes kpi-glow{
  0%{opacity:0;transform:scale(.7)}
  60%{transform:scale(1.05)}
  100%{opacity:1;transform:scale(1)}
}

/* ---------- Service card hover elevate ---------- */
.service{transition:transform .35s cubic-bezier(.215,.61,.355,1),box-shadow .35s ease}
.service:hover{transform:translateY(-6px);box-shadow:0 24px 48px rgba(15,39,58,.12)}

/* ---------- Surgery card hover ---------- */
.sx-card{transition:transform .3s cubic-bezier(.215,.61,.355,1),box-shadow .3s ease}
.sx-card:hover{transform:translateY(-4px);box-shadow:0 20px 44px rgba(15,39,58,.1)}

/* ---------- CTA badge pulse ---------- */
.cta__badge{animation:badge-pulse 2.5s ease-in-out infinite}
@keyframes badge-pulse{
  0%,100%{transform:scale(1)}
  50%{transform:scale(1.06)}
}

/* ---------- WhatsApp bounce ---------- */
.wa-float{animation:wa-bounce 2s 1s ease-in-out 3}
@keyframes wa-bounce{
  0%,20%,50%,80%,100%{transform:translateY(0)}
  40%{transform:translateY(-8px)}
  60%{transform:translateY(-4px)}
}
.wa-float:hover{animation:none;transform:translateY(-2px)}

/* ---------- Reduced motion: desactivar todo ---------- */
@media (prefers-reduced-motion:reduce){
  [data-reveal],[data-reveal].is-visible,
  .hero__content .eyebrow,.hero__content .h1,.hero__content .lead,
  .hero__actions,.hero__features,.hero__doctor,
  .hero.is-animated .hero__content .eyebrow,
  .hero.is-animated .hero__content .h1,
  .hero.is-animated .hero__content .lead,
  .hero.is-animated .hero__actions,
  .hero.is-animated .hero__features,
  .hero.is-animated .hero__doctor{
    opacity:1!important;transform:none!important;filter:none!important;
    clip-path:none!important;transition:none!important;animation:none!important
  }
  .wa-float,.cta__badge{animation:none!important}
  .site-header,.site-header__inner,.brand__logo{transition:none!important}
}