/* Motion and visual layer for the narrative pages. Everything degrades to a static,
   fully readable page under prefers-reduced-motion or without JavaScript. */
.progress{position:fixed;top:0;left:0;height:3px;width:100%;transform-origin:0 50%;transform:scaleX(0);background:linear-gradient(90deg,var(--green),var(--lime));z-index:30}
.hero{position:relative}
.hero-grid{display:grid;grid-template-columns:1.05fr .95fr;gap:48px;align-items:center}
.blob{position:absolute;border-radius:50%;filter:blur(64px);opacity:.42;z-index:-1;pointer-events:none;animation:drift 18s ease-in-out infinite alternate}
.blob.b1{width:380px;height:380px;background:var(--lime);top:-40px;right:6%}
.blob.b2{width:300px;height:300px;background:color-mix(in srgb,var(--green) 50%,transparent);bottom:60px;left:-90px;animation-duration:24s}
@keyframes drift{from{transform:translate(0,0) scale(1)}to{transform:translate(-40px,30px) scale(1.12)}}
main{position:relative;isolation:isolate}

/* Studio illustration */
.studio{background:var(--card);border:1px solid var(--line);border-radius:22px;padding:18px 18px 14px;box-shadow:0 30px 60px -30px color-mix(in srgb,var(--deep) 45%,transparent)}
.studio svg{display:block;width:100%;height:auto}
.studio-head{display:flex;justify-content:space-between;align-items:center;gap:10px;font-size:13px;color:var(--muted);margin-bottom:8px}
.studio-head b{font-size:14px;color:var(--ink)}
.studio-count{display:flex;gap:20px;align-items:baseline;margin-top:8px;font-size:13px;color:var(--muted);flex-wrap:wrap}
.studio-count strong{font-size:26px;color:var(--ink);font-variant-numeric:tabular-nums;font-weight:700;margin-right:4px}
.studio-count .att strong{color:var(--green)}
.studio-count .emp strong{color:var(--orange)}
.phase{display:inline-flex;gap:6px}
.phase i{width:8px;height:8px;border-radius:50%;background:var(--line);transition:background .3s}
.phase i.on{background:var(--green)}
.studio-floor{fill:color-mix(in srgb,var(--chip) 45%,var(--card))}
.stage{fill:var(--deep)}
.stage-text{fill:var(--lime);font:700 9px var(--sans);letter-spacing:2px}
.coach{fill:var(--lime)}
.mat{fill:color-mix(in srgb,var(--chip) 70%,var(--card));stroke:var(--line);stroke-width:1.5;transition:fill .5s,stroke .5s}
.mat.booked{fill:color-mix(in srgb,var(--lime) 60%,var(--card));stroke:color-mix(in srgb,var(--green) 50%,transparent)}
.mat.empty{fill:transparent;stroke:color-mix(in srgb,var(--orange) 60%,transparent);stroke-dasharray:4 3}
.person{fill:var(--green);transform-box:fill-box;transform-origin:50% 100%;transform:scale(0);opacity:0;transition:transform .45s cubic-bezier(.3,1.6,.5,1),opacity .3s}
.person.in{transform:scale(1);opacity:1}

/* Reveal on scroll (only when JS is running: html.js) */
.js .reveal{opacity:0;transform:translateY(26px);transition:opacity .8s ease,transform .8s cubic-bezier(.2,.7,.2,1)}
.js .reveal.in{opacity:1;transform:none}
.js .reveal.d1{transition-delay:.1s}.js .reveal.d2{transition-delay:.2s}.js .reveal.d3{transition-delay:.3s}

/* Animated existing charts */
.bar-fill{transform-origin:0 50%;transition:transform 1.2s cubic-bezier(.2,.7,.2,1)}
.js .anim-bars:not(.in) .bar-fill{transform:scaleX(0)}
.anim-bars .bar-row:nth-child(2) .bar-fill{transition-delay:.12s}.anim-bars .bar-row:nth-child(3) .bar-fill{transition-delay:.24s}
.anim-bars .bar-row:nth-child(4) .bar-fill{transition-delay:.36s}.anim-bars .bar-row:nth-child(5) .bar-fill{transition-delay:.48s}
.split-bar .a{transition:max-width 1.4s cubic-bezier(.2,.7,.2,1);max-width:100%}
.js .split-bar:not(.in) .a{max-width:0;padding:0;overflow:hidden}
.db-dot.adj{transition:left 1.3s cubic-bezier(.2,.7,.2,1) .3s}
.db-line{transition:opacity .6s .9s}
.js .dumbbell:not(.in) .db-line{opacity:0}

