/* ==========================================================
   HALLOWEEN FX LAYER (performance-tuned)
   - no blend modes, no big blurs, no canvas, no backdrop-filter
   - only transform/opacity animations
   ========================================================== */

:root {
  --fx-ease: cubic-bezier(0.2, 0.8, 0.2, 1);
  --hw-orange: #ff7a1a;
  --hw-purple: #8a3ffc;
  --hw-green: #7dff4d;
  --hw-font: 'Creepster', 'Inter', cursive;
}

/* ---------- scroll progress ---------- */
.fx-progress {
  position: fixed; top: 0; left: 0; width: 100%; height: 3px; z-index: 3000;
  pointer-events: none; transform-origin: 0 50%; transform: scaleX(var(--p, 0));
  background: linear-gradient(90deg, var(--hw-purple), var(--hw-orange), #ffd27a);
}

/* ---------- atmosphere: static fog (no blur, no animation on big layers) ---------- */
.fx-fog {
  position: fixed; inset: 0; z-index: 1; pointer-events: none;
  background:
    radial-gradient(ellipse 70% 45% at 15% 0%, rgba(138, 63, 252, 0.22), transparent 70%),
    radial-gradient(ellipse 60% 40% at 90% 30%, rgba(255, 122, 26, 0.14), transparent 70%),
    radial-gradient(ellipse 80% 40% at 50% 110%, rgba(125, 255, 77, 0.07), transparent 70%);
}


/* ---------- hero ---------- */
.hero .pln-main-badge,
.hero .lw-hero-title,
.hero .lw-hero-sub,
.hero .hero-cta-buttons,
.hero .stats-wrapper { animation: fx-rise 0.7s var(--fx-ease) both; }
.hero .pln-main-badge { animation-delay: 0.05s; }
.hero .lw-hero-sub { animation-delay: 0.25s; }
.hero .hero-cta-buttons { animation-delay: 0.35s; }
.hero .stats-wrapper { animation-delay: 0.45s; }
@keyframes fx-rise {
  from { opacity: 0; transform: translateY(20px); }
  to   { opacity: 1; transform: none; }
}

/* spooky title: font + static glow (text-shadow is painted once, flicker is opacity only) */
.hero .lw-hero-title,
.global-title,
h2.global-title,
.products-main-title,
.lw-wordmark {
  font-family: var(--hw-font) !important;
  letter-spacing: 0.04em !important;
  font-weight: 400 !important;
}
.hero .lw-hero-title {
  color: #fff;
  -webkit-text-fill-color: #fff;
  background: none;
  text-shadow: 0 0 18px rgba(255, 122, 26, 0.75), 0 3px 0 #5a1d00;
  animation: fx-rise 0.7s var(--fx-ease) 0.15s both, fx-flicker 6s steps(1) 1.5s infinite;
}
@keyframes fx-flicker {
  0%, 92%, 96%, 100% { opacity: 1; }
  93% { opacity: 0.55; }
  94% { opacity: 1; }
  95% { opacity: 0.7; }
}
.global-title { text-shadow: 0 0 22px rgba(255, 122, 26, 0.45); }
.lw-wordmark { text-shadow: 0 0 16px rgba(255, 122, 26, 0.6); }

.hero .hero-btn-primary {
  box-shadow: 0 0 0 1px rgba(255, 122, 26, 0.5), 0 8px 26px rgba(255, 122, 26, 0.35);
}
.hero .hero-btn-primary:hover { transform: translateY(-2px); }

/* ---------- cards: cheap hover, cursor-lit border ---------- */
.fx-t { position: relative; }
.fx-glow {
  position: absolute; inset: 0; border-radius: inherit; pointer-events: none; z-index: 3;
  opacity: 0; transition: opacity 0.25s;
  background: radial-gradient(320px circle at var(--mx, 50%) var(--my, 50%), rgba(255, 122, 26, 0.14), transparent 60%);
}
.fx-t:hover > .fx-glow { opacity: 1; }

.product-card-purge,
.feat-card,
.box-card { transition: transform 0.25s var(--fx-ease), box-shadow 0.25s; }
.product-card-purge:hover,
.feat-card:hover,
.box-card:hover {
  transform: translateY(-5px);
  box-shadow: 0 18px 40px -18px rgba(255, 122, 26, 0.45), 0 0 0 1px rgba(255, 122, 26, 0.25);
}
.product-image-purge { overflow: hidden; }
.product-image-purge img { transition: transform 0.45s var(--fx-ease); }
.product-card-purge:hover .product-image-purge img { transform: scale(1.06); }

/* ---------- navbar (solid, no blur) ---------- */
.navbar.component { transition: background 0.3s, box-shadow 0.3s; }
.navbar.fx-scrolled {
  background: rgba(14, 7, 22, 0.94) !important;
  box-shadow: 0 1px 0 rgba(255, 122, 26, 0.35);
}
.navbar .nav-link { position: relative; }
.navbar .nav-link::after {
  content: ""; position: absolute; left: 12%; right: 12%; bottom: 2px; height: 2px;
  background: var(--hw-orange);
  transform: scaleX(0); transform-origin: 0 50%; transition: transform 0.25s var(--fx-ease);
}
.navbar .nav-link:hover::after { transform: scaleX(1); }

/* ---------- ticker ---------- */
.fx-ticker {
  position: relative; z-index: 3; overflow: hidden; padding: 1rem 0;
  border-block: 1px solid rgba(255, 122, 26, 0.3);
  background: rgba(20, 8, 30, 0.9);
}
.fx-ticker-track { display: flex; width: max-content; animation: fx-marquee 40s linear infinite; will-change: transform; }
.fx-ticker:hover .fx-ticker-track { animation-play-state: paused; }
.fx-ticker span {
  display: inline-flex; align-items: center; gap: 1.6rem; padding-right: 1.6rem;
  font-size: 1rem; font-weight: 600; letter-spacing: 0.14em; white-space: nowrap;
  color: rgba(255, 225, 200, 0.85);
}
.fx-ticker span::after { content: "🎃"; font-size: 0.9rem; }
@keyframes fx-marquee { to { transform: translateX(-50%); } }

/* ---------- Halloween details ---------- */
.cta-box { box-shadow: 0 0 40px -14px rgba(255, 122, 26, 0.5); }
.pln-main-badge { color: var(--hw-orange); }

/* cobweb in the top-left corner (single static SVG) */
body::before {
  content: ""; position: fixed; top: 0; left: 0; width: 180px; height: 180px; z-index: 4;
  pointer-events: none; opacity: 0.55;
  background: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 100 100' fill='none' stroke='%23d9c8ff' stroke-width='0.6'%3E%3Cpath d='M0 0 L100 0 M0 0 L92 38 M0 0 L70 70 M0 0 L38 92 M0 0 L0 100'/%3E%3Cpath d='M18 0 Q14 14 0 18 M36 0 Q28 28 0 36 M56 0 Q44 44 0 56 M80 0 Q62 62 0 80'/%3E%3C/svg%3E") no-repeat;
}

:focus-visible { outline: 2px solid var(--hw-orange); outline-offset: 3px; }

@media (max-width: 768px) {
  body::before { width: 110px; height: 110px; }
}
@media (prefers-reduced-motion: reduce) {
  .fx-ticker-track { animation: none !important; }
}