/* FallØut India
   One ground (near black), one ink, one accent (the FallØut blue) and a steel
   field for the calendar. Panchang for display, Switzer for everything else.
   Surfaces are told apart by tone, never by outlines, glows or gradients. */

:root {
  --bg: #0b0b0b;
  --surface: #151515;
  --surface-2: #1f1f1f;
  --surface-3: #2a2a2a;
  --ink: #f0f0ee;
  --muted: #a3a29b;
  --accent: #5866e0;
  --accent-ink: #ffffff;
  --accent-text: #8fa0ff;
  --accent-tint: #1d2150;
  --steel: #d6d5cf;
  --steel-2: #c8c7c0;
  --steel-ink: #0b0b0b;
  --steel-muted: #4a4944;

  /* The one fill every conversion action shares (tickets, buy now, join). */
  --action-fill: var(--accent);

  --font-display: "Panchang", "Switzer", "Arial Black", sans-serif;
  --font-text: "Switzer", "Helvetica Neue", Arial, sans-serif;

  --step-small: clamp(0.8125rem, 0.79rem + 0.1vw, 0.875rem);
  --step-body: clamp(1.0625rem, 1rem + 0.25vw, 1.1875rem);
  --step-lead: clamp(1.25rem, 1.1rem + 0.7vw, 1.625rem);
  --step-head: clamp(1.75rem, 1rem + 2.8vw, 3.75rem);
  --step-display: clamp(2.6rem, 7.6vw, 9.5rem);

  --margin: clamp(16px, 2.4vw, 32px);
  --section-gap: clamp(96px, 11vw, 200px);
  --header-height: 64px;

  /* Set by updateScrollState() in index.html as the hero scrolls away. */
  --header-bg: 0.12;
  --header-brand-opacity: 0;
  --header-brand-y: 8px;
  --header-brand-scale: 0.94;
  --hero-opacity: 1;
  --hero-scale: 1;
  --hero-y: 0vh;

  /* One motion curve for the whole site: quick to respond, slow to settle. */
  --ease-out: cubic-bezier(0.22, 1, 0.36, 1);
  color-scheme: dark;
}

/* Pages without the home hero keep a solid bar and the wordmark from the start. */
.event-page-active,
.moments-page,
.editorial-page,
.discovery-page {
  --header-bg: 0.96;
  --header-brand-opacity: 1;
  --header-brand-y: 0px;
  --header-brand-scale: 1;
}

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

html {
  scroll-behavior: smooth;
  -webkit-tap-highlight-color: transparent;
  -webkit-text-size-adjust: 100%;
}

::selection {
  background: var(--accent);
  color: var(--accent-ink);
}

body {
  margin: 0;
  min-height: 100svh;
  overflow-x: clip;
  background: var(--bg);
  color: var(--ink);
  font-family: var(--font-text);
  font-size: var(--step-body);
  line-height: 1.5;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
}

img,
video {
  display: block;
  max-width: 100%;
  height: auto;
}

a {
  color: inherit;
}

svg {
  display: block;
  width: 1.1rem;
  height: 1.1rem;
  fill: none;
  stroke: currentColor;
  stroke-linecap: square;
  stroke-linejoin: miter;
  stroke-width: 1.8;
  flex: 0 0 auto;
}

:focus-visible {
  outline: 2px solid var(--ink);
  outline-offset: 3px;
}

h1,
h2,
h3 {
  margin: 0;
  overflow-wrap: break-word;
  font-family: var(--font-display);
  font-weight: 700;
  letter-spacing: -0.02em;
  line-height: 1;
  text-transform: uppercase;
  text-wrap: balance;
}

h2 {
  font-size: var(--step-head);
}

p {
  margin: 0;
  text-wrap: pretty;
}

.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;
}

.skip-link {
  position: absolute;
  top: 8px;
  left: 8px;
  z-index: 100;
  padding: 12px 16px;
  background: var(--ink);
  color: var(--bg);
  font-weight: 600;
  text-decoration: none;
  transform: translateY(-160%);
}

.skip-link:focus-visible {
  transform: none;
}

/* Images settle in instead of popping as they arrive (see revealImages()). */
img.is-pending {
  opacity: 0;
}

img.is-revealed {
  animation: image-reveal 640ms var(--ease-out) backwards;
}

@keyframes image-reveal {
  from {
    opacity: 0;
  }
}

/* ---------- Buttons and links ---------- */

.primary-button,
.nav-action {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 12px;
  min-height: 48px;
  padding: 0 22px;
  border: 0;
  border-radius: 0;
  background: var(--action-fill);
  color: var(--accent-ink);
  font-family: var(--font-text);
  font-size: var(--step-body);
  font-weight: 600;
  line-height: 1;
  text-decoration: none;
  white-space: nowrap;
  cursor: pointer;
  transition:
    background-color 180ms var(--ease-out),
    color 180ms var(--ease-out),
    transform 220ms var(--ease-out);
}

.primary-button:hover:not(:disabled),
.primary-button:focus-visible:not(:disabled),
.nav-action:hover,
.nav-action:focus-visible {
  background: var(--ink);
  color: var(--bg);
}

.section-action {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  min-height: 44px;
  color: var(--ink);
  font-size: var(--step-body);
  font-weight: 500;
  text-decoration: underline;
  text-decoration-thickness: 2px;
  text-underline-offset: 0.3em;
  text-decoration-color: var(--accent);
  transition:
    color 180ms var(--ease-out),
    text-underline-offset 180ms var(--ease-out),
    transform 220ms var(--ease-out);
}

.section-action:hover,
.section-action:focus-visible {
  color: var(--accent-text);
  text-underline-offset: 0.42em;
}

/* A tap should feel like it lands. */
.primary-button:active:not(:disabled),
.nav-action:active,
.section-action:active,
.event-ticket-bar-action:active,
.mobile-quickbar-link:active,
.carousel-button:active,
.city-switch button:active,
.community-popup-cta:active {
  transform: translateY(1px) scale(0.98);
  transition-duration: 80ms;
}

.eyebrow {
  margin: 0;
  color: var(--muted);
  font-size: var(--step-small);
  font-weight: 500;
}

.inline-link {
  color: inherit;
  text-decoration: underline;
  text-underline-offset: 0.2em;
}

/* ---------- Header ---------- */

.site-header {
  position: fixed;
  inset: 0 0 auto;
  z-index: 30;
  background: rgba(11, 11, 11, var(--header-bg));
  transition: background-color 220ms var(--ease-out);
}

.header-inner {
  display: grid;
  grid-template-columns: 1fr auto 1fr;
  align-items: center;
  gap: 24px;
  min-height: var(--header-height);
  padding: 0 var(--margin);
}

/* On the home page the wordmark arrives in the bar as the hero logo leaves. */
.header-brand {
  justify-self: start;
  display: block;
  width: 112px;
  opacity: var(--header-brand-opacity);
  pointer-events: none;
  text-decoration: none;
  transform: translateY(var(--header-brand-y)) scale(var(--header-brand-scale));
  transform-origin: left center;
  transition:
    opacity 140ms var(--ease-out),
    transform 180ms var(--ease-out);
}

.has-scrolled .header-brand,
.event-page-active .header-brand,
.moments-page .header-brand,
.editorial-page .header-brand,
.discovery-page .header-brand {
  pointer-events: auto;
}

.header-brand img {
  width: 100%;
  height: auto;
  filter: grayscale(1) contrast(1.3) brightness(1.1);
}

.nav-cluster {
  display: flex;
  align-items: center;
  gap: clamp(20px, 2.6vw, 40px);
}

.nav-link {
  position: relative;
  color: var(--ink);
  font-size: 0.9375rem;
  font-weight: 500;
  text-decoration: none;
  white-space: nowrap;
  transition: color 180ms var(--ease-out);
}

.nav-link::after {
  content: "";
  position: absolute;
  left: 0;
  right: 0;
  bottom: -6px;
  height: 2px;
  background: var(--accent);
  transform: scaleX(0);
  transform-origin: left;
  transition: transform 220ms var(--ease-out);
}

.nav-link:hover::after,
.nav-link:focus-visible::after,
.nav-link[aria-current="page"]::after {
  transform: scaleX(1);
}

.nav-action {
  justify-self: end;
  min-height: 40px;
  padding: 0 18px;
  font-size: 0.9375rem;
}

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

/* The night itself fills the screen; the headline sits over it. */
.hero {
  position: relative;
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  grid-template-rows: 1fr auto;
  gap: 24px var(--margin);
  min-height: 100svh;
  padding: var(--header-height) var(--margin) 32px;
  overflow: hidden;
  isolation: isolate;
  background: var(--bg);
}

