/* src/styles/effects.css
   ============================================
   d3 CINEMATIC EFFECTS — layered on top of the
   Art Deco theme; never modifies base styles.
   Custom properties written by effect hooks:
     --fx-draw  0..1  divider stroke draw progress
     --fx-fade  0..1  content fade/translate progress
============================================ */

/* === Scroll reveal === */
.fx-reveal {
  opacity: var(--fx-fade, 1);
  transform: translateY(calc((1 - var(--fx-fade, 1)) * 20px));
}

.fx-reveal.fx-revealed {
  opacity: 1;
  transform: none;
}

.fx-divider {
  display: block;
  width: 220px;
  max-width: 60%;
  height: 28px;
  margin: 14px auto 0;
  overflow: visible;
}

.fx-divider path {
  stroke: var(--color-gold);
  fill: none;
  stroke-width: 1.5;
  stroke-dasharray: 1;
  stroke-dashoffset: calc(1 - var(--fx-draw, 1));
}

.fx-divider circle {
  fill: var(--color-gold);
  opacity: var(--fx-draw, 1);
}

/* === Hero neon power-on === */
.hero--pre-show .bulb {
  opacity: 0.08;
  animation-play-state: paused;
  transition: opacity 0.15s ease;
}

.hero--pre-show .bulb.bulb--lit {
  opacity: 1;
}

.hero--pre-show .marquee-subtitle {
  opacity: 0.06;
}

.marquee-subtitle {
  transition: opacity 0.6s ease;
}

.hero--pre-show .hero-tagline,
.hero--pre-show .hero-cta {
  animation: none;
  opacity: 0;
}

/* Re-run the entrance fade when the marquee goes live (the base keyframe
   timeline has already elapsed by the end of the power-on sequence). */
.hero--live .hero-tagline {
  animation: fade-up 0.8s cubic-bezier(0.16, 1, 0.3, 1) 0.2s both;
}

.hero--live .hero-cta {
  animation: fade-up 0.8s cubic-bezier(0.16, 1, 0.3, 1) 0.45s both;
}

/* Cursor-aware bulbs: JS sets transform/box-shadow inline; this smooths them */
.hero--live .bulb {
  transition: transform 0.2s ease, box-shadow 0.2s ease;
}

/* === Card spotlight === */
.fx-spotlight-grid {
  position: relative;
}

.fx-spotlight {
  position: absolute;
  top: 0;
  left: 0;
  width: 240px;
  height: 240px;
  margin: -120px 0 0 -120px;
  border-radius: 50%;
  background: radial-gradient(circle, rgba(201, 168, 76, 0.13), transparent 70%);
  pointer-events: none;
  opacity: 0;
  transition: opacity 0.3s ease;
  z-index: 1;
}

.fx-spotlight-grid--active .fx-spotlight {
  opacity: 1;
}

.fx-card--focus,
.fx-card--dim {
  transition: transform 0.25s ease, opacity 0.25s ease, box-shadow 0.25s ease;
}

.fx-card--focus {
  box-shadow: 0 10px 32px rgba(201, 168, 76, 0.18);
  z-index: 2;
}

.fx-card--dim {
  opacity: 0.7;
}

/* === Ambient projector dust === */
.fx-dust {
  position: fixed;
  inset: 0;
  width: 100vw;
  height: 100vh;
  pointer-events: none;
  z-index: 1;
}

/* === Reduced motion: final states, no movement === */
@media (prefers-reduced-motion: reduce) {
  .fx-reveal {
    opacity: 1 !important;
    transform: none !important;
  }

  .fx-divider path {
    stroke-dashoffset: 0 !important;
  }

  .fx-divider circle {
    opacity: 1 !important;
  }

  .hero--live .hero-tagline,
  .hero--live .hero-cta {
    animation: none !important;
    opacity: 1 !important;
    transform: none !important;
  }
}