/* ==========================================================================
   Halloween am 19. Loch — the seasonal hero.

   The page opens in the dark: the mascot flicks a glowing ball into the
   pumpkin's mouth, the pumpkin ignites, and the hero's copy comes up with
   the light (assets/halloween.js drives it off the film's clock).

   Every rule in this file hangs off html.h19-hw. The season script at the
   top of index.html sets that class (with data-hw-cut and data-hw-mode)
   only inside the window, before the first paint; outside it this file
   changes nothing and the hero is the scroll film as always.
   ========================================================================== */

/* ---- one screen instead of the scroll runway ------------------------------
   Decided before the first paint, so nothing shifts. svh: the copy and the
   buttons sit near the bottom edge and must not slide under a phone's
   toolbar; nothing is pinned here, so the small viewport is the safe one.
   2px short of the full screen on purpose: Chrome takes a picture that
   covers the whole viewport for a page background and never counts it as
   the Largest Contentful Paint; one hair shorter, the dark poster is the
   LCP at the first paint. The 2px below it are the same dark green. */
html.h19-hw .hero,
html.h19-hw.no-js .hero { height: auto; }
html.h19-hw .hero__pin,
html.h19-hw.no-js .hero__pin {
  position: relative;
  height: calc(100vh - 2px);
  height: calc(100svh - 2px);
  min-height: 360px;
  background-color: var(--green-900);
  background-repeat: no-repeat;
  background-size: cover;
}

/* ---- the poster of the cut: dark for the film, lit for the still ----------
   The same picture as the film's first frame, so page, poster and film are
   one dark surface; it is also the LCP image, preloaded by the season
   script. The anchor matches the film's object-position (and CUTS in
   halloween.js): the 16x9 cut is anchored a little left of centre so the
   copy keeps the night sky to itself on 3:2 screens. */
html.h19-hw[data-hw-cut="16x9"] .hero__pin { background-image: url('video/halloween/hole19-halloween-16x9-dark.webp'); background-position: 35% 55%; }
html.h19-hw[data-hw-cut="4x3"]  .hero__pin { background-image: url('video/halloween/hole19-halloween-4x3-dark.webp');  background-position: 50% 55%; }
html.h19-hw[data-hw-cut="3x4"]  .hero__pin { background-image: url('video/halloween/hole19-halloween-3x4-dark.webp');  background-position: 50% 55%; }
html.h19-hw[data-hw-cut="9x16"] .hero__pin { background-image: url('video/halloween/hole19-halloween-9x16-dark.webp'); background-position: 50% 55%; }
html.h19-hw[data-hw-cut="16x9"][data-hw-mode="still"] .hero__pin, html.h19-hw[data-hw-cut="16x9"].hw-lit-poster .hero__pin { background-image: url('video/halloween/hole19-halloween-16x9-lit.webp'); }
html.h19-hw[data-hw-cut="4x3"][data-hw-mode="still"]  .hero__pin, html.h19-hw[data-hw-cut="4x3"].hw-lit-poster  .hero__pin { background-image: url('video/halloween/hole19-halloween-4x3-lit.webp'); }
html.h19-hw[data-hw-cut="3x4"][data-hw-mode="still"]  .hero__pin, html.h19-hw[data-hw-cut="3x4"].hw-lit-poster  .hero__pin { background-image: url('video/halloween/hole19-halloween-3x4-lit.webp'); }
html.h19-hw[data-hw-cut="9x16"][data-hw-mode="still"] .hero__pin, html.h19-hw[data-hw-cut="9x16"].hw-lit-poster .hero__pin { background-image: url('video/halloween/hole19-halloween-9x16-lit.webp'); }

/* ---- the everyday hero steps aside -----------------------------------------
   Its poster stays in the markup as the last fallback (html.hw-failed). */
html.h19-hw .hero__poster { visibility: hidden; }
html.h19-hw .hero__film,
html.h19-hw .hero__flash,
html.h19-hw .hero__ring,
html.h19-hw .hero__bar,
html.h19-hw .hero__rail { display: none !important; }
html.h19-hw .hero.hw-ready .hero__beat { display: none; }
/* Failsafe: should halloween.js never run, the closing beat of the everyday
   hero (name, line, both buttons) stands up after four seconds. */
