/* Halloween-tema. Slås av med HALLOWEEN=0 (eller av seg selv etter 2. november).
   Ingenting her gjelder uten klassen «halloween» på <html>. */
html.halloween {
  --grad: linear-gradient(100deg, #5B2BE0 0%, #9B2FB8 48%, #C2410C 100%);
  --grad-text: linear-gradient(100deg, #6D3DF2 0%, #B5329F 50%, #E0560F 100%);
  --glow: 0 14px 36px -10px rgba(194, 65, 12, .55);
}
html.halloween body:not(.kids-page) {
  background:
    radial-gradient(900px 620px at 6% -4%, rgba(255, 122, 26, .26), transparent 62%),
    radial-gradient(820px 560px at 96% 6%, rgba(109, 61, 242, .30), transparent 62%),
    radial-gradient(900px 640px at 84% 104%, rgba(194, 65, 12, .20), transparent 62%),
    radial-gradient(760px 520px at 0% 100%, rgba(91, 43, 224, .22), transparent 62%),
    linear-gradient(180deg, #F6F2FF 0%, #ECE4FA 100%);
  background-attachment: fixed;
}
html.halloween .hero::before { background: radial-gradient(circle, #FF8A1F, transparent 68%); }
html.halloween .hero::after { background: radial-gradient(circle, #7C3AED, transparent 68%); }
html.halloween .film-hero:not(.kids) {
  background:
    radial-gradient(700px 320px at 12% -10%, rgba(255, 122, 26, .55), transparent 62%),
    radial-gradient(640px 320px at 96% 110%, rgba(124, 58, 237, .6), transparent 62%),
    linear-gradient(135deg, #14081F, #1F1038 60%, #2E1450);
}
html.halloween .site-footer {
  background:
    radial-gradient(520px 220px at 0% 0%, rgba(255, 122, 26, .38), transparent 65%),
    radial-gradient(520px 220px at 100% 100%, rgba(124, 58, 237, .45), transparent 65%),
    linear-gradient(135deg, #14081F, #24103F);
}
html.halloween .marquee { background: linear-gradient(135deg, #14081F, #3A1763); }
html.halloween .home-links-inner .pill { background: linear-gradient(135deg, #14081F, #2E1450); }
html.halloween .home-links-inner .pill:hover { background: var(--grad); }
html.halloween ::selection { background: #E0560F; }
html.halloween .card:hover img { box-shadow: 0 4px 8px rgba(20, 35, 110, .12), 0 28px 48px -12px rgba(224, 86, 15, .55); }

/* Gresskarlogoen: flammer i ansiktet */
.logo-pumpkin { overflow: visible; filter: drop-shadow(0 0 7px rgba(255, 140, 30, .75)); transition: transform .2s; }
.brand:hover .logo-pumpkin { transform: rotate(-8deg) scale(1.1); }
.logo-pumpkin .glow { animation: hw-flicker 2.4s infinite; transform-origin: center; }
@keyframes hw-flicker {
  0%, 100% { opacity: 1; } 8% { opacity: .75; } 12% { opacity: 1; } 40% { opacity: .9; } 46% { opacity: .65; } 50% { opacity: 1; }
}

/* Lag for alt som beveger seg. Klikk går rett gjennom. */
.hw-layer { position: fixed; inset: 0; z-index: 45; pointer-events: none; overflow: hidden; }
.hw-web { position: fixed; top: 0; width: 170px; height: 170px; opacity: .55; z-index: 44; pointer-events: none; }
.hw-web.l { left: 0; }
.hw-web.r { right: 0; transform: scaleX(-1); }

/* Edderkopp som henger i tråden og går opp og ned */
.hw-drop { position: absolute; top: 0; left: 11%; width: 34px; display: flex; flex-direction: column; align-items: center; animation: hw-dangle 11s ease-in-out infinite; }
.hw-drop .thread { width: 1.5px; height: 90px; background: rgba(30, 20, 50, .55); margin-top: -90px; }
.hw-drop svg { width: 34px; height: auto; margin-top: -2px; }
@keyframes hw-dangle { 0%, 12% { transform: translateY(0); } 38%, 58% { transform: translateY(var(--drop, 170px)); } 82%, 100% { transform: translateY(0); } }

/* Edderkopp som går over skjermen */
.hw-crawl { position: absolute; left: 0; width: 46px; animation: hw-walk var(--dur, 16s) linear forwards; }
.hw-crawl svg { width: 100%; height: auto; display: block; animation: hw-skitter .5s ease-in-out infinite; }
@keyframes hw-walk { from { transform: translateX(-80px); } to { transform: translateX(calc(100vw + 80px)); } }
@keyframes hw-skitter { 50% { transform: translateY(-3px) rotate(1.5deg); } }
.hw-crawl.rev { animation-name: hw-walk-rev; }
.hw-crawl.rev svg { transform: scaleX(-1); }
@keyframes hw-walk-rev { from { transform: translateX(calc(100vw + 80px)); } to { transform: translateX(-80px); } }
.spider .legs-a { animation: hw-legs-a .26s ease-in-out infinite alternate; transform-origin: 50% 50%; }
.spider .legs-b { animation: hw-legs-b .26s ease-in-out infinite alternate; transform-origin: 50% 50%; }
@keyframes hw-legs-a { from { transform: rotate(-9deg); } to { transform: rotate(9deg); } }
@keyframes hw-legs-b { from { transform: rotate(9deg); } to { transform: rotate(-9deg); } }

/* Flaggermus */
.hw-bat { position: absolute; left: 0; width: 56px; animation: hw-fly var(--dur, 12s) linear forwards; }
.hw-bat svg { width: 100%; height: auto; display: block; animation: hw-bob 1.1s ease-in-out infinite; }
.hw-bat .wing { transform-origin: 50% 55%; animation: hw-flap .28s ease-in-out infinite alternate; }
@keyframes hw-flap { from { transform: scaleY(1); } to { transform: scaleY(.3); } }
@keyframes hw-bob { 50% { transform: translateY(-10px); } }
@keyframes hw-fly {
  0% { transform: translate(-90px, 0); }
  25% { transform: translate(25vw, var(--dy, -40px)); }
  50% { transform: translate(50vw, 0); }
  75% { transform: translate(75vw, calc(var(--dy, -40px) * -1)); }
  100% { transform: translate(calc(100vw + 90px), 0); }
}
.hw-bat.rev { animation-name: hw-fly-rev; }
.hw-bat.rev svg { transform: scaleX(-1); }
@keyframes hw-fly-rev {
  0% { transform: translate(calc(100vw + 90px), 0); }
  25% { transform: translate(75vw, var(--dy, -40px)); }
  50% { transform: translate(50vw, 0); }
  75% { transform: translate(25vw, calc(var(--dy, -40px) * -1)); }
  100% { transform: translate(-90px, 0); }
}

@media (max-width: 640px) {
  .hw-web { width: 110px; height: 110px; }
  .hw-bat { width: 40px; }
  .hw-crawl { width: 34px; }
  .hw-drop { left: 6%; width: 26px; }
  .hw-drop svg { width: 26px; }
}
@media (prefers-reduced-motion: reduce) {
  .hw-layer { display: none; }
  .logo-pumpkin .glow { animation: none; }
}