/* ============================================================================
   SMARTBOOKING — CINEMATIC LANDING CONCEPT (/welcome-v3)
   ============================================================================

   Self-contained stylesheet, nothing shared with site.css, every rule scoped
   under the .v3 body class — the same isolation rule as welcome-v2.css.

   Design doc: docs/welcome-v3-design.md. The short version: one idea (the
   ticket), two accents (iris for the interface, champagne foil reserved for
   the ticket and the buy action), one easing family, and a single tonal act
   change to paper for the organiser section.

   Organised: tokens → base → buttons → nav → hero → ticket → ticker → scenes
   → headliner → weekend rail → how → paper act → finale → footer → motion →
   reduced motion → responsive.
   ========================================================================= */

/* ============================================================================
   0. TYPE — self-hosted (wwwroot/fonts, OFL): the landing page loads nothing
   from another origin, by tested contract. Full system fallbacks remain.
   ========================================================================= */

@font-face {
  font-family: "Bricolage Grotesque";
  src: url("/fonts/bricolage-grotesque-var.woff2") format("woff2");
  font-weight: 300 800;
  font-stretch: 75% 100%;
  font-style: normal;
  font-display: swap;
}

@font-face {
  font-family: "Instrument Serif";
  src: url("/fonts/instrument-serif-italic.woff2") format("woff2");
  font-weight: 400;
  font-style: italic;
  font-display: swap;
}

/* ============================================================================
   1. TOKENS
   ========================================================================= */

