/* ==================================================================
   Elev8 Labs — Halloween 2026 entry popup (loads only while
   elev8_is_halloween() is on; see inc/halloween.php)
   Palette: the site's cold-room navy + ember orange + violet. No clip art.
   ================================================================== */
:root{
  --hw-ember:#FF7A1A;
  --hw-ember-2:#FFB03B;
  --hw-violet:#8B5CF6;
  --hw-ink:#0A0F1E;
}
.e8hw{position:fixed;inset:0;z-index:99990;display:flex;align-items:center;justify-content:center;padding:18px;
  background:rgba(6,10,24,.74);backdrop-filter:blur(10px);-webkit-backdrop-filter:blur(10px);
  opacity:0;transition:opacity .35s ease}
.e8hw.is-in{opacity:1}
.e8hw__card{position:relative;width:100%;max-width:460px;overflow:hidden;border-radius:24px;
  background:radial-gradient(120% 80% at 50% -10%,rgba(255,122,26,.22),transparent 55%),linear-gradient(170deg,#121A36 0%,#0A0F1E 70%);
  border:1px solid rgba(255,122,26,.32);color:#fff;
  box-shadow:0 40px 100px rgba(0,0,0,.6),0 0 0 1px rgba(255,255,255,.04) inset,0 30px 80px rgba(255,122,26,.16);
  transform:translateY(18px) scale(.96);transition:transform .45s cubic-bezier(.2,.8,.2,1)}
.e8hw.is-in .e8hw__card{transform:none}

/* moon + fog + embers (pure CSS) */
.e8hw__moon{position:absolute;top:-90px;right:-70px;width:260px;height:260px;border-radius:50%;
  background:radial-gradient(circle at 40% 40%,#FFB03B 0%,#FF7A1A 38%,rgba(255,122,26,.25) 62%,transparent 70%);
  filter:blur(2px);opacity:.9;pointer-events:none}
.e8hw__fog{position:absolute;left:-20%;right:-20%;bottom:-40px;height:160px;pointer-events:none;
  background:radial-gradient(60% 100% at 30% 100%,rgba(139,92,246,.35),transparent 70%),radial-gradient(50% 100% at 75% 100%,rgba(255,122,26,.18),transparent 70%);
  filter:blur(18px);animation:e8hwFog 9s ease-in-out infinite alternate}
@keyframes e8hwFog{from{transform:translateX(-4%)}to{transform:translateX(4%)}}
.e8hw__ember{position:absolute;width:5px;height:5px;border-radius:50%;background:var(--hw-ember-2);
  box-shadow:0 0 10px 2px rgba(255,176,59,.7);opacity:0;animation:e8hwEmber 6s linear infinite;pointer-events:none}
.e8hw__ember:nth-child(1){left:14%;bottom:30%;animation-delay:0s}
.e8hw__ember:nth-child(2){left:62%;bottom:22%;animation-delay:2s;width:4px;height:4px}
.e8hw__ember:nth-child(3){left:82%;bottom:40%;animation-delay:3.6s;width:3px;height:3px}
.e8hw__ember:nth-child(4){left:36%;bottom:16%;animation-delay:4.8s}
@keyframes e8hwEmber{0%{transform:translateY(0) translateX(0);opacity:0}10%{opacity:.9}100%{transform:translateY(-140px) translateX(14px);opacity:0}}

/* the bat silhouette: one SVG path, sits on the moon */
.e8hw__bat{position:absolute;top:34px;right:46px;width:54px;height:30px;color:var(--hw-ink);pointer-events:none;
  animation:e8hwBat 5s ease-in-out infinite}
@keyframes e8hwBat{0%,100%{transform:translate(0,0) rotate(-6deg)}50%{transform:translate(-10px,-8px) rotate(4deg)}}

.e8hw__close{position:absolute;top:14px;left:14px;z-index:2;width:36px;height:36px;border-radius:50%;border:1px solid rgba(255,255,255,.14);
  background:rgba(255,255,255,.06);color:#fff;font:400 20px/1 sans-serif;cursor:pointer;display:flex;align-items:center;justify-content:center}
.e8hw__close:hover{background:rgba(255,255,255,.14)}

.e8hw__body{position:relative;z-index:1;padding:54px 30px 34px}
.e8hw__cta:focus,.e8hw__close:focus,.e8hw__copy:focus,.e8hw__later:focus{outline:none}
.e8hw__cta:focus-visible,.e8hw__close:focus-visible,.e8hw__copy:focus-visible,.e8hw__later:focus-visible{outline:2px solid rgba(255,255,255,.7);outline-offset:3px}
.e8hw__eyebrow{display:inline-flex;align-items:center;gap:8px;font:700 11px/1 'IBM Plex Mono',ui-monospace,monospace;letter-spacing:.14em;text-transform:uppercase;color:var(--hw-ember-2)}
.e8hw__eyebrow i{width:6px;height:6px;border-radius:50%;background:var(--hw-ember);box-shadow:0 0 8px var(--hw-ember)}
.e8hw__pct{margin:14px 0 2px;font:800 clamp(64px,18vw,88px)/.92 var(--font-display,'Sora',sans-serif);letter-spacing:-.04em;
  background:linear-gradient(100deg,#fff 0%,#FFD9B0 45%,var(--hw-ember) 100%);-webkit-background-clip:text;background-clip:text;color:transparent}
.e8hw__pct small{font-size:.42em;letter-spacing:-.02em}
.e8hw__h{margin:6px 0 8px;font:700 clamp(20px,5.6vw,24px)/1.2 var(--font-display,'Sora',sans-serif);letter-spacing:-.02em;color:#fff}
.e8hw__sub{margin:0 0 18px;font:400 14.5px/1.5 var(--font-body,'Inter',sans-serif);color:rgba(226,232,255,.72)}

.e8hw__code{display:flex;align-items:center;justify-content:space-between;gap:12px;padding:10px 10px 10px 16px;border-radius:14px;
  background:rgba(255,255,255,.05);border:1px dashed rgba(255,176,59,.5)}
.e8hw__code span{font:400 11px/1 var(--font-body,'Inter',sans-serif);letter-spacing:.1em;text-transform:uppercase;color:rgba(226,232,255,.55);display:block;margin-bottom:5px}
.e8hw__code b{font:700 20px/1 'IBM Plex Mono',ui-monospace,monospace;letter-spacing:.08em;color:#fff}
.e8hw__copy{flex:none;height:38px;padding:0 14px;border-radius:10px;border:1px solid rgba(255,255,255,.16);background:transparent;color:#fff;
  font:600 12.5px/1 var(--font-body,'Inter',sans-serif);cursor:pointer}
.e8hw__copy:hover{background:rgba(255,255,255,.1)}
.e8hw__copy.is-done{border-color:var(--hw-ember);color:var(--hw-ember-2)}

.e8hw__timer{display:flex;align-items:center;gap:8px;margin:14px 0 18px;font:500 13px/1 var(--font-body,'Inter',sans-serif);color:rgba(226,232,255,.72)}
.e8hw__timer b{font:700 13px/1 'IBM Plex Mono',ui-monospace,monospace;color:#fff;letter-spacing:.04em}
.e8hw__timer svg{color:var(--hw-ember-2);flex:none}

.e8hw__cta{display:flex;align-items:center;justify-content:center;gap:10px;width:100%;min-height:54px;border-radius:14px;border:0;cursor:pointer;
  background:linear-gradient(100deg,var(--hw-ember) 0%,#FF9A3C 60%,var(--hw-ember-2) 100%);color:#1a0b00;text-decoration:none;
  font:800 15.5px/1 var(--font-display,'Sora',sans-serif);letter-spacing:-.01em;
  box-shadow:0 10px 30px rgba(255,122,26,.35),0 1px 0 rgba(255,255,255,.35) inset;transition:transform .15s,box-shadow .15s}
.e8hw__cta:hover{transform:translateY(-1px);box-shadow:0 14px 36px rgba(255,122,26,.45)}
.e8hw__cta svg{transition:transform .2s}
.e8hw__cta:hover svg{transform:translateX(3px)}
.e8hw__later{display:block;width:100%;margin:12px 0 0;padding:6px;border:0;background:none;color:rgba(226,232,255,.5);
  font:500 13px/1 var(--font-body,'Inter',sans-serif);cursor:pointer;text-decoration:underline;text-underline-offset:3px}
.e8hw__later:hover{color:#fff}
.e8hw__fine{margin:14px 0 0;font:400 11px/1.45 var(--font-body,'Inter',sans-serif);color:rgba(226,232,255,.4);text-align:center}

/* jagged "haunted" chromatogram trace along the bottom edge */
.e8hw__trace{position:absolute;left:0;right:0;bottom:-6px;height:40px;color:var(--hw-violet);opacity:.4;pointer-events:none}

@media (max-width:420px){
  .e8hw{padding:14px}
  .e8hw__body{padding:50px 22px 30px}
  .e8hw__moon{top:-110px;right:-90px}
}
@media (prefers-reduced-motion:reduce){
  .e8hw,.e8hw__card{transition:none}
  .e8hw__fog,.e8hw__ember,.e8hw__bat{animation:none}
  .e8hw__ember{display:none}
}