/* Halloween Season — the TV layers for the "Fear Ye!" trivia segment
   (halloween-season.js builds them; tv.js decides when a story airs).

   Every layer here lives OUTSIDE the bezel. The flaps stay exactly the flaps,
   the same rule the demo badge and the sponsor map follow, and a screen that
   never receives this stylesheet still plays the whole story on the flaps.

   Only opacity and transform animate. A weak panel (the QB24C) then pays for
   compositing, not for layout or repaint, and nothing here blurs.

   Body classes, set by halloween-season.js and tv.js:
     hh-dressed   the season is on and the venue dresses the board between stories
     hh-seg       a story is on screen: ribbon up, board lifted, candle glow
     hh-glide     the board is moving between the two layouts (tv.js)
     hh-amb       glow flicker, fog, bats and falling petals/leaves are allowed
     hh-autumn / hh-muertos   the story's style (Halloween is the default)
     hh-storm     the lightning entrance (about 2.8 seconds)
     hh-candles   the Dia de los Muertos entrance: warm light, no lightning
     hh-ask       the question beat: the "think you know?" prompt
     hh-tell      the answer beat: the story panel */

:root{
  --hh-orange:#F26A21;          /* the satin theme's own orange chip */
  --hh-ember:#FF9A4D;
  --hh-bone:#F4E7CF;
  --hh-dim:#A89C8A;
  --hh-accent:var(--hh-ember);
  --hh-glow:rgba(242,106,33,.26);
  --hh-panel:rgba(20,15,12,.94);
}
body.hh-autumn{ --hh-accent:#FFB347; --hh-glow:rgba(255,150,40,.22); }
body.hh-muertos{ --hh-accent:#FFB000; --hh-glow:rgba(255,160,0,.24); --hh-panel:rgba(26,10,22,.94); }

.hh-layer{ position:fixed; inset:0; pointer-events:none; }
#hhBack{ z-index:0; }
#hhFront{ z-index:50; }
#hhDark{ z-index:66; background:#000; opacity:0; }
#hhFlash{ z-index:67; opacity:0; }

/* the board glides into the story layout and back, rather than jumping */
body.hh-glide #shell .bezel{ transition:transform .9s cubic-bezier(.2,.7,.2,1); }

/* ---------- candle glow behind the board ---------- */
#hhGlow{
  position:absolute; inset:0; opacity:0; transition:opacity 1.2s ease;
  background:radial-gradient(62% 58% at 50% 40%, var(--hh-glow), transparent 72%);
}
body.hh-dressed #hhGlow{ opacity:.35; }
body.hh-seg #hhGlow{ opacity:.8; }
body.hh-seg.hh-amb #hhGlow{ animation:hhCandle 3.4s steps(1,end) infinite; }
@keyframes hhCandle{
  0%{opacity:.78} 9%{opacity:.64} 17%{opacity:.84} 26%{opacity:.7} 38%{opacity:.88}
  51%{opacity:.68} 63%{opacity:.82} 77%{opacity:.72} 89%{opacity:.86} 100%{opacity:.78}
}

/* ---------- fog along the bottom, behind the board ---------- */
#hhFog{ position:absolute; left:0; right:0; bottom:0; height:46vh; opacity:0; transition:opacity 2s ease; overflow:hidden; }
body.hh-seg.hh-amb:not(.hh-muertos) #hhFog{ opacity:1; }
#hhFog i{
  position:absolute; bottom:-6vh; left:0; width:200vw; height:100%;
  background:
    radial-gradient(22vw 11vh at 10% 70%, rgba(190,196,214,.13), transparent 70%),
    radial-gradient(28vw 13vh at 32% 80%, rgba(190,196,214,.11), transparent 70%),
    radial-gradient(20vw 10vh at 55% 66%, rgba(190,196,214,.12), transparent 70%),
    radial-gradient(30vw 14vh at 78% 82%, rgba(190,196,214,.10), transparent 70%),
    radial-gradient(22vw 11vh at 96% 70%, rgba(190,196,214,.12), transparent 70%);
  animation:hhDrift 70s linear infinite; will-change:transform;
}
#hhFog i + i{ bottom:-12vh; opacity:.7; animation-duration:46s; animation-direction:reverse; }
@keyframes hhDrift{ from{transform:translateX(0)} to{transform:translateX(-100vw)} }

/* ---------- falling marigold petals / autumn leaves, behind the board ---------- */
#hhFall{ position:absolute; inset:0; opacity:0; transition:opacity 1.5s ease; overflow:hidden; }
body.hh-seg.hh-amb.hh-muertos #hhFall,
body.hh-seg.hh-amb.hh-autumn #hhFall{ opacity:1; }
#hhFall i{
  position:absolute; top:-6vh; width:1.6vh; height:1.2vh;
  border-radius:60% 40% 60% 40% / 60% 60% 40% 40%;
  background:radial-gradient(circle at 35% 35%, #FFD66B, #FFA000 58%, #E56A00);
  animation:hhFall var(--d,12s) linear var(--delay,0s) infinite; will-change:transform;
}
body.hh-autumn #hhFall i{
  width:2.1vh; height:1.5vh; border-radius:0 75% 0 75%;
  background:linear-gradient(135deg, #FFB347, #D9480F 68%, #7A2E0B);
}
@keyframes hhFall{
  0%{transform:translate(0,0) rotate(0deg)}
  25%{transform:translate(var(--sway,3vw),29vh) rotate(100deg)}
  50%{transform:translate(0,58vh) rotate(190deg)}
  75%{transform:translate(calc(var(--sway,3vw) * -1),87vh) rotate(280deg)}
  100%{transform:translate(0,116vh) rotate(370deg)}
}

