/*  Scroll-scrubbed hero — Zuidpier
 *  Namespaced with .hero- so it can sit alongside any design system.
 *  Only the stage and the canvas are structural; the rest is the
 *  qblogics.com opening. Tokens (--ink, --paper, --gutter, ...) come from site.css.
 */

/* The artwork sits fixed behind the page and never scrolls itself.
   --hero-bg should roughly match the first frame, so the moment before
   the canvas paints is not a white flash. */
/* Sized to the large viewport, not inset: 0. On phones the address bar
   collapses mid-scroll and the page would show under the stage until the
   browser catches up with a resize. */
.hero-stage {
  position: fixed;
  top: 0; left: 0; right: 0;
  height: 100vh;
  height: 100lvh;
  z-index: 0;
  overflow: hidden;
  pointer-events: none;
  background: var(--hero-bg, #C5DCE6);
}
.hero-stage canvas { display: block; width: 100%; height: 100%; }

/* Everything else on the page rides above it. */
.hero-content { position: relative; z-index: 1; }

/* ---- the opening panel ---- */
/* Pinned for the whole scrub: it sticks to the top of the viewport while the
   sunset plays, and only leaves when the page slides up over it.
   Its colour follows the sunset via html[data-phase] (set in site.js), since
   the sky behind it goes navy. */
.hero-intro {
  position: sticky;
  top: 0;
  height: 100svh;
  display: flex;
  flex-direction: column;
  justify-content: flex-start;
  padding: clamp(96px, 12vh, 140px) var(--gutter) 40px;
  color: var(--ink);
  transition: color .6s ease;
}
html[data-phase="dusk"] .hero-intro { color: var(--dusk-ink); }
html[data-phase="dusk"] .hero-intro .btn { color: var(--ink); background: var(--paper); }
html[data-phase="dusk"] .hero-intro .btn:hover { background: var(--glow); }

/* The words sit in the sky, centred: the open patch between the lighthouse
   (left of centre) and the sun (top right). Nothing in the picture is covered
   for long, and the centre holds on every crop the artwork gets. */
.hero-intro-inner { max-width: var(--max); width: 100%; margin-inline: auto; }
.hero-intro-text { max-width: 560px; margin-inline: auto; text-align: center; }

.hero-intro h1 {
  margin: 0 0 .4em;
  font-size: clamp(2.5rem, 4.6vw, 4.25rem);
  font-weight: 400;
  line-height: 1.02;
  letter-spacing: -.015em;
  text-wrap: balance;
}

.hero-sub {
  max-width: 30ch;
  margin: 0 auto 1.3em;
  font-size: clamp(1.125rem, 1.5vw, 1.375rem);
  line-height: 1.45;
}

.hero-actions { display: flex; flex-wrap: wrap; justify-content: center; align-items: center; gap: 16px 28px; }

/* ---- the scroll room for the sunset ---- */
/* Nothing is shown here; it only gives the visitor something to scroll
   through while the sequence plays. More screens = a slower sunset. */
.hero-scroll { height: calc(var(--hero-scroll-screens, 3) * 100svh); }

/* The page fades in over the dusk instead of cutting across it. The strip
   ends in the sand colour at the bottom of the last frame (--page-top), so
   the page seems to grow out of the beach. It is part of the scroll range, so
   the sunset finishes as the fade completes. */
.hero-fade {
  position: relative;
  z-index: 1;
  height: 50vh;
  pointer-events: none;
  background: linear-gradient(to bottom,
    color-mix(in srgb, var(--page-top) 0%, transparent) 0%,
    color-mix(in srgb, var(--page-top) 60%, transparent) 55%,
    var(--page-top) 100%);
}

/* The element marking the end of the scrub. It needs an opaque background
   (set in site.css: the dusk-sky gradient), since it scrolls up over the
   artwork and ends the sequence. */
.hero-end {
  position: relative;
  z-index: 2;
}

@media (max-width: 900px) {
  .hero-fade { height: 40vh; }
}

@media (max-width: 700px) {
  .hero-intro { padding-top: 96px; }
}