.hero-media {
  position: absolute;
  inset: 0;
  z-index: -1;
  overflow: hidden;
  pointer-events: none;
}

.hero-video {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  filter: saturate(0.9) contrast(1.06) brightness(0.7);
}

.hero-video--mobile {
  display: none;
}

/* A dark scrim under the headline and the copy, the one gradient the site keeps. */
.hero-scrim {
  position: absolute;
  inset: 0;
  background: linear-gradient(
    180deg,
    rgba(11, 11, 11, 0.5) 0%,
    rgba(11, 11, 11, 0.2) 40%,
    rgba(11, 11, 11, 0.25) 62%,
    rgba(11, 11, 11, 0.92) 100%
  );
}

/* Shrinks and fades as the page scrolls (see updateScrollState()). */
.hero-lockup {
  grid-column: 1 / -1;
  grid-row: 1;
  align-self: center;
  justify-self: center;
  display: grid;
  justify-items: center;
  width: min(70vw, 760px);
  opacity: var(--hero-opacity);
  transform: translate3d(0, var(--hero-y), 0) scale(var(--hero-scale));
  transform-origin: center top;
  will-change: transform, opacity;
}

.hero-lockup h1 {
  width: 100%;
}

.hero-wordmark {
  width: 100%;
  height: auto;
  filter: grayscale(1) contrast(1.3) brightness(1.1);
}

/* Part of the lockup, so it keeps the wordmark's wide tracking. */
.hero-tag {
  margin: clamp(10px, 1.4vw, 18px) 0 0 0.62em;
  font-size: clamp(0.875rem, 1.2vw, 1.0625rem);
  font-weight: 600;
  letter-spacing: 0.62em;
  line-height: 1;
  text-transform: uppercase;
}

.hero-next {
  grid-column: 2;
  grid-row: 2;
  align-self: end;
  justify-self: end;
  display: grid;
  justify-items: end;
  gap: 2px;
  max-width: 360px;
  font-size: var(--step-body);
  line-height: 1.3;
  text-align: right;
  text-decoration: none;
}

.hero-next span {
  color: var(--muted);
}

.hero-next strong {
  font-weight: 600;
  text-decoration: underline;
  text-decoration-thickness: 2px;
  text-decoration-color: var(--accent);
  text-underline-offset: 0.25em;
  transition: color 180ms var(--ease-out);
}

.hero-next:hover strong,
.hero-next:focus-visible strong {
  color: var(--accent-text);
}

/* ---------- Sections ---------- */

.section {
  padding: var(--section-gap) var(--margin) 0;
  scroll-margin-top: var(--header-height);
}

.section-heading {
  display: flex;
  flex-wrap: wrap;
  align-items: end;
  justify-content: space-between;
  gap: 16px 32px;
  margin-bottom: clamp(32px, 4vw, 56px);
}

/* ---------- Up next (city carousel) ---------- */

.city-switch {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
}

.city-switch[hidden] {
  display: none;
}

.city-switch button {
  min-height: 44px;
  padding: 0 18px;
  border: 0;
  border-radius: 0;
  background: var(--surface-2);
  color: var(--ink);
  font: 500 var(--step-body) / 1 var(--font-text);
  cursor: pointer;
  transition:
    background-color 180ms var(--ease-out),
    color 180ms var(--ease-out),
    transform 220ms var(--ease-out);
}

.city-switch button:hover,
.city-switch button:focus-visible {
  background: var(--surface-3);
}

.city-switch button.is-active {
  background: var(--ink);
  color: var(--bg);
}

.featured-carousel {
  position: relative;
  overflow: hidden;
}

.featured-events {
  display: flex;
  width: 100%;
  transform: translate3d(0, 0, 0);
  transition: transform 560ms var(--ease-out);
  touch-action: pan-y;
  user-select: none;
  will-change: transform;
  cursor: grab;
}

.featured-events.is-dragging {
  transition: none;
  cursor: grabbing;
}

.hot-events .focus-event {
  flex: 0 0 100%;
  min-width: 100%;
}

.focus-event {
  display: grid;
  grid-template-columns: minmax(0, 5fr) minmax(0, 7fr);
  gap: clamp(24px, 4vw, 72px);
  align-items: end;
}

.focus-art {
  position: relative;
  aspect-ratio: 4 / 5;
  overflow: hidden;
  background: var(--surface);
}

.focus-art img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  transition: transform 900ms var(--ease-out);
}

.focus-event:hover .focus-art img,
.focus-event.is-touch-active .focus-art img {
  transform: scale(1.03);
}

.focus-copy {
  display: grid;
  justify-items: start;
  align-content: end;
  padding-bottom: 8px;
}

.focus-copy h3 {
  max-width: 15em;
  font-size: clamp(1.25rem, 0.3rem + 2.8vw, 3.25rem);
  overflow-wrap: anywhere;
}

.focus-details {
  display: grid;
  gap: 4px;
  margin: clamp(20px, 2.4vw, 32px) 0 0;
}

.focus-details div {
  min-width: 0;
}

.focus-details dt {
  position: absolute;
  width: 1px;
  height: 1px;
  overflow: hidden;
  clip: rect(0, 0, 0, 0);
  white-space: nowrap;
}

.focus-details dd {
  margin: 0;
  font-size: var(--step-lead);
  line-height: 1.3;
}

.focus-details div + div dd {
  color: var(--muted);
}

.focus-countdown,
.event-countdown {
  margin: 12px 0 0;
  color: var(--accent-text);
  font-size: var(--step-body);
  font-weight: 600;
  font-variant-numeric: tabular-nums;
}

.focus-countdown:empty,
.event-countdown:empty {
  display: none;
}

.focus-actions,
.event-discovery {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 16px 28px;
  margin-top: clamp(24px, 3vw, 40px);
}

.carousel-controls {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
  margin-top: 24px;
}

.carousel-controls[hidden] {
  display: none;
}

.carousel-status {
  display: flex;
  gap: 8px;
  margin: 0;
  color: var(--muted);
  font-size: var(--step-body);
  font-variant-numeric: tabular-nums;
}

.carousel-status [data-carousel-current] {
  color: var(--ink);
  font-weight: 600;
}

.carousel-actions {
  display: flex;
  gap: 8px;
}

.carousel-button {
  display: grid;
  place-items: center;
  width: 48px;
  height: 48px;
  padding: 0;
  border: 0;
  background: var(--surface-2);
  color: var(--ink);
  cursor: pointer;
  transition:
    background-color 180ms var(--ease-out),
    color 180ms var(--ease-out),
    transform 220ms var(--ease-out);
}

.carousel-button:hover,
.carousel-button:focus-visible {
  background: var(--ink);
  color: var(--bg);
}

.carousel-button svg {
  width: 20px;
  height: 20px;
}

.carousel-icon--play {
  display: none;
}

.carousel-toggle[data-paused="true"] .carousel-icon--pause {
  display: none;
}

.carousel-toggle[data-paused="true"] .carousel-icon--play {
  display: block;
}

/* Poster flip and discount tag, used on some event posters. */
.poster-flip {
  position: absolute;
  inset: 0;
  perspective: 1600px;
}

.poster-flip-inner {
  position: relative;
  width: 100%;
  height: 100%;
  transform-style: preserve-3d;
  transition: transform 0.9s var(--ease-out);
}

.poster-flip.is-flipped .poster-flip-inner {
  transform: rotateY(180deg);
}

.poster-flip-face {
  position: absolute;
  inset: 0;
  backface-visibility: hidden;
}

.poster-flip-back {
  transform: rotateY(180deg);
}

.discount-bookmark {
  position: absolute;
  top: 0;
  left: 0;
  z-index: 3;
  padding: 10px 14px;
  background: var(--action-fill);
  color: var(--accent-ink);
  font-size: var(--step-small);
  font-weight: 600;
  line-height: 1;
}

/* ---------- Every city (poster wall) ---------- */

.events-section {
  display: grid;
  grid-template-columns: minmax(0, 4fr) minmax(0, 8fr);
  grid-template-rows: auto 1fr;
  column-gap: clamp(24px, 4vw, 72px);
  align-items: start;
}

.events-section[hidden] {
  display: none;
}

.events-section > .section-heading {
  grid-column: 1;
  grid-row: 1;
  display: grid;
  justify-items: start;
  align-content: start;
  gap: 16px;
}

.events-section > .poster-wall {
  grid-column: 2;
  grid-row: 1 / span 2;
}

.events-section > .discount-note {
  grid-column: 1;
  grid-row: 2;
  align-self: end;
}

.poster-wall {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(min(100%, 240px), 1fr));
  gap: clamp(16px, 2vw, 28px);
}

