/* Depth on scroll (captain 2026-10-16, after oryzo.ai and lusion.co). The motion lives in assets/depth.js;
   this file lays the pieces out and gives Reduce Motion its still end states. */

/* 1a. Train with precision stays where it is while One cohesive training system zooms out over it
   (depth.js blurs and dims it as it falls back). The stage ends with that section. */
.depth-stage{position:relative}
.depth-stage>.hero-section{position:sticky;top:0;z-index:0;transform-origin:50% 40%}
/* The hero stays stuck a screen past the point where depth.js has faded it out (the stage reaches a screen
   further down without moving what follows), so a late frame of script never shows it scrolling away. */
@media(prefers-reduced-motion:no-preference){.depth-stage::after{content:"";display:block;height:100lvh;margin-bottom:-100lvh;pointer-events:none}}
.depth-stage>.manifesto{position:relative;z-index:1}
/* The statement is a camera reveal: its centre holds still while perspective recedes.
   The title and photos disappear into depth before the next section enters. */
.has-system-zoom #system-intro .mf-text{height:max-content;margin-inline:auto;text-align:center;text-wrap:balance}
/* Native scrolling moves the page on the browser's own thread, so anything that must hold still on the
   screen is held by CSS (sticky), never by script: a script-held title slid with the page whenever a frame
   of script ran late (captain 2026-10-30, "the scroll is choppy ... glitches"). The statement sits in a
   screen-tall sticky frame inside a stage that reaches a screen above and below the section, so it is
   centred from before it fades in until after it has gone; depth.js only scales, fades and blurs it.
   With Reduce Motion the stage and frame drop out of layout and the title sits in the text as before. */
.mf-stage,.mf-frame{display:contents}
@media(prefers-reduced-motion:no-preference){
  .has-system-zoom #system-intro{overflow:visible}
  .has-system-zoom #system-intro .mf-stage{display:block;position:absolute;inset-inline:0;top:calc(-100lvh - 20rem);bottom:-100lvh;padding-inline:inherit;pointer-events:none}
  .has-system-zoom #system-intro .mf-frame{display:grid;place-items:center;position:sticky;top:0;height:100svh}
  .has-system-zoom #system-intro .mf-text{margin-block:0;will-change:transform,opacity,filter;transform-origin:50% 50%}
}
/* the title's top margin used to fold out of the wrap and set the section's height; the wrap keeps it */
@media(prefers-reduced-motion:no-preference) and (min-width:821px){.has-system-zoom #system-intro .g-wrap{margin-top:var(--space-10)}}


/* 1b. Meet Tora continues the camera pull-back directly after the system statement.
   Layout remains the scroll clock. The pin is stuck to the top of the screen a screen early (the negative
   margin moves its sticky start, not its end), so it rises with the camera without script holding it. */
#app{--depth:0;--accent:0;z-index:1;margin-top:0}
@media(prefers-reduced-motion:no-preference){
  .has-system-zoom #app .sc-pin{margin-top:calc(-100lvh - 6rem);transform-origin:50% 50%;will-change:transform,opacity,filter}
}

/* The phone on its own layer (captain 2026-10-15: "why does this happen? This very clear line banding
   ... Can we not just have the phones show up on their own separate Z-axis?"). The line was the top edge
   of a dark sheet that came up with Meet Tora and faded over the blurred section; on an 8-bit screen a
   dark fade over a dark picture shows a step, and a sheet's edge shows as a line. Now the ground under the
   phone is one plain layer that reaches a full screen above the section, so its top is never on screen
   while it shows, and only its opacity changes: no edge, no gradient, nothing to band, and no grain. (It
   was measured to the screen's top each frame, which lagged native scrolling.) The theme's soft colour
   glows join once the phone is pinned, when their own edges are off the screen. */
#app::before{content:"";position:absolute;left:0;right:0;top:0;bottom:0;z-index:-1;pointer-events:none;
  background:var(--bg);opacity:var(--depth)}
