/* ================================================
   ZAZU. rainbow / playground theme override
   soft skies, crayon rainbows, sticker shadows
   ================================================ */

:root {
    /* rainbow crayon box */
    --r-red: #ff6b6b;
    --r-orange: #ffa552;
    --r-yellow: #ffd93d;
    --r-green: #7ed957;
    --r-teal: #4ecdc4;
    --r-blue: #5aa9ff;
    --r-purple: #b48cff;
    --r-pink: #ff8fc7;

    /* re-map the original tokens so the whole site follows */
    --dark: #fffaf2;
    --dark-2: #fff2e4;
    --dark-3: #eef6ff;
    --paper: #ffffff;
    --paper-2: #fdf3ff;
    --ink: #2b2340;
    --ink-soft: #6a5f86;
    --cream: #35294f;
    --cream-soft: #6a5f86;
    --cream-mute: #8f86a6;
    --amber: #ff8fc7;
    --amber-soft: rgba(255, 143, 199, 0.16);
    --ember: #5aa9ff;
    --line-dark: #ffe0ee;
    --line-paper: #e6dcff;

    --play: 'Fredoka', 'Baloo 2', 'Space Grotesk', sans-serif;
    --rainbow: linear-gradient(
        95deg,
        var(--r-red) 0%,
        var(--r-orange) 16%,
        var(--r-yellow) 32%,
        var(--r-green) 48%,
        var(--r-teal) 64%,
        var(--r-blue) 80%,
        var(--r-purple) 100%
    );
}

body {
    font-family: var(--play);
    background:
        radial-gradient(1100px 700px at 8% -8%, rgba(255, 143, 199, 0.35), transparent 60%),
        radial-gradient(1000px 640px at 96% 4%, rgba(90, 169, 255, 0.3), transparent 62%),
        radial-gradient(900px 620px at 50% 108%, rgba(126, 217, 87, 0.26), transparent 60%),
        var(--dark);
    background-attachment: fixed;
    color: var(--cream);
    font-weight: 400;
}

::selection { background: var(--r-yellow); color: var(--ink); }

/* soften the film grain into a gentle paper tooth */
.grain { opacity: 0.25 !important; mix-blend-mode: multiply; }
.wall-texture { opacity: 0.18 !important; }

/* ---------- typography ---------- */

.mono-label,
.plate,
.hero-tags,
.hero-meta,
.stat-kicker {
    font-family: var(--play);
    letter-spacing: 0.12em;
    font-weight: 500;
}

.hero-word,
.display,
.loader-word,
.interlude-line,
.stat-num {
    font-family: var(--play);
    font-weight: 600;
    letter-spacing: -0.02em;
}

.hero-word,
.display,
.interlude-line {
    background: var(--rainbow);
    -webkit-background-clip: text;
    background-clip: text;
    color: transparent;
    -webkit-text-fill-color: transparent;
}

.display em,
.display--light em,
.interlude-line em {
    font-style: italic;
    color: transparent;
    -webkit-text-fill-color: transparent;
}

.display--light,
.display--light em { color: transparent; }

.loader-word {
    color: transparent;
    -webkit-text-stroke: 2px var(--r-purple);
}

.loader { background: var(--dark-2); }
.loader-count { color: var(--r-pink); }
.loader-tag, .hero-meta, .hero-scrollcue { color: var(--ink-soft); }

/* ---------- nav ---------- */

.nav-logo {
    background: var(--rainbow);
    -webkit-background-clip: text;
    background-clip: text;
    color: transparent;
    font-family: var(--play);
    font-weight: 600;
}
.nav-logo span { color: var(--r-purple); opacity: 1; }
.nav-links a { color: var(--ink-soft); font-weight: 500; }
.nav-links a:hover { color: var(--r-blue); }

.nav-chip,
.ca-chip {
    background: #fff;
    border: 2px solid var(--r-purple);
    border-radius: 999px;
    color: var(--ink);
    box-shadow: 0 4px 0 rgba(180, 140, 255, 0.35);
}
.ca-chip code { color: var(--ink); }
.ca-chip-label { color: var(--r-purple); }
.ca-chip:hover { transform: translateY(-2px); }

.mobile-menu { background: var(--dark-2); }
.mobile-menu-links a { color: var(--ink); }
.mm-num { color: var(--r-teal); }