.v3 {
  color-scheme: dark;

  /* Night inks: deep indigo-violet, never pure black. */
  --ink-0: #08070f;
  --ink-1: #0d0b19;
  --ink-2: #131023;
  --ink-3: #1a1630;

  --line: rgba(240, 236, 255, 0.09);
  --line-strong: rgba(240, 236, 255, 0.18);
  --glass: rgba(240, 236, 255, 0.04);

  /* The interface accent. */
  --iris-300: #beaaff;
  --iris-400: #9d80ff;
  --iris-500: #7c5cff;
  --iris-600: #6a48e6;

  /* The ticket accent: champagne foil. Reserved for the ticket + buy actions. */
  --foil-1: #f7e6bc;
  --foil-2: #e8c37a;
  --foil-3: #c99a45;
  --foil-ink: #2b1f05;
  --grad-foil: linear-gradient(115deg, var(--foil-1) 0%, var(--foil-2) 45%, #f3d795 62%, var(--foil-3) 100%);

  /* Paper act. */
  --paper: #f4f0e7;
  --paper-2: #ece7da;
  --paper-ink: #171226;
  --paper-soft: #4e4763;
  --paper-line: rgba(23, 18, 38, 0.14);

  --text: #f4f2ff;
  --text-soft: #b8b1d6;
  --muted: #8b83b0;
  --faint: #5f5885;

  --f-display: "Bricolage Grotesque", "Segoe UI Variable Display", "Segoe UI",
               system-ui, -apple-system, sans-serif;
  --f-body: "Segoe UI", system-ui, -apple-system, "Helvetica Neue", Arial, sans-serif;
  --f-serif: "Instrument Serif", "Iowan Old Style", Georgia, serif;

  --t-hero: clamp(2.9rem, 1.4rem + 5.8vw, 6rem);
  --t-h2: clamp(2rem, 1.3rem + 2.6vw, 3.4rem);
  --t-h2-xl: clamp(2.4rem, 1.4rem + 3.6vw, 4.4rem);
  --t-lede: clamp(1.05rem, 1rem + 0.35vw, 1.25rem);
  --t-sm: 0.875rem;
  --t-xs: 0.75rem;

  --s-1: 0.25rem;  --s-2: 0.5rem;  --s-3: 0.75rem; --s-4: 1rem;
  --s-5: 1.5rem;   --s-6: 2rem;    --s-7: 2.5rem;  --s-8: 3rem;
  --s-9: 4rem;     --s-10: 5.5rem; --s-11: 7.5rem;

  --r-sm: 10px; --r-md: 16px; --r-lg: 22px; --r-full: 999px;

  --shadow-card: 0 2px 8px rgba(2, 1, 8, 0.5), 0 24px 64px -24px rgba(2, 1, 8, 0.8);
  --glow-iris: 0 8px 40px -10px rgba(124, 92, 255, 0.55);
  --glow-foil: 0 10px 44px -12px rgba(232, 195, 122, 0.45);

  /* One easing family, one duration scale. */
  --ease: cubic-bezier(0.16, 1, 0.3, 1);
  --fast: 200ms var(--ease);
  --slow: 600ms var(--ease);

  --wrap: 80rem;
  --nav-h: 4.5rem;
}

/* ============================================================================
   2. BASE
   ========================================================================= */

.v3 {
  margin: 0;
  background: var(--ink-0);
  color: var(--text);
  font-family: var(--f-body);
  font-size: 1rem;
  line-height: 1.65;
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
  overflow-x: clip;
}

html:has(.v3) {
  background: #08070f;
  scroll-behavior: smooth;
  scroll-padding-top: 5.5rem;
}

/* Film grain over everything: one inline SVG noise tile, barely-there. */
.v3::after {
  content: "";
  position: fixed;
  inset: 0;
  z-index: 300;
  pointer-events: none;
  opacity: 0.05;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='140' height='140'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.85' numOctaves='2' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E");
}

.v3 *, .v3 *::before, .v3 *::after { box-sizing: border-box; }

.v3 h1, .v3 h2, .v3 h3 {
  font-family: var(--f-display);
  line-height: 1.05;
  margin: 0 0 var(--s-4);
  letter-spacing: -0.03em;
  text-wrap: balance;
  font-weight: 700;
}

.v3 p { margin: 0 0 var(--s-4); }
.v3 img, .v3 svg { max-width: 100%; }

.v3 :where(a) { color: var(--iris-300); text-decoration: none; transition: color var(--fast); }
.v3 :where(a:hover) { color: var(--text); }

.v3 :focus-visible {
  outline: 2px solid var(--iris-400);
  outline-offset: 3px;
  border-radius: 4px;
}

.v3 ::selection { background: rgba(124, 92, 255, 0.5); color: #fff; }

.v3-wrap { width: min(var(--wrap), 100% - 3rem); margin-inline: auto; }

.v3 .visually-hidden {
  position: absolute !important;
  width: 1px; height: 1px;
  margin: -1px; padding: 0; border: 0;
  clip-path: inset(50%);
  overflow: hidden;
  white-space: nowrap;
}

.v3-skip {
  position: fixed;
  top: -4rem; left: 1rem;
  z-index: 400;
  padding: 0.7rem 1.1rem;
  background: var(--iris-500);
  color: #fff;
  border-radius: var(--r-sm);
  font-weight: 600;
  transition: top var(--fast);
}
.v3-skip:focus-visible { top: 1rem; color: #fff; }

.v3-section { padding-block: var(--s-11); position: relative; }

/* Below-the-fold acts render lazily; sizes are rough viewport guesses. */
.t3-how, .t3-paper, .t3-finale {
  content-visibility: auto;
  contain-intrinsic-size: auto 700px;
}

/* Shared section furniture ------------------------------------------------- */

.t3-kicker {
  font-family: var(--f-display);
  font-size: var(--t-xs);
  font-weight: 600;
  letter-spacing: 0.22em;
  text-transform: uppercase;
  color: var(--iris-300);
  display: inline-flex;
  align-items: center;
  gap: 0.55em;
  margin: 0 0 var(--s-4);
}
.t3-kicker svg { width: 1.1em; height: 1.1em; }
.t3-kicker.is-foil { color: var(--foil-2); }

.t3-h2 { font-size: var(--t-h2); }
.t3-h2.is-xl { font-size: var(--t-h2-xl); }
.t3-h2 a { color: inherit; }
.t3-h2 a:hover { color: inherit; }

.t3-aside {
  font-family: var(--f-serif);
  font-style: italic;
  font-size: clamp(1.15rem, 1rem + 0.6vw, 1.5rem);
  color: var(--muted);
  margin: 0;
}
.t3-aside.is-centred { text-align: center; }

.t3-sec-head { max-width: 52rem; margin-bottom: var(--s-8); }
.t3-sec-head.is-centred { margin-inline: auto; text-align: center; }

.t3-sec-row {
  display: flex;
  flex-wrap: wrap;
  align-items: flex-end;
  justify-content: space-between;
  gap: var(--s-5);
  margin-bottom: var(--s-7);
}

.t3-lede {
  font-size: var(--t-lede);
  color: var(--text-soft);
  max-width: 56ch;
}

.v3-inline-ic { width: 1em; height: 1em; vertical-align: -0.12em; }

/* ============================================================================
   3. BUTTONS
   ========================================================================= */

.v3-btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 0.5em;
  padding: 0.78em 1.6em;
  border: 1px solid transparent;
  border-radius: var(--r-full);
  font-family: var(--f-display);
  font-size: 0.95rem;
  font-weight: 600;
  letter-spacing: 0.01em;
  line-height: 1.2;
  cursor: pointer;
  white-space: nowrap;
  position: relative;
  overflow: hidden;
  transition: transform var(--fast), box-shadow var(--fast),
              background-color var(--fast), border-color var(--fast), color var(--fast);
}
.v3-btn:active { transform: scale(0.97); }
.v3-btn svg { width: 1.1em; height: 1.1em; flex: none; }

.v3-btn-lg { padding: 0.95em 2em; font-size: 1.02rem; }
.v3-btn-sm { padding: 0.55em 1.2em; font-size: var(--t-sm); }

.v3-btn-primary { background: var(--iris-500); color: #fff; }
.v3-btn-primary:hover { background: var(--iris-400); color: #fff; box-shadow: var(--glow-iris); }

.v3-btn-foil { background: var(--grad-foil); color: var(--foil-ink); }
.v3-btn-foil:hover { color: var(--foil-ink); box-shadow: var(--glow-foil); }
/* A light sweep crosses the foil on hover — the same specular language as the ticket. */
.v3-btn-foil::after {
  content: "";
  position: absolute;
  inset: -40% auto;
  width: 34%;
  transform: translateX(-220%) skewX(-22deg);
  background: linear-gradient(90deg, transparent, rgba(255, 255, 255, 0.65), transparent);
  transition: transform 700ms var(--ease);
}
.v3-btn-foil:hover::after { transform: translateX(360%) skewX(-22deg); }

.v3-btn-ghost {
  background: transparent;
  border-color: var(--line-strong);
  color: var(--text);
}
.v3-btn-ghost:hover { border-color: var(--text); color: var(--text); }

/* ------------------------------------------------------ the header's Log in ----
   A GHOST BUTTON READS AS PLAIN TEXT UP HERE, and that is what was reported.

   .v3-btn-ghost draws its outline in --line-strong, which is
   rgba(240, 236, 255, 0.18) — eighteen per cent. That is right where it is used
   elsewhere on this page: over the solid panels of the pricing tiers and the
   footer, an outline that quiet is a deliberate second-rank action. The nav is
   transparent over a photographic hero, and against that the same outline
   disappears and the word is all that is left.

   So the border is raised and a faint fill added, for THIS button only. Scoped
   to .v3-nav-login rather than changing .v3-btn-ghost, which the hero CTA, the
   pricing tiers and the footer all use and all still want quiet.

   Everything else about it is the existing button: .v3-btn's pill radius, its
   font and its transitions, and .v3-btn-sm's padding. Nothing here changes the
   size, and the href is untouched. */
.v3-nav-login {
  border-color: rgba(240, 236, 255, 0.42);
  background: rgba(240, 236, 255, 0.07);
}

.v3-nav-login:hover {
  border-color: var(--text);
  background: rgba(240, 236, 255, 0.14);
}

.v3-arr { display: inline-flex; transition: transform var(--fast); }
.v3-btn:hover .v3-arr { transform: translateX(4px); }

/* ============================================================================
   4. NAV
   ========================================================================= */

.v3-nav {
  position: fixed;
  inset: 0 0 auto;
  z-index: 100;
  transition: background-color var(--fast), border-color var(--fast), backdrop-filter var(--fast);
  border-bottom: 1px solid transparent;
}
.v3-nav.is-stuck {
  background: rgba(8, 7, 15, 0.72);
  backdrop-filter: blur(14px);
  -webkit-backdrop-filter: blur(14px);
  border-bottom-color: var(--line);
}

.v3-nav-in {
  width: min(var(--wrap), 100% - 3rem);
  margin-inline: auto;
  height: var(--nav-h);
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--s-5);
}

.v3-brand { display: inline-flex; align-items: center; gap: 0.65rem; color: var(--text); }
.v3-brand:hover { color: var(--text); }
.v3-brand-mark { display: inline-flex; width: 2.1rem; height: 2.1rem; }
.v3-brand-mark svg { width: 100%; height: 100%; }
.v3-brand-word {
  font-family: var(--f-display);
  font-weight: 500;
  font-size: 1.25rem;
  letter-spacing: -0.02em;
}
.v3-brand-word b { font-weight: 750; }

.v3-links {
  display: flex;
  align-items: center;
  gap: clamp(1rem, 2.5vw, 2.2rem);
  list-style: none;
  margin: 0; padding: 0;
}
.v3-links a {
  font-family: var(--f-display);
  font-size: var(--t-sm);
  font-weight: 500;
  color: var(--text-soft);
  position: relative;
  padding-block: 0.4rem;
}
.v3-links a::after {
  content: "";
  position: absolute;
  left: 0; right: 100%; bottom: 0;
  height: 1.5px;
  background: var(--iris-400);
  transition: right var(--fast);
}
.v3-links a:hover { color: var(--text); }
.v3-links a:hover::after { right: 0; }

.v3-menu-login { display: none; }

.v3-nav-actions { display: flex; align-items: center; gap: var(--s-3); }

.v3-burger {
  display: none;
  width: 2.6rem; height: 2.6rem;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 7px;
  background: transparent;
  border: 1px solid var(--line-strong);
  border-radius: var(--r-full);
  cursor: pointer;
}
.v3-burger span {
  width: 1.1rem; height: 2px;
  background: var(--text);
  border-radius: 2px;
  transition: transform var(--fast), opacity var(--fast);
}
.v3-burger[aria-expanded="true"] span:first-child { transform: translateY(4.5px) rotate(45deg); }
.v3-burger[aria-expanded="true"] span:last-child { transform: translateY(-4.5px) rotate(-45deg); }

/* ============================================================================
   5. HERO
   ========================================================================= */

.t3-hero {
  position: relative;
  min-height: 100svh;
  display: flex;
  flex-direction: column;
  justify-content: center;
  padding-block: calc(var(--nav-h) + var(--s-8)) var(--s-9);
  overflow: clip;
}

/* The aurora canvas, with a CSS gradient in the same key underneath so a failed
   WebGL context (or scripting off) still gets a lit stage. */
.t3-aurora {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  background:
    radial-gradient(90rem 50rem at 78% -12%, rgba(124, 92, 255, 0.22), transparent 60%),
    radial-gradient(70rem 46rem at 8% 100%, rgba(56, 38, 128, 0.35), transparent 65%),
    radial-gradient(40rem 30rem at 92% 82%, rgba(232, 195, 122, 0.07), transparent 70%),
    var(--ink-0);
}
.t3-hero-veil {
  position: absolute;
  inset: 0;
  background:
    linear-gradient(180deg, rgba(8, 7, 15, 0.55), transparent 28%, transparent 62%, var(--ink-0) 98%),
    radial-gradient(120% 90% at 50% 40%, transparent 55%, rgba(8, 7, 15, 0.55));
  pointer-events: none;
}

.t3-hero-grid {
  position: relative;
  display: grid;
  grid-template-columns: minmax(0, 7fr) minmax(0, 5fr);
  align-items: center;
  gap: clamp(var(--s-6), 5vw, var(--s-10));
}

.t3-eyebrow {
  font-family: var(--f-serif);
  font-style: italic;
  font-size: 1.3rem;
  color: var(--foil-2);
  display: flex;
  align-items: center;
  gap: 0.6em;
  margin-bottom: var(--s-5);
}
.t3-eyebrow-dot {
  width: 0.45em; height: 0.45em;
  border-radius: 50%;
  background: var(--foil-2);
  box-shadow: 0 0 12px 2px rgba(232, 195, 122, 0.6);
  animation: t3-pulse 2.6s ease-in-out infinite;
}
@keyframes t3-pulse { 50% { opacity: 0.45; transform: scale(0.8); } }

.t3-h1 {
  font-size: var(--t-hero);
  font-weight: 750;
  letter-spacing: -0.035em;
  line-height: 0.99;
  margin-bottom: var(--s-5);
}
.t3-h1.is-centred { text-align: center; }
.t3-line { display: block; overflow: hidden; padding-block: 0.06em; }
.t3-word { display: inline-block; }

.is-foil {
  background: var(--grad-foil);
  -webkit-background-clip: text;
  background-clip: text;
  color: transparent;
}

.t3-hero-copy .t3-lede { margin-bottom: var(--s-6); }

/* Search dock ---------------------------------------------------------------- */

.t3-dock {
  display: flex;
  align-items: stretch;
  gap: var(--s-2);
  padding: var(--s-2);
  max-width: 40rem;
  background: rgba(19, 16, 35, 0.75);
  backdrop-filter: blur(10px);
  -webkit-backdrop-filter: blur(10px);
  border: 1px solid var(--line);
  border-radius: var(--r-full);
  margin-bottom: var(--s-6);
  transition: border-color var(--fast), box-shadow var(--fast);
}
.t3-dock:focus-within {
  border-color: rgba(124, 92, 255, 0.55);
  box-shadow: 0 0 0 4px rgba(124, 92, 255, 0.14);
}

.t3-dock label {
  display: flex;
  align-items: center;
  gap: 0.6em;
  padding-inline: 1em 0.4em;
  position: relative;
  color: var(--muted);
}
.t3-dock label svg { width: 1.15em; height: 1.15em; flex: none; }
.t3-dock-q { flex: 1 1 auto; min-width: 0; }
.t3-dock-when { border-left: 1px solid var(--line); }

.t3-dock input[type="search"],
.t3-dock select {
  appearance: none;
  background: transparent;
  border: 0;
  color: var(--text);
  font: inherit;
  font-size: var(--t-sm);
  min-width: 0;
  width: 100%;
  padding-block: 0.6em;
}
.t3-dock input::placeholder { color: var(--muted); }
.t3-dock input:focus, .t3-dock select:focus { outline: none; }
.t3-dock select { cursor: pointer; padding-right: 1.5em; }
.t3-dock select option { background: var(--ink-2); color: var(--text); }
.t3-dock-chev {
  position: absolute;
  right: 0.5em;
  pointer-events: none;
  display: inline-flex;
}
.t3-dock-chev svg { width: 1em; height: 1em; }

.t3-hero-cta { display: flex; flex-wrap: wrap; gap: var(--s-3); margin-bottom: var(--s-6); }

.t3-trust {
  display: flex;
  flex-wrap: wrap;
  gap: var(--s-3) var(--s-6);
  list-style: none;
  margin: 0; padding: 0;
  color: var(--muted);
  font-size: var(--t-sm);
}
.t3-trust li { display: inline-flex; align-items: center; gap: 0.5em; }
.t3-trust svg { width: 1.1em; height: 1.1em; color: var(--iris-300); }

/* Scroll cue ------------------------------------------------------------------ */

.t3-scroll-cue {
  position: absolute;
  left: 50%;
  bottom: 1.4rem;
  transform: translateX(-50%);
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 0.5rem;
  color: var(--faint);
  font-family: var(--f-serif);
  font-style: italic;
  font-size: 0.95rem;
}
.t3-scroll-cue:hover { color: var(--text-soft); }
.t3-scroll-cue i {
  width: 1px;
  height: 2.6rem;
  background: linear-gradient(var(--faint), transparent);
  overflow: hidden;
  position: relative;
}
.t3-scroll-cue i::after {
  content: "";
  position: absolute;
  inset: 0;
  background: linear-gradient(var(--foil-2), transparent);
  transform: translateY(-100%);
  animation: t3-cue 2.4s var(--ease) infinite;
}
@keyframes t3-cue { 55% { transform: translateY(100%); } 100% { transform: translateY(100%); } }

/* ============================================================================
   6. THE TICKET (hero object)
   ========================================================================= */

.t3-hero-stage {
  display: flex;
  justify-content: center;
  perspective: 1400px;
}

/* --mx / --my (-0.5 … 0.5) are set by script from the pointer; everything below
   derives from them, so one JS write moves the card, the glare and the chips. */
.t3-t3d {
  position: relative;
  width: min(30rem, 100%);
  animation: t3-bob 7s ease-in-out infinite;
}
@keyframes t3-bob { 50% { transform: translateY(-12px); } }

.t3-t3d-card {
  position: relative;
  display: flex;
  background: linear-gradient(160deg, #1c1832, #120f22 60%, #16112a);
  border: 1px solid rgba(232, 195, 122, 0.28);
  border-radius: var(--r-lg);
  box-shadow: var(--shadow-card), 0 0 80px -30px rgba(124, 92, 255, 0.5);
  rotate: -4deg;
  transform: rotateX(calc(var(--my, 0) * -9deg)) rotateY(calc(var(--mx, 0) * 11deg));
  transform-style: preserve-3d;
  will-change: transform;
  overflow: hidden;
}

.t3-t3d-main { flex: 1 1 auto; min-width: 0; position: relative; }

.t3-t3d-art { position: relative; aspect-ratio: 16 / 9.4; overflow: hidden; }
.t3-t3d-art img {
  width: 100%; height: 100%;
  object-fit: cover;
  filter: saturate(0.85) contrast(1.05);
}
.t3-t3d-art::after {
  content: "";
  position: absolute;
  inset: 0;
  background: linear-gradient(180deg, rgba(8, 7, 15, 0.1), rgba(18, 15, 34, 0.85) 92%);
}
.t3-t3d-cat {
  position: absolute;
  top: 0.9rem; left: 1.1rem;
  z-index: 1;
  font-family: var(--f-display);
  font-size: 0.68rem;
  font-weight: 600;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: var(--foil-1);
  background: rgba(8, 7, 15, 0.55);
  border: 1px solid rgba(232, 195, 122, 0.35);
  border-radius: var(--r-full);
  padding: 0.35em 0.9em;
  backdrop-filter: blur(6px);
}

.t3-t3d-body {
  padding: 1.1rem 1.3rem 1.2rem;
  display: grid;
  gap: 0.45rem;
}
.t3-t3d-kicker {
  font-family: var(--f-serif);
  font-style: italic;
  color: var(--muted);
  font-size: 0.85rem;
}
.t3-t3d-name {
  font-family: var(--f-display);
  font-size: 1.45rem;
  font-weight: 720;
  letter-spacing: -0.02em;
  line-height: 1.05;
}
.t3-t3d-meta { font-size: 0.8rem; color: var(--text-soft); line-height: 1.5; }
.t3-t3d-row {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-top: 0.35rem;
  padding-top: 0.7rem;
  border-top: 1px dashed var(--line-strong);
  font-family: var(--f-display);
  font-size: 0.72rem;
  font-weight: 600;
  letter-spacing: 0.18em;
  text-transform: uppercase;
}
.t3-t3d-admit { color: var(--foil-2); }
.t3-t3d-seat { color: var(--muted); }

/* The holographic strip along the main panel's left edge. Its colour position is
   driven by the same pointer variables as the tilt, so it "catches the light". */
.t3-t3d-foil {
  position: absolute;
  inset: 0 auto 0 0;
  width: 7px;
  background: linear-gradient(
    180deg,
    var(--foil-1),
    #b98cff calc(30% + var(--my, 0) * 40%),
    var(--foil-2) calc(55% + var(--my, 0) * 40%),
    #8fd8ff calc(78% + var(--my, 0) * 40%),
    var(--foil-3));
}

/* Perforation between main and stub: dashed rule + punched notches. */
.t3-t3d-perf {
  flex: none;
  width: 0;
  border-left: 2px dashed rgba(240, 236, 255, 0.22);
  position: relative;
  margin-block: 0;
}
.t3-t3d-perf::before, .t3-t3d-perf::after {
  content: "";
  position: absolute;
  left: 50%;
  width: 22px; height: 22px;
  border-radius: 50%;
  background: var(--ink-0);
  transform: translateX(-50%);
  box-shadow: inset 0 0 0 1px rgba(232, 195, 122, 0.2);
}
.t3-t3d-perf::before { top: -12px; }
.t3-t3d-perf::after { bottom: -12px; }

.t3-t3d-stub {
  flex: 0 0 6.4rem;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 0.9rem;
  padding: 1rem 0.8rem;
  background: rgba(232, 195, 122, 0.05);
}
.t3-qr { width: 3.4rem; height: 3.4rem; color: var(--foil-1); opacity: 0.9; }
.t3-t3d-code {
  width: 3.6rem;
  height: 1.5rem;
  background:
    repeating-linear-gradient(90deg,
      currentColor 0 2px, transparent 2px 4px,
      currentColor 4px 5px, transparent 5px 9px,
      currentColor 9px 12px, transparent 12px 14px);
  color: var(--foil-1);
  opacity: 0.75;
}
.t3-t3d-stubtxt {
  font-family: var(--f-display);
  font-size: 0.62rem;
  font-weight: 600;
  letter-spacing: 0.22em;
  color: var(--muted);
  writing-mode: vertical-rl;
}

/* Specular glare following the pointer (soft-light keeps the art underneath). */
.t3-t3d-glare {
  position: absolute;
  inset: -20%;
  pointer-events: none;
  background: radial-gradient(
    34% 42% at calc(50% + var(--mx, 0) * 80%) calc(46% + var(--my, 0) * 80%),
    rgba(255, 249, 230, 0.28), transparent 70%);
  mix-blend-mode: soft-light;
}

/* Floating claim chips, drifting slightly against the tilt for depth. */
.t3-t3d-chip {
  position: absolute;
  display: inline-flex;
  align-items: center;
  gap: 0.5em;
  padding: 0.5em 1em;
  background: rgba(19, 16, 35, 0.82);
  border: 1px solid var(--line-strong);
  border-radius: var(--r-full);
  font-family: var(--f-display);
  font-size: 0.75rem;
  font-weight: 600;
  color: var(--text-soft);
  backdrop-filter: blur(8px);
  box-shadow: var(--shadow-card);
  transform: translate3d(calc(var(--mx, 0) * -18px), calc(var(--my, 0) * -14px), 0);
  will-change: transform;
}
.t3-t3d-chip svg { width: 1.1em; height: 1.1em; color: var(--foil-2); }
.t3-t3d-chip.is-a { top: -1.2rem; right: -0.6rem; }
.t3-t3d-chip.is-b {
  bottom: -1rem; left: -1.2rem;
  transform: translate3d(calc(var(--mx, 0) * 14px), calc(var(--my, 0) * 12px), 0);
}

.t3-t3d-shadow {
  position: absolute;
  inset: auto 8% -2.6rem;
  height: 2.4rem;
  border-radius: 50%;
  background: radial-gradient(50% 100% at 50% 50%, rgba(2, 1, 8, 0.7), transparent 70%);
  filter: blur(6px);
  z-index: -1;
}

/* ============================================================================
   7. TICKER
   ========================================================================= */

.t3-ticker {
  position: relative;
  border-block: 1px solid var(--line);
  padding-block: 1.1rem;
  overflow: hidden;
  background: var(--ink-1);
}
.t3-ticker-track {
  display: flex;
  width: max-content;
  animation: t3-drift 46s linear infinite;
}
.t3-ticker:hover .t3-ticker-track,
.t3-ticker:focus-within .t3-ticker-track,
.t3-ticker.is-paused .t3-ticker-track { animation-play-state: paused; }
@keyframes t3-drift { to { transform: translateX(-50%); } }

.t3-ticker-set { display: flex; align-items: center; flex: none; }
.t3-ticker-set a {
  font-family: var(--f-display);
  font-size: clamp(1.05rem, 0.9rem + 0.8vw, 1.5rem);
  font-weight: 550;
  letter-spacing: 0.02em;
  color: var(--faint);
  padding-inline: 1.6rem;
  white-space: nowrap;
}
.t3-ticker-set a:hover { color: var(--foil-1); }
.t3-ticker-sep { color: rgba(232, 195, 122, 0.45); font-size: 0.9rem; }

.t3-ticker-pause {
  position: absolute;
  right: 0.9rem;
  top: 50%;
  transform: translateY(-50%);
  z-index: 2;
  width: 2.2rem; height: 2.2rem;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  background: rgba(8, 7, 15, 0.8);
  border: 1px solid var(--line-strong);
  border-radius: 50%;
  color: var(--text-soft);
  cursor: pointer;
}
.t3-ticker-pause svg { width: 0.9rem; height: 0.9rem; }
.t3-ticker-pause .t3-tp-play, .t3-ticker.is-paused .t3-tp-pause { display: none; }
.t3-ticker.is-paused .t3-tp-play { display: block; }

/* ============================================================================
   8. SCENES
   ========================================================================= */

.t3-scenes {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  grid-auto-rows: clamp(11rem, 16vw, 15rem);
  gap: var(--s-3);
}

.t3-scene {
  position: relative;
  border-radius: var(--r-md);
  overflow: hidden;
  display: block;
  transform: translateZ(0);
  transition: transform var(--fast), box-shadow var(--fast);
}
.t3-scene.is-wide { grid-column: span 2; }
.t3-scene:hover { transform: translateY(-4px); box-shadow: var(--shadow-card); }

.t3-scene img {
  position: absolute;
  inset: 0;
  width: 100%; height: 100%;
  object-fit: cover;
  /* The lights come on when you choose a scene: desaturated until hover/focus. */
  filter: saturate(0.35) brightness(0.8);
  transform: scale(1.01);
  transition: filter var(--slow), transform var(--slow);
}
.t3-scene:hover img, .t3-scene:focus-visible img {
  filter: saturate(1.05) brightness(1);
  transform: scale(1.06);
}

.t3-scene-scrim {
  position: absolute;
  inset: 0;
  background: linear-gradient(200deg, rgba(8, 7, 15, 0.05) 30%, rgba(8, 7, 15, 0.88));
}

.t3-scene-txt {
  position: absolute;
  left: 1.1rem; right: 3rem; bottom: 1rem;
  display: grid;
  gap: 0.15rem;
}
.t3-scene-txt b {
  font-family: var(--f-display);
  font-size: 1.3rem;
  font-weight: 700;
  letter-spacing: -0.02em;
  color: var(--text);
}
.t3-scene-txt span {
  font-family: var(--f-serif);
  font-style: italic;
  font-size: 0.92rem;
  color: var(--text-soft);
  opacity: 0;
  transform: translateY(6px);
  transition: opacity var(--fast), transform var(--fast);
}
.t3-scene:hover .t3-scene-txt span,
.t3-scene:focus-visible .t3-scene-txt span { opacity: 1; transform: none; }

.t3-scene-go {
  position: absolute;
  right: 1rem; bottom: 1rem;
  z-index: 2;
  display: inline-flex;
  align-items: center;
  gap: 0.45em;
  padding: 0.4em 0.95em;
  border-radius: var(--r-full);
  background: rgba(19, 16, 35, 0.7);
  border: 1px solid rgba(244, 242, 255, 0.22);
  backdrop-filter: blur(6px);
  color: var(--text);
  font-family: var(--f-display);
  font-size: 0.72rem;
  font-weight: 600;
  letter-spacing: 0.08em;
  opacity: 0;
  transform: translateY(6px);
  transition: opacity var(--fast), transform var(--fast);
}
.t3-scene-go svg { width: 0.9rem; height: 0.9rem; }
.t3-scene:hover .t3-scene-go, .t3-scene:focus-visible .t3-scene-go { opacity: 1; transform: none; }

/* A soft highlight follows the cursor across the glass (engine feeds --hx/--hy). */
.t3-scene::before {
  content: "";
  position: absolute;
  inset: 0;
  z-index: 1;
  pointer-events: none;
  background: radial-gradient(200px circle at var(--hx, 50%) var(--hy, 50%),
              rgba(255, 246, 222, 0.13), transparent 65%);
  opacity: 0;
  transition: opacity 250ms var(--ease);
}
.t3-scene:hover::before { opacity: 1; }
.t3-scene:hover { border-color: rgba(244, 242, 255, 0.3); }
.t3-scene-txt { z-index: 2; transition: transform var(--fast); }
.t3-scene:hover .t3-scene-txt { transform: translateY(-3px); }

/* ============================================================================
   8b. THE COLLAGE ACT — sticky stage + scroll-scrubbed card choreography
   ============================================================================
   The runway is tall; the stage inside is sticky and viewport-high. The engine
   in welcome-v3.js drives every card with transform-only updates through the
   phases: float → gather → stack → focus → release. Script-off or reduced
   motion: the runway collapses to a normal static section.
   ========================================================================= */

.t3-collage { position: relative; padding-block: var(--s-10); }

html.v3-js .t3-collage {
  height: 330vh;
  padding-block: 0;
}

.t3-cstage { position: relative; }
html.v3-js .t3-cstage {
  position: sticky;
  top: 0;
  height: 100svh;
  display: flex;
  flex-direction: column;
  justify-content: center;
  overflow: clip;
  padding-top: var(--nav-h);
}
html.v3-3d .t3-cstage {
  background: linear-gradient(180deg, rgba(8, 7, 15, 0.26), rgba(8, 7, 15, 0.14));
}

/* Focus-beat backdrop: the room darkens around the stack (above the heading,
   below the cards). Driven by --focus from the engine. */
.t3-cstage::after {
  content: "";
  position: absolute;
  inset: 0;
  z-index: 2;
  pointer-events: none;
  background: radial-gradient(60% 55% at 50% 55%, rgba(4, 3, 10, 0.25), rgba(4, 3, 10, 0.8));
  opacity: var(--focus, 0);
}

.t3-cwrap { position: relative; width: min(var(--wrap), 100% - 3rem); margin-inline: auto; }

/* Heading dims and softens while the stack takes focus (--hdim). The dim sits
   on the children so it can never fight the .v3-rv reveal on the block. */
.t3-chead { margin-bottom: var(--s-6); }
.t3-chead > * {
  opacity: calc(1 - var(--hdim, 0) * 0.7);
  filter: blur(calc(var(--hdim, 0) * 2.5px));
}
html.v3-js .t3-chead .t3-h2 { font-size: clamp(1.9rem, 1.2rem + 2.4vw, 3rem); }

/* The persistent brand chip: identity never leaves the story. */
.t3-cbrand {
  position: absolute;
  top: calc(var(--nav-h) + 0.4rem);
  left: 50%;
  transform: translate(-50%, -6px);
  z-index: 1;
  margin: 0;
  display: flex;
  align-items: baseline;
  gap: 0.7em;
  opacity: 0;
  transition: opacity 500ms var(--ease), transform 500ms var(--ease);
  white-space: nowrap;
}
.t3-cstage.is-live .t3-cbrand { opacity: calc(1 - var(--hdim, 0) * 0.5); transform: translate(-50%, 0); }
.t3-cbrand b {
  font-family: var(--f-display);
  font-size: 0.78rem;
  font-weight: 700;
  letter-spacing: 0.3em;
  text-transform: uppercase;
  color: var(--text-soft);
}
.t3-cbrand b span { color: var(--foil-2); }
.t3-cbrand i {
  font-family: var(--f-serif);
  font-style: italic;
  font-size: 0.85rem;
  color: var(--muted);
}

/* Cards live above the focus backdrop; a little perspective for the tilt. */
html.v3-js .t3-collage .t3-scenes {
  position: relative;
  z-index: 3;
  perspective: 1100px;
  grid-auto-rows: clamp(7.5rem, 15.5vh, 13rem);
}
html.v3-js .t3-cstage.is-live .t3-scene { will-change: transform, opacity; }
.t3-scene:focus-visible { z-index: 60 !important; }

/* Focus caption under the stack. */
.t3-clabel {
  position: absolute;
  left: 50%;
  bottom: 16%;
  transform: translateX(-50%) translateY(10px);
  z-index: 4;
  margin: 0;
  font-family: var(--f-display);
  font-size: var(--t-xs);
  font-weight: 600;
  letter-spacing: 0.26em;
  text-transform: uppercase;
  color: var(--foil-1);
  text-shadow: 0 2px 18px rgba(4, 3, 10, 0.9);
  opacity: var(--flabel, 0);
  white-space: nowrap;
}

/* The scroll story cue. */
.t3-ccue {
  position: absolute;
  left: 50%;
  bottom: 1.1rem;
  transform: translateX(-50%);
  z-index: 4;
  display: none;
  flex-direction: column;
  align-items: center;
  gap: 0.5rem;
}
html.v3-js .t3-ccue { display: flex; }
.t3-ccue-words {
  display: grid;
  text-align: center;
}
.t3-ccue-words span {
  grid-area: 1 / 1;
  font-family: var(--f-display);
  font-size: 0.66rem;
  font-weight: 600;
  letter-spacing: 0.24em;
  text-transform: uppercase;
  color: var(--faint);
  opacity: 0;
  transition: opacity 400ms var(--ease);
}
.t3-ccue-words span.is-on { opacity: 1; }
.t3-ccue i {
  display: block;
  width: 86px;
  height: 2px;
  background: rgba(240, 236, 255, 0.14);
  overflow: hidden;
}
.t3-ccue i b {
  display: block;
  height: 100%;
  background: var(--grad-foil);
  transform-origin: left;
  transform: scaleX(var(--cp, 0));
}

/* ============================================================================
   9. HEADLINER
   ========================================================================= */

.t3-headliner {
  position: relative;
  min-height: min(46rem, 92svh);
  display: flex;
  align-items: center;
  overflow: clip;
  padding-block: var(--s-10);
}
.t3-headliner-bg { position: absolute; inset: 0; }
.t3-headliner-bg img {
  width: 100%; height: 118%;
  object-fit: cover;
  will-change: transform;
}
.t3-headliner-bg::after {
  content: "";
  position: absolute;
  inset: 0;
  background:
    linear-gradient(90deg, rgba(8, 7, 15, 0.94) 0%, rgba(8, 7, 15, 0.72) 42%, rgba(8, 7, 15, 0.25) 75%, rgba(8, 7, 15, 0.45)),
    linear-gradient(180deg, var(--ink-0), transparent 18%, transparent 82%, var(--ink-0));
}

.t3-headliner-copy { position: relative; max-width: 42rem; }
.t3-headliner-copy .t3-lede { font-family: var(--f-serif); font-style: italic; }

.t3-meta-row {
  display: flex;
  flex-wrap: wrap;
  gap: var(--s-3) var(--s-6);
  color: var(--text-soft);
  font-size: var(--t-sm);
  margin-bottom: var(--s-6);
}
.t3-meta-row span { display: inline-flex; align-items: center; gap: 0.5em; }
.t3-meta-row svg { width: 1.1em; height: 1.1em; color: var(--iris-300); }

.t3-meter-wrap { max-width: 26rem; margin-bottom: var(--s-6); }
.t3-meter-line {
  display: flex;
  justify-content: space-between;
  align-items: baseline;
  font-size: var(--t-sm);
  margin-bottom: 0.5rem;
}
.t3-meter-line b { display: inline-flex; align-items: center; gap: 0.4em; color: var(--foil-2); }
.t3-meter-line svg { width: 1em; height: 1em; }
.t3-meter-line span { color: var(--muted); }
.t3-meter {
  height: 6px;
  border-radius: var(--r-full);
  background: rgba(240, 236, 255, 0.12);
  overflow: hidden;
}
.t3-meter i {
  display: block;
  height: 100%;
  width: var(--w, 0%);
  border-radius: inherit;
  background: var(--grad-foil);
}
/* The fill draws itself when the panel reveals. */
html.v3-js .v3-rv:not(.is-in) .t3-meter i { width: 0; }
.t3-meter i { transition: width 1200ms 300ms var(--ease); }

.t3-headliner-cta { display: flex; align-items: center; flex-wrap: wrap; gap: var(--s-5); }

.t3-price {
  font-family: var(--f-display);
  font-weight: 700;
  font-size: 1.05rem;
  color: var(--text);
  white-space: nowrap;
}
.t3-price small {
  font-weight: 500;
  font-size: 0.78em;
  color: var(--muted);
  margin-right: 0.15em;
}
.t3-price.is-big { font-size: 1.3rem; }
.t3-price.is-plain { color: var(--text-soft); font-weight: 600; }

/* ============================================================================
   10. WEEKEND RAIL — ticket cards
   ========================================================================= */

.t3-rail-nav { display: flex; align-items: center; gap: var(--s-5); }
.t3-rail-nav > a {
  font-family: var(--f-display);
  font-weight: 600;
  font-size: var(--t-sm);
  display: inline-flex;
  align-items: center;
  gap: 0.4em;
}
.t3-rail-nav > span { display: inline-flex; gap: var(--s-2); }

.t3-rail-btn {
  width: 2.7rem; height: 2.7rem;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  background: var(--glass);
  border: 1px solid var(--line-strong);
  border-radius: 50%;
  color: var(--text);
  cursor: pointer;
  transition: background-color var(--fast), border-color var(--fast), opacity var(--fast);
}
.t3-rail-btn:hover:not(:disabled) { background: var(--iris-500); border-color: var(--iris-500); }
.t3-rail-btn:disabled { opacity: 0.35; cursor: default; }
.t3-rail-btn svg { width: 1.1rem; height: 1.1rem; }

.t3-rail { overflow: hidden; }
.t3-rail-track {
  display: flex;
  gap: var(--s-4);
  overflow-x: auto;
  scroll-snap-type: x mandatory;
  scrollbar-width: none;
  padding-block: var(--s-2) var(--s-5);
  /* The filter swap (TDR-035): the old cards ease out, the filtered set eases in. */
  transition: opacity 220ms var(--ease), transform 220ms var(--ease);
}

/* A big catalogue stacks two rows: columns flow sideways, so the native horizontal
   scroll, snap and the pager all keep working — each "step" is one 2-card column. */
.t3-rail-track.is-2row {
  display: grid;
  grid-auto-flow: column;
  grid-template-rows: 1fr 1fr;
  grid-auto-columns: 15rem;
}
.t3-rail-track::-webkit-scrollbar { display: none; }
.t3-rail-track.is-swap { opacity: 0; transform: translateX(14px); }

/* A filtered-out ticket leaves the row entirely — flex on the class would
   otherwise beat the hidden attribute's display:none. */
.t3-tik[hidden] { display: none; }

/* ── The rail's controls: filter chips, gutter arrows, dots, status (TDR-035) ──
   All of it is script-driven bookkeeping over the native scroll row, so none of
   it renders until html.v3-js lands — script-off keeps the plain swipeable rail. */
html:not(.v3-js) .t3-cats,
html:not(.v3-js) .t3-filterbar,
html:not(.v3-js) .t3-rail-foot,
html:not(.v3-js) .t3-rail-side { display: none; }

/* ── The filter bank: search + category chips + place chips as ONE wrapping band
   (two lines at most on desktop). The strips dissolve into it (display:contents),
   so every control flows inline and the bar owns the spacing. ── */
.t3-filterbar {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: var(--s-2);
  margin-bottom: var(--s-3);
}
.t3-filterbar .t3-cats {
  display: contents;
}
.t3-filterbar .t3-railsearch { flex: 1 1 13rem; max-width: 16rem; margin: 0; }
/* Compact chips inside the bar — the band must fit beside the search, not under it. */
.t3-filterbar .t3-cat { padding: 0.34rem 0.72rem; font-size: 0.72rem; }
.t3-filterbar .t3-railsearch-box { padding: 0.4rem 0.8rem; }

.t3-cats {
  display: flex;
  gap: var(--s-2);
  overflow-x: auto;
  scrollbar-width: none;
  padding: var(--s-2) 0 var(--s-3);
  margin-bottom: var(--s-2);
}
.t3-cats::-webkit-scrollbar { display: none; }

.t3-cat {
  flex: 0 0 auto;
  display: inline-flex;
  align-items: center;
  gap: 0.5em;
  padding: 0.48rem 0.95rem;
  background: var(--glass);
  border: 1px solid var(--line-strong);
  border-radius: 999px;
  color: var(--text);
  font-family: var(--f-display);
  font-weight: 600;
  font-size: var(--t-sm);
  white-space: nowrap;
  cursor: pointer;
  transition: background-color var(--fast), border-color var(--fast), color var(--fast);
}
/* Each category keeps V2's established hue as a small dot, so selection is
   never carried by colour alone — the filled state and aria-pressed do that. */
.t3-cat::before {
  content: "";
  flex: 0 0 auto;
  width: 0.45rem; height: 0.45rem;
  border-radius: 50%;
  background: hsl(var(--cat-hue, 262) 85% 72%);
}
.t3-cat[data-cat="all"]::before { background: var(--grad-foil); }
.t3-cat:hover { border-color: hsl(var(--cat-hue, 262) 70% 68% / 0.65); }
.t3-cat.is-on {
  background: var(--iris-500);
  border-color: var(--iris-400);
  color: #fff;
}
.t3-cat-n {
  font-size: 0.72em;
  line-height: 1;
  padding: 0.28em 0.55em;
  border-radius: 999px;
  background: rgba(240, 236, 255, 0.14);
}
.t3-cat.is-on .t3-cat-n { background: rgba(255, 255, 255, 0.24); }

/* The place strip (TDR-038): the same chip language, stacked tight under the
   categories so the two read as one filter bank. Its chips carry a pin icon —
   the hue dot alone would make a state look like just another category. */
.t3-places { padding-top: 0; margin-top: calc(var(--s-2) * -1); }
.t3-places .t3-cat::before { display: none; }
.t3-cat-ic { width: 0.9em; height: 0.9em; flex: 0 0 auto; }

/* ── The rail search: the chips' glass language in a compact box, with the
   suggestion list floating under it. A third facet beside the strips, so it
   hides without the script exactly as they do. ── */
.t3-railsearch { position: relative; max-width: 26rem; margin-bottom: var(--s-2); }
.t3-railsearch-box {
  display: flex;
  align-items: center;
  gap: 0.6rem;
  padding: 0.55rem 0.95rem;
  background: var(--glass);
  border: 1px solid var(--line-strong);
  border-radius: 999px;
  transition: border-color var(--fast);
}
.t3-railsearch-box:focus-within { border-color: var(--iris-400); }
.t3-railsearch-ic { width: 1rem; height: 1rem; flex: none; color: var(--muted); }
.t3-railsearch input {
  flex: 1 1 auto;
  min-width: 0;
  background: none;
  border: 0;
  outline: 0;
  color: var(--text);
  font: inherit;
  font-size: var(--t-sm);
}
.t3-railsearch input::placeholder { color: var(--muted); }

/* The explicit display below would otherwise beat the hidden attribute's
   display:none — without this, an empty suggestion list renders as a bare bar. */
.t3-suggest[hidden] { display: none; }
.t3-suggest {
  position: absolute;
  z-index: 30;
  min-width: 18rem;
  top: calc(100% + 0.4rem);
  left: 0;
  right: 0;
  display: grid;
  padding: 0.35rem;
  background: linear-gradient(170deg, rgba(30, 25, 54, 0.92), rgba(19, 16, 35, 0.95));
  backdrop-filter: blur(14px) saturate(1.15);
  -webkit-backdrop-filter: blur(14px) saturate(1.15);
  border: 1px solid rgba(244, 242, 255, 0.14);
  border-radius: var(--r-md);
  box-shadow: 0 18px 40px -18px rgba(2, 1, 8, 0.9);
}
.t3-suggest-opt {
  display: grid;
  gap: 0.1rem;
  text-align: left;
  padding: 0.5rem 0.7rem;
  border: 0;
  background: none;
  border-radius: var(--r-sm);
  color: var(--text);
  cursor: pointer;
}
.t3-suggest-opt:hover,
.t3-suggest-opt:focus-visible { background: rgba(240, 236, 255, 0.1); }
.t3-suggest-opt b { font-family: var(--f-display); font-size: var(--t-sm); }
.t3-suggest-opt small { color: var(--muted); font-size: 0.75rem; }

/* Two ANDed facets can leave nothing to show; the note says so in words. */
.t3-rail-empty {
  margin: 0 0 var(--s-4);
  padding: var(--s-4) var(--s-5);
  background: var(--glass);
  border: 1px solid var(--line-strong);
  border-radius: var(--r-md);
  font-family: var(--f-display);
  font-weight: 600;
  font-size: var(--t-sm);
}
.t3-rail-empty[hidden] { display: none; }

.t3-rail-wrap { position: relative; }

/* The pager arrows live in the page gutters, vertically centred on the cards.
   When the viewport is narrower than the wrap plus gutters they tuck inside
   the edge (the glass keeps them legible over a card). */
.t3-rail-side {
  position: absolute;
  top: 50%;
  transform: translateY(-50%);
  z-index: 5;
  width: 3.3rem; height: 3.3rem;
  backdrop-filter: blur(10px);
  -webkit-backdrop-filter: blur(10px);
}
.t3-rail-side.is-left { left: max(var(--s-3), calc((100% - var(--wrap)) / 2 - 4.2rem)); }
.t3-rail-side.is-right { right: max(var(--s-3), calc((100% - var(--wrap)) / 2 - 4.2rem)); }

.t3-rail-foot {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--s-4);
  position: relative;
}
/* Reference layout: status pill at the left, the dots dead centre. */
.t3-rail-foot .t3-rail-dots {
  position: absolute;
  left: 50%;
  transform: translateX(-50%);
}
.t3-rail-status {
  font-family: var(--f-display);
  font-weight: 600;
  font-size: var(--t-sm);
  opacity: 0.78;
  background: var(--glass);
  border: 1px solid var(--line-strong);
  border-radius: 999px;
  padding: 0.35rem 0.95rem;
  white-space: nowrap;
}
.t3-rail-dots { display: inline-flex; align-items: center; gap: 0.45rem; }
.t3-rail-dot {
  width: 0.5rem; height: 0.5rem;
  padding: 0;
  border: 0;
  border-radius: 999px;
  background: rgba(240, 236, 255, 0.22);
  cursor: pointer;
  transition: width var(--fast), background-color var(--fast);
}
.t3-rail-dot:hover { background: rgba(240, 236, 255, 0.4); }
.t3-rail-dot.is-on { width: 1.35rem; background: var(--iris-400); }

@media (max-width: 760px) {
  /* Touch widths: the swipe is the pager, the dots say where you are. */
  .t3-rail-side { display: none; }
  .t3-rail-foot { flex-direction: column; align-items: flex-start; gap: var(--s-2); }
  .t3-rail-foot .t3-rail-dots { position: static; transform: none; align-self: center; }
}

@media (prefers-reduced-motion: reduce) {
  .t3-rail-track { transition: none; }
}

/* Ticket cards as glass objects: translucent over the hall, thin light borders,
   an inner top highlight, pointer tilt (--rx/--ry from script) and a specular
   sweep on hover. Luxury glass, not neon. */
.t3-tik {
  flex: 0 0 15rem;
  scroll-snap-align: start;
  display: flex;
  flex-direction: column;
  position: relative;
  background: linear-gradient(170deg, rgba(30, 25, 54, 0.58), rgba(19, 16, 35, 0.66) 70%);
  backdrop-filter: blur(14px) saturate(1.15);
  -webkit-backdrop-filter: blur(14px) saturate(1.15);
  border: 1px solid rgba(244, 242, 255, 0.14);
  border-radius: var(--r-md);
  overflow: hidden;
  box-shadow:
    inset 0 1px 0 rgba(255, 255, 255, 0.12),
    0 10px 30px -14px rgba(2, 1, 8, 0.8);
  transform: perspective(900px)
             rotateX(var(--rx, 0deg)) rotateY(var(--ry, 0deg))
             translateY(var(--ty, 0px));
  transition: border-color var(--fast), box-shadow var(--fast);
}
/* The transform vars ease when the pointer leaves. */
.t3-tik:not(:hover) { transition: border-color var(--fast), box-shadow var(--fast), transform 500ms var(--ease); }
.t3-tik:hover {
  --ty: -6px;
  border-color: rgba(232, 195, 122, 0.38);
  box-shadow:
    inset 0 1px 0 rgba(255, 255, 255, 0.16),
    var(--shadow-card);
}
.t3-tik:hover .t3-price { color: var(--foil-1); }

/* The reflection: a light band crosses the glass on hover. */
.t3-tik::after {
  content: "";
  position: absolute;
  inset: -30% auto;
  width: 30%;
  transform: translateX(-320%) skewX(-20deg);
  background: linear-gradient(90deg, transparent, rgba(255, 252, 240, 0.13), transparent);
  transition: transform 900ms var(--ease);
  pointer-events: none;
  z-index: 1;
}
.t3-tik:hover::after { transform: translateX(520%) skewX(-20deg); }

.t3-tik-media { position: relative; aspect-ratio: 16 / 9; overflow: hidden; }
.t3-tik-media img {
  width: 100%; height: 100%;
  object-fit: cover;
  transition: transform var(--slow);
}
.t3-tik:hover .t3-tik-media img { transform: scale(1.05); }
.t3-tik-media::after {
  content: "";
  position: absolute;
  inset: 0;
  background: linear-gradient(180deg, rgba(8, 7, 15, 0.05) 55%, rgba(19, 16, 35, 0.9));
}

/* A live event with no uploaded photograph (TDR-039): the brand, ghosted on the
   category's hue — honest where a borrowed stock photo was not. */
.t3-tik-media.is-art {
  display: flex;
  align-items: center;
  justify-content: center;
  background:
    radial-gradient(120% 95% at 18% 0%, hsl(var(--cat-hue, 262) 55% 32% / 0.85), transparent 62%),
    linear-gradient(160deg, hsl(var(--cat-hue, 262) 45% 19%), hsl(var(--cat-hue, 262) 55% 9%));
}
.t3-tik-art {
  width: 3.4rem; height: 3.4rem;
  opacity: 0.4;
  transition: opacity var(--fast), transform var(--slow);
}
.t3-tik-art svg { width: 100%; height: 100%; }
.t3-tik:hover .t3-tik-art { opacity: 0.65; transform: scale(1.06); }

.t3-tik-cat {
  position: absolute;
  left: 0.85rem; bottom: 0.7rem;
  z-index: 1;
  font-family: var(--f-display);
  font-size: 0.66rem;
  font-weight: 600;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: var(--foil-1);
}
.t3-tik-flash {
  position: absolute;
  top: 0.75rem; left: 0.85rem;
  z-index: 1;
  font-family: var(--f-display);
  font-size: 0.66rem;
  font-weight: 700;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--foil-ink);
  background: var(--grad-foil);
  border-radius: var(--r-full);
  padding: 0.32em 0.8em;
}

.t3-heart {
  position: absolute;
  top: 0.6rem; right: 0.6rem;
  z-index: 1;
  width: 2.1rem; height: 2.1rem;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  background: rgba(8, 7, 15, 0.55);
  border: 1px solid var(--line-strong);
  border-radius: 50%;
  color: var(--text-soft);
  cursor: pointer;
  backdrop-filter: blur(6px);
  transition: color var(--fast), transform var(--fast), border-color var(--fast);
}
.t3-heart svg { width: 1rem; height: 1rem; }
.t3-heart:hover { transform: scale(1.1); }
.t3-heart[aria-pressed="true"] { color: #ff7ba9; border-color: rgba(255, 123, 169, 0.5); }
.t3-heart[aria-pressed="true"] svg { fill: currentColor; }

.t3-tik-body { padding: 1rem 1.1rem 0.9rem; }
.t3-tik-body h3 { font-size: 1.12rem; font-weight: 700; margin-bottom: 0.5rem; }
.t3-tik-body h3 a { color: var(--text); }
.t3-tik-body h3 a:hover { color: var(--iris-300); }

/* THE WHOLE TICKET IS THE LINK (TDR-036). With live events the card's foot reads
   "See details" when no tier is on sale — a label people try to click. Rather than
   a second anchor, the title's own link stretches over the card, so there is one
   destination, one focus stop, and no dead-feeling glass. The heart lifts above it
   and stays independently clickable. */
.t3-tik-body h3 a::after {
  content: "";
  position: absolute;
  inset: 0;
  z-index: 2;
}
.t3-heart { z-index: 3; }
.t3-tik { cursor: pointer; }
.t3-tik-meta {
  display: grid;
  gap: 0.3rem;
  margin: 0;
  font-size: 0.82rem;
  color: var(--muted);
}
.t3-tik-meta span { display: inline-flex; align-items: center; gap: 0.5em; }
.t3-tik-meta svg { width: 1em; height: 1em; flex: none; }

/* Perforation: the card is a ticket. Notches punch through to the page ink.
   (On glass cards the notches read as darker glass rather than holes — the
   translucency makes a true punch-through impossible without masks.) */
.t3-tik-perf {
  margin-top: auto;
  border-top: 2px dashed rgba(240, 236, 255, 0.18);
  position: relative;
}
.t3-tik-perf::before, .t3-tik-perf::after {
  content: "";
  position: absolute;
  top: -10px;
  width: 20px; height: 20px;
  border-radius: 50%;
  background: rgba(8, 7, 15, 0.85);
}
.t3-tik-perf::before { left: -11px; }
.t3-tik-perf::after { right: -11px; }

.t3-tik-foot {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--s-4);
  padding: 0.8rem 1.1rem 1rem;
}
.t3-tik-code {
  width: 5.2rem;
  height: 1.15rem;
  background:
    repeating-linear-gradient(90deg,
      currentColor 0 2px, transparent 2px 4px,
      currentColor 4px 5px, transparent 5px 9px,
      currentColor 9px 12px, transparent 12px 14px);
  color: rgba(240, 236, 255, 0.3);
}

/* ============================================================================
   10b. LIVE RIGHT NOW
   ========================================================================= */

.t3-kicker.is-live { color: #ff8f8f; }

.t3-live-dot {
  display: inline-block;
  width: 0.55em; height: 0.55em;
  border-radius: 50%;
  background: #ff5f5f;
  box-shadow: 0 0 10px 2px rgba(255, 95, 95, 0.55);
  animation: t3-live-pulse 1.6s ease-in-out infinite;
}
@keyframes t3-live-pulse { 50% { opacity: 0.4; transform: scale(0.8); } }

.t3-live-grid {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: var(--s-4);
}

/* Same glass language as the ticket cards, in a compact row form. */
.t3-livec {
  display: flex;
  align-items: center;
  gap: var(--s-4);
  padding: var(--s-4);
  position: relative;
  overflow: hidden;
  background: linear-gradient(170deg, rgba(30, 25, 54, 0.58), rgba(19, 16, 35, 0.66));
  backdrop-filter: blur(14px) saturate(1.15);
  -webkit-backdrop-filter: blur(14px) saturate(1.15);
  border: 1px solid rgba(244, 242, 255, 0.14);
  border-radius: var(--r-md);
  box-shadow:
    inset 0 1px 0 rgba(255, 255, 255, 0.12),
    0 10px 30px -14px rgba(2, 1, 8, 0.8);
  color: var(--text);
  transform: perspective(700px)
             rotateX(var(--rx, 0deg)) rotateY(var(--ry, 0deg))
             translateY(var(--ty, 0px));
  transition: border-color var(--fast), box-shadow var(--fast);
}
.t3-livec:not(:hover) { transition: border-color var(--fast), box-shadow var(--fast), transform 500ms var(--ease); }
.t3-livec:hover {
  --ty: -5px;
  color: var(--text);
  border-color: rgba(232, 195, 122, 0.38);
}
.t3-livec::after {
  content: "";
  position: absolute;
  inset: -30% auto;
  width: 34%;
  transform: translateX(-300%) skewX(-20deg);
  background: linear-gradient(90deg, transparent, rgba(255, 252, 240, 0.12), transparent);
  transition: transform 900ms var(--ease);
  pointer-events: none;
}
.t3-livec:hover::after { transform: translateX(420%) skewX(-20deg); }

.t3-livec-thumb {
  flex: none;
  width: 3.6rem; height: 3.6rem;
  border-radius: var(--r-sm);
  overflow: hidden;
}
.t3-livec-thumb img { width: 100%; height: 100%; object-fit: cover; }

/* The place tiles' state mark: the foil language in letters — a stylised tile,
   never a borrowed skyline photograph (TDR-039 applies to places too). */
.t3-livec-thumb.is-state {
  display: flex;
  align-items: center;
  justify-content: center;
  background:
    radial-gradient(120% 120% at 20% 15%, rgba(232, 195, 122, 0.45), transparent 55%),
    linear-gradient(160deg, hsl(262 60% 38% / 0.85), hsl(285 55% 22% / 0.9));
  border: 1px solid rgba(232, 195, 122, 0.35);
}
.t3-livec-thumb.is-state b {
  font-family: var(--f-display);
  font-weight: 800;
  font-size: 1.05rem;
  letter-spacing: 0.06em;
  color: #f6edd9;
  text-shadow: 0 1px 8px rgba(2, 1, 8, 0.5);
}
.t3-livec-tag.is-place { color: var(--muted); }

.t3-livec-txt { display: grid; gap: 0.15rem; min-width: 0; }
.t3-livec-tag {
  display: inline-flex;
  align-items: center;
  gap: 0.5em;
  font-family: var(--f-display);
  font-size: 0.66rem;
  font-weight: 700;
  letter-spacing: 0.14em;
  color: #ff9d9d;
}
.t3-livec-txt b {
  font-family: var(--f-display);
  font-size: 1rem;
  font-weight: 700;
  letter-spacing: -0.01em;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.t3-livec-txt small { color: var(--muted); font-size: 0.8rem; }

.t3-livec-go {
  margin-left: auto;
  flex: none;
  width: 2rem; height: 2rem;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  border-radius: 50%;
  border: 1px solid var(--line-strong);
  color: var(--text-soft);
  opacity: 0;
  transform: translateX(-6px);
  transition: opacity var(--fast), transform var(--fast);
}
.t3-livec-go svg { width: 0.95rem; height: 0.95rem; }
.t3-livec:hover .t3-livec-go { opacity: 1; transform: none; }

/* ============================================================================
   11. HOW IT WORKS
   ========================================================================= */

.t3-how { background: var(--ink-1); border-block: 1px solid var(--line); }

.t3-steps {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: var(--s-6);
  list-style: none;
  margin: 0; padding: 0;
  counter-reset: none;
  position: relative;
}
/* The journey line behind the steps. */
.t3-steps::before {
  content: "";
  position: absolute;
  top: 2.6rem;
  left: 6%; right: 6%;
  border-top: 2px dashed rgba(124, 92, 255, 0.28);
}

.t3-step {
  position: relative;
  padding: var(--s-6) var(--s-5);
  background: var(--ink-2);
  border: 1px solid var(--line);
  border-radius: var(--r-md);
  transition: transform var(--fast), border-color var(--fast);
}
.t3-step:hover { transform: translateY(-4px); border-color: rgba(124, 92, 255, 0.4); }

.t3-step-n {
  display: block;
  font-family: var(--f-display);
  font-size: 3.6rem;
  font-weight: 800;
  letter-spacing: -0.04em;
  line-height: 1;
  color: transparent;
  -webkit-text-stroke: 1.5px rgba(124, 92, 255, 0.55);
  margin-bottom: var(--s-4);
}
.t3-step-k {
  display: inline-block;
  font-family: var(--f-serif);
  font-style: italic;
  color: var(--foil-2);
  font-size: 1.05rem;
  margin-bottom: var(--s-2);
}
.t3-step h3 { font-size: 1.3rem; margin-bottom: var(--s-2); }
.t3-step p { margin: 0; color: var(--muted); font-size: 0.95rem; }

/* ============================================================================
   12. PAPER ACT — organisers + pricing
   ========================================================================= */

.t3-paper {
  background: var(--paper);
  color: var(--paper-ink);
  padding-block: var(--s-11);
  position: relative;
}
/* Torn-edge transition into the paper act: a row of ticket notches. */
.t3-paper::before {
  content: "";
  position: absolute;
  top: -1px; left: 0; right: 0;
  height: 14px;
  background: radial-gradient(circle 7px at 10px 0, var(--ink-0) 98%, transparent) round;
  background-size: 34px 14px;
}

.t3-paper .t3-kicker { color: var(--iris-600); }
.t3-paper .t3-aside { color: var(--paper-soft); }
.t3-paper :where(a) { color: var(--iris-600); }
.t3-paper :where(a:hover) { color: var(--paper-ink); }
.t3-paper ::selection { background: rgba(106, 72, 230, 0.25); color: var(--paper-ink); }

.t3-org-grid {
  display: grid;
  grid-template-columns: minmax(0, 5fr) minmax(0, 7fr);
  gap: clamp(var(--s-7), 5vw, var(--s-10));
  align-items: start;
}

.t3-org-points { display: grid; gap: var(--s-6); }
.t3-org-point { display: flex; gap: var(--s-4); align-items: flex-start; }
.t3-org-n {
  flex: none;
  width: 2.4rem; height: 2.4rem;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  border: 1.5px solid rgba(106, 72, 230, 0.45);
  border-radius: 50%;
  font-family: var(--f-display);
  font-weight: 700;
  color: var(--iris-600);
}
.t3-org-point h3 { font-size: 1.15rem; margin-bottom: 0.3rem; }
.t3-org-point p { margin: 0; color: var(--paper-soft); font-size: 0.95rem; }
.t3-org-points .v3-btn { justify-self: start; margin-top: var(--s-2); }

.t3-tiers { display: grid; gap: var(--s-4); }
.t3-tiers-flag {
  display: inline-flex;
  align-items: center;
  gap: 0.5em;
  font-size: var(--t-xs);
  font-weight: 600;
  letter-spacing: 0.04em;
  color: var(--paper-soft);
  border: 1px dashed var(--paper-line);
  border-radius: var(--r-full);
  padding: 0.45em 1em;
  justify-self: start;
  margin: 0;
}
.t3-tiers-flag svg { width: 1em; height: 1em; color: var(--iris-600); }

.t3-tier {
  position: relative;
  background: #fff;
  border: 1px solid var(--paper-line);
  border-radius: var(--r-md);
  padding: var(--s-5) var(--s-6);
  transition: transform var(--fast), box-shadow var(--fast);
}
.t3-tier:hover { transform: translateY(-3px); box-shadow: 0 18px 44px -20px rgba(23, 18, 38, 0.35); }

/* The featured tier is a piece of the night, sitting on the paper. */
.t3-tier.is-best {
  background: var(--ink-2);
  border-color: var(--ink-2);
  color: var(--text);
}
.t3-tier.is-best .t3-tier-note { color: var(--text-soft); }
.t3-tier.is-best li { color: var(--text-soft); }
.t3-tier.is-best li svg { color: var(--foil-2); }

.t3-tier-tag {
  position: absolute;
  top: -0.8rem; right: 1.2rem;
  font-family: var(--f-display);
  font-size: 0.68rem;
  font-weight: 700;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  background: var(--grad-foil);
  color: var(--foil-ink);
  border-radius: var(--r-full);
  padding: 0.35em 0.9em;
}

.t3-tier-top {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: var(--s-4);
  flex-wrap: wrap;
}
.t3-tier-top h3 { font-size: 1.2rem; margin: 0; }
.t3-tier-cost {
  font-family: var(--f-display);
  font-size: 1.5rem;
  font-weight: 750;
  letter-spacing: -0.02em;
  margin: 0;
}
.t3-tier-cost small { font-size: 0.6em; font-weight: 500; color: inherit; opacity: 0.7; }

.t3-tier-note { font-size: 0.9rem; color: var(--paper-soft); margin: 0.4rem 0 var(--s-4); }

.t3-tier ul {
  list-style: none;
  margin: 0 0 var(--s-5);
  padding: 0;
  display: grid;
  gap: 0.5rem;
}
.t3-tier li {
  display: flex;
  gap: 0.6em;
  align-items: flex-start;
  font-size: 0.9rem;
  color: var(--paper-soft);
}
.t3-tier li svg { width: 1.05em; height: 1.05em; flex: none; margin-top: 0.2em; color: var(--iris-600); }

.t3-tier-cta { width: 100%; }
.t3-tier .v3-btn-ghost { border-color: var(--paper-line); color: var(--paper-ink); }
.t3-tier .v3-btn-ghost:hover { border-color: var(--paper-ink); color: var(--paper-ink); }
.t3-tier.is-best .v3-btn-ghost { border-color: var(--line-strong); color: var(--text); }

/* ============================================================================
   13. FINALE
   ========================================================================= */

.t3-finale {
  position: relative;
  text-align: center;
  padding-block: var(--s-11) var(--s-10);
  overflow: clip;
  background:
    radial-gradient(60rem 34rem at 50% 118%, rgba(124, 92, 255, 0.25), transparent 65%),
    radial-gradient(46rem 26rem at 50% 128%, rgba(232, 195, 122, 0.12), transparent 70%),
    var(--ink-0);
}
.t3-finale .t3-aside { margin-bottom: var(--s-7); }
.t3-finale-cta { display: flex; justify-content: center; flex-wrap: wrap; gap: var(--s-4); }

/* ============================================================================
   14. FOOTER
   ========================================================================= */

.v3-foot {
  border-top: 1px solid var(--line);
  padding-block: var(--s-9) var(--s-6);
  background: var(--ink-0);
}
.v3-foot-grid {
  display: grid;
  grid-template-columns: 2fr repeat(3, 1fr);
  gap: var(--s-7);
  margin-bottom: var(--s-8);
}
.v3-foot-tag {
  font-family: var(--f-serif);
  font-style: italic;
  color: var(--muted);
  margin: var(--s-3) 0 0;
}
.v3-foot-t {
  font-family: var(--f-display);
  font-size: var(--t-xs);
  font-weight: 600;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: var(--faint);
  margin-bottom: var(--s-4);
}
.v3-foot-l { list-style: none; margin: 0; padding: 0; display: grid; gap: 0.6rem; }
.v3-foot-l a { color: var(--text-soft); font-size: var(--t-sm); }
.v3-foot-l a:hover { color: var(--text); }

/* The WhatsApp contact (issues #64, #61): the glyph sits beside the number at
   text size and inherits the link colour, so it reads as one more way to reach
   us rather than a badge. */
.v3-foot-wa { display: inline-flex; align-items: center; gap: 0.45em; }
.v3-foot-wa svg { width: 1.1em; height: 1.1em; flex: 0 0 auto; }

.v3-foot-b {
  display: flex;
  flex-wrap: wrap;
  justify-content: space-between;
  gap: var(--s-3);
  padding-top: var(--s-5);
  border-top: 1px solid var(--line);
  color: var(--faint);
  font-size: var(--t-xs);
}

/* ============================================================================
   14b. THE 3D WORLD (html.v3-3d — set only when the WebGL hall boots)
   ============================================================================
   The canvas is the page's backdrop; every dark act turns translucent so the
   hall shows through, with veils kept strong where text sits. Without WebGL
   none of this applies and the CSS presentation above stands untouched.
   ========================================================================= */

.t3-world { display: none; }

html.v3-3d .t3-world {
  display: block;
  position: fixed;
  inset: 0;
  width: 100%;
  height: 100%;
  z-index: 0;

  /* The hall EMERGES rather than pops (TDR-032): the animation starts the moment
     display flips, so the swap from the CSS aurora reads as a reveal — and it also
     masks the first-frame gap between the class landing and the first render. */
  animation: t3-world-in 700ms ease-out both;
}

@keyframes t3-world-in {
  from { opacity: 0; }
  to { opacity: 1; }
}

@media (prefers-reduced-motion: reduce) {
  html.v3-3d .t3-world { animation: none; }
}

/* The nav stays FIXED (branding must survive every scroll) — it already owns
   z-index 100, which lifts it above the canvas without touching its position. */
html.v3-3d main,
html.v3-3d .v3-foot { position: relative; z-index: 1; }

html.v3-3d .v3,
html:has(.v3).v3-3d { background: transparent; }

/* The CSS stand-ins bow out: the hall carries the hero. */
html.v3-3d .t3-aurora,
html.v3-3d .t3-hero-stage { display: none; }

html.v3-3d .t3-hero-grid { grid-template-columns: minmax(0, 46rem); }

/* Readability without curtains: the veils are whisper-thin so the venue stays
   discoverable, and the words carry their own shadow instead. The user should
   always feel they can see the real stage behind the glass. */
html.v3-3d .t3-hero-veil {
  background:
    linear-gradient(96deg, rgba(8, 7, 15, 0.55) 0%, rgba(8, 7, 15, 0.22) 42%, transparent 68%),
    linear-gradient(180deg, rgba(8, 7, 15, 0.35), transparent 20%);
}

html.v3-3d .v3-section { background: linear-gradient(180deg, rgba(8, 7, 15, 0.26), rgba(8, 7, 15, 0.14)); }
html.v3-3d .t3-ticker { background: rgba(13, 11, 25, 0.5); backdrop-filter: blur(8px); -webkit-backdrop-filter: blur(8px); }
html.v3-3d .t3-how { background: rgba(13, 11, 25, 0.2); }

html.v3-3d .t3-h1, html.v3-3d .t3-h2, html.v3-3d .t3-sec-head p,
html.v3-3d .t3-lede, html.v3-3d .t3-aside, html.v3-3d .t3-trust,
html.v3-3d .t3-step, html.v3-3d .t3-meta-row {
  text-shadow: 0 1px 2px rgba(4, 3, 10, 0.9), 0 6px 28px rgba(4, 3, 10, 0.7);
}
/* Gradient-clipped text has transparent glyphs: a shadow would show THROUGH
   the letters and turn the foil black. Foil words carry no shadow. */
html.v3-3d .is-foil { text-shadow: none; }

/* The headliner act IS the hall here: the camera pushes in on the spotlit mic,
   the stock poster bows out, and the copy becomes one large glass panel. */
html.v3-3d .t3-headliner-bg img { display: none; }
html.v3-3d .t3-headliner-bg::after {
  background: linear-gradient(90deg, rgba(8, 7, 15, 0.42) 0%, rgba(8, 7, 15, 0.2) 45%, transparent 80%);
}
html.v3-3d .t3-headliner-copy {
  background: linear-gradient(165deg, rgba(26, 21, 46, 0.42), rgba(12, 10, 24, 0.5));
  backdrop-filter: blur(12px) saturate(1.1);
  -webkit-backdrop-filter: blur(12px) saturate(1.1);
  border: 1px solid rgba(244, 242, 255, 0.14);
  border-radius: var(--r-lg);
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.1), 0 24px 60px -30px rgba(2, 1, 8, 0.9);
  padding: var(--s-7);
}

/* The finale looks back down the hall from the last row — barely veiled. */
html.v3-3d .t3-finale {
  background: radial-gradient(90% 90% at 50% 60%, transparent 55%, rgba(8, 7, 15, 0.42));
}

html.v3-3d .v3-foot {
  background: rgba(8, 7, 15, 0.72);
  backdrop-filter: blur(12px);
  -webkit-backdrop-filter: blur(12px);
}

/* ── Glass everywhere the hall is live ──────────────────────────────────────
   Scene tiles: etched-glass panels. The artwork sits IN the glass, ghosted,
   and comes alive on hover — the venue reads through every tile. */
html.v3-3d .t3-scene {
  background: linear-gradient(170deg, rgba(30, 25, 54, 0.34), rgba(12, 10, 24, 0.42));
  backdrop-filter: blur(10px) saturate(1.1);
  -webkit-backdrop-filter: blur(10px) saturate(1.1);
  border: 1px solid rgba(244, 242, 255, 0.13);
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.1), 0 14px 40px -22px rgba(2, 1, 8, 0.85);
}
html.v3-3d .t3-scene img {
  opacity: 0.52;
  filter: saturate(0.4) brightness(0.85);
}
html.v3-3d .t3-scene:hover img,
html.v3-3d .t3-scene:focus-visible img {
  opacity: 0.95;
  filter: saturate(1.05) brightness(1);
}
html.v3-3d .t3-scene-scrim {
  background: linear-gradient(200deg, transparent 40%, rgba(8, 7, 15, 0.72));
}

/* How-it-works: glass panels (they assemble from fragments on entry). */
html.v3-3d .t3-step {
  background: linear-gradient(170deg, rgba(30, 25, 54, 0.4), rgba(12, 10, 24, 0.48));
  backdrop-filter: blur(12px) saturate(1.1);
  -webkit-backdrop-filter: blur(12px) saturate(1.1);
  border-color: rgba(244, 242, 255, 0.14);
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.1), 0 14px 40px -22px rgba(2, 1, 8, 0.85);
}

/* The organiser act sheds its paper: same hall, dark glass panels. The act
   change is now carried by calm light and layout, not an opaque backdrop. */
html.v3-3d .t3-paper {
  background: linear-gradient(180deg, rgba(8, 7, 15, 0.3), rgba(8, 7, 15, 0.18));
  color: var(--text);
}
html.v3-3d .t3-paper::before { content: none; }
html.v3-3d .t3-paper .t3-kicker { color: var(--iris-300); }
html.v3-3d .t3-paper .t3-aside { color: var(--muted); }
html.v3-3d .t3-paper .t3-h2, html.v3-3d .t3-paper .t3-aside,
html.v3-3d .t3-org-point { text-shadow: 0 1px 2px rgba(4, 3, 10, 0.9), 0 6px 28px rgba(4, 3, 10, 0.7); }
html.v3-3d .t3-paper :where(a) { color: var(--iris-300); }
html.v3-3d .t3-paper :where(a:hover) { color: var(--text); }
html.v3-3d .t3-org-point h3 { color: var(--text); }
html.v3-3d .t3-org-point p { color: var(--text-soft); }
html.v3-3d .t3-org-n { border-color: rgba(157, 128, 255, 0.5); color: var(--iris-300); }
html.v3-3d .t3-tiers-flag { color: var(--text-soft); border-color: var(--line-strong); }
html.v3-3d .t3-tiers-flag svg { color: var(--iris-300); }

html.v3-3d .t3-tier {
  background: linear-gradient(170deg, rgba(30, 25, 54, 0.42), rgba(12, 10, 24, 0.5));
  backdrop-filter: blur(12px) saturate(1.1);
  -webkit-backdrop-filter: blur(12px) saturate(1.1);
  border: 1px solid rgba(244, 242, 255, 0.14);
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.1), 0 14px 40px -22px rgba(2, 1, 8, 0.85);
  color: var(--text);
}
html.v3-3d .t3-tier:hover { box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.14), var(--shadow-card); }
html.v3-3d .t3-tier .t3-tier-note { color: var(--text-soft); }
html.v3-3d .t3-tier li { color: var(--text-soft); }
html.v3-3d .t3-tier li svg { color: var(--iris-300); }
html.v3-3d .t3-tier .v3-btn-ghost { border-color: var(--line-strong); color: var(--text); }
html.v3-3d .t3-tier .v3-btn-ghost:hover { border-color: var(--text); }
html.v3-3d .t3-tier.is-best {
  background: linear-gradient(170deg, rgba(38, 30, 66, 0.6), rgba(16, 13, 30, 0.66));
  border-color: rgba(232, 195, 122, 0.4);
}
html.v3-3d .t3-tier.is-best li svg { color: var(--foil-2); }

