/*
 * The moving sun and the light that goes with it (js/sky.js writes the variables on <body> and adds
 * body.sky-clock). Shared by every world; a world tunes its sky in its own css/scenery-<world>.css:
 *   --horizon      where the sun meets the hills, from the top of the screen; --arc-w / --arc-h its arc
 *   --haze-top, --haze-mid, --haze-bottom   the band where the low sun's haze lies (#sky-haze)
 * and turns off its own fixed sun spot and dusk slide with :not(.sky-clock).
 * Loaded after css/behaviors.css.
 */

/* a creature's left/right flip as a number that turns smoothly with it (css/behaviors.css transitions
   it with the flip), so shadows and the lit edge swing round instead of jumping */
@property --flip { syntax: '<number>'; inherits: true; initial-value: 1; }
.c-face, .buddy-face { --flip: 1; }
.c-face.left, .buddy-face.left { --flip: -1; }

/* ---------- the sun follows its arc ---------- */
body.sky-clock #sun {
  left: calc(50vw - var(--sun-cos, -.7) * var(--arc-w, 41vw)); right: auto;
  top: calc(var(--horizon, 70vh) - var(--sun-sin, .7) * var(--arc-h, 60vh));
  translate: -50% -50%;
  scale: calc(1 + var(--warm, 0) * .08);
}
/* Letters & numbers: the typing line is at the top, so the sun keeps lower and passes behind the card */
body[data-play=letters] { --arc-h: 44vh; }

/* ---------- warm light low in the sky on the sun's side (between the day sky and the sunset sky) ----------
   rosy on the left in the morning, gold on the right in the afternoon (body.sun-west after midday).
   The pictures never move, only their opacity changes, so the clock's updates cost no repainting. */
.sky-sun { opacity: 0; pointer-events: none; }
body.sky-clock .sky-sun {
  opacity: calc(var(--warm, 0) * (1 - var(--setting, 0))); will-change: opacity;
  background:
    radial-gradient(90vw 75vh at 10% calc(var(--horizon, 70vh) - 16vh), rgba(246, 205, 180, .85), rgba(246, 205, 180, 0) 70%),
    linear-gradient(rgba(247, 214, 192, 0) 22%, rgba(247, 214, 192, .55) 78%);
}
body.sky-clock.sun-west .sky-sun {
  background:
    radial-gradient(90vw 75vh at 90% calc(var(--horizon, 70vh) - 16vh), rgba(247, 197, 140, .85), rgba(247, 197, 140, 0) 70%),
    linear-gradient(rgba(247, 210, 164, 0) 22%, rgba(247, 210, 164, .55) 78%);
}

/* ---------- the low sun's haze over the far landscape, on the sun's side (morning mist, golden dust) ----------
   it lies between the landscape (#scenery-back) and the ground; like the sky's warm light, only its opacity changes */
#sky-haze { position: absolute; inset: 0; z-index: 1; pointer-events: none; opacity: 0; }
body.sky-clock #sky-haze {
  opacity: var(--haze, 0); will-change: opacity;
  background:
    radial-gradient(60vw 16vh at 14% var(--haze-mid, 64vh), rgba(246, 205, 180, .7), rgba(246, 205, 180, 0)),
    linear-gradient(rgba(246, 210, 186, 0) var(--haze-top, 52vh), rgba(246, 210, 186, .36) var(--haze-mid, 64vh), rgba(246, 210, 186, 0) var(--haze-bottom, 77vh));
}
body.sky-clock.sun-west #sky-haze {
  background:
    radial-gradient(60vw 16vh at 86% var(--haze-mid, 64vh), rgba(247, 197, 140, .7), rgba(247, 197, 140, 0)),
    linear-gradient(rgba(247, 210, 164, 0) var(--haze-top, 52vh), rgba(247, 210, 164, .36) var(--haze-mid, 64vh), rgba(247, 210, 164, 0) var(--haze-bottom, 77vh));
}
/* at night (the sun is down, so both are already clear) they leave the page, so nothing is composited for them */
body.sky-clock.night :is(.sky-sun, #sky-haze) { display: none; }

/* ---------- creatures: shadows away from the sun, longer when it's low; a lit edge on the sun's side ----------
   (the renderer's pieces are in js/art.js: .ground, .underside / .lit-body, .side-shade) */
body.sky-clock :is(.critter, .flyer, #buddy) {   /* the sunset tints them dusky (their color comes in as --cc) */
  color: color-mix(in srgb, var(--cc) calc(100% - var(--cr-dim, 0) * 100%), #5B4048);
}
body.sky-clock :where(#herd, #buddy) .dino-svg .ground {
  transform-box: fill-box; transform-origin: 50% 50%;
  transform: translate(calc(var(--sh-shift, 0) * var(--flip) * 50%), calc(var(--sh-drop, 0) * 1px)) scale(var(--sh-len, 1), var(--sh-thick, 1));
  opacity: var(--sh-o, .2);
}
body.sky-clock :where(#herd) .b-aloft .dino-svg .ground { opacity: 0; }
body.sky-clock :where(#herd, #buddy) .dino-svg :is(.underside, .lit-body) {
  transform: translate(calc(var(--rim-dx, 0) * var(--flip) * 1px), 2.2px);
}
body.sky-clock :where(#herd, #buddy) .dino-svg .ss-r { opacity: calc(var(--shade-o, 0) * max(0, var(--sun-sgn, 1) * var(--flip))); }
body.sky-clock :where(#herd, #buddy) .dino-svg .ss-l { opacity: calc(var(--shade-o, 0) * max(0, -1 * var(--sun-sgn, 1) * var(--flip))); }
body.sky-clock :where(#herd, #buddy) .dino-svg .rim { fill: color-mix(in srgb, currentColor 45%, var(--rim-tint, #FFF6E2)); }
body.sky-clock :where(#herd, #buddy) .dino-svg .s-light { stop-color: color-mix(in srgb, currentColor 58%, var(--light-tint, #F6EEDC)); }