html.h19-hw .hero:not(.hw-ready) .hero__beat[data-beat="3"] { animation: hw-failsafe 0.6s ease 4s both; }
@keyframes hw-failsafe { from { opacity: 0; } to { opacity: 1; } }

/* Nothing of the Halloween media could be shown: the everyday poster again. */
html.h19-hw.hw-failed .hero__pin { background-image: none !important; }
html.h19-hw.hw-failed .hero__poster { visibility: visible; }
html.h19-hw.hw-failed .hw-film,
html.h19-hw.hw-failed .hw-flicker { display: none; }

/* ---- the film --------------------------------------------------------------- */
html.h19-hw .hw-film {
  position: absolute; inset: 0; z-index: 2;
  width: 100%; height: 100%;
  object-fit: cover;
  object-position: 50% 55%;
  background: transparent;
}
html.h19-hw[data-hw-cut="16x9"] .hw-film { object-position: 35% 55%; }
html.h19-hw .hero.hw-video-off .hw-film { display: none; }

/* ---- the candle: alive after the film, never blinking ----------------------
   A warm glow centred on the pumpkin (halloween.js places it in px for the
   crop the viewport makes), breathing over 3.6s. */
html.h19-hw .hw-flicker {
  position: absolute; inset: 0; z-index: 2; pointer-events: none;
  background: radial-gradient(circle at var(--px, 74%) var(--py, 58%), rgba(255, 184, 77, 0.22), transparent 55%);
  transform-origin: var(--px, 74%) var(--py, 58%);
  mix-blend-mode: screen;
  opacity: 0;
  transition: opacity 1.2s ease;
}
html.h19-hw .hero.hw-ended .hw-flicker,
html.h19-hw .hero.hw-static .hw-flicker { opacity: 0.55; animation: hw-flicker 3.6s ease-in-out infinite; }
@keyframes hw-flicker {
  0%, 100% { opacity: 0.55; transform: scale(1); }
  18%      { opacity: 0.86; }
  31%      { opacity: 0.66; }
  50%      { opacity: 1;    transform: scale(1.03); }
  68%      { opacity: 0.72; }
  84%      { opacity: 0.92; }
}
/* Blend modes are what made phones stutter (styles.css, PHONES): on touch
   layouts the glow is a plain, fainter layer instead. */
@media (pointer: coarse), (max-width: 1000px) {
  html.h19-hw .hw-flicker {
    mix-blend-mode: normal;
    background: radial-gradient(circle at var(--px, 74%) var(--py, 58%), rgba(255, 184, 77, 0.13), transparent 50%);
  }
}

/* ---- scrims: night sky behind the copy, the terrace floor under it --------- */
html.h19-hw .hero__scrim {
  background:
    linear-gradient(90deg, rgba(8, 22, 14, 0.78) 0%, rgba(8, 22, 14, 0.5) 20%, rgba(8, 22, 14, 0.14) 36%, transparent 48%),
    linear-gradient(to top, rgba(8, 22, 14, 0.62) 0%, transparent 24%),
    linear-gradient(to bottom, rgba(8, 22, 14, 0.5) 0%, transparent 15%);
}
html.h19-hw[data-hw-cut="3x4"] .hero__scrim,
html.h19-hw[data-hw-cut="9x16"] .hero__scrim {
  background:
    linear-gradient(to bottom, rgba(8, 22, 14, 0.62) 0%, rgba(8, 22, 14, 0.22) 15%, transparent 26%),
    linear-gradient(to top, rgba(8, 22, 14, 0.94) 0%, rgba(8, 22, 14, 0.74) 17%, rgba(8, 22, 14, 0.22) 32%, transparent 42%);
}
html.h19-hw[data-hw-cut="3x4"] .hero__scrim {
  background:
    linear-gradient(225deg, rgba(8, 22, 14, 0.55) 0%, transparent 42%),
    linear-gradient(to bottom, rgba(8, 22, 14, 0.5) 0%, transparent 16%),
    linear-gradient(to top, rgba(8, 22, 14, 0.94) 0%, rgba(8, 22, 14, 0.7) 12%, transparent 26%);
}

