/* Section styles: hero: octagon loop, graded cutout, particle stage "hero-particles", copy.
   Unlayered, so it overrides css/base.css. Every selector is scoped under [data-section="hero"].

   Layers, back to front (inside .hero__media, which the scroll push-in scales):
     .hero__layer--far  > .hero__loop     the filmed cage + spotlight, positioned so the lamp hangs over Marko
     .hero__layer--mid  > .hero__subject  Marko, graded for a cold top light, standing under the lamp
     .hero__veil                          black veil: lights-off during the intro hand-off, the rare light flicker
     .hero__stage                         three.js haze cone + dust + embers (the scene reads complete without it)
   then .hero__shade (not scaled) and the copy, which always sits on a solid or near-solid plate.
   Motion ownership: parallax writes the .hero__layer transforms, the push-in writes .hero__media, the intro writes
   .hero__loop / .hero__subject / the copy's children, the scroll lift writes .hero__copy. Never two on one element. */

[data-section="hero"] {
  --lamp-x: .5;                                       /* lamp position as a fraction of the content frame */
  --frame: min(100%, calc(var(--maxw) + var(--safe-l) + var(--safe-r)));
  --lamp: calc((100% - var(--frame)) / 2 + var(--lamp-x) * var(--frame));
  --sub-h: 62%;                                       /* cutout height (portrait) */
  --sub-top: calc(var(--nav-h) + env(safe-area-inset-top) + 1.2svh);
  --sub-cx: 51.6%;                                    /* the subject's centre line inside the cutout frame */
  --feather: 150px;                                   /* portrait: how far the copy plate fades in above the copy */
  min-height: max(600px, 100svh);
  background: var(--void);
  overflow: hidden;                                   /* the push-in scales the media past the hero's edges */
  overflow: clip;
}

/* ---------------------------------------------------------------- media stack */
[data-section="hero"] .hero__media { transform-origin: var(--lamp) 30%; }
[data-section="hero"] .hero__layer { position: absolute; inset: 0; }
[data-section="hero"] .hero__layer--far { inset: -14px; }
html[data-motion="full"] [data-section="hero"] .hero__layer { will-change: transform; }

[data-section="hero"] .hero__loop {
  --pos: 50% 0%;                                      /* lamp on the frame's top edge, whatever the crop */
  position: absolute; top: 0; bottom: 0; left: calc(var(--lamp) - 50%); width: 100%;
  background: var(--void);
}
/* when the frame is pushed sideways its edges fall into the void, never a seam */
[data-section="hero"] .hero__loop::after {
  content: ""; position: absolute; inset: 0; z-index: 2; pointer-events: none;
  background:
    linear-gradient(90deg, var(--void) 0%, rgba(5, 5, 5, 0) 12%, rgba(5, 5, 5, 0) 88%, var(--void) 100%),
    linear-gradient(0deg, rgba(5, 5, 5, .5) 0%, rgba(5, 5, 5, 0) 30%);
}

[data-section="hero"] .hero__subject {
  position: absolute; z-index: 1;
  top: var(--sub-top); left: var(--lamp);
  width: auto; height: var(--sub-h); max-width: none;
  translate: calc(-1 * var(--sub-cx)) 0;             /* centring lives in `translate`, so motion can own `transform` */
  -webkit-user-select: none; user-select: none; pointer-events: none;
}

