/* ============================================
   AS ROME BURNS - ANIMATIONS
   Inspired by landonorris.com
   ============================================ */

/* --------------------------------------------
   CSS Variables for Animation
   -------------------------------------------- */
:root {
  /* Signature easing — snappy ease-out with subtle anticipation */
  --ease-signature: cubic-bezier(0.65, 0.05, 0, 1);
  --ease-out-expo: cubic-bezier(0.16, 1, 0.3, 1);

  /* Unified durations */
  --duration-fast: 0.3s;
  --duration-default: 0.75s;
  --duration-slow: 1.2s;

  /* Combined animation shorthand */
  --animation-default: 0.75s cubic-bezier(0.65, 0.05, 0, 1);

  /* Glow effects */
  --glow-gold: 0 0 20px rgba(245, 197, 24, 0.3);
  --glow-gold-strong: 0 0 40px rgba(245, 197, 24, 0.5);
}

/* --------------------------------------------
   Smooth Scroll Enhancement
   -------------------------------------------- */
html {
  scroll-behavior: smooth;
}

/* Smoother scrolling feel */
html.lenis {
  height: auto;
}

.lenis.lenis-smooth {
  scroll-behavior: auto;
}

/* --------------------------------------------
   Keyframe Animations
   -------------------------------------------- */

/* Fade up from below - more dramatic */
@keyframes fadeUp {
  from {
    opacity: 0;
    transform: translateY(80px);
  }
  to {
    opacity: 1;
    transform: translateY(0);
  }
}

/* Fade in from left */
@keyframes fadeLeft {
  from {
    opacity: 0;
    transform: translateX(-60px);
  }
  to {
    opacity: 1;
    transform: translateX(0);
  }
}

/* Fade in from right */
@keyframes fadeRight {
  from {
    opacity: 0;
    transform: translateX(60px);
  }
  to {
    opacity: 1;
    transform: translateX(0);
  }
}

/* Scale up fade - more dramatic */
@keyframes fadeScale {
  from {
    opacity: 0;
    transform: scale(0.8);
  }
  to {
    opacity: 1;
    transform: scale(1);
  }
}

/* Clip reveal from left (for images) */
@keyframes clipRevealLeft {
  from {
    clip-path: inset(0 100% 0 0);
  }
  to {
    clip-path: inset(0 0 0 0);
  }
}

/* Clip reveal from bottom */
@keyframes clipRevealUp {
  from {
    clip-path: inset(100% 0 0 0);
  }
  to {
    clip-path: inset(0 0 0 0);
  }
}

/* Glow pulse (for active states) */
@keyframes glowPulse {
  0%, 100% {
    box-shadow: 0 0 0 0 rgba(245, 197, 24, 0.4);
  }
  50% {
    box-shadow: 0 0 30px 8px rgba(245, 197, 24, 0.3);
  }
}

/* Ken Burns zoom (for hero video/images) */
@keyframes kenBurns {
  from {
    transform: scale(1);
  }
  to {
    transform: scale(1.15);
  }
}

/* Split text line reveal */
@keyframes splitReveal {
  from {
    opacity: 0;
    transform: translateY(120%);
  }
  to {
    opacity: 1;
    transform: translateY(0);
  }
}

/* Draw line from center */
@keyframes drawLine {
  from {
    transform: scaleX(0);
  }
  to {
    transform: scaleX(1);
  }
}

/* Marquee scroll - infinite */
@keyframes marqueeLeft {
  from {
    transform: translateX(0);
  }
  to {
    transform: translateX(-50%);
  }
}

@keyframes marqueeRight {
  from {
    transform: translateX(-50%);
  }
  to {
    transform: translateX(0);
  }
}

/* Subtle float */
@keyframes float {
  0%, 100% {
    transform: translateY(0);
  }
  50% {
    transform: translateY(-15px);
  }
}

/* Rotate infinitely */
@keyframes spin {
  from {
    transform: rotate(0deg);
  }
  to {
    transform: rotate(360deg);
  }
}

/* Shimmer effect */
@keyframes shimmer {
  0% {
    background-position: -200% 0;
  }
  100% {
    background-position: 200% 0;
  }
}

/* Breathe/pulse scale */
@keyframes breathe {
  0%, 100% {
    transform: scale(1);
  }
  50% {
    transform: scale(1.02);
  }
}

/* --------------------------------------------
   MARQUEE - Endless Scrolling Text
   -------------------------------------------- */
