/* ================================================================
   LAML PROM 2026 · styles.css
   Card-stack architecture — glass cards over morphing gradient
   ================================================================ */

/* ── Variables ─────────────────────────────────────────────────── */
:root {
  --black:  #16120d;
  --white:  #f5ede0;
  --gold:   #c9a961;
  --red:    #8b1a1a;

  --gold-06: rgba(201, 169,  97, 0.06);
  --gold-12: rgba(201, 169,  97, 0.12);
  --gold-22: rgba(201, 169,  97, 0.22);
  --gold-40: rgba(201, 169,  97, 0.40);

  --red-08:  rgba(139,  26,  26, 0.08);
  --red-18:  rgba(139,  26,  26, 0.18);
  --red-38:  rgba(139,  26,  26, 0.38);

  --w-06:  rgba(245, 237, 224, 0.06);
  --w-10:  rgba(245, 237, 224, 0.10);
  --w-15:  rgba(245, 237, 224, 0.15);
  --w-18:  rgba(245, 237, 224, 0.18);
  --w-20:  rgba(245, 237, 224, 0.20);
  --w-28:  rgba(245, 237, 224, 0.28);
  --w-40:  rgba(245, 237, 224, 0.40);
  --w-55:  rgba(245, 237, 224, 0.55);
  --w-70:  rgba(245, 237, 224, 0.70);

  --mono:  'JetBrains Mono', 'Courier New', monospace;
  --serif: 'Cormorant Garamond', Georgia, serif;

  --card-w:      min(680px, 88vw);
  --card-radius: 24px;
  --spring:      transform 0.65s cubic-bezier(0.32, 0.72, 0, 1);
  --bg-morph:    background 0.7s cubic-bezier(0.4, 0, 0.2, 1);
}

/* ── Reset ─────────────────────────────────────────────────────── */
*,
*::before,
*::after { box-sizing: border-box; margin: 0; padding: 0; }
html, body { height: 100%; }
html {
  background-color: #0f0a06;
  height: -webkit-fill-available;
}

body {
  min-height: -webkit-fill-available;
}
img, svg { display: block; }
button { appearance: none; background: none; border: none; font: inherit; color: inherit; }
dl, dt, dd { margin: 0; padding: 0; }

/* ── iOS Safari zoom fix — font-size < 16px triggers auto-zoom on focus ── */
input[type="text"],
input[type="email"],
input[type="password"],
textarea,
select {
  font-size: 16px;
  touch-action: manipulation;
}

/* ── Base ───────────────────────────────────────────────────────── */
html,
body {
  overflow: hidden;
  background: var(--black);
  color: var(--white);
  font-family: var(--mono);
}

body {
  cursor: none;
  position: relative;
}

/* Warm grain overlay */
body::after {
  content: '';
  position: fixed;
  inset: 0;
  pointer-events: none;
  z-index: 9998;
  opacity: 0.028;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='300' height='300'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.68' numOctaves='4' stitchTiles='stitch'/%3E%3CfeColorMatrix type='saturate' values='0'/%3E%3C/filter%3E%3Crect width='300' height='300' filter='url(%23n)'/%3E%3C/svg%3E");
  background-size: 200px 200px;
}

.sr-only {
  position: absolute; width: 1px; height: 1px; padding: 0;
  margin: -1px; overflow: hidden; clip: rect(0,0,0,0);
  white-space: nowrap; border: 0;
}

/* ── Custom Cursor ──────────────────────────────────────────────── */
.cursor-dot,
.cursor-ring {
  position: fixed;
  top: 0; left: 0;
  border-radius: 50%;
  pointer-events: none;
  z-index: 10002;       /* above sparkle (10001) and overlay (10000) */
  will-change: transform;
  transform: translate(-500px, -500px);
}

.cursor-dot {
  width: 5px; height: 5px;
  background: var(--white);
  transition: background 0.18s;
}

.cursor-ring {
  width: 28px; height: 28px;
  /* sparkle SVG injected by JS — no border, no border-radius */
  transition:
    width  0.35s cubic-bezier(0.22, 0, 0.08, 1),
    height 0.35s cubic-bezier(0.22, 0, 0.08, 1),
    color  0.25s;
}

