/* ===========================================================================
   canvas.css — the I'n'I canvas system (+ development comparison modes)

   PRINCIPLE
   Warm Mineral is the canvas. Atmospheric light appears only when the
   story calls for depth.

   WORKING SYSTEM
   • #F4F2EC Warm Mineral, flat, everywhere. This now lives in styles.css
     as --canvas, so the site is Warm Mineral with or without this file.
   • One dimensional moment: directional light around the homepage bridge.
     It is authored for that hero alone. It is not a reusable treatment and
     must not be applied to other sections; any future atmospheric moment
     is decided and composed individually.

   COMPARISON MODES (html[data-canvas], set by canvas.js)
     directional  working default — flat Warm Mineral + the homepage hero field
     flat         flat Warm Mineral only — the control for judging whether a
                  dimensional treatment is actually adding value
     original     reference only — the previous #F6F1E7 canvas
     ambient      reference only — the earlier global light experiment

   To remove the comparison tooling later: delete the "reference" and
   "switch" blocks below and the switch code in canvas.js, keeping the
   directional block.
   =========================================================================== */


/* ===========================================================================
   DIRECTIONAL — homepage hero only (working default)

   Two very large radial fields composed around the bridge, both reaching
   well past the viewport:
     light  #FAF8F3 — opens toward the upper right, the direction the bridge
                      is drawn and rises, centred far outside the viewport
     mineral #EEEAE2 — a light settling around the lower, earlier part of
                      the bridge (the first tower and its foundation), held
                      at 0.65 so it reads as mineral rather than weight
   Between them the canvas simply stays #F4F2EC.

   Geometry is measured from the bridge itself (canvas.js writes the --dir-*
   custom properties from .hero-motif's position and size). The px
   fallbacks are the 1440px desktop values for the instant before the
   script measures. The layer is taller than both fields, so every gradient
   is fully transparent by its bottom edge: no seam into the flat canvas.
   The bridge image, its mask, opacity, scale, position and animation are
   not touched. Only the homepage has .hero .hero-motif, so on every other
   page this mode is identical to flat.
   =========================================================================== */

html[data-canvas="directional"] {
  --directional-light: 1;         /* peak strength of the light field   */
  --directional-deep: 0.65;       /* peak strength of the mineral field */
}

html[data-canvas="directional"] body.has-hero-field::before {
  content: "";
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: var(--dir-h, 1632px);
  z-index: -1;
  pointer-events: none;
  background-image:
    radial-gradient(var(--dir-lrx, 2070px) var(--dir-lry, 1490px) at var(--dir-lcx, 1755px) var(--dir-lcy, -415px),
      rgb(250 248 243 / calc(var(--directional-light) * 1.000)) 0%,
      rgb(250 248 243 / calc(var(--directional-light) * 0.976)) 10%,
      rgb(250 248 243 / calc(var(--directional-light) * 0.905)) 20%,
      rgb(250 248 243 / calc(var(--directional-light) * 0.794)) 30%,
      rgb(250 248 243 / calc(var(--directional-light) * 0.655)) 40%,
      rgb(250 248 243 / calc(var(--directional-light) * 0.500)) 50%,
      rgb(250 248 243 / calc(var(--directional-light) * 0.345)) 60%,
      rgb(250 248 243 / calc(var(--directional-light) * 0.206)) 70%,
      rgb(250 248 243 / calc(var(--directional-light) * 0.095)) 80%,
      rgb(250 248 243 / calc(var(--directional-light) * 0.024)) 90%,
      rgb(250 248 243 / calc(var(--directional-light) * 0.000)) 100%),
    radial-gradient(var(--dir-drx, 1368px) var(--dir-dry, 821px) at var(--dir-dcx, 450px) var(--dir-dcy, 809px),
      rgb(238 234 226 / calc(var(--directional-deep) * 1.000)) 0%,
      rgb(238 234 226 / calc(var(--directional-deep) * 0.976)) 10%,
      rgb(238 234 226 / calc(var(--directional-deep) * 0.905)) 20%,
      rgb(238 234 226 / calc(var(--directional-deep) * 0.794)) 30%,
      rgb(238 234 226 / calc(var(--directional-deep) * 0.655)) 40%,
      rgb(238 234 226 / calc(var(--directional-deep) * 0.500)) 50%,
      rgb(238 234 226 / calc(var(--directional-deep) * 0.345)) 60%,
      rgb(238 234 226 / calc(var(--directional-deep) * 0.206)) 70%,
      rgb(238 234 226 / calc(var(--directional-deep) * 0.095)) 80%,
      rgb(238 234 226 / calc(var(--directional-deep) * 0.024)) 90%,
      rgb(238 234 226 / calc(var(--directional-deep) * 0.000)) 100%);
  background-repeat: no-repeat;
}