[data-section="hero"] .hero__veil { position: absolute; inset: 0; z-index: 2; background: #000; opacity: 0; pointer-events: none; }
[data-section="hero"] .hero__stage { z-index: 3; }

/* ---------------------------------------------------------------- shade: bottom hand-off into the next section + nav legibility */
[data-section="hero"] .hero__shade {
  background:
    linear-gradient(0deg, var(--void) 0%, rgba(5, 5, 5, 0) 22%),
    linear-gradient(180deg, rgba(5, 5, 5, .62) 0%, rgba(5, 5, 5, 0) 16%);
}

/* ---------------------------------------------------------------- copy */
[data-section="hero"] .hero__inner { position: relative; }
[data-section="hero"] .hero__copy { position: relative; }
[data-section="hero"] .hero__title {
  font-size: var(--fs-h1);
  line-height: var(--lh-display);
  margin-top: clamp(12px, 1.4vw, 20px);
}
[data-section="hero"] .hero__title .hot { white-space: nowrap; }
[data-section="hero"] .hero__foot { display: grid; justify-items: start; gap: clamp(20px, 2.4vw, 28px); margin-top: clamp(16px, 2.2vw, 30px); }
[data-section="hero"] .hero__lead { max-width: 36ch; }
[data-section="hero"] .hero__credit { color: var(--mute); right: calc((100% - var(--frame)) / 2 + var(--safe-r)); }   /* aligned with the nav on wide screens */
[data-section="hero"] .hero__credit > span { display: block; }

/* portrait (phones, tablets upright): Marko in the upper part under the lamp, the copy on its own plate below */
@media (orientation: portrait) {
  [data-section="hero"] .hero__copy::before {
    content: ""; position: absolute; z-index: -1; pointer-events: none;
    left: calc(-1 * var(--safe-l)); right: calc(-1 * var(--safe-r));
    top: calc(-1 * var(--feather)); bottom: calc(-1 * clamp(36px, 8svh, 96px) - 4px);
    background: linear-gradient(180deg,
      rgba(5, 5, 5, 0) 0,
      rgba(5, 5, 5, .5) calc(var(--feather) * .38),
      rgba(5, 5, 5, .86) calc(var(--feather) * .72),
      rgba(5, 5, 5, .95) var(--feather),
      var(--void) 100%);
  }
}
@media (orientation: portrait) and (max-width: 767px) {
  [data-section="hero"] .hero__credit { display: none; }          /* as on the original page: no credit on phones */
  [data-section="hero"] .hero__lead { font-size: 17px; line-height: 1.5; }
  [data-section="hero"] .cover__content { padding-bottom: clamp(28px, 5svh, 48px); }
}
/* short phones upright (iPhone SE class): the face and the headline come first; the hero grows past the fold a little */
@media (orientation: portrait) and (max-height: 700px) {
  [data-section="hero"] { --sub-h: 56%; --feather: 104px; }
}
/* 320x568 class: one screen. Marko's face above the copy, the whole copy stack (label, three-line title, lead, CTA)
   anchored to the fold with tighter gaps */
@media (orientation: portrait) and (max-height: 620px) {
  [data-section="hero"] { min-height: 100svh; --sub-h: 44%; --sub-top: calc(var(--nav-h) + env(safe-area-inset-top) - 4px); --feather: 44px; }
  [data-section="hero"] .cover__content { padding-top: calc(var(--nav-h) + env(safe-area-inset-top) + 8px); padding-bottom: 14px; }
  [data-section="hero"] .hero__title { margin-top: 6px; }
  [data-section="hero"] .hero__foot { gap: 14px; margin-top: 10px; }
  [data-section="hero"] .hero__lead { font-size: 16px; line-height: 1.45; }
}
@media (orientation: portrait) and (min-width: 600px) {
  [data-section="hero"] { --sub-h: 60%; }
  [data-section="hero"] .hero__lead { max-width: 44ch; }
}

/* landscape: copy in the left column on a dark horizontal plate, Marko right of centre under the lamp */
@media (orientation: landscape) {
  [data-section="hero"] {
    --lamp-x: .68;
    --copy-w: .44;
    --copy-end: calc((100% - var(--frame)) / 2 + var(--copy-w) * var(--frame));
    --sub-h: min(calc(100% - var(--nav-h) - 6svh), 880px);
  }
  [data-section="hero"] .hero__subject { top: auto; bottom: 0; }
  [data-section="hero"] .hero__shade {
    background:
      linear-gradient(90deg, rgba(5, 5, 5, .95) 0%, rgba(5, 5, 5, .9) var(--copy-end), rgba(5, 5, 5, .45) calc(var(--copy-end) + 6%), rgba(5, 5, 5, 0) calc(var(--copy-end) + 18%)),
      linear-gradient(0deg, var(--void) 0%, rgba(5, 5, 5, 0) 24%),
      linear-gradient(180deg, rgba(5, 5, 5, .6) 0%, rgba(5, 5, 5, 0) 18%);
  }
  [data-section="hero"] .hero__title {
    font-size: clamp(64px, min(9.2vw, 15svh), 140px);
    max-width: 5.3em;                                 /* SPREMAN ZA / SLEDEĆU / RUNDU? */
  }
  [data-section="hero"] .hero__lead { max-width: 38ch; }
}
@media (orientation: landscape) and (max-aspect-ratio: 3/2) {
  [data-section="hero"] { --lamp-x: .7; --copy-w: .42; }
}

/* short landscape phones: everything in one screen, a two-line headline, Marko at the right edge */
@media (orientation: landscape) and (max-height: 520px) {
  [data-section="hero"] {
    --lamp-x: .78;
    --copy-w: .6;
    --sub-h: calc(100% - var(--nav-h) - 10px);
    min-height: 100svh;
  }
  [data-section="hero"] .cover__content { padding-top: calc(var(--nav-h) + env(safe-area-inset-top) + 6px); padding-bottom: clamp(12px, 3.6svh, 20px); }
  [data-section="hero"] .hero__title {
    font-size: clamp(50px, 14svh, 64px);             /* stays above the landscape h2 (13svh) */
    max-width: none;
    margin-top: 8px;
  }
  [data-section="hero"] .hero__foot { gap: 14px; margin-top: 12px; }
  [data-section="hero"] .hero__lead { font-size: 16px; line-height: 1.45; max-width: 40ch; }   /* ends before Marko's shoulder */
  [data-section="hero"] .hero__credit { display: none; }
}
/* the smallest landscape phones (568x320): smaller title, tighter stack, Marko pushed right, the dark plate wider */
@media (orientation: landscape) and (max-height: 340px) {
  [data-section="hero"] { --lamp-x: .84; --copy-w: .64; }
  [data-section="hero"] .cover__content { padding-top: calc(var(--nav-h) + env(safe-area-inset-top) + 4px); padding-bottom: 8px; }
  [data-section="hero"] .hero__label { letter-spacing: .08em; }
  [data-section="hero"] .hero__title { font-size: 42px; margin-top: 4px; }
  [data-section="hero"] .hero__foot { gap: 10px; margin-top: 8px; }
  [data-section="hero"] .hero__lead { font-size: 15px; line-height: 1.4; max-width: 36ch; }
  [data-section="hero"] .hero__cta { min-height: 46px; padding-block: 10px; }
}

/* reduced motion: everything final, no layer promotion */
html[data-motion="reduced"] [data-section="hero"] .hero__layer { will-change: auto; }