/* ============================================================
   play-8.css — "POP" energy layer
   Color-blocks the major sections by flipping the semantic
   --ink / --paper variables, so every child adapts to its
   block. Toggled by :root[data-vibe="pop"] (the Tweaks panel
   offers Pop / Calm). Calm = original restrained look.
   ============================================================ */

/* smooth the swap when toggling energy in Tweaks */
[data-vibe] .marquee,
[data-vibe] .honesty,
[data-vibe] .origin { transition: background 240ms var(--ease, ease), color 240ms var(--ease, ease); }

/* ---------- MARQUEE → electric tangerine band ---------- */
:root[data-vibe="pop"] .marquee {
  background: #FF4A1C;
  color: #1A1109;
  border-color: #1A1109;
}
:root[data-vibe="pop"] .marquee-item::after { color: #1A1109; }

/* ---------- HONESTY → chartreuse block ---------- */
:root[data-vibe="pop"] .honesty {
  --paper:    #E9F44E;
  --paper-2:  #DDE83C;
  --card:     #FCFDF0;
  --ink:      #15180A;
  --ink-soft: #474B2C;
  --ink-faint:#6F7448;
  --line:     #CBD449;
  --line-2:   #B8C233;
  /* highlights pop as cobalt + tangerine against the lime */
  --marker:   #1F2BFF;
  --on-marker:#F2F3FF;
  --marker-fg:#1F2BFF;
  --ok:       #0F7A3C;
  background: #E9F44E;
}

/* ---------- ORIGIN → cobalt block ---------- */
:root[data-vibe="pop"] .origin {
  --paper:    #1F2BFF;
  --paper-2:  #1A23DB;
  --card:     #2C39FF;
  --ink:      #FFFFFF;
  --ink-soft: #C9CDFF;
  --ink-faint:#9AA0F2;
  --line:     rgba(255,255,255,0.22);
  --line-2:   rgba(255,255,255,0.40);
  /* every accent reads as chartreuse on the blue */
  --tang:     #E9F44E;
  --tang-ink: #E9F44E;
  --marker:   #E9F44E;
  --on-marker:#15180A;
  --marker-fg:#E9F44E;
  --ok:       #E9F44E;
  background: #1F2BFF;
  color: #FFFFFF;
}
/* keep the big numbers + beat indices vivid on the blue */
:root[data-vibe="pop"] .origin .bstat-n,
:root[data-vibe="pop"] .origin .beat-n { color: #E9F44E; }
/* the belief block sits in a card — give it a touch of depth on blue */
:root[data-vibe="pop"] .origin .belief { background: rgba(255,255,255,0.06); }

/* ---------- HERO → a warm wash so the top doesn't read flat ---------- */
:root[data-vibe="pop"] .hero {
  background:
    radial-gradient(70% 55% at 88% 8%, color-mix(in srgb, var(--tang) 14%, transparent), transparent 60%),
    radial-gradient(55% 50% at 0% 100%, color-mix(in srgb, var(--cobalt) 9%, transparent), transparent 55%);
}

/* ---------- CONTACT → keep dark, but warm the accent line ---------- */
:root[data-vibe="pop"] .contact { background: #141019; }