/* ============================================================
   INDEX PAGE — SECTION SYSTEM
============================================================ */
.page-section {
  position: relative;
  width: 100%;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  overflow: hidden;
}

#section-hero {
  min-height: 100vh;
  min-height: calc(var(--vh, 1vh) * 100);
  min-height: 100dvh;
  background: transparent;
  /* Sticky: hero pins at top while content sections scroll over it */
  position: sticky;
  top: 0;
  z-index: 1;
}

/* Sections that still want the solid bg (events / mission / brand) */
#section-events,
#section-mission,
#section-brand {
  position: relative;
  z-index: 2;
  background: var(--bg);
}

/* Venues + everything below stay transparent so the fixed circuit
   canvas + bg-dim show through, giving the "glowing circuit behind
   the gray" effect. */
#section-venues,
#section-posh,
#section-join {
  position: relative;
  z-index: 2;
  background: transparent;
}

/* Subtle top shadow so sections with a solid bg visually lift off
   the hero. */
#section-events::before,
#section-mission::before {
  content: '';
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  height: 60px;
  background: linear-gradient(to bottom, var(--bg) 0%, transparent 100%);
  z-index: 1;
  pointer-events: none;
}

#site-main {
  position: relative;
  z-index: 2;
}

/* ============================================================
   HERO — VIDEO BACKGROUND
============================================================ */
.hero-video-bg {
  position: absolute;
  inset: 0;
  z-index: 0;
  overflow: hidden;
}

/* Hero video — native <video> elements rendered directly. Two
   videos are stacked; .active controls a GPU-composited opacity
   crossfade. translateZ promotes them onto their own compositor
   layer so opacity changes don't trigger main-thread paint. */
.hero-video {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  opacity: 0;
  transition: opacity 1s ease-in-out;
  pointer-events: none;
  /* Hardware acceleration */
  transform: translateZ(0);
  -webkit-transform: translateZ(0);
  backface-visibility: hidden;
  -webkit-backface-visibility: hidden;
  /* Black bg before first frame so users never see a flash */
  background: #000;
}

.hero-video.active {
  opacity: 1;
}

/* Hide iOS/WebKit native play-button overlay so the background video never
   shows controls on mobile (Safari shows a large start-playback button when
   autoplay is deferred under Low Power Mode). */
.hero-video {
  -webkit-appearance: none;
  appearance: none;
  pointer-events: none;
}
.hero-video::-webkit-media-controls,
.hero-video::-webkit-media-controls-panel,
.hero-video::-webkit-media-controls-panel-container,
.hero-video::-webkit-media-controls-start-playback-button,
.hero-video::-webkit-media-controls-overlay-play-button,
.hero-video::-webkit-media-controls-play-button,
.hero-video::-webkit-media-controls-fullscreen-button,
.hero-video::-webkit-media-controls-enclosure,
.hero-video::-webkit-media-controls-overlay-enclosure {
  display: none !important;
  -webkit-appearance: none;
  appearance: none;
  opacity: 0 !important;
  pointer-events: none !important;
  visibility: hidden !important;
}

/* Low Power Mode fallback. iOS fires `suspend` on the <video>
   when LPM blocks autoplay after the first few frames have
   loaded. JS reacts by adding .lpm-suspended to .hero-video-bg
   and inserting an <img> using the same poster URL — that hides
   the native "tap to play" button and gives a clean still
   background instead. The class is removed when `play` fires. */
.hero-video-lpm-still {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  pointer-events: none;
  user-select: none;
  -webkit-user-drag: none;
  background: #000;
  display: none;
}

.hero-video-bg.lpm-suspended .hero-video-lpm-still {
  display: block;
}

.hero-video-bg.lpm-suspended .hero-video {
  display: none !important;
}

.hero-video-overlay {
  position: absolute;
  inset: 0;
  z-index: 1;
  background:
    radial-gradient(ellipse at center, rgba(0,0,0,0.50) 0%, rgba(0,0,0,0.66) 70%, rgba(0,0,0,0.80) 100%),
    linear-gradient(to bottom, rgba(0,0,0,0.58) 0%, rgba(0,0,0,0.50) 40%, rgba(0,0,0,0.62) 75%, rgba(0,0,0,0.85) 100%);
  pointer-events: none;
}

.hero-circuit-svg {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  z-index: 3;
  pointer-events: none;
  opacity: 0.28;
}

/* Hide decorative circuit overlay on narrow viewports where the slice
   crop forces traces behind the hero text. */
@media (max-width: 767px) {
  .hero-circuit-svg {
    display: none;
  }
}

.hc-bus    { stroke: var(--cyan); stroke-width: 1.5; fill: none; opacity: 0; }
.hc-vert   { stroke: var(--blue); stroke-width: 1;   fill: none; opacity: 0; }
.hc-corner { stroke: var(--cyan); stroke-width: 1;   fill: none; opacity: 0; }
.hc-pin    { stroke: var(--lime); stroke-width: 0.8; fill: none; opacity: 0.5; }
.hc-ic     { stroke: var(--cyan); stroke-width: 1.5; fill: rgba(0,255,65,0.04); }
.hc-node   { fill: var(--cyan); }

/* ============================================================
   HERO HUB
============================================================ */
.hero-hub {
  position: relative;
  z-index: 5;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: clamp(16px, 3vh, 48px);
  max-width: min(1500px, 90vw);
  width: 100%;
  padding: clamp(80px, 10vh, 160px) clamp(16px, 4vw, 100px) clamp(24px, 3vh, 64px);
}

/* Compact gap on short screens to prevent overflow */
@media (max-height: 640px) {
  .hero-hub {
    gap: 12px;
    padding-top: clamp(64px, 8vh, 80px);
  }
}

/* Large screens (1600px+): bump up column gap and row spacing */
@media (min-width: 1600px) {
  .hero-hub {
    row-gap: clamp(24px, 2.5vh, 48px);
  }
}

/* Desktop: title left, events right — single row, two columns */
@media (min-width: 1024px) {
  .hero-hub {
    display: grid;
    grid-template-columns: minmax(0, 1fr) minmax(0, 1.15fr);
    column-gap: clamp(40px, 4.5vw, 120px);
    align-items: center;
  }
}

/* ── Zone 1: Brand Header ── */
.hero-brand {
  text-align: center;
}

@media (min-width: 1024px) {
  .hero-brand {
    grid-column: 1;
    text-align: left;
    align-self: center;
  }
}

.hero-eyebrow {
  font-family: var(--font-mono);
  font-size: clamp(10px, 0.9vw, 20px);
  letter-spacing: 0.4em;
  color: rgba(0, 255, 65, 0.6);
  text-transform: uppercase;
  margin-bottom: 12px;
}

.hero-title {
  font-family: var(--font-head);
  font-size: clamp(28px, 9vw, 120px);
  font-weight: 900;
  letter-spacing: 0.04em;
  line-height: 1.05;
  color: var(--cyan);
  text-shadow: 0 0 30px rgba(0, 255, 65, 0.5), 0 0 60px rgba(0, 255, 65, 0.2);
  position: relative;
  margin-bottom: 16px;
  /* Prevent horizontal overflow: allow word wrap on narrow viewports */
  max-width: 100%;
  word-break: normal;
  overflow-wrap: break-word;
  hyphens: none;
}

/* Tablet+: restore the wider letter-spacing for the luxury look */
@media (min-width: 640px) {
  .hero-title {
    letter-spacing: 0.06em;
  }
}

@media (min-width: 900px) {
  .hero-title {
    letter-spacing: 0.08em;
  }
}

/* Left column at desktop: scale with viewport up to 2560px+ */
@media (min-width: 1024px) {
  .hero-title {
    font-size: clamp(28px, 4.5vw, 96px);
  }
}

@media (max-height: 640px) {
  .hero-title { font-size: clamp(28px, 4.5vw, 72px); }
}

.hero-title::before,
.hero-title::after {
  content: attr(data-text);
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  opacity: 0;
}

.hero-title::before {
  color: #ff003c;
  clip-path: polygon(0 20%, 100% 20%, 100% 40%, 0 40%);
}

