/* Motion layer. Everything here is extra polish on top of the handoff.
   Hidden start states only apply under html.js, so the page reads fine without JS.
   prefers-reduced-motion switches all of it off (bottom of the file). */

/* ---------- Generic scroll reveal ---------- */
.js .rv{opacity:0;transform:translateY(24px);transition:opacity .7s var(--ease-out) var(--rv-d,0s),transform .7s var(--ease-out) var(--rv-d,0s)}
.js .rv--left{transform:translateX(-20px)}
.js .rv--pop{transform:scale(.94)}
.js .rv.is-in{opacity:1;transform:none}

/* ---------- Hero entrance (plays on load) ---------- */
.k-line{display:block;overflow:hidden;padding-bottom:.06em;margin-bottom:-.06em}
.k-line>span{display:block}
.js .k-hero .k-line>span{transform:translateY(105%);transition:transform .9s var(--ease-out) var(--rv-d,0s)}
.js .k-hero.is-in .k-line>span{transform:none}
.js .k-hero .h-in{opacity:0;transform:translateY(16px);transition:opacity .7s var(--ease-out) var(--rv-d,0s),transform .7s var(--ease-out) var(--rv-d,0s)}
.js .k-hero.is-in .h-in{opacity:1;transform:none}
.js .k-hero .k-phone{opacity:0;transform:translateY(60px) rotate(-3deg) scale(.96);transition:opacity .9s var(--ease-out) .55s,transform 1.1s cubic-bezier(.16,1,.3,1) .55s}
.js .k-hero.is-in .k-phone{opacity:1;transform:none}
.js .k-hero-stripe>i{transform:scaleX(0);transform-origin:left;transition:transform .9s var(--ease-out)}
.js .k-hero-stripe>i:nth-child(2){transition-delay:.12s}.js .k-hero-stripe>i:nth-child(3){transition-delay:.24s}.js .k-hero-stripe>i:nth-child(4){transition-delay:.36s}
.js .k-hero-stripe.is-in>i{transform:none}

/* Eyebrow dot breathes */
.k-hero .lm-eyebrow__dot{animation:k-breathe 2.4s ease-in-out infinite}
@keyframes k-breathe{0%,100%{box-shadow:0 0 0 0 rgba(255,210,63,.55)}50%{box-shadow:0 0 0 6px rgba(255,210,63,0)}}

/* Primary CTA: one light sweep after the hero has landed, then on hover */
.k-shine{position:relative;overflow:hidden;isolation:isolate}
.k-shine::after{content:"";position:absolute;inset:0;z-index:-1;background:linear-gradient(105deg,transparent 35%,rgba(255,255,255,.55) 50%,transparent 65%);transform:translateX(-120%)}
.k-hero.is-in .k-shine::after{animation:k-sweep 1.1s ease-in-out 1.6s 1}
.k-shine:hover::after{animation:k-sweep .9s ease-in-out 1}
@keyframes k-sweep{to{transform:translateX(120%)}}

/* ---------- Demo phone ---------- */
/* Screen change: forward slides in from the right, back from the left */
.k-pick.is-enter{animation:k-from-left .42s var(--ease-out)}
.k-np.is-enter{animation:k-from-right .42s var(--ease-out)}
@keyframes k-from-right{from{opacity:0;transform:translateX(28px)}to{opacity:1;transform:none}}
@keyframes k-from-left{from{opacity:0;transform:translateX(-28px)}to{opacity:1;transform:none}}
/* Pick screen pieces drop in one after the other */
.k-pick.is-enter>*{animation:k-rise .5s var(--ease-out) both}
.k-pick.is-enter>:nth-child(2){animation-delay:.05s}.k-pick.is-enter>:nth-child(3){animation-delay:.1s}.k-pick.is-enter>:nth-child(4){animation-delay:.16s}
@keyframes k-rise{from{opacity:0;transform:translateY(14px)}to{opacity:1;transform:none}}
.k-lvl-tile:active{transform:scale(.97)}
.k-lvl-big{transition:transform .35s var(--ease-out);transform-origin:left bottom}
.k-lvl-tile:hover .k-lvl-big{transform:scale(1.04)}
/* Now-playing parts cascade in */
.k-np.is-enter>*{animation:k-rise .5s var(--ease-out) both}
.k-np.is-enter>:nth-child(2){animation-delay:.06s}.k-np.is-enter>:nth-child(3){animation-delay:.12s}.k-np.is-enter>:nth-child(4){animation-delay:.18s}.k-np.is-enter>:nth-child(5){animation-delay:.24s}.k-np.is-enter>:nth-child(6){animation-delay:.3s}

