/* ============================================================
   play-9.css — "GLASS" energy: premium dark glassmorphism
   Activated by :root[data-vibe="glass"]. Self-contained: it
   sets a cool near-black palette, ambient depth glows, and
   re-skins every brutalist surface (hard border + offset
   shadow) into frosted glass (translucent + backdrop-blur +
   soft shadow). Pop/Calm are unaffected.
   ============================================================ */

:root[data-vibe="glass"] {
  --paper:    #08090E;
  --paper-2:  #0D0F16;
  --card:     rgba(255,255,255,0.05);
  --ink:      #ECEEF6;
  --ink-soft: #9CA2B4;
  --ink-faint:#686E80;
  --line:     rgba(255,255,255,0.10);
  --line-2:   rgba(255,255,255,0.18);

  --tang:     #7E8CFF;   /* periwinkle-indigo accent */
  --tang-ink: #AEB7FF;   /* accent-as-text on dark */
  --cobalt:   #7E8CFF;
  --marker:   rgba(126,140,255,0.30);
  --on-marker:#EEF0FF;
  --marker-fg:#AEB7FF;
  --ok:       #5FE3B6;   /* mint */
  --on-accent:#0A0B12;

  /* glass recipe */
  --glass-bg:     rgba(255,255,255,0.055);
  --glass-bg-2:   rgba(255,255,255,0.085);
  --glass-bd:     1px solid rgba(255,255,255,0.12);
  --glass-blur:   blur(18px) saturate(135%);
  --glass-sh:     0 24px 60px -28px rgba(0,0,0,0.9), inset 0 1px 0 rgba(255,255,255,0.10);
  --glass-sh-sm:  0 14px 36px -22px rgba(0,0,0,0.85), inset 0 1px 0 rgba(255,255,255,0.08);

  color-scheme: dark;
}

/* ---------- ambient depth ---------- */
:root[data-vibe="glass"] body {
  background:
    radial-gradient(58% 48% at 12% -4%, rgba(126,140,255,0.20), transparent 60%),
    radial-gradient(46% 42% at 102% 14%, rgba(95,227,182,0.10), transparent 58%),
    radial-gradient(60% 55% at 86% 104%, rgba(168,120,255,0.16), transparent 62%),
    radial-gradient(50% 40% at 30% 120%, rgba(126,140,255,0.10), transparent 60%),
    #08090E;
  background-attachment: fixed;
}
/* let the grain overlay breathe a touch more on the dark canvas */
:root[data-vibe="glass"] body::before { opacity: 0.5; }

/* ---------- the universal glass surface ---------- */
:root[data-vibe="glass"] .filecard,
:root[data-vibe="glass"] .casecard,
:root[data-vibe="glass"] .quiz,
:root[data-vibe="glass"] .vstep,
:root[data-vibe="glass"] .leak,
:root[data-vibe="glass"] .bookf,
:root[data-vibe="glass"] .cs-card,
:root[data-vibe="glass"] .cs-mini,
:root[data-vibe="glass"] .cs-stat,
:root[data-vibe="glass"] .sf-card,
:root[data-vibe="glass"] .cs-voice,
:root[data-vibe="glass"] .cs-challenge,
:root[data-vibe="glass"] .cs-insight,
:root[data-vibe="glass"] .cs-quote,
:root[data-vibe="glass"] .cs-persona-id,
:root[data-vibe="glass"] .contact-link,
:root[data-vibe="glass"] .quiz-quip,
:root[data-vibe="glass"] .metric,
:root[data-vibe="glass"] .casetile,
:root[data-vibe="glass"] .proc-step,
:root[data-vibe="glass"] .about-card,
:root[data-vibe="glass"] .about-timeline,
:root[data-vibe="glass"] .interest-card {
  background: var(--glass-bg);
  -webkit-backdrop-filter: var(--glass-blur);
  backdrop-filter: var(--glass-blur);
  border: var(--glass-bd);
  border-radius: 20px;
  box-shadow: var(--glass-sh);
}
/* smaller chips/figures get the lighter recipe */
:root[data-vibe="glass"] .chip,
:root[data-vibe="glass"] .sticker,
:root[data-vibe="glass"] .cs-gap-node,
:root[data-vibe="glass"] .vd-chip,
:root[data-vibe="glass"] .pfc-figure,
:root[data-vibe="glass"] .bookf-screen,
:root[data-vibe="glass"] .leak-track,
:root[data-vibe="glass"] .filecard-bubble {
  background: var(--glass-bg);
  -webkit-backdrop-filter: blur(10px) saturate(130%);
  backdrop-filter: blur(10px) saturate(130%);
  border: var(--glass-bd);
  box-shadow: none;
}