.hero-title::after {
  color: var(--blue);
  clip-path: polygon(0 60%, 100% 60%, 100% 80%, 0 80%);
}

.hero-title.glitch::before {
  animation: glitch-before 0.3s steps(2) forwards;
  opacity: 0.8;
}

.hero-title.glitch::after {
  animation: glitch-after 0.3s steps(2) forwards;
  opacity: 0.8;
}

@keyframes glitch-before {
  0%   { transform: translate(-3px,  1px); clip-path: polygon(0 15%, 100% 15%, 100% 35%, 0 35%); }
  33%  { transform: translate( 3px, -1px); clip-path: polygon(0 50%, 100% 50%, 100% 70%, 0 70%); }
  66%  { transform: translate(-2px,  2px); clip-path: polygon(0  5%, 100%  5%, 100% 25%, 0 25%); }
  100% { transform: translate(0, 0); opacity: 0; }
}

@keyframes glitch-after {
  0%   { transform: translate( 3px, -1px); clip-path: polygon(0 65%, 100% 65%, 100% 85%, 0 85%); }
  33%  { transform: translate(-3px,  1px); clip-path: polygon(0 30%, 100% 30%, 100% 50%, 0 50%); }
  66%  { transform: translate( 2px, -2px); clip-path: polygon(0 75%, 100% 75%, 100% 95%, 0 95%); }
  100% { transform: translate(0, 0); opacity: 0; }
}

.hero-tagline {
  font-family: var(--font-body);
  font-size: clamp(12px, 1.4vw, 26px);
  font-weight: 300;
  letter-spacing: 0.25em;
  color: rgba(0, 255, 65, 0.7);
  text-transform: uppercase;
  margin-bottom: 0;
}

/* ── Zone 2: Hero Events Panel ── */
/* No box — events float freely, no background or border */
.hero-events-panel {
  width: 100%;
  display: flex;
  flex-direction: column;
  gap: clamp(20px, 3vh, 36px);
}

.hero-events-panel .events-block {
  margin-bottom: 0;
}

.upcoming-empty-note {
  margin: 0;
  padding: clamp(14px, 2vh, 22px) 0 0;
  font-family: var(--font-mono, "Share Tech Mono", monospace);
  font-size: clamp(12px, 1vw, 14px);
  letter-spacing: 0.04em;
  color: rgba(0, 255, 65, 0.55);
  text-align: center;
}

.hero-join-cta {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 10px;
  padding: clamp(20px, 3vh, 32px) clamp(16px, 3vw, 28px);
  border-radius: 14px;
  background: linear-gradient(
    135deg,
    rgba(15, 255, 193, 0.04),
    rgba(196, 255, 0, 0.02) 60%,
    rgba(0, 0, 0, 0)
  );
  border: 1px solid rgba(15, 255, 193, 0.18);
  text-align: center;
}

.hero-join-eyebrow {
  font-family: var(--font-mono, "Share Tech Mono", monospace);
  font-size: clamp(10px, 0.8vw, 12px);
  letter-spacing: 0.34em;
  text-transform: uppercase;
  color: var(--cyan);
}

.hero-join-heading {
  font-family: var(--font-head);
  font-size: clamp(20px, 2.6vw, 32px);
  font-weight: 800;
  letter-spacing: 0.14em;
  color: #ffffff;
  margin: 0;
  text-transform: uppercase;
  line-height: 1.05;
}

.hero-join-body {
  font-family: var(--font-body);
  font-size: clamp(13px, 1vw, 15px);
  color: rgba(255, 255, 255, 0.7);
  margin: 0;
  max-width: 42ch;
  line-height: 1.55;
}

.hero-join-btn {
  margin-top: 4px;
}

@media (min-width: 1024px) {
  .hero-join-cta {
    align-items: flex-start;
    text-align: left;
  }
  .hero-join-body {
    margin-left: 0;
  }
}

@media (max-height: 720px) and (min-width: 1024px) {
  .hero-join-cta {
    padding: clamp(14px, 2vh, 22px) clamp(16px, 2vw, 24px);
    gap: 6px;
  }
  .hero-join-body {
    display: none;
  }
}

@media (min-width: 1024px) {
  .hero-events-panel {
    grid-column: 2;
  }
}

/* Hero card heights: constrain so they don't dominate the hub layout.
   With 4/5 ratio, max-width = max-height * 4/5 implicitly. */
/* Hero upcoming carousel: cap the frame height (meta row sits below it) */
#section-hero .event-card-frame {
  max-height: 220px;
}

@media (min-width: 640px) {
  #section-hero .event-card-frame { max-height: 260px; }
}

@media (min-width: 1024px) {
  #section-hero .event-card-frame { max-height: 300px; }
}

@media (max-height: 640px) {
  #section-hero .event-card-frame { max-height: 160px; }
}

/* Hero meta row: tighter layout */
#section-hero .event-card-meta {
  gap: 2px;
}
#section-hero .event-card-title {
  font-size: clamp(11px, 0.95vw, 13px);
}
#section-hero .event-card-date {
  font-size: clamp(8px, 0.65vw, 10px);
}
#section-hero .event-card-location {
  font-size: clamp(10px, 0.75vw, 12px);
}

/* ============================================================
   SECTION: EVENTS (Past Events)
============================================================ */
#section-events {
  background: var(--bg);
  padding: clamp(60px, 8vh, 120px) clamp(16px, 5vw, 100px) clamp(48px, 6vh, 96px);
  justify-content: flex-start;
  position: relative;
  overflow: hidden;
}

#events-globe-canvas {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  z-index: 0;
  pointer-events: none;
}

#section-events .panel-inner {
  position: relative;
  z-index: 2;
  width: 100%;
}

.panel-section-title {
  font-family: var(--font-head);
  font-size: clamp(22px, 3.5vw, 52px);
  font-weight: 700;
  letter-spacing: 0.15em;
  color: var(--cyan);
  text-align: center;
  margin-bottom: 8px;
  position: relative;
  z-index: 2;
}

.panel-section-subtitle {
  font-family: var(--font-mono);
  font-size: clamp(10px, 1.1vw, 15px);
  letter-spacing: 0.2em;
  color: rgba(0, 255, 65, 0.5);
  text-align: center;
  margin-bottom: clamp(16px, 3vh, 32px);
  position: relative;
  z-index: 2;
}

.events-block {
  width: 100%;
  max-width: min(1100px, 92vw);
  margin: 0 auto clamp(24px, 4vh, 40px);
  position: relative;
  z-index: 2;
}

.events-block h3 {
  font-family: var(--font-code, var(--font-mono));
  font-size: clamp(12px, 1.1vw, 22px);
  letter-spacing: 0.3em;
  color: rgba(0, 255, 65, 0.9);
  text-transform: uppercase;
  margin-bottom: 14px;
  padding-bottom: 10px;
  border-bottom: 1px solid rgba(0, 255, 65, 0.25);
  text-shadow: 0 0 18px rgba(0, 255, 65, 0.55);
  position: relative;
  z-index: 3;
}

.events-block h3::after {
  content: '';
  position: absolute;
  left: 0;
  bottom: -1px;
  width: 72px;
  height: 1px;
  background: linear-gradient(90deg, var(--cyan) 0%, var(--lime) 50%, transparent 100%);
  box-shadow: 0 0 10px rgba(0,255,65,0.6);
}

/* ============================================================
   EVENT CAROUSEL
============================================================ */
.carousel-container {
  position: relative;
  /* Vertical breathing room so the hover lift + box-shadow halo
     on cards has somewhere to render. The negative margin keeps
     external layout unchanged. */
  padding: 14px 0;
  margin: -14px 0;
  /* Fallback: clip both axes (old browsers). The padding above
     means the hover glow has 14px of headroom inside the clip. */
  overflow: hidden;
}

/* Modern browsers: clip horizontally only so vertical hover lifts,
   focus rings, and box-shadow halos render past the carousel edge
   without showing off-page slides on the sides. */
@supports (overflow: clip) {
  .carousel-container {
    overflow: visible;
    overflow-x: clip;
    overflow-y: visible;
    overflow-clip-margin: 24px;
  }
}