.cursor-ring svg { width: 100%; height: 100%; display: block; }

body.cursor-hover     .cursor-ring { width: 44px; height: 44px; color: var(--gold); }
body.cursor-hover     .cursor-dot  { background: var(--gold); }
body.cursor-hover-red .cursor-ring { width: 44px; height: 44px; color: var(--red); }
body.cursor-hover-red .cursor-dot  { background: #c05060; }

.cursor-ring--amber { color: var(--gold); }
.cursor-ring--red   { color: var(--red); }

/* ── Intro Overlay ──────────────────────────────────────────────── */
.intro-overlay {
  position: fixed;
  inset: 0;
  background: var(--black);
  z-index: 10000;       /* above corner labels (9999) and dots (9999) */
  display: flex;
  align-items: center;
  justify-content: center;
  overflow: hidden;
}

.intro-date {
  font-family: var(--serif);
  font-size: clamp(3rem, 10vw, 8.5rem);
  font-weight: 300;
  font-style: italic;
  letter-spacing: 0.06em;
  color: var(--white);
  position: relative;
  z-index: 2;
  min-width: 12ch;
  text-align: center;
  opacity: 0;
  transform: translateY(8px);
}

/* Sparkle wrap — retained in DOM but not used for new fixed sparkle */
.intro-sparkle-wrap {
  position: absolute;
  inset: 0;
  pointer-events: none;
  z-index: 3;
}

/* ── Background Layer ───────────────────────────────────────────── */
.bg-layer {
  position: fixed;
  inset: 0;
  z-index: 0;
  transition: var(--bg-morph);
  transform: translateZ(0);   /* GPU compositing hint */
  background: radial-gradient(ellipse 80% 60% at 50% 40%, #3d2008 0%, #1e1208 45%, #0f0a06 100%);
}

.bg-layer.bg-2 {
  background: radial-gradient(ellipse 70% 70% at 40% 50%, #4a2a0a 0%, #1e1208 50%, #0f0a06 100%);
}

.bg-layer.bg-3 {
  background:
    radial-gradient(ellipse 50% 40% at 30% 60%, #3d1010 0%, transparent 70%),
    radial-gradient(ellipse 90% 70% at 60% 50%, #2d0a0a 0%, #1a0808 40%, #0a0606 100%);
}

/* Card 4 — About */
.bg-layer.bg-5 {
  background: radial-gradient(ellipse 60% 50% at 50% 50%, #1a1208 0%, #0f0a06 60%, #090806 100%);
}

/* Card 5 — FAQ · Card 6 — Contact */
.bg-layer.bg-6 {
  background: radial-gradient(ellipse 40% 40% at 50% 50%, #141008 0%, #0a0806 100%);
}

/* ── Corner Metadata ────────────────────────────────────────────── */
.corner {
  position: fixed;
  font-family: var(--mono);
  font-size: 0.68rem;
  font-weight: 400;
  letter-spacing: 0.13em;
  text-transform: uppercase;
  color: var(--w-28);
  z-index: 9999;
  display: flex;
  align-items: center;
  gap: 0.45em;
  pointer-events: none;
}

.corner-tl { top: 1.25rem;    left: 1.5rem;  }
.corner-tr { top: 1.25rem;    right: 1.5rem; }
.corner-bl { bottom: 1.25rem; left: 1.5rem;  }
.corner-br { bottom: 1.25rem; right: 1.5rem; }

/* ── Dot Navigation ─────────────────────────────────────────────── */
.dot-nav {
  position: fixed;
  right: 1.25rem;
  top: 50%;
  transform: translateY(-50%);
  z-index: 9999;
  display: flex;
  flex-direction: column;
  gap: 10px;
  align-items: center;
}

.dot {
  width: 6px; height: 6px;
  border-radius: 50%;
  background: var(--w-20);
  padding: 0;
  cursor: none;
  transition: background 0.3s, transform 0.3s;
  outline: none;
  flex-shrink: 0;
}

.dot:focus-visible { outline: 1px solid var(--gold); outline-offset: 3px; }
.dot--active { background: var(--gold); transform: scale(1.45); }

/* ── Card Stack Container ───────────────────────────────────────── */
/*
   CRITICAL: no overflow:hidden, no filter, no transform.
   Any of those break backdrop-filter on child cards.
   isolation:isolate creates stacking context without breaking backdrop-filter.
   contain:layout style enables browser optimisations without forcing a new
   containing block that would break fixed-position grandchildren.
*/
.card-stack {
  position: fixed;
  inset: 0;
  z-index: 100;
  pointer-events: none;
  display: flex;
  align-items: center;
  justify-content: center;
  isolation: isolate;
  overflow: visible;
  contain: layout style;
}

/* ── Individual Card ────────────────────────────────────────────── */
/*
   position:absolute + no top/left → flex static-position = center.
   All vertical movement via translateY only — no compound transforms.

   Default (no class): translateY(105dvh) — fully below viewport.
   .card--active:      translateY(0)       — centered on screen.
   .card--behind:      translateY(-3%)     — ~25–30px peek at top edge.

   transition is ALWAYS in CSS — JS uses .no-transition class for instant
   repositioning; never touches style.transform or style.transition inline.
*/
.card {
  position: absolute;
  width: var(--card-w);
  height: 76vh;
  height: 76dvh;
  border-radius: var(--card-radius);
  overflow: hidden;
  pointer-events: auto;

  background: rgba(255, 255, 255, 0.04);
  backdrop-filter: blur(14px) saturate(160%);
  -webkit-backdrop-filter: blur(14px) saturate(160%);
  border: 1px solid var(--w-10);
  box-shadow:
    0 32px 64px rgba(0, 0, 0, 0.45),
    0 8px  24px rgba(0, 0, 0, 0.30),
    inset 0 1px 0 var(--w-18);

  transform: translateY(105vh)  translateZ(0);
  transform: translateY(105dvh) translateZ(0);

  transition: var(--spring);
  will-change: transform;
}

@supports not (backdrop-filter: blur(1px)) {
  .card { background: rgba(20, 12, 6, 0.88); }
}

.card.no-transition { transition: none !important; }

.card--active { transform: translateY(0)    translateZ(0); }
.card--behind { transform: translateY(-3%)  translateZ(0); }

#card0 { z-index: 105; }
#card1 { z-index: 110; }
#card2 { z-index: 115; }
#card3 { z-index: 120; }
#card4 { z-index: 125; }
#card5 { z-index: 130; }

/* Low-perf fallback — applied by JS after slow first transition */
body.low-perf .card {
  backdrop-filter: blur(8px) saturate(160%);
  -webkit-backdrop-filter: blur(8px) saturate(160%);
}

/* ── Club Night Card ─────────────────────────────────────────────── */
.card--club {
  background: rgba(100, 10, 10, 0.12);
  border-color: rgba(139, 26, 26, 0.30);
  perspective: 1200px;
}

/* Dark radial vignette — makes white text readable over red gradient */
.card--club::before {
  content: '';
  position: absolute;
  inset: 0;
  border-radius: inherit;
  background: radial-gradient(
    ellipse 80% 70% at 50% 50%,
    rgba(0, 0, 0, 0.35) 0%,
    transparent 100%
  );
  pointer-events: none;
  z-index: 0;
}

/* Club Night card flip */
.card--club .card-face--back  { background: rgba(139, 26, 26, 0.06); }
.card--club.is-flipped .card-face--front { transform: rotateY(-180deg); }
.card--club.is-flipped .card-face--back  { transform: rotateY(0deg); }

/* All text inside club card overrides to white variants */
.card--club .card-venue-label { color: rgba(255, 255, 255, 0.38); }
.card--club .card-eyebrow--red   { color: rgba(255, 255, 255, 0.55); }
.card--club .card-title          { color: #ffffff; }
.card--club .card-sub            { color: rgba(255, 255, 255, 0.70); }
.card--club .card-price          { color: rgba(255, 255, 255, 0.45); }
.card--club .ornament            { color: rgba(255, 255, 255, 0.60); }

.card--club .card-cta--red {
  border: 1px solid rgba(255, 255, 255, 0.50);
  color: #ffffff;
  background: transparent;
}
.card--club .card-cta--red:hover,
.card--club .card-cta--red:focus {
  border-color: #ffffff;
  color: #ffffff;
  background: rgba(255, 255, 255, 0.08);
  box-shadow: none;
}

/* ── Card glass rim ──────────────────────────────────────────────── */
.card-glass-rim {
  position: absolute;
  top: 0; left: 0; right: 0;
  height: 80px;
  background: linear-gradient(to bottom, var(--w-06) 0%, transparent 100%);
  border-radius: var(--card-radius) var(--card-radius) 0 0;
  pointer-events: none;
  z-index: 1;
}

/* ── Card Body ───────────────────────────────────────────────────── */
.card-body {
  position: relative;
  z-index: 2;           /* above ::before dark overlay */
  height: 100%;
  padding: clamp(2.5rem, 5vh, 4rem) clamp(2rem, 5vw, 3.5rem);
  display: flex;
  flex-direction: column;
  gap: clamp(0.75rem, 1.8vh, 1.5rem);
  overflow-y: auto;
  scrollbar-width: none;
}
.card-body::-webkit-scrollbar { display: none; }

.card-body--center {
  align-items: center;
  justify-content: center;
  text-align: center;
}

/* ── Hero Card ──────────────────────────────────────────────────── */
.ornament {
  font-size: 1rem;
  color: var(--gold);
  opacity: 0.7;
  display: block;
}

/* Groups LAML + PROM/2026 headline tightly together */
.hero-name-group {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 0.4rem;
}

.hl-laml {
  font-family: var(--serif);
  font-size: clamp(1.8rem, 3vw, 2.2rem);
  font-weight: 300;
  font-style: italic;
  letter-spacing: 0.3em;
  color: rgba(201, 169, 97, 0.80);
  display: block;
}

.headline {
  display: flex;
  flex-direction: column;
  align-items: center;
  line-height: 0.88;
}

.hl-prom {
  font-family: var(--serif);
  font-size: clamp(3.5rem, 14vw, 9rem);
  font-weight: 600;
  font-style: normal;
  font-variant-caps: small-caps;
  letter-spacing: 0.12em;
  color: var(--white);
  display: block;
  text-transform: uppercase;
}

.hl-year {
  font-family: var(--serif);
  font-size: clamp(1.3rem, 5vw, 4rem);
  font-weight: 300;
  font-style: italic;
  letter-spacing: 0.22em;
  color: rgba(201, 169, 97, 0.65);
  display: block;
  margin-top: 0.15em;
}

.hero-tagline {
  font-family: var(--mono);
  font-size: clamp(0.58rem, 0.9vw, 0.68rem);
  letter-spacing: 0.3em;
  text-transform: uppercase;
  color: var(--w-28);
}

.hero-date {
  font-family: var(--mono);
  font-size: clamp(0.68rem, 1.3vw, 0.82rem);
  letter-spacing: 0.28em;
  text-transform: uppercase;
  color: var(--w-40);
}

/* Pinned to bottom of card — absolute so it doesn't affect flex centering */
.scroll-hint {
  position: absolute;
  bottom: clamp(1.5rem, 3vh, 2.5rem);
  left: 50%;
  transform: translateX(-50%);
  font-family: var(--mono);
  font-size: 0.48rem;
  letter-spacing: 0.28em;
  text-transform: uppercase;
  color: var(--w-20);
  white-space: nowrap;
}

/* ── Shared Card Labels ──────────────────────────────────────────── */
.card-eyebrow {
  font-family: var(--mono);
  font-size: 0.62rem;
  font-weight: 500;
  letter-spacing: 0.42em;
  text-transform: uppercase;
}

.card-eyebrow--amber { color: rgba(201, 169, 97, 0.62); }
.card-eyebrow--red   { color: rgba(139,  26, 26, 0.62); }

.card-title {
  font-family: var(--serif);
  font-size: clamp(3rem, 9vw, 6.5rem);
  font-weight: 600;
  letter-spacing: 0.03em;
  line-height: 1;
  color: var(--white);
}

.card-venue-label {
  font-family: var(--mono);
  font-size: 0.70rem;
  letter-spacing: 0.38em;
  text-transform: uppercase;
  color: rgba(201, 169, 97, 0.45);
  margin-top: -0.15rem;
}

.card-sub {
  font-family: var(--mono);
  font-size: clamp(0.62rem, 1.1vw, 0.74rem);
  letter-spacing: 0.2em;
  text-transform: uppercase;
  color: var(--w-40);
}

.card-price {
  font-family: var(--mono);
  font-size: 0.66rem;
  letter-spacing: 0.28em;
  text-transform: uppercase;
  color: var(--w-20);
}

/* ── CTA Buttons ─────────────────────────────────────────────────── */
.card-cta {
  margin-top: 0.35rem;
  padding: 0.68rem 2.4rem;
  font-family: var(--mono);
  font-size: 0.68rem;
  font-weight: 500;
  letter-spacing: 0.22em;
  text-transform: uppercase;
  border-radius: 8px;
  cursor: none;
  transition: border-color 0.3s, color 0.3s, background 0.3s, box-shadow 0.3s;
}

.card-cta--amber {
  border: 1px solid var(--gold-22);
  color: var(--w-55);
}
.card-cta--amber:hover,
.card-cta--amber:focus {
  border-color: var(--gold);
  color: var(--gold);
  box-shadow: 0 0 16px var(--gold-06);
}

.card-cta--red {
  border: 1px solid var(--red-18);
  color: var(--w-55);
}
.card-cta--red:hover,
.card-cta--red:focus {
  border-color: var(--red);
  color: #c06070;
  box-shadow: 0 0 16px var(--red-08);
}

/* ── About Card ──────────────────────────────────────────────────── */
.card-prose {
  font-family: var(--serif);
  font-size: clamp(0.95rem, 2vw, 1.2rem);
  font-style: italic;
  font-weight: 400;
  line-height: 1.72;
  color: var(--w-55);
}

.card-divider {
  width: 28px; height: 1px;
  background: var(--w-15);
  flex-shrink: 0;
}

.card-venue {
  font-family: var(--mono);
  font-size: 0.76rem;
  line-height: 1.9;
  color: var(--w-40);
}

/* ── FAQ Card ────────────────────────────────────────────────────── */
.faq-list { display: flex; flex-direction: column; }

.faq-row {
  padding: 0.95rem 0;
  border-bottom: 1px solid rgba(245, 237, 224, 0.055);
}
.faq-row:first-child { border-top: 1px solid rgba(245, 237, 224, 0.055); }

.faq-row dt {
  font-family: var(--serif);
  font-size: clamp(0.9rem, 1.8vw, 1.05rem);
  font-weight: 500;
  color: var(--w-70);
  margin-bottom: 0.3rem;
}

.faq-row dd {
  font-family: var(--serif);
  font-style: italic;
  font-size: clamp(0.9rem, 1.8vw, 1.05rem);
  line-height: 1.72;
  color: var(--w-40);
}

/* ── Mobile ──────────────────────────────────────────────────────── */
@media (max-width: 600px) {
  .corner { font-size: 0.56rem; letter-spacing: 0.08em; }
  .corner-tl { top: 0.85rem;    left: 0.85rem;  }
  .corner-tr { top: 0.85rem;    right: 0.85rem; }
  .corner-bl { bottom: 0.85rem; left: 0.85rem;  }
  .corner-br { bottom: 0.85rem; right: 0.85rem; }

  .dot-nav { right: 0.6rem; }

  .card-body { padding: 2rem 1.5rem; }
}

/* ── Contact Card ────────────────────────────────────────────────── */
.contact-title {
  font-size: clamp(1.5rem, 4vw, 2.4rem);
  font-style: italic;
  font-weight: 400;
  line-height: 1.15;
}

.contact-items {
  display: flex;
  flex-direction: column;
  gap: 0.9rem;
  text-align: left;
}

.contact-link {
  display: flex;
  align-items: center;
  gap: 0.65rem;
  font-family: var(--mono);
  font-size: 0.68rem;
  letter-spacing: 0.1em;
  color: var(--w-55);
  text-decoration: none;
  cursor: none;
  transition: color 0.3s;
}

.contact-link:hover { color: var(--gold); }

.contact-icon {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 16px;
  height: 16px;
  flex-shrink: 0;
  font-size: 13px;
  line-height: 1;
}

.contact-icon svg { display: block; }

.contact-copyright {
  font-family: var(--mono);
  font-size: 0.52rem;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: var(--w-20);
  margin-top: 1.5rem;
}

/* ── Dîner Card Flip ─────────────────────────────────────────────── */
/*
   perspective on .card--diner gives 3D depth to child face transforms.
   overflow:hidden is kept — faces only rotate inward (never extend beyond card bounds).
   No preserve-3d needed: each face is independently transformed; backface-visibility
   handles visibility. Both faces share the same perspective origin (card center).
*/
.card--diner { perspective: 1200px; }

.card-face {
  position: absolute;
  inset: 0;
  backface-visibility: hidden;
  -webkit-backface-visibility: hidden;
  transition: transform 0.65s cubic-bezier(0.32, 0.72, 0, 1);
}

.card-face--front { transform: rotateY(0deg); }
.card-face--back  {
  transform: rotateY(180deg);
  background: rgba(201, 169, 97, 0.04);
}

.card--diner.is-flipped .card-face--front { transform: rotateY(-180deg); }
.card--diner.is-flipped .card-face--back  { transform: rotateY(0deg); }

/* Smaller card title variant for back face */
.card-title--sm {
  font-size: clamp(2rem, 6vw, 4rem);
  margin-bottom: 0.25rem;
}

/* ── Role Toggle Buttons ─────────────────────────────────────────── */
.role-toggles {
  display: flex;
  gap: 0.75rem;
  width: 100%;
  max-width: 280px;
}

.role-btn {
  flex: 1;
  padding: 0.65rem 0.75rem;
  font-family: var(--mono);
  font-size: 0.60rem;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  border: 1px solid var(--gold-22);
  color: var(--w-40);
  border-radius: 8px;
  cursor: none;
  transition: border-color 0.3s, color 0.3s, background 0.3s;
}
.role-btn:hover,
.role-btn:focus { border-color: var(--gold-40); color: var(--w-55); outline: none; }
.role-btn.is-selected {
  border-color: var(--gold);
  color: var(--gold);
  background: rgba(201, 169, 97, 0.07);
}

/* Column variant for three-button role groups */
.role-toggles--col {
  flex-direction: column;
  max-width: 220px;
  width: 100%;
}

/* Club Night card — white/red role button overrides */
.card--club .role-btn {
  border-color: rgba(255, 255, 255, 0.16);
  color: rgba(255, 255, 255, 0.42);
}
.card--club .role-btn:hover,
.card--club .role-btn:focus {
  border-color: rgba(255, 255, 255, 0.36);
  color: rgba(255, 255, 255, 0.68);
}
.card--club .role-btn.is-selected {
  border-color: rgba(255, 255, 255, 0.65);
  color: #ffffff;
  background: rgba(255, 255, 255, 0.07);
}

/* Club Night card — back-link in white */
.card--club .back-link {
  color: rgba(255, 255, 255, 0.20);
}
.card--club .back-link:hover { color: rgba(255, 255, 255, 0.42); }

/* Club Night card — code-entry colour overrides (white/red instead of amber) */
.card--club .code-label { color: rgba(255, 255, 255, 0.25); }
.card--club .code-input {
  border-color: rgba(255, 255, 255, 0.15);
  caret-color: rgba(255, 255, 255, 0.60);
}
.card--club .code-input::placeholder { color: rgba(255, 255, 255, 0.12); }
.card--club .code-input:focus { border-color: rgba(255, 255, 255, 0.35); }

/* ── Code Entry Section ──────────────────────────────────────────── */
.code-entry {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 0.85rem;
  overflow: hidden;
  max-height: 0;
  opacity: 0;
  width: 100%;
  max-width: 280px;
  transition:
    max-height 0.45s cubic-bezier(0.32, 0.72, 0, 1),
    opacity 0.35s ease;
}
.code-entry.is-visible {
  max-height: 220px;
  opacity: 1;
}

.code-label {
  font-family: var(--mono);
  font-size: 0.55rem;
  letter-spacing: 0.32em;
  text-transform: uppercase;
  color: var(--w-28);
  margin-bottom: -0.3rem;
}

.code-input {
  font-family: var(--mono);
  font-size: 0.88rem;
  letter-spacing: 0.24em;
  text-align: center;
  text-transform: uppercase;
  background: rgba(255, 255, 255, 0.04);
  border: 1px solid var(--gold-22);
  border-radius: 8px;
  color: var(--white);
  padding: 0.6rem 1rem;
  width: 100%;
  outline: none;
  transition: border-color 0.25s;
  caret-color: var(--gold);
  cursor: text;
}
.code-input::placeholder { color: var(--w-15); letter-spacing: 0.1em; }
.code-input:focus { border-color: var(--gold-40); }

.code-submit { width: 100%; margin-top: 0; }

.code-error {
  font-family: var(--mono);
  font-size: 0.55rem;
  letter-spacing: 0.22em;
  text-transform: uppercase;
  color: rgba(200, 70, 70, 0.85);
  opacity: 0;
  transition: opacity 0.2s;
  margin-top: -0.4rem;
}
.code-error.is-visible { opacity: 1; }

.form-submit-error {
  font-family: var(--mono);
  font-size: 0.58rem;
  letter-spacing: 0.12em;
  color: rgba(200, 70, 70, 0.85);
  margin-top: 0.6rem;
  line-height: 1.5;
  min-height: 0;
}

/* Shake animation on wrong code */
@keyframes diner-shake {
  0%, 100% { transform: translateX(0); }
  18%       { transform: translateX(-7px); }
  36%       { transform: translateX(6px); }
  54%       { transform: translateX(-4px); }
  72%       { transform: translateX(3px); }
  88%       { transform: translateX(-2px); }
}
.code-input.is-shaking { animation: diner-shake 0.42s ease-out; }

/* ── Back Link ───────────────────────────────────────────────────── */
.back-link {
  font-family: var(--mono);
  font-size: 0.56rem;
  letter-spacing: 0.22em;
  text-transform: uppercase;
  color: var(--w-20);
  cursor: none;
  transition: color 0.25s;
  margin-top: 0.5rem;
  background: none;
  border: none;
  padding: 0.2rem 0.4rem;
}
.back-link:hover { color: var(--w-40); }

/* ── Fade-to-black Overlay ───────────────────────────────────────── */
.fade-overlay {
  position: fixed;
  inset: 0;
  background: var(--black);
  z-index: 20000;
  opacity: 0;
  pointer-events: none;
  transition: opacity 0.4s ease;
}
.fade-overlay.is-active {
  opacity: 1;
  pointer-events: auto;
}

/* ── Touch devices — hide custom cursor regardless of screen size ── */
@media (hover: none) and (pointer: coarse) {
  .cursor-dot, .cursor-ring { display: none; }
  body { cursor: auto; }
  .card-cta, button { cursor: pointer; }
}

/* ── Reduced Motion ─────────────────────────────────────────────── */
@media (prefers-reduced-motion: reduce) {
  .card {
    transition: opacity 0.3s ease !important;
    transform: translateY(0) translateZ(0) !important;
    opacity: 0;
    pointer-events: none;
  }
  .card--active {
    opacity: 1 !important;
    pointer-events: auto !important;
  }
  .card--behind,
  .card.no-transition {
    opacity: 0 !important;
    pointer-events: none !important;
  }

  .bg-layer { transition: background 0.3s ease; }

  .cursor-dot, .cursor-ring { display: none; }
  body { cursor: auto; }
  .card-cta, button { cursor: pointer; }

  .intro-overlay { display: none !important; }
}