/* ===========================================================
   Low-Sensory Lo-Fi Day — scoped styles for BLOOM
   All rules scoped under .lofi so the violet system applies
   only to the Lo-Fi region; BLOOM's chrome (nav/footer, from
   badges.css) is retinted to the toolkit's violet just below.
   =========================================================== */

/* ---- Per-toolkit chrome accent ----------------------------------------
   This page loads AFTER badges.css, so overriding the green :root tokens
   here retints BLOOM's nav/footer accents (brand, link hovers, CTA,
   footer brand) to Lo-Fi's violet on THIS page only. The nav layout and
   the "BLOOM" wordmark stay; only the accent color changes. .lofi content
   defines its own tokens, so this does not affect the body. */
:root{
  --green:#5847C8;        /* CTA background */
  --green-deep:#473aa8;   /* brand, link/CTA hover, footer brand, current page */
  --green-lite:#8466D9;
  --bar-green:#D7D1F4;    /* nav link hover + current-page pill background */
  --ink-soft:#4A4368;     /* nav link + footer text (violet-leaning gray) */
  --gold:#1E5C97;         /* kicker accent, if any chrome uses it */
}

.lofi{
  --ink:#2B2640;
  --ink-soft:#4A4368;
  --violet:#5847C8;
  --violet-deep:#473aa8;
  --violet-lite:#8466D9;
  --blue:#2F7CC2;
  --blue-deep:#1E5C97;
  --bar-violet:#D7D1F4;
  --bar-blue:#CFE3F7;
  --zone-violet:#E5E0FA;
  --zone-blue:#E3EEFB;
  --panel:#FFFFFF;
  --page-1:#E9E5F8;
  --page-2:#E6F0FB;
  --shadow:rgba(88,71,200,.18);
  --shadow-lg:rgba(88,71,200,.26);
  --maxw:1180px;

  /* merged from source body{} */
  position:relative;
  font-family:"Nunito Sans",system-ui,sans-serif;
  color:var(--ink);
  background:
    radial-gradient(120% 50% at 12% 0%, var(--page-1) 0%, transparent 55%),
    radial-gradient(120% 60% at 95% 100%, var(--page-2) 0%, transparent 50%),
    linear-gradient(165deg, var(--page-1) 0%, #efe8f6 45%, var(--page-2) 100%);
  background-attachment:fixed;
  -webkit-font-smoothing:antialiased;
  line-height:1.5;
}

*{box-sizing:border-box;}
html{scroll-behavior:smooth;scroll-padding-top:96px;}

/* sparkle texture overlay (scoped to the Lo-Fi region) */
.lofi::before{
  content:"";position:absolute;inset:0;z-index:0;pointer-events:none;opacity:.55;
  background-repeat:repeat;background-size:300px 320px;
  background-image:
    radial-gradient(2px 2px at 28px 36px,#fff 50%,transparent 51%),
    radial-gradient(1.5px 1.5px at 150px 90px,rgba(255,255,255,.85) 50%,transparent 51%),
    radial-gradient(2.6px 2.6px at 90px 190px,#fff 50%,transparent 51%),
    radial-gradient(1.6px 1.6px at 220px 240px,rgba(255,255,255,.8) 50%,transparent 51%),
    radial-gradient(1.8px 1.8px at 50px 270px,rgba(255,255,255,.8) 50%,transparent 51%),
    radial-gradient(2px 2px at 265px 60px,rgba(255,255,255,.8) 50%,transparent 51%);
}

.lofi h1,.lofi h2,.lofi h3,.lofi h4,.lofi h5{font-family:"Baloo 2",system-ui,sans-serif;margin:0;line-height:1.05;letter-spacing:-.01em;}
.lofi p{margin:0;}
.lofi a{color:var(--violet-deep);}
.lofi img{display:block;max-width:100%;}

.lofi .wrap{max-width:var(--maxw);margin:0 auto;padding:0 24px;}

/* ---------- Window-panel card ---------- */
.lofi .win{background:var(--panel);border-radius:22px;border:3px solid #fff;box-shadow:0 8px 0 var(--shadow);overflow:hidden;}
.lofi .win__bar{display:flex;align-items:center;justify-content:space-between;padding:14px 20px;background:var(--bar-violet);}
.lofi .win--blue .win__bar{background:var(--bar-blue);}
.lofi .win__head{display:flex;align-items:center;gap:12px;min-width:0;}
.lofi .win__ico{width:30px;height:30px;flex:none;background:var(--violet-deep);-webkit-mask:var(--ic) center/contain no-repeat;mask:var(--ic) center/contain no-repeat;}
.lofi .win--blue .win__ico{background:var(--blue-deep);}
.lofi .win__title{font-family:"Baloo 2";font-weight:700;font-size:23px;color:var(--ink);line-height:1;}
.lofi .win__dots{display:flex;gap:8px;flex:none;}
.lofi .win__dots i{width:15px;height:15px;border-radius:5px;border:2.5px solid #9a90c8;}
.lofi .win--blue .win__dots i{border-color:#7ea6cf;}
.lofi .win__body{padding:22px 22px 24px;}

/* icon helpers */
.lofi .ic-stress{--ic:url(/images/lofi/icons/stress.png);}
.lofi .ic-headphones{--ic:url(/images/lofi/icons/headphones.png);}
.lofi .ic-music{--ic:url(/images/lofi/icons/music.png);}
.lofi .ic-musical-note{--ic:url(/images/lofi/icons/musical-note.png);}
.lofi .ic-music-notation{--ic:url(/images/lofi/icons/music-notation.png);}
.lofi .ic-music-heart{--ic:url(/images/lofi/icons/music-heart.png);}
.lofi .ic-playlist{--ic:url(/images/lofi/icons/playlist.png);}
.lofi .ic-study{--ic:url(/images/lofi/icons/study.png);}
.lofi .ic-coffee{--ic:url(/images/lofi/icons/coffee.png);}
.lofi .ic-fidget{--ic:url(/images/lofi/icons/fidget-spinner.png);}
.lofi .ic-no-audio{--ic:url(/images/lofi/icons/no-audio.png);}
.lofi .ic-voice{--ic:url(/images/lofi/icons/voice.png);}
.lofi .ic-library{--ic:url(/images/lofi/icons/library-building.png);}
.lofi .ic-books{--ic:url(/images/lofi/icons/books.png);}
.lofi .ic-pencil{--ic:url(/images/lofi/icons/pencil.png);}
.lofi .ic-toolkit{--ic:url(/images/lofi/icons/toolkit.png);}

/* ---------- Buttons ---------- */
.lofi .btn{display:inline-flex;align-items:center;gap:9px;font-family:"Baloo 2";font-weight:700;font-size:17px;text-decoration:none;border:none;cursor:pointer;border-radius:999px;padding:13px 24px;transition:transform .12s, box-shadow .12s, background .15s;}
.lofi .btn--primary{background:var(--violet);color:#fff;box-shadow:0 5px 0 var(--shadow-lg);}
.lofi .btn--primary:hover{background:var(--violet-deep);transform:translateY(-2px);box-shadow:0 7px 0 var(--shadow-lg);}
.lofi .btn--ghost{background:#fff;color:var(--violet-deep);box-shadow:0 4px 0 var(--shadow);}
.lofi .btn--ghost:hover{transform:translateY(-2px);box-shadow:0 6px 0 var(--shadow);}
.lofi .btn--blue{background:var(--blue);color:#fff;box-shadow:0 5px 0 rgba(30,92,151,.3);}
.lofi .btn--blue:hover{background:var(--blue-deep);transform:translateY(-2px);}

/* ---------- Chips ---------- */
.lofi .chips{display:flex;flex-wrap:wrap;gap:9px;}
.lofi .chip{font-family:"Baloo 2";font-weight:600;font-size:15px;color:var(--violet-deep);background:var(--bar-violet);border-radius:999px;padding:7px 16px;line-height:1.1;}
.lofi .chip--blue{color:var(--blue-deep);background:var(--bar-blue);}

/* ---------- Section scaffolding ---------- */
.lofi .section{padding:54px 0;}
.lofi .section__kicker{font-family:"Nunito Sans";font-weight:800;letter-spacing:.15em;text-transform:uppercase;font-size:14px;color:var(--blue);margin:0 0 10px;}
.lofi .section__title{font-family:"Baloo 2";font-weight:800;font-size:clamp(28px,4vw,44px);color:var(--violet);}
.lofi .section__lead{font-size:clamp(17px,2.2vw,20px);color:var(--ink-soft);max-width:62ch;margin-top:14px;font-weight:600;}

/* ---------- Reveal-on-scroll ---------- */
.lofi .reveal{opacity:0;transform:translateY(22px);transition:opacity .6s ease, transform .6s ease;}
.lofi .reveal.in{opacity:1;transform:none;}
@media (prefers-reduced-motion:reduce){.lofi .reveal{opacity:1;transform:none;transition:none;}}

/* ---------- Animated icons (web only) ---------- */
@media (prefers-reduced-motion:no-preference){
  .lofi .win__ico,.lofi .block__ico{will-change:transform;}
  .lofi .ic-fidget{animation:lf-spin 5s linear infinite;transform-origin:50% 50%;}
  .lofi .ic-music,.lofi .ic-musical-note,.lofi .ic-music-notation,.lofi .ic-playlist{animation:lf-bob 2.8s ease-in-out infinite;}
  .lofi .ic-music-heart{animation:lf-pulse 3s ease-in-out infinite;}
  .lofi .ic-headphones{animation:lf-pulse 3.6s ease-in-out infinite;}
  @keyframes lf-spin{to{transform:rotate(360deg);}}
  @keyframes lf-bob{0%,100%{transform:translateY(0);}50%{transform:translateY(-3px);}}
  @keyframes lf-pulse{0%,100%{transform:scale(1);}50%{transform:scale(1.12);}}
}

/* ---------- Citation links ---------- */
.lofi a.cite{text-decoration:none;cursor:pointer;border-bottom:1.5px dotted currentColor;}
.lofi a.cite:hover{opacity:.7;}
.lofi .reflist li{scroll-margin-top:104px;transition:background .3s, box-shadow .3s;}
.lofi .reflist li:target{background:var(--zone-blue);border-radius:8px;box-shadow:0 0 0 7px var(--zone-blue);}