.marquee {
  position: relative;
  overflow: hidden;
  padding: 1.5rem 0;
  background: var(--color-bg-alt);
  border-top: 1px solid var(--color-border);
  border-bottom: 1px solid var(--color-border);
  -webkit-mask-image: linear-gradient(90deg, transparent 0%, #000 10%, #000 90%, transparent 100%);
  mask-image: linear-gradient(90deg, transparent 0%, #000 10%, #000 90%, transparent 100%);
}

.marquee__inner {
  display: flex;
  width: fit-content;
  animation: marqueeLeft 25s linear infinite;
  animation-play-state: paused;
}

.marquee.is-visible .marquee__inner {
  animation-play-state: running;
}

.marquee:hover .marquee__inner {
  animation-play-state: paused;
}

.marquee--reverse .marquee__inner {
  animation-name: marqueeRight;
}

.marquee__content {
  display: flex;
  align-items: center;
  gap: 4rem;
  padding-right: 4rem;
  white-space: nowrap;
}

.marquee__text {
  font-family: var(--font-display);
  font-size: clamp(2rem, 5vw, 4rem);
  text-transform: uppercase;
  letter-spacing: 0.05em;
  color: var(--color-text);
}

.marquee__separator {
  width: 12px;
  height: 12px;
  background: var(--color-gold);
  border-radius: 50%;
  flex-shrink: 0;
}

.marquee--outline .marquee__text {
  color: transparent;
  -webkit-text-stroke: 1px var(--color-text);
  text-stroke: 1px var(--color-text);
}

.marquee--gold .marquee__text {
  color: var(--color-gold);
}

/* Speed variants */
.marquee--fast .marquee__inner {
  animation-duration: 15s;
}

.marquee--slow .marquee__inner {
  animation-duration: 40s;
}

/* --------------------------------------------
   Scroll Animation Base Classes
   -------------------------------------------- */

/* Default state: visible (progressive enhancement) */
.animate-on-scroll {
  opacity: 1;
  transform: translateY(0);
}

/* With JS enabled: start hidden */
.js-enabled .animate-on-scroll {
  opacity: 0;
  transform: translateY(60px);
  transition: opacity var(--duration-default) var(--ease-out-expo),
              transform var(--duration-default) var(--ease-out-expo);
}

/* Visible state (triggered by IntersectionObserver) */
.js-enabled .animate-on-scroll.is-visible {
  opacity: 1;
  transform: translateY(0);
}

/* Variant: Fade from left */
.js-enabled .animate-on-scroll.animate--fade-left {
  transform: translateX(-60px);
}
.js-enabled .animate-on-scroll.animate--fade-left.is-visible {
  transform: translateX(0);
}

/* Variant: Fade from right */
.js-enabled .animate-on-scroll.animate--fade-right {
  transform: translateX(60px);
}
.js-enabled .animate-on-scroll.animate--fade-right.is-visible {
  transform: translateX(0);
}

/* Variant: Scale up */
.js-enabled .animate-on-scroll.animate--scale {
  transform: scale(0.85);
}
.js-enabled .animate-on-scroll.animate--scale.is-visible {
  transform: scale(1);
}

/* Variant: Clip reveal */
.js-enabled .animate-on-scroll.animate--clip-left {
  clip-path: inset(0 100% 0 0);
  transform: none;
  opacity: 1;
  transition: clip-path var(--duration-slow) var(--ease-out-expo);
}
.js-enabled .animate-on-scroll.animate--clip-left.is-visible {
  clip-path: inset(0 0 0 0);
}

/* Variant: Blur in */
.js-enabled .animate-on-scroll.animate--blur {
  filter: blur(10px);
  transform: translateY(30px);
}
.js-enabled .animate-on-scroll.animate--blur.is-visible {
  filter: blur(0);
  transform: translateY(0);
}

/* Stagger delay utilities */
.js-enabled .stagger-1 { transition-delay: 0.1s; }
.js-enabled .stagger-2 { transition-delay: 0.2s; }
.js-enabled .stagger-3 { transition-delay: 0.3s; }
.js-enabled .stagger-4 { transition-delay: 0.4s; }
.js-enabled .stagger-5 { transition-delay: 0.5s; }
.js-enabled .stagger-6 { transition-delay: 0.6s; }
.js-enabled .stagger-7 { transition-delay: 0.7s; }
.js-enabled .stagger-8 { transition-delay: 0.8s; }

/* --------------------------------------------
   Hero Animations - More Dramatic
   -------------------------------------------- */

/* Ken Burns effect on hero video - stronger */
.hero__bg video,
.hero__bg img {
  animation: kenBurns 25s ease-out forwards;
}

/* --------------------------------------------
   Hero Scroll Animation (Video zooms out, text appears)
   -------------------------------------------- */
.hero-scroll {
  position: relative;
  height: 170vh; /* Scroll space for animation */
  background: var(--color-bg);
}

.hero-scroll__sticky {
  position: sticky;
  top: 0;
  height: 100vh;
  display: flex;
  align-items: center;
  justify-content: center;
  overflow: hidden;
}

.hero-scroll__video-container {
  position: absolute;
  width: 100%;
  height: 100%;
  transition: all 0.1s linear;
  will-change: transform, width, left, border-radius;
  cursor: crosshair;
  background: var(--color-bg);
  overflow: hidden;
}

.hero-scroll__video-container video {
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: center center;
  transition: transform 0.15s ease-out;
  transform-origin: center center;
  /* Start slightly zoomed to crop the portrait video */
  transform: scale(1.3);
}

.hero-scroll__overlay {
  position: absolute;
  inset: 0;
  background: linear-gradient(
    to bottom,
    rgba(10, 10, 10, 0.3) 0%,
    rgba(10, 10, 10, 0.1) 50%,
    rgba(10, 10, 10, 0.5) 100%
  );
  pointer-events: none;
}

.hero-scroll__video-content {
  position: absolute;
  inset: 0;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  text-align: center;
  padding: 2rem;
  z-index: 2;
  transition: opacity 0.3s ease;
}

/* Text section (appears on scroll) */
.hero-scroll__text {
  position: absolute;
  right: 5%;
  top: 50%;
  transform: translateY(-50%);
  width: 40%;
  max-width: 500px;
  opacity: 0;
  pointer-events: none;
  transition: opacity 0.5s var(--ease-out-expo);
  z-index: 10;
}

.hero-scroll__text.is-visible {
  opacity: 1;
  pointer-events: auto;
}

.hero-scroll__heading {
  font-family: var(--font-display);
  font-size: clamp(2.5rem, 5vw, 4rem);
  color: var(--color-gold);
  margin-bottom: 1.5rem;
  letter-spacing: 0.05em;
}

.hero-scroll__description {
  font-size: 1.1rem;
  line-height: 1.7;
  color: var(--color-text-muted);
  margin-bottom: 1rem;
}

.hero-scroll__description em {
  color: var(--color-gold);
  font-style: normal;
}

.hero-scroll__cta {
  display: flex;
  gap: 1rem;
  margin-top: 2rem;
}

/* Scroll indicator — bouncing chevron */
.hero-scroll__indicator {
  position: absolute;
  bottom: 2rem;
  left: 50%;
  transform: translateX(-50%);
  z-index: 15;
  color: var(--color-gold);
  opacity: 0.8;
  animation: scrollBounce 1.8s ease-in-out infinite;
  transition: opacity 0.4s ease;
  pointer-events: none;
}

.hero-scroll__indicator.is-hidden {
  opacity: 0;
}

@keyframes scrollBounce {
  0%, 100% { transform: translateX(-50%) translateY(0); }
  50% { transform: translateX(-50%) translateY(10px); }
}

/* Spotlight/flashlight cursor effect */
.hero__spotlight {
  position: absolute;
  width: 250px;
  height: 250px;
  border-radius: 50%;
  pointer-events: none;
  z-index: 4;
  opacity: 0;
  background: radial-gradient(
    circle,
    rgba(255, 255, 255, 0.15) 0%,
    rgba(245, 197, 24, 0.1) 30%,
    transparent 60%
  );
  transform: translate(-50%, -50%);
  transition: opacity 0.3s ease;
  mix-blend-mode: overlay;
}

.hero-scroll__video-container:hover .hero__spotlight {
  opacity: 1;
}

/* Responsive adjustments */
@media (max-width: 900px) {
  .hero-scroll {
    height: 150vh; /* Shorter scroll on mobile */
  }

  .hero-scroll__sticky {
    flex-direction: column;
  }

  .hero-scroll__text {
    position: absolute;
    bottom: 0;
    left: 0;
    right: 0;
    top: auto;
    transform: none;
    width: 100%;
    max-width: none;
    padding: 2rem 1.5rem;
    text-align: center;
    background: linear-gradient(to bottom, transparent 0%, rgba(10, 10, 10, 0.95) 25%);
    z-index: 10;
  }

  .hero-scroll__cta {
    justify-content: center;
    flex-wrap: wrap;
  }

  /* Burn reveal text visible on mobile (CSS mask-image reveal works on iOS Safari) */
}

@media (max-width: 480px) {
  .hero-scroll__heading {
    font-size: 2rem;
  }

  .hero-scroll__description {
    font-size: 1rem;
  }
}

/* Hero content entrance */
.js-enabled .hero__content {
  opacity: 0;
  animation: fadeUp 1.2s var(--ease-out-expo) 0.3s forwards;
}

/* Split text container */
.split-text {
  overflow: hidden;
}

.split-text .line {
  display: block;
  overflow: hidden;
}

.split-text .line-inner {
  display: block;
}

/* With JS: animate lines - more dramatic */
.js-enabled .split-text .line-inner {
  transform: translateY(120%);
  transition: transform var(--duration-default) var(--ease-out-expo);
}

.js-enabled .split-text.is-visible .line-inner {
  transform: translateY(0);
}

/* Stagger each line with more delay */
.js-enabled .split-text .line:nth-child(1) .line-inner { transition-delay: 0s; }
.js-enabled .split-text .line:nth-child(2) .line-inner { transition-delay: 0.15s; }
.js-enabled .split-text .line:nth-child(3) .line-inner { transition-delay: 0.3s; }
.js-enabled .split-text .line:nth-child(4) .line-inner { transition-delay: 0.45s; }

/* Character-level split text */
.split-text--chars .char {
  display: inline-block;
  opacity: 0;
  transform: translateY(100%);
  transition: opacity var(--duration-default) var(--ease-signature),
              transform var(--duration-default) var(--ease-signature);
}

.split-text--chars.is-visible .char {
  opacity: 1;
  transform: translateY(0);
}

/* Hero subtitle and CTA animations */
.js-enabled .hero__subtitle {
  opacity: 0;
  transform: translateY(30px);
  animation: fadeUp 1s var(--ease-out-expo) 0.8s forwards;
}

.js-enabled .hero__cta {
  opacity: 0;
  transform: translateY(30px);
  animation: fadeUp 1s var(--ease-out-expo) 1s forwards;
}

/* --------------------------------------------
   Parallax Effects
   -------------------------------------------- */
.parallax {
  will-change: transform;
}

.js-enabled [data-parallax] {
  transition: transform 0.1s linear;
}

/* --------------------------------------------
   Navigation Scroll Effect
   -------------------------------------------- */

.nav {
  transition: background-color var(--duration-slow) var(--ease-signature),
              box-shadow var(--duration-slow) var(--ease-signature),
              padding var(--duration-slow) var(--ease-signature);
}

.nav.nav--scrolled {
  background-color: rgba(10, 10, 10, 0.98);
  box-shadow: 0 4px 30px rgba(0, 0, 0, 0.5);
  backdrop-filter: blur(20px);
  -webkit-backdrop-filter: blur(20px);
}

/* Nav links hover effect */
.nav__link {
  position: relative;
  transition: color var(--duration-fast) ease;
}

.nav__link::after {
  content: '';
  position: absolute;
  bottom: -4px;
  left: 0;
  width: 100%;
  height: 2px;
  background: var(--color-gold);
  transform: scaleX(0);
  transform-origin: right;
  transition: transform var(--duration-fast) var(--ease-out-expo);
}

.nav__link:hover::after,
.nav__link.active::after {
  transform: scaleX(1);
  transform-origin: left;
}

/* --------------------------------------------
   Enhanced Button Effects
   -------------------------------------------- */

.btn {
  position: relative;
  overflow: hidden;
  transition: transform var(--duration-fast) var(--ease-signature),
              box-shadow var(--duration-fast) var(--ease-signature),
              background-color var(--duration-fast) ease,
              color var(--duration-fast) ease,
              letter-spacing var(--duration-fast) ease;
}

.btn:hover {
  transform: translateY(-3px);
  box-shadow: var(--glow-gold-strong);
  letter-spacing: 0.05em;
}

.btn:active {
  transform: translateY(-1px);
}

/* Button shine effect - more dramatic */
.btn--filled::before {
  content: '';
  position: absolute;
  top: 0;
  left: -100%;
  width: 100%;
  height: 100%;
  background: linear-gradient(
    90deg,
    transparent,
    rgba(255, 255, 255, 0.3),
    transparent
  );
  transition: left 0.6s var(--ease-out-expo);
}

.btn--filled:hover::before {
  left: 100%;
}

/* Magnetic button effect placeholder */
.btn--magnetic {
  transition: transform 0.3s var(--ease-out-expo);
}

/* --------------------------------------------
   Enhanced Social Icons
   -------------------------------------------- */

.social__link {
  transition: transform var(--duration-fast) var(--ease-out-expo),
              box-shadow var(--duration-fast) var(--ease-out-expo);
}

.social__link:hover {
  transform: scale(1.2) rotate(8deg) translateY(-5px);
}

/* Platform-specific glows - stronger */
.social__link--instagram:hover {
  box-shadow: 0 0 30px rgba(225, 48, 108, 0.5);
}

.social__link--youtube:hover {
  box-shadow: 0 0 30px rgba(255, 0, 0, 0.5);
}

.social__link--spotify:hover {
  box-shadow: 0 0 30px rgba(30, 215, 96, 0.5);
}

.social__link--tiktok:hover {
  box-shadow: 0 0 30px rgba(255, 0, 80, 0.5);
}

/* Staggered entrance for social links */
.js-enabled .social__link {
  opacity: 0;
  transform: translateY(30px);
}

.js-enabled .social__link.is-visible {
  opacity: 1;
  transform: translateY(0);
  transition: opacity var(--duration-slow) var(--ease-out-expo),
              transform var(--duration-slow) var(--ease-out-expo);
}

/* --------------------------------------------
   Music Player Animations
   -------------------------------------------- */

/* Player entrance */
.js-enabled .player {
  opacity: 0;
  transform: translateY(40px);
}

.js-enabled .player.is-visible {
  opacity: 1;
  transform: translateY(0);
  transition: opacity var(--duration-default) var(--ease-out-expo),
              transform var(--duration-default) var(--ease-out-expo);
}

/* Play button pulse when playing - stronger */
.player__play-btn.is-playing {
  animation: glowPulse 2s ease-in-out infinite;
}

/* Track list item hover - more dramatic */
.tracklist__item {
  transition: transform var(--duration-fast) var(--ease-out-expo),
              background-color var(--duration-fast) ease,
              box-shadow var(--duration-fast) ease;
}

.tracklist__item:hover {
  transform: translateX(8px);
  box-shadow: inset 4px 0 0 var(--color-gold),
              0 0 20px rgba(245, 197, 24, 0.1);
  background: rgba(245, 197, 24, 0.05);
}

/* Active track glow - stronger */
.tracklist__item.active {
  box-shadow: inset 4px 0 0 var(--color-gold),
              0 0 25px rgba(245, 197, 24, 0.15);
  background: rgba(245, 197, 24, 0.08);
}

/* Progress bar shimmer */
.player__progress-bar {
  position: relative;
  overflow: hidden;
}

.player__progress-bar::after {
  content: '';
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  background: linear-gradient(
    90deg,
    transparent 0%,
    rgba(255, 255, 255, 0.4) 50%,
    transparent 100%
  );
  background-size: 200% 100%;
  animation: shimmer 2s ease-in-out infinite;
}

/* Staggered track list entrance */
.js-enabled .tracklist__item {
  opacity: 0;
  transform: translateX(-20px);
}

.js-enabled .tracklist__item.is-visible {
  opacity: 1;
  transform: translateX(0);
  transition: opacity var(--duration-slow) var(--ease-out-expo),
              transform var(--duration-slow) var(--ease-out-expo);
}

/* --------------------------------------------
   Show Card Animations
   -------------------------------------------- */

.show-card {
  transition: transform var(--duration-fast) var(--ease-out-expo),
              box-shadow var(--duration-fast) ease,
              border-color var(--duration-fast) ease;
}

.show-card:hover {
  transform: translateY(-8px) scale(1.01);
  box-shadow: 0 20px 40px rgba(0, 0, 0, 0.4),
              0 0 0 1px var(--color-gold);
  border-color: var(--color-gold);
}

/* Staggered show card entrance */
.js-enabled .show-card {
  opacity: 0;
  transform: translateY(50px);
}

.js-enabled .show-card.is-visible {
  opacity: 1;
  transform: translateY(0);
  transition: opacity var(--duration-default) var(--ease-out-expo),
              transform var(--duration-default) var(--ease-out-expo);
}

/* --------------------------------------------
   Band Page Specific
   -------------------------------------------- */

/* Band image reveal - more dramatic */
.js-enabled .band-image {
  clip-path: inset(0 100% 0 0);
  transition: clip-path var(--duration-slow) var(--ease-out-expo);
}

.js-enabled .band-image.is-visible {
  clip-path: inset(0 0 0 0);
}

/* Band image hover effect */
.band-image img {
  transition: transform var(--duration-slow) var(--ease-out-expo);
}

.band-image:hover img {
  transform: scale(1.03);
}

/* Band text stagger - more dramatic */
.js-enabled .band-text p {
  opacity: 0;
  transform: translateY(40px);
  transition: opacity var(--duration-default) var(--ease-out-expo),
              transform var(--duration-default) var(--ease-out-expo);
}

.js-enabled .band-text.is-visible p {
  opacity: 1;
  transform: translateY(0);
}

.js-enabled .band-text p:nth-child(2) { transition-delay: 0.1s; }
.js-enabled .band-text p:nth-child(3) { transition-delay: 0.2s; }
.js-enabled .band-text p:nth-child(4) { transition-delay: 0.3s; }
.js-enabled .band-text p:nth-child(5) { transition-delay: 0.4s; }
.js-enabled .band-text p:nth-child(6) { transition-delay: 0.5s; }
.js-enabled .band-text p:nth-child(7) { transition-delay: 0.6s; }

/* Section title animation */
.js-enabled .section__title {
  opacity: 0;
  transform: translateY(50px);
}

.js-enabled .section__title.is-visible {
  opacity: 1;
  transform: translateY(0);
  transition: opacity var(--duration-default) var(--ease-out-expo),
              transform var(--duration-default) var(--ease-out-expo);
}

/* --------------------------------------------
   Streaming Links
   -------------------------------------------- */

.streaming-link {
  transition: transform var(--duration-fast) var(--ease-out-expo),
              box-shadow var(--duration-fast) ease,
              border-color var(--duration-fast) ease;
}

.streaming-link:hover {
  transform: translateY(-6px) scale(1.02);
  box-shadow: 0 15px 35px rgba(0, 0, 0, 0.4);
}

/* Platform-specific hover colors */
.streaming-link[href*="spotify"]:hover {
  border-color: #1ed760;
  box-shadow: 0 15px 35px rgba(30, 215, 96, 0.25);
}

.streaming-link[href*="apple"]:hover {
  border-color: #fc3c44;
  box-shadow: 0 15px 35px rgba(252, 60, 68, 0.25);
}

.streaming-link[href*="youtube"]:hover {
  border-color: #ff0000;
  box-shadow: 0 15px 35px rgba(255, 0, 0, 0.25);
}

.streaming-link[href*="soundcloud"]:hover {
  border-color: #ff5500;
  box-shadow: 0 15px 35px rgba(255, 85, 0, 0.25);
}

/* Staggered streaming link entrance */
.js-enabled .streaming-link {
  opacity: 0;
  transform: translateY(30px);
}

.js-enabled .streaming-link.is-visible {
  opacity: 1;
  transform: translateY(0);
  transition: opacity var(--duration-slow) var(--ease-out-expo),
              transform var(--duration-slow) var(--ease-out-expo);
}

/* --------------------------------------------
   Newsletter Section
   -------------------------------------------- */

.js-enabled .newsletter {
  opacity: 0;
  transform: translateY(50px);
}

.js-enabled .newsletter.is-visible {
  opacity: 1;
  transform: translateY(0);
  transition: opacity var(--duration-default) var(--ease-out-expo),
              transform var(--duration-default) var(--ease-out-expo);
}

.newsletter__input {
  transition: border-color var(--duration-fast) ease,
              box-shadow var(--duration-fast) ease,
              transform var(--duration-fast) ease;
}

.newsletter__input:focus {
  box-shadow: 0 0 0 4px rgba(245, 197, 24, 0.25);
  transform: translateY(-2px);
}

/* --------------------------------------------
   Custom Cursor (Optional - Desktop)
   -------------------------------------------- */
@media (hover: hover) and (pointer: fine) {
  .cursor-dot,
  .cursor-outline {
    pointer-events: none;
    position: fixed;
    top: 0;
    left: 0;
    border-radius: 50%;
    opacity: 0;
    transform: translate(-50%, -50%);
    transition: opacity 0.3s ease;
    z-index: 9999;
  }

  .cursor-dot {
    width: 8px;
    height: 8px;
    background: var(--color-gold);
  }

  .cursor-outline {
    width: 40px;
    height: 40px;
    border: 1px solid var(--color-gold);
    transition: width 0.3s ease, height 0.3s ease, opacity 0.3s ease;
  }

  .cursor-outline.cursor--hover {
    width: 60px;
    height: 60px;
    border-color: var(--color-gold);
    background: rgba(245, 197, 24, 0.1);
  }

  body:hover .cursor-dot,
  body:hover .cursor-outline {
    opacity: 1;
  }
}

/* --------------------------------------------
   Image Reveal Effects
   -------------------------------------------- */
.reveal-image {
  position: relative;
  overflow: hidden;
}

.reveal-image::after {
  content: '';
  position: absolute;
  inset: 0;
  background: var(--color-bg);
  transform: scaleX(1);
  transform-origin: right;
  transition: transform var(--duration-slow) var(--ease-out-expo);
}

.reveal-image.is-visible::after {
  transform: scaleX(0);
}

/* --------------------------------------------
   Text Gradient / Burn Shimmer Animation
   -------------------------------------------- */
.text-gradient {
  background: linear-gradient(
    90deg,
    var(--color-gold) 0%,
    var(--color-text) 50%,
    var(--color-gold) 100%
  );
  background-size: 200% auto;
  -webkit-background-clip: text;
  background-clip: text;
  -webkit-text-fill-color: transparent;
  animation: shimmer 3s linear infinite;
}

/* Burning text shimmer — sweeps gold-orange-gold across section titles */
@keyframes burnSweep {
  0% { background-position: -200% center; }
  100% { background-position: 200% center; }
}

.burn-shimmer {
  background: linear-gradient(
    90deg,
    var(--color-gold) 0%,
    #ff8c00 25%,
    var(--color-gold) 50%,
    #ff8c00 75%,
    var(--color-gold) 100%
  );
  background-size: 200% auto;
  -webkit-background-clip: text;
  background-clip: text;
  -webkit-text-fill-color: transparent;
  animation: burnSweep 4s ease-in-out infinite;
}

/* Burn shimmer for outline buttons (gold text) */
.btn:not(.btn--filled) {
  background: linear-gradient(
    90deg,
    var(--color-gold) 0%,
    #ff8c00 25%,
    var(--color-gold) 50%,
    #ff8c00 75%,
    var(--color-gold) 100%
  );
  background-size: 200% auto;
  -webkit-background-clip: text;
  background-clip: text;
  -webkit-text-fill-color: transparent;
  animation: burnSweep 4s ease-in-out infinite;
  border-color: var(--color-gold);
}

.btn:not(.btn--filled):hover {
  -webkit-text-fill-color: var(--color-bg);
  background: var(--color-gold);
}

/* Filled button burn — sweep highlight over gold bg */
@keyframes btnBurnSweep {
  0% { background-position: -200% center; }
  100% { background-position: 200% center; }
}

.btn--filled {
  background: linear-gradient(
    90deg,
    var(--color-gold) 0%,
    #ffb700 30%,
    var(--color-gold) 50%,
    #ff8c00 70%,
    var(--color-gold) 100%
  );
  background-size: 200% auto;
  animation: btnBurnSweep 4s ease-in-out infinite;
  border-color: var(--color-gold);
}

.btn--filled:hover {
  background: linear-gradient(
    90deg,
    var(--color-gold-dark) 0%,
    #e09600 30%,
    var(--color-gold-dark) 50%,
    #cc7a00 70%,
    var(--color-gold-dark) 100%
  );
  background-size: 200% auto;
  border-color: var(--color-gold-dark);
}

/* Gold separators in marquee */
.marquee__separator {
  background: linear-gradient(
    135deg,
    var(--color-gold) 0%,
    #ff8c00 50%,
    var(--color-gold) 100%
  );
  background-size: 200% auto;
  animation: burnSweep 3s ease-in-out infinite;
}

/* --------------------------------------------
   Member Grid - Ellipse Clip-Path Reveal
   -------------------------------------------- */
.member-grid-section {
  margin-top: 6rem;
}

.member-grid {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 1.5rem;
}

.member-card {
  position: relative;
  aspect-ratio: 4 / 5;
  background: var(--color-bg-card);
  border-radius: 8px;
  overflow: hidden;
  cursor: pointer;
}

.member-card__default {
  position: absolute;
  inset: 0;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  z-index: 2;
  transition: opacity var(--animation-default);
}

.member-card__name {
  font-family: var(--font-display);
  font-size: clamp(2rem, 5vw, 3.5rem);
  letter-spacing: 0.1em;
  color: var(--color-text);
  line-height: 1;
}

.member-card__role {
  font-size: 0.9rem;
  color: var(--color-gold);
  text-transform: uppercase;
  letter-spacing: 0.15em;
  margin-top: 0.5rem;
}

.member-card__reveal {
  position: absolute;
  inset: 0;
  z-index: 3;
  clip-path: ellipse(0% 0% at 50% 50%);
  transition: clip-path var(--animation-default);
}

.member-card__reveal img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  transition: transform 0.4s var(--ease-signature);
}

.member-card__border {
  position: absolute;
  inset: 0;
  border: 2px solid transparent;
  border-radius: 8px;
  z-index: 4;
  pointer-events: none;
  transition: border-color var(--animation-default);
}

/* Hover: reveal image with expanding ellipse */
.member-card:hover .member-card__reveal,
.member-card.is-active .member-card__reveal {
  clip-path: ellipse(80% 80% at 50% 50%);
}

.member-card:hover .member-card__default,
.member-card.is-active .member-card__default {
  opacity: 0;
}

.member-card:hover .member-card__reveal img,
.member-card.is-active .member-card__reveal img {
  transform: scale(1.05);
}

.member-card:hover .member-card__border,
.member-card.is-active .member-card__border {
  border-color: var(--color-gold);
}

/* Staggered entrance */
.js-enabled .member-card {
  opacity: 0;
  transform: translateY(60px);
}

.js-enabled .member-card.is-visible {
  opacity: 1;
  transform: translateY(0);
  transition: opacity var(--duration-default) var(--ease-signature),
              transform var(--duration-default) var(--ease-signature);
}

@media (max-width: 600px) {
  .member-grid {
    grid-template-columns: 1fr;
    gap: 1rem;
  }

  .member-card {
    aspect-ratio: 3 / 4;
  }
}

/* --------------------------------------------
   Horizontal Photo Reel (Infinite auto-scroll)
   -------------------------------------------- */
.photo-reel {
  position: relative;
  overflow: hidden;
  padding: 4rem 0;
  background: var(--color-bg);
  -webkit-mask-image: linear-gradient(90deg, transparent 0%, #000 5%, #000 95%, transparent 100%);
  mask-image: linear-gradient(90deg, transparent 0%, #000 5%, #000 95%, transparent 100%);
}

.photo-reel__header {
  text-align: center;
  margin-bottom: 2rem;
  padding: 0 2rem;
}

.photo-reel__track {
  display: flex;
  gap: 1.5rem;
  will-change: transform;
}

.photo-reel__slide {
  flex: 0 0 auto;
  width: 400px;
  height: 300px;
  border-radius: 8px;
  overflow: hidden;
  position: relative;
}

.photo-reel__slide--tall {
  height: 360px;
  align-self: flex-end;
}

.photo-reel__slide img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  transition: transform 0.6s var(--ease-signature);
  filter: grayscale(30%);
}

.photo-reel__slide:hover img {
  transform: scale(1.08);
  filter: grayscale(0%);
}

@media (max-width: 768px) {
  .photo-reel__slide {
    width: 280px;
    height: 210px;
  }

  .photo-reel__slide--tall {
    height: 260px;
  }
}

/* --------------------------------------------
   Full-Bleed Image Breakpoint
   -------------------------------------------- */
.full-bleed {
  position: relative;
  width: 100%;
  height: 60vh;
  overflow: hidden;
}

.full-bleed img {
  width: 100%;
  height: 120%;
  object-fit: cover;
  object-position: center 30%;
  will-change: transform;
}

.full-bleed__overlay {
  position: absolute;
  inset: 0;
  background: linear-gradient(
    to bottom,
    var(--color-bg) 0%,
    transparent 15%,
    transparent 85%,
    var(--color-bg) 100%
  );
  pointer-events: none;
}

/* --------------------------------------------
   Photo Scatter Gallery
   -------------------------------------------- */
.photo-scatter {
  margin-top: 6rem;
  padding-bottom: 2rem;
}

.photo-scatter__grid {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  grid-template-rows: auto;
  gap: 1rem;
}

.photo-scatter__item {
  border-radius: 6px;
  overflow: hidden;
  position: relative;
  will-change: transform;
}

.photo-scatter__item img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  transition: transform 0.6s var(--ease-signature),
              filter 0.6s var(--ease-signature);
}

.photo-scatter__item:hover img {
  transform: scale(1.06);
  filter: brightness(1.1);
}

/* Varied grid placements for organic scatter feel */
.photo-scatter__item--1 {
  grid-column: 1 / 3;
  grid-row: 1 / 2;
  aspect-ratio: 16 / 9;
}

.photo-scatter__item--2 {
  grid-column: 3 / 4;
  grid-row: 1 / 3;
  aspect-ratio: auto;
}

.photo-scatter__item--3 {
  grid-column: 4 / 5;
  grid-row: 1 / 2;
  aspect-ratio: 1;
}

.photo-scatter__item--4 {
  grid-column: 1 / 2;
  grid-row: 2 / 3;
  aspect-ratio: 1;
}

.photo-scatter__item--5 {
  grid-column: 2 / 3;
  grid-row: 2 / 3;
  aspect-ratio: 1;
}

.photo-scatter__item--6 {
  grid-column: 4 / 5;
  grid-row: 2 / 4;
  aspect-ratio: auto;
}

.photo-scatter__item--7 {
  grid-column: 1 / 3;
  grid-row: 3 / 4;
  aspect-ratio: 16 / 9;
}

.photo-scatter__item--8 {
  grid-column: 3 / 4;
  grid-row: 3 / 4;
  aspect-ratio: 1;
}

/* B&W filter on alternate items */
.photo-scatter__item--2 img,
.photo-scatter__item--4 img,
.photo-scatter__item--7 img {
  filter: grayscale(100%);
  transition: filter 0.6s var(--ease-signature),
              transform 0.6s var(--ease-signature);
}

.photo-scatter__item--2:hover img,
.photo-scatter__item--4:hover img,
.photo-scatter__item--7:hover img {
  filter: grayscale(0%);
}

/* Staggered entrance */
.js-enabled .photo-scatter__item {
  opacity: 0;
  transform: translateY(40px);
}

.js-enabled .photo-scatter__item.is-visible {
  opacity: 1;
  transform: translateY(0);
  transition: opacity var(--duration-default) var(--ease-signature),
              transform var(--duration-default) var(--ease-signature);
}

@media (max-width: 768px) {
  .photo-scatter__grid {
    grid-template-columns: repeat(2, 1fr);
  }

  .photo-scatter__item--1,
  .photo-scatter__item--2,
  .photo-scatter__item--3,
  .photo-scatter__item--4,
  .photo-scatter__item--5,
  .photo-scatter__item--6,
  .photo-scatter__item--7,
  .photo-scatter__item--8 {
    grid-column: auto;
    grid-row: auto;
    aspect-ratio: 4 / 3;
  }
}

/* --------------------------------------------
   Sticky EP Section
   -------------------------------------------- */
.sticky-ep {
  position: relative;
  height: 300vh;
  background: var(--color-bg);
}

.sticky-ep__sticky {
  position: sticky;
  top: 0;
  height: 100vh;
  display: flex;
  align-items: center;
  justify-content: center;
  overflow: hidden;
}

.sticky-ep__bg {
  position: absolute;
  inset: 0;
  z-index: 0;
}

.sticky-ep__bg img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  filter: blur(2px) brightness(0.3);
}

