/* =============================================================================
   CTFY · How it works (/how-it-works/, PRD pages/13) · page-only layout
   Builds on css/site.css (foundation) and css/modules.css (M01–M33). Only page variants live here:
   the H4 fact strip on phones and the theta line under the hero, the five-input bento with its mini
   visuals (13 rpm orbit and binaural beat, same drawings as the Theta Chamber page), and the M08 media
   window (framed 9:16 film over its own blurred poster, chamber films full-bleed, the step 2 canopy).
   Motion is transform/opacity only; loops stop off-screen ([data-in-view="false"]), with the G4 toggle
   (html[data-motion="off"]) and with prefers-reduced-motion.
   ============================================================================= */

/* ---------- 1 · Hero (H4 field) ---------- */
.hw-hero{padding-bottom:clamp(104px,14vh,152px)}
.hw-hero .hero__facts b{font:300 calc(var(--t-num-m) * .72)/1.05 var(--font-sans);letter-spacing:-.03em;font-variant-numeric:tabular-nums}
.hw-hero .hero__facts li{gap:6px}
/* BG-D: one theta line flowing along the hero's lower edge (brainwave.js stops it off-screen and with motion off) */
.hw-hero__wave{position:absolute;z-index:-1;left:0;right:0;bottom:clamp(24px,4vh,44px);height:clamp(44px,5vw,64px);pointer-events:none;
  -webkit-mask-image:linear-gradient(90deg,transparent,#000 12%,#000 88%,transparent);mask-image:linear-gradient(90deg,transparent,#000 12%,#000 88%,transparent)}
.hw-hero__wave canvas{display:block;width:100%;height:100%}
/* phones and tablets: the fact card becomes a three-column strip under the CTAs */
@media (max-width:1023px){
  .hw-hero .hero__facts{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));width:100%;padding:18px 18px 20px;border-radius:var(--r-m)}
  .hw-hero .hero__facts li{align-content:start;padding:0 0 0 14px;border-top:0;border-left:1px solid var(--line-1);font-size:.8125rem;line-height:1.4}
  .hw-hero .hero__facts li:first-child{padding-left:0;border-left:0}
}
@media (max-width:374px){.hw-hero .hero__facts{padding-inline:14px}.hw-hero .hero__facts li{padding-left:10px}}

/* ---------- 2 · Five inputs (M24 numbered cards → 3 + 2 bento) ---------- */
.hw-pillars{--pad:clamp(22px,2.4vw,30px)}
.hw-pillars figure.m-pillar__media picture{display:contents}
.hw-pillars .m-pillar__media{aspect-ratio:16/10}
.hw-pillar__k{color:var(--fg-3)}
.hw-inputs{padding-bottom:var(--section-y-tight)}   /* the session header follows on the same midnight */
.hw-inputs__more{margin-top:clamp(28px,3.5vw,44px)}
@media (min-width:1024px){
  .hw-pillars{grid-template-columns:repeat(6,minmax(0,1fr))}
  .hw-pillars>.m-pillar{grid-column:span 2}
  /* 04 and 05: wide cards, picture left, text right */
  .hw-pillars>.m-pillar:nth-child(n+4){grid-column:span 3}
}
@media (min-width:600px){
  .hw-pillars>.m-pillar:nth-child(n+4){display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1.15fr);grid-template-rows:auto auto 1fr;align-content:center;column-gap:var(--pad);row-gap:12px;min-height:clamp(240px,20vw,290px)}
  .hw-pillars>.m-pillar:nth-child(n+4)>.m-pillar__media{grid-column:1;grid-row:1/-1;aspect-ratio:auto;margin:calc(-1 * var(--pad)) 0 calc(-1 * var(--pad)) calc(-1 * var(--pad))}
  .hw-pillars>.m-pillar:nth-child(n+4)>.m-pillar__media img{position:absolute;inset:0}
  .hw-pillars>.m-pillar:nth-child(n+4)>:not(.m-pillar__media){grid-column:2}
  .hw-pillars>.m-pillar:nth-child(n+4)>.hw-pillar__k{align-self:end}
}
@media (min-width:600px) and (max-width:1023px){
  .hw-pillars>.m-pillar:nth-child(4){display:flex}
  .hw-pillars>.m-pillar:nth-child(4)>.m-pillar__media{aspect-ratio:16/10;margin:calc(-1 * var(--pad)) calc(-1 * var(--pad)) 8px}
  .hw-pillars>.m-pillar:nth-child(4)>.m-pillar__media img{position:static}
  .hw-pillars>.m-pillar:nth-child(4)>.hw-pillar__k{align-self:auto}
  .hw-pillars>.m-pillar:nth-child(5){grid-column:1/-1}
}