/* ---- the copy ----------------------------------------------------------------
   One grid; each cut places its parts where the picture leaves room:
   landscape — a column over the night sky left of the mascot, the name and
   the headline at the top, the subline and buttons on the terrace floor;
   3x4 — name and headline on the dark wall top right, the rest under the
   table; 9x16 — the name in the sky, everything else on the floor. */
html.h19-hw .hw-beat {
  position: absolute; z-index: 1;
  pointer-events: auto;
  display: grid;
  justify-items: start;
  text-align: left;
  top: clamp(92px, 13vh, 150px);
  bottom: clamp(40px, 7vh, 84px);
  left: clamp(20px, 4vw, 80px);
  width: min(34vw, 600px);
  grid-template-areas: "lockup" "kicker" "line" "." "sub" "actions";
  grid-template-rows: auto auto auto 1fr auto auto;
  --hw-top-w: 30vw;
}
html.h19-hw[data-hw-cut="4x3"] .hw-beat { width: 34vw; --hw-top-w: 24vw; }

html.h19-hw .hw-beat .hero__lockup,
html.h19-hw .hw-beat .hw-kicker,
html.h19-hw .hw-beat .hw-line { max-width: var(--hw-top-w); }

/* The lockup: the name with the double hairline under it, one block, so the
   hairlines are exactly as wide as the name. */
html.h19-hw .hw-beat .hero__lockup {
  grid-area: lockup;
  display: inline-flex; flex-direction: column; align-items: stretch;
  margin: 0;
  text-align: center;
}
html.h19-hw .hw-beat .hero__lockup-name { font-size: clamp(46px, min(6.2vw, 10.5vh), 112px); }
html.h19-hw .hw-beat .hero__lockup-rule { max-width: none; margin: clamp(10px, 1.6vh, 16px) 0 0; gap: 12px; }
html.h19-hw .hw-beat .hero__lockup-rule::before,
html.h19-hw .hw-beat .hero__lockup-rule::after { min-width: 26px; }
html.h19-hw .hw-beat .hero__lockup-rule span { font-size: clamp(9.5px, 0.8vw, 11.5px); letter-spacing: 0.42em; margin-right: -0.42em; }

html.h19-hw .hw-beat .hw-kicker { grid-area: kicker; margin: clamp(18px, 3vh, 32px) 0 clamp(10px, 1.6vh, 16px); }
html.h19-hw .hw-beat .hw-line { grid-area: line; font-size: clamp(28px, min(3.4vw, 6.2vh), 60px); line-height: 1.02; }
html.h19-hw .hw-beat .hw-sub { grid-area: sub; margin: 0; max-width: 36ch; font-size: clamp(14px, min(1.15vw, 2.1vh), 18px); text-wrap: balance; }
html.h19-hw .hw-beat .hero__actions { grid-area: actions; justify-content: flex-start; margin-top: clamp(14px, 2.4vh, 24px); }

/* 3x4, and a 4x3 window close to square (the mascot's face moves into the
   left column there): name and headline top right on the wall. */
html.h19-hw[data-hw-cut="3x4"] .hw-beat {
  left: 5vw; right: 5vw; width: auto;
  top: clamp(84px, 9vh, 120px); bottom: clamp(84px, 9vh, 120px);
  justify-items: center; text-align: center;
  grid-template-columns: 1fr minmax(0, 42%);
  grid-template-areas: ". lockup" ". kicker" ". line" ". ." "sub sub" "actions actions";
  --hw-top-w: 100%;
}
/* Near square the raised hand fills the wall's lower half: only the name
   goes up there, the rest stands centred on the floor, as on a phone. */