.carousel-track {
  display: flex;
  gap: 20px;
  transition: transform var(--duration-slow, 620ms) var(--ease-electric, cubic-bezier(0.16, 1, 0.3, 1));
}

/* ============================================================
   EVENT CARDS — Featured-Works inspired layered-image pattern
   Structure:
     .event-card
       .event-card-frame       (black, rounded, overflow:hidden)
         img.event-card-bg     (blurred fill @ 110%)
         .event-card-inner     (padded centered sharp poster)
           img.event-card-img  (object-fit:contain — never cropped)
         .event-card-rollno    (corner label "(01)")
         .event-card-cta       (corner CTA "VIEW GALLERY →")
       .event-card-meta        (title + date + location below frame)
============================================================ */

/* Base (0–639px): 1 card per page */
.event-card {
  flex: 0 0 min(88vw, 320px);
  min-width: 0;
  display: flex;
  flex-direction: column;
  gap: 10px;
  cursor: pointer;
  position: relative;
  background: transparent;
  outline: none;
  transition: transform 0.5s cubic-bezier(0.16, 1, 0.3, 1);
}

@media (min-width: 640px) {
  .event-card { flex: 0 0 calc(50% - 10px); }
}

@media (min-width: 1024px) {
  .event-card { flex: 0 0 calc(33.33% - 14px); }
}

/* Frame: the rounded, black image container that holds the layered images */
.event-card-frame {
  position: relative;
  aspect-ratio: 4 / 5;
  width: 100%;
  background: #000;
  border-radius: 3px;
  overflow: hidden;
  isolation: isolate;
  border: 1px solid rgba(0, 255, 65, 0.18);
  box-shadow:
    0 4px 20px rgba(0, 0, 0, 0.4),
    inset 0 0 0 1px rgba(0, 255, 65, 0.04);
  transition:
    border-color var(--duration-mid, 320ms) var(--ease-electric, cubic-bezier(0.16, 1, 0.3, 1)),
    box-shadow  var(--duration-mid, 320ms) var(--ease-electric, cubic-bezier(0.16, 1, 0.3, 1)),
    transform   var(--duration-mid, 320ms) var(--ease-electric, cubic-bezier(0.16, 1, 0.3, 1));
}

/* Animated data-flow trace across the top edge of each event card on hover */
.event-card-frame::before {
  content: "";
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  height: 1px;
  background: linear-gradient(90deg,
    transparent 0%,
    rgba(0, 255, 65, 0.9) 35%,
    #5cffa0 50%,
    rgba(0, 255, 65, 0.9) 65%,
    transparent 100%);
  opacity: 0;
  transform: translate3d(-100%, 0, 0);
  pointer-events: none;
  z-index: 3;
}

.event-card-frame:hover::before,
.event-card-frame:focus-within::before {
  animation: data-flow-x 1.6s var(--ease-electric, cubic-bezier(0.16, 1, 0.3, 1)) both;
  opacity: 1;
}

.event-card-frame:hover {
  border-color: rgba(0, 255, 65, 0.55);
  box-shadow:
    0 8px 30px rgba(0, 0, 0, 0.5),
    0 0 24px rgba(0, 255, 65, 0.18),
    inset 0 0 0 1px rgba(0, 255, 65, 0.10);
  transform: translateY(-2px);
}

/* Blurred background: oversized so blur edges never show, sits BEHIND inner */
.event-card-bg {
  position: absolute;
  top: -5%;
  left: -5%;
  width: 110%;
  height: 110%;
  object-fit: cover;
  object-position: center;
  filter: blur(12px) saturate(1.1);
  -webkit-filter: blur(12px) saturate(1.1);
  opacity: 0.85;
  z-index: 0;
  transition:
    opacity 0.5s ease,
    transform 0.9s cubic-bezier(0.16, 1, 0.3, 1),
    filter 0.5s ease;
}

/* Inner: padded wrapper centers the sharp poster in a "frame" */
.event-card-inner {
  position: absolute;
  /* Larger top inset creates a dedicated blur strip for the "(01)" label */
  inset: clamp(26px, 7%, 36px) clamp(14px, 4%, 28px) clamp(14px, 4%, 28px);
  z-index: 1;
  border-radius: 3px;
  overflow: hidden;
  transition: transform 0.55s cubic-bezier(0.16, 1, 0.3, 1);
}

.event-card-img {
  width: 100%;
  height: 100%;
  object-fit: contain;
  background: transparent;
  display: block;
  transition: transform 0.55s cubic-bezier(0.16, 1, 0.3, 1);
}

/* Corner labels on top of images */
.event-card-rollno {
  position: absolute;
  top: 7px;
  left: 12px;
  z-index: 3;
  font-family: var(--font-mono);
  font-size: clamp(9px, 0.7vw, 11px);
  line-height: 1;
  letter-spacing: 0.2em;
  color: rgba(255, 255, 255, 0.8);
  text-shadow: 0 0 8px rgba(0, 0, 0, 0.7);
  pointer-events: none;
}

.event-card-cta {
  position: absolute;
  bottom: 10px;
  right: 12px;
  left: auto;
  z-index: 3;
  max-width: calc(100% - 24px);
  display: inline-flex;
  align-items: center;
  gap: 6px;
  font-family: var(--font-code, var(--font-mono));
  font-size: clamp(9px, 0.7vw, 11px);
  letter-spacing: 0.22em;
  text-transform: uppercase;
  color: var(--cyan);
  padding: 6px 12px;
  background:
    linear-gradient(180deg, rgba(0,255,65,0.08) 0%, rgba(0,0,0,0.65) 100%);
  border: 1px solid rgba(0, 255, 65, 0.45);
  border-radius: 2px;
  backdrop-filter: blur(6px);
  -webkit-backdrop-filter: blur(6px);
  box-shadow: 0 0 0 1px rgba(0,255,65,0.05), 0 0 12px rgba(0,255,65,0.12);
  opacity: 0;
  transform: translateY(6px);
  overflow: hidden;
  isolation: isolate;
  white-space: nowrap;
  transition:
    opacity 0.35s var(--ease-electric),
    transform 0.35s var(--ease-electric),
    border-color 0.3s var(--ease-electric),
    box-shadow 0.3s var(--ease-electric);
  pointer-events: none;
}

.event-card-cta > * {
  position: relative;
  z-index: 1;
}

.event-card-cta::before {
  content: '';
  position: absolute;
  inset: 0;
  z-index: 0;
  background: linear-gradient(120deg,
    transparent 0%,
    rgba(0,255,170,0.16) 40%,
    rgba(0,255,65,0.22) 50%,
    rgba(0,255,170,0.16) 60%,
    transparent 100%);
  background-size: 220% 100%;
  opacity: 0;
  transition: opacity 0.3s var(--ease-electric);
  pointer-events: none;
}

.event-card:hover .event-card-cta::before,
.event-card:focus-visible .event-card-cta::before {
  opacity: 1;
  animation: current-flow 2.8s linear infinite;
}

.event-card-cta .ecc-arrow {
  display: inline-block;
  transition: transform 0.3s cubic-bezier(0.16, 1, 0.3, 1);
}

/* Hover transitions — the Visualeyez "featured works" motion */
.event-card:hover,
.event-card:focus-visible {
  transform: translateY(-4px);
}

/* Cards with no associated gallery render as static — no pointer
   cursor, no hover lift, no focus ring (they aren't focusable). */
.event-card.no-gallery {
  cursor: default;
}
.event-card.no-gallery:hover,
.event-card.no-gallery:focus-visible {
  transform: none;
}
.event-card.no-gallery:hover .event-card-frame,
.event-card.no-gallery:focus-visible .event-card-frame {
  border-color: inherit;
  box-shadow: inherit;
}

.event-card:hover .event-card-frame,
.event-card:focus-visible .event-card-frame {
  border-color: rgba(0, 255, 65, 0.55);
  box-shadow:
    0 10px 32px rgba(0, 0, 0, 0.55),
    0 0 0 1px rgba(0,255,65,0.2),
    0 0 28px rgba(0, 255, 65, 0.28);
}

.event-card:hover .event-card-cta,
.event-card:focus-visible .event-card-cta {
  border-color: var(--lime);
  box-shadow: 0 0 0 1px rgba(0,255,170,0.25), 0 0 18px rgba(0,255,65,0.35);
}

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

