/* =============================================================================
   CTFY · Theta Chamber overview (/theta-chamber/, PRD pages/11) · page-only layout
   Builds on css/site.css (foundation) and css/modules.css (M01–M33). Only page variants live here:
   the framed-hero fit, the 13 rpm orbit, the binaural beat overlay, the goggles inset, the native-controls
   film frame and chapter spacing. Motion is transform/opacity only; every loop stops off-screen
   ([data-in-view="false"]), with the G4 toggle (html[data-motion="off"]) and with prefers-reduced-motion.
   ============================================================================= */

/* ---------- 1 · Hero (H3 framed) ---------- */
/* The frame hugs the 9:16 film so the two chips sit on the film's lower edge, clear of the pause button. */
@media (min-width:1024px){
  .tc-hero .hero__content{grid-template-columns:minmax(0,1fr) auto}
  .tc-hero .hero__frame{width:fit-content;max-width:100%}
}
.tc-hero .hero__frame .chip-list{right:76px;gap:8px}
.tc-hero .hero__frame .chip{min-height:34px;padding-inline:12px 14px;font-size:.8125rem}

/* ---------- 2 · What it is ---------- */
.tc-what .m-split__copy .t-lead em{color:var(--fg-1)}
.tc-divider{margin:clamp(72px,9vw,128px) 0 0}

/* ---------- 3 · In motion (M10): the film keeps today's native controls, so it is not a film.js figure ---------- */
.tc-film__frame{position:relative;overflow:hidden;margin:0;background:var(--bg-0)}
.tc-film__frame video{display:block;width:100%;height:100%;object-fit:cover;background:var(--bg-0)}
.tc-film .m-film__copy .tc-orbit--mini{justify-self:start;margin-top:12px}
/* the blurred poster spill stays within 1.1× the 540px still (no upscaled bitmap) */
.tc-film .m-film__spill{inset:-14% -20%}
@media (max-width:1023px){.tc-orbit--mini{display:none}}

/* ---------- 13 rpm orbit (M09 chapter 01 stage + inline, M10 preview) ----------
   A07 front still at the centre, a thin track, one theta dot doing exactly one lap per 60/13 s (4.615 s). */
.tc-orbit{--d:72cqmin;--cy:47%;position:relative;isolation:isolate;container-type:size;width:100%;height:100%;overflow:hidden;
  background:radial-gradient(42% 42% at 50% var(--cy),rgba(62,85,245,.20),rgba(62,85,245,.05) 60%,transparent 75%),
             radial-gradient(130% 100% at 50% 30%,var(--bg-2),var(--bg-0) 80%)}