/* Play button invites the first tap with a soft ring */
.k-np-play{position:relative}
.k-np-play.is-idle::before{content:"";position:absolute;inset:0;border-radius:50%;box-shadow:0 0 0 0 rgba(255,210,63,.6);animation:k-ring 1.8s ease-out infinite}
@keyframes k-ring{to{box-shadow:0 0 0 16px rgba(255,210,63,0)}}
.k-np-play>span{transition:transform .18s var(--ease-out)}
.k-np-play.is-flip>span{animation:k-icon .28s var(--ease-out)}
@keyframes k-icon{from{transform:scale(.4) rotate(-30deg);opacity:0}to{transform:none;opacity:1}}

/* Cover: watermark drifts while the episode plays, three bars bounce like a level meter */
.k-cover-lvl{transition:transform 1.2s var(--ease-out)}
.k-a-cover.is-playing .k-cover-lvl{animation:k-drift 7s ease-in-out infinite alternate}
@keyframes k-drift{from{transform:translate(0,0) rotate(0)}to{transform:translate(-10px,6px) rotate(-3deg)}}
.k-eq{position:absolute;right:16px;bottom:16px;display:flex;align-items:flex-end;gap:3px;height:18px;opacity:0;transition:opacity .25s ease}
.k-eq i{width:4px;height:100%;border-radius:2px;background:var(--navy);transform-origin:bottom;transform:scaleY(.3)}
.k-a-cover.is-playing .k-eq{opacity:1}
.k-a-cover.is-playing .k-eq i{animation:k-eq .9s ease-in-out infinite alternate}
.k-a-cover.is-playing .k-eq i:nth-child(2){animation-duration:.7s;animation-delay:-.3s}
.k-a-cover.is-playing .k-eq i:nth-child(3){animation-duration:1.1s;animation-delay:-.6s}
@keyframes k-eq{from{transform:scaleY(.25)}to{transform:scaleY(1)}}

/* Thumb grows while dragging, fills animate smoothly between ticks */
.k-a-thumb{transition:transform .15s var(--ease-out)}
.k-a-track.is-drag .k-a-thumb,.k-a-track:hover .k-a-thumb{transform:scale(1.25)}
.k-a-seg i{transition:width .25s linear}
.k-a-track.is-drag .k-a-seg i{transition:none}
.k-a-rate.is-bump{animation:k-bump .25s var(--ease-out)}
@keyframes k-bump{50%{transform:scale(1.15)}}

/* Sheets also slide away when closed */
.k-sheet.is-closing{animation:k-down .24s ease-in forwards}
@keyframes k-down{from{transform:none}to{transform:translateY(100%)}}
.k-sheet .lm-chip{animation:k-chip .35s var(--ease-out) both;animation-delay:calc(var(--i,0) * 18ms + .12s)}
@keyframes k-chip{from{opacity:0;transform:translateY(8px) scale(.9)}to{opacity:1;transform:none}}
.k-words-bar{transition:transform .15s var(--ease-out)}
.k-words-bar:hover{transform:translateY(-2px)}
.k-words-bar:active{transform:scale(.98)}

/* ---------- Science ---------- */
.k-boost-h .k-w{display:inline-block;overflow:hidden;vertical-align:top;padding-bottom:.08em;margin-bottom:-.08em}
.k-boost-h .k-w>span{display:inline-block}
.js .k-boost-h .k-w>span{transform:translateY(110%);transition:transform .9s var(--ease-out) var(--rv-d,0s)}
.js .k-boost-h.is-in .k-w>span{transform:none}
.k-sci .lm-sci{animation:k-rise .55s var(--ease-out) both;animation-delay:calc(var(--i,0) * 90ms)}
.k-sci .lm-sci__bar{transform-origin:left;animation:k-bar .7s var(--ease-out) both;animation-delay:calc(var(--i,0) * 90ms + .2s)}
@keyframes k-bar{from{transform:scaleX(0)}to{transform:none}}
.k-sci.is-closing .lm-sci{animation:k-fade-out .18s ease-in forwards}
@keyframes k-fade-out{to{opacity:0;transform:translateY(8px)}}
.lm-sci{transition:transform .2s var(--ease-out),box-shadow .2s ease}
.lm-sci:hover{transform:translateY(-3px)}

/* ---------- Spaced-repetition timeline ---------- */
.js .k-sr-line{transform:scaleX(0);transform-origin:left;transition:transform 1.6s cubic-bezier(.45,.05,.25,1) .1s}
.js .k-sr.is-in .k-sr-line{transform:none}
.js .k-sr-stop .k-sr-dot{transform:scale(0);transition:transform .45s cubic-bezier(.16,1,.3,1) var(--rv-d,0s)}
.js .k-sr-stop .k-sr-day,.js .k-sr-stop .k-sr-lbl{opacity:0;transform:translateY(12px);transition:opacity .5s var(--ease-out) var(--rv-d,0s),transform .5s var(--ease-out) var(--rv-d,0s)}
.js .k-sr-stop .k-sr-lbl{transform:translateY(-6px)}
.js .k-sr.is-in .k-sr-stop .k-sr-dot{transform:none}
.js .k-sr.is-in .k-sr-stop .k-sr-day,.js .k-sr.is-in .k-sr-stop .k-sr-lbl{opacity:1;transform:none}
/* After the line has drawn, each dot pings once in order: the word coming back */
.k-sr.is-done .k-sr-dot{animation:k-ping 1s ease-out both;animation-delay:var(--pd,0s)}
@keyframes k-ping{0%{box-shadow:0 0 0 0 rgba(255,210,63,.55)}100%{box-shadow:0 0 0 14px rgba(255,210,63,0)}}
.k-sr-stop.is-first .k-sr-dot{--pc:rgba(242,107,91,.55)}