.event-feature {
  display: grid;
  align-content: start;
  gap: 16px;
  color: var(--ink);
  text-decoration: none;
}

.event-art {
  position: relative;
  aspect-ratio: 4 / 5;
  overflow: hidden;
  background: var(--surface);
}

.event-art img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  transition: transform 900ms var(--ease-out);
  pointer-events: none;
  user-select: none;
  -webkit-user-drag: none;
}

.event-feature:hover .event-art img,
.event-feature:focus-visible .event-art img,
.event-feature.is-touch-active .event-art img {
  transform: scale(1.04);
}

.event-copy {
  display: grid;
  justify-items: start;
}

.event-copy h3 {
  font-family: var(--font-text);
  font-size: var(--step-lead);
  font-weight: 600;
  letter-spacing: -0.01em;
  line-height: 1.15;
  text-transform: none;
  overflow-wrap: anywhere;
}

.event-date {
  margin: 10px 0 0;
  font-size: var(--step-body);
  font-weight: 500;
}

.event-location {
  margin: 0;
  color: var(--muted);
  font-size: var(--step-body);
}

.event-countdown {
  margin-top: 6px;
}

.event-cta {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  margin-top: 14px;
  font-weight: 600;
  text-decoration: underline;
  text-decoration-thickness: 2px;
  text-decoration-color: var(--accent);
  text-underline-offset: 0.3em;
  transition: color 180ms var(--ease-out);
}

.event-cta svg {
  display: none;
}

.event-feature:hover .event-cta,
.event-feature:focus-visible .event-cta {
  color: var(--accent-text);
}

.discount-note {
  max-width: 34em;
  margin-top: 32px;
  color: var(--muted);
  font-size: var(--step-small);
  line-height: 1.5;
}

.discount-note[hidden] {
  display: none;
}

/* ---------- Rave calendar (steel field) ---------- */

.calendar-section {
  margin-top: var(--section-gap);
  padding-top: clamp(64px, 8vw, 120px);
  padding-bottom: clamp(64px, 8vw, 120px);
  background: var(--steel);
  color: var(--steel-ink);
}

.calendar-section .section-action {
  color: var(--steel-ink);
  text-decoration-color: var(--steel-ink);
}

.calendar-section .section-action:hover,
.calendar-section .section-action:focus-visible {
  color: var(--steel-muted);
}

.calendar-section :focus-visible {
  outline-color: var(--steel-ink);
}

.calendar-shell {
  overflow: hidden;
}

.calendar-rail {
  display: grid;
  grid-auto-columns: minmax(280px, 82vw);
  grid-auto-flow: column;
  gap: 8px;
  overflow-x: auto;
  overflow-y: hidden;
  overscroll-behavior-x: contain;
  scroll-snap-type: x mandatory;
  scrollbar-color: var(--steel-ink) transparent;
  scrollbar-width: thin;
}

/* Follows the months in view (see fitCalendarHeight()), so a short month never
   leaves the tallest month's height of empty space under it. */
.calendar-rail.is-fitted {
  transition: height 420ms var(--ease-out);
}

@media (min-width: 760px) {
  .calendar-rail {
    grid-auto-columns: calc((100% - 8px) / 2);
  }
}

@media (min-width: 1100px) {
  .calendar-rail {
    grid-auto-columns: calc((100% - 16px) / 3);
  }
}

.month-card {
  display: grid;
  align-content: start;
  min-height: 360px;
  padding-bottom: 12px;
  scroll-snap-align: start;
}

.month-card.is-current {
  background: var(--steel-2);
}

.month-card header {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: 12px;
  padding: 20px 20px 16px;
}

.month-card h3 {
  order: 0;
  font-size: var(--step-lead);
}

.month-card header span {
  order: 1;
  color: var(--steel-muted);
  font-size: var(--step-small);
  font-weight: 500;
}

.calendar-event {
  display: grid;
  grid-template-columns: 4.2em minmax(0, 1fr);
  column-gap: 12px;
  row-gap: 2px;
  padding: 12px 20px;
  color: var(--steel-ink);
  font-size: var(--step-body);
  line-height: 1.3;
  text-decoration: none;
  transition: background-color 180ms var(--ease-out);
}

.calendar-event > * {
  grid-column: 2;
}

.calendar-event time {
  grid-column: 1;
  grid-row: 1 / span 4;
  font-weight: 600;
  font-variant-numeric: tabular-nums;
}

.calendar-event strong {
  font-weight: 600;
}

.calendar-event span {
  color: var(--steel-muted);
}

a.calendar-event:hover,
a.calendar-event:focus-visible {
  background: var(--steel-ink);
  color: var(--steel);
}

a.calendar-event:hover span,
a.calendar-event:focus-visible span {
  color: var(--steel-2);
}

.calendar-event .calendar-countdown {
  color: var(--steel-ink);
  font-weight: 600;
  font-variant-numeric: tabular-nums;
}

a.calendar-event:hover .calendar-countdown,
a.calendar-event:focus-visible .calendar-countdown {
  color: var(--accent-text);
}

.calendar-event .calendar-cta {
  margin-top: 4px;
  color: inherit;
  font-weight: 600;
  text-decoration: underline;
  text-decoration-thickness: 2px;
  text-decoration-color: var(--accent);
  text-underline-offset: 0.25em;
}

/* Inside the current month, what has been steps back and what is left steps up. */
.month-card.is-current .calendar-event.is-past,
.month-card.is-current .calendar-event.is-past span {
  color: var(--steel-muted);
}

.calendar-event--notice {
  grid-template-columns: minmax(0, 1fr);
  color: var(--steel-muted);
}

.calendar-event--notice > * {
  grid-column: 1;
}

.calendar-event--notice time {
  display: none;
}

.calendar-event--notice strong {
  font-weight: 500;
}

.calendar-status {
  margin-right: 0.4em;
  font-size: var(--step-small);
}

/* ---------- FØ Glimpses ---------- */

.moments-section {
  padding-bottom: 0;
}

.moments-stage {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  align-items: flex-start;
  padding-bottom: 40px;
  color: var(--ink);
  text-decoration: none;
  isolation: isolate;
}

.moments-title {
  flex: 0 0 100%;
  margin-bottom: clamp(32px, 4vw, 64px);
  font-size: var(--step-display);
}

/* Three prints laid on the table, overlapping a little, each at its own tilt. */
.moment-print {
  position: relative;
  z-index: 1;
  width: clamp(160px, 26vw, 420px);
  aspect-ratio: 3 / 4;
  margin: 0 -1.6vw;
  padding: 8px;
  background: var(--ink);
  object-fit: cover;
  transition: transform 220ms var(--ease-out);
}

.moment-print--a {
  transform: rotate(-6deg);
}

.moment-print--b {
  z-index: 2;
  transform: rotate(4deg) translateY(32px);
}

.moment-print--c {
  transform: rotate(-3deg) translateY(8px);
}

.moment-print:hover {
  z-index: 3;
  transform: rotate(0deg) scale(1.02);
}

.moments-tagline {
  display: flex;
  justify-content: flex-end;
  margin-top: 24px;
}

.moments-tagline a {
  color: var(--ink);
  font-weight: 600;
  text-decoration-thickness: 2px;
  text-decoration-color: var(--accent);
  text-underline-offset: 0.3em;
  transition: color 180ms var(--ease-out);
}

.moments-tagline a:hover,
.moments-tagline a:focus-visible {
  color: var(--accent-text);
}

/* ---------- Join band ---------- */

.join-section {
  margin-top: var(--section-gap);
  scroll-margin-top: var(--header-height);
}

.join-band {
  position: relative;
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  grid-template-rows: auto 1fr;
  min-height: 60svh;
  padding: 24px var(--margin) 0;
  overflow: hidden;
  background: var(--accent);
  color: var(--accent-ink);
  text-decoration: none;
  transition:
    background-color 200ms var(--ease-out),
    color 200ms var(--ease-out);
}

.join-band:hover,
.join-band:focus-visible {
  background: var(--ink);
  color: var(--bg);
  outline: none;
}

.join-band-copy {
  display: grid;
  gap: 8px;
  max-width: 30em;
}

.join-band-copy h2 {
  font-size: var(--step-lead);
}

.join-band-copy p {
  font-size: var(--step-body);
  font-weight: 500;
}

.join-band-arrow {
  width: clamp(32px, 3.4vw, 48px);
  height: clamp(32px, 3.4vw, 48px);
  stroke-width: 2.2;
  transition: transform 220ms var(--ease-out);
}

.join-band:hover .join-band-arrow,
.join-band:focus-visible .join-band-arrow {
  transform: translate(4px, -4px);
}