/* ---------- cobwebs in the top corners of the screen ---------- */
.hh-web{ position:absolute; top:0; width:24vh; height:24vh; opacity:0; transition:opacity 1.6s ease; }
#hhWebL{ left:0; }
#hhWebR{ right:0; transform:scaleX(-1); }
body.hh-dressed .hh-web{ opacity:.42; }
body.hh-seg .hh-web{ opacity:.6; }
body.hh-muertos .hh-web{ opacity:0; }

#hhSpider{
  position:absolute; top:0; right:11vh; width:3vh; height:17vh; opacity:0; transition:opacity 1.6s ease;
  transform-origin:50% 0; animation:hhDangle 5.5s ease-in-out infinite;
}
#hhSpider i{ position:absolute; left:50%; top:0; bottom:2.6vh; width:1px; background:rgba(230,230,240,.45); }
#hhSpider span{ position:absolute; left:50%; bottom:0; transform:translateX(-50%); font:2.6vh/1 var(--emoji); }
body.hh-dressed #hhSpider, body.hh-seg #hhSpider{ opacity:.9; }
body.hh-muertos #hhSpider{ opacity:0; }
@keyframes hhDangle{ 0%,100%{transform:scaleY(.72)} 50%{transform:scaleY(1)} }

/* ---------- bats: launched by halloween-season.js, they cross the top band ---------- */
#hhBats{ position:absolute; inset:0 0 auto 0; height:14vh; overflow:visible; }
.hh-bat{
  position:absolute; left:0; top:var(--y0,4vh); width:var(--s,5vh); height:calc(var(--s,5vh) * .42);
  animation:hhFly var(--dur,6s) cubic-bezier(.4,.1,.6,.9) var(--delay,0s) 1 both; will-change:transform;
}
.hh-bat.rtl{ animation-name:hhFlyBack; }
.hh-bat svg{ width:100%; height:100%; display:block; transform-origin:50% 55%; animation:hhFlap .17s ease-in-out infinite alternate; }
@keyframes hhFlap{ from{transform:scaleY(1)} to{transform:scaleY(.38)} }
@keyframes hhFly{
  0%{transform:translate(-8vw,0)}
  30%{transform:translate(28vw,var(--dy,3vh))}
  62%{transform:translate(64vw,calc(var(--dy,3vh) * -.6))}
  100%{transform:translate(110vw,var(--dy,3vh))}
}
@keyframes hhFlyBack{
  0%{transform:translate(110vw,0) scaleX(-1)}
  34%{transform:translate(70vw,var(--dy,3vh)) scaleX(-1)}
  66%{transform:translate(34vw,calc(var(--dy,3vh) * -.6)) scaleX(-1)}
  100%{transform:translate(-8vw,var(--dy,3vh)) scaleX(-1)}
}

/* ---------- papel picado, Dia de los Muertos only ---------- */
#hhPapel{ position:absolute; top:0; left:0; right:0; height:12vh; opacity:0; transition:opacity 1.2s ease; }
body.hh-seg.hh-muertos #hhPapel{ opacity:1; }
#hhPapel svg{ position:absolute; top:0; height:11vh; width:auto; aspect-ratio:3 / 1; overflow:visible; }
#hhPapel svg.l{ left:1vw; }
#hhPapel svg.r{ right:1vw; }
#hhPapel .flag{ transform-box:fill-box; transform-origin:50% 0; animation:hhSway 4.2s ease-in-out infinite; }
#hhPapel .flag:nth-child(2n){ animation-delay:-1.3s; }
#hhPapel .flag:nth-child(3n){ animation-delay:-2.6s; }
@keyframes hhSway{ 0%,100%{transform:rotate(-2.5deg)} 50%{transform:rotate(2.5deg)} }

/* ---------- the ribbon: "FEAR YE! FEAR YE!" ---------- */
#hhRibbon{
  position:absolute; top:2.4vh; left:50%; display:flex; align-items:center; gap:1.8vh;
  opacity:0; transform:translate(-50%,-1.5vh); transition:opacity .7s ease, transform .7s ease;
}
body.hh-seg #hhRibbon{ opacity:1; transform:translate(-50%,0); }
#hhRibbon img{ height:7.6vh; width:auto; filter:drop-shadow(0 4px 14px #000a); }
.hh-cry{
  font:800 clamp(16px,3.5vh,46px)/1 var(--mono); letter-spacing:.3em; text-indent:.3em;
  color:var(--hh-accent); text-shadow:0 0 2.2vh rgba(255,110,20,.45); white-space:nowrap;
}
.hh-sub{
  margin-top:.8vh; font:600 clamp(10px,1.55vh,20px) var(--mono); letter-spacing:.22em;
  color:#CFC3B0; white-space:nowrap;
}

