/* Motion tokens, keyframes and the scroll-reveal system shared by every section */
:root{
  --ease-out-expo:cubic-bezier(.16,1,.3,1);
  --ease-standard:cubic-bezier(.4,0,.2,1);
  --dur-fast:150ms;
  --dur-base:300ms;
  --dur-slow:700ms;
  --dur-reveal:900ms;
}

/* keyframes */
@keyframes dash{to{stroke-dashoffset:-32}}
@keyframes draw{from{stroke-dashoffset:var(--len,1200)}to{stroke-dashoffset:0}}
@keyframes ecg{0%{stroke-dashoffset:var(--len,600)}60%,100%{stroke-dashoffset:0}}
@keyframes rise{from{opacity:0;transform:translateY(28px)}to{opacity:1;transform:none}}
@keyframes clip-up{from{transform:translateY(110%)}to{transform:none}}
@keyframes float{0%,100%{transform:translateY(0)}50%{transform:translateY(-12px)}}
@keyframes float-tilt{0%,100%{transform:translateY(0) rotate(-2deg)}50%{transform:translateY(-14px) rotate(1deg)}}
@keyframes ping-ring{0%{transform:scale(1);opacity:.7}100%{transform:scale(2.4);opacity:0}}
@keyframes glow-pulse{0%,100%{box-shadow:0 0 0 0 rgba(163,230,53,.45),0 10px 30px -10px rgba(163,230,53,.5)}50%{box-shadow:0 0 0 10px rgba(163,230,53,0),0 16px 44px -8px rgba(163,230,53,.7)}}
@keyframes shine{0%{transform:translateX(-160%) skewX(-20deg)}60%,100%{transform:translateX(260%) skewX(-20deg)}}
@keyframes marquee{to{transform:translateX(-50%)}}
@keyframes spin-slow{to{transform:rotate(360deg)}}
@keyframes kenburns{from{transform:scale(1.05) translate3d(0,0,0)}to{transform:scale(1.18) translate3d(-2%,-3%,0)}}
@keyframes bar-grow{from{transform:scaleY(0)}to{transform:scaleY(1)}}
@keyframes bar-grow-x{from{transform:scaleX(0)}to{transform:scaleX(1)}}
@keyframes beam{0%{top:-15%;opacity:0}10%{opacity:1}90%{opacity:1}100%{top:100%;opacity:0}}
@keyframes scroll-dot{0%{transform:translateY(0);opacity:0}30%{opacity:1}100%{transform:translateY(14px);opacity:0}}
@keyframes blink{50%{opacity:0}}
@keyframes modal-in{from{opacity:0;transform:translateY(24px) scale(.96);filter:blur(8px)}to{opacity:1;transform:none;filter:none}}
@keyframes backdrop-in{from{opacity:0}to{opacity:1}}
@keyframes toast-in{from{opacity:0;transform:translate(-50%,20px)}to{opacity:1;transform:translate(-50%,0)}}

/* utility animation classes */
.anim-float{animation:float 6s var(--ease-standard) infinite}
.anim-float-tilt{animation:float-tilt 7s var(--ease-standard) infinite}
.anim-float-late{animation:float 7s var(--ease-standard) 1.2s infinite}
.anim-glow{animation:glow-pulse 2.6s var(--ease-standard) infinite}
.anim-spin-slow{animation:spin-slow 22s linear infinite}
.anim-kenburns{animation:kenburns 24s ease-in-out infinite alternate}
.anim-blink{animation:blink 1s steps(1) infinite}
.anim-dash{stroke-dasharray:6 10;animation:dash 1.2s linear infinite}
.anim-ping{position:relative}
.anim-ping::after{content:"";position:absolute;inset:0;border-radius:inherit;background:inherit;animation:ping-ring 1.8s var(--ease-out-expo) infinite;z-index:-1}

/* line drawing: paths start hidden and draw when their section is revealed */
.draw-path{stroke-dasharray:var(--len,1200);stroke-dashoffset:var(--len,1200)}
.is-visible .draw-path,.draw-path.is-visible{animation:draw 2.4s var(--ease-out-expo) forwards}
.ecg-path{stroke-dasharray:var(--len,600);animation:ecg 2.8s linear infinite}

/* bar charts grow from the baseline */
.bar{transform-origin:bottom;transform:scaleY(0)}
.is-visible .bar{animation:bar-grow 1.1s var(--ease-out-expo) forwards}
.is-visible .bar:nth-child(2){animation-delay:.08s}
.is-visible .bar:nth-child(3){animation-delay:.16s}
.is-visible .bar:nth-child(4){animation-delay:.24s}
.is-visible .bar:nth-child(5){animation-delay:.32s}
.is-visible .bar:nth-child(6){animation-delay:.40s}
.is-visible .bar:nth-child(7){animation-delay:.48s}
.is-visible .bar:nth-child(8){animation-delay:.56s}
.bar-x{transform-origin:left;transform:scaleX(0)}
.is-visible .bar-x{animation:bar-grow-x 1.4s var(--ease-out-expo) .2s forwards}

/* scroll reveal: [data-reveal] + optional variant, toggled by js/reveal.js */
html [data-reveal]{opacity:0;transform:translateY(32px);filter:blur(6px);transition:opacity var(--dur-reveal) var(--ease-out-expo),transform var(--dur-reveal) var(--ease-out-expo),filter var(--dur-reveal) var(--ease-out-expo)}
html [data-reveal="left"]{transform:translateX(-40px)}
html [data-reveal="right"]{transform:translateX(40px)}
html [data-reveal="scale"]{transform:scale(.92)}
html [data-reveal="blur"]{transform:none;filter:blur(18px)}
html [data-reveal].is-visible{opacity:1;transform:none;filter:none}
.d-1{transition-delay:80ms!important}
.d-2{transition-delay:160ms!important}
.d-3{transition-delay:240ms!important}
.d-4{transition-delay:320ms!important}
.d-5{transition-delay:400ms!important}
.d-6{transition-delay:480ms!important}
.d-7{transition-delay:560ms!important}
.d-8{transition-delay:640ms!important}

/* masked headline lines: each .line-mask > span slides up on reveal */
.line-mask{display:block;overflow:hidden;padding-bottom:.18em;margin-bottom:-.18em}
.line-mask>span{display:inline-block;transform:translateY(110%)}
.is-visible .line-mask>span{animation:clip-up 1.1s var(--ease-out-expo) forwards}
.is-visible .line-mask:nth-child(2)>span{animation-delay:.12s}
.is-visible .line-mask:nth-child(3)>span{animation-delay:.24s}

/* late fade for chart areas, progress ring, scroll cue */
.fade-late{opacity:0;transition:opacity 1.2s ease .8s}
.is-visible .fade-late{opacity:1}
.ring{stroke-dasharray:100;stroke-dashoffset:100;transition:stroke-dashoffset 2.2s var(--ease-out-expo) .2s}
.is-visible .ring{stroke-dashoffset:var(--ring,0)}
.anim-scroll-dot{animation:scroll-dot 1.8s var(--ease-standard) infinite}

/* replay helper for the animation catalogue */
.replaying,.replaying *{animation:none!important;transition:none!important}

@media (prefers-reduced-motion:reduce){
  *,*::before,*::after{animation-duration:.01ms!important;animation-iteration-count:1!important;transition-duration:.01ms!important;scroll-behavior:auto!important}
  html [data-reveal]{opacity:1;transform:none;filter:none}
  .line-mask>span,.bar,.bar-x{transform:none}
  .draw-path{stroke-dashoffset:0}
  .ring{stroke-dashoffset:var(--ring,0)}
  .fade-late{opacity:1}
}