/* =============================================================================
   CTFY · Inside the chamber (/theta-chamber/technology/, PRD pages/12) · page-only layout
   Builds on css/site.css (foundation) and css/modules.css (M01–M33). Only page variants live here:
   the H2 stage fit and orbiting spec chips, the band ladder, the M09 part compositions (13 rpm orbit,
   canopy strip, binaural beat, vibration hum), the "Together" statement, the entrainment line, the
   4:5 route thumbnails, the maker film frame and the four studio plinths.
   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. Reveal choreography keys off core.js
   .is-pending (start) / .is-in (transition); the class-free default is always the finished state.
   ============================================================================= */

/* ---------- Spec chip: the existing spec line of a component, champagne hairline, units never uppercased ---------- */
.tct-spec{gap:8px;min-height:34px;padding:0 14px;background:rgba(203,179,132,.06);box-shadow:inset 0 0 0 1px rgba(203,179,132,.42);
  color:var(--text-1);font:500 .8125rem/1.3 var(--font-sans);letter-spacing:.01em;text-transform:none;font-variant-numeric:tabular-nums}
.tct-spec .icon{color:var(--champ-400)}
.tct-spec.glass-veil{background:var(--veil-fill)}
.tct-spec-row{display:flex;flex-wrap:wrap;gap:10px}
.tct-spec--maker .chip__dot{background:var(--champ-400);box-shadow:0 0 10px rgba(203,179,132,.55)}

/* ---------- 1 · Hero (H2 Product Stage) ----------
   The stage hugs the product (A07 front, 640:794) so the chip coordinates are percentages of the product box. */
.tct-hero{--ph:min(60svh,600px)}
.tct-hero .stage{flex:none;width:calc(var(--ph) * .806);max-width:100%;margin-top:clamp(36px,6vh,64px)}
.tct-hero .stage__product{width:100%;max-width:none}
.tct-hero .stage__product picture{display:block}
.tct-hero .stage__product img{display:block}
.tct-hero .stage__bloom{left:-30%;right:-30%;bottom:-6%;height:90%}
/* the four chips trace an arc around the product's right side (component order, top → bottom); the fifth sits under the base */
.tct-hero .stage__chips>li{translate:0 -50%}
.tct-hero .stage__chips>li:last-child{translate:-50% 0}
.tct-hero .tct-spec{min-height:36px;padding-inline:12px 14px}
@media (min-width:1280px){
  .tct-hero{--ph:min(56svh,560px);--tw:min(600px,44vw)}
  .tct-hero.hero--stage-left{justify-content:center}
  .tct-hero.hero--stage-left .hero__content{top:50%;transform:translateY(calc(-50% + (var(--dock-top) + var(--dock-h)) / 2))}
  .tct-hero.hero--stage-left .hero__content>*{max-width:var(--tw)}
  .tct-hero.hero--stage-left .stage{margin:calc(var(--dock-top) + var(--dock-h)) auto 0 calc(max(var(--gutter),(100% - var(--container)) / 2) + var(--tw) + 56px)}
}
@media (min-width:768px) and (max-width:1279px){
  /* the widest chip ends at ≈ product centre + .4W + 215px: cap W so it stays inside the gutter */
  .tct-hero{--ph:min(54svh,560px,calc((125vw - 640px) / .806))}
  .tct-hero .stage{margin-bottom:56px}
}
/* phones: product first (bleeding), chips in a two-column grid under it, then the text (PRD §6) */
@media (max-width:767px){
  .tct-hero{--ph:min(42svh,380px);text-align:left;padding-top:calc(var(--dock-top) + var(--dock-h) + 8px)}
  .tct-hero .stage{order:-1;width:100%;margin:0 auto}
  .tct-hero .stage__product{width:calc(var(--ph) * .806);margin-inline:auto}
  .tct-hero .stage__bloom{left:0;right:0}
  .tct-hero .stage__chips{position:relative;z-index:2;width:100%;margin-top:-30px}
  .tct-hero .stage__chips>li,.tct-hero .stage__chips>li:last-child{translate:none}
  .tct-hero .stage__chips>li:last-child{grid-column:1/-1;justify-self:center}
  .tct-hero .tct-spec{width:100%;min-height:40px;padding:8px 12px;white-space:normal}
  .tct-hero .stage__chips>li:last-child .tct-spec{width:auto}
  .tct-hero .hero__content{justify-items:start;margin-top:32px}
  .tct-hero .hero__lead{margin-inline:0}
  .tct-hero .hero__ctas{justify-content:flex-start}
}