@media (max-aspect-ratio: 6/5) {
  html.h19-hw[data-hw-cut="4x3"] .hw-beat {
    left: 5vw; right: 5vw; width: auto;
    top: clamp(84px, 10vh, 120px); bottom: clamp(72px, 9vh, 110px);
    justify-items: center; text-align: center;
    grid-template-columns: 1fr minmax(0, 40%);
    grid-template-areas: ". lockup" ". ." "kicker kicker" "line line" "sub sub" "actions actions";
    grid-template-rows: auto 1fr auto auto auto auto;
    --hw-top-w: 100%;
  }
  html.h19-hw[data-hw-cut="4x3"] .hw-beat .hw-kicker { margin: 0 0 10px; }
  html.h19-hw[data-hw-cut="4x3"] .hw-beat .hw-line { font-size: clamp(28px, 3.8vw, 46px); }
  html.h19-hw[data-hw-cut="4x3"] .hw-beat .hw-sub { margin-top: 12px; max-width: 46ch; }
  html.h19-hw[data-hw-cut="4x3"] .hw-beat .hero__actions { justify-content: center; }
  html.h19-hw[data-hw-cut="4x3"] .hero__scrim {
    background:
      linear-gradient(225deg, rgba(8, 22, 14, 0.5) 0%, transparent 40%),
      linear-gradient(to bottom, rgba(8, 22, 14, 0.5) 0%, transparent 16%),
      linear-gradient(to top, rgba(8, 22, 14, 0.94) 0%, rgba(8, 22, 14, 0.74) 20%, rgba(8, 22, 14, 0.2) 36%, transparent 44%);
  }
}
html.h19-hw[data-hw-cut="3x4"] .hw-beat .hero__lockup-name { font-size: clamp(48px, 9.5vw, 104px); }
html.h19-hw[data-hw-cut="3x4"] .hw-beat .hw-line { font-size: clamp(30px, 4.8vw, 56px); }
html.h19-hw[data-hw-cut="3x4"] .hw-beat .hw-sub { max-width: 46ch; font-size: clamp(15px, 2vw, 19px); }
html.h19-hw[data-hw-cut="3x4"] .hw-beat .hero__actions { justify-content: center; }
/* Centred buttons: the scroll hint tucks in under them, a size smaller. */
html.h19-hw[data-hw-cut="3x4"] .hero__cue { bottom: 10px; gap: 6px; }
html.h19-hw[data-hw-cut="3x4"] .hero__cue span { height: 24px; }
@media (max-aspect-ratio: 6/5) {
  html.h19-hw[data-hw-cut="4x3"] .hero__cue { bottom: 10px; gap: 6px; }
  html.h19-hw[data-hw-cut="4x3"] .hero__cue span { height: 24px; }
}

/* 9x16: the name in the sky, the rest on the terrace floor, buttons in one row. */
html.h19-hw[data-hw-cut="9x16"] .hw-beat {
  left: 5vw; right: 5vw; width: auto;
  top: clamp(74px, 10vh, 104px); bottom: clamp(54px, 7.5vh, 76px);
  justify-items: center; text-align: center;
  grid-template-areas: "lockup" "." "kicker" "line" "sub" "actions";
  grid-template-rows: auto 1fr auto auto auto auto;
  --hw-top-w: 100%;
}
html.h19-hw[data-hw-cut="9x16"] .hw-beat .hero__lockup-name { font-size: clamp(38px, 11.5vw, 64px); }
html.h19-hw[data-hw-cut="9x16"] .hw-beat .hero__lockup-rule span { font-size: 9.5px; }
html.h19-hw[data-hw-cut="9x16"] .hw-beat .hw-kicker { margin: 0 0 8px; font-size: 10px; letter-spacing: 0.34em; }
html.h19-hw[data-hw-cut="9x16"] .hw-beat .hw-line { font-size: clamp(25px, 7vw, 38px); }
html.h19-hw[data-hw-cut="9x16"] .hw-beat .hw-sub { margin-top: 10px; max-width: 34ch; font-size: clamp(13.5px, 3.6vw, 15.5px); line-height: 1.55; }
html.h19-hw[data-hw-cut="9x16"] .hw-beat .hero__actions { justify-content: center; flex-wrap: nowrap; gap: 8px; margin-top: 14px; }
html.h19-hw[data-hw-cut="9x16"] .hw-beat .btn { min-height: 44px; padding: 0 16px; font-size: 11px; letter-spacing: 0.08em; white-space: nowrap; }
html.h19-hw[data-hw-cut="9x16"] .hero__cue { bottom: 8px; gap: 6px; }
/* The buttons take the phone's whole width: replay waits top right, under the menu. */
html.h19-hw[data-hw-cut="9x16"] .hw-replay { top: clamp(80px, 10.5vh, 108px); bottom: auto; right: 16px; }
html.h19-hw[data-hw-cut="9x16"] .hero__cue span { height: 24px; }
@media (max-width: 335px) {
  html.h19-hw[data-hw-cut="9x16"] .hw-beat .hero__actions { flex-wrap: wrap; }
}

