/* ==========================================================================
   effects.css — cinematic / horror atmosphere for Bones Disc Golf.
   Film grain, vignette, embers, fog, scroll reveals, glowing interactions,
   skull motifs. All motion respects prefers-reduced-motion.
   ========================================================================== */

/* ---- Selection + custom scrollbar ---- */
::selection { background: var(--color-brand); color: #fff; }
html { scrollbar-color: var(--color-brand) #0a0a0a; scrollbar-width: thin; }
::-webkit-scrollbar { width: 12px; height: 12px; }
::-webkit-scrollbar-track { background: #0a0a0a; }
::-webkit-scrollbar-thumb {
  background: linear-gradient(#c41721, #7a0f16);
  border-radius: 10px; border: 3px solid #0a0a0a;
}
::-webkit-scrollbar-thumb:hover { background: #c41721; }

/* ---- Fixed cinematic overlays ---- */
.fx-vignette, .fx-grain { position: fixed; inset: 0; pointer-events: none; }
.fx-vignette {
  z-index: 70;
  background:
    radial-gradient(130% 100% at 50% 38%, transparent 52%, rgba(0,0,0,0.35) 82%, rgba(0,0,0,0.7) 100%);
}
.fx-grain {
  z-index: 71; opacity: 0.05; mix-blend-mode: overlay;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='140' height='140'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.9' numOctaves='2' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E");
  background-size: 140px 140px;
}

/* ---- Scroll progress bar ---- */
.scroll-progress {
  position: fixed; top: 0; left: 0; height: 3px; width: 100%;
  transform: scaleX(0); transform-origin: 0 50%; z-index: 300;
  background: linear-gradient(90deg, #7a0f16, #c41721 55%, #ff3b45);
  box-shadow: 0 0 12px rgba(196,23,33,0.75);
}

/* ---- Scroll reveal ---- */
.reveal { opacity: 0; transform: translateY(28px); transition: opacity 0.7s ease, transform 0.7s cubic-bezier(0.2,0.7,0.2,1); }
.reveal.is-visible { opacity: 1; transform: none; }

/* ---- Glowing red button ---- */
.btn--glow { box-shadow: 0 0 20px var(--color-brand-glow); }
.btn--glow:hover { box-shadow: 0 0 26px rgba(196,23,33,0.6), 0 0 64px rgba(196,23,33,0.32); }

/* ---- HERO atmospherics ---- */
.hero__overlay { z-index: 0; }
.hero__fog {
  position: absolute; inset: 0; z-index: 0; pointer-events: none; opacity: 0.55;
  background:
    radial-gradient(55% 42% at 28% 30%, rgba(255,255,255,0.06), transparent 60%),
    radial-gradient(50% 40% at 74% 62%, rgba(200,210,220,0.05), transparent 60%);
  animation: fogDrift 20s ease-in-out infinite alternate;
}
.hero__ember {
  position: absolute; left: 0; right: 0; bottom: -6%; height: 32%; z-index: 0; pointer-events: none;
  background: radial-gradient(40% 72% at 50% 100%, rgba(196,23,33,0.18), transparent 72%);
  filter: blur(10px);
  animation: emberPulse 6s ease-in-out infinite;
}
.hero__kicker {
  font-family: var(--font-display); font-weight: var(--fw-medium);
  text-transform: uppercase; letter-spacing: 0.28em; font-size: clamp(0.95rem, 1.7vw, 1.2rem);
  color: rgba(255,255,255,0.8); margin-bottom: 1.1rem;
}
.hero__title {
  text-shadow: 0 0 34px rgba(196,23,33,0.35), 0 6px 30px rgba(0,0,0,0.75);
}
.hero__badge { animation: skullFloat 6s ease-in-out infinite; }

.scroll-cue {
  position: absolute; left: 50%; bottom: 24px; transform: translateX(-50%); z-index: 2;
  display: grid; justify-items: center; gap: 0.55rem; color: rgba(255,255,255,0.7);
  transition: opacity 0.35s ease;
}
body.page-scrolled .scroll-cue { opacity: 0; pointer-events: none; }
.scroll-cue span { font: var(--fw-semibold) 0.68rem/1 var(--font-display); letter-spacing: 0.28em; text-transform: uppercase; }
.scroll-cue::after {
  content: ""; width: 18px; height: 18px;
  border-right: 2px solid rgba(255,255,255,0.6); border-bottom: 2px solid rgba(255,255,255,0.6);
  transform: rotate(45deg); animation: cueBounce 1.8s ease-in-out infinite;
}
.scroll-cue:hover { color: #fff; }

@keyframes fogDrift { from { transform: translate3d(-2%, 0, 0); } to { transform: translate3d(2%, 1.5%, 0); } }
@keyframes emberPulse { 0%,100% { opacity: 0.5; } 50% { opacity: 0.72; } }
@keyframes skullFloat { 0%,100% { transform: translateY(0); } 50% { transform: translateY(-10px); } }
@keyframes cueBounce { 0%,100% { transform: rotate(45deg) translate(-2px,-2px); opacity: 0.5; } 50% { transform: rotate(45deg) translate(3px,3px); opacity: 1; } }

/* ---- Skull watermark behind a section ---- */
.skull-watermark { position: relative; overflow: hidden; }
.skull-watermark::before {
  content: ""; position: absolute; top: 50%; left: 50%; width: min(70vw, 600px); aspect-ratio: 1;
  transform: translate(-50%, -50%);
  background: url("../images/bones-skull.png") center / contain no-repeat;
  opacity: 0.05; filter: grayscale(1) brightness(2.2); pointer-events: none;
}
.skull-watermark > * { position: relative; z-index: 1; }

/* ---- Bone divider ---- */
.bone-divider {
  display: flex; align-items: center; justify-content: center; gap: 1.1rem;
  padding: clamp(1.5rem, 4vw, 2.75rem) var(--gutter); max-width: 720px; margin-inline: auto;
}
.bone-divider::before, .bone-divider::after {
  content: ""; height: 1px; flex: 1; max-width: 240px;
}
.bone-divider::before { background: linear-gradient(90deg, transparent, rgba(196,23,33,0.7)); }
.bone-divider::after  { background: linear-gradient(90deg, rgba(196,23,33,0.7), transparent); }
.bone-divider img { width: 34px; height: auto; opacity: 0.8; filter: drop-shadow(0 0 10px rgba(196,23,33,0.5)); }

/* ---- CTA band skull ---- */
.cta-band__skull { width: 62px; margin: 0 auto 1.2rem; opacity: 0.9; filter: drop-shadow(0 0 16px rgba(196,23,33,0.55)); }

/* ---- Footer skull ---- */
.site-footer__skull { width: 44px; opacity: 0.7; margin-bottom: 0.25rem; }

/* ---- Reduced motion: kill all the moody motion, keep it readable ---- */
@media (prefers-reduced-motion: reduce) {
  .reveal { opacity: 1 !important; transform: none !important; transition: none; }
  .hero__fog, .hero__ember, .hero__badge, .scroll-cue::after { animation: none; }
  .fx-grain { display: none; }
  html { scroll-behavior: auto; }
}