/* ---------- 2 · The idea: band ladder (four static BG-D waves, fast → slow; theta lit) ---------- */
.tct-ladder{position:relative;isolation:isolate;display:grid;padding:clamp(12px,2vw,24px) clamp(20px,2.4vw,32px);border-radius:var(--r-xl);
  background:radial-gradient(120% 90% at 70% 60%,var(--bg-2),var(--bg-1) 75%);box-shadow:inset 0 0 0 1px var(--line-1)}
.tct-ladder__row{--i:0;position:relative;display:grid;grid-template-columns:clamp(96px,9vw,128px) minmax(0,1fr);align-items:center;gap:clamp(12px,2vw,28px);
  padding-block:clamp(14px,1.6vw,20px)}
.tct-ladder__row+.tct-ladder__row{border-top:1px solid var(--line-1)}
.tct-ladder__name{display:grid;justify-items:start;gap:6px}
.tct-ladder__name b{color:var(--text-2);font:600 var(--t-title)/1.2 var(--font-sans);letter-spacing:-.005em}
.tct-ladder__name>span:not(.chip){color:var(--text-3);font-size:.8125rem;line-height:1.3}
.tct-ladder .chip--theta{text-transform:none;letter-spacing:.04em}
.tct-ladder__wave{position:relative;display:block;height:72px;overflow:hidden}
.tct-ladder__wipe{display:block;height:100%}
.tct-ladder__wipe svg{display:block;width:100%;height:100%;overflow:visible}
.tct-ladder__wave path{fill:none;stroke:var(--text-3);stroke-width:1.5;stroke-linecap:round;opacity:.7}
.tct-ladder__row--on .tct-ladder__name b{color:var(--text-1)}
.tct-ladder__row--on .tct-ladder__wave path{stroke:var(--theta-400);opacity:.35}
.tct-ladder__row--on .tct-ladder__wave .tct-ladder__lit{stroke:var(--theta-400);stroke-width:2;opacity:1;filter:drop-shadow(0 0 6px rgba(62,85,245,.7))}
.tct-ladder__bloom{position:absolute;inset:-30% -6%;z-index:-1;pointer-events:none;background:radial-gradient(50% 50% at 62% 50%,rgba(62,85,245,.26),rgba(62,85,245,.07) 55%,transparent 75%)}
/* draw: rows wipe in left → right in order (wrapper + counter-translated wave, transform only), then theta brightens */
.js .tct-ladder.is-pending .tct-ladder__wipe{transform:translateX(-101%)}
.js .tct-ladder.is-pending .tct-ladder__wipe svg{transform:translateX(101%)}
.js .tct-ladder.is-pending .tct-ladder__name{opacity:0;transform:translateY(8px)}
.js .tct-ladder.is-pending .tct-ladder__lit,.js .tct-ladder.is-pending .tct-ladder__bloom,.js .tct-ladder.is-pending .chip--theta{opacity:0}
.tct-ladder.is-in .tct-ladder__wipe,.tct-ladder.is-in .tct-ladder__wipe svg{transition:transform 900ms var(--ease-out) calc(150ms + var(--i) * 220ms)}
.tct-ladder.is-in .tct-ladder__name{transition:opacity 500ms var(--ease-out) calc(100ms + var(--i) * 220ms),transform 500ms var(--ease-out) calc(100ms + var(--i) * 220ms)}
.tct-ladder.is-in .tct-ladder__lit,.tct-ladder.is-in .tct-ladder__bloom,.tct-ladder.is-in .chip--theta{transition:opacity 700ms var(--ease-out) 1350ms}
.tct-callout{margin-top:clamp(48px,6vw,88px)}
@media (max-width:1023px){
  .tct-idea .m-split__media{order:0}        /* PRD §6: theta-state text first, then the ladder (M14 puts media first by default) */
  .tct-ladder__wave{height:56px}
}

