/* ═══════════════════════════════════════════════════════
   SCROLL-PIN HERO — perf-optimised for 60/120fps scroll
   - All animated properties are transform/opacity (GPU composite)
   - Background interpolates via two opacity layers (no color-mix repaint)
   - clip-path inset values are PRE-COMPUTED by JS (no per-frame CSS calc)
   - will-change + translate3d force GPU layer promotion
═══════════════════════════════════════════════════════ */

#hero-scroll-zone {
  position: relative;
  height: 280vh;
  background: #F0E9DE;
  /* Progress vars — set by js/hero-scroll-stage.js. */
  --p: 0;
  --p-shrink: 0;
  --p-grid: 0;
  --p-h2: 0;
  --p-bg: 1;
  --p-cue: 1;
  /* Pre-computed clip values (set by JS each frame) */
  --clip-v: 0px;
  --clip-h: 0px;
  --clip-r: 0px;
  /* Tile drop-shadow strength scales with p-shrink, set by JS once */
  --shadow-blur: 0px;
  --shadow-y: 0px;
  --shadow-a: 0;
  --video-end: 150px;   /* matches uniform tile size — the shrunk video is just another cell */
}

#hero-scroll-zone #hero {
  position: sticky !important;
  top: 0;
  height: 100vh !important;
  max-height: none !important;
  min-height: 0 !important;
  width: 100%;
  overflow: hidden;
  background: transparent !important;
}
#hero-scroll-zone #hero::before { display: none !important; }

/* ── Background crossfade layers (GPU composite via opacity only) ── */
.hero-bg-dark,
.hero-bg-light {
  position: absolute;
  inset: 0;
  z-index: 0;
  pointer-events: none;
  will-change: opacity;
  transform: translateZ(0);  /* force own GPU layer */
}
.hero-bg-dark  { background: #F0E9DE; opacity: 0; }
.hero-bg-light {
  opacity: 1;
  background: #F0E9DE;
}

/* ── Stage:
   - clip-path clips sides into a square crop (keeps full video HEIGHT)
   - scale shrinks the square crop down to VIDEO_END pixels
   - translateY pushes it down toward the (2,2) cell
   Order is critical: scale must be applied to the ALREADY-clipped square
   so the rendered size is exactly TILE size at p=1. ── */
#hero-scroll-zone .hero-stage {
  position: absolute;
  inset: 0;
  z-index: 5;
  clip-path: inset(var(--clip-v) var(--clip-h) var(--clip-v) var(--clip-h) round var(--clip-r));
  transform-origin: 50% 50%;
  transform:
    translate3d(0, var(--hero-y, 0px), 0)
    scale(var(--hero-scale, 1));
  will-change: clip-path, filter, transform;
  filter: drop-shadow(0 var(--shadow-y) var(--shadow-blur) rgba(0, 0, 0, var(--shadow-a)));
}

/* Vignette/grain/letterbox fade as the hero shrinks (not with page bg) */
#hero-scroll-zone .hero-vignette,
#hero-scroll-zone .hero-grain,
#hero-scroll-zone .hero-letterbox {
  opacity: calc(1 - var(--p-shrink));
  will-change: opacity;
}

/* Hero copy: fade + lift via transform/opacity only.
   pointer-events is driven by --hc-pointer (set by JS): the moment the
   shrink begins we flip it to `none` so the now-invisible buttons stop
   eating mouse events over the area where the tiles render. */
#hero-scroll-zone .hero-content {
  z-index: 6;
  opacity: calc(1 - var(--p-shrink) * 1.4);
  transform: translate3d(0, calc(-30px * var(--p-shrink)), 0);
  pointer-events: var(--hc-pointer, auto);
  will-change: opacity, transform;
}

/* hero-fullbleed.css has `.hero-content > * { pointer-events: auto; }`,
   which would re-enable the children even when the parent is `none`
   (pointer-events doesn't inherit). This higher-specificity rule
   cascades the variable down through every descendant — buttons, links,
   nested spans — so the entire copy block goes click-through together. */
#hero-scroll-zone .hero-content,
#hero-scroll-zone .hero-content > *,
#hero-scroll-zone .hero-content button,
#hero-scroll-zone .hero-content a {
  pointer-events: var(--hc-pointer, auto);
}

#hero-scroll-zone .hero-scroll {
  opacity: var(--p-cue);
  will-change: opacity;
}

/* ═══════════════════════════════════════════════════════
   TILE GRID — 13 hand-placed video tiles
═══════════════════════════════════════════════════════ */
.tile-grid {
  position: absolute;
  top: 50%;
  left: 50%;
  width: 0;
  height: 0;
  z-index: 4;
  pointer-events: none;
  transform: translateZ(0);
}

