/* ═══════════════════════════════════════════════════════════════════
   THE SKY CLOCK
   One site, one scene, one number. --night runs from 0 at full day to
   1 at full night, set by the visitor's own sun (see sky-clock.js), and
   every colour on every page is a blend of its day value and its night
   value at that number. Nothing switches; everything drifts.

   The pairs are --d-* (day) and --n-* (night). A page or study sheet
   may override a pair on html[data-sect]; the blend below reads it.
   data-sect still exists, set to whichever half the number is in, so
   the few things that cannot blend (a cursor, a word) can still choose.

   Linked last on every page, after crossing-nav.css and any studies.
   ═══════════════════════════════════════════════════════════════ */
@property --night { syntax:'<number>'; inherits:true; initial-value:0; }

html { transition:--night 9s linear; }
html.sky-instant { transition:none; }

/* ── the pairs: the site's own day and its own night. No gold anywhere: the door and
   the lamps are umber by day and pale umber and bone by night, light without a colour
   outside the five. On plain html so a
   page or study may override a pair on html[data-sect] and win ── */
html {
  /* A sky that is neither light nor dark reads with nothing, so the colours do not
     drift across the whole of twilight. Surfaces (sky, panels, planks) cross in the
     middle band of the number, a quarter to six tenths, the way dusk itself arrives in
     a few minutes once it decides to. Type does not crossfade at all: it holds its day
     colour until the surfaces pass the point where dark and light read equally, then
     steps across in a few hundredths. --day-k and --type-k are the two curves as
     numbers (1 by day, 0 by night); the -pct twins are the same as percentages. */
  --day-k:clamp(0, (0.6 - var(--night)) / 0.35, 1);
  --type-k:clamp(0, (0.435 - var(--night)) * 50, 1);
  --day-pct:calc(var(--day-k) * 100%);
  --type-pct:calc(var(--type-k) * 100%);
  /* type that sits on the sky itself (masthead, hero) steps earlier when the home page's
     day loop has already deepened the sky; --deep is that loop's own number, 0 elsewhere.
     Lavender is a mid tone and reads on neither half of a crossing, so the italic and the
     masthead's Saya step to white at the very start of it. */
  --sky-type-k:clamp(0, (0.435 - 0.15 * var(--dd, 0) - var(--night)) * 50, 1);
  --sky-type-pct:calc(var(--sky-type-k) * 100%);
  --em-k:clamp(0, (0.31 + 0.3 * var(--dd, 0) - var(--night)) * 50, 1);
  --em-pct:calc(var(--em-k) * 100%);
  /* Inside the band the type keeps one step ahead of the surface behind it: the dark
     colours lean toward black as the surface darkens, and the light colours arrive
     nearly white and relax to their night values as the surface settles. Two helpers
     take any day or night colour and lean it. */
  --lean-dark:calc((1 - var(--day-k)) * 100%);
  --lean-light:calc(var(--day-k) * 100%);

  --d-ink:#37312C;        --n-ink:#EFEAE3;
  --d-body-ink:#574F45;   --n-body-ink:#C9BFB2;
  --d-dim:#5A5248;        --n-dim:#B3A99B;
  --d-accent:#6847E8;     --n-accent:#A899FF;
  --d-accent-text:#5535C9;--n-accent-text:#A899FF;
  --d-accent-ink:#FCFBFF; --n-accent-ink:#17130F;
  --d-glow:#8A6FFF;       --n-glow:#B9A6FF;
  --d-panel:rgba(255,255,255,.86); --n-panel:rgba(32,27,24,.86);
  --d-panel-line:#D8CFE8; --n-panel-line:#463D35;
  --d-hair:#D8CFE8;       --n-hair:#463D35;
  --d-door:#8A6524;       --n-door:#C9BCA6;
  --d-door-text:#6E4F1C;  --n-door-text:#D4C8B4;
  --d-door-light:#F4D9A0; --n-door-light:#EDE8DF;
  --d-door-ink:#FCFBFF;   --n-door-ink:#17130F;
  --d-sky-a:#C9BEE8;      --n-sky-a:#0C0A0F;
  --d-sky-b:#DFD7EF;      --n-sky-b:#131110;
  --d-sky-c:#F1EDF7;      --n-sky-c:#1C1917;
  --d-room-a:#F7F4FA;     --n-room-a:#191512;
  --d-room-b:#F1EDF7;     --n-room-b:#221C17;
  --d-room-c:#E4DDF0;     --n-room-c:#2B231C;
  --d-star:#7a6da8;       --n-star:#EFEAE3;
  --d-gate-plaster:#F4F1F9; --n-gate-plaster:#37312C;
  --d-plank:#C9AE8A;      --n-plank:#3A322A;
  --d-plank-2:#BFA27C;    --n-plank-2:#332C24;
  --d-plank-gap:#A98F6C;  --n-plank-gap:#211C17;
  --d-rail:#8f97a1;       --n-rail:#6e7681;
  --d-vellum:#EFEAF8;     --n-vellum:#272220;
  --d-shard:#FF9A38;      --n-shard:#EDE8DF;
  --d-shard-mid:#FFD98A;  --n-shard-mid:#FFFFFF;
  --d-shard-body:#FF8A1E; --n-shard-body:#D4C3A8;
}

