.hero {
  --intro: 1100;
  --fs-hero: clamp(3.2rem, min(12.5vw, 24svh), 13rem);
  --scrim-ink: 12% 0.012 60;
  --on-photo-line: color-mix(in oklch, var(--bg) 32%, transparent);
  position: relative;
  min-height: 100svh;
  display: grid;
  grid-template-rows: minmax(0, 1fr) auto;
  overflow: hidden;
  background: var(--fg);
  color: var(--bg);
  touch-action: pan-y;
}
.intro-seen .hero { --intro: 0; }

.hero-media { position: absolute; inset: -3%; will-change: transform; }
.hero-slide { position: absolute; inset: 0; margin: 0; clip-path: inset(0 0 100% 0); transition: clip-path 1.4s var(--ease-in-out); }
.hero-slide img { width: 100%; height: 100%; object-fit: cover; transform: scale(1.12); transition: transform 8s linear; }
.hero-slide.is-current { clip-path: inset(0 0 0 0); z-index: 1; }
.hero-slide.is-current img, .hero-slide.was-current img { transform: none; }
.hero-slide.was-current { clip-path: inset(0 0 0 0); }
.hero-scrim {
  position: absolute; inset: 0; z-index: 1; pointer-events: none;
  background:
    linear-gradient(to bottom, oklch(var(--scrim-ink) / 0.6), transparent 22%),
    linear-gradient(to top, oklch(var(--scrim-ink) / 0.86) 0%, oklch(var(--scrim-ink) / 0.6) 42%, transparent 78%);
}
.floater-field { position: absolute; inset: 0; z-index: 2; }

.floater {
  position: absolute;
  top: 0; left: 0;
  width: var(--w, 200px);
  padding: var(--space-2) var(--space-2) var(--space-3);
  background: var(--surface);
  color: var(--fg);
  cursor: grab;
  user-select: none;
  touch-action: none;
  will-change: transform;
  opacity: 0;
  animation: floater-in var(--dur-slow) var(--ease-out) forwards;
  animation-delay: calc((var(--intro) + 700 + var(--i) * 140) * 1ms);
}
.floater img { width: 100%; height: auto; pointer-events: none; }
.floater figcaption {
  margin-top: var(--space-2);
  font-family: var(--font-mono);
  font-size: var(--fs-caption);
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: var(--muted);
}
.floater.is-dragging { cursor: grabbing; }
.floater:focus-visible { outline: 2px solid var(--bg); outline-offset: 4px; }
@keyframes floater-in { from { opacity: 0; } to { opacity: 1; } }

.hero-copy {
  position: relative;
  z-index: 3;
  grid-row: 1;
  align-self: end;
  display: grid;
  gap: var(--space-4);
  padding: calc(var(--nav-h) + var(--space-5)) var(--gutter) var(--space-6);
  pointer-events: none;
}
.hero-copy a { pointer-events: auto; }
.hero-copy .eyebrow, .hero-copy .eyebrow .num { color: var(--bg); }
.hero-title { font-size: var(--fs-hero); line-height: 0.92; }
.hero-title .reveal-line { padding: 0 0.06em 0.24em 0; margin-bottom: -0.24em; }
.hero-foot { display: flex; justify-content: space-between; align-items: end; gap: var(--space-6); flex-wrap: wrap; margin-top: var(--space-4); }
.hero-sub { max-width: 28rem; font-size: var(--fs-lead); }
.hero-actions { display: flex; align-items: center; gap: var(--space-6); flex-wrap: wrap; }
.hero .btn-primary { background: var(--bg); border-color: var(--bg); color: var(--fg); }
.hero .btn-primary:hover { background: var(--tint); border-color: var(--tint); color: var(--fg); }

.hero-tabs {
  position: relative;
  z-index: 3;
  grid-row: 2;
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr)) auto;
  gap: 0 var(--space-5);
  padding-inline: var(--gutter);
}
.hero-tab {
  position: relative;
  display: grid;
  gap: 2px;
  min-height: var(--tap);
  padding: var(--space-4) 0 var(--space-5);
  border: 0;
  background: none;
  color: inherit;
  text-align: left;
  cursor: pointer;
}
.hero-tab i { position: absolute; inset: 0 0 auto 0; height: var(--hairline); background: var(--on-photo-line); }
.hero-tab i::after { content: ""; position: absolute; inset: 0; background: var(--bg); transform: scaleX(var(--p, 0)); transform-origin: left; }
.hero-tab b { font-family: var(--font-display); font-weight: var(--weight-regular); font-size: 1.5rem; line-height: 1.15; transition: transform var(--dur-med) var(--ease-out); }
.hero-tab span { font-family: var(--font-mono); font-size: var(--fs-caption); letter-spacing: 0.06em; text-transform: uppercase; color: var(--ink-muted); }
.hero-tab:hover b, .hero-tab.is-current b { transform: translateX(6px); }
.hero-tab:hover span, .hero-tab.is-current span { color: var(--bg); }
.hero-tab:focus-visible, .hero-pause:focus-visible { outline-color: var(--bg); }
.hero-pause {
  align-self: center; min-height: var(--tap); padding: 0 var(--space-2); border: 0; background: none; color: var(--bg); cursor: pointer;
  font-family: var(--font-mono); font-size: var(--fs-caption); letter-spacing: 0.06em; text-transform: uppercase;
}
.hero-pause:hover { text-decoration: underline; text-underline-offset: 4px; }

/* Doors: the page opens onto the venue */
.hero-doors { position: fixed; inset: 0; z-index: 90; pointer-events: none; display: grid; place-items: center; animation: doors-gone 0s linear 2.2s forwards; }
.hero-doors i { position: absolute; top: 0; bottom: 0; width: 50.5%; background: var(--bg); animation: door-open 1.25s var(--ease-in-out) 0.85s forwards; }
.hero-doors i:first-child { left: 0; --to: -100%; }
.hero-doors i:nth-child(2) { right: 0; --to: 100%; }
.hero-doors .nav-logo { position: relative; color: var(--fg); font-size: var(--fs-h2); animation: door-mark 0.9s var(--ease-out) forwards; }
@keyframes door-open { to { transform: translateX(var(--to)); } }
@keyframes door-mark { 0% { opacity: 0; transform: translateY(10px); } 35%, 70% { opacity: 1; transform: none; } 100% { opacity: 0; transform: none; } }
@keyframes doors-gone { to { visibility: hidden; } }
.intro-seen .hero-doors { display: none; }

@media (max-width: 860px) {
  .hero-foot { flex-direction: column; align-items: start; gap: var(--space-4); }
  .hero-sub { font-size: var(--fs-body); }
  .hero-tabs { grid-template-columns: 1fr 1fr; gap: 0 var(--space-4); }
  .hero-tab { padding: var(--space-3) 0; }
  .hero-tab b { font-size: 1.2rem; }
  .hero-tab span { display: none; }
  .hero-pause { grid-column: 1 / -1; justify-self: end; }
}
@media (prefers-reduced-motion: reduce) {
  .hero-doors, .hero-pause { display: none; }
  .floater { animation: none; opacity: 1; }
  .hero-slide, .hero-slide img { transition: none; transform: none; }
}

@media (max-width: 600px) { .hero { --fs-hero: 15vw; } }
@media (max-height: 720px) and (min-width: 861px) { .floater:nth-child(3) { display: none; } }