/* ===========================================================================
   REFERENCE — original #F6F1E7 canvas (not the design direction)
   Puts the previous cream back on the four surfaces that were acting as
   the page canvas.
   =========================================================================== */

html[data-canvas="original"] body {
  background-color: #f6f1e7;
}

html[data-canvas="original"] header {
  background: rgba(246, 241, 231, 0.92);
}

html[data-canvas="original"] .has-dropdown .dropdown {
  background: #f6f1e7;
}

@media (max-width: 899px) {
  html[data-canvas="original"] .nav-right {
    background: #f6f1e7;
  }
}


/* ===========================================================================
   REFERENCE — global ambient light (not the design direction)
   Warm Mineral with a soft light from beyond the upper right and a warmer
   mineral from the lower left, fixed to the viewport. Kept for comparison.
   =========================================================================== */

html[data-canvas="ambient"] {
  --ambient-light: 0.95;
  --ambient-deep: 0.80;
}

html[data-canvas="ambient"] body {
  background-image:
    radial-gradient(ellipse 165vmax 125vmax at 120% -32%,
      rgb(249 246 239 / calc(var(--ambient-light) * 1.000)) 0%,
      rgb(249 246 239 / calc(var(--ambient-light) * 0.976)) 10%,
      rgb(249 246 239 / calc(var(--ambient-light) * 0.905)) 20%,
      rgb(249 246 239 / calc(var(--ambient-light) * 0.794)) 30%,
      rgb(249 246 239 / calc(var(--ambient-light) * 0.655)) 40%,
      rgb(249 246 239 / calc(var(--ambient-light) * 0.500)) 50%,
      rgb(249 246 239 / calc(var(--ambient-light) * 0.345)) 60%,
      rgb(249 246 239 / calc(var(--ambient-light) * 0.206)) 70%,
      rgb(249 246 239 / calc(var(--ambient-light) * 0.095)) 80%,
      rgb(249 246 239 / calc(var(--ambient-light) * 0.024)) 90%,
      rgb(249 246 239 / calc(var(--ambient-light) * 0.000)) 100%),
    radial-gradient(ellipse 135vmax 105vmax at -26% 130%,
      rgb(239 236 228 / calc(var(--ambient-deep) * 1.000)) 0%,
      rgb(239 236 228 / calc(var(--ambient-deep) * 0.976)) 10%,
      rgb(239 236 228 / calc(var(--ambient-deep) * 0.905)) 20%,
      rgb(239 236 228 / calc(var(--ambient-deep) * 0.794)) 30%,
      rgb(239 236 228 / calc(var(--ambient-deep) * 0.655)) 40%,
      rgb(239 236 228 / calc(var(--ambient-deep) * 0.500)) 50%,
      rgb(239 236 228 / calc(var(--ambient-deep) * 0.345)) 60%,
      rgb(239 236 228 / calc(var(--ambient-deep) * 0.206)) 70%,
      rgb(239 236 228 / calc(var(--ambient-deep) * 0.095)) 80%,
      rgb(239 236 228 / calc(var(--ambient-deep) * 0.024)) 90%,
      rgb(239 236 228 / calc(var(--ambient-deep) * 0.000)) 100%);
  background-attachment: fixed;
  background-repeat: no-repeat;
}


/* ---- Comparison switch (only shown with ?compare in the URL) ------------ */

.canvas-switch {
  position: fixed;
  left: 16px;
  bottom: 16px;
  z-index: 1000;
  display: flex;
  gap: 2px;
  padding: 3px;
  border-radius: 999px;
  background: rgba(36, 31, 24, 0.82);
  font: 500 11px/1 'IBM Plex Mono', 'SF Mono', Menlo, Consolas, monospace;
  letter-spacing: 0.02em;
}
.canvas-switch button {
  appearance: none;
  border: 0;
  margin: 0;
  padding: 7px 11px;
  border-radius: 999px;
  background: transparent;
  color: rgba(244, 242, 236, 0.7);
  font: inherit;
  cursor: pointer;
}
.canvas-switch button[aria-pressed="true"] {
  background: #F4F2EC;
  color: #241f18;
}
.canvas-switch-toast {
  position: fixed;
  left: 16px;
  bottom: 16px;
  z-index: 1000;
  padding: 8px 12px;
  border-radius: 999px;
  background: rgba(36, 31, 24, 0.82);
  color: #F4F2EC;
  font: 500 11px/1 'IBM Plex Mono', 'SF Mono', Menlo, Consolas, monospace;
  pointer-events: none;
  transition: opacity 0.3s ease;
}