/* A landscape phone: everything a size smaller, the buttons in one row. */
/* The nav's wordmark sits right above: the hero's name stays the page's h1
   for screen readers and search, but is not drawn a second time. */
@media (orientation: landscape) and (max-height: 520px) {
  html.h19-hw .hw-beat { top: 76px; bottom: 16px; width: min(46vw, 440px); --hw-top-w: 40vw; }
  html.h19-hw .hw-beat .hero__lockup {
    position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px;
    overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; border: 0;
  }
  html.h19-hw .hw-beat .hero__lockup-name { font-size: clamp(30px, 9.5vh, 46px); }
  html.h19-hw .hw-beat .hero__lockup-rule { margin-top: 6px; }
  html.h19-hw .hw-beat .hero__lockup-rule span { font-size: 9px; }
  html.h19-hw .hw-beat .hw-kicker { margin: 10px 0 6px; font-size: 9.5px; letter-spacing: 0.32em; }
  html.h19-hw .hw-beat .hw-line { font-size: clamp(20px, 6.6vh, 30px); }
  html.h19-hw .hw-beat .hw-sub { font-size: 12.5px; line-height: 1.5; max-width: none; }
  html.h19-hw .hw-beat .hero__actions { margin-top: 10px; gap: 8px; flex-wrap: nowrap; }
  html.h19-hw .hw-beat .btn { min-height: 40px; padding: 0 16px; font-size: 10.5px; letter-spacing: 0.08em; white-space: nowrap; }
  html.h19-hw .hero__cue { display: none; }
}

/* ---- the reveal, step by step (classes from halloween.js) -------------------
   0     everything is there, invisible
   hw-s1 the ignition: the hairlines draw out from the centre, the name and
         the kicker come up, the nav's gold to full
   hw-s2 ignition + 0.6s: the headline, line by line
   hw-s3 5.4s: subline and buttons
   hw-s4 6.5s: the scroll hint */
html.h19-hw .hw-beat .hero__lockup-name {
  opacity: 0;
  transform: scale(0.965);
  transition: opacity 0.9s var(--ease), transform 1.2s var(--ease), filter 1.2s var(--ease);
}
html.h19-hw .hw-beat .hero__lockup-rule span { opacity: 0; transition: opacity 0.6s var(--ease) 0.3s; }
html.h19-hw .hw-beat .hero__lockup-rule::before,
html.h19-hw .hw-beat .hero__lockup-rule::after {
  transform: scaleX(0);
  transition: transform 0.7s cubic-bezier(0.2, 0.8, 0.2, 1);
}
html.h19-hw .hw-beat .hero__lockup-rule::before { transform-origin: 100% 50%; }
html.h19-hw .hw-beat .hero__lockup-rule::after  { transform-origin: 0 50%; }
html.h19-hw .hw-beat .hw-kicker { opacity: 0; transform: translateY(12px); transition: opacity 0.7s var(--ease) 0.1s, transform 0.7s var(--ease) 0.1s; }
html.h19-hw .hw-beat .hw-ln { display: block; opacity: 0; transform: translateY(24px); transition: opacity 0.9s var(--ease), transform 0.9s var(--ease); }
html.h19-hw .hw-beat .hw-ln + .hw-ln { transition-delay: 0.12s; }
html.h19-hw .hw-beat .hw-sub,
html.h19-hw .hw-beat .hero__actions { opacity: 0; transform: translateY(14px); transition: opacity 0.8s var(--ease), transform 0.8s var(--ease); }
html.h19-hw .hw-beat .hero__actions { transition-delay: 0.12s; }
html.h19-hw .hero__cue { opacity: 0; transition: opacity 0.8s var(--ease); }

