/* ──────────────────────────────────────────────────────────────────────────
   motion.css — theburnoutpodcasts.com

   PART 1 is the entrance system from the reference site (devassistant.io).
   Their numbers, read off their own stylesheet and kept exactly:
     ease            cubic-bezier(.16, 1, .3, 1)
     word entrance   .95s, from opacity 0 / blur 5px / translateY(45%)
     word stagger    55ms
     rise            1.05s, from translateY(28px)
     visual / card   1.25s, from translateY(38px) scale(.96)
     hero glide      1.15s cubic-bezier(.2,.7,.2,1), travel 24px
     scenes          --scene-progress drives parallax + scale on layers
   Mobile shortens the durations and halves the travel, same as theirs.

   PART 2 is the scrub acts: tall sections where --p (0 → 1) is written by
   motion.js as you scroll, so the scrollbar acts as the timeline.

   No libraries. Nothing animates on a clock.
   ────────────────────────────────────────────────────────────────────────── */

/* ═══ PART 1 · entrances ═════════════════════════════════════════════════ */
.m-root{--enter-ease:cubic-bezier(.16, 1, .3, 1);--scene-shift:48px;}

.m-line{display:block;}
.m-w{white-space:nowrap;display:inline-block;}

.m-root [data-enter=rise]{--enter-delay:.11s;}
.m-root [data-enter=lines]{--enter-delay:30ms;}
.m-root [data-enter=visual]{--enter-delay:.12s;}

/* hidden until the observer has had a look — only when JS is running */
html.m-js .m-root [data-enter-state=pending]{opacity:0;}

.m-root [data-enter-state=visible]{
  animation:m-rise 1.05s var(--enter-ease) var(--enter-delay,0s) backwards;}
.m-root :is([data-enter=visual],[data-enter=card])[data-enter-state=visible]{
  animation-name:m-visual;animation-duration:1.25s;}
.m-root [data-enter=lines][data-enter-state=visible]{animation:none;}
.m-root [data-enter=lines][data-enter-state=visible] .m-w{
  animation:m-word .95s var(--enter-ease)
    calc(var(--enter-delay,0s) + var(--word-delay,0ms)) backwards;}

.m-root [data-enter=hero-lines] .m-line{
  animation:m-glide 1.15s cubic-bezier(.2,.7,.2,1) var(--line-delay,0s) backwards;}
.m-root [data-enter=hero-copy]{--hero-travel:14px;
  animation:m-glide 1.15s cubic-bezier(.2,.7,.2,1) .15s backwards;}
.m-root [data-enter=hero-rise]{
  animation:m-rise 1.1s var(--enter-ease) var(--enter-delay,.25s) backwards;}
.m-root [data-enter=hero-art]{--scene-opacity:.35;
  animation:m-art 1.6s var(--enter-ease) .2s backwards;}

@keyframes m-rise{0%{opacity:0;translate:0 28px}}
@keyframes m-visual{0%{opacity:0;translate:0 38px;scale:.96}}
@keyframes m-word{0%{opacity:0;transform:translateY(45%)}}
@keyframes m-glide{0%{translate:0 var(--hero-travel,24px)}}
@keyframes m-art{0%{opacity:0}}

/* parallax scenes */
.m-root [data-scroll-scene=visual][data-scroll-ready] [data-scroll-layer]{
  translate:0 calc((1 - var(--scene-progress,1)) * var(--scene-shift,48px));
  scale:calc(.93 + var(--scene-progress,1) * .07);
  opacity:calc(var(--scene-opacity,1) * clamp(.12,var(--scene-progress,1) * 1.8,1));}
.m-root [data-scroll-scene=hero][data-scroll-ready] [data-scroll-layer]{
  translate:0 calc(var(--scene-progress,0) * -36px);
  scale:calc(1 + var(--scene-progress,0) * .055);}

.m-root [data-enter]:focus-within{opacity:1;animation:none;}

