/* ===== Base ===== */
html {
  scroll-behavior: smooth;
}

/* ===== Film grain (global atmosphere, not a new color — pure noise overlay) ===== */
#grain {
  position: fixed;
  inset: 0;
  z-index: 30;
  pointer-events: none;
  opacity: 0.035;
  mix-blend-mode: overlay;
  background-repeat: repeat;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='120' height='120'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.85' numOctaves='2' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E");
}

/* ===== Floating glass navbar =====
   #navbar IS the visual bar (background/border/radius/shadow all live here,
   never on a separate inner box) so there is exactly one edge to manage and
   it can never mismatch between left/right/bottom. .nav-inner is purely a
   layout wrapper (max-width + padding + flex) with no visual styling of its
   own, so it can never introduce a second, misaligned "edge". */
#navbar {
  max-width: 100%;
  margin: 0;
  background: rgba(20, 20, 20, 0.55);
  backdrop-filter: blur(14px);
  -webkit-backdrop-filter: blur(14px);
  border-top: none;
  border-left: none;
  border-right: none;
  border-bottom: 1px solid rgba(255, 255, 255, 0.1);
  border-radius: 0;
}
#navbar.nav-condensed {
  max-width: 1280px; /* matches Tailwind's max-w-7xl, same token used by .nav-inner */
  margin: 14px auto 0;
  border-radius: 9999px;
  border: 1px solid rgba(255, 255, 255, 0.15);
  background: rgba(26, 26, 26, 0.85);
  backdrop-filter: blur(16px);
  -webkit-backdrop-filter: blur(16px);
  box-shadow: 0 18px 45px -12px rgba(0, 0, 0, 0.55);
}
.nav-inner {
  height: 80px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 8px;
  transition: height 0.3s ease-in-out;
}
#navbar.nav-condensed .nav-inner {
  height: 66px;
  padding-left: 20px;
  padding-right: 20px;
}
#navbar.nav-condensed .js-nav-link,
#navbar.nav-condensed .dropdown-trigger {
  padding-left: 6px;
  padding-right: 6px;
}
#navbar.nav-condensed .nav-login-btn {
  padding-left: 12px;
  padding-right: 12px;
}
#navbar.nav-condensed a.flex.flex-col {
  transform: scale(0.9);
  transform-origin: left center;
}

/* ===== Nav dropdown panels + mega links ===== */
.dropdown-panel {
  background: rgba(18, 18, 18, 0.92);
  backdrop-filter: blur(18px);
  -webkit-backdrop-filter: blur(18px);
  border: 1px solid rgba(255, 255, 255, 0.08);
  box-shadow: 0 24px 50px -12px rgba(0, 0, 0, 0.6);
}
.dropdown-trigger[aria-expanded="true"] .dropdown-chevron {
  transform: rotate(180deg);
}
nav .js-nav-link.is-active,
#navbar .js-nav-link.is-active {
  color: #FF6A00;
}

/* ===== Generic glass surface (hero card, floating chip, modal) ===== */
.glass-panel {
  background: rgba(20, 20, 20, 0.55);
  backdrop-filter: blur(20px);
  -webkit-backdrop-filter: blur(20px);
  border: 1px solid rgba(255, 255, 255, 0.1);
}