.event-card:hover .event-card-bg,
.event-card:focus-visible .event-card-bg {
  opacity: 1;
  transform: scale(1.03);
  filter: blur(10px) saturate(1.25) brightness(1.05);
  -webkit-filter: blur(10px) saturate(1.25) brightness(1.05);
}

.event-card:hover .event-card-cta,
.event-card:focus-visible .event-card-cta {
  opacity: 1;
  transform: translateY(0);
}

.event-card:hover .event-card-cta .ecc-arrow,
.event-card:focus-visible .event-card-cta .ecc-arrow {
  transform: translateX(3px);
}

/* Touch: always show CTA (no hover) */
@media (hover: none) {
  .event-card-cta {
    opacity: 1;
    transform: translateY(0);
  }
}

/* ----------------------------------------------------------------
   TICKET CTA (.event-card-cta--ticket)
   Used on UPCOMING events that have a ticket_link. Unlike the
   gallery CTA, this one:
     * is a real <a>, not a <div>
     * is visible at all times (not hover-gated) so users always
       see how to buy tickets
     * is fully interactive (pointer-events: auto)
     * has its own hover state distinct from the card hover
---------------------------------------------------------------- */
.event-card-cta--ticket {
  opacity: 1;
  transform: none;
  pointer-events: auto;
  cursor: pointer;
  text-decoration: none;
  /* Slightly stronger contrast than the gallery CTA so the
     "BUY NOW" affordance reads from a distance. */
  color: var(--lime, #00ffaa);
  border-color: rgba(0, 255, 170, 0.55);
  background:
    linear-gradient(180deg, rgba(0, 255, 170, 0.12) 0%, rgba(0, 0, 0, 0.7) 100%);
  box-shadow:
    0 0 0 1px rgba(0, 255, 170, 0.18),
    0 0 14px rgba(0, 255, 170, 0.18);
}

.event-card-cta--ticket:hover,
.event-card-cta--ticket:focus-visible {
  color: #031a0a;
  background:
    linear-gradient(180deg, rgba(0, 255, 170, 0.85) 0%, rgba(0, 200, 130, 0.9) 100%);
  border-color: var(--lime, #00ffaa);
  box-shadow:
    0 0 0 1px rgba(0, 255, 170, 0.55),
    0 0 24px rgba(0, 255, 170, 0.55);
  outline: none;
}

.event-card-cta--ticket:focus-visible {
  outline: 2px solid var(--lime, #00ffaa);
  outline-offset: 3px;
}

.event-card-cta--ticket:hover .ecc-arrow,
.event-card-cta--ticket:focus-visible .ecc-arrow {
  transform: translateX(3px);
}

/* Past events: desaturated but still readable */
.event-card.past .event-card-img,
.event-card.past .event-card-bg {
  filter: saturate(0.45) brightness(0.82);
  -webkit-filter: saturate(0.45) brightness(0.82);
}

.event-card.past .event-card-bg {
  filter: blur(12px) saturate(0.4) brightness(0.7);
  -webkit-filter: blur(12px) saturate(0.4) brightness(0.7);
  opacity: 0.7;
}

.event-card.past:hover .event-card-img {
  filter: saturate(0.75) brightness(0.95);
  -webkit-filter: saturate(0.75) brightness(0.95);
}

.event-card.past:hover .event-card-bg {
  filter: blur(10px) saturate(0.7) brightness(0.9);
  -webkit-filter: blur(10px) saturate(0.7) brightness(0.9);
  opacity: 0.9;
}

/* Meta row — below the frame */
.event-card-meta {
  display: flex;
  flex-direction: column;
  gap: 3px;
  padding: 0 2px;
}

.event-card-meta-top {
  display: flex;
  justify-content: space-between;
  align-items: baseline;
  gap: 10px;
  flex-wrap: wrap;
}

.event-card-title {
  font-family: var(--font-head);
  font-size: clamp(12px, 1.05vw, 15px);
  font-weight: 700;
  letter-spacing: 0.06em;
  color: var(--cyan);
  line-height: 1.25;
  text-transform: uppercase;
  flex: 1 1 auto;
  min-width: 0;
  overflow-wrap: anywhere;
  word-break: break-word;
  hyphens: auto;
  transition: color var(--duration-mid, 320ms) var(--ease-electric, cubic-bezier(0.16, 1, 0.3, 1));
}

.event-card-date {
  font-family: var(--font-mono);
  font-size: clamp(9px, 0.7vw, 11px);
  letter-spacing: 0.2em;
  color: rgba(0, 255, 65, 0.55);
  text-transform: uppercase;
  flex: 0 0 auto;
  white-space: nowrap;
}

.event-card-location {
  font-family: var(--font-body);
  font-size: clamp(11px, 0.85vw, 13px);
  color: rgba(255, 255, 255, 0.55);
  letter-spacing: 0.04em;
  line-height: 1.35;
  overflow-wrap: anywhere;
  word-break: break-word;
  transition: color var(--duration-mid, 320ms) var(--ease-electric, cubic-bezier(0.16, 1, 0.3, 1));
}

.event-card:hover .event-card-title,
.event-card:focus-visible .event-card-title {
  color: #fff;
}

.event-card:hover .event-card-location,
.event-card:focus-visible .event-card-location {
  color: rgba(255, 255, 255, 0.85);
}

/* Focus ring */
.event-card:focus-visible .event-card-frame {
  outline: 2px solid var(--cyan);
  outline-offset: 3px;
}

/* Carousel nav */
.carousel-nav {
  display: flex;
  align-items: center;
  justify-content: space-between;
  margin-top: 12px;
}

/* Honor [hidden] when JS empties the carousel — flex/grid containers
   override the user-agent default `[hidden] { display: none }`. */
.carousel-nav[hidden],
.carousel-container[hidden],
.carousel-track[hidden] {
  display: none !important;
}

.carousel-btn {
  position: relative;
  background: linear-gradient(180deg, rgba(0,255,65,0.06) 0%, rgba(0,0,0,0.55) 100%);
  border: 1px solid rgba(0,255,65,0.35);
  color: var(--cyan);
  width: clamp(40px, 2.5vw, 48px);
  height: clamp(40px, 2.5vw, 48px);
  display: flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
  font-size: 14px;
  font-family: var(--font-code, var(--font-mono));
  min-width: 44px;
  min-height: 44px;
  overflow: hidden;
  transition: color 0.3s var(--ease-electric),
              background 0.3s var(--ease-electric),
              border-color 0.3s var(--ease-electric),
              box-shadow 0.3s var(--ease-electric),
              transform 0.3s var(--ease-electric);
}

.carousel-btn::before {
  content: '';
  position: absolute;
  inset: 0;
  background: var(--grad-electric);
  background-size: 220% 100%;
  opacity: 0;
  transition: opacity 0.3s var(--ease-electric);
  z-index: 0;
}

.carousel-btn > * {
  position: relative;
  z-index: 1;
}

.carousel-btn:hover {
  color: #031a0a;
  border-color: var(--lime);
  box-shadow: var(--glow-s);
  transform: translateY(-1px);
}

.carousel-btn:hover::before {
  opacity: 1;
  animation: current-flow 3.5s linear infinite;
}

.carousel-btn:focus-visible {
  outline: 2px solid var(--cyan);
  outline-offset: 3px;
}

.carousel-dots {
  display: flex;
  gap: 8px;
  flex-wrap: wrap;
  justify-content: center;
}

.carousel-dot {
  width: 8px;
  height: 8px;
  border-radius: 50%;
  background: rgba(0, 255, 65, 0.2);
  border: 1px solid rgba(0, 255, 65, 0.3);
  cursor: pointer;
  transition:
    background var(--duration-fast, 180ms) var(--ease-electric, cubic-bezier(0.16, 1, 0.3, 1)),
    box-shadow var(--duration-fast, 180ms) var(--ease-electric, cubic-bezier(0.16, 1, 0.3, 1)),
    transform var(--duration-fast, 180ms) var(--ease-electric, cubic-bezier(0.16, 1, 0.3, 1));
  min-width: 16px;
  min-height: 16px;
  display: flex;
  align-items: center;
  justify-content: center;
}

.carousel-dot:hover {
  background: rgba(0, 255, 65, 0.5);
  transform: scale(1.15);
}

.carousel-dot::after {
  content: '';
  width: 6px;
  height: 6px;
  border-radius: 50%;
  background: inherit;
}

.carousel-dot.active {
  background: var(--cyan);
  box-shadow: 0 0 6px var(--cyan);
}

/* Events empty state — no box, open layout */
.events-empty-state {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: clamp(12px, 2vh, 20px);
  padding: clamp(20px, 3vh, 40px) 0;
  text-align: center;
  width: 100%;
}

@media (min-width: 1024px) {
  .events-empty-state {
    align-items: flex-start;
    text-align: left;
  }
}

.events-empty-heading {
  font-family: var(--font-head);
  font-size: clamp(16px, 2vw, 32px);
  font-weight: 700;
  letter-spacing: 0.15em;
  color: var(--cyan);
}

.events-empty-body {
  font-family: var(--font-body);
  font-size: clamp(13px, 1vw, 18px);
  color: rgba(0,255,65,0.55);
  line-height: 1.65;
  margin: 0;
  max-width: 52ch;
}

/* ============================================================
   SECTION: MISSION
============================================================ */
#section-mission {
  background: var(--bg);
  padding: clamp(60px, 8vh, 120px) clamp(16px, 5vw, 100px) clamp(48px, 6vh, 96px);
  align-items: center;
  justify-content: center;
}

.mission-watermark {
  position: absolute;
  font-family: var(--font-head);
  font-size: clamp(48px, 16vw, 180px);
  font-weight: 900;
  color: transparent;
  -webkit-text-stroke: 1px rgba(0, 255, 65, 0.07);
  letter-spacing: 0.1em;
  pointer-events: none;
  user-select: none;
  z-index: 0;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  white-space: nowrap;
}

.circuit-divider {
  width: 100%;
  max-width: min(900px, 88vw);
  margin: 0 auto clamp(20px, 3vh, 36px);
  position: relative;
  z-index: 1;
}

.circuit-divider svg {
  width: 100%;
  overflow: visible;
}

.divider-path {
  fill: none;
  stroke: rgba(0, 255, 65, 0.3);
  stroke-width: 1.5;
}

.divider-dot-static {
  fill: var(--cyan);
}

/* Base (mobile): single column, illustration hidden */
.mission-layout {
  display: grid;
  grid-template-columns: 1fr;
  gap: clamp(16px, 3vh, 40px);
  max-width: min(1100px, 92vw);
  width: 100%;
  align-items: center;
  position: relative;
  z-index: 1;
}

.mission-illustration {
  display: none;
}

/* Tablet landscape+ (768px+): two-column, show illustration */
@media (min-width: 768px) {
  .mission-layout {
    grid-template-columns: 1fr 1fr;
    gap: clamp(40px, 6vw, 100px);
  }
  .mission-illustration {
    display: block;
  }
}

.mission-illustration svg {
  width: 100%;
  max-width: 300px;
}

.mission-text {
  display: flex;
  flex-direction: column;
  gap: 14px;
}

.mission-eyebrow {
  font-family: var(--font-mono);
  font-size: clamp(10px, 0.9vw, 13px);
  letter-spacing: 0.3em;
  color: rgba(0, 255, 65, 0.5);
  text-transform: uppercase;
}

.mission-rule {
  width: 60px;
  height: 1px;
  background: var(--cyan);
  box-shadow: 0 0 4px var(--cyan);
}

.mission-heading {
  font-family: var(--font-head);
  font-size: clamp(22px, 3.5vw, 52px);
  font-weight: 700;
  letter-spacing: 0.12em;
  color: var(--cyan);
}

.mission-body {
  font-family: var(--font-body);
  font-size: clamp(14px, 1.4vw, 20px);
  font-weight: 400;
  color: rgba(0, 255, 65, 0.75);
  line-height: 1.75;
}

@keyframes pulse-ring {
  0%   { transform: scale(1);      opacity: 0.7; }
  50%  { transform: scale(1.556);  opacity: 0.2; }
  100% { transform: scale(1);      opacity: 0.7; }
}

.pulse-ring-anim {
  animation: pulse-ring 2s ease-in-out infinite;
  fill: none;
  stroke: var(--cyan);
  stroke-width: 1;
  transform-box: fill-box;
  transform-origin: center;
}

/* ============================================================
   SECTION: BRAND
============================================================ */
#section-brand {
  background: var(--bg);
  padding: clamp(60px, 8vh, 140px) clamp(16px, 5vw, 120px) clamp(48px, 6vh, 96px);
  overflow: hidden;
}

.brand-words {
  display: flex;
  gap: clamp(12px, 3vw, 56px);
  margin-bottom: 24px;
  align-items: center;
  flex-wrap: wrap;
  justify-content: center;
}

.brand-word {
  font-family: var(--font-head);
  font-size: clamp(40px, 8vw, 140px);
  font-weight: 900;
  letter-spacing: 0.05em;
  position: relative;
  line-height: 1.0;
}

.brand-word.house {
  color: transparent;
  -webkit-text-stroke: 2px var(--cyan);
  filter: drop-shadow(0 0 12px rgba(0,255,65,0.25));
}

.brand-word.circuit {
  background: var(--grad-text-sweep);
  background-size: 300% 100%;
  -webkit-background-clip: text;
          background-clip: text;
  -webkit-text-fill-color: transparent;
  animation: current-flow 8s linear infinite;
  filter: drop-shadow(0 0 22px rgba(0,255,65,0.45));
}

.brand-plus {
  font-family: var(--font-mono);
  font-size: clamp(18px, 2.5vw, 48px);
  color: rgba(0, 255, 65, 0.4);
}

.brand-heading {
  font-family: var(--font-head);
  font-size: clamp(12px, 1.5vw, 24px);
  font-weight: 400;
  letter-spacing: 0.3em;
  color: rgba(0, 255, 65, 0.5);
  text-transform: uppercase;
  margin-bottom: 20px;
}

.brand-body {
  font-family: var(--font-body);
  font-size: clamp(14px, 1.4vw, 22px);
  font-weight: 400;
  color: rgba(0, 255, 65, 0.7);
  line-height: 1.8;
  max-width: min(720px, 88vw);
  text-align: center;
}

/* ============================================================
   SECTION: VENUES
============================================================ */
#section-venues {
  /* Transparent so the fixed circuit canvas + bg-dim show through. */
  background: transparent;
  padding: clamp(60px, 8vh, 120px) clamp(16px, 5vw, 100px) clamp(48px, 6vh, 96px);
}