@media(prefers-reduced-motion:no-preference){.has-system-zoom #app::before{top:-100lvh}}
.sc-pin{isolation:isolate}
/* the colour spill (showcase.js): the resting screen, huge and soft, far behind the phones */
.sc-spill{position:absolute;left:50%;top:50%;z-index:-1;width:min(80vw,72rem);height:82%;transform:translate(-50%,-50%);pointer-events:none;
  background:center/cover no-repeat;filter:blur(90px) saturate(1.8);opacity:0;transition:opacity .9s ease}
.sc-spill.on{opacity:calc(.42 * var(--accent,1))}
@media(max-width:820px){.sc-spill{width:110vw;height:70%;filter:blur(60px) saturate(1.5)}}
@media(prefers-reduced-motion:reduce){.sc-spill{transition:none}}
/* --sc-leave (showcase.js) rises from 0 as the section's end comes up the screen: the glows (the strongest sits on the
   bottom-left corner) fade with it, so the section never ends in a lit edge against the dark below (captain 2026-10-19) */
.sc-pin::before{content:"";position:absolute;inset:0;z-index:-1;pointer-events:none;opacity:calc(var(--accent) * (1 - var(--sc-leave,0)));
  background:
    radial-gradient(70% 60% at 0% 100%,rgb(var(--sc-accent) / .16),transparent 70%),
    radial-gradient(55% 50% at 100% 0%,rgb(var(--sc-accent) / .07),transparent 70%),
    radial-gradient(50% 45% at 50% 52%,rgb(var(--sc-accent) / .06),transparent 75%);
  transition:background .8s ease}

/* 2. Meet Tora after "Isn't just a coaster": on a wide screen the title stands large on the left, the
   phone is the one thing in the middle, and each screen's caption reads on the right. */
@media(min-width:1200px){
  .showcase .sc-head{top:50%;right:auto;width:calc(var(--gutter-wide) + min(20rem,22vw));transform:translateY(-50%);margin-left:var(--sc-tl,0px)}
  .showcase .sc-head h2:not(#\#):not(#\#):not(#\#){font-size:clamp(3.5rem,5.2vw,5.75rem)!important;line-height:.98!important;max-width:6ch}
  /* the phones narrow a little so the row clears the title and the caption at every width from 1200 */
  .showcase .sc-phone{--pw:min(17rem,19vw,calc(94cqh * 71.9 / 150))}
  .showcase .sc-caps{position:absolute;z-index:1;right:max(var(--gutter-wide),var(--sc-cr,0px));top:50%;width:min(20.5rem,22vw);transform:translateY(-50%);text-align:left;justify-items:start}
  .showcase .sc-cap h3{font-size:var(--text-xl)}
  .showcase .sc-cap p{margin-inline:0;font-size:var(--text-lg);line-height:1.45;color:var(--ink)}
  .showcase .sc-picker{justify-items:start}
  .showcase .sc-themes{justify-content:flex-start}
  /* the rail fits the caption column: seven swatches across, never wrapping (captain 2026-10-19: all seven, a
     little bigger; the column is a little wider for them) */
  .showcase .sc-theme{width:min(2.75rem,calc((min(20.5rem,22vw) - .5rem) / 7));height:2.75rem}
}

/* 3. Letters out of blur: each word stays whole; each letter is its own box so it can blur alone. */
.bl-ready .bl-w{display:inline-block;white-space:nowrap}
.bl-ready .bl-c{display:inline-block}

/* 4. Outlined words (after lusion.co's Awards): rows of a giant hairline word, repeated and offset,
   drawn in two canvases by depth.js behind the section's content, full width, drifting as it passes. */
[data-outline-host]{position:relative;isolation:isolate}
.ow{position:absolute;left:calc(50% - 50vw);width:100vw;top:var(--ow-top,0);z-index:-1;pointer-events:none;
  transform:translate3d(calc(var(--ow-drift,0) * 1vw),0,0);will-change:transform}
.ow canvas{position:absolute;left:0;top:0;display:block}
#nova{--ow-top:clamp(0rem,2vw,2rem)}
/* QUESTIONS sits like NOVA: nearly the screen's width, mostly behind the section's title, clear of the list */
#faq{--ow-top:max(0px,calc(97px - 7.55vw))}   /* centred on the title at every width (the word is about 15% of the width tall) */

/* Research's hollow words (the <em>s of the scrolling "research." line), lit like Nova's in Research's
   darker blue: a glowing copy of each word, seen only through the trail depth.js paints (--trail). The
   white words stay plain white. As with Nova, the light hugs the letters' edges (captain 2026-10-15:
   "more towards the edges ... so it looks a little bit cleaner"): a bright hairline with a tight bloom
   that follows the stroke (drop-shadow, not a text-shadow, which would fog the whole letter). The copy
   reaches .3em past the word on every side, so the bloom is never cut at the word's edge. */
.cases-marquee em.mq-glow,.mf-text .w.mq-glow{position:relative;display:inline-block}
.cases-marquee em.mq-glow::after,.mf-text .w.mq-glow::after{content:attr(data-text);content:attr(data-text) / "";position:absolute;inset:-.3em;padding:.3em;pointer-events:none;white-space:nowrap;
  color:rgb(90 140 230 / .05);-webkit-text-stroke:1.5px rgb(205 226 255);filter:drop-shadow(0 0 2px rgb(110 165 255 / .9)) drop-shadow(0 0 6px rgb(50 100 215 / .5));
  -webkit-mask-image:var(--trail,linear-gradient(transparent,transparent));mask-image:var(--trail,linear-gradient(transparent,transparent))}
/* "cohesive" glows in Chrome Steel, lighter than Research's blue (captain 2026-10-18: "more like that lighter
   blue that we have ... chrome steel-esque") */
.mf-text .w.mq-glow::after{color:rgb(143 179 203 / .06);-webkit-text-stroke-color:rgb(238 243 246);
  filter:drop-shadow(0 0 2px rgb(169 201 222 / .95)) drop-shadow(0 0 7px rgb(143 179 203 / .55))}

/* the fixed bottom frost is tinted for dark sections: it steps aside over a light one */
.bottom-blur{transition:opacity .35s ease}
html.under-light .bottom-blur{opacity:0}

/* Questions as Lusion's list: the title with its count, then numbered rows, each over a line of light
   that fades out at both ends (light, not a border: the no-borders rule in tokens.css), and the answer
   opening under its question. The accordion itself is unchanged (index.html script). */
#faq>h2{display:flex;align-items:baseline;justify-content:space-between;gap:var(--space-6);text-align:left!important;margin-bottom:var(--space-10)!important}
#faq .faq-count{font:400 var(--text-xl)/1 var(--sans);letter-spacing:0;color:var(--body);white-space:nowrap}
#faq .faq-count b{font-weight:400;color:var(--ink);margin-left:.35em}
#faq .faq-grid{max-width:none;gap:0!important;counter-reset:faq}
#faq .faq-item{position:relative;background:none!important;border-radius:0!important;clip-path:none!important;counter-increment:faq}
#faq .faq-item::before{content:"";position:absolute;left:0;right:0;top:0;height:1px;pointer-events:none;
  background:linear-gradient(90deg,rgb(255 255 255 / 0),rgb(255 255 255 / .16) 10%,rgb(255 255 255 / .16) 90%,rgb(255 255 255 / 0))}
#faq .faq-item:last-child{padding-bottom:1px}
#faq .faq-item:last-child::after{content:"";position:absolute;left:0;right:0;bottom:0;height:1px;pointer-events:none;
  background:linear-gradient(90deg,rgb(255 255 255 / 0),rgb(255 255 255 / .16) 10%,rgb(255 255 255 / .16) 90%,rgb(255 255 255 / 0))}
