/* ══════════════════════════════════════════════════════════════
   lighting.css — morning sun from the upper left.
   The shaft geometry, the warm wash, the bounce fill, and the
   slow drift of --sun-angle that every object's shadow reads.
   ══════════════════════════════════════════════════════════════ */

.sun {
  position: absolute;
  inset: 0;
  pointer-events: none;
  z-index: 2;
}
.sun > * {
  position: absolute;
}

/* ── Broad warm wash: bright upper-left falling off to shade. ── */
.sun__wash {
  inset: 0;
  background:
    radial-gradient(
      88% 76% at 2% -8%,
      rgba(255, 246, 224, calc(0.95 * var(--sun-strength))) 0%,
      rgba(255, 222, 168, calc(0.62 * var(--sun-strength))) 24%,
      rgba(255, 194, 126, calc(0.3 * var(--sun-strength))) 46%,
      transparent 72%
    ),
    linear-gradient(
      133deg,
      rgba(255, 238, 206, calc(0.34 * var(--sun-strength))) 0%,
      transparent 40%
    ),
    linear-gradient(
      315deg,
      rgba(22, 10, 4, 0.7) 0%,
      rgba(22, 10, 4, 0.34) 26%,
      transparent 56%
    );
  mix-blend-mode: soft-light;
}
/* A second, non-blending pass. soft-light alone can't brighten the
   dark wood enough to read as direct sun, so a screen layer carries
   the actual key light and an overlay deepens the far corner. */
.sun__wash::after {
  content: "";
  position: absolute;
  inset: 0;
  background: radial-gradient(
    76% 66% at 0% -6%,
    rgba(255, 226, 172, calc(0.4 * var(--sun-strength))) 0%,
    rgba(255, 206, 146, calc(0.18 * var(--sun-strength))) 34%,
    transparent 66%
  );
  mix-blend-mode: screen;
}

/* ── Window shafts: three hard-ish bands raking across the wood,
   feathered at both ends so they never show a cut edge. ── */
.sun__shaft {
  top: -40%;
  height: 190%;
  transform-origin: 50% 0;
  rotate: 33deg;
  filter: blur(14px);
  mix-blend-mode: screen;
  opacity: calc(var(--sun-strength) * 1);
}
.sun__shaft--1 {
  left: -16%;
  width: 26%;
  background: linear-gradient(
    90deg,
    transparent,
    rgba(255, 240, 208, 0.44) 35%,
    rgba(255, 248, 228, 0.56) 50%,
    rgba(255, 240, 208, 0.4) 65%,
    transparent
  );
  -webkit-mask: linear-gradient(
    180deg,
    transparent,
    #000 14%,
    #000 58%,
    transparent 92%
  );
  mask: linear-gradient(
    180deg,
    transparent,
    #000 14%,
    #000 58%,
    transparent 92%
  );
}
.sun__shaft--2 {
  left: 12%;
  width: 19%;
  background: linear-gradient(
    90deg,
    transparent,
    rgba(255, 238, 204, 0.34) 45%,
    transparent
  );
  -webkit-mask: linear-gradient(
    180deg,
    transparent,
    #000 18%,
    #000 52%,
    transparent 86%
  );
  mask: linear-gradient(
    180deg,
    transparent,
    #000 18%,
    #000 52%,
    transparent 86%
  );
  opacity: calc(var(--sun-strength) * 0.8);
}
.sun__shaft--3 {
  left: 33%;
  width: 13%;
  background: linear-gradient(
    90deg,
    transparent,
    rgba(255, 236, 200, 0.14) 50%,
    transparent
  );
  -webkit-mask: linear-gradient(
    180deg,
    transparent,
    #000 22%,
    #000 46%,
    transparent 78%
  );
  mask: linear-gradient(
    180deg,
    transparent,
    #000 22%,
    #000 46%,
    transparent 78%
  );
  opacity: calc(var(--sun-strength) * 0.62);
}

/* ── The shadow of the window bar crossing the shafts. ── */
.sun__mullion {
  top: -30%;
  left: -10%;
  width: 60%;
  height: 170%;
  rotate: 33deg;
  background: repeating-linear-gradient(
    90deg,
    transparent 0 118px,
    rgba(70, 40, 16, 0.16) 118px 131px,
    transparent 131px 248px
  );
  filter: blur(11px);
  mix-blend-mode: multiply;
  opacity: calc(var(--sun-strength) * 0.7);
}

/* ── Bounce: warm light kicking back up off the table into the
   shaded right side. Keeps the shadows from going dead. ── */
.sun__bounce {
  inset: 0;
  background:
    radial-gradient(
      70% 60% at 74% 88%,
      rgba(255, 207, 149, 0.2),
      transparent 66%
    ),
    radial-gradient(
      50% 44% at 96% 46%,
      rgba(255, 190, 130, 0.13),
      transparent 70%
    );
  mix-blend-mode: screen;
  opacity: calc(var(--sun-strength) * 0.9);
}

/* ── Clouds passing the window: a slow, irregular dim. ── */
.sun__clouds {
  inset: 0;
  background: radial-gradient(
    120% 90% at 10% 0%,
    rgba(58, 44, 32, 0.5),
    transparent 70%
  );
  mix-blend-mode: multiply;
  opacity: 0;
  animation: cloud-pass var(--t-cloud) ease-in-out infinite;
}

/* Two dips of different depth per cycle — never a clean sine, so
   it reads as weather rather than a pulsing element. */
@keyframes cloud-pass {
  0%,
  34% {
    opacity: 0;
  }
  41% {
    opacity: 0.3;
  }
  48% {
    opacity: 0.12;
  }
  55% {
    opacity: 0.38;
  }
  66% {
    opacity: 0.05;
  }
  74% {
    opacity: 0.22;
  }
  86%,
  100% {
    opacity: 0;
  }
}

/* ── The sun itself moves. Driving --sun-angle and --sun-strength
   from one keyframe set means every shadow in the scene swings
   together, because they all resolve their direction from it. ── */
@property --sun-angle {
  syntax: "<angle>";
  inherits: true;
  initial-value: 128deg;
}
@property --sun-strength {
  syntax: "<number>";
  inherits: true;
  initial-value: 1;
}

/* The sun animation is gated behind .sun-animated, which scene.js
   adds only after confirming CSS.registerProperty exists.

   Why gate it at all: unregistered custom properties can't
   interpolate. An engine without @property would step between
   keyframe values discretely, making every shadow in the scene
   jump rather than drift. Without the gate that's a twitch; with
   it, older engines get a correctly-lit static scene, because
   --sun-angle still resolves from :root either way. */
.sun-animated .scene {
  animation: morning-sun var(--t-sun) ease-in-out infinite alternate;
}

/* CSS-only path for when JS never runs. @supports at-rule() is
   itself modern enough that any engine passing it also has
   @property, so the two agree; this just means the artwork is not
   dependent on JavaScript for its lighting to move. */
@supports at-rule(@property) {
  .scene {
    animation: morning-sun var(--t-sun) ease-in-out infinite alternate;
  }
}

@keyframes morning-sun {
  0% {
    --sun-angle: 118deg;
    --sun-strength: 0.86;
  }
  50% {
    --sun-angle: 130deg;
    --sun-strength: 1;
  }
  100% {
    --sun-angle: 142deg;
    --sun-strength: 0.92;
  }
}