/* ---------- 3 · The principle (M05): BG-C blueprint at 60% behind the stage, pinned with it ---------- */
.tct-converge .m-converge__pin>.blueprint{inset:0 calc(50% - 50vw);opacity:.6}
.tct-converge .m-converge__pin>.blueprint{-webkit-mask-image:radial-gradient(ellipse 60% 70% at 50% 50%,#000 25%,transparent 75%);mask-image:radial-gradient(ellipse 60% 70% at 50% 50%,#000 25%,transparent 75%)}

/* ---------- 13 rpm orbit (M09 chapter 01; same variant as theta-chamber.css, see report: promote to modules.css) ---------- */
.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}
.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}
@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's built (M09): part compositions ---------- */
.tct-how .m-chapters__media>picture,.tct-how .m-chapters__inline>picture{display:contents}
.tct-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)}
.tct-how .tc-orbit__label{left:6%;bottom:auto;top:6%;translate:none}
.tct-how .m-chapters__index{display:inline-flex;align-items:center;gap:10px}
.tct-how .m-chapters__index .icon{width:16px;height:16px;color:var(--theta-300)}
.tct-how .m-chapters__item>.tct-spec-row{margin-top:4px}
.tc-inline-orbit{aspect-ratio:5/4!important}
.tc-inline-orbit .tc-orbit{--d:62cqmin;--cy:50%;position:absolute;inset:0}
/* A05 (the open chamber from above) as a small portrait card over the orbit stage */
.tct-inset{position:absolute;z-index:2;right:5%;bottom:6%;width:22%;max-width:150px;aspect-ratio:3/4;overflow:hidden;border-radius:var(--r-m);
  box-shadow:0 24px 48px -18px rgba(0,0,0,.75)}
