/* base.css — reset, document defaults, ambient backgrounds.
   Visual parity with the original site: every rule below was extracted
   verbatim from the inline <style> block in index.php. */

* { margin: 0; padding: 0; box-sizing: border-box; }

html { scroll-behavior: smooth; scroll-padding-top: 110px; }

body {
    font-family: 'Sora', sans-serif;
    background: var(--paper-cream);
    color: var(--ink-black);
    overflow-x: hidden;
    min-height: 100vh;
}

body::before {
    content: '';
    position: fixed;
    inset: -10%;
    background-image:
        radial-gradient(circle at 18% 78%, var(--peach) 0%, transparent 45%),
        radial-gradient(circle at 82% 22%, var(--cyan) 0%, transparent 45%),
        radial-gradient(circle at 45% 45%, var(--lavender) 0%, transparent 40%);
    opacity: 0.12;
    pointer-events: none;
    z-index: -2;
    animation: ambientDrift 36s var(--ease-in-out) infinite;
    will-change: transform;
}
[data-theme="dark"] body::before { opacity: 0.18; }
@media (prefers-reduced-motion: reduce) { body::before { animation: none; } }

/* SVG grain noise — gives surfaces a subtle painted texture. Animated for film-grain feel. */
body::after {
    content: '';
    position: fixed;
    inset: -50%;
    pointer-events: none;
    z-index: -1;
    opacity: 0.045;
    background-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='200' height='200'><filter id='n'><feTurbulence type='fractalNoise' baseFrequency='0.9' numOctaves='2' stitchTiles='stitch'/><feColorMatrix values='0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 1 0'/></filter><rect width='100%25' height='100%25' filter='url(%23n)'/></svg>");
    mix-blend-mode: multiply;
    animation: grainShift 1.4s steps(6) infinite;
}
[data-theme="dark"] body::after { mix-blend-mode: overlay; opacity: 0.08; }
@media (prefers-reduced-motion: reduce) { body::after { animation: none; } }

/* Ambient floating dust — soft glints drifting up. Pure CSS, GPU-only. */
.ambient-dust {
    position: fixed;
    inset: 0;
    pointer-events: none;
    z-index: -1;
    overflow: hidden;
}
.ambient-dust::before,
.ambient-dust::after {
    content: '';
    position: absolute;
    inset: 0;
    background-image:
        radial-gradient(2px 2px at 12% 20%, color-mix(in oklab, var(--lavender) 70%, white) 50%, transparent 100%),
        radial-gradient(1.5px 1.5px at 28% 70%, color-mix(in oklab, var(--cyan) 70%, white) 50%, transparent 100%),
        radial-gradient(2px 2px at 55% 35%, color-mix(in oklab, var(--peach) 70%, white) 50%, transparent 100%),
        radial-gradient(1.5px 1.5px at 72% 80%, color-mix(in oklab, var(--lavender) 60%, white) 50%, transparent 100%),
        radial-gradient(2px 2px at 88% 18%, color-mix(in oklab, var(--cyan) 60%, white) 50%, transparent 100%),
        radial-gradient(1.5px 1.5px at 40% 92%, color-mix(in oklab, var(--peach) 60%, white) 50%, transparent 100%),
        radial-gradient(2px 2px at 65% 5%, color-mix(in oklab, var(--lavender) 65%, white) 50%, transparent 100%);
    background-size: 100% 110%;
    background-repeat: no-repeat;
    opacity: 0.5;
    animation: dustRise 26s linear infinite;
    will-change: transform;
}
.ambient-dust::after {
    animation-duration: 38s;
    animation-delay: -10s;
    opacity: 0.35;
    filter: blur(0.5px);
    transform: scale(1.3);
}
[data-theme="dark"] .ambient-dust::before { opacity: 0.65; }
[data-theme="dark"] .ambient-dust::after { opacity: 0.5; }
@media (prefers-reduced-motion: reduce) {
    .ambient-dust::before, .ambient-dust::after { animation: none; }
}

/* Drifting branded gradient orbs (replace the old paint-splash). */
.paint-splash {
    position: fixed;
    border-radius: 50%;
    filter: blur(80px);
    pointer-events: none;
    z-index: -1;
    animation: float 22s ease-in-out infinite;
    will-change: transform;
}
.splash-1 { width: 460px; height: 460px; background: var(--lavender); top: 6%;  left: -10%; opacity: 0.22; filter: blur(110px); }
.splash-2 { width: 380px; height: 380px; background: var(--cyan);     top: 52%; right: -8%; opacity: 0.20; filter: blur(110px); animation-delay: -6s; }
.splash-3 { width: 300px; height: 300px; background: var(--peach);    bottom: 6%; left: 26%; opacity: 0.22; filter: blur(100px); animation-delay: -12s; }
.splash-4 { width: 260px; height: 260px; background: var(--lavender); top: 30%; right: 20%; opacity: 0.14; filter: blur(100px); animation-delay: -18s; }
[data-theme="dark"] .splash-1 { opacity: 0.32; }
[data-theme="dark"] .splash-2 { opacity: 0.30; }
[data-theme="dark"] .splash-3 { opacity: 0.30; }
[data-theme="dark"] .splash-4 { opacity: 0.22; }
@media (prefers-reduced-motion: reduce) {
    .paint-splash { animation: none; }
}

/* Cursor glow (motion.js opts in for fine-pointer non-reduced-motion users). */
.cursor-glow {
    position: fixed;
    top: 0; left: 0;
    width: 280px; height: 280px;
    margin: -140px 0 0 -140px;
    pointer-events: none;
    z-index: 50;
    background: radial-gradient(circle, color-mix(in oklab, var(--lavender) 30%, transparent), transparent 70%);
    border-radius: 50%;
    mix-blend-mode: soft-light;
    will-change: transform;
}
@media (prefers-reduced-motion: reduce) { .cursor-glow { display: none; } }