/* 13 rpm orbit: A07 front still at the centre, a thin track, one theta dot doing one lap per 60/13 s (4.615 s) */
.hw-orbit{--d:76cqmin;--cy:50%;isolation:isolate;container-type:size;
  background:radial-gradient(42% 52% at 50% var(--cy),rgba(62,85,245,.22),rgba(62,85,245,.05) 60%,transparent 76%),
             radial-gradient(130% 100% at 50% 30%,var(--bg-2),var(--bg-0) 80%)}
.hw-orbit__ring,.hw-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}
.hw-orbit__ring{border:1px solid rgba(255,255,255,.14);box-shadow:inset 0 0 0 1px rgba(62,85,245,.08)}
.hw-orbit__arm{animation:hw-orbit 4.615s linear infinite}
.hw-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))}
.hw-orbit__arm i{position:absolute;left:50%;top:0;width:10px;height:10px;margin:-5px 0 0 -5px;border-radius:50%;background:var(--theta-300);
  box-shadow:0 0 0 4px rgba(62,85,245,.22),0 0 16px 4px var(--theta-glow)}
.hw-orbit__product{position:absolute;left:50%;top:var(--cy);display:block;height:calc(var(--d) * .7);aspect-ratio:640/794;translate:-50% -50%}
.hw-orbit .hw-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%)}
@keyframes hw-orbit{to{transform:rotate(360deg)}}
.hw-orbit[data-in-view="false"] .hw-orbit__arm{animation-play-state:paused}

/* binaural beat: two sines, one per ear (3 and 4 cycles per width); each line is twice the frame and slides half of itself */
.hw-beat{position:absolute;z-index:2;left:0;right:0;bottom:0;height:52%;overflow:hidden;pointer-events:none;
  background:linear-gradient(to top,rgba(6,7,11,.86),rgba(6,7,11,.5) 55%,transparent)}
.hw-beat svg{--h:clamp(44px,5vw,72px);position:absolute;left:0;top:58%;width:200%;height:var(--h);margin-top:calc(var(--h) / -2);overflow:visible;fill:none;stroke-width:1.5;stroke-linecap:round;animation:hw-beat 16s linear infinite}
.hw-beat__a{stroke:var(--theta-300);opacity:.6}
.hw-beat__b{stroke:var(--cyan-300);opacity:.6}
@keyframes hw-beat{to{transform:translateX(-50%)}}
.hw-beat[data-in-view="false"] svg{animation-play-state:paused}

/* ---------- 3 · Your session (M08) ---------- */
.hw-session{background:var(--bg-1)}
.hw-session__head{padding-block:var(--section-y-tight) clamp(16px,2vw,32px)}
.hw-session__head .sec__head{margin-bottom:0}
.hw-session__after{padding-top:clamp(56px,7vw,112px)}

/* The media window. Cards (phones, tablets, the calm desktop state): every source fills a 4:5 frame.
   The poster sits outside the film.js layer so it can load and stay put while the film layer moves. */
.hw-session .m-session__media{aspect-ratio:4/5}
.hw-win__box{position:absolute;inset:0;overflow:hidden}
.hw-win__poster,.hw-win__calm,.hw-win__alt{position:absolute;inset:0;display:block}
.hw-win__poster img,.hw-win__calm img,.hw-win__alt img{display:block;width:100%;height:100%;object-fit:cover;object-position:var(--pos,50% 50%)}
.hw-win__calm img{object-position:50% 50%}
.hw-win .hw-win__film{position:absolute;inset:0;background:none}
.hw-win>.hw-win__spill,.hw-win__box>.hw-win__calm,.hw-win>.hw-win__alt{display:none}   /* beats modules.css .m-frame>picture{display:block} */
.hw-win__cap{position:absolute;z-index:4;left:14px;top:14px}
.hw-win__cap .chip{min-height:32px;padding-inline:12px;font-size:.8125rem}

/* calm states: the film stays on its poster, so "Rest" shows the closed, lit chamber instead of the lid about to close */
html[data-motion="off"] .hw-win__box>.hw-win__calm{display:block}
html[data-motion="off"] .hw-win .film__toggle{display:none}   /* film.js disables it while motion is off; the poster is the design */