.sticky-ep__bg-overlay {
  position: absolute;
  inset: 0;
  background: radial-gradient(
    ellipse at center,
    rgba(10, 10, 10, 0.4) 0%,
    rgba(10, 10, 10, 0.85) 100%
  );
}

.sticky-ep__content {
  position: relative;
  z-index: 1;
  text-align: center;
  padding: 2rem;
}

.sticky-ep__title {
  font-family: var(--font-display);
  font-size: clamp(3rem, 10vw, 8rem);
  color: var(--color-gold);
  letter-spacing: 0.1em;
  margin-bottom: 3rem;
  opacity: 0;
  transform: scale(0.9);
  transition: opacity 0.8s var(--ease-signature),
              transform 0.8s var(--ease-signature);
}

.sticky-ep__title.is-visible {
  opacity: 1;
  transform: scale(1);
}

.sticky-ep__track {
  font-family: var(--font-display);
  font-size: clamp(1.5rem, 4vw, 3rem);
  color: var(--color-text);
  letter-spacing: 0.08em;
  margin-bottom: 1rem;
  opacity: 0;
  transform: translateX(-60px);
  transition: opacity 0.6s var(--ease-signature),
              transform 0.6s var(--ease-signature);
}

.sticky-ep__track.is-visible {
  opacity: 1;
  transform: translateX(0);
}

