/* Hero with the armoury wall (the page's one signature moment) and the shared stage that hosts live gallery tiles. */

/* ---------- Tile stage, shared by hero, exhibits and showcase ---------- */
/* Maps the gallery's --gb-* tokens onto this page, so tile CSS copied from the gallery runs unchanged. */
.tile-stage {
  --gb-grund: oklch(.16 .012 255);
  --gb-flaeche: oklch(.21 .014 255);
  --gb-flaeche-2: oklch(.25 .016 255);
  --gb-tief: oklch(.12 .01 255);
  --gb-linie: oklch(.30 .014 255);
  --gb-linie-stark: oklch(.42 .018 255);
  --gb-text: var(--text);
  --gb-leise: oklch(.72 .012 255);
  --gb-still: oklch(.64 .012 255);
  --gb-licht: var(--light);
  --gb-licht-text: var(--light-ink);
  --gb-kupfer: var(--copper);
  --gb-ok: oklch(.78 .15 150);
  --gb-kalt: oklch(.74 .08 235);
  --gb-buehne: var(--stage-spot), var(--bg-deep);
  --gb-schrift: var(--font-sans);
  --gb-mono: var(--font-mono);
  --gb-ease: cubic-bezier(.2, .7, .2, 1);
  --gb-aus: cubic-bezier(.16, 1, .3, 1);
  --gb-feder: cubic-bezier(.34, 1.56, .64, 1);
  --gb-kurz: 180ms;
  --gb-mittel: 450ms;
  position: relative;
  overflow: hidden;
  isolation: isolate;
  container-type: size;
  contain: layout paint style;
  background: var(--gb-buehne);
  color: var(--gb-text);
  font-family: var(--gb-schrift);
  font-size: 16px;
  line-height: 1.4;
}
.tile-stage > [class^="k-"] { position: absolute; inset: 0; }
.tile-stage p, .tile-stage ul { margin: 0; }

/* Motion switch off, or the tiles are off screen: loops hold still, as the gallery's own switch does. */
/* While the wall assembles, its tiles hold still: one motion per element at a time. */
.js .wall:not(.is-ready) .tile-stage *,
.js .wall:not(.is-ready) .tile-stage *::before,
.js .wall:not(.is-ready) .tile-stage *::after,
.motion-off .tile-stage *,
.motion-off .tile-stage *::before,
.motion-off .tile-stage *::after,
.is-offscreen .tile-stage *,
.is-offscreen .tile-stage *::before,
.is-offscreen .tile-stage *::after { animation-play-state: paused !important; }

/* ---------- Hero layout ---------- */

.hero {
  --cell-w: clamp(150px, 14vw, 232px);
  --cell-h: calc(var(--cell-w) * .8);
  position: relative;
  display: grid;
  grid-template-columns: repeat(12, minmax(0, 1fr));
  column-gap: var(--gutter);
  align-items: center;
  min-height: clamp(42rem, 100svh, 58rem);
  max-width: var(--page-max);
  margin: 0 auto;
  padding: 6.5rem var(--margin) var(--space-6);
}
.hero::before {
  content: "";
  position: absolute;
  z-index: -1;
  inset: 0 calc(50% - 50vw);
  background: radial-gradient(70% 60% at 22% -8%, oklch(.82 .13 78 / .09), transparent 70%);
  pointer-events: none;
}

.hero-copy {
  position: relative;
  z-index: 2;
  grid-column: 1 / span 6;
}
.hero-title {
  margin-top: var(--space-3);
  max-width: 13ch;
  font-size: var(--step-5);
  font-weight: 660;
  line-height: 1.02;
  letter-spacing: -.034em;
  text-wrap: balance;
}
.hero-lede {
  margin-top: var(--space-4);
  max-width: 38ch;
  font-size: var(--step-1);
  line-height: 1.45;
  color: var(--text-soft);
  text-wrap: pretty;
}
.hero-actions {
  display: flex;
  flex-wrap: wrap;
  gap: .75rem;
  margin-top: var(--space-5);
}
.hero-facts {
  margin-top: var(--space-4);
  font: 400 var(--step-label)/1.6 var(--font-mono);
  letter-spacing: .02em;
  color: var(--text-quiet);
}

/* ---------- The armoury wall ---------- */