/* ---------- Save words ---------- */
.k-shot{animation:k-float 6s ease-in-out infinite}
@keyframes k-float{0%,100%{transform:translateY(0) rotate(-1deg)}50%{transform:translateY(-8px) rotate(1deg)}}
.k-way-ic{transition:transform .25s var(--ease-out),background-color .2s ease}
.k-way:hover .k-way-ic{transform:translateY(-2px) rotate(-4deg);background:#24345A}
.k-src{transition:box-shadow .25s ease}
.k-src:hover{box-shadow:inset 0 0 0 1px var(--border-on-dark-strong)}

/* ---------- Plans ---------- */
.lm-plan{transition:transform .25s var(--ease-out),box-shadow .25s ease}
.lm-plan:hover{transform:translateY(-4px)}
.lm-plan--pop{position:relative}
.k-pop-tag{position:absolute;top:-11px;right:20px;background:var(--yellow-500);color:var(--navy);font:700 11px/1 var(--font-body);letter-spacing:.06em;text-transform:uppercase;padding:6px 10px;border-radius:999px}
.lm-plan__amt [data-m]{display:inline-block}
.lm-plan__amt [data-m].is-roll{animation:k-roll .42s var(--ease-out)}
@keyframes k-roll{from{opacity:0;transform:translateY(-.5em)}to{opacity:1;transform:none}}
.lm-plan__billed{display:grid;grid-template-rows:0fr;opacity:0;transition:grid-template-rows .3s var(--ease-out),opacity .3s ease;margin:-6px 0 -8px}
.lm-plan__billed>span{overflow:hidden}
.lm-plan__billed.is-on{grid-template-rows:1fr;opacity:1;margin-bottom:0}
.lm-toggle__save{transition:transform .2s var(--ease-out)}
.lm-toggle button:hover .lm-toggle__save{transform:rotate(-4deg) scale(1.06)}

/* ---------- Final CTA ---------- */
.k-final .lm-h2 .k-w{display:inline-block}
.js .k-final .lm-h2 .k-w{opacity:0;transform:translateY(.4em) scale(.9);transition:opacity .5s var(--ease-out) var(--rv-d,0s),transform .6s cubic-bezier(.16,1,.3,1) var(--rv-d,0s)}
.js .k-final .lm-h2.is-in .k-w{opacity:1;transform:none}
.k-final .lm-btn--dark .lm-btn__arrow{animation:k-nudge 1.8s ease-in-out infinite}
@keyframes k-nudge{0%,60%,100%{transform:none}30%{transform:translateX(4px)}}

/* ---------- Waitlist dialog ---------- */
.lm-modal[hidden]{display:none}
.lm-modal.is-closing{animation:lm-fade .18s ease reverse forwards}
.lm-modal.is-closing .lm-dialog{animation:k-fade-out .18s ease-in forwards}
.k-done{animation:k-rise .45s var(--ease-out)}
.k-check{width:56px;height:56px;border-radius:50%;background:var(--teal-500);display:grid;place-items:center;animation:k-pop .5s cubic-bezier(.16,1,.3,1)}
.k-check svg{width:28px;height:28px;stroke:var(--navy);stroke-width:3;fill:none;stroke-linecap:round;stroke-linejoin:round;stroke-dasharray:30;stroke-dashoffset:30;animation:k-draw .4s ease-out .25s forwards}
@keyframes k-pop{from{transform:scale(0)}to{transform:none}}
@keyframes k-draw{to{stroke-dashoffset:0}}

/* ---------- Reduced motion: everything visible, nothing moves ---------- */
@media (prefers-reduced-motion:reduce){
  *,*::before,*::after{animation:none!important;transition:none!important}
  .js .rv,.js .k-hero .h-in,.js .k-hero .k-phone,.js .k-hero .k-line>span,.js .k-hero-stripe>i,
  .js .k-boost-h .k-w>span,.js .k-sr-line,.js .k-sr-stop .k-sr-dot,.js .k-sr-stop .k-sr-day,.js .k-sr-stop .k-sr-lbl,
  .js .k-final .lm-h2 .k-w{opacity:1!important;transform:none!important}
  .k-check svg{stroke-dashoffset:0}
}