.join-band-word {
  grid-column: 1 / -1;
  align-self: end;
  margin-bottom: -0.12em;
  font-family: var(--font-display);
  font-size: clamp(5.5rem, 26vw, 30rem);
  font-weight: 700;
  letter-spacing: -0.04em;
  line-height: 0.82;
  text-transform: uppercase;
  white-space: nowrap;
}

/* ---------- Contact ---------- */

.contact-section {
  padding: clamp(80px, 10vw, 160px) var(--margin);
  scroll-margin-top: var(--header-height);
}

.contact-close {
  display: grid;
  grid-template-columns: minmax(0, 7fr) minmax(0, 3fr);
  gap: 48px var(--margin);
  align-items: start;
}

.contact-ask {
  display: grid;
  justify-items: start;
  gap: 32px;
}

.contact-ask h2 {
  max-width: 9em;
}

.contact-links {
  display: grid;
  gap: 12px;
  margin: 0;
  padding: 0;
  list-style: none;
}

.contact-links a {
  display: inline-block;
  padding: 4px 0;
  font-size: var(--step-body);
  font-weight: 500;
  text-decoration: none;
  transition: color 180ms var(--ease-out), transform 220ms var(--ease-out);
}

.contact-links a:hover,
.contact-links a:focus-visible {
  color: var(--accent-text);
  transform: translateX(4px);
}

/* ---------- Footer ---------- */

.site-footer {
  display: flex;
  flex-wrap: wrap;
  justify-content: space-between;
  gap: 12px;
  padding: 20px var(--margin) 28px;
  background: var(--bg);
  color: var(--muted);
  font-size: var(--step-small);
}

.site-footer a {
  color: var(--muted);
  text-decoration: none;
}

.site-footer a:hover,
.site-footer a:focus-visible {
  color: var(--ink);
}

/* ---------- Community invitation ---------- */

.community-popup {
  position: fixed;
  left: var(--margin);
  bottom: var(--margin);
  z-index: 80;
  display: flex;
  align-items: center;
  gap: 14px;
  max-width: min(520px, calc(100vw - 2 * var(--margin)));
  padding: 10px 10px 10px 18px;
  background: var(--surface-2);
  box-shadow: 0 18px 50px rgba(0, 0, 0, 0.5);
  opacity: 0;
  pointer-events: none;
  transform: translateY(16px);
  transition:
    opacity 220ms var(--ease-out),
    transform 220ms var(--ease-out);
}

.community-popup[hidden] {
  display: none;
}

.community-popup.is-visible {
  opacity: 1;
  pointer-events: auto;
  transform: translateY(0);
}

.community-popup p {
  font-size: var(--step-body);
  line-height: 1.35;
}

.community-popup strong {
  font-weight: 600;
}

.community-popup-cta {
  display: inline-flex;
  align-items: center;
  min-height: 44px;
  padding: 0 18px;
  background: var(--action-fill);
  color: var(--accent-ink);
  font-weight: 600;
  text-decoration: none;
  transition: background-color 180ms var(--ease-out), color 180ms var(--ease-out), transform 220ms var(--ease-out);
}

.community-popup-cta:hover,
.community-popup-cta:focus-visible {
  background: var(--ink);
  color: var(--bg);
}

.community-popup-close {
  display: grid;
  place-items: center;
  flex: none;
  width: 44px;
  height: 44px;
  padding: 0;
  border: 0;
  background: transparent;
  color: var(--muted);
  cursor: pointer;
  transition: color 180ms var(--ease-out), background-color 180ms var(--ease-out);
}

.community-popup-close:hover,
.community-popup-close:focus-visible {
  background: var(--surface-3);
  color: var(--ink);
}

.event-page-active .community-popup {
  display: none;
}

/* ---------- Event page ---------- */

.event-page {
  min-height: 100svh;
  padding-top: var(--header-height);
}

.event-detail {
  padding-top: clamp(24px, 4vw, 56px);
  padding-bottom: clamp(72px, 10vw, 140px);
  animation: page-enter 520ms var(--ease-out) backwards;
}

@keyframes page-enter {
  from {
    opacity: 0;
    transform: translateY(12px);
  }
}

.event-back {
  display: inline-flex;
  align-items: center;
  min-height: 44px;
  margin-bottom: 20px;
  color: var(--muted);
  font-weight: 500;
  text-decoration: none;
  transition: color 180ms var(--ease-out);
}

.event-back:hover,
.event-back:focus-visible {
  color: var(--ink);
}

.event-detail-grid {
  display: grid;
  grid-template-columns: minmax(240px, 5fr) minmax(0, 7fr);
  align-items: start;
  gap: clamp(24px, 5vw, 80px);
}

.event-detail-poster {
  width: 100%;
  max-height: 80svh;
  object-fit: cover;
}

@media (min-width: 921px) {
  .event-detail-poster {
    position: sticky;
    top: calc(var(--header-height) + 24px);
  }
}

.event-detail h1 {
  font-size: var(--step-head);
  overflow-wrap: anywhere;
}

.event-detail-date {
  margin-top: 20px;
  font-size: var(--step-lead);
  line-height: 1.3;
}

.event-detail-venue {
  color: var(--muted);
  font-size: var(--step-lead);
  line-height: 1.3;
}

.event-detail-description {
  max-width: 40em;
  margin-top: clamp(32px, 4vw, 56px);
  font-size: var(--step-body);
  line-height: 1.6;
}

.event-detail-description p + p {
  margin-top: 1em;
}

.event-detail .primary-button {
  margin-top: 28px;
}

.ticket-selector {
  max-width: 760px;
  margin-top: clamp(28px, 3vw, 44px);
  padding: clamp(20px, 3vw, 32px);
  background: var(--surface);
}

.ticket-selector-heading h2 {
  font-size: var(--step-lead);
}

.ticket-pricing-phase {
  margin-top: 6px;
  color: var(--muted);
  font-size: var(--step-body);
}

.ticket-field {
  display: grid;
  gap: 8px;
  max-width: 320px;
  margin-top: 24px;
  color: var(--muted);
  font-size: var(--step-small);
  font-weight: 500;
}

.ticket-field select {
  min-height: 48px;
  padding: 0 12px;
  border: 1px solid var(--surface-3);
  border-radius: 0;
  background: var(--surface-2);
  color: var(--ink);
  font: 500 var(--step-body) / 1 var(--font-text);
}

.ticket-cover-note {
  margin-top: 20px;
  padding: 14px 16px;
  background: var(--accent-tint);
  color: var(--ink);
  font-size: var(--step-body);
  font-weight: 600;
  line-height: 1.35;
}

.ticket-options {
  display: grid;
  gap: 8px;
  margin-top: 20px;
}

.ticket-group {
  margin: 20px 0 4px;
  color: var(--muted);
  font-family: var(--font-text);
  font-size: var(--step-body);
  font-weight: 600;
  letter-spacing: 0;
  text-transform: none;
}

.ticket-options > .ticket-group:first-child {
  margin-top: 0;
}

.ticket-option {
  position: relative;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
  min-height: 68px;
  padding: 12px 16px;
  background: var(--surface-2);
  color: var(--ink);
  transition: background-color 200ms var(--ease-out);
}

.ticket-option:hover {
  background: var(--surface-3);
}

.ticket-option.is-selected {
  background: var(--accent-tint);
}

.ticket-option--last-few,
.ticket-option--exclusive {
  padding-top: 28px;
}

.ticket-option--featured {
  background: var(--surface-3);
}

.ticket-option--featured .ticket-option-copy strong,
.ticket-option--featured .ticket-option-price strong {
  font-size: var(--step-lead);
}

.ticket-option-status {
  position: absolute;
  top: 8px;
  left: 16px;
  color: var(--accent-text);
  font-size: var(--step-small);
  font-weight: 600;
  line-height: 1;
}

.ticket-option--exclusive .ticket-option-status {
  color: var(--ink);
}

.ticket-option--sold-out,
.ticket-option--sold-out:hover {
  background: var(--surface);
  color: var(--muted);
}

.ticket-option--sold-out .ticket-option-copy small,
.ticket-option--sold-out .ticket-option-price {
  color: var(--muted);
}

.ticket-option-copy {
  display: grid;
  flex: 1 1 auto;
  gap: 2px;
  min-width: 0;
}

.ticket-option-copy strong {
  font-size: var(--step-body);
  font-weight: 600;
}

.ticket-option-copy small {
  color: var(--muted);
  font-size: var(--step-small);
}

.ticket-option.is-selected .ticket-option-copy small {
  color: var(--ink);
}

.ticket-option-price {
  display: grid;
  gap: 2px;
  justify-items: end;
  font-variant-numeric: tabular-nums;
  white-space: nowrap;
}

.ticket-option-price strong {
  font-size: var(--step-body);
  font-weight: 600;
}