/* ── the blend ── doubled attribute so it outranks every page's own
   sect blocks without touching them */
html[data-sect][data-sect] {
  --ink:color-mix(in oklab, color-mix(in oklab, #000 var(--lean-dark), var(--d-ink)) var(--type-pct), color-mix(in oklab, #FFF var(--lean-light), var(--n-ink)));
  --body-ink:color-mix(in oklab, color-mix(in oklab, #000 var(--lean-dark), var(--d-body-ink)) var(--type-pct), color-mix(in oklab, #FFF var(--lean-light), var(--n-body-ink)));
  --dim:color-mix(in oklab, color-mix(in oklab, #000 var(--lean-dark), var(--d-dim)) var(--type-pct), color-mix(in oklab, #FFF var(--lean-light), var(--n-dim)));
  --accent:color-mix(in oklab, var(--d-accent) var(--day-pct), var(--n-accent));
  --accent-text:color-mix(in oklab, color-mix(in oklab, #000 var(--lean-dark), var(--d-accent-text)) var(--type-pct), color-mix(in oklab, #FFF var(--lean-light), var(--n-accent-text)));
  --accent-ink:color-mix(in oklab, var(--d-accent-ink) var(--day-pct), var(--n-accent-ink));
  --glow:color-mix(in oklab, var(--d-glow) var(--day-pct), var(--n-glow));
  --panel:color-mix(in oklab, var(--d-panel) var(--day-pct), var(--n-panel));
  --panel-line:color-mix(in oklab, var(--d-panel-line) var(--day-pct), var(--n-panel-line));
  --hair:color-mix(in oklab, var(--d-hair) var(--day-pct), var(--n-hair));
  --door:color-mix(in oklab, var(--d-door) var(--day-pct), var(--n-door));
  --door-text:color-mix(in oklab, color-mix(in oklab, #000 var(--lean-dark), var(--d-door-text)) var(--type-pct), color-mix(in oklab, #FFF var(--lean-light), var(--n-door-text)));
  --door-light:color-mix(in oklab, var(--d-door-light) var(--day-pct), var(--n-door-light));
  --door-ink:color-mix(in oklab, var(--d-door-ink) var(--type-pct), var(--n-door-ink));
  --sky-a:color-mix(in oklab, var(--d-sky-a) var(--day-pct), var(--n-sky-a));
  --sky-b:color-mix(in oklab, var(--d-sky-b) var(--day-pct), var(--n-sky-b));
  --sky-c:color-mix(in oklab, var(--d-sky-c) var(--day-pct), var(--n-sky-c));
  --room-a:color-mix(in oklab, var(--d-room-a) var(--day-pct), var(--n-room-a));
  --room-b:color-mix(in oklab, var(--d-room-b) var(--day-pct), var(--n-room-b));
  --room-c:color-mix(in oklab, var(--d-room-c) var(--day-pct), var(--n-room-c));
  --star:color-mix(in oklab, var(--d-star) var(--type-pct), var(--n-star));
  --gate-plaster:color-mix(in oklab, var(--d-gate-plaster) var(--day-pct), var(--n-gate-plaster));
  --plank:color-mix(in oklab, var(--d-plank) var(--day-pct), var(--n-plank));
  --plank-2:color-mix(in oklab, var(--d-plank-2) var(--day-pct), var(--n-plank-2));
  --plank-gap:color-mix(in oklab, var(--d-plank-gap) var(--day-pct), var(--n-plank-gap));
  --rail:color-mix(in oklab, var(--d-rail) var(--day-pct), var(--n-rail));
  --vellum:color-mix(in oklab, var(--d-vellum) var(--day-pct), var(--n-vellum));
  --shard:color-mix(in oklab, var(--d-shard) var(--day-pct), var(--n-shard));
  --shard-mid:color-mix(in oklab, var(--d-shard-mid) var(--day-pct), var(--n-shard-mid));
  --shard-body:color-mix(in oklab, var(--d-shard-body) var(--day-pct), var(--n-shard-body));
  --link-ink:color-mix(in oklab, color-mix(in oklab, #000 var(--lean-dark), var(--link-day)) var(--type-pct), color-mix(in oklab, #FFF var(--lean-light), var(--link-night)));
}
/* the older pages' own names follow the blend too; this sits under
   crossing-extras.css's aliases on purpose and over ephemeris.css */
[data-sect] {
  --violet:var(--accent-text); --lilac:var(--glow); --dusk:var(--accent-text);
  --stone:var(--dim); --parchment:var(--sky-c);
  --muted:color-mix(in srgb, var(--ink) 62%, transparent);
}

/* ── the masthead toggle rests: the sky is no longer a choice ── */
.topbar .sect { display:none; }

/* ── marks that used to flip now turn with the number ── */
.topbar .mark, .mark {
  filter:invert(calc(1 - var(--sky-type-k))) hue-rotate(calc((1 - var(--sky-type-k)) * 180deg));
}
html[data-sect][data-sect] .panel::before {
  opacity:calc(.078 + var(--day-k) * .052); filter:invert(calc(1 - var(--day-k)));
}
html[data-sect][data-sect] .band--fresco::before {
  opacity:calc(.09 + var(--day-k) * .04); filter:invert(calc(1 - var(--day-k)));
}

/* ═══ THE HOME SCENE ═══ the lake, the deck and the boat, always.
   The desert sleeps. Its sky layers stay, faded by the number. ═══ */
html[data-sect][data-sect] .water, html[data-sect][data-sect] .deck,
html[data-sect][data-sect] .rails, html[data-sect][data-sect] .boat { display:block; }
html[data-sect][data-sect] .dunes, html[data-sect][data-sect] .dunes-fore,
html[data-sect][data-sect] .deity, html[data-sect][data-sect] .sand-wind,
html[data-sect][data-sect] .tl-suns, html[data-sect][data-sect] .life-patch,
html[data-sect][data-sect] .epoch { display:none; }
html[data-sect][data-sect] .water-mirror { filter:url(#waterRipple2) brightness(calc(.95 - var(--night) * .15)); }
html[data-sect][data-sect] .water-mirror circle { opacity:calc(.3 + var(--night) * .7); }
html[data-sect][data-sect] .sky circle { opacity:calc(.3 + var(--night) * .7); }
html[data-sect][data-sect] .sky svg .const-lines { opacity:calc(.07 + var(--night) * .02); }
html[data-sect][data-sect] .sky svg g.constellation:hover .const-lines,
html[data-sect][data-sect] .sky svg g.constellation.is-drawn .const-lines { opacity:.45; }
html[data-sect][data-sect] .boat-silhouette { fill:color-mix(in oklab, #3B342C var(--day-pct), #0E0C0A); }
html[data-sect][data-sect] .arm path { stroke:color-mix(in oklab, #3B342C var(--day-pct), #0E0C0A); }
html[data-sect][data-sect] .rails .glint { opacity:calc(.14 + var(--night) * .21); }
html[data-sect][data-sect] .scene::after {
  content:''; position:absolute; inset:0; pointer-events:none;
  background:linear-gradient(180deg, transparent 40%, rgba(250,248,245,.35) 100%);
  opacity:calc(1 - var(--night));
}
html[data-sect][data-sect] .sunset { display:block;
  opacity:calc(clamp(0, (var(--lit) - .45) * 2, 1) * (1 - var(--night))); }
html[data-sect][data-sect] .shore-moon { opacity:calc(.5 + var(--night) * .5); }
html[data-sect][data-sect] .shore-moon::after { opacity:calc(.35 + var(--night) * .65); }

/* ═══ THE ASK ═══ one line, once, near the foot of the page ═══ */
.skyclock-ask {
  position:fixed; left:50%; bottom:1.1rem; z-index:60;
  transform:translate(-50%, 140%); opacity:0;
  transition:transform .9s cubic-bezier(.2,.7,.2,1), opacity .9s ease;
  display:flex; align-items:center; gap:1rem; flex-wrap:wrap; justify-content:center;
  max-width:min(92vw, 34rem);
  padding:.75rem 1.1rem .75rem 1.3rem; border-radius:99px;
  border:1px solid var(--hair); background:var(--panel); color:var(--ink);
  backdrop-filter:blur(8px); -webkit-backdrop-filter:blur(8px);
  box-shadow:0 18px 40px -22px rgba(0,0,0,.45);
  font-family:var(--quote,'IM Fell',Georgia,serif); font-style:italic; font-size:.98rem; line-height:1.4;
}
.skyclock-ask.is-in { transform:translate(-50%, 0); opacity:1; }
.skyclock-ask p { margin:0; color:var(--body-ink); max-width:none; }
.skyclock-ask .sk-btns { display:flex; gap:.4rem; }
.skyclock-ask button {
  font-family:var(--caps,'Mattone',sans-serif); font-style:normal; font-size:var(--caps-xxs,.5rem);
  letter-spacing:.22em; text-transform:uppercase; cursor:pointer;
  padding:.55rem .95rem; border-radius:99px; border:1px solid transparent;
  background:var(--accent); color:var(--accent-ink);
}
.skyclock-ask button.sk-no { background:transparent; color:var(--dim); border-color:var(--hair); }
.skyclock-ask button.sk-no:hover { color:var(--accent-text); border-color:var(--accent); }
@media (max-width:560px) { .skyclock-ask { bottom:4.4rem; border-radius:22px; padding:.9rem 1.1rem; text-align:center; } }

/* ═══ THE SCRUBBER ═══ for the Studio: open any page with ?sky ═══ */
.skyclock-scrub {
  position:fixed; left:50%; bottom:1.1rem; z-index:61; transform:translateX(-50%);
  display:grid; grid-template-columns:auto 1fr auto; align-items:center; gap:.9rem;
  width:min(92vw, 38rem); padding:.7rem 1.1rem; border-radius:99px;
  border:1px solid var(--hair); background:var(--panel); color:var(--ink);
  backdrop-filter:blur(8px); -webkit-backdrop-filter:blur(8px);
  box-shadow:0 18px 40px -22px rgba(0,0,0,.45);
  font-family:var(--caps,'Mattone',sans-serif); font-size:var(--caps-xxs,.5rem);
  letter-spacing:.2em; text-transform:uppercase;
}
.skyclock-scrub .sk-time { font-family:var(--display,'Heartbreak Eighties',serif); font-size:1.25rem;
  letter-spacing:0; text-transform:none; min-width:4.2ch; text-align:right; color:var(--ink); }
.skyclock-scrub .sk-time small { display:block; font-family:var(--caps,sans-serif); font-size:var(--caps-xxs,.5rem);
  letter-spacing:.2em; text-transform:uppercase; color:var(--dim); margin-top:.1rem; }
.skyclock-scrub input[type=range] { width:100%; accent-color:var(--accent); margin:0; }
.skyclock-scrub button { font:inherit; letter-spacing:inherit; text-transform:inherit; cursor:pointer;
  padding:.5rem .85rem; border-radius:99px; border:1px solid var(--hair); background:transparent; color:var(--dim); }
.skyclock-scrub button:hover, .skyclock-scrub button.is-live { color:var(--accent-text); border-color:var(--accent); }
.skyclock-scrub .sk-ends { grid-column:2; display:flex; justify-content:space-between; color:var(--dim); margin-top:-.45rem; }
@media (max-width:560px) {
  .skyclock-scrub { grid-template-columns:auto 1fr; bottom:4.4rem; border-radius:22px; row-gap:.4rem; }
  .skyclock-scrub input[type=range] { grid-column:1 / -1; }
  .skyclock-scrub .sk-ends { grid-column:1 / -1; }
}

/* ═══ THE WEATHER ═══ what the sky is doing where the visitor is, from Open-Meteo,
   only once they have shared their location. html[data-weather] names it (clear,
   cloud, fog, rain, thunder, snow); --rain is the fall's weight, --cloud the cover,
   --wind the slant. sky-clock.js draws it on one canvas, in one fixed layer that
   sits over the scene and under the words, and takes no pointer. ═══ */
.wx { position:fixed; inset:0; z-index:7; pointer-events:none; overflow:hidden; }
.wx > * { position:absolute; inset:0; opacity:0; transition:opacity 3s ease; }
/* the words and the cards stand in front of the weather */
body:has(> .wx) main, body:has(> .wx) footer { position:relative; z-index:10; }
.wx-canvas { width:100%; height:100%; }
html[data-weather]:not([data-weather="clear"]) .wx-canvas { opacity:1; }

/* under cloud the light goes flat: a grey lilac wash, its weight the cover */
.wx-cloud { background:linear-gradient(180deg, #B9B4C4 0%, #ADA7BC 60%, #B9B4C4 100%); mix-blend-mode:multiply; }
html[data-sect="nocturnal"] .wx-cloud { background:#34303E; mix-blend-mode:normal; }
html[data-weather="cloud"] .wx-cloud, html[data-weather="rain"] .wx-cloud,
html[data-weather="thunder"] .wx-cloud { opacity:calc(var(--cloud, 0) * .22); }
html[data-weather="snow"] .wx-cloud { opacity:calc(var(--cloud, .6) * .14); }
html[data-weather="fog"] .wx-cloud { opacity:.26; }
/* fog: a haze that thickens toward the ground, under the drawn mist */
.wx-fog { background:linear-gradient(180deg, transparent 15%, rgba(226,222,234,.45) 60%, rgba(226,222,234,.62) 100%); }
html[data-sect="nocturnal"] .wx-fog { background:linear-gradient(180deg, transparent 15%, rgba(62,58,74,.5) 60%, rgba(62,58,74,.66) 100%); }
html[data-weather="fog"] .wx-fog { opacity:1; }
/* under cloud the day's blooms rest and the night's stars go */
html[data-sect][data-sect] .sky::before { opacity:calc((1 - var(--night)) * (1 - var(--cloud, 0) * .7)); }
html[data-sect][data-sect] .sky circle, html[data-sect][data-sect] .water-mirror circle {
  opacity:calc((.3 + var(--night) * .7) * (1 - var(--cloud, 0) * .85)); }

/* thunder: the sky lit for an instant from somewhere, twice, mostly far away */
.wx-flash { background:radial-gradient(75% 60% at var(--fx, 50%) 0%, rgba(240,236,255,.95), rgba(240,236,255,.45) 50%, transparent 100%);
  mix-blend-mode:screen; transition:none; }
.wx-flash.is-on { animation:wx-flash 1.1s ease-out 1; }
@keyframes wx-flash {
  0% { opacity:0; } 5% { opacity:calc(.9 * var(--fi, 1)); } 12% { opacity:calc(.12 * var(--fi, 1)); }
  20% { opacity:calc(.55 * var(--fi, 1)); } 34% { opacity:calc(.08 * var(--fi, 1)); } 100% { opacity:0; } }

@media (prefers-reduced-motion:reduce) { .wx-canvas { opacity:0 !important; } .wx-flash.is-on { animation:none; } }

/* the scrubber's weather chips, for the Studio */
.skyclock-scrub .sk-wx { grid-column:1 / -1; display:flex; gap:.35rem; flex-wrap:wrap; justify-content:center; margin-top:.1rem; }
.skyclock-scrub .sk-wx button { padding:.4rem .7rem; }

/* ═══ HEAR THE STORM ═══ a small control that only appears in thunder ═══ */
.wx-sound {
  position:fixed; right:1.1rem; bottom:3.9rem; z-index:50;
  display:inline-flex; align-items:center; gap:.5rem;
  font-family:var(--caps); font-size:var(--caps-xs); letter-spacing:.22em; text-transform:uppercase;
  color:var(--dim); padding:.55rem .95rem; border:1px solid var(--hair); border-radius:99px;
  background:var(--panel); backdrop-filter:blur(6px); -webkit-backdrop-filter:blur(6px); cursor:pointer;
  opacity:0; transform:translateY(8px); transition:opacity .9s ease, transform .9s ease, color .3s ease, border-color .3s ease;
}
.wx-sound.is-in { opacity:1; transform:none; }
.wx-sound svg { width:.8rem; height:.8rem; fill:currentColor; }
.wx-sound:hover, .wx-sound[aria-pressed="true"] { color:var(--accent-text); border-color:var(--accent); }
@media (max-width:720px) { .wx-sound { right:auto; left:1.1rem; bottom:3.9rem; } }