/* Weekend cards + live chips: a touch more transparent in the live hall. */
html.v3-3d .t3-tik,
html.v3-3d .t3-livec {
  background: linear-gradient(170deg, rgba(30, 25, 54, 0.4), rgba(12, 10, 24, 0.48));
}

/* ============================================================================
   15. MOTION — entrances and reveals
   ========================================================================= */

/* Hero entrance: words rise out of their lines, everything else fades up.
   Armed only when html.v3-js exists, so nothing is hidden without script. */
html.v3-js .t3-word {
  transform: translateY(115%);
  animation: t3-word-in 900ms var(--ease) forwards;
  animation-delay: calc(90ms * var(--i, 0));
}
@keyframes t3-word-in { to { transform: none; } }

html.v3-js .t3-rise {
  opacity: 0;
  transform: translateY(22px);
  animation: t3-rise-in 800ms var(--ease) forwards;
  animation-delay: calc(90ms * var(--i, 0));
}
@keyframes t3-rise-in { to { opacity: 1; transform: none; } }

/* Scroll reveals: elements carry .v3-rv and stagger with --i. Each act enters
   from its own direction — rise (default), right, left, or diagonal — so the
   glass feels like it is physically arriving in the venue. */
html.v3-js .v3-rv {
  opacity: 0;
  transform: translateY(26px);
  transition: opacity 700ms var(--ease), transform 700ms var(--ease);
  transition-delay: calc(70ms * var(--i, 0));
}
html.v3-js .v3-rv.rv-right { transform: translateX(72px); }
html.v3-js .v3-rv.rv-left { transform: translateX(-72px); }
html.v3-js .v3-rv.rv-diag { transform: translate(46px, 40px); }
html.v3-js .v3-rv.is-in { opacity: 1; transform: none; }