/* kill the neo-brutalist offset shadows + heavy borders everywhere */
:root[data-vibe="glass"] .filecard,
:root[data-vibe="glass"] .casecard,
:root[data-vibe="glass"] .vstep,
:root[data-vibe="glass"] .leak,
:root[data-vibe="glass"] .bookf,
:root[data-vibe="glass"] .cs-persona-id { border-width: 1px; }

:root[data-vibe="glass"] .hero-aside:hover .filecard {
  box-shadow: 0 30px 70px -26px rgba(126,140,255,0.55), inset 0 1px 0 rgba(255,255,255,0.12);
}
:root[data-vibe="glass"] .casecard { box-shadow: var(--glass-sh); }

/* lift glow on the interactive grid tiles */
:root[data-vibe="glass"] .casetile:hover,
:root[data-vibe="glass"] .interest-card:hover {
  border-color: rgba(126,140,255,0.4);
  box-shadow: 0 30px 64px -30px rgba(126,140,255,0.5), inset 0 1px 0 rgba(255,255,255,0.12);
}

/* ---------- the sticker / marker accents ---------- */
:root[data-vibe="glass"] .sticker {
  color: var(--tang-ink);
  border: 1px solid rgba(126,140,255,0.45);
  background: rgba(126,140,255,0.16);
  box-shadow: 0 8px 26px -14px rgba(126,140,255,0.7);
}

/* ---------- buttons → liquid glass ---------- */
:root[data-vibe="glass"] .btn {
  background: rgba(126,140,255,0.18);
  border: 1px solid rgba(126,140,255,0.45);
  color: #EEF0FF;
  -webkit-backdrop-filter: blur(10px);
  backdrop-filter: blur(10px);
  box-shadow: 0 12px 34px -16px rgba(126,140,255,0.75), inset 0 1px 0 rgba(255,255,255,0.18);
}
:root[data-vibe="glass"] .btn:hover {
  background: rgba(126,140,255,0.32);
  border-color: rgba(126,140,255,0.7);
  color: #fff;
  box-shadow: 0 16px 40px -14px rgba(126,140,255,0.9), inset 0 1px 0 rgba(255,255,255,0.25);
}
:root[data-vibe="glass"] .btn-ghost {
  background: rgba(255,255,255,0.045);
  border: 1px solid rgba(255,255,255,0.16);
  color: var(--ink);
  box-shadow: inset 0 1px 0 rgba(255,255,255,0.08);
}
:root[data-vibe="glass"] .btn-ghost:hover { background: rgba(255,255,255,0.10); border-color: rgba(255,255,255,0.28); color: var(--ink); }

/* ---------- nav → floating glass ---------- */
:root[data-vibe="glass"] .nav-pill {
  background: rgba(255,255,255,0.06);
  border: 1px solid rgba(255,255,255,0.12);
  -webkit-backdrop-filter: blur(16px) saturate(130%);
  backdrop-filter: blur(16px) saturate(130%);
}
:root[data-vibe="glass"] .nav.is-scrolled {
  background: rgba(8,9,14,0.55);
  -webkit-backdrop-filter: blur(18px) saturate(130%);
  backdrop-filter: blur(18px) saturate(130%);
  border-bottom: 1px solid rgba(255,255,255,0.08);
  box-shadow: 0 20px 50px -30px rgba(0,0,0,0.9);
}
:root[data-vibe="glass"] .nav.is-scrolled .nav-pill { background: transparent; border-color: transparent; backdrop-filter: none; -webkit-backdrop-filter: none; }
:root[data-vibe="glass"] .nav-cta {
  background: rgba(126,140,255,0.18);
  border: 1px solid rgba(126,140,255,0.42);
  color: var(--ink);
  -webkit-backdrop-filter: blur(8px);
  backdrop-filter: blur(8px);
}
:root[data-vibe="glass"] .nav-cta:hover { background: rgba(126,140,255,0.34); transform: translateY(-1px); }
:root[data-vibe="glass"] .nav-name b { color: var(--tang-ink); }