.hex-bg {
  position: absolute;
  inset: 0;
  z-index: 0;
  overflow: hidden;
  opacity: 0.06;
  background-image: radial-gradient(circle, var(--cyan) 1px, transparent 1px);
  background-size: 32px 32px;
}

.venues-heading {
  font-family: var(--font-head);
  font-size: clamp(22px, 4vw, 72px);
  font-weight: 700;
  letter-spacing: 0.15em;
  color: var(--cyan);
  text-align: center;
  margin-bottom: 8px;
  position: relative;
  z-index: 1;
}

.venues-subheading {
  font-family: var(--font-mono);
  font-size: clamp(10px, 0.9vw, 13px);
  letter-spacing: 0.3em;
  color: rgba(0, 255, 65, 0.5);
  text-align: center;
  text-transform: uppercase;
  margin-bottom: clamp(24px, 4vh, 48px);
  position: relative;
  z-index: 1;
}

/* Venue tile grid — mobile-first uniform card grid (no accordion) */

.venue-grid {
  display: grid;
  grid-template-columns: 1fr;
  gap: clamp(10px, 1.2vw, 14px);
  max-width: min(1240px, 92vw);
  width: 100%;
  position: relative;
  z-index: 1;
}

@media (min-width: 560px) {
  .venue-grid { grid-template-columns: repeat(2, 1fr); }
}
@media (min-width: 900px) {
  .venue-grid { grid-template-columns: repeat(3, 1fr); }
}

