/* ══════════════════════════════════════════════════════════════
   base.css — design tokens, reset, stage geometry
   Every colour, light value, shadow depth and timing in the piece
   resolves back to a custom property declared here.
   ══════════════════════════════════════════════════════════════ */

:root {
  /* ── Wood palette: aged oak, warm end ── */
  --oak-700: #5a3617;
  --oak-600: #6f4520;
  --oak-500: #855429;
  --oak-400: #9b6634;
  --oak-300: #b07c46;

  /* ── Bake palette: crust, caramelisation, filling ── */
  --crust-pale: #dcae68;
  --crust-mid: #bd7f33;
  --crust-deep: #965b19;
  --crust-burn: #70400f;
  --crust-char: #452508;
  /* Cooked fruit, not jam: desaturated and much darker than raw
     red. The bright end only appears where light actually hits. */
  --filling-hi: #8f2f1c;
  --filling-mid: #5e1a11;
  --filling-lo: #300b08;

  /* ── Ceramic + metal ── */
  /* Cream, not white — glazed china in warm light never reads
     neutral, and grey-white ceramics are what make a warm scene
     look computer-generated. */
  --china-hi: #fdf6e4;
  --china: #f0e4c9;
  --china-lo: #cbb999;
  --china-sh: #9b8869;
  --tea-hi: #d3873f;
  --tea: #8b4a17;
  --tea-lo: #48210a;
  --silver-hi: #ffffff;
  --silver: #c9ccd2;
  --silver-lo: #7c828c;
  --silver-sh: #4a4f58;

  /* ── Linen ── */
  --linen-hi: #f6ecd9;
  --linen: #e2d3b8;
  --linen-lo: #bfad8c;
  --linen-sh: #91805f;

  /* ── Light rig ─────────────────────────────────────────────
     --sun-angle drives every shadow direction and is animated
     by the morning-sun keyframes; JS nudges --mx/--my for
     parallax and steam drift. All downstream maths reads these. */
  --sun-angle: 128deg; /* direction shadows are cast toward */
  --sun-strength: 1; /* 0–1, dimmed by passing clouds     */
  --shadow-hue: 24 46% 10%;

  /* ── Shadow depth scale ── */
  --sh-close: 0 3px 8px hsl(var(--shadow-hue) / 0.38);

  /* ── Motion ── */
  --t-steam: 7s;
  --t-sun: 90s;
  --t-cloud: 23s;
  --ease-organic: cubic-bezier(0.36, 0.06, 0.28, 0.98);
  --ease-soft: cubic-bezier(0.42, 0, 0.36, 1);

  /* Frame width, declared once. The frame is aspect-locked, so
     any size derived from the artwork (rather than the viewport)
     must reference this or it breaks when letterboxed. */
  --frame-w: min(96vw, 148vh);

  /* ── Pointer, written by JS; harmless defaults if JS is off ── */
  --mx: 0; /* −1 … 1 */
  --my: 0; /* −1 … 1 */
  --drift: 0; /* steam push, px */
}

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

html,
body {
  height: 100%;
  background: #120b06;
  overflow: hidden;
}

body {
  display: grid;
  place-items: center;
  font-family: "Iowan Old Style", "Palatino Linotype", Georgia, serif;
}

.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;
}

/* ── Frame: fixed 3:2 editorial crop, scaled to viewport ── */
.frame {
  position: relative;
  width: var(--frame-w);
  aspect-ratio: 3 / 2;
  overflow: hidden;
  border-radius: 4px;
  box-shadow:
    0 40px 120px rgba(0, 0, 0, 0.75),
    0 0 0 1px rgba(255, 214, 160, 0.07);
  isolation: isolate;
}

/* ── Scene: the whole world, parallax-shifted as one ── */
.scene {
  position: absolute;
  inset: -3%;
  transform: translate3d(calc(var(--mx) * -10px), calc(var(--my) * -10px), 0)
    scale(1.012);
  transition: transform 0.9s var(--ease-soft);
  will-change: transform;
}

/* Objects sit on the stage; it parallaxes a touch harder than the
   table beneath it, which reads as real height above the wood. */
/* The stage is scaled down inside the frame so the fuller scene
   has breathing room at the edges. Objects position themselves in
   stage percentages, so one scale here reflows everything without
   touching a single object's coordinates. */
.stage {
  position: absolute;
  inset: 0;
  transform: translate3d(calc(var(--mx) * -7px), calc(var(--my) * -7px), 0)
    scale(0.82);
  transition: transform 0.9s var(--ease-soft);
  will-change: transform;
}

.signature {
  position: absolute;
  right: 1.6%;
  bottom: 2.4%;
  z-index: 40;
  font-size: clamp(9px, 0.95vw, 14px);
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: rgba(255, 232, 200, 0.34);
  text-shadow: 0 1px 3px rgba(0, 0, 0, 0.7);
  pointer-events: none;
}
.signature em {
  font-style: italic;
  letter-spacing: 0.06em;
  opacity: 0.8;
}

@media (prefers-reduced-motion: reduce) {
  *,
  *::before,
  *::after {
    animation-duration: 0.001ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.001ms !important;
  }
}