.wall-frame {
  position: absolute;
  z-index: 1;
  inset: 0 calc(50% - 50vw) 0 48%;
  pointer-events: none;
}
/* Fades the wall into the stage on the text side and at the bottom; a sibling, so the tiles stay unfiltered. */
.wall-frame::after {
  content: "";
  position: absolute;
  inset: 0;
  background:
    linear-gradient(90deg, var(--bg) 0%, oklch(.145 .011 255 / 0) 16%),
    linear-gradient(0deg, var(--bg) 0%, oklch(.145 .011 255 / 0) 18%),
    linear-gradient(180deg, var(--bg) 0%, oklch(.145 .011 255 / 0) 12%);
  pointer-events: none;
}
.wall-viewport {
  position: absolute;
  inset: 0;
  overflow: hidden;
  perspective: 1500px;
  perspective-origin: 0% 45%;
}
.wall-tilt {
  position: absolute;
  top: 50%;
  left: 4%;
  transform-style: preserve-3d;
}
.wall {
  display: grid;
  grid-template-columns: repeat(6, var(--cell-w));
  grid-auto-rows: var(--cell-h);
  gap: 10px;
  transform-style: preserve-3d;
  transform-origin: 0 50%;
  transform: translateY(-50%) rotateY(27deg) rotateX(5deg) rotateZ(-2deg);
}
.wall-tile {
  position: relative;
  display: flex;
  flex-direction: column;
  grid-column: var(--col);
  grid-row: var(--row);
  overflow: hidden;
  border-radius: var(--radius-tile);
  background: var(--bg-deep);
  box-shadow: 0 0 0 1px oklch(.3 .014 255 / .55), 0 30px 60px -30px oklch(.08 .01 255 / .9);
  backface-visibility: hidden;
}
.wall-tile .tile-stage { flex: 1 1 0; min-height: 0; }
.wall-caption {
  display: flex;
  flex-direction: column;
  gap: 1px;
  padding: 7px 10px 8px;
  font-size: 11.5px;
  font-weight: 600;
  line-height: 1.2;
  letter-spacing: -.005em;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  color: var(--text);
}
.wall-caption span { font: 500 10px/1.3 var(--font-mono); color: oklch(.64 .012 255); }
.wall-tile.is-selected { transform: translateZ(36px); box-shadow: 0 0 0 2px var(--light), 0 40px 80px -30px oklch(.08 .01 255 / .95); }

.wall-note {
  position: absolute;
  z-index: 2;
  right: var(--margin);
  bottom: var(--space-3);
  max-width: 46ch;
  font: 400 var(--step-label)/1.5 var(--font-mono);
  color: var(--text-quiet);
  text-align: right;
}

/* Assembly: each tile flies in from its own point in depth and locks into the grid, once. */
@keyframes tile-in {
  from {
    opacity: 0;
    transform: translate3d(var(--dx), var(--dy), var(--dz)) rotate(var(--rot));
  }
}
.js .wall-tile {
  animation: tile-in var(--dur-hero) var(--ease-enter) both;
  animation-delay: calc(var(--hero-delay) + var(--i) * var(--stagger));
}
.js .wall-tile.is-selected { animation-delay: calc(var(--hero-delay) + 10 * var(--stagger)); }

@media (prefers-reduced-motion: reduce) {
  .js .wall-tile, .js .wall-tile.is-selected { animation: none; }
}

/* ---------- Narrow screens: copy first, the wall as a strip below ---------- */

@media (max-width: 1100px) {
  .hero-copy { grid-column: 1 / span 7; }
  .wall-frame { left: 52%; }
}

@media (max-width: 860px) {
  .hero {
    --cell-w: clamp(118px, 30vw, 170px);
    display: block;
    min-height: 0;
    padding-top: 6.5rem;
    padding-bottom: 0;
  }
  .hero-title { max-width: 14ch; }
  .hero-lede { font-size: 1.1875rem; }
  .wall-frame {
    position: relative;
    inset: auto;
    height: clamp(300px, 80vw, 440px);
    margin: var(--space-5) calc(var(--margin) * -1) 0;
  }
  .wall-frame::after {
    background:
      linear-gradient(0deg, var(--bg) 0%, oklch(.145 .011 255 / 0) 22%),
      linear-gradient(180deg, var(--bg) 0%, oklch(.145 .011 255 / 0) 16%);
  }
  .wall-viewport { perspective: 1100px; perspective-origin: 50% 30%; }
  .wall-tilt { left: 6%; top: 46%; }
  .wall { transform: translateY(-50%) rotateX(26deg) rotateZ(-14deg); transform-origin: 30% 50%; }
  .wall-note { right: var(--margin); left: var(--margin); bottom: var(--space-1); text-align: left; }
}