.ticket-option-price small {
  color: var(--accent-text);
  font-size: var(--step-small);
  font-weight: 500;
}

.ticket-option-ask {
  color: var(--muted);
}

.ticket-option-enquire {
  flex: none;
  min-height: 40px;
  padding: 0 16px;
  border: 0;
  background: var(--surface-3);
  color: var(--ink);
  font: 600 var(--step-small) / 1 var(--font-text);
  cursor: pointer;
  transition: background-color 180ms var(--ease-out), color 180ms var(--ease-out);
}

.ticket-option-enquire:hover,
.ticket-option-enquire:focus-visible {
  background: var(--ink);
  color: var(--bg);
}

.ticket-qty {
  display: inline-flex;
  flex: none;
  align-items: center;
  gap: 4px;
}

.ticket-qty button {
  position: relative;
  display: grid;
  place-items: center;
  width: 36px;
  height: 36px;
  padding: 0;
  border: 0;
  background: var(--surface-3);
  color: var(--ink);
  font: 600 1.125rem / 1 var(--font-text);
  cursor: pointer;
  transition:
    background-color 140ms var(--ease-out),
    color 140ms var(--ease-out),
    transform 200ms var(--ease-out);
}

/* Invisible hit area so a near miss still counts, without changing how the control looks.
   Stops short of the midpoint between the two, so plus and minus can never overlap. */
.ticket-qty button::after {
  content: "";
  position: absolute;
  inset: -6px -2px;
}

.ticket-qty button:hover:not(:disabled),
.ticket-qty button:focus-visible:not(:disabled) {
  background: var(--ink);
  color: var(--bg);
}

.ticket-qty button:active:not(:disabled) {
  transform: scale(0.9);
  transition-duration: 70ms;
}

.ticket-qty button:disabled {
  color: var(--muted);
  opacity: 0.45;
  cursor: not-allowed;
}

.ticket-qty [data-qty-value] {
  min-width: 24px;
  font-weight: 600;
  text-align: center;
  font-variant-numeric: tabular-nums;
}

.ticket-booking-bar {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
  margin-top: 16px;
  padding: 12px 12px 12px 16px;
  background: var(--surface-2);
}

/* The running total leads; the ticket count sits under it. */
.ticket-booking-bar span {
  display: flex;
  flex-direction: column-reverse;
  gap: 2px;
}

.ticket-booking-bar small {
  color: var(--muted);
  font-size: var(--step-small);
}

.ticket-booking-bar strong {
  font-size: var(--step-lead);
  font-weight: 600;
  font-variant-numeric: tabular-nums;
}

.ticket-booking-bar .primary-button {
  min-width: 150px;
  margin: 0;
}

.ticket-booking-bar .primary-button:not(:disabled) {
  animation: checkout-ready 420ms var(--ease-out);
}

@keyframes checkout-ready {
  from {
    transform: scale(0.96);
  }
}

.ticket-booking-bar .primary-button:disabled {
  background: var(--surface-3);
  color: var(--muted);
  cursor: not-allowed;
}

.event-moments {
  margin-top: clamp(64px, 10vw, 128px);
}

.event-moments h2 {
  margin-bottom: 24px;
}

.event-moments-grid {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 8px;
}

.event-moments-grid img {
  width: 100%;
  aspect-ratio: 4 / 5;
  object-fit: cover;
}

.event-moments-action {
  margin-top: 20px;
}

/* ---------- FØ Glimpses page ---------- */

.moments-page-main {
  padding-top: calc(var(--header-height) + clamp(32px, 6vw, 80px));
}

.moments-gallery-page {
  min-height: calc(100svh - 220px);
  padding-top: 0;
  padding-bottom: var(--section-gap);
}

/* Sized so GLIMPSES, its longest word, always fits the screen. */
.page-title {
  font-size: min(var(--step-display), calc((100vw - 2 * var(--margin)) / 8.6));
  line-height: 0.92;
}

.moments-page-copy {
  display: grid;
  justify-items: start;
  gap: 16px;
  margin: 24px 0 clamp(40px, 5vw, 72px);
}

.moments-ig-link {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  min-height: 44px;
  font-weight: 600;
  text-decoration: underline;
  text-decoration-thickness: 2px;
  text-decoration-color: var(--accent);
  text-underline-offset: 0.3em;
  transition: color 180ms var(--ease-out);
}

.moments-ig-link:hover,
.moments-ig-link:focus-visible {
  color: var(--accent-text);
}

.moments-event-list {
  display: grid;
  gap: clamp(64px, 8vw, 120px);
}

.moments-event {
  display: grid;
  gap: 20px;
}

.moments-event-header {
  display: flex;
  flex-wrap: wrap;
  align-items: baseline;
  justify-content: space-between;
  gap: 8px 24px;
}

.moments-event-header h2 {
  font-size: var(--step-head);
}

.moments-event-header > span {
  color: var(--muted);
  font-size: var(--step-body);
}

.moments-gallery-grid {
  display: grid;
  grid-template-columns: repeat(12, minmax(0, 1fr));
  gap: 8px;
}

.gallery-card {
  position: relative;
  grid-column: span 3;
  aspect-ratio: 4 / 5;
  margin: 0;
  overflow: hidden;
  background: var(--surface);
}

.gallery-card--wide {
  grid-column: span 6;
  aspect-ratio: 16 / 10;
}

.gallery-card img {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  transition: transform 800ms var(--ease-out);
}

.gallery-card:hover img,
.gallery-card.is-touch-active img {
  transform: scale(1.03);
}

/* ---------- Guide pages (raves in India) ---------- */

.discovery-main,
.editorial-page main {
  padding-top: 0;
}

.discovery-hero,
.editorial-hero {
  position: relative;
  display: grid;
  align-items: end;
  min-height: min(860px, 92svh);
  overflow: hidden;
  isolation: isolate;
}

.discovery-hero-image,
.discovery-hero-scrim,
.editorial-hero > img,
.editorial-hero-scrim {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
}

.discovery-hero-image,
.editorial-hero > img {
  z-index: -2;
  object-fit: cover;
  filter: grayscale(0.2) brightness(0.62);
}

/* A neutral scrim under text on a photograph, the one gradient the site keeps. */
.discovery-hero-scrim,
.editorial-hero-scrim {
  z-index: -1;
  background: linear-gradient(180deg, rgba(11, 11, 11, 0.2) 30%, rgba(11, 11, 11, 0.92) 100%);
}

.discovery-hero-copy,
.editorial-hero-copy {
  width: 100%;
  padding: calc(var(--header-height) + 64px) var(--margin) clamp(48px, 6vw, 96px);
}

.discovery-hero-copy h1,
.editorial-hero-copy h1 {
  max-width: 14em;
  margin-top: 0;
  font-size: clamp(2rem, 1rem + 3.4vw, 4.5rem);
}

.discovery-hero-copy > p:not(.eyebrow),
.editorial-hero-copy > p:not(.eyebrow) {
  max-width: 38em;
  margin-top: 24px;
  font-size: var(--step-lead);
  line-height: 1.4;
}

.discovery-hero-copy .eyebrow,
.editorial-hero-copy .eyebrow {
  margin-top: 16px;
}

.discovery-actions,
.editorial-actions {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 16px 28px;
  margin-top: 32px;
}

.intent-strip {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  align-items: center;
  gap: 32px;
}

.intent-strip p {
  max-width: 50em;
  color: var(--muted);
}

.intent-strip strong {
  color: var(--ink);
  font-weight: 600;
}

.discovery-statement {
  display: grid;
  grid-template-columns: minmax(0, 5fr) minmax(0, 7fr);
  gap: clamp(32px, 6vw, 96px);
  align-items: start;
}

.discovery-statement h2 {
  font-size: clamp(1.75rem, 1rem + 2vw, 3rem);
}

.discovery-prose p {
  max-width: 38em;
  font-size: var(--step-body);
  line-height: 1.65;
}

.discovery-prose p + p {
  margin-top: 1em;
}

.discovery-event-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(min(100%, 240px), 1fr));
  gap: clamp(16px, 2vw, 28px);
}

.discovery-event-card {
  display: grid;
  align-content: start;
  gap: 14px;
  min-width: 0;
  color: var(--ink);
  text-decoration: none;
}

.discovery-event-card img {
  width: 100%;
  aspect-ratio: 4 / 5;
  object-fit: cover;
  transition: transform 800ms var(--ease-out);
}

.discovery-event-card:hover img,
.discovery-event-card:focus-visible img {
  transform: scale(1.02);
}

.discovery-event-card > div {
  display: grid;
  gap: 6px;
}

.discovery-event-card time {
  color: var(--muted);
}

