/* hero scene (step 1): copy on the left (on top on phones), the drawing behind, the film window that unfolds out of
   a window of the house, its plate and two buttons. Positions of the film parts come from hero.js.
   Type and elevation follow the design review of 20.10.2026 (impeccable): h1 above every h2, penumbra shadows only. */
.hx { position: absolute; inset: 0; overflow: hidden; }
.hx-svg { position: absolute; inset: 0; width: 100%; height: 100%; display: block; z-index: 0; }

.hx-copy { position: absolute; z-index: 3; left: var(--gutter); top: calc(var(--header) + 40px); width: min(560px, 42vw); will-change: transform; }
/* h1: the largest type on the page (phone 32, desktop up to 60); the static first paint (.hx-pre) takes the same size */
.hx-title, .hx.is-m .hx-title, .hx-pre .hx-title { font: 800 var(--fs-h1, clamp(2rem, 1.2rem + 3.2vw, 3.75rem))/1.05 var(--sans); letter-spacing: -.025em; color: var(--ink); text-wrap: balance; }
.hx-title span { color: var(--blue); }
.hx-sub, .hx.is-m .hx-sub, .hx-pre .hx-sub { margin-top: clamp(14px, 2.2vh, 22px); font-size: var(--fs-lead, clamp(1.0625rem, 1rem + .3vw, 1.1875rem)); line-height: 1.55; color: var(--ink); text-wrap: pretty; }
:lang(ka) .hx-title, :lang(th) .hx-title { line-height: 1.2; }
/* Georgian words are long and its glyphs wide: one step down on desktops (still above every h2), or the h1 runs to 7 lines */
:lang(ka) .hx-title, :lang(ka) .hx.is-m .hx-title, :lang(ka) .hx-pre .hx-title { font-size: clamp(2rem, 1.2rem + 2.4vw, 3.125rem); }

/* the hint to scroll: the only control on the first screen. A real button (scrolls one screen down), styled as a
   secondary sheet control, not as a call to action: sheet, hairline edge, light penumbra, ink text, a blue arrow */
.hx-scroll { position: absolute; z-index: 5; left: var(--gutter); bottom: max(28px, 4vh); display: inline-flex; align-items: center; gap: 12px;
  min-height: 48px; margin: 0; padding: 0 18px 0 20px; border: 1px solid var(--edge-2, rgba(38, 41, 47, .20)); border-radius: 0;
  background: var(--sheet); color: var(--ink); font: 600 .9375rem/1.2 var(--sans); letter-spacing: 0; text-transform: none; white-space: nowrap;
  box-shadow: var(--hi, inset 0 1px 0 rgba(255, 255, 255, .75)), var(--sh-2, 0 1px 2px rgba(38, 41, 47, .10), 0 6px 14px -6px rgba(60, 50, 30, .18), 0 24px 44px -20px rgba(60, 50, 30, .30));
  cursor: pointer; -webkit-tap-highlight-color: transparent; touch-action: manipulation;
  transition: transform var(--t-release, 160ms) var(--ease-out, ease-out), box-shadow var(--t-release, 160ms) var(--ease-out, ease-out), border-color 150ms ease; }
.hx-scroll svg { width: 16px; height: 22px; flex: none; color: var(--blue); animation: hx-nudge 1.6s var(--ease) infinite; }
@keyframes hx-nudge { 0%, 100% { transform: translateY(-2px); } 50% { transform: translateY(5px); } }
@media (hover: hover) and (pointer: fine) {
  .hx-scroll:hover { transform: translateY(-1px); border-color: rgba(38, 41, 47, .34);
    box-shadow: var(--hi, inset 0 1px 0 rgba(255, 255, 255, .75)), var(--sh-3, 0 2px 4px rgba(20, 22, 26, .14), 0 12px 24px -8px rgba(20, 22, 26, .22), 0 32px 64px -24px rgba(20, 22, 26, .34)); }
}
.hx-scroll:active { transform: translateY(1px); transition-duration: var(--t-press, 70ms);
  box-shadow: var(--hi, inset 0 1px 0 rgba(255, 255, 255, .75)), var(--sh-press, 0 1px 1px rgba(38, 41, 47, .14), 0 2px 4px -2px rgba(58, 46, 26, .22)); }