.venue-tile {
  position: relative;
  display: grid;
  grid-template-columns: auto 1fr auto;
  grid-template-rows: auto auto;
  column-gap: 12px;
  row-gap: 6px;
  align-items: center;
  padding: clamp(14px, 1.6vw, 20px) clamp(16px, 1.8vw, 22px);
  background: linear-gradient(180deg, rgba(0,255,65,0.035) 0%, rgba(0,0,0,0.35) 100%);
  border: 1px solid rgba(0,255,65,0.12);
  text-decoration: none;
  overflow: hidden;
  min-height: 110px;
  transition: border-color 0.35s var(--ease-electric),
              background 0.35s var(--ease-electric),
              transform 0.35s var(--ease-electric),
              box-shadow 0.35s var(--ease-electric);
}

.venue-tile::before {
  content: '';
  position: absolute;
  left: 0;
  top: 0;
  bottom: 0;
  width: 2px;
  background: var(--grad-electric);
  background-size: 100% 220%;
  opacity: 0.35;
  transition: opacity 0.35s var(--ease-electric);
}

.venue-tile::after {
  content: '';
  position: absolute;
  inset: 0;
  background:
    linear-gradient(120deg,
      transparent 0%,
      rgba(0,255,170,0.08) 45%,
      rgba(0,255,65,0.12) 50%,
      rgba(0,255,170,0.08) 55%,
      transparent 100%);
  background-size: 220% 100%;
  opacity: 0;
  pointer-events: none;
  transition: opacity 0.4s var(--ease-electric);
}

.venue-tile:hover,
.venue-tile:focus-visible {
  border-color: rgba(0,255,65,0.55);
  background: linear-gradient(180deg, rgba(0,255,65,0.07) 0%, rgba(0,0,0,0.4) 100%);
  transform: translateY(-2px);
  box-shadow: 0 6px 24px rgba(0,255,65,0.15), var(--glow-s);
  outline: none;
}

.venue-tile:hover::before,
.venue-tile:focus-visible::before {
  opacity: 1;
  animation: current-flow 3s linear infinite;
}

.venue-tile:hover::after,
.venue-tile:focus-visible::after {
  opacity: 1;
  animation: current-flow 2.8s linear infinite;
}

.venue-tile:focus-visible {
  outline: 1px solid var(--cyan);
  outline-offset: 2px;
}

.venue-tile-node {
  grid-column: 1;
  grid-row: 1;
  width: 7px;
  height: 7px;
  background: var(--cyan);
  border-radius: 50%;
  box-shadow: 0 0 6px var(--cyan);
  animation: venue-pulse 2.5s ease-in-out infinite;
}

@keyframes venue-pulse {
  0%, 100% { box-shadow: 0 0 3px var(--cyan); transform: scale(1); }
  50%      { box-shadow: 0 0 10px var(--cyan), 0 0 18px rgba(0,255,65,0.3); transform: scale(1.25); }
}

.venue-tile-tag {
  position: absolute;
  top: 10px;
  right: 14px;
  font-family: var(--font-code, var(--font-mono));
  font-size: 9px;
  letter-spacing: 0.18em;
  color: rgba(0,255,170,0.45);
  text-transform: uppercase;
  padding: 2px 6px;
  border: 1px solid rgba(0,255,170,0.2);
  border-radius: 2px;
  background: rgba(0,0,0,0.35);
}

.venue-tile-name {
  grid-column: 2 / 4;
  grid-row: 1;
  margin: 0;
  font-family: var(--font-head);
  font-size: clamp(14px, 1.1vw, 17px);
  font-weight: 700;
  letter-spacing: 0.08em;
  color: var(--cyan);
  text-transform: uppercase;
  text-shadow: 0 0 12px rgba(0,255,65,0.25);
  padding-right: 48px;
}

.venue-tile-desc {
  grid-column: 1 / 3;
  grid-row: 2;
  margin: 0;
  font-family: var(--font-body);
  font-size: clamp(12px, 0.85vw, 13.5px);
  color: rgba(0,255,65,0.6);
  line-height: 1.55;
}

.venue-tile-arrow {
  grid-column: 3;
  grid-row: 2;
  align-self: end;
  font-family: var(--font-head);
  font-size: 16px;
  color: var(--cyan);
  opacity: 0.55;
  transition: transform 0.35s var(--ease-electric),
              opacity 0.35s var(--ease-electric),
              color 0.35s var(--ease-electric),
              text-shadow 0.35s var(--ease-electric);
}

.venue-tile:hover .venue-tile-arrow,
.venue-tile:focus-visible .venue-tile-arrow {
  opacity: 1;
  color: var(--lime);
  transform: translateX(4px);
  text-shadow: 0 0 10px rgba(0,255,170,0.6);
}

/* ============================================================
   SECTION: JOIN / CTA
============================================================ */
#section-join {
  /* Transparent so the fixed circuit canvas + bg-dim show through. */
  background: transparent;
  padding: clamp(80px, 10vh, 160px) clamp(16px, 5vw, 120px) clamp(60px, 8vh, 100px);
  overflow: hidden;
}

#join-canvas {
  position: absolute;
  inset: 0;
  z-index: 0;
  pointer-events: none;
  width: 100%;
  height: 100%;
}

.join-content {
  position: relative;
  z-index: 1;
  text-align: center;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: clamp(14px, 2vh, 28px);
}

.join-eyebrow {
  font-family: var(--font-mono);
  font-size: clamp(10px, 0.9vw, 15px);
  letter-spacing: 0.35em;
  color: rgba(0, 255, 65, 0.5);
  text-transform: uppercase;
}

.join-heading {
  font-family: var(--font-head);
  font-size: clamp(28px, 5.5vw, 96px);
  font-weight: 900;
  letter-spacing: 0.08em;
  background: var(--grad-text-sweep);
  background-size: 300% 100%;
  -webkit-background-clip: text;
          background-clip: text;
  -webkit-text-fill-color: transparent;
  animation: current-flow 8s linear infinite;
  filter: drop-shadow(0 0 18px rgba(0,255,65,0.4));
}

.join-tagline {
  font-family: var(--font-body);
  font-size: clamp(12px, 1.4vw, 20px);
  letter-spacing: 0.25em;
  color: rgba(0, 255, 65, 0.6);
  text-transform: uppercase;
}

.join-body {
  font-family: var(--font-body);
  font-size: clamp(14px, 1.4vw, 20px);
  color: rgba(0, 255, 65, 0.65);
  line-height: 1.75;
  max-width: min(680px, 88vw);
}

/* Join section CTA: full width on mobile portrait */
#section-join .btn-primary {
  width: 100%;
  justify-content: center;
}

@media (min-width: 480px) {
  #section-join .btn-primary {
    width: auto;
  }
}

/* ============================================================
   EVENT DETAIL MODAL — MOBILE FIRST
   Base: full-screen on mobile
   768px+: centered, max-width 820px
============================================================ */
#event-modal {
  display: flex;
  position: fixed;
  inset: 0;
  z-index: 5000;
  align-items: flex-start;
  justify-content: stretch;
  padding: 0;
  opacity: 0;
  pointer-events: none;
  transition: opacity var(--duration-mid, 320ms) var(--ease-electric, cubic-bezier(0.16, 1, 0.3, 1));
}

#event-modal.open {
  opacity: 1;
  pointer-events: auto;
}

/* Hide any card roll-number labels while the modal is open so they
   cannot bleed into the modal's image area from layers beneath. */
body:has(#event-modal.open) .event-card-rollno {
  opacity: 0 !important;
  visibility: hidden !important;
}

/* Defensively hide any stray roll-no inside the modal itself. */
.modal-box .event-card-rollno,
.modal-event-frame .event-card-rollno {
  display: none !important;
}

.modal-overlay {
  position: absolute;
  inset: 0;
  background: #000;
  -webkit-backdrop-filter: blur(20px);
  backdrop-filter: blur(20px);
}