/* One reflection travels across major glass the moment it lands — never again
   until hover. background-position drive keeps it inside the panel without
   clipping anything that overhangs (e.g. the pricing ribbon). */
.t3-tier, .t3-step, .t3-headliner-copy { position: relative; }
.t3-tier::before, .t3-step::before,
html.v3-3d .t3-headliner-copy::before {
  content: "";
  position: absolute;
  inset: 0;
  border-radius: inherit;
  pointer-events: none;
  background: linear-gradient(105deg, transparent 38%, rgba(255, 252, 240, 0.14) 50%, transparent 62%) no-repeat;
  background-size: 280% 100%;
  background-position-x: 300%;
}
html.v3-js .v3-rv.is-in.t3-tier::before,
html.v3-js .v3-rv.is-in.t3-step::before,
html.v3-js .v3-rv.is-in.t3-headliner-copy::before {
  animation: t3-glass-pass 950ms var(--ease) 260ms 1 backwards;
}
html.v3-js .v3-rv.is-in.t3-tik::after,
html.v3-js .v3-rv.is-in.t3-livec::after {
  animation: t3-glass-sweep 950ms var(--ease) 260ms 1 backwards;
}
@keyframes t3-glass-pass {
  from { background-position-x: 300%; }
  to { background-position-x: -180%; }
}
@keyframes t3-glass-sweep {
  from { transform: translateX(-320%) skewX(-20deg); }
  to { transform: translateX(520%) skewX(-20deg); }
}