#faq .faq-item summary{padding:var(--space-5) 0!important;gap:var(--space-6);justify-content:flex-start!important;text-align:left;
  font-size:var(--text-lg)!important;font-weight:500;letter-spacing:-.01em;transition:color .3s ease,padding-left .45s cubic-bezier(.22,1,.36,1)}
#faq .faq-item summary .plus{margin-left:auto}
#faq .faq-item summary::before{content:"0" counter(faq,decimal-leading-zero);flex:none;width:3em;font:400 var(--text-sm)/1 var(--sans);font-variant-numeric:tabular-nums;color:var(--muted);transition:color .3s ease}
#faq .faq-item p{padding:0 0 var(--space-6) calc(3em * .875 + var(--space-6))!important;max-width:44rem}
/* Lusion's rows lean in a little toward the pointer */
/* the question leans in, the + stays where it is (captain: on hover "the plus button gets lost") */
@media(hover:hover){#faq .faq-item summary:hover{color:var(--ink);padding-left:.5rem!important}}
#faq .faq-item.is-open summary::before,#faq .faq-item summary:hover::before{color:var(--ink)}
@media(max-width:820px){
  #faq .faq-item summary{gap:var(--space-4);font-size:var(--text-base)!important;padding:var(--space-4) 0!important}
  #faq .faq-item summary::before{width:2.5em}
  #faq .faq-item p{padding-left:0!important}
}

/* Reduce Motion: no overlap, no blur, no slide; every piece is shown in its end state. */
@media(prefers-reduced-motion:reduce){
  .depth-stage>.hero-section{position:relative}
  #app{margin-top:0}
  #app::before,.sc-pin::before{opacity:1}
  .ow{transform:none}
}

/* tora PRO's Monthly | Yearly pill runs on the shared knob (assets/elastic-knob.js via pricing.js), like
   Meet Tora's tabs: the engine places and sizes the pill, and the pill carries the dark labels. The
   CSS-only slide in grid.css stays as the no-script fallback. */
.pro-bill.has-knob .pro-knob{top:0;left:0;bottom:auto;transition:none;will-change:transform,width;background:linear-gradient(180deg,#f7fafc,#e0e8ee);box-shadow:inset 0 1px 0 #fff,0 .375rem 1rem -.375rem rgb(0 0 0 / .6)}
.pro-bill.has-ink .pro-knob{z-index:2;overflow:hidden}
.pro-bill.has-ink button[aria-checked="true"]{color:var(--body)}
.pro-knob .knob-ink{position:absolute;left:0;top:0;will-change:transform}
.pro-knob .knob-ink span{position:absolute;display:grid;place-items:center;white-space:nowrap;font:500 var(--text-sm)/1 var(--sans);color:#0b0d10}

/* the closing card's headline in two lines on wide screens (captain 2026-10-16: "The first athletes
   shape" / "what comes next", so it is not so big); a phone wraps it as it must */
@media(min-width:821px){#founding h2{max-width:none!important;text-wrap:nowrap}}

/* Section titles (captain 2026-10-16, round 10: "instead of making them gray, just make them white with ...
   overlay"): pure white, blended plus-lighter, so on the dark ground they are simply white and where they
   cross a glow or a photo they brighten into it like light. Overlay or multiply would all but hide white on
   our near-black ground. Light sections, Tora Pro and Privacy keep their own titles. */
:is(.sec-title,.w3h-title,.reel-title h2,.ft-head h2,.nova-copy h2,.sc-head h2,.cta-center h2,#faq>h2,.mf-text):not(.is-light *):not(#pro *):not(#privacy *):not(#\#){color:#fff!important;mix-blend-mode:plus-lighter}

/* The zoom-out: seven planes (depth.js) shrink into the centre; Meet Tora owns the foreground.
   No scroll capture or extra pin: native scrolling and the showcase remain in control.
   display:none drops the entire hidden layer tree; only visible planes reserve compositor surfaces. */
.depth-tunnel{display:none;position:fixed;inset:0;z-index:1;overflow:clip;pointer-events:none;visibility:hidden;contain:strict}
.depth-tunnel.is-active{display:block;visibility:visible}
.tunnel-photo{position:absolute;left:50%;top:50%;width:clamp(11rem,24vw,25rem);aspect-ratio:3/4;margin:0;
  opacity:0;transform-origin:50% 50%;clip-path:polygon(0 0,85% 0,100% 12%,100% 100%,15% 100%,0 88%)}
.depth-tunnel.is-active .tunnel-photo.is-visible{will-change:transform,opacity,filter}
.tunnel-photo img{display:block;width:100%;height:100%;object-fit:cover}
/* the planes drawn in WebGL (tunnel-gl.js): one canvas over the whole screen */
.tunnel-gl{position:absolute;inset:0;width:100%;height:100%;display:block}
@media(prefers-reduced-motion:no-preference){
  .has-tunnel #system-intro .mf-photo{visibility:hidden}
  .has-tunnel #system-intro{z-index:2}
  .has-tunnel #app{z-index:3}
}
@media(max-width:820px) and (prefers-reduced-motion:no-preference){
  .has-tunnel #system-intro .mf-photo{display:none}
  .has-tunnel #system-intro .g-wrap{min-height:85svh}
  .tunnel-photo{width:44vw}
}
@media(prefers-reduced-motion:reduce){.depth-tunnel{display:none}}