/* stranger-things.css -- loaded only by /stranger-things. Split out of fanpages.css. */

.st-sky {
  position: fixed; inset: 0; z-index: 0; pointer-events: none; overflow: hidden;
  background: radial-gradient(80% 60% at 50% 0%, #2a0a0c 0%, #140708 45%, #060405 100%);
}

.st-era {                              /* one layer per season, crossfaded on scroll */
  position: absolute; inset: 0; opacity: 0;
  transition: opacity 1.1s ease;
}

body[data-season="1"] .st-era--1,
body[data-season="2"] .st-era--2,
body[data-season="3"] .st-era--3,
body[data-season="4"] .st-era--4,
body[data-season="5"] .st-era--5 { opacity: 1; }

/* no season in view: the merged layer, everything at once */
body:not([data-season]) .st-era--0 { opacity: 1; }

/* 1 and 2 are the same family: dark, warm, underground */
.st-era--1 {
  background:
    radial-gradient(70% 50% at 50% 0%, rgba(232,38,29,.16), transparent 70%),
    linear-gradient(180deg, #1a0a0c 0%, #10070a 50%, #060406 100%);
}

.st-era--2 {
  background:
    radial-gradient(70% 50% at 50% 0%, rgba(224,112,42,.18), transparent 70%),
    linear-gradient(180deg, #241206 0%, #170c07 52%, #080505 100%);
}

/* 3 is the outlier: mall neon, bright and plastic */
.st-era--3 {
  background:
    radial-gradient(50% 40% at 22% 10%, rgba(255,95,176,.20), transparent 70%),
    radial-gradient(50% 40% at 78% 22%, rgba(63,224,208,.16), transparent 70%),
    linear-gradient(180deg, #2a0a2e 0%, #140a26 48%, #06060f 100%);
}

/* 4: Vecna, and the red lightning over Hawkins */
.st-era--4 {
  background:
    radial-gradient(72% 52% at 50% 0%, rgba(209,18,31,.24), transparent 70%),
    radial-gradient(52% 34% at 22% 74%, rgba(140,10,20,.16), transparent 72%),
    linear-gradient(180deg, #23060a 0%, #150407 52%, #060203 100%);
}

/* 5: the last season, burning amber */
.st-era--5 {
  background:
    radial-gradient(74% 50% at 50% 0%, rgba(240,160,32,.22), transparent 70%),
    radial-gradient(56% 38% at 74% 78%, rgba(224,96,20,.16), transparent 72%),
    linear-gradient(180deg, #1f1206 0%, #120a04 54%, #050302 100%);
}

/* the merged backdrop: all five seasons at once, for everything outside the run */
.st-era--0 {
  background:
    radial-gradient(44% 34% at 12% 10%, rgba(232,38,29,.20), transparent 70%),
    radial-gradient(40% 30% at 84% 16%, rgba(224,112,42,.16), transparent 72%),
    radial-gradient(48% 34% at 50% 46%, rgba(255,95,176,.14), transparent 72%),
    radial-gradient(38% 30% at 16% 76%, rgba(209,18,31,.18), transparent 72%),
    radial-gradient(42% 32% at 86% 82%, rgba(240,160,32,.15), transparent 72%),
    linear-gradient(180deg, #180810 0%, #0e0609 52%, #050305 100%);
}

.st-era--0::after {                    /* vines and rot over the lot of it */
  content: ""; position: absolute; inset: 0;
  background-image:
    repeating-linear-gradient(74deg, rgba(232,38,29,.05) 0 1px, transparent 1px 40px),
    repeating-linear-gradient(-64deg, rgba(240,160,32,.04) 0 1px, transparent 1px 56px),
    repeating-linear-gradient(102deg, rgba(255,95,176,.035) 0 2px, transparent 2px 30px);
  animation: st-vines 46s linear infinite;
}

.st-era--2::after {                    /* season two: the fields, rotting */
  content: ""; position: absolute; inset: 0;
  background-image:
    repeating-linear-gradient(102deg, rgba(224,112,42,.05) 0 2px, transparent 2px 26px);
}

.st-era--3::after {                    /* season three: fair lights */
  content: ""; position: absolute; inset: 0;
  background-image:
    radial-gradient(2px 2px at 12% 26%, rgba(255,120,190,.55), transparent),
    radial-gradient(2px 2px at 38% 14%, rgba(120,230,255,.5), transparent),
    radial-gradient(2px 2px at 62% 30%, rgba(255,220,120,.5), transparent),
    radial-gradient(2px 2px at 86% 18%, rgba(190,140,255,.5), transparent);
  background-size: 340px 340px;
}

.st-era--4::after {                    /* the vines, in red */
  content: ""; position: absolute; inset: 0;
  background-image:
    repeating-linear-gradient(74deg, rgba(209,18,31,.08) 0 1px, transparent 1px 38px),
    repeating-linear-gradient(-64deg, rgba(255,60,40,.055) 0 1px, transparent 1px 52px);
}

.st-era--5::after {                    /* the vines, going amber */
  content: ""; position: absolute; inset: 0;
  background-image:
    repeating-linear-gradient(74deg, rgba(240,160,32,.075) 0 1px, transparent 1px 38px),
    repeating-linear-gradient(-64deg, rgba(224,96,20,.055) 0 1px, transparent 1px 52px);
}

/* each season gets its own motion, not just its own color */
.st-era--1::after {                    /* season one: a torch sweeping the woods */
  content: ""; position: absolute; inset: 0;
  background: radial-gradient(28% 60% at 50% 40%, rgba(255,220,180,.09), transparent 68%);
  animation: st-torch 17s ease-in-out infinite alternate;
}

.st-era--2::after { animation: st-rot 34s linear infinite; }

.st-era--3::after { animation: st-fair 3.4s steps(1, end) infinite; }

.st-era--3 { animation: st-neon 6s ease-in-out infinite alternate; }

.st-era--4::after { animation: st-vines 40s linear infinite; }

.st-era--5::after { animation: st-vines 22s linear infinite; }

.st-era--5::before {                   /* season five: the rifts */
  content: ""; position: absolute; inset: 0;
  background:
    radial-gradient(38% 3% at 26% 34%, rgba(240,160,32,.30), transparent 70%),
    radial-gradient(30% 2.4% at 72% 58%, rgba(224,96,20,.26), transparent 70%),
    radial-gradient(24% 2% at 48% 78%, rgba(240,180,60,.22), transparent 70%);
  animation: st-rift 8s ease-in-out infinite alternate;
}

/* one drawn prop per season, swapped with the palette */
.st-prop {
  position: absolute; inset: 0; opacity: 0;
  transition: opacity 1.1s ease, transform 1.1s var(--ease);
}

/* outside the season run every prop is on at once, moved apart so the treeline,
   the Flayer, the fireworks, the clock and the rifts compose into one picture
   rather than piling up on top of each other in the middle */
body:not([data-season]) .st-prop--1 { opacity: .7; }

body:not([data-season]) .st-prop--2 { opacity: .34; transform: translate(-27%, 4%) scale(.6); }

body:not([data-season]) .st-prop--3 { opacity: .6; }

body:not([data-season]) .st-prop--4 { opacity: .3;  transform: translate(33%, -6%) scale(.46); }

body:not([data-season]) .st-prop--5 { opacity: .5; }

.st-prop svg { position: absolute; inset: 0; width: 100%; height: 100%; }

body[data-season="1"] .st-prop--1,
body[data-season="2"] .st-prop--2,
body[data-season="3"] .st-prop--3,
body[data-season="4"] .st-prop--4,
body[data-season="5"] .st-prop--5 { opacity: 1; }

/* S1: the treeline behind Mirkwood, and a bike nobody came back for */
.stp-tree { fill: #07100a; }

.stp-bike { fill: none; stroke: rgba(232,38,29,.30); stroke-width: 5; stroke-linecap: round; }

/* S2: the Mind Flayer standing over the fields */
.stp-flayer {
  fill: none; stroke: rgba(224,112,42,.22); stroke-width: 5;
  stroke-linecap: round; stroke-linejoin: round;
  animation: st-flayer 14s ease-in-out infinite alternate;
}

/* S3: fireworks over Starcourt */
.st-prop--3 i {
  position: absolute; width: 8px; height: 8px; border-radius: 50%;
  box-shadow:
     0 -34px 0 -3px currentColor,  0 34px 0 -3px currentColor,
    -34px 0 0 -3px currentColor,  34px 0 0 -3px currentColor,
    -24px -24px 0 -3px currentColor, 24px -24px 0 -3px currentColor,
    -24px 24px 0 -3px currentColor,  24px 24px 0 -3px currentColor;
  animation: st-firework 4.6s ease-out infinite;
}

.st-prop--3 i:nth-child(1) { left: 12%; top: 22%; color: #ff5fb0; animation-delay: -.2s; }

.st-prop--3 i:nth-child(2) { left: 31%; top: 14%; color: #3fe0d0; animation-delay: -1.4s; }

.st-prop--3 i:nth-child(3) { left: 52%; top: 26%; color: #ffd070; animation-delay: -2.6s; }

.st-prop--3 i:nth-child(4) { left: 68%; top: 12%; color: #8f6fd0; animation-delay: -3.4s; }

.st-prop--3 i:nth-child(5) { left: 84%; top: 24%; color: #ff5fb0; animation-delay: -0.9s; }

.st-prop--3 i:nth-child(6) { left: 44%; top: 8%;  color: #6fd0ff; animation-delay: -2.0s; }

/* S4: Vecna's grandfather clock */
.stp-clock {
  fill: none; stroke: rgba(255,59,48,.30); stroke-width: 5;
  stroke-linecap: round; stroke-linejoin: round;
  animation: st-clock 8s steps(1, end) infinite;
}

/* S5: the rifts running across the sky */
.stp-rift {
  fill: none; stroke: rgba(240,160,32,.34); stroke-width: 4;
  stroke-linecap: round; filter: blur(1px);
  animation: st-riftline 11s ease-in-out infinite alternate;
}

/* Starcourt Mall, under the wall */
.st-mall {
  padding: 0 var(--gutter); max-width: var(--maxw); margin: 0 0 3.4rem;
}

.st-mall svg { width: 100%; height: auto; display: block; }

.stm-sky    { fill: #0d0714; }

.stm-build  { fill: #1a0f24; stroke: #ff5fb0; stroke-width: 2.4; stroke-linejoin: round; }

.stm-glass  { fill: #2a1038; opacity: .7; }

.stm-frame  { fill: none; stroke: #3fe0d0; stroke-width: 1.6; opacity: .5; }

.stm-lot    { fill: #0a0710; stroke: none; }

.stm-lot path + path { fill: none; stroke: #4a3a58; stroke-width: 2; }

.stm-lamp   { fill: #ffd070; stroke: #6a5a78; stroke-width: 3; }

.stm-lamp circle { stroke: none; filter: drop-shadow(0 0 8px rgba(255,208,112,.9)); }

.stm-sign   { fill: #14091c; stroke: #ff5fb0; stroke-width: 2; }

.stm-sign path { fill: none; stroke: #ff8fd0; stroke-width: 5; stroke-linecap: round; }

.stm-star, .stm-neon {
  fill: #3fe0d0; stroke: #3fe0d0; stroke-width: 3; stroke-linecap: round;
  filter: drop-shadow(0 0 8px rgba(63,224,208,.8)) drop-shadow(0 0 22px rgba(63,224,208,.4));
  animation: st-buzz 5.5s steps(1, end) infinite;
}

.stm-neon { fill: none; }

.stm-sign { animation: st-buzz 7.3s steps(1, end) infinite; }

/* the season readout, fixed and outside main so the flip never turns it over */
.st-hud {
  position: fixed; left: clamp(0.8rem, 2vw, 1.6rem); bottom: 4.4rem;
  z-index: 60; display: flex; align-items: center; gap: 0.7rem;
  padding: 0.5rem 0.9rem 0.5rem 0.6rem; border-radius: 10px;
  border: 1px solid color-mix(in srgb, var(--sc, #e8261d) 40%, transparent);
  background: rgba(10,6,8,.9);   /* opaque enough to drop the backdrop-filter, which repainted on every scroll */
  opacity: 0; transform: translateY(8px); pointer-events: none;
  transition: opacity .5s, transform .5s var(--ease), border-color .8s;
}

body[data-season="1"] .st-hud { --sc: #e8261d; }

body[data-season="2"] .st-hud { --sc: #e0702a; }

body[data-season="3"] .st-hud { --sc: #ff5fb0; }

body[data-season="4"] .st-hud { --sc: #ff3b30; }

body[data-season="5"] .st-hud { --sc: #f0a020; }

.st-hud-num {
  font-family: Georgia, serif; font-size: 1.9rem; line-height: 1; font-weight: 700;
  color: var(--sc, #e8261d);
  text-shadow: 0 0 10px color-mix(in srgb, var(--sc, #e8261d) 70%, transparent),
               0 0 28px color-mix(in srgb, var(--sc, #e8261d) 45%, transparent);
  min-width: 1.1ch; text-align: center;
}

.st-hud-text { display: flex; flex-direction: column; gap: 0.12rem; }

.st-hud-text b {
  font-family: Georgia, serif; font-size: 0.78rem; letter-spacing: 0.01em;
  color: var(--ink); white-space: nowrap;
}

.st-hud-text i {
  font-style: normal; font-family: var(--mono); font-size: 0.56rem;
  letter-spacing: 0.16em; color: var(--mute);
}

@media (max-width: 620px) { .st-hud-text b { display: none; } }

.st-letter .st-bulb, .st-letter b { transition: none; }

.st-say {
  display: flex; flex-wrap: wrap; align-items: center; justify-content: center;
  gap: 0.7rem; margin-top: 1.4rem;
}

.st-say label {
  font-family: var(--mono); font-size: 0.6rem; letter-spacing: 0.16em;
  text-transform: uppercase; color: var(--mute);
}

.st-say input {
  font-family: Georgia, serif; font-size: 1rem; letter-spacing: 0.18em;
  text-transform: uppercase; text-align: center;
  width: min(320px, 70vw); padding: 0.5rem 0.9rem;
  color: #ffd9d2; background: rgba(0,0,0,.35);
  border: 1px solid rgba(232,38,29,.4); border-radius: 6px;
}

.st-say input:focus { outline: 2px solid rgba(232,38,29,.7); outline-offset: 2px; }

/* a flip control at each end of the page, counter-rotated so it stays readable */
.st-flipbar { display: flex; justify-content: center; padding: 0 var(--gutter); margin: 0 0 2.4rem;
  max-width: var(--maxw); }

.st-flipbar--bottom { margin: 1rem 0 3rem; }

.st-flip { transition: transform .6s var(--ease), background .25s, border-color .25s; }

body.is-upside-down .st-flip { transform: rotate(180deg); }

.st-sky::before {                      /* drifting spores */
  content: ""; position: absolute; inset: -20%;
  background-image:
    radial-gradient(1.6px 1.6px at 20% 30%, rgba(255,180,170,.5), transparent),
    radial-gradient(1.4px 1.4px at 70% 60%, rgba(255,150,140,.4), transparent),
    radial-gradient(1.8px 1.8px at 45% 80%, rgba(255,200,190,.35), transparent),
    radial-gradient(1.2px 1.2px at 85% 20%, rgba(255,160,150,.45), transparent);
  background-size: 260px 260px;
  animation: st-drift 24s linear infinite;
}

.st-lights { display: flex; align-items: flex-end; gap: 1.1rem; margin: 1.4rem 0 0; flex-wrap: wrap; }

.st-lights i {
  width: 13px; height: 18px; border-radius: 50% 50% 46% 46%;
  background: var(--b); box-shadow: 0 0 14px 3px var(--b);
  animation: st-blink 3.4s ease-in-out infinite;
}

/* ═════════════ Stranger Things: the alphabet wall ═════════════ */
.st-wall {
  position: relative; padding: 0 var(--gutter); max-width: var(--maxw); margin: 0 0 3.4rem;
}

.st-paper {
  position: relative; padding: clamp(1.4rem, 4vw, 2.6rem) clamp(1rem, 3vw, 2rem) clamp(1.2rem, 3vw, 2rem);
  border-radius: 6px; overflow: hidden;
  background:
    repeating-linear-gradient(90deg, rgba(255,255,255,.02) 0 1px, transparent 1px 34px),
    linear-gradient(180deg, #2a2118 0%, #1d1710 60%, #140f0b 100%);
  box-shadow: inset 0 0 90px 20px rgba(0,0,0,.55);
}

.st-paper::before {                       /* damp patches on the plaster */
  content: ""; position: absolute; inset: 0; pointer-events: none;
  background:
    radial-gradient(ellipse 26% 30% at 14% 24%, rgba(0,0,0,.35), transparent 70%),
    radial-gradient(ellipse 22% 26% at 82% 68%, rgba(0,0,0,.3), transparent 70%);
}

.st-cord {                                /* the wire the bulbs hang from */
  position: relative; height: 26px; margin-bottom: -13px;
  background:
    radial-gradient(120% 100% at 50% 0%, transparent 48%, rgba(255,255,255,.10) 49%, transparent 52%);
}

.st-letters {
  position: relative; display: flex; flex-wrap: wrap; gap: clamp(0.3rem, 1.2vw, 0.8rem);
  justify-content: center;
}

.st-letter {
  position: relative; width: clamp(30px, 4.2vw, 52px);
  display: flex; flex-direction: column; align-items: center; gap: 0.5rem;
}

.st-bulb {
  width: 12px; height: 17px; border-radius: 50% 50% 44% 44%;
  background: color-mix(in srgb, var(--b, #b06a4a) 34%, #241c18);
  box-shadow: inset 0 -2px 3px rgba(0,0,0,.6), 0 0 7px 1px color-mix(in srgb, var(--b, #b06a4a) 22%, transparent);
}

/* the real prop is a string of mixed colors, so the wall reads as bulbs even unlit */
.st-letter:nth-child(6n+1) .st-bulb { --b: #e8261d; }

.st-letter:nth-child(6n+2) .st-bulb { --b: #f0c840; }

.st-letter:nth-child(6n+3) .st-bulb { --b: #4fd07f; }

.st-letter:nth-child(6n+4) .st-bulb { --b: #4f9fd0; }

.st-letter:nth-child(6n+5) .st-bulb { --b: #e07ad0; }

.st-letter:nth-child(6n+6) .st-bulb { --b: #f08030; }

.st-letter b {
  font-family: Georgia, serif; font-size: clamp(0.9rem, 2.2vw, 1.4rem);
  color: rgba(214, 196, 168, .6); line-height: 1;
}

.st-wall-cap {
  margin-top: 1.2rem; text-align: center;
  font-family: var(--mono); font-size: 0.62rem; letter-spacing: 0.18em;
  text-transform: uppercase; color: var(--mute);
}

/* the flip: turn the whole page over into the Upside Down */
.st-flip {
  display: block; margin: 1.2rem auto 0;
  padding: 0.65rem 1.3rem; border-radius: 100px; cursor: pointer;
  border: 1px solid color-mix(in srgb, #e8261d 50%, transparent);
  background: rgba(232,38,29,.07); color: #e8261d;
  font-family: var(--mono); font-size: 0.68rem; letter-spacing: 0.14em; text-transform: uppercase;
  transition: background .3s, color .3s;
}

.st-flip:hover { background: #e8261d; color: #140708; }

body.is-upside-down main,
body.is-upside-down .st-wall { transform: rotate(180deg); }

/* on main and the sky, never on body: a filter on body makes it the containing
   block for every position:fixed layer (tab bar, grain, HUD), which then scroll away */
body.is-upside-down main,
body.is-upside-down .st-sky { filter: hue-rotate(-18deg) saturate(.55) contrast(1.1) brightness(.82); }

body.is-upside-down .st-sky::before { animation-duration: 9s; opacity: 1; }

@media (hover: none) { .st-flip { cursor: pointer; } }

@media (prefers-reduced-motion: reduce) {
  .st-era--1::after, .st-era--2::after, .st-era--3, .st-era--3::after,
  .st-era--4::after, .st-era--5::after, .st-era--5::before,
  .stp-flayer, .st-prop--3 i, .stp-clock, .stp-rift,
  .stm-star, .stm-neon, .stm-sign { animation: none !important; }
  body.is-upside-down main, body.is-upside-down .st-wall { transform: none; }
  body.is-upside-down .st-flip { transform: none; }
}