/* Fragment assembly (.rv-frag): script overlays a handful of glass shards that
   fly together, then the real content fades in (.is-set). Content is only
   held back while the html.v3-js contract is active, so nothing can be lost. */
html.v3-js .rv-frag.is-in:not(.is-set) > :not(.t3-shards) { opacity: 0; }
html.v3-js .rv-frag > :not(.t3-shards) { transition: opacity 350ms var(--ease); }

.t3-shards { position: absolute; inset: 0; pointer-events: none; z-index: 2; }
.t3-shard {
  position: absolute;
  inset: 0;
  background: linear-gradient(170deg, rgba(74, 62, 120, 0.4), rgba(24, 20, 44, 0.5));
  border: 1px solid rgba(244, 242, 255, 0.22);
  border-radius: inherit;
  transition: transform 340ms var(--ease), opacity 260ms var(--ease);
}

/* ============================================================================
   16. REDUCED MOTION — a clean, still page
   ========================================================================= */

@media (prefers-reduced-motion: reduce) {
  .v3 *, .v3 *::before, .v3 *::after {
    animation-duration: 0.01ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.01ms !important;
  }
  html:has(.v3) { scroll-behavior: auto; }
  html.v3-js .t3-word, html.v3-js .t3-rise,
  html.v3-js .v3-rv { opacity: 1; transform: none; animation: none; }
  html.v3-js .rv-frag.is-in:not(.is-set) > :not(.t3-shards) { opacity: 1; }
  .t3-shards { display: none; }
  /* The collage act stands still: a plain editorial grid, everything visible. */
  html.v3-js .t3-collage { height: auto; padding-block: var(--s-10); }
  html.v3-js .t3-cstage { position: relative; height: auto; overflow: visible; padding-top: 0; }
  .t3-cstage::after { content: none; }
  .t3-chead { opacity: 1; filter: none; }
  .t3-cbrand, .t3-clabel { display: none; }
  html.v3-js .t3-ccue { display: none; }
  .t3-ticker-track { animation: none; transform: none; }
  .t3-t3d { animation: none; }
  .t3-headliner-bg img { transform: none !important; }
  html.v3-js .v3-rv:not(.is-in) .t3-meter i { width: var(--w, 0%); }
}

