/* AGE-417 Halloween layer. Every rule is scoped to html[data-season="halloween"],
   which halloween.js sets only from 30 Oct to 1 Nov 2026 (or with ?halloween=1).
   Without the attribute this file matches nothing. Palette: page amber + black,
   plus the page's warm grey (#d4c8a8) at low alpha for the fog. */

/* 1. Logo: the O of ONE carries a carved-pumpkin overlay. The glyph stays in
   place for layout and screen readers; the SVG (0.4em x 1.2em, the O's advance
   and content box) sits over it and follows the logo's font size. */
html[data-season="halloween"] .hw-o{position:relative}
html[data-season="halloween"] .hw-o svg{position:absolute;left:0;top:0;width:.4em;height:1.2em;overflow:visible;pointer-events:none}

/* 2. Hero: the outlined line flickers like a neon tube, steady ~5s of every 6s. */
html[data-season="halloween"] .v3-hero .v3-qt-outline{animation:hw-neon 6s linear infinite}
@keyframes hw-neon{
  0%,82%{opacity:1}
  83%{opacity:.35}
  84.5%{opacity:1}
  88%{opacity:1}
  88.6%{opacity:.35}
  89.3%{opacity:.75}
  90%{opacity:.35}
  91%{opacity:1}
  95.5%{opacity:1}
  96.2%{opacity:.35}
  97.5%{opacity:1}
  100%{opacity:1}
}

/* 3. Bats: 6s swoop across the headline, see halloween.js for the trigger. The fixed layer sits above the
   headline (z 60) and below the modal (1000). */
html[data-season="halloween"] .v3-hero-claim{position:relative;z-index:1}
html[data-season="halloween"] .hw-bats{position:fixed;inset:0;z-index:60;overflow:hidden;pointer-events:none}
html[data-season="halloween"] .hw-bat{position:absolute;left:0;top:0;opacity:.95;color:#f59e0b;filter:drop-shadow(0 0 2px rgba(245,158,11,.35));will-change:transform}
html[data-season="halloween"] .hw-bat svg{display:block;width:100%;height:auto;fill:currentColor;transform-origin:50% 40%;animation:hw-flap .16s ease-in-out infinite}
@keyframes hw-flap{0%,100%{transform:scaleY(1)}50%{transform:scaleY(.35)}}

/* 4. "The fog": four soft warm-grey blobs (two per pseudo-element) rolling slowly behind the tension grid.
   Tint is the page text colour (#d4c8a8) at 6-11% centre alpha, blurred and screened. The layers are full
   viewport width (centred on the block, which sits in a padded .container) so no container edge shows, and
   sit at z-index -1 behind all content; body clips the sideways bleed without becoming a scroll container. */
html[data-season="halloween"] body{overflow-x:clip}
html[data-season="halloween"] .v3-tension{position:relative}
html[data-season="halloween"] .v3-tension::before,
html[data-season="halloween"] .v3-tension::after{content:"";position:absolute;z-index:-1;pointer-events:none;left:50%;margin-left:-50vw;width:100vw;height:560px;top:calc(50% - 280px);background-repeat:no-repeat;filter:blur(28px);mix-blend-mode:screen;will-change:transform,opacity}
html[data-season="halloween"] .v3-tension::before{
  background-image:radial-gradient(closest-side,rgba(212,200,168,.07),rgba(212,200,168,0)),radial-gradient(closest-side,rgba(212,200,168,.06),rgba(212,200,168,0));
  background-size:860px 400px,720px 330px;background-position:0 15%,100% 85%;
  animation:hw-fog-a 70s ease-in-out infinite alternate,hw-fog-a-breathe 29s ease-in-out infinite alternate}
html[data-season="halloween"] .v3-tension::after{
  background-image:radial-gradient(closest-side,rgba(212,200,168,.06),rgba(212,200,168,0)),radial-gradient(closest-side,rgba(212,200,168,.06),rgba(212,200,168,0));
  background-size:800px 360px,700px 320px;background-position:62% 0,36% 100%;
  animation:hw-fog-b 95s ease-in-out infinite alternate,hw-fog-b-breathe 37s ease-in-out infinite alternate}
@media(max-width:767px){
  /* stacked layout: a taller layer spreads the blobs down the block so they overlap less */
  html[data-season="halloween"] .v3-tension::before,
  html[data-season="halloween"] .v3-tension::after{height:820px;top:calc(50% - 410px)}
  html[data-season="halloween"] .v3-tension::before{background-image:radial-gradient(closest-side,rgba(212,200,168,.07),rgba(212,200,168,0)),radial-gradient(closest-side,rgba(212,200,168,.06),rgba(212,200,168,0))}
  html[data-season="halloween"] .v3-tension::after{background-image:radial-gradient(closest-side,rgba(212,200,168,.06),rgba(212,200,168,0)),radial-gradient(closest-side,rgba(212,200,168,.06),rgba(212,200,168,0))}
}
@keyframes hw-fog-a{from{transform:translate3d(0,0,0)}to{transform:translate3d(140px,0,0)}}
@keyframes hw-fog-b{from{transform:translate3d(0,0,0)}to{transform:translate3d(-110px,0,0)}}
@keyframes hw-fog-a-breathe{from{opacity:.75}to{opacity:1}}
@keyframes hw-fog-b-breathe{from{opacity:1}to{opacity:.75}}

/* 5. Quote break: thin crescent moon, top right, static. */
html[data-season="halloween"] .v3-quote-break .container{position:relative}
html[data-season="halloween"] .hw-moon{position:absolute;top:0;right:56px;width:64px;height:64px;opacity:.45;pointer-events:none}
@media(max-width:767px){html[data-season="halloween"] .hw-moon{right:24px;top:-40px}}

/* 8. Modal success: season line under the sub line. */
html[data-season="halloween"] .hw-success-note{font-family:'Space Mono',monospace;font-size:11px;line-height:1.6;letter-spacing:.12em;color:#f59e0b;margin-top:14px}

@media(prefers-reduced-motion:reduce){
  html[data-season="halloween"] .v3-hero .v3-qt-outline,
  html[data-season="halloween"] .v3-tension::before,
  html[data-season="halloween"] .v3-tension::after,
  html[data-season="halloween"] .hw-bat svg{animation:none}
}