/* ===== Hero atmosphere (same palette, layered instead of flat) ===== */
.hero-atmosphere {
  background: radial-gradient(120% 90% at 15% 0%, #232323 0%, #1A1A1A 45%, #141414 100%);
}
#contact {
  background: radial-gradient(140% 100% at 50% 120%, #232323 0%, #1A1A1A 55%, #121212 100%);
}

@keyframes kenburns {
  0%   { transform: scale(1); }
  100% { transform: scale(1.12); }
}
.kenburns {
  animation: kenburns 18s ease-in-out infinite alternate;
}

/* ===== Decorative keyframes (hero mock UI) ===== */
@keyframes blink {
  0%, 100% { opacity: 1; }
  50%      { opacity: 0.15; }
}
@keyframes pulse-ring {
  0%   { transform: scale(0.9); opacity: 0.7; }
  100% { transform: scale(2.1); opacity: 0; }
}
@keyframes eq-bar {
  0%   { transform: scaleY(0.25); }
  100% { transform: scaleY(1); }
}
@keyframes float-card {
  0%, 100% { transform: translateY(0px) rotate(-2deg); }
  50%      { transform: translateY(-9px) rotate(-2deg); }
}
@keyframes marquee {
  from { transform: translateX(0); }
  to   { transform: translateX(-50%); }
}

.rec-dot { animation: blink 1.3s ease-in-out infinite; }
.pulse-ring { animation: pulse-ring 2s cubic-bezier(0.215, 0.61, 0.355, 1) infinite; }
.float-card { animation: float-card 4s ease-in-out infinite; }

.eq-bar {
  display: block;
  width: 3px;
  background-color: #FF6A00;
  border-radius: 2px;
  transform-origin: center bottom;
  animation: eq-bar 0.6s ease-in-out infinite alternate;
}
.eq-bar:nth-child(2n) { animation-duration: 0.5s; animation-delay: 0.08s; }
.eq-bar:nth-child(3n) { animation-duration: 0.75s; animation-delay: 0.15s; }
.eq-bar:nth-child(4n) { animation-duration: 0.4s; animation-delay: 0.22s; }
.eq-bar:nth-child(5n) { animation-duration: 0.65s; animation-delay: 0.3s; }

/* ===== Marquee ===== */
.marquee-mask {
  -webkit-mask-image: linear-gradient(90deg, transparent 0, #000 8%, #000 92%, transparent 100%);
  mask-image: linear-gradient(90deg, transparent 0, #000 8%, #000 92%, transparent 100%);
}
.marquee-track {
  display: flex;
  width: max-content;
  animation: marquee 30s linear infinite;
}
.marquee-track:hover { animation-play-state: paused; }
.marquee-logo {
  color: #B0B0B0;
  transition: color 0.3s ease;
}
.marquee-logo:hover { color: #FF6A00; }

/* ===== Scroll-reveal (GSAP ScrollTrigger toggles .reveal-visible; falls back safely if GSAP fails to load) ===== */
.reveal {
  opacity: 0;
  transform: translateY(20px);
  transition: opacity 0.6s ease, transform 0.6s ease;
}
.reveal.reveal-visible {
  opacity: 1;
  transform: translateY(0);
}

/* ===== Magnetic buttons + 3D tilt cards (base — JS drives the transform) ===== */
.magnetic {
  transition: transform 0.3s cubic-bezier(0.16, 1, 0.3, 1);
}
.tilt-card {
  transition: transform 0.5s cubic-bezier(0.16, 1, 0.3, 1), border-color 0.3s ease, box-shadow 0.3s ease;
  transform-style: preserve-3d;
  will-change: transform;
}

/* ===== Event cards: depth + index numeral + duotone image ===== */
.event-card {
  /* overflow-hidden (set via Tailwind class on the element) + a real border-top
     — not an absolutely-positioned strip — guarantees the hover accent can
     never render outside the card's own rounded corners. */
  background: linear-gradient(160deg, #202020, #141414);
  border: 1px solid rgba(255, 255, 255, 0.08);
  border-top: 2px solid transparent;
  box-shadow: 0 20px 40px -22px rgba(0, 0, 0, 0.6);
  transition: opacity 0.25s ease, border-color 0.3s ease, box-shadow 0.3s ease;
}
.event-card:hover {
  border-color: rgba(255, 106, 0, 0.35);
  border-top-color: #FF6A00;
  box-shadow: 0 24px 60px -18px rgba(255, 106, 0, 0.25), 0 8px 24px -8px rgba(0, 0, 0, 0.55);
}
.event-card.filtered-out {
  opacity: 0;
  pointer-events: none;
}

.card-index {
  position: absolute;
  top: 14px;
  right: 16px;
  z-index: 5;
  font-size: 2.25rem;
  font-weight: 700;
  line-height: 1;
  color: rgba(255, 255, 255, 0.22);
  pointer-events: none;
}

.duotone-img {
  filter: grayscale(85%) contrast(1.05) brightness(0.92);
  transform: scale(1.03);
  transition: filter 0.5s ease, transform 0.6s cubic-bezier(0.16, 1, 0.3, 1);
}
.group:hover .duotone-img,
.tilt-card:hover .duotone-img {
  filter: grayscale(0%) contrast(1) brightness(1);
  transform: scale(1.08);
}

/* ===== Event filter pills ===== */
.filter-btn {
  background: #F2F2F2;
  color: #1A1A1A;
}
.filter-btn:hover {
  background: #1A1A1A;
  color: #FFFFFF;
}
.filter-btn.is-active {
  background: #FF6A00;
  color: #FFFFFF;
  box-shadow: 0 4px 16px rgba(255, 106, 0, 0.4);
}

/* ===== About stats: gradient fill + glowing dividers ===== */
.stat-fill {
  background: linear-gradient(135deg, #FF6A00, #FFB37A);
  -webkit-background-clip: text;
  background-clip: text;
  color: transparent;
}
.stat-col {
  position: relative;
}
.stat-col:not(:last-child)::after {
  content: '';
  position: absolute;
  top: 0;
  right: -0.5rem;
  bottom: 4px;
  width: 1px;
  background: linear-gradient(180deg, transparent, rgba(255, 106, 0, 0.45), transparent);
}

/* ===== Footer giant wordmark ===== */
.footer-wordmark {
  position: absolute;
  left: 50%;
  bottom: -2.2rem;
  transform: translateX(-50%);
  font-size: clamp(4rem, 14vw, 11rem);
  font-weight: 700;
  line-height: 1;
  white-space: nowrap;
  color: transparent;
  -webkit-text-stroke: 1px rgba(255, 255, 255, 0.06);
  pointer-events: none;
  z-index: 0;
  letter-spacing: -0.03em;
}

/* ===== Mobile drawer transition ===== */
#drawer-panel {
  transform: translateX(100%);
  transition: transform 0.35s ease;
}
#mobile-drawer.is-open #drawer-panel {
  transform: translateX(0);
}
#drawer-backdrop {
  opacity: 0;
  transition: opacity 0.35s ease;
}
#mobile-drawer.is-open #drawer-backdrop {
  opacity: 1;
}

/* ===== Modal transition ===== */
#preview-modal .glass-panel {
  transform: scale(0.95);
  opacity: 0;
  transition: transform 0.2s ease, opacity 0.2s ease;
}
#preview-modal.is-open .glass-panel {
  transform: scale(1);
  opacity: 1;
}

/* ===== Reduced motion: honor user preference ===== */
@media (prefers-reduced-motion: reduce) {
  html {
    scroll-behavior: auto;
  }
  .reveal {
    opacity: 1 !important;
    transform: none !important;
    transition: none !important;
  }
  .pulse-ring,
  .float-card,
  .marquee-track,
  .eq-bar,
  .rec-dot,
  .kenburns {
    animation: none !important;
  }
  .tilt-card,
  .magnetic {
    transition: none !important;
  }
}

/* ===== Coarse pointer / touch: skip cursor-only effects cleanly ===== */
@media (hover: none), (pointer: coarse) {
  .duotone-img {
    filter: grayscale(0%);
  }
}