/* app/assets/stylesheets/application.css
 *
 * Full Halloween background + smoke + glow
 * Rewritten: clearer z-index layering and more visible smoke.
 *
 * NOTE: Ensure your page content (main/yield) uses a higher stacking context,
 * e.g. <main class="relative z-10"> or video wrapper z-20 so it sits above the smoke.
 */

/* =========================
   Root variables (tweak these)
   ========================= */
:root {
  /* background / accent */
  --bg-deep: #060006;
  --bg-purple: #2b0033;
  --accent: #b95cff;

  /* strobe / spotlight */
  --strobe-duration: 1.6s;
  --strobe-intensity: 0.18;
  --spotlight-duration: 8s;

  /* particles */
  --particle-opacity: 0.06;

  /* smoke (increased visibility by default) */
  --smoke-color: 160, 30, 120; /* rgb triple */
  --smoke-opacity: 0.22;       /* increase to make smoke more visible */
  --smoke-blur: 48px;
  --smoke-speed-1: 36s;
  --smoke-speed-2: 48s;
  --smoke-speed-3: 62s;

  /* tuning */
  --ui-content-z: 10; /* recommended z-index for your main content */
}

/* =========================
   Layering / container
   ========================= */

/* background container - fixed, full-viewport */
.halloween-bg {
  position: fixed;
  inset: 0;
  z-index: 0; /* bottom-most background */
  pointer-events: none;
  overflow: hidden;
  background:
    radial-gradient(1200px 600px at 10% 20%, rgba(66,12,85,0.35), transparent 15%),
    radial-gradient(900px 450px at 90% 80%, rgba(16,3,20,0.5), transparent 10%),
    linear-gradient(180deg, var(--bg-purple) 0%, var(--bg-deep) 60%);
  will-change: transform, opacity;
}

/* strobe overlay (brief flashes) */
.halloween-overlay {
  position: absolute;
  inset: 0;
  background: linear-gradient(90deg, rgba(0,0,0,0.25), rgba(0,0,0,0.6));
  mix-blend-mode: normal;
  animation: strobe var(--strobe-duration) infinite;
  opacity: 0;
  pointer-events: none;
  z-index: 1; /* above background but below stripes & effects */
}

/* subtle banding / stripes */
.halloween-bg::before {
  content: "";
  position: absolute;
  inset: 0;
  background-image: linear-gradient(120deg, rgba(0,0,0,0.55) 0 8%, rgba(0,0,0,0) 8% 50%);
  background-size: 400% 400%;
  opacity: 0.04;
  z-index: 2;
  animation: stripes 25s linear infinite;
}

/* spotlights (colored beams) */
.halloween-spotlights {
  position: absolute;
  inset: 0;
  z-index: 3;
  pointer-events: none;
  mix-blend-mode: screen;
}
.spotlight {
  position: absolute;
  width: 60vmax;
  height: 60vmax;
  border-radius: 50%;
  filter: blur(40px);
  opacity: 0.65;
  transform: translate(-50%, -50%);
  animation: spotlight-move var(--spotlight-duration) ease-in-out infinite;
}
.spotlight.s1 { left: 10%; top: 20%; background: radial-gradient(circle at 30% 30%, rgba(185,92,255,0.65), transparent 30%); animation-delay: 0s; mix-blend-mode: screen; }
.spotlight.s2 { left: 85%; top: 80%; background: radial-gradient(circle at 70% 70%, rgba(120,0,200,0.45), transparent 25%); animation-delay: 2s; mix-blend-mode: screen; }
.spotlight.s3 { left: 50%; top: 50%; background: radial-gradient(circle at 50% 50%, rgba(120,10,140,0.45), transparent 30%); animation-delay: 4s; mix-blend-mode: screen; }

/* particles: small specks drifting */
.halloween-particles {
  position: absolute;
  inset: 0;
  z-index: 4;
  pointer-events: none;
  background-image: radial-gradient(circle, rgba(255,255,255,0.85) 0.6px, transparent 0.6px);
  background-size: 3px 3px;
  opacity: var(--particle-opacity);
  transform: translateZ(0);
  animation: particles-float 40s linear infinite;
}

/* =========================
   SMOKE (more visible)
   - z-index placed above spotlights/particles but below your content (use content z >= 10)
   ========================= */
.halloween-smoke {
  position: absolute;
  inset: 0;
  z-index: 5; /* sits under .main content (recommend main z >= 10) */
  pointer-events: none;
  overflow: hidden;
  mix-blend-mode: screen; /* helps pick up background colors */
  /* slight global tint for visibility */
  opacity: 1;
}

/* base smoke layer */
.smoke {
  position: absolute;
  left: 50%;
  top: 74%;
  width: 220vmax;
  height: 70vmax;
  transform: translateX(-50%) translateY(0) rotate(0deg);
  filter: blur(var(--smoke-blur));
  opacity: var(--smoke-opacity);
  background:
    radial-gradient(50% 40% at 20% 50%, rgba(var(--smoke-color),0.26) 0%, rgba(0,0,0,0) 45%),
    radial-gradient(50% 40% at 80% 50%, rgba(255,120,60,0.08) 0%, rgba(0,0,0,0) 50%),
    linear-gradient(180deg, rgba(0,0,0,0.02), rgba(0,0,0,0.06));
  transform-origin: center;
  will-change: transform, opacity, filter;
  /* additive glow to enhance visibility */
  box-shadow: 0 18px 120px rgba(180, 80, 220, 0.08) inset;
}