.discovery-event-card h3 {
  font-size: var(--step-lead);
}

.discovery-event-card p {
  color: var(--muted);
}

.city-rave-grid,
.discovery-faq-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(min(100%, 300px), 1fr));
  gap: 8px;
}

.city-rave-grid article,
.discovery-faq-grid article {
  padding: clamp(24px, 3vw, 40px);
  background: var(--surface);
}

.city-rave-grid h3,
.discovery-faq-grid h3 {
  margin-top: 12px;
  font-size: var(--step-lead);
}

.discovery-faq-grid h3 {
  margin-top: 0;
}

.city-rave-grid p:not(.eyebrow),
.discovery-faq-grid p {
  margin-top: 16px;
  color: var(--muted);
  line-height: 1.6;
}

.city-rave-grid a {
  display: inline-block;
  margin-top: 20px;
  font-weight: 600;
  text-decoration-thickness: 2px;
  text-decoration-color: var(--accent);
  text-underline-offset: 0.3em;
}

.city-rave-grid h3 a,
.scene-language-grid dt a {
  margin-top: 0;
  color: inherit;
  text-decoration: none;
}

.city-rave-grid h3 a:hover,
.scene-language-grid dt a:hover,
.city-rave-grid h3 a:focus-visible,
.scene-language-grid dt a:focus-visible {
  color: var(--accent-text);
}

.scene-language-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(min(100%, 280px), 1fr));
  gap: 8px;
  margin: 0;
}

.scene-language-grid > div {
  padding: clamp(24px, 3vw, 40px);
  background: var(--surface);
}

.scene-language-grid dt {
  font-family: var(--font-display);
  font-size: var(--step-lead);
  font-weight: 700;
  letter-spacing: -0.02em;
  line-height: 1;
  text-transform: uppercase;
}

.scene-language-grid dd {
  margin: 14px 0 0;
  color: var(--muted);
  line-height: 1.6;
}

.discovery-final-cta {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  align-items: end;
  gap: 40px;
  margin-top: var(--section-gap);
  padding: clamp(40px, 6vw, 96px) var(--margin);
  background: var(--accent);
  color: var(--accent-ink);
}

.discovery-final-cta h2 {
  max-width: 16em;
  font-size: clamp(1.75rem, 1rem + 2vw, 3rem);
}

.discovery-final-cta .eyebrow,
.discovery-final-cta p:not(.eyebrow) {
  color: var(--accent-ink);
}

.discovery-final-cta p:not(.eyebrow) {
  max-width: 36em;
  margin-top: 16px;
}

.discovery-final-cta .primary-button {
  background: var(--bg);
  color: var(--ink);
}

.discovery-final-cta .primary-button:hover,
.discovery-final-cta .primary-button:focus-visible {
  background: var(--ink);
  color: var(--bg);
}

.discovery-final-cta .section-action {
  color: var(--accent-ink);
  text-decoration-color: var(--accent-ink);
}

.editorial-body {
  max-width: 1180px;
  padding-bottom: var(--section-gap);
}

.editorial-copy-section {
  display: grid;
  gap: 20px;
}

.editorial-copy-section + .editorial-copy-section {
  margin-top: clamp(64px, 8vw, 120px);
}

.editorial-copy-section h2 {
  max-width: 16em;
}

.editorial-copy-section div > p {
  max-width: 40em;
  margin-top: 20px;
  font-size: var(--step-body);
  line-height: 1.7;
}

.editorial-related {
  display: grid;
  gap: 4px;
  margin-top: var(--section-gap);
}

.editorial-related .eyebrow {
  margin-bottom: 12px;
}

.editorial-related a {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 24px;
  max-width: 780px;
  min-height: 64px;
  padding: 0 20px;
  background: var(--surface);
  font-size: var(--step-lead);
  font-weight: 600;
  text-decoration: none;
  transition: background-color 180ms var(--ease-out), color 180ms var(--ease-out);
}

.editorial-related a:hover,
.editorial-related a:focus-visible {
  background: var(--ink);
  color: var(--bg);
}

/* ---------- Mobile quick bar ---------- */

.mobile-quickbar {
  display: none;
}

/* Text links keep their look but get a target a thumb can hit. */
.site-footer a,
.contact-links a,
.moments-tagline a,
.city-rave-grid a,
.scene-language-grid dt a {
  display: inline-flex;
  align-items: center;
  min-width: 44px;
  min-height: 44px;
}

/* ---------- Motion ---------- */

/* Entrances only apply once the head script has marked the page, and that mark
   is dropped again if the page script never starts, so content is never stuck
   hidden. The page script adds .is-in as each part scrolls into view. */
.js-motion :is(
  .section-heading,
  .hot-carousel,
  .event-feature,
  .discount-note,
  .month-card,
  .moments-title,
  .moments-tagline,
  .join-band-copy,
  .join-band-word,
  .contact-ask,
  .contact-links li
) {
  opacity: 0;
  transform: translateY(24px);
  transition:
    opacity 700ms var(--ease-out),
    transform 900ms var(--ease-out);
  transition-delay: calc(var(--reveal-index, 0) * 80ms);
}

.js-motion :is(
  .section-heading,
  .hot-carousel,
  .event-feature,
  .discount-note,
  .month-card,
  .moments-title,
  .moments-tagline,
  .join-band-copy,
  .join-band-word,
  .contact-ask,
  .contact-links li
).is-in {
  opacity: 1;
  transform: none;
}

/* The prints keep their tilt while they rise. */
.js-motion .moment-print {
  opacity: 0;
  transition:
    opacity 700ms var(--ease-out),
    transform 900ms var(--ease-out);
  transition-delay: calc(var(--reveal-index, 0) * 90ms);
}

.js-motion .moment-print--a {
  transform: rotate(-6deg) translateY(48px);
}

.js-motion .moment-print--b {
  transform: rotate(4deg) translateY(80px);
}

.js-motion .moment-print--c {
  transform: rotate(-3deg) translateY(56px);
}

.js-motion .moment-print.is-in {
  opacity: 1;
}

.js-motion .moment-print--a.is-in {
  transform: rotate(-6deg);
}

.js-motion .moment-print--b.is-in {
  transform: rotate(4deg) translateY(32px);
}

.js-motion .moment-print--c.is-in {
  transform: rotate(-3deg) translateY(8px);
}

.js-motion .moment-print.is-in:hover {
  transform: rotate(0deg) scale(1.02);
  transition-delay: 0ms;
}

/* The signature move: the chrome wordmark resolves out of the dark, then the copy. */
.js-motion .hero-wordmark {
  animation: wordmark-in 1100ms var(--ease-out) backwards;
}

.js-motion .hero-tag {
  animation: fade-up 700ms var(--ease-out) 380ms backwards;
}

.js-motion .hero-next {
  animation: fade-up 700ms var(--ease-out) 560ms backwards;
}

@keyframes wordmark-in {
  from {
    opacity: 0;
    transform: scale(0.96);
  }
}

@keyframes fade-up {
  from {
    opacity: 0;
    transform: translateY(20px);
  }
}

/* ---------- Responsive ---------- */

@media (max-width: 1100px) {
  .gallery-card {
    grid-column: span 6;
  }

  .gallery-card--wide {
    grid-column: span 12;
  }
}

@media (max-width: 920px) {
  .nav-cluster {
    display: none;
  }

  .header-inner {
    grid-template-columns: 1fr auto;
  }

  .discovery-statement,
  .discovery-final-cta,
  .intent-strip,
  .contact-close {
    grid-template-columns: minmax(0, 1fr);
  }

  .events-section {
    display: block;
  }

  .discount-note {
    margin-top: 32px;
  }
}

