/* Worthy Week '26 — custom styles beyond Tailwind utilities */

:root {
  --navy: #08074b;
  --royal: #1a2399;
  --burgundy: #ff4f93;
  --fuchsia: #d80b55;
  --gold: #f5c451;
  --cream: #ffffff;
}

html {
  scroll-behavior: smooth;
}

body {
  overflow-x: hidden;
  position: relative;
}

/* ---------- Film-grain texture overlay (keeps flat sections from feeling like a template) ---------- */
body::before {
  content: '';
  position: fixed;
  inset: 0;
  z-index: 9999;
  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='160' height='160'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.85' numOctaves='3' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E");
}

/* ---------- Editorial drop cap ---------- */
.drop-cap::first-letter {
  font-family: 'Libre Baskerville', serif;
  font-weight: 700;
  font-size: 3.6em;
  line-height: 0.72;
  float: left;
  padding-right: 0.12em;
  padding-top: 0.06em;
  color: var(--fuchsia);
}

/* ---------- Scroll reveal ---------- */
.reveal {
  opacity: 0;
  transform: translateY(28px);
  transition: opacity 0.8s ease, transform 0.8s ease;
}
.reveal.reveal-visible {
  opacity: 1;
  transform: translateY(0);
}
@media (prefers-reduced-motion: reduce) {
  .reveal {
    opacity: 1;
    transform: none;
    transition: none;
  }
}

/* ---------- Glow text (hero "Week") ---------- */
.glow-text {
  text-shadow:
    0 0 14px rgba(255, 255, 255, 0.95),
    0 0 36px rgba(255, 255, 255, 0.8),
    0 0 72px rgba(255, 255, 255, 0.55);
}

.glow-text-soft {
  text-shadow:
    0 0 8px rgba(255, 255, 255, 0.7),
    0 0 22px rgba(255, 255, 255, 0.5);
}

/* ---------- Hero beams + particles ---------- */
.beam {
  position: absolute;
  top: -10%;
  width: 2px;
  height: 120%;
  background: linear-gradient(to bottom, transparent, rgba(255, 255, 255, 0.55), transparent);
  filter: blur(1px);
  animation: beam-shimmer 6s ease-in-out infinite;
  opacity: 0.5;
}

@keyframes beam-shimmer {
  0%, 100% { opacity: 0.15; transform: translateY(0) scaleY(1); }
  50% { opacity: 0.6; transform: translateY(-2%) scaleY(1.04); }
}

.particles {
  background-image:
    radial-gradient(rgba(255, 255, 255, 0.5) 1px, transparent 1px),
    radial-gradient(rgba(255, 255, 255, 0.35) 1px, transparent 1px);
  background-size: 140px 140px, 90px 90px;
  background-position: 0 0, 45px 60px;
}

/* ---------- Rotating badge ---------- */
@keyframes spin-slow {
  from { transform: rotate(0deg); }
  to { transform: rotate(360deg); }
}
.animate-spin-slow {
  animation: spin-slow 20s linear infinite;
}

/* ---------- Ticker marquee ---------- */
.ticker-wrap {
  overflow: hidden;
  white-space: nowrap;
}
.ticker-track {
  display: inline-flex;
  align-items: center;
  white-space: nowrap;
  animation: ticker 28s linear infinite;
  will-change: transform;
}
.ticker-wrap:hover .ticker-track {
  animation-play-state: paused;
}
@keyframes ticker {
  from { transform: translateX(0); }
  to { transform: translateX(-50%); }
}

/* ---------- Weekend giant letters ---------- */
.giant-letter {
  font-family: 'Libre Baskerville', serif;
  font-weight: 700;
  line-height: 0.8;
  background: linear-gradient(180deg, #fff6d8 0%, var(--gold) 60%, #d99a2b 100%);
  -webkit-background-clip: text;
  background-clip: text;
  color: transparent;
}

/* ---------- FAQ accordion ---------- */
.faq-answer {
  max-height: 0;
  overflow: hidden;
  transition: max-height 0.35s ease;
}
.faq-item.open .faq-icon {
  transform: rotate(45deg);
}
.faq-icon {
  transition: transform 0.3s ease;
}

/* ---------- Mobile menu ---------- */
#mobile-menu {
  max-height: 0;
  overflow: hidden;
  transition: max-height 0.35s ease;
}
#mobile-menu.open {
  max-height: 24rem;
}

/* ---------- Nav scrolled state ---------- */
#site-nav {
  transition: background-color 0.3s ease, box-shadow 0.3s ease, padding 0.3s ease;
}