.sticky-ep__track-num {
  color: var(--color-gold);
  margin-right: 1rem;
  font-size: 0.7em;
}

.sticky-ep__cta {
  margin-top: 3rem;
  opacity: 0;
  transform: translateY(30px);
  transition: opacity 0.6s var(--ease-signature),
              transform 0.6s var(--ease-signature);
}

.sticky-ep__cta.is-visible {
  opacity: 1;
  transform: translateY(0);
}

/* --------------------------------------------
   Show Card Photo Peek
   -------------------------------------------- */
.show-card--peek {
  position: relative;
  overflow: hidden;
}

.show-card__photo {
  position: absolute;
  inset: 0;
  z-index: 0;
  opacity: 0;
  transition: opacity 0.5s var(--ease-signature);
}

.show-card__photo img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  filter: brightness(0.3) saturate(0.6);
  transition: transform 0.6s var(--ease-signature);
}

.show-card--peek:hover .show-card__photo {
  opacity: 1;
}

.show-card--peek:hover .show-card__photo img {
  transform: scale(1.05);
}

.show-card--peek .show-card__date,
.show-card--peek .show-card__info {
  position: relative;
  z-index: 1;
}

/* --------------------------------------------
   Burn Reveal Effect (metaball blob + mix-blend-mode)
   -------------------------------------------- */