@media (max-width: 760px) {
  :root {
    --header-height: 56px;
  }

  body {
    padding-bottom: calc(60px + env(safe-area-inset-bottom));
  }

  .header-brand {
    width: 96px;
  }

  .hero {
    grid-template-columns: minmax(0, 1fr);
    grid-template-rows: 1fr auto;
    min-height: calc(100svh - 60px);
    padding-bottom: 24px;
  }

  .hero-video--desktop {
    display: none;
  }

  .hero-video--mobile {
    display: block;
  }

  .hero-lockup {
    width: min(84vw, 430px);
  }

  .hero-next {
    grid-column: 1;
    justify-self: start;
    justify-items: start;
    text-align: left;
  }

  .focus-event {
    grid-template-columns: minmax(0, 1fr);
  }

  .focus-copy h3 {
    font-size: 1.5rem;
  }

  .focus-cta {
    width: 100%;
  }

  .focus-actions,
  .event-discovery {
    display: grid;
    grid-template-columns: minmax(0, 1fr);
    width: 100%;
  }

  .poster-wall {
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 20px 12px;
  }

  .event-copy h3 {
    font-size: 1.0625rem;
  }

  .month-card {
    min-height: 320px;
  }

  /* Same flyer move as the hero: each word fills the width. */
  .moments-title span {
    display: block;
  }

  .moments-title span:first-child {
    font-size: calc((100vw - 2 * var(--margin)) / 3.4);
    line-height: 0.9;
  }

  .moments-title span:last-child {
    font-size: calc((100vw - 2 * var(--margin)) / 8.4);
  }

  .moment-print {
    width: 33vw;
    margin: 0 -2.5vw;
    padding: 5px;
  }

  .join-band {
    min-height: 38svh;
  }

  .join-band-word {
    font-size: 28vw;
  }

  .contact-ask .primary-button {
    width: 100%;
  }

  .event-detail {
    padding-top: 12px;
    padding-bottom: 84px;
  }

  .event-detail-grid {
    grid-template-columns: minmax(0, 1fr);
    gap: 20px;
  }

  .event-back {
    margin-bottom: 8px;
  }

  .event-detail-date {
    margin-top: 12px;
  }

  .ticket-selector {
    margin-top: 24px;
    padding: 18px 14px;
    scroll-margin-block: 10vh;
  }

  .ticket-field {
    max-width: none;
    margin-top: 16px;
  }

  .ticket-options {
    gap: 6px;
    margin-top: 14px;
  }

  .ticket-option {
    min-height: 60px;
    gap: 10px;
    padding: 10px 12px;
  }

  .ticket-option-status {
    left: 12px;
  }

  .ticket-qty button {
    width: 40px;
    height: 40px;
  }

  .ticket-booking-bar {
    gap: 12px;
    padding: 10px 10px 10px 14px;
  }

  .ticket-booking-bar .primary-button {
    min-width: 0;
  }

  .event-moments-grid {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }

  .moments-gallery-grid {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }

  .gallery-card,
  .gallery-card--wide {
    grid-column: auto;
    aspect-ratio: 4 / 5;
  }

  .discovery-hero-copy h1,
  .editorial-hero-copy h1 {
    font-size: 7.4vw;
  }

  .discovery-actions,
  .editorial-actions {
    display: grid;
    grid-template-columns: minmax(0, 1fr);
  }

  .discovery-actions .primary-button,
  .editorial-actions .primary-button {
    width: 100%;
  }

  .community-popup {
    left: 8px;
    right: 8px;
    bottom: calc(68px + env(safe-area-inset-bottom));
    max-width: none;
  }

  .mobile-quickbar {
    position: fixed;
    inset: auto 0 0;
    z-index: 40;
    display: grid;
    grid-template-columns: repeat(var(--quickbar-columns, 3), minmax(0, 1fr));
    gap: 4px;
    padding: 4px 4px calc(4px + env(safe-area-inset-bottom));
    background: var(--bg);
    animation: bar-rise 320ms var(--ease-out) backwards;
  }

  .mobile-quickbar.has-event-ticket-bar {
    display: block;
    padding: 0 0 env(safe-area-inset-bottom);
  }

  .mobile-quickbar.has-event-ticket-bar .mobile-quickbar-link {
    display: none;
  }

  .mobile-quickbar-link {
    display: grid;
    place-items: center;
    min-height: 52px;
    padding: 8px 6px;
    background: var(--surface-2);
    color: var(--ink);
    font-size: 0.9375rem;
    font-weight: 500;
    line-height: 1;
    text-align: center;
    text-decoration: none;
    transition:
      background-color 160ms var(--ease-out),
      color 160ms var(--ease-out),
      transform 220ms var(--ease-out);
  }

  .mobile-quickbar-link[hidden] {
    display: none;
  }

  .mobile-quickbar-link--primary {
    background: var(--action-fill);
    color: var(--accent-ink);
    font-weight: 600;
  }

  .mobile-quickbar-link:hover,
  .mobile-quickbar-link:focus-visible {
    background: var(--ink);
    color: var(--bg);
  }

  .event-ticket-bar {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 16px;
    min-height: 68px;
    padding: 10px 10px 10px 16px;
    background: var(--surface-2);
    /* Each mode change restarts its own animation, so swapping between the standard
       bar and the price bar reads as one bar changing, not two flickering. */
    animation: bar-rise 320ms var(--ease-out) backwards;
  }

  .event-ticket-bar[hidden] {
    display: none;
  }

  .event-ticket-bar span {
    display: grid;
    min-width: 0;
    gap: 2px;
  }

  .event-ticket-bar small {
    overflow: hidden;
    color: var(--muted);
    font-size: var(--step-small);
    text-overflow: ellipsis;
    white-space: nowrap;
  }

  .event-ticket-bar strong {
    font-size: var(--step-lead);
    font-weight: 600;
    white-space: nowrap;
  }

  .event-ticket-bar-action {
    flex: none;
    min-width: 140px;
    min-height: 48px;
    padding: 0 18px;
    border: 0;
    background: var(--action-fill);
    color: var(--accent-ink);
    font: 600 var(--step-body) / 1 var(--font-text);
    cursor: pointer;
    transition: transform 220ms var(--ease-out);
  }

  @keyframes bar-rise {
    from {
      opacity: 0;
      transform: translateY(14px);
    }
  }
}

/* The smallest phones: ticket rows give the steppers back a little room. */
@media (max-width: 360px) {
  .ticket-selector {
    padding: 16px 10px;
  }

  .ticket-option {
    gap: 8px;
    padding: 10px;
  }

  .ticket-qty {
    gap: 2px;
  }

  .ticket-qty button {
    width: 34px;
    height: 34px;
  }
}

@media (hover: none) {
  .event-feature:active .event-art img,
  .event-feature.is-touch-active .event-art img {
    transform: scale(1.04);
  }

  .gallery-card:active img {
    transform: scale(1.03);
  }
}

@media (prefers-reduced-motion: reduce) {
  *,
  *::before,
  *::after {
    scroll-behavior: auto !important;
    transition-duration: 0.001ms !important;
    animation-duration: 0.001ms !important;
    animation-delay: 0ms !important;
  }

  .js-motion * {
    opacity: 1 !important;
  }
}

/* Sits under the Buy now bar so the terms are seen before the handoff
   to WhatsApp, not only in the footer. */
.ticket-terms-note {
  margin: 10px 2px 0;
  color: var(--muted);
  font-size: 0.74rem;
  line-height: 1.45;
}
.ticket-terms-note a {
  color: inherit;
  text-decoration: underline;
  text-underline-offset: 2px;
}
.ticket-terms-note a:hover,
.ticket-terms-note a:focus-visible {
  color: #e7f1ee;
}

/* Halloween phase names, set per event by phaseTheme in ticketCatalog.
   Flat red on black, no gradient, so it reads as the house style with
   the dial turned rather than a different site. */
/* Halloween phase labels. The earlier version dropped cartoon beads off the
   underline. This one just bleeds: the rule darkens and seeps downward into
   nothing, slowly enough that you notice it on the second look. */
[data-phase-theme="blood"] .ticket-pricing-phase {
  position: relative;
  display: inline-block;
  padding-bottom: 7px;
  color: #c0352c;
  font-weight: 600;
  letter-spacing: 0.2em;
  text-transform: uppercase;
  animation: blood-breathe 9s ease-in-out infinite;
}

[data-phase-theme="blood"] .ticket-pricing-phase::before {
  content: "";
  position: absolute;
  left: 0;
  right: 0;
  bottom: 4px;
  height: 1px;
  background: #8e221c;
}

[data-phase-theme="blood"] .ticket-pricing-phase::after {
  content: "";
  position: absolute;
  left: 0;
  right: 0;
  bottom: 0;
  height: 4px;
  background: linear-gradient(to bottom, rgba(142, 34, 28, 0.85), rgba(142, 34, 28, 0));
  transform-origin: top;
  animation: blood-seep 9s ease-in-out infinite;
}

@keyframes blood-breathe {
  0%,
  100% {
    color: #a82a24;
  }
  50% {
    color: #d4453a;
  }
}

@keyframes blood-seep {
  0%,
  100% {
    transform: scaleY(0.6);
    opacity: 0.45;
  }
  50% {
    transform: scaleY(2.6);
    opacity: 0.9;
  }
}
[data-phase-theme="blood"] .ticket-option-copy small {
  color: #b8302a;
  font-weight: 600;
  letter-spacing: 0.14em;
}

[data-phase-theme="blood"] .ticket-option--sold-out .ticket-option-copy small {
  color: var(--muted);
}

/* Halloween weekend. Oxblood on black with a film grain and a slow vignette,
   not orange and not pumpkins. The brief is a horror title card, so the only
   movement is a breathe you half notice. */
