/* SONDER · base
   Reset, typography, page chrome, film grain, utilities. */

* { box-sizing: border-box; }
html, body { margin: 0; padding: 0; }
html { scroll-behavior: smooth; }

body {
  background: var(--bg);
  color: var(--fg);
  font-family: var(--serif);
  font-size: 18px;
  line-height: 1.45;
  letter-spacing: 0.005em;
  -webkit-font-smoothing: antialiased;
  overflow-x: hidden;
}

a { color: inherit; text-decoration: none; transition: color var(--t-base), opacity var(--t-base); }
img, video { display: block; max-width: 100%; height: auto; }
button { font: inherit; cursor: pointer; border: none; background: none; color: inherit; padding: 0; }
::selection { background: var(--accent); color: var(--bg); }
:focus-visible { outline: 2px solid var(--accent); outline-offset: 3px; }

/* During a language reload we momentarily hide the body so the user never
   sees the browser jump-and-scroll its way back to where they were — see the
   inline bootstrap in index.html (sets html.is-restoring-scroll) and the
   matching reveal in main.js (boot()). */
html.is-restoring-scroll body { visibility: hidden; }

/* ── film grain ─────────────────────────────────── */
body::before {
  content: "";
  position: fixed; inset: 0; z-index: 100;
  pointer-events: none; opacity: 0.06; mix-blend-mode: overlay;
  background-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 240 240'><filter id='n'><feTurbulence type='fractalNoise' baseFrequency='0.9' numOctaves='2' stitchTiles='stitch'/><feColorMatrix values='0 0 0 0 1  0 0 0 0 1  0 0 0 0 1  0 0 0 1 0'/></filter><rect width='100%' height='100%' filter='url(%23n)'/></svg>");
  background-size: 220px;
  animation: grain 8s steps(8) infinite;
}
@keyframes grain {
  0%,100% { transform: translate(0,0); }
  20% { transform: translate(-2%, 1%); }
  40% { transform: translate(2%, -2%); }
  60% { transform: translate(-1%, 2%); }
  80% { transform: translate(1%, -1%); }
}

/* ── candle-mood vignette + flicker ──────────────
   Only present when html[data-mood="candle"]. A radial warm
   glow centered upper-middle (the candle), darker corners,
   and a real flicker on opacity AND a subtle hue-shift so
   the room feels lit by a single wavering flame. */
body::after {
  content: "";
  position: fixed; inset: 0; z-index: 99;
  pointer-events: none;
  opacity: 0;
  transition: opacity 600ms ease;
  background:
    radial-gradient(ellipse 70% 55% at 50% 28%,
      rgba(255, 170, 80, 0.28) 0%,
      rgba(255, 150, 60, 0.14) 22%,
      rgba(0, 0, 0, 0) 50%),
    radial-gradient(ellipse 130% 110% at 50% 60%,
      rgba(0, 0, 0, 0) 35%,
      rgba(0, 0, 0, 0.55) 95%);
}
html[data-mood="candle"] body::after {
  opacity: 1;
  animation: candle-flicker 3.4s ease-in-out infinite;
  will-change: opacity, filter;
}
@keyframes candle-flicker {
  0%   { opacity: 1.00; filter: brightness(1); }
  8%   { opacity: 0.86; filter: brightness(0.92); }   /* draft 1 */
  14%  { opacity: 1.04; filter: brightness(1.06); }   /* recover, brighter */
  22%  { opacity: 0.95; filter: brightness(1); }
  35%  { opacity: 1.00; filter: brightness(1.02); }
  46%  { opacity: 0.78; filter: brightness(0.86); }   /* big draft */
  52%  { opacity: 1.06; filter: brightness(1.08); }   /* whoosh back */
  64%  { opacity: 0.92; filter: brightness(0.96); }
  72%  { opacity: 1.00; filter: brightness(1); }
  84%  { opacity: 0.88; filter: brightness(0.94); }
  92%  { opacity: 1.02; filter: brightness(1.03); }
  100% { opacity: 1.00; filter: brightness(1); }
}
@media (prefers-reduced-motion: reduce) {
  html[data-mood="candle"] body::after { animation: none; }
}

/* ── type system ────────────────────────────────── */

/* HEADING — Cormorant italic. Editorial, quiet. */
h1, h2, h3, h4, .h-serif {
  font-family: var(--serif);
  font-weight: 400;
  margin: 0;
  line-height: 1.05;
  letter-spacing: -0.01em;
}
h1 { font-size: clamp(2.4rem, 5vw, 4.4rem); }
h2 { font-size: clamp(1.8rem, 3.6vw, 3.2rem); }
h3 { font-size: clamp(1.3rem, 2vw, 1.8rem); }

em { font-style: italic; }

/* utility */
.mute { color: var(--fg-mute); }
.sr-only { position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px; overflow: hidden; clip: rect(0,0,0,0); white-space: nowrap; border: 0; }

/* ── layout ─────────────────────────────────────── */

.section {
  padding: clamp(5rem, 9vw, 8rem) var(--pad);
  position: relative;
}
.section + .section { border-top: 1px solid var(--rule); }
.container { max-width: var(--max-w); margin: 0 auto; }

/* ── reveal-on-scroll ───────────────────────────── */
.reveal { opacity: 0; transform: translateY(20px); transition: opacity 0.9s ease, transform 0.9s cubic-bezier(0.2,0.8,0.2,1); }
.reveal.in { opacity: 1; transform: translateY(0); }
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { animation-duration: 0s !important; transition-duration: 0s !important; }
  .reveal { opacity: 1; transform: none; }
}

/* ── hero animations ─────────────────────────────
   Used by hero.jsx. Kept in CSS rather than inline <style> so React
   doesn't re-render the keyframe block on every paint. */
@keyframes duoLabelIn {
  from { opacity: 0; transform: translate(-50%, 6px); }
  to   { opacity: 1; transform: translate(-50%, 0); }
}
@keyframes sonderDefIn {
  from { opacity: 0; transform: translate(-50%, -8px); }
  to   { opacity: 1; transform: translate(-50%, 0); }
}
@keyframes heroScrollHintIn {
  from { opacity: 0; }
  to   { opacity: 1; }
}