/* stacked smoke layers for depth */
.s1 { top: 78%; left: 50%; animation: smoke-drift var(--smoke-speed-1) linear infinite; opacity: calc(var(--smoke-opacity) * 1); filter: blur(calc(var(--smoke-blur) * 1.0)); }
.s2 { top: 84%; left: 42%; animation: smoke-drift-2 var(--smoke-speed-2) linear infinite; opacity: calc(var(--smoke-opacity) * 0.95); filter: blur(calc(var(--smoke-blur) * 1.15)); transform-origin: 40% 60%; }
.s3 { top: 70%; left: 60%; animation: smoke-drift-3 var(--smoke-speed-3) linear infinite; opacity: calc(var(--smoke-opacity) * 0.85); filter: blur(calc(var(--smoke-blur) * 0.9)); transform-origin: 60% 40%; }

/* smoke drift keyframes (long, slow, visible) */
@keyframes smoke-drift {
  0%   { transform: translateX(-50%) translateY(0) scaleX(1) rotate(-4deg); opacity: 0; }
  10%  { opacity: calc(var(--smoke-opacity) * 0.6); }
  30%  { transform: translateX(-70%) translateY(-8%) scaleX(1.05) rotate(-2deg); opacity: calc(var(--smoke-opacity) * 1); }
  60%  { transform: translateX(-50%) translateY(-26%) scaleX(1.08) rotate(2deg); opacity: calc(var(--smoke-opacity) * 0.9); }
  85%  { transform: translateX(-30%) translateY(-38%) scaleX(0.98) rotate(4deg); opacity: calc(var(--smoke-opacity) * 0.6); }
  100% { transform: translateX(-10%) translateY(-56%) scaleX(1) rotate(6deg); opacity: 0; }
}
@keyframes smoke-drift-2 {
  0%   { transform: translateX(-50%) translateY(0) rotate(8deg) scaleX(1); opacity: 0; }
  20%  { opacity: calc(var(--smoke-opacity) * 0.7); }
  45%  { transform: translateX(-90%) translateY(-28%) rotate(2deg) scaleX(1.12); opacity: calc(var(--smoke-opacity) * 1); }
  70%  { transform: translateX(-120%) translateY(-52%) rotate(-2deg) scaleX(1.08); opacity: calc(var(--smoke-opacity) * 0.85); }
  100% { transform: translateX(-160%) translateY(-96%) rotate(-8deg) scaleX(1); opacity: 0; }
}
@keyframes smoke-drift-3 {
  0%   { transform: translateX(-50%) translateY(0) rotate(-6deg) scaleX(1); opacity: 0; }
  30%  { opacity: calc(var(--smoke-opacity) * 0.6); }
  55%  { transform: translateX(-40%) translateY(-22%) rotate(-2deg) scaleX(1.1); opacity: calc(var(--smoke-opacity) * 1); }
  85%  { transform: translateX(-10%) translateY(-62%) rotate(4deg) scaleX(0.95); opacity: calc(var(--smoke-opacity) * 0.45); }
  100% { transform: translateX(20%) translateY(-112%) rotate(8deg) scaleX(1); opacity: 0; }
}

/* =========================
   Animations + other keyframes
   ========================= */

/* strobe */
@keyframes strobe {
  0%   { opacity: 0; }
  4%   { opacity: var(--strobe-intensity); }
  6%   { opacity: 0; }
  18%  { opacity: 0; }
  20%  { opacity: calc(var(--strobe-intensity) * 0.8); }
  22%  { opacity: 0; }
  40%  { opacity: 0; }
  42%  { opacity: calc(var(--strobe-intensity) * 0.6); }
  44%  { opacity: 0; }
  72%  { opacity: 0; }
  74%  { opacity: calc(var(--strobe-intensity) * 0.9); }
  75%  { opacity: 0; }
  100% { opacity: 0; }
}

/* stripes */
@keyframes stripes {
  0%   { background-position: 0% 0%; }
  100% { background-position: 100% 100%; }
}

/* spotlights movement */
@keyframes spotlight-move {
  0%   { transform: translate(-50%, -50%) translateY(0) scale(1); opacity: 0.6; }
  25%  { transform: translate(-50%, -50%) translateY(-6%) scale(1.05); opacity: 0.75; }
  50%  { transform: translate(-50%, -50%) translateY(0%) scale(1); opacity: 0.6; }
  75%  { transform: translate(-50%, -50%) translateY(6%) scale(0.98); opacity: 0.7; }
  100% { transform: translate(-50%, -50%) translateY(0) scale(1); opacity: 0.6; }
}

/* particles float */
@keyframes particles-float {
  0%   { background-position: 0% 0%; transform: translateY(0); }
  100% { background-position: 100% -1000px; transform: translateY(-40px); }
}

