/* ==========================================================================
   TAPE ATMOSPHERE — A + F + G
   Subtle background-only inflections inspired by the cassette palette.
   No labels, no stripes — just temperature, ambient light, and grain.
   ========================================================================== */

:root {
  /* cassette palette tokens (used by atmosphere only) */
  --tape-cyan:  oklch(0.78 0.07 215);
  --tape-teal:  oklch(0.46 0.06 220);
  --tape-burnt: oklch(0.62 0.16 45);
  --tape-cream: oklch(0.93 0.04 80);
}

/* ============================================================
   A · TEMPERATURE DRIFT BETWEEN SECTIONS
   Each section gets a unique low-opacity wash from the cassette
   palette. The site subtly warms/cools as you scroll —
   like passing through different parts of a tape.
   ============================================================ */

/* dark · work — cool teal × warm burnt */
#work {
  background:
    radial-gradient(80% 60% at 100% 0%,  oklch(0.62 0.16 45 / 0.05), transparent 55%),
    radial-gradient(70% 55% at 0% 100%,  oklch(0.46 0.06 220 / 0.08), transparent 60%),
    var(--bg);
}

/* dark · process — burnt morning glow */
#process {
  background:
    radial-gradient(70% 50% at 0% 0%,    oklch(0.62 0.16 45 / 0.06), transparent 55%),
    radial-gradient(60% 50% at 100% 100%, oklch(0.46 0.06 220 / 0.05), transparent 60%),
    var(--bg);
  border-top: 1px solid var(--border-soft);
}

/* dark · contact — deep warm */
#contact {
  background:
    radial-gradient(60% 50% at 50% 0%,   oklch(0.62 0.16 45 / 0.08), transparent 60%),
    radial-gradient(80% 50% at 0% 100%,  oklch(0.46 0.06 220 / 0.04), transparent 60%),
    var(--bg);
  border-top: 1px solid var(--border-soft);
}

/* light · services — warm cream × cool whisper */
#services {
  background:
    radial-gradient(80% 60% at 100% 0%,  oklch(0.93 0.04 80 / 0.55), transparent 55%),
    radial-gradient(60% 50% at 0% 100%,  oklch(0.78 0.07 215 / 0.06), transparent 60%),
    var(--bg);
}

/* light · trust — cool cream */
.trust {
  background:
    radial-gradient(60% 50% at 0% 100%,  oklch(0.78 0.07 215 / 0.07), transparent 60%),
    radial-gradient(50% 40% at 100% 0%,  oklch(0.93 0.04 80 / 0.45), transparent 55%),
    var(--bg);
  border-top: 1px solid var(--border-soft);
}

/* light · about — cyan-leaning */
#about {
  background:
    radial-gradient(70% 50% at 100% 0%,  oklch(0.78 0.07 215 / 0.06), transparent 60%),
    radial-gradient(60% 50% at 0% 100%,  oklch(0.93 0.04 80 / 0.45), transparent 60%),
    var(--bg);
  border-top: 1px solid var(--border-soft);
}

/* ============================================================
   G · PAPER GRAIN ON LIGHT SECTIONS
   Subtle dotted texture across the cream-mode sections —
   evokes the matte feel of a cassette label paper.
   Two overlapping dot grids at different scales create an
   organic, non-mechanical noise.
   ============================================================ */

[data-mode="light"] {
  position: relative;
  isolation: isolate;
}
[data-mode="light"] > .wrap {
  position: relative;
  z-index: 2;
}
[data-mode="light"]::after {
  content: "";
  position: absolute;
  inset: 0;
  background-image:
    radial-gradient(oklch(0.18 0.04 60 / 0.055) 0.85px, transparent 1.3px),
    radial-gradient(oklch(0.18 0.04 60 / 0.035) 0.5px, transparent 0.9px);
  background-size: 4px 4px, 7px 7px;
  background-position: 0 0, 2px 1px;
  pointer-events: none;
  z-index: 1;
  mix-blend-mode: multiply;
  opacity: 0.7;
}

/* respect reduced motion / minimal mode (no-op for grain — it's static) */