/* Base: full-screen modal box on mobile */
.modal-box {
  position: relative;
  z-index: 1;
  background: #0a0a0a;
  border: none;
  border-radius: 0;
  width: 100%;
  height: 100%;
  max-width: 100%;
  max-height: 100%;
  overflow-y: auto;
  overflow-x: hidden;
  transform: translateY(24px) scale(0.98);
  opacity: 0;
  transition: transform 0.5s cubic-bezier(0.16, 1, 0.3, 1),
              opacity 0.5s cubic-bezier(0.16, 1, 0.3, 1);
}

#event-modal.open .modal-box {
  transform: translateY(0) scale(1);
  opacity: 1;
}

/* Tablet landscape+ (768px+): centered, constrained */
@media (min-width: 768px) {
  #event-modal {
    align-items: center;
    justify-content: center;
    padding: 20px;
  }
  .modal-box {
    width: auto;
    height: auto;
    max-width: 860px;
    max-height: 90vh;
    border: 1px solid rgba(0, 255, 65, 0.22);
    border-radius: 3px;
    box-shadow:
      0 20px 60px rgba(0, 0, 0, 0.6),
      0 0 0 1px rgba(0, 255, 65, 0.10),
      0 0 32px rgba(0, 255, 65, 0.10);
  }
}

.modal-close {
  position: absolute;
  top: 10px;
  right: 10px;
  background: linear-gradient(180deg, rgba(0,255,65,0.08) 0%, rgba(0,0,0,0.7) 100%);
  border: 1px solid rgba(0, 255, 65, 0.35);
  color: var(--cyan);
  width: 44px;
  height: 44px;
  display: flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
  font-family: var(--font-code, var(--font-mono));
  font-size: 14px;
  z-index: 2;
  transition: color 0.3s var(--ease-electric),
              background 0.3s var(--ease-electric),
              border-color 0.3s var(--ease-electric),
              box-shadow 0.3s var(--ease-electric);
  border-radius: 2px;
  -webkit-backdrop-filter: blur(8px);
  backdrop-filter: blur(8px);
}

.modal-close:hover {
  color: #031a0a;
  background: var(--cyan);
  border-color: var(--lime);
  box-shadow: var(--glow-s);
}

.modal-close:focus-visible {
  outline: 2px solid var(--cyan);
  outline-offset: 3px;
}

/* ── Modal top row ── */
.modal-top {
  display: flex;
  flex-direction: column;
  align-items: stretch;
  gap: 0;
  padding: 56px clamp(14px, 3vw, 24px) 0;
}

/* ── Modal event frame (layered blur-behind-sharp pattern) ── */
.modal-event-frame {
  position: relative;
  width: 100%;
  max-width: 200px;
  aspect-ratio: 4 / 5;
  background: #000;
  border-radius: 3px;
  border: 1px solid rgba(0, 255, 65, 0.22);
  overflow: hidden;
  flex-shrink: 0;
  align-self: center;
}

.modal-event-bg {
  position: absolute;
  top: -5%;
  left: -5%;
  width: 110%;
  height: 110%;
  object-fit: cover;
  filter: blur(14px) saturate(1.1);
  opacity: 0.8;
  z-index: 0;
  pointer-events: none;
}

.modal-event-inner {
  position: absolute;
  inset: clamp(10px, 4%, 18px);
  z-index: 1;
  display: flex;
  align-items: center;
  justify-content: center;
  overflow: hidden;
  border-radius: 3px;
}

.modal-event-img {
  width: 100%;
  height: 100%;
  object-fit: contain;
  display: block;
}

.modal-info {
  flex: 1;
  min-width: 0;
  padding: clamp(16px, 2.5vh, 24px) 0 clamp(20px, 3vh, 28px);
  display: flex;
  flex-direction: column;
  justify-content: flex-start;
}

/* Tablet+: side-by-side layout */
@media (min-width: 768px) {
  .modal-top {
    flex-direction: row;
    align-items: stretch;
    gap: 28px;
    padding: 56px 32px 0;
  }
  .modal-event-frame {
    flex: 0 0 180px;
    width: 180px;
    max-width: 180px;
    aspect-ratio: 4 / 5;
    align-self: flex-start;
  }
  .modal-info {
    padding: 4px 0 28px 0;
  }
}

.modal-date {
  font-family: var(--font-mono);
  font-size: clamp(10px, 0.75vw, 11px);
  letter-spacing: 0.28em;
  color: rgba(0, 255, 65, 0.6);
  margin-bottom: 12px;
  text-transform: uppercase;
}

.modal-title {
  font-family: var(--font-head);
  font-size: clamp(20px, 2.4vw, 30px);
  font-weight: 700;
  letter-spacing: 0.06em;
  color: var(--cyan);
  margin-bottom: 10px;
  line-height: 1.15;
  text-transform: uppercase;
}

.modal-location {
  font-family: var(--font-body);
  font-size: clamp(13px, 1vw, 15px);
  color: rgba(255, 255, 255, 0.7);
  margin-bottom: 26px;
  letter-spacing: 0.04em;
}

.modal-ticket-btn {
  align-self: flex-start;
  font-size: clamp(11px, 0.85vw, 12px);
  padding: 12px 24px;
  display: inline-flex;
  align-items: center;
  gap: 10px;
  letter-spacing: 0.18em;
  transition: gap 0.3s cubic-bezier(0.16, 1, 0.3, 1),
              background 0.3s, color 0.3s, transform 0.3s;
}

.modal-ticket-btn .ecc-arrow {
  display: inline-block;
  transition: transform 0.3s cubic-bezier(0.16, 1, 0.3, 1);
}

.modal-ticket-btn:hover {
  gap: 14px;
}

.modal-ticket-btn:hover .ecc-arrow {
  transform: translateX(4px);
}

/* ── Modal gallery ── */
.modal-gallery-section {
  border-top: 1px solid rgba(0, 255, 65, 0.1);
  padding: clamp(18px, 3vh, 26px) clamp(14px, 3vw, 32px) clamp(22px, 3vh, 32px);
  margin-top: clamp(20px, 3vh, 32px);
}

.modal-gallery-label {
  font-family: var(--font-mono);
  font-size: 10px;
  letter-spacing: 0.32em;
  color: rgba(0, 255, 65, 0.5);
  margin-bottom: 14px;
  text-transform: uppercase;
}

/* Base: 2 columns in modal gallery on mobile */
.modal-gallery-grid {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 8px;
}

/* Desktop: 4 columns */
@media (min-width: 768px) {
  .modal-gallery-grid {
    grid-template-columns: repeat(4, 1fr);
    gap: 10px;
  }
}

.modal-gallery-thumb {
  position: relative;
  aspect-ratio: 1 / 1;
  overflow: hidden;
  cursor: pointer;
  border: 1px solid rgba(0, 255, 65, 0.18);
  border-radius: 2px;
  background: #000;
  transition:
    border-color var(--duration-mid, 320ms) var(--ease-electric, cubic-bezier(0.16, 1, 0.3, 1)),
    transform var(--duration-mid, 320ms) var(--ease-electric, cubic-bezier(0.16, 1, 0.3, 1)),
    box-shadow var(--duration-mid, 320ms) var(--ease-electric, cubic-bezier(0.16, 1, 0.3, 1));
}

.modal-gallery-thumb:hover {
  border-color: rgba(0, 255, 65, 0.45);
  transform: translateY(-2px);
  box-shadow: 0 10px 22px rgba(0, 0, 0, 0.5),
              0 0 0 1px rgba(0, 255, 65, 0.18);
}

.modal-gallery-thumb:focus-visible {
  outline: 2px solid var(--cyan);
  outline-offset: 3px;
}

.modal-gallery-thumb img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
  transition: transform 0.4s cubic-bezier(0.16, 1, 0.3, 1),
              filter 0.4s cubic-bezier(0.16, 1, 0.3, 1);
  filter: saturate(0.9);
}

.modal-gallery-thumb:hover img {
  transform: scale(1.06);
  filter: saturate(1.1);
}

/* ============================================================
   CANVAS ELEMENTS
============================================================ */
#mission-grid-canvas {
  position: absolute;
  inset: 0;
  z-index: 0;
  pointer-events: none;
  width: 100%;
  height: 100%;
}

#brand-scan-canvas {
  position: absolute;
  inset: 0;
  z-index: 0;
  pointer-events: none;
  width: 100%;
  height: 100%;
}