.hx-scroll:focus-visible { outline: 2px solid var(--blue); outline-offset: 3px; }
@media (prefers-reduced-motion: reduce) { .hx-scroll svg { animation: none; } .hx-scroll { transition: none; } }
/* phone: centred at the bottom over the drawing */
.hx.is-m .hx-scroll { left: 0; right: 0; width: max-content; margin-inline: auto; bottom: max(18px, 2.6vh); }
.hx-btn:focus-visible, .hx-hit:focus-visible { outline: 2px solid var(--blue); outline-offset: 3px; }

/* the film window: placed at its final rect, the transform maps it onto the house window while it opens. A plate
   (L2): keeps its ink edge as a frame of the drawing, casts a soft penumbra */
.hx-film { position: absolute; z-index: 4; left: 0; top: 0; width: 320px; height: 180px; transform-origin: 0 0; background: var(--paper2); outline: 1px solid var(--ink);
  box-shadow: var(--sh-2, 0 1px 2px rgba(38, 41, 47, .10), 0 6px 14px -6px rgba(60, 50, 30, .18), 0 24px 44px -20px rgba(60, 50, 30, .30)); visibility: hidden; opacity: 0; pointer-events: none; }
.hx-film video { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; display: block; background: var(--paper2); }
.hx-film.is-fit video { object-fit: contain; }
.hx-hit { position: absolute; inset: 0; display: grid; place-items: center; margin: 0; padding: 0; border: 0; background: transparent; cursor: pointer; }
.hx-play { width: 68px; height: 68px; opacity: 0; transform: scale(.85); transition: opacity .2s var(--ease), transform .2s var(--ease); }
.hx-play svg { width: 100%; height: 100%; display: block; }
.hx-play circle { fill: rgba(248, 245, 238, .92); stroke: var(--ink); stroke-width: 1.5; }
.hx-play path { fill: var(--blue); }
.hx-film.is-paused .hx-play { opacity: 1; transform: none; }
.hx-crop { position: absolute; width: 14px; height: 14px; border: 0 solid var(--ink); opacity: 0; transition: opacity .25s var(--ease); pointer-events: none; }
.hx-crop.tl { left: -9px; top: -9px; border-left-width: 1.5px; border-top-width: 1.5px; }
.hx-crop.tr { right: -9px; top: -9px; border-right-width: 1.5px; border-top-width: 1.5px; }
.hx-crop.bl { left: -9px; bottom: -9px; border-left-width: 1.5px; border-bottom-width: 1.5px; }
.hx-crop.br { right: -9px; bottom: -9px; border-right-width: 1.5px; border-bottom-width: 1.5px; }
.hx-film.is-open .hx-crop { opacity: 1; }

/* the plate over the film: a label on media, ink fill, mono for the short label and the running time (12 px floor) */
.hx-tag { position: absolute; z-index: 4; display: inline-flex; align-items: center; gap: 10px; height: 32px; padding: 0 13px 0 11px; background: var(--ink); color: var(--sheet); font: 600 12px/1 var(--mono); letter-spacing: .1em; text-transform: uppercase; white-space: nowrap;
  box-shadow: var(--sh-1, 0 1px 1px rgba(60, 50, 30, .07), 0 2px 6px -2px rgba(60, 50, 30, .10), 0 10px 22px -14px rgba(60, 50, 30, .18)); visibility: hidden; opacity: 0; }
.hx-tag::before { content: ''; width: 8px; height: 8px; background: var(--blue); outline: 1.5px solid var(--sheet); flex: none; }
.hx-tag span { min-height: 1em; }