/* ---------- buttons: soft sticker style ---------- */

.btn {
    border-radius: 999px;
    font-family: var(--play);
    font-weight: 600;
    letter-spacing: 0.06em;
    border: 2px solid transparent;
    transition: transform 0.18s var(--ease), box-shadow 0.18s var(--ease);
}
.btn:hover { transform: translateY(-3px) rotate(-1deg); }

.btn--fill {
    background: var(--rainbow);
    color: #fff;
    box-shadow: 0 6px 0 rgba(255, 143, 199, 0.4);
}
.btn--line {
    background: #fff;
    color: var(--ink);
    border-color: var(--r-blue);
    box-shadow: 0 6px 0 rgba(90, 169, 255, 0.32);
}
.btn--ember {
    background: var(--r-teal);
    color: #fff;
    box-shadow: 0 6px 0 rgba(78, 205, 196, 0.4);
}

/* ---------- ticker as a rainbow ribbon ---------- */

.ticker {
    background: var(--rainbow);
    border: none;
    color: #fff;
}
.ticker-track span { color: #fff; font-family: var(--play); font-weight: 600; }
.ticker-track .tick-sep { color: rgba(255, 255, 255, 0.75); }

/* ---------- sections ---------- */

.chapter { position: relative; }

.paper {
    background: var(--paper);
    border-radius: 40px;
    box-shadow: 0 18px 60px rgba(120, 90, 180, 0.1);
}

.plate {
    border-radius: 999px;
    border: 2px solid var(--line-paper);
    color: var(--r-purple);
    background: #fff;
}
.plate i { color: var(--r-pink); }
.plate--light { color: var(--r-blue); border-color: rgba(90, 169, 255, 0.4); }
.plate--ember { color: var(--r-teal); border-color: rgba(78, 205, 196, 0.45); }

.story-col p, .beat p, .milestone p, .ledger-copy, .strip-card-desc, .wall-caption {
    color: var(--ink-soft);
}

.story-stamp { border-color: var(--r-yellow); color: var(--r-orange); }

/* journey */
.scrolly-year { font-family: var(--play); font-weight: 600; }
.beat-index { color: var(--r-teal); }
.beat-title { font-family: var(--play); font-weight: 600; color: var(--ink); }
.sp-dot { background: var(--line-paper); }
.sp-dot.is-active { background: var(--r-pink); }

/* stats */
.stat { border-radius: 28px; background: #fff; box-shadow: 0 10px 0 rgba(230, 220, 255, 0.7); }
.stat-num { color: var(--r-blue); }
.stat--accent .stat-num { color: var(--r-pink); }
.stat-unit { color: var(--r-purple); }

.milestone {
    border-radius: 28px;
    background: #fff;
    border: 2px solid var(--line-paper);
}
.milestone--accent { background: #fff6fb; border-color: var(--r-pink); }
.milestone-tag { color: var(--r-orange); }
.milestone-title { font-family: var(--play); font-weight: 600; color: var(--ink); }

.achievement {
    border-radius: 24px;
    background: #fff;
    border: 2px solid var(--line-paper);
}
.achievement-name { color: var(--ink); font-family: var(--play); font-weight: 600; }
.achievement-status { color: var(--r-green); }

.ledger-row { border-color: var(--line-paper); }
.ledger-num { color: var(--r-teal); }
.ledger-title { font-family: var(--play); font-weight: 600; color: var(--ink); }
.ledger-thumb { border-radius: 20px; }

/* culture strip */
.strip-card-img { border-radius: 28px; overflow: hidden; }
.strip-card-idx { color: var(--r-purple); }
.strip-card-title { font-family: var(--play); font-weight: 600; color: var(--ink); }

/* wall + archive */
.wall-piece,
.wall-piece-img,
.masonry-item,
.masonry-item img,
.interlude-img-wrap,
.hero-portrait img,
.lightbox-img { border-radius: 26px; }

.wall-piece-tag,
.masonry-tag {
    background: #fff;
    color: var(--r-purple);
    border-radius: 999px;
}
.wall-piece--empty { border: 2px dashed var(--r-blue); border-radius: 26px; }
.wall-piece--empty .plus { color: var(--r-blue); }

.filter-chip {
    border-radius: 999px;
    border: 2px solid var(--line-paper);
    background: #fff;
    color: var(--ink-soft);
    font-family: var(--play);
    font-weight: 500;
}
.filter-chip.is-active {
    background: var(--rainbow);
    color: #fff;
    border-color: transparent;
}

.lightbox { background: rgba(53, 41, 79, 0.82); }
.lightbox-btn { background: #fff; color: var(--ink); border-radius: 999px; }

/* cursor */
.cursor-dot { background: var(--r-pink); }
.cursor-ring { border-color: var(--r-blue); }

/* hero image gets a rainbow frame */
.hero-portrait {
    padding: 10px;
    border-radius: 34px;
    background: var(--rainbow);
    box-shadow: 0 20px 50px rgba(120, 90, 180, 0.22);
}
.hero-portrait img { border-radius: 26px; }

/* footer + anything still dark */
footer,
.footer,
[class*="foot"] { color: var(--ink-soft); }
footer a, .footer a { color: var(--r-blue); }

/* dark-section rescue: any block still painted with the old dark tokens */
[style*="#0d0b09"], [style*="#14110d"], [style*="#1b1712"] { background: var(--dark-2) !important; }

/* ---------- fixes: gradient must land on the split leaf spans ---------- */

.hero-word .split-line > span,
.hero-word-line,
.display .split-line > span,
.display em,
.display--light em,
.interlude-line .split-line > span,
.interlude-line em {
    background-image: var(--rainbow);
    background-size: 140% 100%;
    -webkit-background-clip: text;
    background-clip: text;
    color: transparent;
    -webkit-text-fill-color: transparent;
}

/* lighter paper tooth so text stays crisp */
.grain { opacity: 0.1 !important; mix-blend-mode: multiply; }

.nav-chip {
    background: var(--rainbow) !important;
    color: #fff !important;
    font-family: var(--play);
    font-weight: 600;
    border-radius: 999px;
    box-shadow: 0 4px 0 rgba(255, 143, 199, 0.35);
}

/* ---------- hero letters: one crayon per letter ---------- */

.hero-word,
.hero-word-line { -webkit-text-fill-color: initial; color: var(--ink); background: none; }

.hero-word-line > span {
    background: none;
    -webkit-text-fill-color: initial;
}
.hero-word-line > span:nth-child(6n + 1) { color: var(--r-red); }
.hero-word-line > span:nth-child(6n + 2) { color: var(--r-orange); }
.hero-word-line > span:nth-child(6n + 3) { color: var(--r-green); }
.hero-word-line > span:nth-child(6n + 4) { color: var(--r-blue); }
.hero-word-line > span:nth-child(6n + 5) { color: var(--r-purple); }
.hero-word-line > span:nth-child(6n + 6) { color: var(--r-pink); }

/* ---------- section headlines: readable ink, rainbow emphasis ---------- */

.display,
.display--light,
.display .split-line > span,
.interlude-line,
.interlude-line .split-line > span {
    background: none;
    color: var(--ink);
    -webkit-text-fill-color: var(--ink);
}

.display em,
.display--light em,
.interlude-line em,
.display .split-line > span em {
    background-image: var(--rainbow);
    -webkit-background-clip: text;
    background-clip: text;
    color: transparent;
    -webkit-text-fill-color: transparent;
}

/* ---------- contrast polish ---------- */

.nav-chip {
    background: var(--r-purple) !important;
    color: #fff !important;
    -webkit-text-fill-color: #fff;
}

/* interlude sits over a photo — keep it bright and legible */
.interlude-line,
.interlude-line .split-line > span {
    color: #fff;
    -webkit-text-fill-color: #fff;
    text-shadow: 0 4px 24px rgba(40, 30, 60, 0.55);
}
.interlude-line em {
    background-image: linear-gradient(95deg, #ffd93d, #ff8fc7 45%, #7ed957 75%, #5aa9ff);
    -webkit-background-clip: text;
    background-clip: text;
    -webkit-text-fill-color: transparent;
    text-shadow: none;
}

/* ---------- nav: no difference blending on a light theme ---------- */

.nav {
    mix-blend-mode: normal !important;
    background: rgba(255, 250, 242, 0.72);
    backdrop-filter: blur(14px) saturate(1.2);
    border-bottom: 2px solid rgba(230, 220, 255, 0.7);
}