/* ---------- marquee → faint glass strip ---------- */
:root[data-vibe="glass"] .marquee {
  background: rgba(255,255,255,0.035);
  color: var(--ink-soft);
  border-color: rgba(255,255,255,0.08);
  -webkit-backdrop-filter: blur(10px);
  backdrop-filter: blur(10px);
}
:root[data-vibe="glass"] .marquee-item::after { color: var(--tang-ink); }

/* ---------- origin beats → glass tiles ---------- */
:root[data-vibe="glass"] .origin-beats {
  background: rgba(255,255,255,0.06);
  border: 1px solid rgba(255,255,255,0.10);
  -webkit-backdrop-filter: var(--glass-blur);
  backdrop-filter: var(--glass-blur);
  box-shadow: var(--glass-sh);
}
:root[data-vibe="glass"] .beat { background: transparent; }
:root[data-vibe="glass"] .beat:hover { background: rgba(255,255,255,0.05); }

/* ---------- inverted-fill elements that must not turn white ---------- */
:root[data-vibe="glass"] .sf-card.felt,
:root[data-vibe="glass"] .cs-gap-node,
:root[data-vibe="glass"] .vd-chip.dark,
:root[data-vibe="glass"] .flipcard.is-back {
  background: rgba(126,140,255,0.14);
  color: var(--ink);
  border: 1px solid rgba(126,140,255,0.34);
}
:root[data-vibe="glass"] .flipcard { background: var(--glass-bg); color: var(--ink); border: var(--glass-bd); box-shadow: var(--glass-sh); }
:root[data-vibe="glass"] .quiz-quip-tag { background: rgba(126,140,255,0.85); color: #0A0B12; }
:root[data-vibe="glass"] .is-honest .quiz-quip-tag { background: var(--ok); color: #07120D; }

/* ---------- contact (was a solid --ink block) ---------- */
:root[data-vibe="glass"] .contact { background: transparent; color: var(--ink); }
:root[data-vibe="glass"] .contact-title { color: var(--ink); }
:root[data-vibe="glass"] .contact-lead { color: var(--ink-soft); }
:root[data-vibe="glass"] .contact .kicker { color: rgba(236,238,246,0.5) !important; }
:root[data-vibe="glass"] .contact-link { border: var(--glass-bd); }
:root[data-vibe="glass"] .contact-link:hover { background: var(--glass-bg-2); }

/* ---------- case-study top bar → glass ---------- */
:root[data-vibe="glass"] .cs-quote,
:root[data-vibe="glass"] .cs-quote p { color: var(--ink); }
:root[data-vibe="glass"] .cs-quote span { color: var(--ink-faint); }
:root[data-vibe="glass"] .filecard-bubble { color: var(--ink); }

:root[data-vibe="glass"] .cs-bar {
  background: rgba(8,9,14,0.55);
  -webkit-backdrop-filter: blur(18px) saturate(130%);
  backdrop-filter: blur(18px) saturate(130%);
  border-bottom: 1px solid rgba(255,255,255,0.08);
}

/* ---------- hero: recolor the photo halo + soften the file frame ---------- */
:root[data-vibe="glass"] .filecard-photo-bg {
  background: radial-gradient(circle at 50% 40%, rgba(126,140,255,0.55), rgba(95,227,182,0.18) 60%, transparent 72%);
  filter: blur(2px);
}
:root[data-vibe="glass"] .cs-hero,
:root[data-vibe="glass"] .hero { background: transparent; }

/* ---------- a hair of polish on the big headings ---------- */
:root[data-vibe="glass"] .hero-title,
:root[data-vibe="glass"] .display-xl { text-shadow: 0 1px 40px rgba(126,140,255,0.18); }