/* =========================
   Video glow + flicker (keeps above smoke by using z on wrapper)
   ========================= */
.halloween-glow iframe {
  border-radius: 1rem;
  /* subtle outer glow + animation */
  box-shadow: 0 0 30px 6px rgba(180, 0, 255, 0.65);
  animation: halloween-glow 3s ease-in-out infinite alternate;
  transition: box-shadow 200ms ease;
}

/* flicker variant (faster show) */
@keyframes halloween-flicker {
  0%, 100% { box-shadow: 0 0 25px 6px rgba(255, 90, 0, 0.7); }
  10% { box-shadow: 0 0 44px 12px rgba(185, 92, 255, 0.95); }
  20% { box-shadow: 0 0 10px 3px rgba(0, 0, 0, 0.2); }
  35% { box-shadow: 0 0 35px 8px rgba(255, 90, 0, 0.85); }
  55% { box-shadow: 0 0 60px 14px rgba(185, 92, 255, 1); }
  75% { box-shadow: 0 0 10px 3px rgba(255, 255, 255, 0.2); }
}
.halloween-glow iframe { animation: halloween-flicker 2.4s infinite; }

/* title glow */
.halloween-title {
  text-shadow: 0 0 15px #b85cff, 0 0 28px #ff6000;
  animation: halloween-title-glow 3s ease-in-out infinite alternate;
}
@keyframes halloween-title-glow {
  0%   { text-shadow: 0 0 10px #b85cff, 0 0 20px #ff6000; }
  50%  { text-shadow: 0 0 30px #b85cff, 0 0 50px #ff6000; }
  100% { text-shadow: 0 0 15px #b85cff, 0 0 28px #ff6000; }
}

/* =========================
   Accessibility & responsiveness
   ========================= */
@media (prefers-reduced-motion: reduce) {
  .halloween-overlay,
  .halloween-bg::before,
  .spotlight,
  .halloween-particles,
  .smoke {
    animation: none !important;
    transition: none !important;
  }
  .halloween-overlay { opacity: 0 !important; }
  /* reduce smoke to be less distracting */
  .smoke { opacity: calc(var(--smoke-opacity) * 0.5) !important; transform: translateX(-50%) translateY(-15%) !important; }
  .smoke-svg, .halloween-smoke-svg { display: none; }
}

/* reduce impact on small screens */
@media (max-width: 640px) {
  :root { --spotlight-duration: 12s; --strobe-duration: 2.6s; --smoke-opacity: 0.12; }
  .spotlight { width: 90vmax; height: 90vmax; filter: blur(60px); }
  .halloween-particles { opacity: 0.03; }
  .smoke { filter: blur(calc(var(--smoke-blur) * 1.2)); opacity: calc(var(--smoke-opacity) * 0.6); }
}

}

/* NAVBAR: Halloween extras */
.halloween-navbar {
  background: linear-gradient(180deg, rgba(12,4,12,0.6), rgba(6,2,6,0.45));
  backdrop-filter: blur(6px);
  -webkit-backdrop-filter: blur(6px);
  border-bottom: 1px solid rgba(255,255,255,0.03);
}

/* desktop link style */
.nav-link {
  @apply text-sm text-orange-50/90 hover:text-white transition inline-flex items-center gap-2;
  text-decoration: none;
  padding: 6px 8px;
  border-radius: 6px;
}
.nav-link:hover {
  box-shadow: 0 6px 24px rgba(185,92,255,0.08);
  background: linear-gradient(90deg, rgba(185,92,255,0.03), rgba(255,120,60,0.03));
}

/* mobile */
.nav-link-mobile {
  color: #ffedd5; /* softer orange tint */
  padding: 10px 8px;
  border-radius: 6px;
  display: block;
  text-decoration: none;
}
.nav-link-mobile:hover { background: rgba(185,92,255,0.04); }

/* pumpkin slight animation on hover of brand */
.group:hover .pumpkin { transform: rotate(-6deg) scale(1.05); transition: transform 220ms cubic-bezier(.2,.9,.2,1); }

/* buttons */
.halloween-btn {
  box-shadow: 0 8px 30px rgba(185,92,255,0.08);
}

/* focus visible */
.keyboard-focus:focus {
  outline: 2px solid rgba(185,92,255,0.28);
  outline-offset: 2px;
}

/* ensure nav items stay above smoky background */
.halloween-navbar,
.halloween-navbar * { z-index: 40; }

/* subtle animated underline for links (optional) */
.nav-link::after {
  content: "";
  display: block;
  height: 2px;
  width: 0%;
  background: linear-gradient(90deg, #ff8a2b, #b85cff);
  transition: width 220ms ease;
}
.nav-link:hover::after { width: 100%; }

/* small responsive tweaks */
@media (max-width: 767px) {
  .pumpkin { width: 36px; height: 36px; }
  .brand-text .text-lg { font-size: 1rem; }
}

.nav-link {
  color: rgba(255,255,255,0.85);
  transition: color 150ms ease;
}
.nav-link:hover, .nav-link:focus {
  color: rgba(255,255,255,1);
}