/* ---------- the question prompt ---------- */
#hhPrompt{
  position:absolute; left:50%; bottom:11vh; opacity:0; transform:translate(-50%,1.2vh);
  transition:opacity .6s ease, transform .6s ease; white-space:nowrap;
  font:700 clamp(13px,2.6vh,34px) var(--mono); letter-spacing:.2em; color:var(--hh-bone);
}
#hhPrompt b{ color:var(--hh-accent); font-weight:800; }
body.hh-ask #hhPrompt{ opacity:1; transform:translate(-50%,0); }

/* ---------- the story panel ---------- */
#hhStory{
  position:absolute; left:50%; bottom:3.2vh; width:min(90vw,168vh); max-height:26vh; overflow:hidden;
  padding:2.1vh 3.2vh 1.7vh; border-radius:14px;
  background:linear-gradient(180deg, var(--hh-panel), rgba(10,8,7,.96));
  border:1px solid rgba(255,140,60,.28);
  box-shadow:0 22px 60px #000c, inset 0 1px 0 #ffffff0d;
  opacity:0; transform:translate(-50%,2.4vh); transition:opacity .7s ease, transform .7s ease;
}
body.hh-muertos #hhStory{ border-color:rgba(224,33,138,.45); }
#hhStory::before{   /* a thin ember line along the top edge */
  content:""; position:absolute; left:3vh; right:3vh; top:0; height:2px; border-radius:2px;
  background:linear-gradient(90deg, transparent, var(--hh-accent), transparent);
}
body.hh-muertos #hhStory::before{
  background:linear-gradient(90deg, transparent, #E0218A, #FFB000, #17B6A7, transparent);
}
body.hh-tell #hhStory{ opacity:1; transform:translate(-50%,0); }
.hh-eyebrow{
  font:700 clamp(11px,1.7vh,22px) var(--mono); letter-spacing:.3em; color:var(--hh-accent);
  margin-bottom:1vh;
}
.hh-text{   /* halloween-season.js steps this down if a long story would hide the footer */
  font:500 clamp(15px,3.1vh,42px)/1.32 Georgia,"Times New Roman",serif;
  color:var(--hh-bone); text-wrap:pretty;
}
.hh-foot{
  display:flex; justify-content:space-between; gap:3vh; margin-top:1.3vh; padding-top:1.1vh;
  border-top:1px solid #ffffff14;
  font:600 clamp(10px,1.45vh,19px) var(--mono); letter-spacing:.18em; color:var(--hh-dim);
}

/* ---------- the lightning entrance ----------
   Photosensitivity: at most two flashes inside any one second, below full
   brightness and blue-grey rather than white (WCAG 2.3.1 allows three). The
   flicker before it is one sag and a blackout, not a strobe. Venues can turn
   the whole entrance off from the panel. */
body.hh-storm #hhDark{ animation:hhLights 2.8s linear 1 both; }
body.hh-storm #hhFlash{ animation:hhBolt 2.8s linear 1 both; }
@keyframes hhLights{
  0%{opacity:0} 8%{opacity:.62} 15%{opacity:.22} 25%{opacity:.86} 56%{opacity:.86} 100%{opacity:0}
}
@keyframes hhBolt{
  0%,52%{opacity:0} 53.5%{opacity:.55} 56%{opacity:.06} 61.5%{opacity:.34} 66%{opacity:0} 100%{opacity:0}
}
#hhFlash{ background:radial-gradient(120% 95% at 50% 12%, #DDE6FF 0%, #9AAAE0 38%, #465282 72%, #1C2036 100%); }
#hhGhost{   /* the picture, glimpsed in the lightning before the flaps build it */
  position:absolute; left:50%; top:50%; height:74vh; width:auto; max-width:92vw;
  transform:translate(-50%,-50%); opacity:.5; mix-blend-mode:luminosity;
}
#hhBolt{ position:absolute; top:0; left:12vw; height:44vh; width:auto; }

/* ---------- the Dia de los Muertos entrance: candlelight, not a scare ---------- */
body.hh-candles #hhDark{ animation:hhDusk 2.6s ease-in-out 1 both; }
@keyframes hhDusk{ 0%{opacity:0} 35%{opacity:.55} 100%{opacity:0} }

/* ---------- screens on FLAT depth: the cheap subset only ----------
   applyDepth() marks a standard screen with html.depth-standard; a flat one
   carries no class, so the test is its absence. */
html:not(.depth-standard) #hhFog,
html:not(.depth-standard) #hhFall,
html:not(.depth-standard) #hhBats{ display:none; }
html:not(.depth-standard) body.hh-seg.hh-amb #hhGlow{ animation:none; }