/* =============================================================
   DIGITAL DEN — halloween.css

   The Halloween theme. Everything here is scoped to html.theme-halloween,
   which the build puts on the page while the season runs and main.js
   takes off the moment it ends, so after midnight UK on the 31st this
   file does nothing at all. The build stops linking it on the next deploy.

   THE IDEA
   Night over Los Santos rather than a costume shop. The purple stays,
   because it is the brand; ember orange takes over every accent; a
   harvest moon hangs behind the artwork, fog rolls along the bottom of
   the first screen, embers drift up from it and the odd bat crosses the
   sky. The footer stands on a graveyard ridge. Nothing moves fast and
   nothing flashes, and every bit of motion stops for people who have
   asked their system for less of it.
   ============================================================= */

html.theme-halloween{
  --ember:   #ff8a1f;
  --ember-2: #ffb15c;
  --ember-3: #ffd29a;
  --ember-soft: rgba(255,122,24,.13);
  --ember-line: rgba(255,138,31,.42);

  /* every accent on the site reads these */
  --brand-3:    var(--ember-2);
  --brand-ink:  var(--ember-3);
  --brand-soft: var(--ember-soft);
  --brand-line: var(--ember-line);
}

/* On the root, not the body: a body background paints over the photograph
   layer behind the first screen, which sits underneath it. */
