/* =============================================================
   CYVORE NOIR — PURPLE ACCENT OVERRIDE
   Loaded after noir.css. Re-points the crimson "string" accent
   to the Cyvore brand purple so the whole page is mono-purple.
   ============================================================= */
:root{
  /* the string + every red accent -> brand purple */
  --red:        #8b5cff;   /* was #c2342b */
  --red-bright: #a78eff;   /* was #e8473c */
  --red-glow:   rgba(139,92,255,0.55);
}

/* hardcoded reds that don't read the tokens above */

/* ---- KEEP THE RED STRING ---- the yarn + its pins stay crimson ---- */
.board-strings path{
  stroke:#c2342b !important;
  filter:drop-shadow(0 0 5px rgba(226,52,43,.5)) !important;
}
.board-strings path.lit{
  stroke:#e8473c !important;
  filter:drop-shadow(0 0 9px #e8473c) !important;
}
/* pushpin head — crimson gem, part of the string board */
.pin{
  background:radial-gradient(circle at 35% 30%, #ff7d72, #c2342b 60%, #6e1812) !important;
}
/* purple pins keep their purple (already set in base) */
.pin.purple{
  background:radial-gradient(circle at 35% 30%, #c4b1ff, var(--purple) 60%, var(--purple-deep)) !important;
}

/* verdict clue tape + tint */
.clue.verdict::before{
  background:rgba(139,92,255,.30); border-color:rgba(139,92,255,.5);
}
.clue.verdict{ background:#120c1f; }
.clue .k{ color:#7a5fb0; }
.clue.verdict .k{ color:var(--purple-bright); }

/* CTA ambient glow — drop the warm-red core, keep it purple */
.cta-glow{
  background:radial-gradient(ellipse, rgba(139,92,255,.22) 0%, rgba(139,92,255,.10) 45%, transparent 72%);
}

/* hero red sky -> deep violet dusk */
.sky{
  background:radial-gradient(58% 92% at 50% 0,
     rgba(139,92,255,.46) 0%, rgba(86,40,225,.30) 26%, rgba(45,15,161,.16) 50%, transparent 76%) !important;
}
/* skyline lit windows -> violet glow instead of red */
.skyline .win.red rect{ fill:rgba(167,142,255,.85); }
/* warm smoke accent -> violet */
.smoke.s1{ background:radial-gradient(circle,rgba(139,92,255,.22),transparent 65%); }
.smoke.s3{ background:radial-gradient(circle,rgba(167,142,255,.14),transparent 60%); }

/* ---- hero streetlamp: off by default, JS switches on while hero/setup is in view ---- */
.hero-detective .hero-lamp-scene{
  filter:brightness(.13) saturate(.4);
}
.hero-detective .hero-lamp-glow{
  position:absolute; left:68.5%; top:19.5%;
  width:30%; aspect-ratio:1; z-index:3;
  transform:translate(-50%,-50%) scale(.55);
  border-radius:50%;
  background:radial-gradient(circle,
     rgba(255,236,184,.9) 0%,
     rgba(250,221,150,.45) 30%,
     rgba(245,215,130,0) 68%);
  opacity:0; pointer-events:none; mix-blend-mode:screen;
}

/* =============================================================
   THE CASE — streetlamp on the left edge, JS-driven on/off
   ============================================================= */
#setup{ position:relative; overflow:hidden; }
#setup{ --lamp-w: clamp(180px, 17vw, 250px); }
.case-lamp{
  position:absolute; z-index:0; pointer-events:none;
  left:clamp(-30px, -1vw, 10px); bottom:0;
  width:var(--lamp-w);
  aspect-ratio:760 / 1140;
}
.cl-img{
  position:absolute; inset:0; width:100%; height:100%;
  object-fit:fill;
  -webkit-mask-image:radial-gradient(120% 96% at 56% 50%, #000 58%, transparent 100%);
          mask-image:radial-gradient(120% 96% at 56% 50%, #000 58%, transparent 100%);
}
.cl-off{ filter:brightness(.92); }
.cl-on{ opacity:0; }
.cl-glow{
  position:absolute; left:33%; top:28%;
  width:62%; aspect-ratio:1; z-index:2;
  transform:translate(-50%,-50%) scale(.55); border-radius:50%;
  background:radial-gradient(circle,
     rgba(255,236,184,.85) 0%, rgba(250,221,150,.4) 32%, rgba(245,215,130,0) 70%);
  opacity:0; pointer-events:none; mix-blend-mode:screen;
}
.wrap .news-masthead, #setup .wrap > *{ position:relative; z-index:1; }
/* only the threats row sits next to the lamp — pad just that, not the whole wrap */
#setup .threats{ padding-left:calc(var(--lamp-w) + clamp(-30px, -1vw, 10px) + 12px); }
@media (max-width:820px){
  #setup{ --lamp-w: clamp(50px, 18vw, 70px); }
  .case-lamp{ left:auto; right:0; bottom:0; transform:scaleX(-1); }
  #setup .threats{ padding-left:0; padding-right:calc(var(--lamp-w) + 12px); }
}

/* =============================================================
   FOOTER — SOC 2 case-file stamp
   ============================================================= */
.soc-stamp{
  display:inline-flex; align-items:center; gap:9px; white-space:nowrap;
  border:2px solid var(--purple); border-radius:3px; padding:7px 13px;
  transform:rotate(-4deg);
  color:var(--purple-bright);
  font-family:var(--f-display); font-size:15px; letter-spacing:.04em; text-transform:uppercase;
  box-shadow:inset 0 0 0 1px rgba(139,92,255,.22);
}
.soc-stamp svg{ width:16px; height:16px; flex:none; }
.soc-stamp .yr{
  font-family:var(--f-type); font-size:9px; letter-spacing:.12em;
  color:var(--purple); align-self:flex-end; padding-bottom:2px;
}
@media (max-width:680px){ .soc-stamp{ order:3; } }

/* keep the hero scene contained + resolve it to black at the bottom */
.hero{ overflow:hidden; }
.hero .hero-textscrim{
  position:absolute; left:0; top:0; bottom:0; width:64%; z-index:2; pointer-events:none;
  background:linear-gradient(to right, rgba(7,6,11,.74) 0%, rgba(7,6,11,.5) 30%, rgba(7,6,11,0) 100%);
}
.hero .hero-fade{
  position:absolute; left:0; right:0; bottom:0; height:20%; z-index:5; pointer-events:none;
  background:linear-gradient(to bottom, rgba(7,6,11,0) 0%, var(--bg) 82%, var(--bg) 100%);
}

/* solid ground at the bottom of the hero — rain ripples land on black */
.hero .hero-ground{
  position:absolute; left:0; right:0; bottom:0; height:30%; z-index:1; pointer-events:none;
  background:linear-gradient(to bottom, rgba(5,4,9,0) 0%, #050409 52%, #040308 100%);
}

/* rain canvas — above the ground overlay so ripples are visible on the dark floor */
.hero .rain-canvas{
  position:absolute; inset:0; width:100%; height:100%; z-index:2; pointer-events:none;
  mix-blend-mode:screen;
}

/* detective + lamp image, anchored bottom-right of the hero */
.hero-detective{
  position:absolute; right:0; bottom:12%; z-index:2; pointer-events:none;
  width:clamp(560px, 58vw, 1180px); max-width:none; line-height:0;
}
.hero-detective img{
  width:100%; height:auto; display:block;
  -webkit-mask-image:
     linear-gradient(to right, transparent 0%, #000 34%),
     linear-gradient(to bottom, transparent 0%, #000 22%);
          mask-image:
     linear-gradient(to right, transparent 0%, #000 34%),
     linear-gradient(to bottom, transparent 0%, #000 22%);
  -webkit-mask-composite:source-in; mask-composite:intersect;
}
@media (max-width:820px){ .hero-detective{ opacity:.55; width:120%; } }