/* Pharma Lectures — motion. One orchestrated hero entrance, quiet reveals on scroll, and every tappable thing answers the touch. */

/* reveal on scroll */
.reveal{opacity:0;transform:translateY(14px);transition:opacity .6s cubic-bezier(.2,.7,.2,1),transform .6s cubic-bezier(.2,.7,.2,1)}
.reveal.in{opacity:1;transform:none}
.stagger>*{opacity:0;transform:translateY(12px);transition:opacity .5s cubic-bezier(.2,.7,.2,1),transform .5s cubic-bezier(.2,.7,.2,1)}
.stagger.in>*{opacity:1;transform:none}
.stagger.in>:nth-child(1){transition-delay:0s}.stagger.in>:nth-child(2){transition-delay:.08s}.stagger.in>:nth-child(3){transition-delay:.16s}
.stagger.in>:nth-child(4){transition-delay:.24s}.stagger.in>:nth-child(5){transition-delay:.32s}.stagger.in>:nth-child(6){transition-delay:.4s}

/* the one orchestrated moment: hero copy, then the player */
.hero-stack .hero-head.reveal{transition-duration:.7s}
.hero-stack .hero-player.reveal{transition-delay:.2s;transition-duration:.8s}
.hero-stack .hero-body.reveal{transition-delay:.35s;transition-duration:.7s}
.hero-stack .hero-head>*,.hero-stack .hero-body>*{animation:rise .7s cubic-bezier(.2,.7,.2,1) both}
.hero-stack .hero-head>:nth-child(2){animation-delay:.08s}.hero-stack .hero-body>:nth-child(1){animation-delay:.4s}
.hero-stack .hero-body>:nth-child(2){animation-delay:.48s}.hero-stack .hero-body>:nth-child(3){animation-delay:.56s}.hero-stack .hero-body>:nth-child(4){animation-delay:.64s}.hero-stack .hero-body>:nth-child(5){animation-delay:.7s}
@keyframes rise{from{opacity:0;transform:translateY(16px)}to{opacity:1;transform:none}}

/* everything tappable answers */
.btn,.chip,.ans,.ptab,.card,.law-q,.steps3>div,.flow>li,.pricing-mini>div,.modules>li,.proof-row>div,.play,.wa-float{will-change:transform}
.btn:hover{transform:translateY(-2px);box-shadow:0 12px 26px rgba(16,33,58,.16)}
.btn-wa:hover{box-shadow:0 12px 28px rgba(37,211,102,.38)}
.btn:active,.btn.active{transform:translateY(1px) scale(.98);box-shadow:none}
.btn-wa.active,.btn-wa:focus-visible{animation:ring .7s ease-out}
@keyframes ring{0%{box-shadow:0 0 0 0 rgba(37,211,102,.55)}100%{box-shadow:0 0 0 18px rgba(37,211,102,0)}}
.chip:hover,.ans:hover{transform:translateY(-1px)}
.chip.active,.ans.active,.chip:active,.ans:active{animation:wiggle .35s ease}
@keyframes wiggle{0%{transform:scale(1)}30%{transform:scale(.94) rotate(-1.5deg)}60%{transform:scale(1.04) rotate(1deg)}100%{transform:none}}
.card:hover,.card.active{transform:translateY(-4px);box-shadow:0 16px 36px rgba(16,33,58,.12);border-color:#b9cbf0}
.steps3>div,.flow>li,.pricing-mini>div,.modules>li,.law-q{transition:transform .25s cubic-bezier(.2,.7,.2,1),box-shadow .25s,border-color .25s}
.steps3>div:hover,.flow>li:hover,.pricing-mini>div:hover,.modules>li:hover,.steps3>div.active,.flow>li.active,.pricing-mini>div.active,.modules>li.active{transform:translateY(-3px);box-shadow:var(--sh);border-color:#c5d3ea}
.law-q:hover,.law-q.active{transform:translateY(-3px) rotate(-.3deg);box-shadow:0 14px 30px rgba(184,116,26,.14)}
.proof-row>div{transition:transform .25s,border-color .25s}
.proof-row>div:hover,.proof-row>div.active{transform:translateX(4px);border-color:var(--blue)}
.ptab:active,.ptab.active{transform:scale(.97)}
.ptab.on{animation:tabpop .3s cubic-bezier(.2,.9,.3,1.3)}
@keyframes tabpop{0%{transform:scale(.96)}100%{transform:none}}
.pm-v.on,.ptable.tabbed td[data-size].on{animation:numflip .4s cubic-bezier(.2,.7,.2,1)}
@keyframes numflip{0%{opacity:0;transform:translateY(6px)}100%{opacity:1;transform:none}}
.play i{animation:breathe 2.6s ease-in-out infinite}
@keyframes breathe{0%,100%{transform:scale(1)}50%{transform:scale(1.06)}}
.play:hover i,.play.on i{animation:none}
.wa-float:hover,.wa-float.active{transform:scale(1.08) rotate(-6deg)}
.wa-float{transition:transform .2s cubic-bezier(.2,.9,.3,1.3)}
.nav a{position:relative}
.nav a::after{content:"";position:absolute;left:0;right:100%;bottom:-4px;height:2px;background:var(--blue);transition:right .2s}
.nav a:hover::after{right:0}
.brand .mark{transition:transform .35s cubic-bezier(.2,.9,.3,1.3)}
.brand:hover .mark,.brand.active .mark{transform:rotate(-8deg) scale(1.06)}
h1:hover em,h1.active em{text-decoration:underline;text-decoration-color:var(--seal);text-decoration-thickness:3px;text-underline-offset:6px}
.ticks li,.incl li{transition:transform .2s}
.ticks li:hover,.incl li:hover,.ticks li.active,.incl li.active{transform:translateX(4px)}
.ticks li::before,.incl li::before{transition:transform .2s}
.ticks li:hover::before,.incl li:hover::before{transform:scale(1.18)}
.pricing-mini>div:hover .pm-v,.pricing-mini>div.active .pm-v{color:var(--blue)}

/* focus floor */
:focus-visible{outline:3px solid var(--blue);outline-offset:3px}
.btn:focus-visible{outline-offset:4px}

@media(prefers-reduced-motion:reduce){
  *,*::before,*::after{animation:none!important;transition:none!important}
  .reveal,.stagger>*{opacity:1;transform:none}
  .hero-stack .hero-head>*,.hero-stack .hero-body>*{opacity:1}
}