.burn-reveal__text {
  position: absolute;
  inset: 0;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  z-index: 0;
  background: #0a0a0a;
  font-family: var(--font-display);
  font-size: clamp(4rem, 10vw, 10rem);
  font-weight: 900;
  line-height: 0.95;
  letter-spacing: 0.04em;
  text-transform: uppercase;
  color: var(--color-gold);
  text-shadow:
    0 0 15px rgba(245, 197, 24, 0.4),
    0 0 40px rgba(245, 160, 20, 0.15);
  text-align: center;
  user-select: none;
  pointer-events: none;
}

.burn-reveal__video {
  position: absolute;
  inset: 0;
  z-index: 1;
  overflow: hidden;
}

.burn-reveal__video video {
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: center center;
  transform-origin: center center;
  transform: scale(1.3);
}

@media (max-width: 900px) {
  .burn-reveal__text {
    font-size: clamp(4rem, 18vw, 8rem);
  }
}

/* --------------------------------------------
   Reduced Motion Support
   -------------------------------------------- */

@media (prefers-reduced-motion: reduce) {
  *,
  *::before,
  *::after {
    animation-duration: 0.01ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.01ms !important;
    scroll-behavior: auto !important;
  }

  .animate-on-scroll,
  .js-enabled .animate-on-scroll {
    opacity: 1 !important;
    transform: none !important;
    clip-path: none !important;
    filter: none !important;
  }

  .hero__bg video,
  .hero__bg img {
    animation: none !important;
  }

  .marquee__inner {
    animation: none !important;
  }

  .js-enabled .hero__content,
  .js-enabled .hero__subtitle,
  .js-enabled .hero__cta {
    opacity: 1 !important;
    transform: none !important;
    animation: none !important;
  }

  .burn-reveal__text {
    display: none !important;
  }
}