/* ==========================================================================
   FORMÉ Studio · motion layer (sections 3–8) and smooth scroll
   Pairs with js/motion.js. Everything here is either a new component that is
   complete without JS (the "4", the footer wordmark), or a state that only
   exists while html.motion is set (never under prefers-reduced-motion).
   ========================================================================== */

/* ---------- Lenis (vendored 1.3 stylesheet) ---------- */
html.lenis, html.lenis body { height: auto; }
html.lenis { scroll-behavior: auto !important; }
.lenis:not(.lenis-autoToggle).lenis-stopped { overflow: clip; }
.lenis.lenis-smooth [data-lenis-prevent] { overscroll-behavior: contain; }
.lenis.lenis-smooth iframe { pointer-events: none; }

/* ---------- Heading lines rise out of a slit ----------
   SplitText wraps each line in .ln-mask with overflow:clip, which would cut the
   carons of Č/Š/Ž above and the descenders of j/g/p/ž below at a 1.06 line-height.
   A clip-path that only closes the bottom edge (a little below the descenders)
   keeps every glyph whole; the lines start far enough down to stay hidden. */
.motion .ln-mask { overflow: visible !important; clip-path: inset(-0.6em -0.3em -0.2em -0.3em); }

/* ==========================================================================
   02 · STUDIO — the "4"
   ========================================================================== */
.four { display: grid; grid-template-columns: repeat(12, minmax(0, 1fr)); column-gap: var(--gap); align-items: end; margin-bottom: clamp(56px, 8vw, 120px); }
.four__fig { grid-column: 1 / span 5; }
.four__num {
  font-family: var(--f-display); font-weight: 900; font-size: clamp(13rem, 7rem + 22vw, 27rem);   /* the end state; motion.js scrubs 400 → 900 */
  line-height: .78; letter-spacing: -.04em; color: var(--oak); font-variant-numeric: lining-nums;
  font-optical-sizing: auto; margin-left: -.04em;
}
.four__cap { margin-top: clamp(18px, 2vw, 28px); font-size: var(--fs-label); font-weight: 500; letter-spacing: .16em; text-transform: uppercase; color: var(--ink-2); }
.four__text { grid-column: 7 / span 6; padding-bottom: 4px; }
.four__text .lead { margin-top: clamp(20px, 2.4vw, 32px); max-width: 26em; }
.four__room { margin-top: 18px; color: var(--ink-2); max-width: 30em; }
@media (max-width: 1023px) {
  .four { align-items: start; }
  .four__fig { grid-column: 1 / -1; display: flex; align-items: flex-end; gap: 20px; }
  .four__cap { margin: 0 0 14px; line-height: 1.9; }
  .four__cap span { display: block; }
  .four__cap .four__dot { display: none; }
  .four__text { grid-column: 1 / -1; margin-top: 28px; }
}
@media (max-width: 699px) {
  .four__num { font-size: clamp(9.5rem, 52vw, 13rem); }
  .four__cap { font-size: .75rem; letter-spacing: .14em; }
}

/* ==========================================================================
   03 · TRENING — the film sits in an arch, lit at the rim like the mirrors
   ========================================================================== */
#trening { overflow-x: clip; }   /* the glow may reach past the column, never past the page */
.film-wrap { position: relative; }
.film-wrap::before {
  content: ""; position: absolute; inset: -10% -14% -6%; z-index: 0; pointer-events: none;
  background: radial-gradient(50% 46% at 50% 42%, rgb(247 233 207 / .17), rgb(247 233 207 / 0) 72%);
  opacity: 0; transition: opacity 2.2s var(--ease);
}
.film-wrap.is-lit::before, html:not(.motion) .film-wrap::before { opacity: 1; }
.film { z-index: 1; border-radius: 999px 999px 2px 2px; }
.film::after {
  content: ""; position: absolute; inset: 0; z-index: 1; pointer-events: none; border-radius: inherit;
  box-shadow: inset 0 0 0 1px rgb(247 233 207 / .42), inset 0 0 28px rgb(247 233 207 / .18);
}
.film__btn { z-index: 2; }

/* ==========================================================================
   06 · PITANJA — answers open smoothly where the browser can animate to auto
   ========================================================================== */
@supports (interpolate-size: allow-keywords) {
  .motion .faq { interpolate-size: allow-keywords; }
  .motion .faq details::details-content {
    block-size: 0; overflow-y: clip;
    transition: block-size .55s var(--ease), content-visibility .55s allow-discrete;
  }
  .motion .faq details[open]::details-content { block-size: auto; }
}

/* ==========================================================================
   FOOTER — the back cover: the wordmark set across the full measure
   ========================================================================== */
.foot__mast { margin-top: clamp(56px, 8vw, 112px); color: var(--cream); }
.foot__mast svg { display: block; width: 100%; height: auto; overflow: hidden; }

/* ==========================================================================
   HEADER — the long acute marks the section you are reading
   ========================================================================== */
.hdr__nav { position: relative; }
.hdr__acute {
  position: absolute; left: 0; top: 50%; width: 11px; height: 9px; margin: -21px 0 0 -3px;
  opacity: 0; pointer-events: none; color: currentColor;
  transition: transform .7s var(--ease), opacity .35s var(--ease);
}
.hdr__acute svg { display: block; width: 100%; height: 100%; }
.hdr__acute.is-on { opacity: 1; }
.hdr__nav a[aria-current="true"] { background-size: 100% 1px; }