/* Tiles are FULLY TRANSPARENT — no background, no border, no shadow.
   Icons and videos float on the cream bg directly, Square-style. */
.tile {
  position: absolute;
  top: 0;
  left: 0;
  width: var(--size, 120px);
  height: var(--size, 120px);
  --pt: var(--p-tile, 0);
  --slide-dx: calc(var(--tx) * 0.35);
  --slide-dy: calc(var(--ty) * 0.35);

  transform:
    translate3d(
      calc(var(--tx) - 50% + var(--slide-dx) * (1 - var(--pt))),
      calc(var(--ty) - 50% + var(--slide-dy) * (1 - var(--pt))),
      0
    )
    scale(calc(0.55 + 0.45 * var(--pt)));
  opacity: var(--pt);
  background: transparent;
  pointer-events: auto;
  overflow: hidden;
  clip-path: inset(0 round 18px);
  will-change: transform, opacity;
  backface-visibility: hidden;
}

/* Video tile — clipped corners, no chrome */
.tile--video video {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
  animation: tileBreath 7s ease-in-out infinite;
  animation-delay: var(--breath-delay, 0s);
  transform: translateZ(0);
  will-change: transform;
}

@keyframes tileBreath {
  0%, 100% { transform: scale3d(1, 1, 1);       }
  50%      { transform: scale3d(1.04, 1.04, 1); }
}

.tile:hover video {
  transform: scale3d(1.08, 1.08, 1);
  transition: transform 0.45s cubic-bezier(0.22, 1, 0.36, 1);
  animation: none;
}

/* Photo tile — mirrors video tile treatment so static images breathe + grow on hover */
.tile--photo img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
  animation: tileBreath 7s ease-in-out infinite;
  animation-delay: var(--breath-delay, 0s);
  transform: translateZ(0);
  will-change: transform;
}
.tile--photo:hover img {
  transform: scale3d(1.08, 1.08, 1);
  transition: transform 0.45s cubic-bezier(0.22, 1, 0.36, 1);
  animation: none;
}

/* Icon tile — no card background, icon floats directly on cream bg */
.tile--icon {
  clip-path: none;     /* nothing to clip — icon has its own shape */
  overflow: visible;
  display: flex;
  align-items: center;
  justify-content: center;
}
.tile--icon svg {
  width: 100%;
  height: 100%;
  color: #0A101E;
}

/* No separate center tile — the hero stage IS the (2,2) cell.
   It shrinks, lands at the bottom-center coordinates, and keeps playing
   the same video stream. No fade-out, no swap, no rerender. */

/* ═══════════════════════════════════════════════════════
   GRID HEADLINE — bottom-anchored, refined type
═══════════════════════════════════════════════════════ */
/* True-center headline — sits at viewport center, in the empty center grid
   cell. Tiles flow above and below with the headline as the focal point. */
.grid-headline {
  position: absolute;
  left: 50%;
  top: 50%;
  width: min(880px, 88vw);
  text-align: center;
  z-index: 7;
  opacity: var(--p-h2);
  transform: translate3d(-50%, calc(-50% + 24px * (1 - var(--p-h2))), 0);
  pointer-events: none;
  will-change: opacity, transform;
}
.grid-headline h2 {
  font-family: 'Inter', sans-serif;
  font-size: clamp(20px, 2.8vw, 38px);
  font-weight: 600;
  line-height: 1.1;
  letter-spacing: -1.2px;
  color: #0A101E;
  margin: 0;
  white-space: nowrap;       /* hard-enforce single line */
}

/* ═══════════════════════════════════════════════════════
   MOBILE / REDUCED MOTION
═══════════════════════════════════════════════════════ */
@media (max-width: 900px) {
  #hero-scroll-zone {
    height: auto;
    --p: 0; --p-shrink: 0; --p-grid: 0; --p-h2: 0; --p-bg: 1; --p-cue: 1;
    --clip-v: 0px; --clip-h: 0px; --clip-r: 0px;
  }
  #hero-scroll-zone #hero { position: relative !important; background: #05080F !important; }
  .hero-bg-dark, .hero-bg-light { display: none; }
  .tile-grid, .grid-headline { display: none; }
}

@media (prefers-reduced-motion: reduce) {
  #hero-scroll-zone {
    height: auto;
    --p: 0; --p-shrink: 0; --p-grid: 0; --p-h2: 0; --p-bg: 1; --p-cue: 1;
    --clip-v: 0px; --clip-h: 0px; --clip-r: 0px;
  }
  #hero-scroll-zone #hero { position: relative !important; }
  .hero-bg-dark, .hero-bg-light { display: none; }
  .tile-grid, .grid-headline { display: none; }
}