/* Mini charts */
.viz-grid{display:grid;grid-template-columns:1fr 1fr;gap:22px;margin-top:28px}
.viz-card{background:var(--card);border:1px solid var(--line);border-radius:16px;padding:24px;display:flex;flex-direction:column}
.viz-card .n{font-family:var(--serif);font-size:30px;color:var(--green);line-height:1}
.viz-card h3{margin:10px 0 6px}
.viz-card p{margin:0}
.viz{margin:16px 0 12px;position:relative}
.viz svg{display:block;width:100%;height:auto;overflow:visible}
.ax{stroke:var(--line);stroke-width:1}
.ax-text{fill:var(--soft);font:11px var(--sans)}
.lbl{fill:var(--ink);font:600 12px var(--sans)}
.lbl-m{fill:var(--muted);font:12px var(--sans)}
.lbl-in{fill:#fff;font:600 12px var(--sans)}
.mark{fill:var(--green)}
.mark-alt{fill:var(--orange)}
.mark-soft{fill:var(--soft)}
.ring{stroke:var(--card);stroke-width:2}
.ci{stroke:var(--green);stroke-width:2;stroke-linecap:round}
.ci.soft{stroke:var(--soft)}
.zero{stroke:var(--orange);stroke-width:1.5;stroke-dasharray:3 3}
.ref{stroke:var(--soft);stroke-width:1;stroke-dasharray:4 4}
.grow{transform-box:fill-box;transform-origin:50% 100%;transition:transform 1s cubic-bezier(.2,.7,.2,1)}
.js .viz:not(.in) .grow{transform:scaleY(0)}
.growx{transform-box:fill-box;transform-origin:0 50%;transition:transform 1.1s cubic-bezier(.2,.7,.2,1)}
.js .viz:not(.in) .growx{transform:scaleX(0)}
.pop{transform-box:fill-box;transform-origin:50% 50%;transition:transform .6s cubic-bezier(.3,1.6,.5,1),opacity .4s}
.js .viz:not(.in) .pop{transform:scale(0);opacity:0}
.fade{transition:opacity .8s .7s}
.js .viz:not(.in) .fade{opacity:0}
.hit{fill:transparent;cursor:pointer}
.tip{position:absolute;pointer-events:none;background:var(--deep);color:#fff;font-size:12.5px;line-height:1.4;padding:8px 10px;border-radius:8px;white-space:nowrap;transform:translate(-50%,calc(-100% - 12px));opacity:0;transition:opacity .15s;z-index:5}
.tip.on{opacity:1}
.venn circle{transition:transform 1.2s cubic-bezier(.2,.7,.2,1);transform-box:fill-box}
.js .viz:not(.in) .venn .c1{transform:translateX(-40px)}
.js .viz:not(.in) .venn .c2{transform:translateX(40px)}

/* Tenure explorer */
.explorer{display:grid;grid-template-columns:.9fr 1.1fr;gap:34px;align-items:center;background:var(--deep);color:#fff;border-radius:22px;padding:34px;margin-top:28px}
.explorer h3{color:#fff}
.explorer .soft{color:#c4d9cd}
.explorer .big{font-family:var(--serif);font-size:clamp(56px,8vw,92px);line-height:1;color:#d6ee98;font-variant-numeric:tabular-nums}
.explorer input[type=range]{width:100%;accent-color:#d6ee98;margin:18px 0 6px;height:28px;cursor:pointer}
.ticks{display:flex;justify-content:space-between;font-size:12px;color:#c4d9cd;gap:4px}
.ticks button{background:none;border:0;color:inherit;font:inherit;padding:2px;cursor:pointer}
.ticks button.on{color:#d6ee98;font-weight:700}
.crowd{display:grid;grid-template-columns:repeat(10,1fr);gap:10px}
.crowd svg{width:100%;height:auto;display:block}
.crowd .p{fill:#315345;transition:fill .35s}
.crowd .p.on{fill:#d6ee98}
.crowd-cap{font-size:13px;color:#c4d9cd;margin-top:12px}

/* Dashboard mockup */
.mock{perspective:1400px;margin-top:30px}
.browser{border-radius:14px;overflow:hidden;border:1px solid var(--line);background:var(--card);box-shadow:0 40px 80px -40px color-mix(in srgb,var(--deep) 60%,transparent);transform:rotateX(7deg) scale(.97);transition:transform .25s ease-out;display:block;text-decoration:none}
.browser-bar{display:flex;align-items:center;gap:7px;padding:10px 14px;border-bottom:1px solid var(--line);background:color-mix(in srgb,var(--chip) 60%,var(--card))}
.browser-bar i{width:10px;height:10px;border-radius:50%;background:var(--line)}
.browser-bar span{margin-left:12px;font-size:12px;color:var(--soft);background:var(--card);border:1px solid var(--line);border-radius:6px;padding:3px 10px}
.browser img{display:block;width:100%;height:auto}
.mock-cta{display:flex;justify-content:center;margin-top:-24px;position:relative}

/* Roadmap */
.step{transition:transform .3s}
.step:hover{transform:translateY(-4px)}
.js .steps.stagger .step{opacity:0;transform:translateY(20px);transition:opacity .6s,transform .6s}
.js .steps.stagger.in .step{opacity:1;transform:none}
.steps.stagger.in .step:nth-child(2){transition-delay:.12s}.steps.stagger.in .step:nth-child(3){transition-delay:.24s}
.steps.stagger.in .step:nth-child(4){transition-delay:.36s}.steps.stagger.in .step:nth-child(5){transition-delay:.48s}

/* Evidence figures */
.figure{background:var(--card);border:1px solid var(--line);border-radius:16px;padding:24px;margin:28px 0}
.figure figcaption{font-size:13.5px;color:var(--soft);margin-top:12px}
.fig-title{font-weight:700;font-size:15px;margin:0 0 4px}
.fig-sub{font-size:13.5px;color:var(--muted);margin:0}
.sim-controls{display:grid;grid-template-columns:1fr 1fr;gap:18px;margin:16px 0 6px}
.sim-controls label{font-size:13.5px;color:var(--muted);display:block}
.sim-controls output{font-weight:700;color:var(--ink);font-variant-numeric:tabular-nums}
.sim-controls input{width:100%;accent-color:var(--green);height:26px}
.sim-stats{display:grid;grid-template-columns:repeat(3,1fr);gap:12px;margin-top:10px}
.sim-stats div{background:color-mix(in srgb,var(--chip) 60%,var(--card));border-radius:10px;padding:12px}
.sim-stats b{display:block;font-size:24px;font-variant-numeric:tabular-nums}
.sim-stats span{font-size:12.5px;color:var(--muted)}
.stat-cards{display:grid;grid-template-columns:repeat(3,1fr);gap:14px;margin:24px 0}
.stat-card{background:var(--card);border:1px solid var(--line);border-radius:14px;padding:18px}
.stat-card b{display:block;font-size:32px;line-height:1.1;color:var(--green);font-variant-numeric:tabular-nums;margin-bottom:6px}
.stat-card span{font-size:13.5px;color:var(--muted)}

@media (max-width:900px){
  .hero-grid,.viz-grid,.explorer{grid-template-columns:1fr}
  .stat-cards{grid-template-columns:1fr}
}
@media (max-width:720px){
  .explorer{padding:24px}
  .crowd{gap:6px}
  .sim-controls,.sim-stats{grid-template-columns:1fr}
  .browser{transform:none}
  .blob{display:none}
}
@media (prefers-reduced-motion:reduce){
  .js .reveal,.js .anim-bars .bar-fill,.js .split-bar .a,.db-dot.adj,.js .grow,.js .growx,.js .pop,.js .fade,.person,.venn circle,.js .steps.stagger .step,.db-line{transition:none!important;transform:none!important;opacity:1!important;max-width:none!important}
  .blob{animation:none}
  .browser{transform:none}
}

@media print{.js .reveal,.js .anim-bars .bar-fill,.js .grow,.js .growx,.js .pop,.js .fade,.js .steps.stagger .step{opacity:1!important;transform:none!important}.blob,.progress{display:none}}