html.h19-hw .hero.hw-s1 .hw-beat .hero__lockup-name {
  opacity: 1;
  transform: none;
  filter: drop-shadow(0 3px 2px rgba(8, 22, 14, 0.55))
          drop-shadow(0 14px 40px rgba(8, 22, 14, 0.8))
          drop-shadow(0 0 42px rgba(224, 197, 121, 0.42));
}
html.h19-hw .hero.hw-s1 .hw-beat .hero__lockup-rule span { opacity: 1; }
html.h19-hw .hero.hw-s1 .hw-beat .hero__lockup-rule::before,
html.h19-hw .hero.hw-s1 .hw-beat .hero__lockup-rule::after { transform: none; }
html.h19-hw .hero.hw-s1 .hw-beat .hw-kicker { opacity: 1; transform: none; }
html.h19-hw .hero.hw-s2 .hw-beat .hw-ln { opacity: 1; transform: none; }
html.h19-hw .hero.hw-s3 .hw-beat .hw-sub,
html.h19-hw .hero.hw-s3 .hw-beat .hero__actions { opacity: 1; transform: none; }
html.h19-hw .hero.hw-s4 .hero__cue { opacity: 1; }

/* Still, autoplay refused, film failed: all there at once, nothing moves in. */
html.h19-hw .hero.hw-static .hw-beat,
html.h19-hw .hero.hw-static .hw-beat *,
html.h19-hw .hero.hw-static .hw-beat *::before,
html.h19-hw .hero.hw-static .hw-beat *::after,
html.h19-hw .hero.hw-static .hero__cue { transition: none !important; }

/* Replay: the copy goes in 300ms, then everything is reset in one frame. */
html.h19-hw .hero.hw-rewind .hw-beat,
html.h19-hw .hero.hw-rewind .hero__cue { opacity: 0 !important; transition: opacity 0.3s ease !important; }
html.h19-hw .hero.hw-instant .hw-beat,
html.h19-hw .hero.hw-instant .hw-beat *,
html.h19-hw .hero.hw-instant .hw-beat *::before,
html.h19-hw .hero.hw-instant .hw-beat *::after,
html.h19-hw .hero.hw-instant .hero__cue { transition: none !important; }

/* The nav is there from the first frame, its gold at 60% until the light. */
html.h19-hw .nav__mark,
html.h19-hw .nav__sub { transition: opacity 0.7s var(--ease); }
html.h19-hw .nav__cta {
  transition: opacity 0.7s var(--ease), transform 0.4s var(--ease), background 0.4s var(--ease),
              border-color 0.4s var(--ease), color 0.4s var(--ease);
}
html.h19-hw:not(.hw-lit) .nav__mark,
html.h19-hw:not(.hw-lit) .nav__sub,
html.h19-hw:not(.hw-lit) .nav__cta { opacity: 0.6; }

/* ---- replay: "Licht aus, Licht an" ------------------------------------------ */
html.h19-hw .hw-replay {
  position: absolute; z-index: 7;
  right: clamp(16px, 3vw, 40px);
  bottom: clamp(16px, 3.4vh, 34px);
  width: 44px; height: 44px; padding: 0;
  display: grid; place-items: center;
  border-radius: 50%;
  border: 1px solid rgba(224, 197, 121, 0.72);
  background: var(--green-800);
  color: var(--gold-400);
  box-shadow: 0 8px 26px rgba(8, 22, 14, 0.55);
  cursor: pointer;
  transition: transform 0.35s var(--ease), background 0.35s var(--ease), border-color 0.35s var(--ease);
}
html.h19-hw .hw-replay[hidden] { display: none; }
html.h19-hw .hw-replay svg { width: 18px; height: 18px; }
@media (hover: hover) {
  html.h19-hw .hw-replay:hover { background: var(--green-700); border-color: var(--gold-400); transform: rotate(-40deg); }
}
html.h19-hw .hw-replay:focus-visible { outline: 2px solid var(--gold-400); outline-offset: 3px; }

/* ---- reduced motion: the lit picture and the copy, nothing that moves ------ */
@media (prefers-reduced-motion: reduce) {
  html.h19-hw .hw-flicker { animation: none !important; opacity: 0.7 !important; }
  html.h19-hw .hw-beat *, html.h19-hw .hero__cue, html.h19-hw .nav__mark,
  html.h19-hw .nav__sub, html.h19-hw .nav__cta { transition: none !important; }
}