@media (min-width:600px){
  .hw-session .m-session:not(.is-live) .m-session__step{grid-template-columns:minmax(0,2fr) minmax(0,3fr);align-items:center;column-gap:clamp(20px,3vw,36px)}
  .hw-session .m-session:not(.is-live) .m-session__mwave{grid-column:1/-1}
}
@media (min-width:1024px){
  .hw-session .m-session:not(.is-live) .m-session__steps{row-gap:clamp(32px,4vw,56px)}
}

/* Desktop, live (pinned): a fixed window; people films sit in a 9:16 frame over their own blurred poster,
   the chamber films and the canopy fill the window. */
@media (min-width:1024px){
  .hw-session .m-session.is-live{--win-h:min(60vh,600px);--inset:clamp(16px,2.4vh,26px)}
  .hw-session .m-session.is-live .m-session__media{aspect-ratio:auto;height:var(--win-h)}
  /* the window behind the frame: midnight with a theta bloom, the film's own colours only as a faint blurred spill */
  .hw-session .m-session.is-live .hw-win--framed{background:radial-gradient(46% 62% at 50% 56%,rgba(62,85,245,.34),rgba(62,85,245,.08) 58%,transparent 78%),var(--bg-2)}
  .hw-session .m-session.is-live .hw-win--framed .hw-win__spill{display:block;position:absolute;inset:0;opacity:.32;pointer-events:none;
    -webkit-mask-image:radial-gradient(closest-side,#000 35%,transparent 100%);mask-image:radial-gradient(closest-side,#000 35%,transparent 100%)}
  .hw-session .m-session.is-live .hw-win--framed .hw-win__spill img{width:100%;height:100%;object-fit:cover;filter:blur(40px) brightness(.6) saturate(1.3)}
  .hw-session .m-session.is-live .hw-win--framed .hw-win__box{inset:var(--inset) auto auto 50%;height:calc(var(--win-h) - 2 * var(--inset));width:calc((var(--win-h) - 2 * var(--inset)) * 9 / 16);
    border-radius:var(--r-l);transform:translateX(-50%);
    box-shadow:inset 0 0 0 1px rgba(255,255,255,.14),0 40px 100px -40px var(--theta-glow),0 30px 60px -30px rgba(0,0,0,.7)}
  .hw-session .m-session.is-live .hw-win--framed .hw-win__box::after{content:"";position:absolute;inset:0;z-index:4;border-radius:inherit;pointer-events:none;box-shadow:inset 0 1px 0 rgba(255,255,255,.22),inset 0 0 0 1px rgba(255,255,255,.08)}
  .hw-session .m-session.is-live .hw-win__cap{top:auto;left:20px;bottom:20px}
  /* film.js plays a film while ≥10% of it is in view. Inactive steps only fade, so their film layer is moved
     out of view once the 500ms crossfade has finished: one film decodes at a time, and it resumes on return. */
  .hw-session .m-session.is-live .m-session__step:not(.is-active) .hw-win__film{transform:translateX(-400vw);transition:transform 0s linear 520ms}
  .hw-session .m-session.is-live .m-session__step:not(.is-active) .film__toggle{visibility:hidden;transition:visibility 0s linear 520ms}
}

/* Step 2: the goggles film gives way to the lit canopy inside the same window, scrubbed by the pinned scroll.
   The pin runs over .m-session's "contain" range (pin height + 250%), so step 2 spans 25–50% of it. */
@supports (animation-timeline: view()){
  .hw-session .m-session{view-timeline:--hw-session block;view-timeline-inset:0}   /* ignore the header scroll-padding: the range must match the pin */
  @media (min-width:1024px){
    .hw-session .m-session.is-live .hw-win__alt{display:block;z-index:5;animation:hw-open linear both;animation-timeline:--hw-session;animation-range:contain 36% contain 44%}
  }
}
@keyframes hw-open{from{opacity:0;transform:scale(1.08)}to{opacity:1;transform:none}}

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

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

/* ---------- Bulgarian (P5) ----------
   Phones: "13 об/мин" is longer than "13 rpm" and broke after the slash in the three-column fact strip;
   the three figures step down together so each stays on one line at 360px. */
@media (max-width:599px){
  html[lang="bg"] .hw-hero .hero__facts b{font-size:calc(var(--t-num-m) * .56);white-space:nowrap}
}