/* the site's older .reveal fade-up, re-timed to the same ease and distance
   so the whole site moves with one character instead of two */
.m-root .reveal{transform:none;translate:0 28px;
  transition:opacity .95s var(--enter-ease),translate .95s var(--enter-ease);}
.m-root .reveal.visible{translate:0 0;transform:none;}

@media (max-width:640px){
  .m-root{--scene-shift:24px;}
  .m-root :is([data-enter-state=visible],[data-enter-state=initial]){
    animation-duration:.85s;}
  .m-root [data-enter=lines][data-enter-state=visible] .m-w{animation-duration:.8s;}
  .m-root [data-enter=hero-lines]{--hero-travel:16px;}
  .m-root [data-enter=hero-copy]{--hero-travel:10px;}
  .m-root [data-scroll-scene=visual][data-scroll-ready] [data-scroll-layer]{
    scale:calc(.965 + var(--scene-progress,1) * .035);}
  .m-root [data-scroll-scene=hero][data-scroll-ready] [data-scroll-layer]{
    translate:0 calc(var(--scene-progress,0) * -16px);scale:1;}
}
@media (prefers-reduced-motion:reduce),print{
  .m-root [data-enter],
  .m-root [data-enter=hero-lines] .m-line,
  .m-root [data-enter] .m-w,
  .m-root [data-scroll-ready] [data-scroll-layer]{
    opacity:var(--scene-opacity,1) !important;filter:none !important;
    animation:none !important;translate:none !important;scale:none !important;}
}

/* ═══ PART 2 · scrub acts ════════════════════════════════════════════════ */
.m-progress{position:fixed;top:0;left:0;height:2px;width:0;z-index:999;
  background:linear-gradient(90deg,var(--sage),var(--gold));pointer-events:none;}

.m-act{position:relative;}
.m-stage{position:sticky;top:0;height:100vh;overflow:hidden;
  display:flex;align-items:center;justify-content:center;}

/* ACT 1 · flying through the cover wall */
.m-wall{position:absolute;inset:-14%;display:grid;gap:10px;
  grid-template-columns:repeat(8,1fr);align-content:center;
  transform:scale(calc(2.45 - var(--p,0) * 1.62)) rotate(calc((1 - var(--p,0)) * -2.2deg));
  filter:blur(calc((1 - var(--p,0)) * 7px));
  opacity:calc(.30 + var(--p,0) * .52);will-change:transform,filter,opacity;}
.m-wall img{width:100%;aspect-ratio:1;object-fit:cover;border-radius:9px;display:block;}
.m-veil{position:absolute;inset:0;pointer-events:none;
  background:radial-gradient(60% 55% at 50% 50%,
    rgba(250,247,242,calc(.60 + var(--p,0) * .34)) 0%,
    rgba(250,247,242,calc(.26 + var(--p,0) * .50)) 48%,
    rgba(250,247,242,calc(.78 + var(--p,0) * .20)) 100%);}
.m-title{position:relative;z-index:2;text-align:center;padding:0 1.5rem;max-width:62rem;}
.m-title h1{font-family:'Cormorant Garamond',serif;font-weight:600;line-height:1.02;
  font-size:clamp(2.7rem,8.2vw,6.3rem);color:var(--sage-dark);margin:0 0 1.2rem;
  text-wrap:balance;letter-spacing:-.015em;}
.m-title h1 em{font-style:italic;color:var(--sage);display:block;}
.m-title p{max-width:34rem;margin:0 auto;color:var(--ink-soft);font-size:1.1rem;
  line-height:1.72;}
.m-title .m-row{display:flex;gap:.8rem;justify-content:center;flex-wrap:wrap;
  margin-top:2rem;}
.m-cue{position:absolute;bottom:2.1rem;left:50%;transform:translateX(-50%);z-index:3;
  font-size:.66rem;letter-spacing:.24em;text-transform:uppercase;color:var(--muted);
  display:flex;flex-direction:column;align-items:center;gap:.6rem;
  opacity:calc(1 - var(--p,0) * 2.6);}