html.theme-halloween{
  background:
    radial-gradient(90% 60% at 50% 0%, rgba(90,24,140,.20), transparent 70%) no-repeat,
    var(--bg);
}
.theme-halloween ::selection{ background:rgba(255,122,24,.45); color:#fff }
.theme-halloween #scroll-progress{ background:linear-gradient(90deg, #7a22ff, var(--ember), var(--ember-2)) }

/* ---------- type ----------
   The second line of every headline burns: an ember gradient with a soft
   glow behind it, like a candle through a carved face. */
.theme-halloween .accent,
.theme-halloween .grad-text{
  background:linear-gradient(92deg, #ffcf8a 0%, #ff8a1f 38%, #ff5a1f 62%, #c58bff 100%);
  -webkit-background-clip:text; background-clip:text;
  color:transparent; -webkit-text-fill-color:transparent;
  filter:drop-shadow(0 0 22px rgba(255,110,20,.28));
  animation:hwBurn 5s ease-in-out infinite;
}
@keyframes hwBurn{
  0%,100%{ filter:drop-shadow(0 0 22px rgba(255,110,20,.28)) }
  47%{ filter:drop-shadow(0 0 26px rgba(255,120,30,.38)) }
  50%{ filter:drop-shadow(0 0 14px rgba(255,100,20,.2)) }
  53%{ filter:drop-shadow(0 0 28px rgba(255,130,40,.4)) }
}

/* ---------- controls ---------- */
.theme-halloween .btn-primary{
  background:linear-gradient(180deg, #ff9a3c, #f06b0c);
  border-color:rgba(255,200,140,.25);
  box-shadow:0 10px 30px -10px rgba(255,110,20,.6), inset 0 1px 0 rgba(255,255,255,.25);
}
.theme-halloween .btn-primary:hover{ background:linear-gradient(180deg, #ffad5e, #ff7a1a) }
.theme-halloween .btn-light{
  box-shadow:0 0 0 1px rgba(255,177,92,.0), 0 12px 34px -14px rgba(255,120,30,.55);
}
.theme-halloween .btn-light:hover{ background:#fff1e2 }

/* ---------- surfaces ----------
   Cards warm up from underneath when you point at them, as if somebody
   lit a lantern behind the glass. */
.theme-halloween .pcard:hover,
.theme-halloween .shelf:hover,
.theme-halloween .sx-shelf:hover,
.theme-halloween .dx-card:hover{
  border-color:rgba(255,138,31,.45);
  box-shadow:var(--edge), 0 0 0 1px rgba(255,138,31,.18), 0 24px 60px -22px rgba(255,100,20,.5);
}
.theme-halloween .sx-shelf.is-on{
  box-shadow:var(--edge), 0 0 0 1px var(--ember-line), 0 18px 50px -20px rgba(255,110,20,.55);
}
.theme-halloween .pcard-flag.is-new{ background:linear-gradient(180deg, #ff8a1f, #e0570a); color:#1a0700 }
.theme-halloween .foot-top{
  background:
    radial-gradient(120% 140% at 0% 0%, rgba(255,110,20,.16), transparent 60%),
    radial-gradient(90% 120% at 100% 100%, rgba(122,34,255,.16), transparent 60%),
    var(--surface);
}
.theme-halloween .hx-tag::before,
.theme-halloween .feature-tag::before{ background:var(--ember); box-shadow:0 0 0 3px rgba(255,138,31,.22), 0 0 12px rgba(255,138,31,.8) }
.theme-halloween .hx-prog i{ background:linear-gradient(90deg, var(--ember), var(--ember-2)) }
.theme-halloween .how-n{ border-color:var(--ember-line); box-shadow:0 0 0 6px var(--bg), 0 0 24px -4px rgba(255,120,30,.6) }
.theme-halloween .how-steps::before{ background:linear-gradient(180deg, var(--ember-line), var(--line-2) 60%, transparent) }

/* Cobwebs, in the corners that would have them: the hero showcase, the
   buy panel and the support panel. Drawn once as an SVG, very faint. */
.theme-halloween .hx-stage::after,
.theme-halloween .buy-card::after,
.theme-halloween .bx-support::after{
  content:""; position:absolute; top:0; right:0; width:120px; height:120px; z-index:3; pointer-events:none;
  opacity:.32;
  background:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 120 120' fill='none' stroke='%23e9e2ff' stroke-width='.7' stroke-linecap='round'%3E%3Cpath d='M120 0 30 0M120 0 60 46M120 0 96 70M120 0 120 96M120 0 84 14M120 0 112 40'/%3E%3Cpath d='M44 0Q72 14 69 39Q93 48 101 61Q110 75 120 80'/%3E%3Cpath d='M62 0Q82 10 81 28Q99 34 105 46Q113 56 120 60'/%3E%3Cpath d='M80 0Q92 8 91 19Q104 22 109 31Q115 37 120 40'/%3E%3Cpath d='M98 0Q104 6 103 11Q111 12 114 18Q118 20 120 22'/%3E%3C/svg%3E") top right / contain no-repeat;
}
.theme-halloween .buy-card,
.theme-halloween .bx-support{ position:relative }

/* ---------- the night sky ---------- */
/* the harvest moon, hung behind the first screen's artwork */
.hw-moon{
  position:absolute; z-index:1; pointer-events:none;
  top:clamp(70px, 9vw, 120px); right:clamp(2%, 6vw, 9%);
  width:clamp(110px, 13vw, 190px); aspect-ratio:1; border-radius:50%;
  background:
    radial-gradient(circle at 66% 30%, rgba(150,96,50,.22) 0 7%, transparent 9%),
    radial-gradient(circle at 34% 60%, rgba(150,96,50,.18) 0 11%, transparent 13%),
    radial-gradient(circle at 60% 74%, rgba(150,96,50,.14) 0 5%, transparent 7%),
    radial-gradient(circle at 28% 30%, rgba(150,96,50,.12) 0 4%, transparent 6%),
    radial-gradient(circle at 74% 58%, rgba(150,96,50,.1) 0 3%, transparent 5%),
    radial-gradient(circle at 36% 32%, #fffaf0 0%, #fbe6c4 40%, #ecc489 72%, #c98f4e 100%);
  box-shadow:
    inset -14px -10px 30px rgba(120,60,20,.35),
    0 0 40px 6px rgba(255,214,150,.32),
    0 0 120px 40px rgba(255,150,60,.16),
    0 0 280px 110px rgba(255,110,30,.08);
  opacity:.9;
  animation:hwMoon 14s ease-in-out infinite alternate;
}
@keyframes hwMoon{ from{ transform:translateY(0) } to{ transform:translateY(10px) } }
/* thin clouds drifting across its face */
.hw-moon::after{
  content:""; position:absolute; inset:-20% -60%;
  background:
    radial-gradient(40% 9% at 30% 55%, rgba(30,14,40,.55), transparent 70%),
    radial-gradient(35% 7% at 70% 38%, rgba(30,14,40,.45), transparent 70%);
  animation:hwCloud 26s linear infinite;
}
@keyframes hwCloud{ from{ transform:translateX(-30%) } to{ transform:translateX(30%) } }

/* The artwork glow behind the first screen, tinted for the night: a
   purple sky at the top and an ember horizon low on the left, whatever
   colour the release on show happens to be. */
.theme-halloween .hx-ambient::after{
  background:
    radial-gradient(50% 45% at 85% 0%, rgba(110,40,190,.28), transparent 70%),
    radial-gradient(45% 40% at 8% 100%, rgba(255,100,20,.2), transparent 70%),
    linear-gradient(90deg, rgba(7,6,11,.88) 0%, rgba(7,6,11,.58) 38%, rgba(7,6,11,.2) 70%, rgba(7,6,11,.35) 100%),
    linear-gradient(180deg, rgba(7,6,11,.3), rgba(7,6,11,0) 30%, rgba(7,6,11,.6));
}
.theme-halloween .sx-ambient::after{
  background:
    radial-gradient(50% 45% at 85% 0%, rgba(110,40,190,.28), transparent 70%),
    radial-gradient(45% 40% at 8% 100%, rgba(255,100,20,.18), transparent 70%),
    linear-gradient(90deg, rgba(7,6,11,.85) 0%, rgba(7,6,11,.45) 50%, rgba(7,6,11,.15) 100%),
    linear-gradient(180deg, rgba(7,6,11,.25), rgba(7,6,11,0) 30%, rgba(7,6,11,.75));
}

/* fog along the bottom of the first screen */
.hw-fog{
  position:absolute; z-index:1; pointer-events:none;
  left:-40%; right:-40%; bottom:0; height:55%;
  background:
    radial-gradient(28% 40% at 12% 82%, rgba(205,190,255,.11), transparent 70%),
    radial-gradient(30% 45% at 38% 92%, rgba(255,170,110,.07), transparent 70%),
    radial-gradient(34% 40% at 62% 86%, rgba(205,190,255,.10), transparent 70%),
    radial-gradient(28% 40% at 88% 90%, rgba(205,190,255,.09), transparent 70%);
  filter:blur(6px);
  animation:hwFog 38s ease-in-out infinite alternate;
}
.hw-fog.is-2{ animation-duration:52s; animation-direction:alternate-reverse; opacity:.8; height:40% }
@keyframes hwFog{ from{ transform:translateX(-9%) } to{ transform:translateX(9%) } }

/* the effects layer: bats, embers, the spider. Over the first screen,
   never in the way of a click. */
.hw-fx{
  position:absolute; top:0; left:0; right:0; height:100vh; z-index:4;
  overflow:hidden; pointer-events:none;
}
.hw-bat{
  position:absolute; left:0; width:30px; height:16px; color:#14081c;
  filter:drop-shadow(0 0 5px rgba(255,140,40,.45));
  offset-rotate:0deg;
  animation:hwFly var(--dur, 22s) linear var(--delay, 0s) infinite;
  opacity:0;
}
.hw-bat svg{ width:100%; height:100%; animation:hwFlap .22s ease-in-out infinite alternate; transform-origin:50% 40% }
@keyframes hwFlap{ from{ transform:scaleY(1) } to{ transform:scaleY(.35) } }
@keyframes hwFly{
  0%{ transform:translate(-8vw, var(--y, 120px)) scale(var(--s, 1)); opacity:0 }
  4%{ opacity:.9 }
  25%{ transform:translate(22vw, calc(var(--y, 120px) - 30px)) scale(var(--s, 1)) }
  50%{ transform:translate(50vw, calc(var(--y, 120px) + 20px)) scale(var(--s, 1)) }
  75%{ transform:translate(78vw, calc(var(--y, 120px) - 25px)) scale(var(--s, 1)) }
  96%{ opacity:.9 }
  100%{ transform:translate(108vw, var(--y, 120px)) scale(var(--s, 1)); opacity:0 }
}

.hw-ember{
  position:absolute; bottom:-10px; width:4px; height:4px; border-radius:50%;
  background:radial-gradient(circle, #ffe2b0, #ff8a1f 55%, transparent 70%);
  box-shadow:0 0 8px 2px rgba(255,130,30,.6);
  opacity:0;
  animation:hwRise var(--dur, 12s) linear var(--delay, 0s) infinite;
}
@keyframes hwRise{
  0%{ transform:translate(0, 0) scale(1); opacity:0 }
  10%{ opacity:.9 }
  50%{ transform:translate(var(--drift, 20px), -45vh) scale(.8) }
  85%{ opacity:.5 }
  100%{ transform:translate(calc(var(--drift, 20px) * -.6), -88vh) scale(.4); opacity:0 }
}

/* a spider on a thread in the left margin, lowering and climbing back */
.hw-spider{
  position:absolute; top:0; left:clamp(10px, 2.4vw, 40px); width:26px;
  animation:hwDrop 9s ease-in-out infinite;
  transform-origin:50% 0;
}
.hw-spider::before{
  content:""; position:absolute; left:50%; bottom:22px; width:1px; height:100vh; margin-left:-.5px;
  background:linear-gradient(180deg, rgba(233,226,255,0), rgba(233,226,255,.45));
}
.hw-spider svg{ display:block; width:26px; height:26px; animation:hwSway 3s ease-in-out infinite alternate; transform-origin:50% 0 }
@keyframes hwDrop{
  0%,100%{ transform:translateY(calc(var(--nav-h) - 10px)) }
  45%,60%{ transform:translateY(calc(var(--nav-h) + 230px)) }
}
@keyframes hwSway{ from{ transform:rotate(-6deg) } to{ transform:rotate(6deg) } }

/* ---------- the graveyard ----------
   The footer stands on a ridge: a gnarled tree, headstones, a cross and a
   leaning fence against an orange horizon. */
.theme-halloween footer{ border-top:0; margin-top:clamp(5rem, 9vw, 8rem) }
.hw-grave{
  position:absolute; left:0; right:0; bottom:100%; height:clamp(80px, 9vw, 130px);
  pointer-events:none; overflow:hidden;
}
.hw-grave::before{
  content:""; position:absolute; inset:auto 0 0; height:120%;
  background:
    radial-gradient(45% 90% at 22% 100%, rgba(255,110,20,.32), transparent 70%),
    radial-gradient(40% 80% at 78% 100%, rgba(140,60,220,.28), transparent 70%),
    radial-gradient(70% 100% at 50% 100%, rgba(255,140,50,.14), transparent 70%);
}
.hw-grave svg{ position:absolute; bottom:-1px; left:50%; width:max(1400px, 100%); height:100%; transform:translateX(-50%) }

/* ---------- motion, when people want less of it ---------- */
@media (prefers-reduced-motion: reduce){
  .hw-fx{ display:none }
  .hw-moon,.hw-moon::after,.hw-fog,
  .theme-halloween .accent,.theme-halloween .grad-text{ animation:none !important }
}
@media (max-width:1200px){
  .hw-spider{ display:none }
}
@media (max-width:640px){
  /* On a phone the headline fills the width, so the moon becomes a large,
     faint disc half off the edge behind it rather than a sticker on top. */
  .hw-moon{ width:210px; top:calc(var(--nav-h) - 10px); right:-70px; opacity:.3; animation:none }
}