/* =====================================================================
   CTFY · Midnight Theta · Home (/) — page layer
   Spec: docs/redesign/pages/10-home.md. Builds on css/site.css (foundation) and
   css/modules.css (M01–M33); only page composition and rhythm live here.
   Chapters: I machine (hero → ribbon → product split → anatomy → film → technology)
             II proof (stories) · III own (field) · IV studio (porcelain) · V visit
   ===================================================================== */

/* Anchors from other pages land with the dock clear of the heading (PRD §9.4) */
#chamber,#testimonials,#own,#programs,#corporate,#about,#contact,#book{scroll-margin-top:96px}

/* ---------- I · 1 · H1 film hero ---------- */
/* Ultra-wide (16:9 film, no horizontal crop): the centred text column would reach the lit canopy, so the film
   slides right and fades in from the left (crop, not text, per PRD §4.1). ≤1920 the pre-cropped encode holds. */
@media (min-width:1921px){
  .hero--cinematic .hero__media{left:calc(100vw - 1920px);
    -webkit-mask-image:linear-gradient(90deg,transparent,#000 min(32%,520px));mask-image:linear-gradient(90deg,transparent,#000 min(32%,520px))}
}
/* short desktop viewports: the ribbon peeking at the hero's edge is the scroll cue; the line would crowd the CTA row */
@media (max-height:1000px){.hero--cinematic .scroll-cue{display:none}}

/* ---------- I · 2 · Proof ribbon: half over the film, half over --bg-1 ---------- */
.home-ribbon{position:relative;z-index:2}

/* ---------- I · 3 · Product split ---------- */
.home-chamber{padding-top:clamp(72px,9vw,136px);overflow-x:clip}
/* the product's own dark set dissolves into the bloom and the chapter (no visible photo rectangle):
   the media column joins the chapter's stacking context so the blend sees --bg-1, not a transparent group */
.home-chamber .m-split--product .m-split__media{isolation:auto}
.home-chamber .m-split__product{mix-blend-mode:lighten}
@media (min-width:1024px){
  /* the four features ride the product's lower edge as one row of Veil chips */
  .home-chamber .m-split__tiles{--cols:4;gap:10px;margin:-9% 0 0}
  .home-chamber .m-split__tile{padding:14px 14px 16px;font-size:.8125rem}
  .home-chamber .m-split__tile b{font-size:.875rem}
  .home-chamber .m-split__tile span{text-wrap:balance}
}
@media (min-width:1440px){
  /* wide screens: the product (not the chips) bleeds off the right edge, capped so it never balloons */
  .home-chamber .m-split__product{margin-right:max(calc((var(--container) - 100vw) / 2),-180px)}
}

/* ---------- I · 4 · Anatomy + spec strip ---------- */
.home-anatomy{padding-top:clamp(40px,6vw,96px)}
.home-anatomy .sec__head{margin-bottom:clamp(8px,2vw,32px)}
.home-anatomy .m-anatomy__stage{max-width:1120px}
.home-anatomy .m-anatomy{isolation:auto}
.home-anatomy .m-anatomy__media{mix-blend-mode:lighten}     /* the blueprint shows through the set: no photo edge */
/* phones/tablets: the stage takes the still's own 3:2 shape so the % pins sit on the image (the module's 4:3 box
   left a 30px band under a <picture>-wrapped image and pushed the lower pins off the machine) */
@media (max-width:1023px){.home-anatomy .m-anatomy__media{aspect-ratio:auto}}
@media (min-width:1024px){
  .home-anatomy .m-anatomy__img{                            /* floor reflection fades out instead of ending on a line */
    -webkit-mask-image:linear-gradient(to bottom,#000 78%,transparent),radial-gradient(72% 76% at 50% 50%,#000 62%,transparent 100%);-webkit-mask-composite:source-in;
            mask-image:linear-gradient(to bottom,#000 78%,transparent),radial-gradient(72% 76% at 50% 50%,#000 62%,transparent 100%);mask-composite:intersect}
}
.home-specs{margin-top:clamp(56px,7vw,104px)}

/* ---------- I · 5 · Film showcase: pre-blurred spill still (media/film/spin-spill.webp) ---------- */
.home-film .m-film__head{margin-bottom:clamp(40px,5vw,64px)}
.home-film .m-film__spill{inset:-12% -18%;opacity:.7}
@media (max-width:767px){.home-film .m-film__chip{top:16px;bottom:auto}}   /* clear of the pause control on narrow frames */

/* ---------- I · 6 · Technology bento + method strip ---------- */
.home-tech .card--lead .card__title{max-width:20ch}
@media (min-width:1024px){
  /* the A02 loop is 540px wide: it stands at the tile's right edge at native size and fades in from the left,
     never upscaled into the full tile */
  .home-tech .card--lead>.card__media .film{left:auto;width:min(100%,540px);
    -webkit-mask-image:linear-gradient(90deg,transparent,#000 22%);mask-image:linear-gradient(90deg,transparent,#000 22%)}
}
.home-tech .card__body>.chip{align-self:flex-start}
.home-method{margin-top:clamp(56px,7vw,96px)}

/* ---------- II · 7 · Stories ---------- */
.home-stories__cta{margin-top:clamp(28px,3vw,40px)}

/* ---------- III · 8 · Own a Theta Chamber (BG-A hero field) ---------- */
.home-own{min-height:100vh;min-height:100svh;display:grid;align-content:center;overflow:clip}   /* clip, not hidden: the field stage stays sticky */
/* soften the step from the stories chapter into the field */
.home-own::after{content:"";position:absolute;left:0;right:0;top:0;z-index:-1;height:min(30%,300px);pointer-events:none;background:linear-gradient(to bottom,var(--bg-1),rgba(10,12,18,0))}
.home-own__inner{display:grid;justify-items:center}
.home-own__head{max-width:960px;margin-bottom:0}
.home-own__head .t-lead{color:var(--text-1)}                 /* text over the field uses --text-1 (01 §5.2) */
.home-own__product{position:relative;isolation:isolate;width:min(720px,100%);margin:clamp(12px,2vw,28px) auto 0;mix-blend-mode:lighten}
.home-own__product>.bloom{inset:18% 6% -6%;background:var(--m-bloom)}
.home-own__img{width:100%;height:auto;
  -webkit-mask-image:linear-gradient(to bottom,#000 84%,transparent),radial-gradient(66% 70% at 50% 48%,#000 58%,transparent 100%);-webkit-mask-composite:source-in;
          mask-image:linear-gradient(to bottom,#000 84%,transparent),radial-gradient(66% 70% at 50% 48%,#000 58%,transparent 100%);mask-composite:intersect}
.home-own__spec{width:100%;margin-top:clamp(24px,3vw,48px);text-align:left}
.home-own__spec .m-spec__item:first-child .m-spec__num{font-size:clamp(3rem,1.6rem + 3.6vw,5.5rem)}   /* €120,000 fits its column */
.home-own__ctas{display:flex;flex-wrap:wrap;justify-content:center;align-items:center;gap:12px 14px;margin-top:clamp(36px,4vw,56px)}
.home-own__ctas .link{margin-left:10px}
.home-own__note{margin-top:clamp(24px,3vw,32px)}
.js .home-own__product.is-pending{transform:translateY(24px)}
/* the field brightens as the chapter enters (core.js adds .is-entered once, only with motion on) */
.home-own>.field{transition:opacity 1600ms var(--ease-out)}
.js .home-own:not(.is-entered)>.field{opacity:.5}
[data-motion="off"] .home-own>.field{opacity:1!important}
@media (prefers-reduced-motion:reduce){.home-own>.field{opacity:1!important}}
@media (max-width:767px){
  .home-own{min-height:0}
  .home-own__product{order:-1;width:calc(100% + 2 * var(--gutter));max-width:none;margin:0 0 8px}
  /* phones: figures → disclaimer → "Book a day", so "~12 mo", the note and the booking button share one screen (PRD §9.3, 00 §4.8) */
  .home-own__spec{row-gap:28px}
  .home-own__spec .m-spec__num{margin-top:16px}
  .home-own__note{order:1;margin-top:28px}
  .home-own__ctas{order:2;margin-top:20px;flex-direction:column;align-items:stretch;width:100%}
  .home-own__ctas .btn{width:100%}
  .home-own__ctas .link{margin-left:0;justify-content:center}
}

/* ---------- IV · 9 · Toffler statement on porcelain ---------- */
.home-quote{padding-top:160px;padding-bottom:0}
.home-quote .m-lightup{padding-bottom:var(--section-y-tight)}

/* ---------- IV · 10 · Offer ladder ---------- */
.home-ladder{padding-top:var(--section-y-tight)}

/* ---------- IV · 11 · More ways to grow ---------- */
.home-grow{padding-top:0}
.home-grow__note{margin-top:clamp(32px,4vw,48px)}
.home-grow__note .icon{color:var(--theta-700)}

/* ---------- IV · 12 · For companies (paper-1 band) ---------- */
.home-corp{background:var(--paper-1)}
.home-corp .m-frame{background:var(--paper-0)}
.home-corp .m-ticks .icon{color:var(--theta-700)}
.home-corp__names{margin-top:4px}
.home-corp__names .m-names__grid{grid-template-columns:repeat(3,minmax(0,1fr))}   /* one row of three at every width */
.home-corp__names .m-names__grid li{min-height:64px;padding:14px 12px}

/* ---------- IV · 13 · About: statement as lead, three pillars, studio gallery ---------- */
.home-about__grid{display:grid;grid-template-columns:minmax(0,5fr) minmax(0,7fr);gap:24px clamp(32px,6vw,96px);align-items:end}
.home-about__head{display:grid;gap:20px;justify-items:start}
.home-about__lead{display:grid;gap:24px;justify-items:start}
.home-about__lead .m-split__line{max-width:26ch;font-size:calc(var(--t-quote) * .7 * var(--k-display))}
.home-about__pillars{margin-top:clamp(56px,7vw,104px)}
.home-about__gallery{margin-top:clamp(56px,7vw,104px)}
.home-about .m-gallery__tile>picture{width:100%;height:100%}   /* <picture>-wrapped tiles fill their cell like plain <img> tiles */
.home-about__caption{margin-top:20px}
@media (max-width:1023px){
  .home-about__grid{grid-template-columns:minmax(0,1fr)}
  .home-about__lead .m-split__line{max-width:30ch;font-size:calc(1.5rem * var(--k-display))}
}

/* ---------- V · 14 · Visit: arrival + booking ---------- */
.home-visit__info{align-items:start}
.home-visit .m-booking{max-width:640px}

/* ---------- Bulgarian (P5): longer Cyrillic labels; the EN rendering is untouched ---------- */
/* ladder: "· пълната трансформация" may drop under the price as one unit at 360px instead of overflowing */
html[lang="bg"] .home-ladder .m-tier__price{white-space:normal}
html[lang="bg"] .home-ladder .m-tier__price small{display:inline-block}
/* product split: BG has three feature tiles (no "Instant stillness" in the BG copy), so the row is three wide */
@media (min-width:1024px){html[lang="bg"] .home-chamber .m-split__tiles{--cols:3}}
@media (max-width:1023px){html[lang="bg"] .home-chamber .m-split__tile:last-child:nth-child(odd){grid-column:1/-1}}
/* About: the BG lead is the longer "CTFY се роди…" statement and there are two pillars (the BG copy's two cards) */
@media (min-width:1024px){html[lang="bg"] .home-about__lead .m-split__line{max-width:36ch}}
@media (min-width:600px){html[lang="bg"] .home-about__pillars{grid-template-columns:repeat(2,minmax(0,1fr))}}
/* technology lead card: the BG title runs to three lines on phones, so the card grows and the copy sits in the dark part of the shade */
@media (max-width:767px){html[lang="bg"] .home-tech .card--lead{min-height:560px}}