/* ============================================================
   PERFORMANCE: will-change — applied ONLY during the active
   animation window. Permanent will-change blows Firefox's GPU
   memory budget (viewport_w × viewport_h × 3) once the page has
   many cards/sections, after which the hint is silently ignored
   AND we still pay the layer-promotion cost everywhere else.
============================================================ */

/* Carousel: promote only while a slide transition is running.
   JS toggles `.is-sliding` on the track at slide start, removes
   it at transitionend. Falls back to the parent during hover so
   pre-touch on touch devices still warms the layer. */
.carousel-track.is-sliding {
  will-change: transform;
}

/* Cards: promote on hover/focus only, and only the leaf elements
   that actually transform during the hover animation. */
.event-card:hover .event-card-bg,
.event-card:hover .event-card-inner,
.event-card:hover .event-card-img,
.event-card:focus-within .event-card-bg,
.event-card:focus-within .event-card-inner,
.event-card:focus-within .event-card-img {
  will-change: transform;
}

/* Mobile menu: promote only while open (transform animation in flight). */
.mobile-menu.open {
  will-change: transform, opacity;
}

/* ============================================================
   ACCESSIBILITY: prefers-reduced-motion
============================================================ */
@media (prefers-reduced-motion: reduce) {
  .pulse-ring-anim {
    animation: none;
    opacity: 0.3;
  }

  .hero-title.glitch::before,
  .hero-title.glitch::after {
    display: none !important;
  }

  .event-card {
    transition: border-color 0.15s, box-shadow 0.15s;
  }

  .event-card:hover {
    transform: none;
  }

  .venue-tile-node {
    animation: none;
    box-shadow: 0 0 3px var(--cyan);
  }

  .venue-tile,
  .venue-tile::before,
  .venue-tile::after,
  .venue-tile-arrow {
    transition: none !important;
    animation: none !important;
  }

  .venue-tile:hover,
  .venue-tile:focus-visible {
    transform: none;
  }

  .hero-video {
    transition: opacity 0.3s ease-in-out;
  }

  .event-card-bg,
  .event-card-inner,
  .event-card-img,
  .event-card-frame,
  .event-card-cta {
    transition: none !important;
  }

  .event-card:hover,
  .event-card:focus-visible {
    transform: none;
  }

  .event-card:hover .event-card-img,
  .event-card:hover .event-card-bg,
  .event-card:focus-visible .event-card-img,
  .event-card:focus-visible .event-card-bg {
    transform: none;
  }


  .carousel-track {
    transition: none;
  }
}

/* ============================================================
   POSH SECTION — ticketing CTA
   Sits between #section-venues and #section-join.
============================================================ */
#section-posh {
  padding: clamp(60px, 9vh, 120px) clamp(16px, 4vw, 64px);
  display: flex;
  flex-direction: column;
  align-items: center;
  text-align: center;
}

.posh-block {
  position: relative;
  width: 100%;
  max-width: min(880px, 92vw);
  padding: clamp(36px, 5vh, 72px) clamp(24px, 4vw, 56px);
  border: 1px solid rgba(0, 255, 170, 0.18);
  border-radius: 4px;
  background:
    radial-gradient(ellipse at 20% 10%, rgba(0, 255, 170, 0.08) 0%, transparent 60%),
    radial-gradient(ellipse at 80% 90%, rgba(0, 200, 255, 0.06) 0%, transparent 60%),
    linear-gradient(160deg, rgba(8, 18, 22, 0.9) 0%, rgba(4, 10, 14, 0.92) 100%);
  box-shadow:
    0 12px 40px rgba(0, 0, 0, 0.4),
    0 0 0 1px rgba(0, 255, 170, 0.08),
    inset 0 1px 0 rgba(255, 255, 255, 0.04);
}

.posh-block::before,
.posh-block::after {
  content: '';
  position: absolute;
  width: 28px;
  height: 28px;
  pointer-events: none;
}
.posh-block::before {
  top: -1px; left: -1px;
  border-top: 2px solid var(--lime, #00ffaa);
  border-left: 2px solid var(--lime, #00ffaa);
}
.posh-block::after {
  bottom: -1px; right: -1px;
  border-bottom: 2px solid var(--lime, #00ffaa);
  border-right: 2px solid var(--lime, #00ffaa);
}

.posh-eyebrow {
  font-family: var(--font-mono, 'Share Tech Mono', 'JetBrains Mono', monospace);
  font-size: clamp(11px, 1.1vw, 13px);
  letter-spacing: 0.22em;
  text-transform: uppercase;
  color: var(--cyan, #00ffe0);
  margin-bottom: clamp(12px, 1.6vh, 20px);
  opacity: 0.85;
}

.posh-heading {
  /* Display heading: Orbitron carries the future/electric tone.
     If for any reason the variable is unset, fall through to a
     similarly geometric monospace before sans. */
  font-family: var(--font-head, 'Orbitron', 'Share Tech Mono', monospace);
  font-size: clamp(2.2rem, 5.4vw, 4rem);
  letter-spacing: 0.04em;
  line-height: 1.05;
  margin: 0 0 clamp(14px, 2vh, 22px) 0;
  color: #ffffff;
  text-shadow: 0 0 24px rgba(0, 255, 170, 0.15);
}

.posh-body {
  font-family: var(--font-body, 'Space Grotesk', sans-serif);
  font-size: clamp(0.95rem, 1.3vw, 1.05rem);
  line-height: 1.6;
  color: rgba(255, 255, 255, 0.78);
  max-width: 56ch;
  margin: 0 auto clamp(22px, 3vh, 32px);
}

.posh-cta {
  display: inline-flex;
  align-items: center;
  gap: 14px;
  padding: 14px 28px;
  border: 1px solid rgba(0, 255, 170, 0.45);
  background: rgba(0, 255, 170, 0.04);
  color: var(--lime, #00ffaa);
  font-family: var(--font-mono, 'Share Tech Mono', 'JetBrains Mono', monospace);
  font-size: clamp(13px, 1.2vw, 15px);
  letter-spacing: 0.14em;
  text-transform: uppercase;
  text-decoration: none;
  border-radius: 2px;
  transition:
    background 0.25s ease,
    border-color 0.25s ease,
    box-shadow 0.25s ease,
    transform 0.25s cubic-bezier(0.16, 1, 0.3, 1);
  will-change: transform;
}

.posh-cta:hover,
.posh-cta:focus-visible {
  background: rgba(0, 255, 170, 0.12);
  border-color: var(--lime, #00ffaa);
  box-shadow:
    0 0 0 1px rgba(0, 255, 170, 0.4),
    0 0 28px rgba(0, 255, 170, 0.35);
  transform: translateY(-2px);
}

.posh-cta-arrow {
  transition: transform 0.3s cubic-bezier(0.16, 1, 0.3, 1);
}
.posh-cta:hover .posh-cta-arrow,
.posh-cta:focus-visible .posh-cta-arrow {
  transform: translateX(4px);
}

.posh-meta {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  margin-top: clamp(20px, 2.5vh, 28px);
  font-family: var(--font-mono, 'Share Tech Mono', 'JetBrains Mono', monospace);
  font-size: 11px;
  letter-spacing: 0.12em;
  color: rgba(255, 255, 255, 0.4);
  text-transform: lowercase;
}
.posh-meta-dot {
  width: 6px;
  height: 6px;
  border-radius: 50%;
  background: var(--cyan, #00ffe0);
  box-shadow: 0 0 8px var(--cyan, #00ffe0);
  animation: posh-pulse 2.4s ease-in-out infinite;
}

@keyframes posh-pulse {
  0%, 100% { opacity: 0.4; transform: scale(0.85); }
  50%      { opacity: 1;   transform: scale(1.15); }
}

@media (max-width: 540px) {
  .posh-block {
    padding: clamp(28px, 5vh, 40px) clamp(18px, 5vw, 28px);
  }
  .posh-cta {
    padding: 12px 20px;
    width: 100%;
    max-width: 320px;
    justify-content: center;
  }
}

@media (prefers-reduced-motion: reduce) {
  .posh-meta-dot { animation: none; }
  .posh-cta { transition: none; }
}