.tct-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}
.tct-how .tct-inset img{display:block;width:100%;height:100%;object-fit:cover;object-position:var(--pos,50% 50%)}
@media (max-width:1023px){.tct-inset{width:24%;bottom:7%;border-radius:var(--r-s)}}
/* A08 canopy-3 (a 2400×614 strip) as the band of light above the goggles; only ever shown wide */
.tct-strip{position:absolute;z-index:1;left:0;right:0;top:0;aspect-ratio:2400/614;overflow:hidden;pointer-events:none;
  -webkit-mask-image:linear-gradient(to bottom,#000 55%,transparent);mask-image:linear-gradient(to bottom,#000 55%,transparent)}
.tct-how .tct-strip img{display:block;width:100%;height:100%;object-fit:cover}
/* BG-D binaural beat (two sines, one per ear; their drift is the slow beat) — same variant as theta-chamber.css */
.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}
/* vibration: one slow, low-amplitude wave along the bed line (4 cycles per frame width, 24 s per pass) */
.tct-hum{position:absolute;z-index:2;left:0;right:0;bottom:0;height:34%;overflow:hidden;pointer-events:none;
  background:linear-gradient(to top,rgba(6,7,11,.72),rgba(6,7,11,.3) 60%,transparent)}
.tct-hum svg{position:absolute;left:0;top:50%;width:200%;height:clamp(40px,6vw,72px);translate:0 -50%;overflow:visible;fill:none;stroke:var(--theta-300);stroke-width:1.5;stroke-linecap:round;opacity:.75;
  animation:tc-beat 24s linear infinite}
.tct-hum[data-in-view="false"] svg,.m-chapters__media:not(.is-active) .tct-hum svg{animation-play-state:paused}

/* ---------- 4b · "Together" (M02 statement): the 51-word paragraph runs at 40ch, a step under --t-quote ---------- */
.tct-together{padding-block:clamp(88px,10vw,160px)}
.tct-together__inner{display:grid;justify-items:center;gap:18px}
.tct-together__kicker{display:inline-flex;align-items:center;gap:12px}
.tct-together__icon{display:grid;place-items:center;width:44px;height:44px;border-radius:50%;color:var(--theta-300);
  background:radial-gradient(closest-side,rgba(62,85,245,.28),rgba(62,85,245,.06));box-shadow:inset 0 0 0 1px rgba(107,125,255,.35),0 0 24px -6px var(--theta-glow)}
.tct-together__title{color:var(--text-2)}
.tct-together .m-lightup__quote.tct-together__text{max-width:40ch;margin-top:clamp(8px,1.5vw,18px);font-size:calc(var(--t-quote) * .74 * var(--k-display));line-height:1.22}
.tct-together__spec{margin-top:clamp(10px,1.6vw,20px)}

/* ---------- 5 · Why it works: sticky landscape frame beside the copy; entrainment line ---------- */
@media (min-width:1024px){
  .tct-science__split{align-items:start}
  .tct-science__media{position:sticky;top:max(18vh,calc(var(--dock-top) + var(--dock-h) + 32px))}
}
.tct-science .m-split__copy .m-split__line{margin-top:6px}
/* two thin waves: the steady outside rhythm (text-3) and the brain (theta). They start half a period apart;
   over 2.4 s the theta line eases into step. Reduced / off: drawn in step. */
.tct-entrain{position:relative;height:72px;margin-block:6px 4px;overflow:hidden;
  -webkit-mask-image:linear-gradient(90deg,transparent,#000 12%,#000 88%,transparent);mask-image:linear-gradient(90deg,transparent,#000 12%,#000 88%,transparent)}
.tct-entrain svg{position:absolute;top:4px;left:-10%;width:120%;height:64px;overflow:visible;fill:none;stroke-linecap:round}
.tct-entrain__ext{stroke:var(--text-3);stroke-width:1.25;opacity:.8}
.tct-entrain__brain{stroke:var(--theta-400);stroke-width:1.75;filter:drop-shadow(0 0 5px rgba(62,85,245,.6))}
.tct-entrain svg path{vector-effect:non-scaling-stroke}
.js .tct-entrain.is-pending .tct-entrain__brain{transform:translateX(8.333%)}
.tct-entrain.is-in .tct-entrain__brain{transition:transform 2400ms var(--ease-in-out) 300ms}

/* ---------- 6 · A session (M27): 4:5 thumbnails above the text; note + link ---------- */
.tct-route .m-route__media{aspect-ratio:4/5;margin-bottom:10px}
.tct-route .m-route__media picture{display:contents}
.tct-route__cap{position:absolute;z-index:2;left:12px;bottom:12px;min-height:30px;padding-inline:12px;font-size:.6875rem}
.tct-route__cap.glass-veil{background:rgba(10,12,18,.74)}   /* sits on a bright daylight frame: dense fill keeps AA */
.tct-session__foot{display:grid;grid-template-columns:minmax(0,820px) auto;align-items:center;gap:20px clamp(24px,4vw,56px);margin-top:clamp(48px,6vw,80px)}
@media (max-width:1023px){
  /* vertical route: a compact 4:5 thumbnail beside each step's number, title and text */
  .tct-route .m-route__step{grid-template-columns:clamp(112px,30vw,180px) minmax(0,1fr);column-gap:clamp(16px,3vw,28px);align-items:start}
  .tct-route .m-route__media{grid-row:1 / span 3;margin:0}
  .tct-route .m-route__step>:not(.m-route__media){grid-column:2}
  .tct-route .m-route__n{font-size:1.75rem}
  .tct-route__cap{left:6px;bottom:6px;min-height:24px;padding-inline:8px;font-size:.625rem;letter-spacing:.1em}
  .tct-session__foot{grid-template-columns:minmax(0,1fr)}
}

/* ---------- 7 · The maker: framed 9:16 film beside the copy; four studio plinths over BG-C ---------- */
.tct-maker__media{display:grid;place-items:center;aspect-ratio:auto!important;isolation:isolate}
.tct-maker__media>.bloom{inset:-10% -20%}
@media (max-width:1023px){.tct-maker__media>.bloom{inset:-6% 0}}   /* keep the bloom inside the viewport on phones */
.tct-maker__film{width:auto;height:min(76vh,680px);max-width:100%}
.tct-maker .m-split__copy .tct-spec-row{margin-top:4px}
.tct-studio{position:relative;isolation:isolate;margin-top:clamp(80px,10vw,150px);padding-block:clamp(24px,3vw,40px) 0}
.tct-studio>.blueprint{inset:-12% calc(var(--gutter) * -1) -20%;opacity:.4}
.tct-studio__h{margin-bottom:clamp(20px,2.5vw,32px)}
.tct-plinths{grid-template-columns:repeat(4,minmax(0,1fr))}
.tct-plinths .m-plinth h4{margin-bottom:4px;color:var(--text-1)}
.tct-plinths .m-plinth h4 a{color:inherit;text-decoration:none}
.tct-plinths .m-plinth h4 a::after{content:"";position:absolute;inset:0;z-index:2;border-radius:inherit}
.tct-plinths .m-plinth h4 a:focus-visible{outline:none}
.tct-plinths .m-plinth:has(a:focus-visible){outline:2px solid var(--theta-400);outline-offset:3px}
.tct-plinths .m-plinth p{margin-bottom:10px}
.tct-plinths .m-plinth picture{display:contents}
/* scoped fix: in the grid stage a % height resolves to auto, so non-square cover photos overflow or letterbox; pin them to the square */
.tct-plinths .m-plinth__stage--cover img{position:absolute;inset:0;width:100%;height:100%;object-position:var(--pos,50% 50%)}
.tct-plinth__go{position:absolute;right:clamp(16px,1.8vw,22px);bottom:clamp(18px,2vw,24px);width:18px;height:18px;color:var(--theta-300);transition:transform var(--dur-fast) var(--ease-out)}
@media (hover:hover) and (pointer:fine){.tct-plinths .m-plinth:hover .tct-plinth__go{transform:translateX(3px)}}
@media (max-width:1023px){.tct-plinths{grid-template-columns:repeat(2,minmax(0,1fr))}}
@media (max-width:1023px){
  .tct-maker__film{height:auto;width:min(78vw,400px)}
}

/* ---------- 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,html[data-motion="off"] .tct-hum svg{animation:none}
@media (prefers-reduced-motion:reduce){
  .tc-orbit__arm{animation:none;transform:rotate(36deg)}
  .tc-beat svg,.tct-hum svg{animation:none}
}

/* ---------- Bulgarian (P5) ----------
   Two BG spec lines ("Светлината е синхронизирана със звука", "< 600 µA · повечето не усещат нищо") run ~80px wider than
   the widest EN chip and were cut off at the viewport edge (768–1366px), so the orbiting hero chips wrap inside a 220px
   chip (the light chip runs to three lines, as on phones) and keep ≥35px clear of the edge. */
@media (min-width:768px){
  html[lang="bg"] .tct-hero .stage__chips .tct-spec{width:max-content;max-width:220px;white-space:normal;padding-block:7px;line-height:1.3}
  html[lang="bg"] .tct-hero .stage__chips>li:last-child .tct-spec{max-width:none;white-space:nowrap}   /* centred under the base: room for one line */
}