.halloween-section {
  position: relative;
  isolation: isolate;
  overflow: hidden;
  padding-block: clamp(36px, 6vw, 72px);
  border-top: 1px solid rgba(142, 34, 28, 0.35);
  border-bottom: 1px solid rgba(142, 34, 28, 0.35);
  background: #090405;
}

.halloween-section::before {
  content: "";
  position: absolute;
  inset: -20%;
  z-index: -2;
  background: radial-gradient(60% 50% at 50% 0%, rgba(142, 34, 28, 0.3), transparent 70%);
  animation: halloween-vignette 11s ease-in-out infinite;
}

.halloween-grain {
  position: absolute;
  inset: 0;
  z-index: -1;
  opacity: 0.16;
  pointer-events: none;
  background-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='160' height='160'><filter id='n'><feTurbulence type='fractalNoise' baseFrequency='0.9' numOctaves='3'/></filter><rect width='160' height='160' filter='url(%23n)' opacity='0.5'/></svg>");
  animation: halloween-grain 1.1s steps(3) infinite;
}

@keyframes halloween-vignette {
  0%,
  100% {
    opacity: 0.55;
  }
  50% {
    opacity: 1;
  }
}

@keyframes halloween-grain {
  0% {
    transform: translate(0, 0);
  }
  33% {
    transform: translate(-3%, 2%);
  }
  66% {
    transform: translate(2%, -3%);
  }
  100% {
    transform: translate(0, 0);
  }
}

.halloween-head {
  margin-bottom: clamp(20px, 3vw, 32px);
}

.halloween-head .eyebrow {
  color: #a8554f;
  letter-spacing: 0.24em;
  text-transform: uppercase;
}

.halloween-head h2 {
  margin-top: 8px;
  color: #f2e9e8;
}

.halloween-head h2 span {
  position: relative;
  display: inline-block;
  text-shadow: 0 0 22px rgba(168, 42, 36, 0.55);
  animation: halloween-title 9s ease-in-out infinite;
}

@keyframes halloween-title {
  0%,
  100% {
    text-shadow: 0 0 14px rgba(168, 42, 36, 0.35);
  }
  50% {
    text-shadow: 0 0 30px rgba(212, 69, 58, 0.7);
  }
}

.halloween-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(260px, 1fr));
  gap: clamp(14px, 2vw, 22px);
}

.halloween-card {
  position: relative;
  display: grid;
  grid-template-rows: auto 1fr;
  overflow: hidden;
  border: 1px solid rgba(142, 34, 28, 0.4);
  background: #0d0607;
  color: inherit;
  text-decoration: none;
  transition: border-color 200ms ease, transform 200ms ease;
}

.halloween-card:hover,
.halloween-card:focus-visible {
  border-color: rgba(212, 69, 58, 0.85);
  outline: none;
  transform: translateY(-2px);
}

.halloween-art {
  position: relative;
  aspect-ratio: 4 / 5;
  overflow: hidden;
}

.halloween-art img {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: cover;
  filter: grayscale(0.55) contrast(1.1) brightness(0.8) sepia(0.25) hue-rotate(-18deg);
  transition: filter 320ms ease;
}

.halloween-card:hover .halloween-art img,
.halloween-card:focus-visible .halloween-art img {
  filter: grayscale(0) contrast(1.05) brightness(0.95);
}

.halloween-copy {
  display: grid;
  align-content: start;
  gap: 5px;
  padding: 16px 18px 18px;
}

.halloween-copy h3 {
  color: #f2e9e8;
  font-size: clamp(1.15rem, 1.6vw, 1.5rem);
  letter-spacing: 0.04em;
}

.halloween-when {
  color: #d4453a;
  font-size: 0.86rem;
  letter-spacing: 0.1em;
  text-transform: uppercase;
}

.halloween-where {
  color: var(--muted);
  font-size: 0.86rem;
}

.halloween-cta {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  margin-top: 10px;
  color: #f2e9e8;
  font-family: "Barlow Condensed", sans-serif;
  font-size: 0.78rem;
  font-weight: 600;
  letter-spacing: 0.18em;
  text-transform: uppercase;
}

.halloween-cta svg {
  width: 16px;
  height: 16px;
  fill: none;
  stroke: currentColor;
  stroke-width: 2;
}

/* Red light on every piece of text in Halloween surfaces: the home
   section, a themed event page and the FØ Halloween page. Headings
   carry a wider throw than body copy so the hierarchy still reads. */
:root {
  --blood-glow: 0 0 18px rgba(196, 50, 42, 0.5), 0 0 4px rgba(255, 120, 110, 0.35);
  --blood-glow-soft: 0 0 12px rgba(196, 50, 42, 0.36);
}

.halloween-section,
[data-event-theme="blood"],
.halloween-page {
  text-shadow: var(--blood-glow-soft);
}

.halloween-section h1,
.halloween-section h2,
.halloween-section h3,
.halloween-section .halloween-when,
.halloween-section .halloween-cta,
[data-event-theme="blood"] h1,
[data-event-theme="blood"] h2,
[data-event-theme="blood"] h3,
[data-event-theme="blood"] .ticket-pricing-phase,
[data-event-theme="blood"] .ticket-option-price strong,
.halloween-page h1,
.halloween-page h2,
.halloween-page h3 {
  text-shadow: var(--blood-glow);
}

/* The buy button keeps its own contrast; a glow on it only muddies the
   one thing that has to stay legible. */
[data-event-theme="blood"] .primary-button,
[data-event-theme="blood"] .ticket-booking-bar,
.halloween-page .primary-button {
  text-shadow: none;
}

/* The standalone FØ Halloween page. Same oxblood world as the home
   section, with the grain fixed behind the whole page. */
body.halloween-page {
  background: #080405;
}

body.halloween-page > .halloween-grain {
  position: fixed;
  inset: 0;
  z-index: 0;
  opacity: 0.13;
}

body.halloween-page > *:not(.halloween-grain) {
  position: relative;
  z-index: 1;
}

.halloween-hero {
  padding-block: clamp(44px, 8vw, 96px);
}

.halloween-hero .eyebrow {
  color: #a8554f;
  letter-spacing: 0.24em;
  text-transform: uppercase;
}

.halloween-hero h1 {
  margin-top: 10px;
  color: #f4ebea;
  font-size: clamp(2.6rem, 8vw, 5.2rem);
  line-height: 0.95;
}

.halloween-hero h1 span {
  display: inline-block;
  animation: halloween-title 9s ease-in-out infinite;
}

.halloween-lede {
  max-width: 54ch;
  margin-top: 18px;
  color: #cdbcba;
  font-size: clamp(1rem, 1.5vw, 1.15rem);
  line-height: 1.55;
}

.halloween-page .halloween-section {
  border: 0;
  background: transparent;
}

.halloween-page .halloween-section::before,
.halloween-page .halloween-section .halloween-grain {
  display: none;
}

.halloween-note {
  padding-bottom: clamp(48px, 8vw, 96px);
}

.halloween-note h2 {
  color: #f4ebea;
}

.halloween-note p {
  max-width: 60ch;
  margin-top: 12px;
  color: #cdbcba;
  line-height: 1.55;
}

.halloween-actions {
  display: flex;
  flex-wrap: wrap;
  gap: 12px;
  margin-top: 22px;
}

/* The home section is a single tap target for /halloween. The link is
   stretched over the whole block, above the grain but below nothing
   else, so there is no dead space inside the section. */
.halloween-section .halloween-link {
  position: absolute;
  inset: 0;
  z-index: 3;
}

.halloween-section .halloween-link:focus-visible {
  outline: 2px solid rgba(212, 69, 58, 0.9);
  outline-offset: -4px;
}

.halloween-more {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  margin-top: 12px;
  color: #f2e9e8;
  font-family: "Barlow Condensed", sans-serif;
  font-size: 0.78rem;
  font-weight: 600;
  letter-spacing: 0.18em;
  text-transform: uppercase;
}

.halloween-more svg {
  width: 16px;
  height: 16px;
  fill: none;
  stroke: currentColor;
  stroke-width: 2;
  transition: transform 200ms ease;
}

.halloween-section:hover .halloween-more svg,
.halloween-section:focus-within .halloween-more svg {
  transform: translateX(4px);
}

/* Cards are visuals now, not links, so the hover belongs to the section. */
.halloween-section:hover .halloween-card,
.halloween-section:focus-within .halloween-card {
  border-color: rgba(212, 69, 58, 0.7);
}

.halloween-section:hover .halloween-art img,
.halloween-section:focus-within .halloween-art img {
  filter: grayscale(0) contrast(1.05) brightness(0.95);
}