/* ============================================================================
   17. RESPONSIVE
   ========================================================================= */

@media (max-width: 1100px) {
  .v3-links {
    position: fixed;
    inset: var(--nav-h) 0 auto;
    flex-direction: column;
    align-items: stretch;
    gap: 0;
    background: rgba(8, 7, 15, 0.97);
    border-bottom: 1px solid var(--line);
    padding: var(--s-3) var(--s-5) var(--s-5);
    display: none;
  }
  .v3-links.is-open { display: flex; }
  .v3-links a { display: block; padding: 0.85rem 0.5rem; font-size: 1rem; }
  .v3-links a::after { content: none; }
  .v3-menu-login { display: block; border-top: 1px solid var(--line); }
  .v3-burger { display: inline-flex; }
  /* THE LOG IN BUTTON STAYS IN THE HEADER ON A PHONE. It was hidden here with
     the "Find an event" call to action, which left signing in reachable only by
     opening the menu — where it rendered as a plain text row, which is what was
     reported.

     "Find an event" is still hidden, and deliberately: it is a wide label, the
     hero below carries the same action twice over, and two pill buttons beside
     the burger is what would actually overflow.

     Tighter padding and a slightly smaller face so it sits beside the logo and
     the 2.6rem burger without crowding either — .v3-nav-actions is a flex row
     with align-items: center, so the vertical alignment needs nothing. */
  .v3-nav-cta { display: none; }

  .v3-nav-login {
    padding: 0.45em 0.95em;
    font-size: 0.82rem;
  }

  /* And the menu's own row goes, so the header offers Log in exactly once. */
  .v3-menu-signin { display: none; }
  .v3-nav { background: rgba(8, 7, 15, 0.72); backdrop-filter: blur(14px); }

  .t3-hero-grid { grid-template-columns: 1fr; gap: var(--s-9); }
  .t3-hero-stage { order: 2; }
  .t3-t3d { width: min(26rem, 92%); }
  .t3-scenes { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .t3-scene.is-wide { grid-column: span 2; }
  html.v3-js .t3-collage { height: 280vh; }
  html.v3-js .t3-collage .t3-scenes { grid-auto-rows: clamp(6rem, 12.5vh, 10rem); }
  .t3-live-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .t3-org-grid { grid-template-columns: 1fr; }
  .v3-foot-grid { grid-template-columns: 1fr 1fr; }
}

@media (max-width: 700px) {
  .v3-wrap { width: min(var(--wrap), 100% - 2rem); }
  .v3-nav-in { width: min(var(--wrap), 100% - 2rem); }

  .t3-hero { padding-top: calc(var(--nav-h) + var(--s-6)); }
  .t3-dock { flex-wrap: wrap; border-radius: var(--r-lg); }
  .t3-dock-q { flex: 1 1 100%; }
  .t3-dock-when { flex: 1 1 auto; border-left: 0; }
  .t3-dock > .v3-btn { flex: 1 1 auto; }

  .t3-hero-cta .v3-btn { flex: 1 1 100%; }

  .t3-steps { grid-template-columns: 1fr; }
  .t3-steps::before { content: none; }

  .t3-scenes { grid-auto-rows: 10rem; gap: var(--s-2); }
  html.v3-js .t3-collage { height: 230vh; }
  html.v3-js .t3-collage .t3-scenes { grid-auto-rows: clamp(5.4rem, 10.5vh, 8.5rem); gap: var(--s-2); }
  html.v3-js .t3-chead .t3-h2 { font-size: clamp(1.5rem, 1rem + 3vw, 2rem); }
  .t3-chead .t3-aside { font-size: 0.95rem; }
  .t3-cbrand i { display: none; }
  .t3-clabel { letter-spacing: 0.18em; font-size: 0.62rem; }
  .t3-scene-txt b { font-size: 1.05rem; }
  /* Touch has no hover: the teasers stay visible. */
  .t3-scene-txt span { opacity: 1; transform: none; }

  .t3-tik { flex-basis: 13.5rem; }
  .t3-rail-track { scroll-snap-type: x proximity; }
  .t3-rail-track.is-2row { grid-auto-columns: 13.5rem; }
  .t3-live-grid { grid-template-columns: 1fr; }
  /* Lighter glass on phones: blur is the expensive part. */
  .t3-tik, .t3-livec {
    backdrop-filter: blur(9px) saturate(1.1);
    -webkit-backdrop-filter: blur(9px) saturate(1.1);
  }

  .t3-scroll-cue { display: none; }
  .v3-foot-grid { grid-template-columns: 1fr; gap: var(--s-6); }
}

/* Touch devices: no pointer tilt, keep the idle bob only; chips stay put. */
@media (pointer: coarse) {
  .t3-t3d-card { transform: none; }
  .t3-t3d-chip, .t3-t3d-chip.is-b { transform: none; }
}

/* The native SmartBooking app (TDR-040): inside the Capacitor shell the iOS WebView runs
   edge-to-edge, so the fixed nav takes the notch/Dynamic-Island inset and the footer clears
   the home indicator. html.is-native-app is set only by pwa.js inside the shell; env() is
   zero everywhere else, so browsers and desktop are untouched. */
html.is-native-app .v3-nav { padding-top: env(safe-area-inset-top, 0px); }
html.is-native-app .v3-foot { padding-bottom: env(safe-area-inset-bottom, 0px); }