.tc-orbit__ring,.tc-orbit__arm{position:absolute;left:50%;top:var(--cy);width:var(--d);height:var(--d);margin:calc(var(--d) / -2) 0 0 calc(var(--d) / -2);border-radius:50%;pointer-events:none}
.tc-orbit__ring{border:1px solid rgba(255,255,255,.14);box-shadow:inset 0 0 0 1px rgba(62,85,245,.08)}
.tc-orbit__arm{animation:tc-orbit 4.615s linear infinite}
/* trail: a 70° arc behind the dot, drawn as a conic wedge masked to the ring stroke */
.tc-orbit__arm::before{content:"";position:absolute;inset:-1px;border-radius:50%;
  background:conic-gradient(from 0deg,transparent 0deg 290deg,rgba(107,125,255,.7) 360deg);
  -webkit-mask:radial-gradient(farthest-side,transparent calc(100% - 2px),#000 calc(100% - 2px));mask:radial-gradient(farthest-side,transparent calc(100% - 2px),#000 calc(100% - 2px))}
.tc-orbit__arm i{position:absolute;left:50%;top:0;width:12px;height:12px;margin:-6px 0 0 -6px;border-radius:50%;background:var(--theta-300);
  box-shadow:0 0 0 4px rgba(62,85,245,.22),0 0 18px 5px var(--theta-glow)}
.tc-orbit__product{position:absolute;left:50%;top:var(--cy);display:block;height:calc(var(--d) * .7);aspect-ratio:640/794;translate:-50% -50%}
.tc-orbit .tc-orbit__product img{display:block;width:100%;height:100%;object-fit:contain;
  -webkit-mask-image:radial-gradient(closest-side,#000 70%,transparent 100%);mask-image:radial-gradient(closest-side,#000 70%,transparent 100%)}
.tc-orbit__label{position:absolute;left:50%;bottom:5%;translate:-50% 0;white-space:nowrap}
.tc-orbit--mini{--d:84cqmin;--cy:50%;flex:none;width:112px;height:112px;border-radius:50%;background:radial-gradient(closest-side,rgba(62,85,245,.22),transparent 80%)}
.tc-orbit--mini .tc-orbit__arm i{width:8px;height:8px;margin:-4px 0 0 -4px;box-shadow:0 0 0 3px rgba(62,85,245,.22),0 0 12px 3px var(--theta-glow)}
.tc-orbit--mini .tc-orbit__product{height:calc(var(--d) * .62)}
@keyframes tc-orbit{to{transform:rotate(360deg)}}
.tc-orbit[data-in-view="false"] .tc-orbit__arm,.m-chapters__media:not(.is-active) .tc-orbit__arm{animation-play-state:paused}

/* ---------- 4 · How it works (M09): pictures, goggles inset, binaural beat ---------- */
.tc-how .m-chapters__media>picture{display:contents}
.tc-how .m-chapters__media>.tc-orbit{position:absolute;inset:0;border-radius:var(--r-xl);box-shadow:inset 0 0 0 1px var(--line-1)}
.tc-inline-orbit{aspect-ratio:5/4!important}
.tc-inline-orbit .tc-orbit{--d:62cqmin;--cy:45%;position:absolute;inset:0}
/* A09 goggles as a small rounded card over the lit canopy */
.tc-inset{position:absolute;z-index:2;right:5%;bottom:6%;width:30%;max-width:190px;aspect-ratio:1;overflow:hidden;border-radius:var(--r-m);
  box-shadow:0 24px 48px -18px rgba(0,0,0,.75)}
.tc-inset::after{content:"";position:absolute;inset:0;border-radius:inherit;box-shadow:inset 0 0 0 1px rgba(255,255,255,.18),inset 0 1px 0 rgba(255,255,255,.22);pointer-events:none}
.tc-how .tc-inset img,.tc-how .m-chapters__media .tc-inset img{display:block;width:100%;height:100%;object-fit:cover;object-position:50% 50%}
@media (max-width:1023px){.tc-inset{width:28%;bottom:8%;border-radius:var(--r-s)}}
/* BG-D binaural beat: two sines, one per ear (3 and 4 cycles per width), their drift is the slow beat envelope.
   Each line is twice the frame width and slides exactly half of itself, so both loops are seamless. */
.tc-beat{position:absolute;z-index:2;left:0;right:0;bottom:0;height:44%;overflow:hidden;pointer-events:none;
  background:linear-gradient(to top,rgba(6,7,11,.86),rgba(6,7,11,.5) 55%,transparent)}
.tc-beat svg{--h:clamp(52px,8vw,96px);position:absolute;left:0;top:56%;width:200%;height:var(--h);margin-top:calc(var(--h) / -2);overflow:visible;fill:none;stroke-width:1.5;stroke-linecap:round}
.tc-beat__a{stroke:var(--theta-300);opacity:.6}
.tc-beat__b{stroke:var(--cyan-300);opacity:.6}
.tc-beat svg{animation:tc-beat 16s linear infinite}
@keyframes tc-beat{to{transform:translateX(-50%)}}
.tc-beat[data-in-view="false"] svg,.m-chapters__media:not(.is-active) .tc-beat svg{animation-play-state:paused}

/* ---------- 5 · Why it's different ---------- */
.tc-why__head{padding-bottom:clamp(24px,3vw,48px)}
.tc-why__head .sec__head{margin-bottom:0}
/* the descent field fades in under the header instead of starting on a hard edge */
.tc-why .m-descent::after{content:"";position:absolute;left:0;right:0;top:0;z-index:-1;height:clamp(160px,22vh,260px);pointer-events:none;background:linear-gradient(var(--bg-1),transparent)}
.tc-why__after{padding-top:clamp(56px,7vw,112px)}
.tc-spec{margin-top:clamp(72px,9vw,144px)}

/* ---------- 6 · Proof (M13) ---------- */
.tc-proof .m-story__media picture{display:contents}
.tc-proof .m-story__who{font-size:.875rem;letter-spacing:.01em}
/* three cards, all in view: a square portrait keeps photo and quote inside one desktop viewport */
@media (min-width:1024px){.tc-proof .m-story__media{aspect-ratio:1/1}.tc-proof .m-story__media img{object-position:50% 28%}}
.tc-proof__links{display:flex;flex-wrap:wrap;align-items:center;gap:14px 28px;margin-top:clamp(32px,4vw,48px)}

/* ---------- 7 · Porcelain chapter ---------- */
.tc-who .m-pillar__media picture{display:contents}
.tc-faq{--seam-to:var(--bg-2)}        /* the bridge band that follows is bg-2 */
.tc-note{margin-top:34px}

/* ---------- 8 · Bridge ---------- */
.m-bridge__product picture{display:block}

/* ---------- Calm states: reduced motion, motion toggle off, no loops ---------- */
html[data-motion="off"] .tc-orbit__arm{animation:none;transform:rotate(36deg)}
html[data-motion="off"] .tc-beat svg{animation:none}
@media (prefers-reduced-motion:reduce){
  .tc-orbit__arm{animation:none;transform:rotate(36deg)}
  .tc-beat svg{animation:none}
}