/* sound and full screen: secondary sheet buttons (the page has two tiers: blue = the call to action, sheet = the rest) */
.hx-ctrl { position: absolute; z-index: 4; display: flex; flex-wrap: wrap; gap: 10px; visibility: hidden; opacity: 0; pointer-events: none; }
.hx-btn { display: inline-flex; align-items: center; gap: 9px; min-height: 44px; margin: 0; padding: 0 16px 0 13px; border: 1px solid var(--edge-2, rgba(38, 41, 47, .20)); border-radius: 0;
  background: var(--sheet); color: var(--ink); font: 600 .9375rem/1.2 var(--sans); letter-spacing: 0; text-transform: none; cursor: pointer;
  box-shadow: var(--hi, inset 0 1px 0 rgba(255, 255, 255, .75)), var(--sh-1, 0 1px 1px rgba(60, 50, 30, .07), 0 2px 6px -2px rgba(60, 50, 30, .10), 0 10px 22px -14px rgba(60, 50, 30, .18));
  transition: transform var(--t-release, 160ms) var(--ease-out, ease-out), box-shadow var(--t-release, 160ms) var(--ease-out, ease-out), border-color 150ms ease, background-color 150ms ease;
  -webkit-tap-highlight-color: transparent; touch-action: manipulation; }
.hx-btn svg { width: 17px; height: 17px; flex: none; }
@media (hover: hover) and (pointer: fine) {
  .hx-btn:hover { transform: translateY(-1px); border-color: rgba(38, 41, 47, .34);
    box-shadow: var(--hi, inset 0 1px 0 rgba(255, 255, 255, .75)), var(--sh-2, 0 1px 2px rgba(38, 41, 47, .10), 0 6px 14px -6px rgba(60, 50, 30, .18), 0 24px 44px -20px rgba(60, 50, 30, .30)); }
}
/* the press comes after the hover, so a mouse press presses in instead of keeping the hover lift */
.hx-btn:active { transform: translateY(1px); background: var(--paper2); transition-duration: var(--t-press, 70ms);
  box-shadow: var(--hi, inset 0 1px 0 rgba(255, 255, 255, .75)), var(--sh-press, 0 1px 1px rgba(38, 41, 47, .14), 0 2px 4px -2px rgba(58, 46, 26, .22)); }
.hx-btn .x { display: inline; } .hx-btn .w { display: none; }
.hx-btn.is-on .x { display: none; } .hx-btn.is-on .w { display: inline; }

/* phone: the copy is on top and slides away; the two buttons share the width equally, a long label wraps */
.hx.is-m .hx-copy { width: auto; right: 16px; }
.hx.is-m .hx-play { width: 58px; height: 58px; }
.hx.is-m .hx-ctrl { flex-wrap: nowrap; gap: 8px; }
.hx.is-m .hx-btn { flex: 1 1 0; min-width: 0; justify-content: center; padding: 6px 10px; font-size: .875rem; line-height: 1.15; text-align: left; text-wrap: balance; }

/* drawn once (no GSAP or «reduce motion»): everything in its final place */
.v2-still .hx-copy { transform: none !important; }

/* drawn once on a phone: the section grows to hold the copy and the film stack */
.scene.v2-grow { height: auto !important; min-height: 100vh; min-height: 100svh; }
.scene.v2-grow > .scene-stage { position: relative; }
.scene.v2-grow .hx { position: relative; }

/* the film full screen (hero.js expand, owner 25.10.2026): a dark band over the drawing and the copy, the film above
   it, the plate and the buttons on the film */
.hx-back { position: absolute; z-index: 3; inset: 0; background: var(--ink); opacity: 0; visibility: hidden; pointer-events: none; }
.hx-film.is-full { outline-color: transparent; background: #000; }
.hx-film.is-full video { background: #000; }
.hx-film.is-full .hx-crop { opacity: 0; }
.hx.is-full .hx-tag { z-index: 5; }
.hx.is-full .hx-ctrl { z-index: 5; }