.m-cue i{width:1px;height:42px;background:linear-gradient(var(--sage),transparent);
  animation:mcue 1.9s ease-in-out infinite;}
@keyframes mcue{0%{transform:scaleY(.15);transform-origin:top}
  50%{transform:scaleY(1);transform-origin:top}
  51%{transform:scaleY(1);transform-origin:bottom}
  100%{transform:scaleY(.15);transform-origin:bottom}}

/* ACT 2 · book → waveform → listener */
.m-morph{position:relative;width:min(560px,90vw);height:330px;}
.m-pane{position:absolute;inset:0;display:flex;flex-direction:column;
  align-items:center;justify-content:center;gap:1.4rem;}
.m-pane h3{font-family:'Cormorant Garamond',serif;font-size:clamp(1.6rem,3.4vw,2.3rem);
  color:var(--sage-dark);margin:0;font-weight:600;text-align:center;}
.m-pane p{margin:0;color:var(--muted);font-size:.92rem;text-align:center;max-width:26rem;
  line-height:1.65;}
.m-p1{opacity:clamp(0,calc(1.25 - var(--p,0) * 4.2),1);
  transform:scale(calc(1 - var(--p,0) * .12));}
.m-p2{opacity:clamp(0,calc(min(var(--p,0) * 4.6 - .9,3.5 - var(--p,0) * 4.3)),1);}
.m-p3{opacity:clamp(0,calc(var(--p,0) * 4.4 - 3.1),1);
  transform:scale(calc(.92 + var(--p,0) * .08));}
.m-book{width:190px;height:132px;position:relative;perspective:900px;}
.m-book .leaf{position:absolute;inset:0;background:#0b1a1b;border:1px solid var(--border);
  border-radius:4px;box-shadow:0 14px 34px -20px rgba(243,241,236,.5);}
.m-book .leaf:nth-child(1){transform:rotateY(calc(var(--p,0) * -118deg));
  transform-origin:left center;background:linear-gradient(135deg,#0b1a1b,var(--warm-white));}
.m-book .leaf:nth-child(2){transform:translateX(2px);}
.m-book .lines{position:absolute;inset:16px;display:flex;flex-direction:column;gap:7px;}
.m-book .lines span{height:3px;background:var(--sage-pale);border-radius:3px;}
.m-book .lines span:nth-child(4){width:62%;}
.m-book .lines span:nth-child(7){width:40%;}
.m-bars{display:flex;align-items:center;gap:3px;height:96px;width:min(440px,84vw);}
.m-bars i{flex:1;background:var(--raise);border-radius:2px;min-width:1px;}
.m-ear{width:168px;height:168px;border-radius:50%;background:var(--sage-pale);
  display:flex;align-items:center;justify-content:center;position:relative;}
.m-ear::before,.m-ear::after{content:'';position:absolute;inset:0;border-radius:50%;
  border:1.5px solid var(--sage-light);opacity:.55;
  transform:scale(calc(1 + (var(--p,0) - .72) * 2.4));}
.m-ear::after{transform:scale(calc(1 + (var(--p,0) - .72) * 4.1));opacity:.26;}
.m-ear span{font-size:2.9rem;}

/* ACT 3 · doors */
.m-doors{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:1.1rem;
  width:min(960px,92vw);}
.m-door{background:#0b1a1b;border:1px solid var(--border);border-radius:18px;
  padding:1.9rem 1.8rem;text-decoration:none;display:block;position:relative;
  overflow:hidden;box-shadow:0 22px 50px -34px rgba(243,241,236,.45);
  opacity:var(--o,0);transform:translate3d(var(--tx,0),var(--ty,30px),0)
    scale(var(--sc,.97));}
.m-door::after{content:'';position:absolute;inset:0;opacity:0;pointer-events:none;
  background:linear-gradient(105deg,transparent 38%,rgba(212,135,78,.18) 50%,transparent 62%);
  transform:translateX(-60%);transition:opacity .25s ease;}
.m-door:hover::after{opacity:1;animation:msweep .85s ease-out;}
@keyframes msweep{to{transform:translateX(60%)}}
.m-door .ic{font-size:1.7rem;display:block;margin-bottom:.7rem;}
.m-door h3{font-family:'Cormorant Garamond',serif;font-size:1.65rem;color:var(--sage-dark);
  margin:0 0 .25rem;font-weight:600;}
.m-door .pr{font-size:.74rem;letter-spacing:.11em;text-transform:uppercase;
  color:var(--gold);font-weight:600;margin-bottom:.7rem;}
.m-door p{margin:0 0 1rem;color:var(--ink-soft);font-size:.93rem;line-height:1.66;}
.m-door .go{font-size:.86rem;color:var(--sage);font-weight:600;}
.m-door .go span{transition:margin .2s ease;display:inline-block;}
.m-door:hover .go span{margin-left:.35rem;}

/* ACT 4 · numbers */
.m-nums{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:1.6rem;
  width:min(900px,92vw);text-align:center;}
.m-num b{display:block;font-family:'Cormorant Garamond',serif;
  font-size:clamp(2.3rem,6vw,4.4rem);color:var(--sage-dark);line-height:1;
  font-variant-numeric:tabular-nums;font-weight:600;}
.m-num span{display:block;font-size:.7rem;letter-spacing:.17em;text-transform:uppercase;
  color:var(--muted);margin-top:.6rem;}

/* ACT 5 · one a day */
.m-cal{display:grid;grid-template-columns:repeat(10,1fr);gap:9px;width:min(520px,88vw);}
.m-cal i{aspect-ratio:1;border-radius:7px;background:var(--sage-pale);display:block;
  transition:background .25s ease,transform .25s ease;}
.m-cal i.lit{background:var(--sage);transform:scale(1.06);}

.m-say{text-align:center;max-width:36rem;margin:0 auto 2.6rem;padding:0 1.5rem;}
.m-say h2{font-family:'Cormorant Garamond',serif;font-size:clamp(2rem,4.6vw,3.2rem);
  color:var(--sage-dark);font-weight:600;line-height:1.1;margin:0 0 .9rem;
  text-wrap:balance;}
.m-say h2 em{font-style:italic;color:var(--sage);}
.m-say p{color:var(--ink-soft);line-height:1.72;margin:0;}
.m-col{display:flex;flex-direction:column;align-items:center;width:100%;}

.m-btn{display:inline-flex;align-items:center;gap:.5rem;padding:.95rem 1.9rem;
  border-radius:999px;text-decoration:none;font-size:.95rem;
  transition:transform .2s ease,box-shadow .2s ease;}
.m-btn:hover{transform:translateY(-2px);}
.m-b1{background:var(--sage);color:#f3f1ec;box-shadow:0 16px 34px -18px rgba(212,135,78,.8);}
.m-b2{background:#0b1a1b;color:var(--sage-dark);border:1px solid var(--border);}

@media (max-width:860px){
  .m-act{height:auto !important;}
  .m-stage{position:static;height:auto;padding:4.5rem 0;}
  .m-stage.m-hero{position:relative;min-height:88vh;display:flex;}
  .m-wall{position:absolute;inset:-10%;grid-template-columns:repeat(5,1fr);}
  .m-morph{height:300px;}
  .m-doors{grid-template-columns:1fr;}
  .m-nums{grid-template-columns:repeat(2,1fr);gap:2rem;}
  .m-cal{grid-template-columns:repeat(6,1fr);}
}
@media (prefers-reduced-motion:reduce){
  .m-wall{transform:none;filter:none;}
  .m-cue i{animation:none;}
  .m-door:hover::after{animation:none;opacity:0;}
}