@property --day-cycle-bleed-bottom {
      syntax: "<color>";
      inherits: false;
      initial-value: rgba(0, 0, 0, 0);
    }

    @property --day-cycle-bleed-top {
      syntax: "<color>";
      inherits: false;
      initial-value: rgba(0, 0, 0, 0);
    }

    @property --day-cycle-bleed-opacity {
      syntax: "<number>";
      inherits: false;
      initial-value: 0;
    }

    @property --day-cycle-bleed-pulse {
      syntax: "<number>";
      inherits: false;
      initial-value: 1;
    }

    @property --day-cycle-bleed-pulse-low {
      syntax: "<number>";
      inherits: false;
      initial-value: 0.94;
    }

    @property --day-cycle-bleed-pulse-high {
      syntax: "<number>";
      inherits: false;
      initial-value: 1.04;
    }

    @property --day-cycle-bleed-pulse-duration {
      syntax: "<time>";
      inherits: false;
      initial-value: 34s;
    }

    @property --day-cycle-star-opacity {
      syntax: "<number>";
      inherits: false;
      initial-value: 0;
    }

    @property --arc-fade-strength {
      syntax: "<number>";
      inherits: false;
      initial-value: 0.9;
    }

    @property --arc-glow-core-opacity {
      syntax: "<number>";
      inherits: false;
      initial-value: 0.4;
    }

    @property --phase-clock-color-start {
      syntax: "<color>";
      inherits: false;
      initial-value: #ffffff;
    }

    @property --phase-clock-color-end {
      syntax: "<color>";
      inherits: false;
      initial-value: #ffffff;
    }

    @property --phase-clock-glow-color {
      syntax: "<color>";
      inherits: false;
      initial-value: rgba(255, 255, 255, 0.32);
    }
    .day-cycle-arc {
      position: fixed;
      inset: 0;
      pointer-events: none;
      z-index: 2;
      overflow: hidden;
      --arc-fade-strength: 0.9;
      --arc-glow-core-opacity: 0.4;
      --sun-rays-opacity: 0;
      --sun-rays-length: 0.6;
      --sun-rays-color: #f2c499;
      --cloud-opacity: 0;
      --cloud-tint-color: #d9ecff;
      --sun-core-opacity: 0;
      --sun-core-color: #f6b26c;
      --sun-haze-opacity: 0;
      --sun-haze-color: rgba(255, 214, 170, 0.35);
      --sun-rays-bottom: 6%;
      --sun-haze-bottom: 10%;
      --sun-core-bottom: 7%;
      --sun-size: 1;
      --sun-offset: 1;
      --moon-opacity: 0;
      --moon-glow-opacity: 0;
      --moon-size: 1;
      --moon-bottom: 6%;
      --moon-offset: 1;
      --moon-core-color: #f4f6ff;
      --moon-glow-color: rgba(210, 220, 255, 0.38);
      transition: --arc-fade-strength 10s ease, --arc-glow-core-opacity 10s ease;
    }

    .day-cycle-arc__phase-clock {
      position: absolute;
      left: 50%;
      top: -36%;
      transform: translateX(-50%);
      display: inline-flex;
      align-items: baseline;
      gap: 0.4rem;
      padding: 0.5rem 0.75rem;
      font-family: "Inter", "Helvetica Neue", "HelveticaNeue",
        "Neue Haas Grotesk Text Pro", Helvetica, Arial, sans-serif;
      font-weight: 600;
      font-style: italic;
      font-size: clamp(1.125rem, 1.6vw + 0.9rem, 2.4rem);
      letter-spacing: -0.035em;
      line-height: 1.04;
      text-transform: lowercase;
      font-kerning: normal;
      font-feature-settings: "kern" 1, "liga" 0;
      text-rendering: optimizeLegibility;
      -webkit-font-smoothing: antialiased;
      z-index: 2;
      background-image: linear-gradient(
        120deg,
        var(--phase-clock-color-start),
        var(--phase-clock-color-end)
      );
      color: transparent;
      -webkit-text-fill-color: transparent;
      background-clip: text;
      -webkit-background-clip: text;
      text-shadow:
        0 0 12px var(--phase-clock-glow-color),
        0 0 36px var(--phase-clock-glow-color);
      filter: drop-shadow(0 12px 24px rgba(0, 0, 0, 0.25));
      opacity: 0;
      pointer-events: none;
      white-space: nowrap;
      transition:
        opacity 0.6s ease,
        top 0.8s ease,
        --phase-clock-color-start 12s linear,
        --phase-clock-color-end 12s linear,
        --phase-clock-glow-color 12s linear;
    }

    .day-cycle-arc__phase-clock.is-visible {
      opacity: 1;
    }

    .day-cycle-arc__phase-clock span {
      display: inline-block;
      font-weight: inherit;
      font-style: inherit;
      letter-spacing: inherit;
      background-image: inherit;
      background-clip: text;
      -webkit-background-clip: text;
      color: transparent;
      -webkit-text-fill-color: transparent;
    }

    .day-cycle-arc__phase-clock-time {
      font-variant-numeric: tabular-nums;
    }

    .day-cycle-arc__ambient {
      position: absolute;
      left: 50%;
      top: 50%;
      width: 220vmax;
      height: 220vmax;
      transform: translate(-50%, -50%);
      pointer-events: none;
      background: linear-gradient(
        to top,
        var(--day-cycle-bleed-bottom) 0%,
        var(--day-cycle-bleed-top) 100%
      );
      --day-cycle-bleed-pulse: 1;
      --day-cycle-bleed-pulse-low: 0.94;
      --day-cycle-bleed-pulse-high: 1.04;
      --day-cycle-bleed-pulse-duration: 34s;
      opacity: calc(var(--day-cycle-bleed-opacity) * var(--day-cycle-bleed-pulse));
      mix-blend-mode: screen;
      filter: blur(240px);
      transition:
        opacity 36s ease,
        --day-cycle-bleed-bottom 32s linear,
        --day-cycle-bleed-top 32s linear,
        --day-cycle-bleed-pulse-low 32s ease,
        --day-cycle-bleed-pulse-high 32s ease;
      animation: day-cycle-ambient-pulse var(--day-cycle-bleed-pulse-duration)
        ease-in-out infinite;
      will-change: opacity;
    }

    .day-cycle-arc__celestial {
      position: absolute;
      inset: 0;
      pointer-events: none;
      overflow: visible;
      will-change: clip-path;
    }

    .day-cycle-arc__ambient-effects {
      position: absolute;
      inset: 0;
      pointer-events: none;
      overflow: hidden;
    }

    .day-cycle-arc__sun-rays {
      position: absolute;
      left: 50%;
      bottom: var(--sun-rays-bottom);
      width: min(120vmin, 140vmax);
      height: min(120vmin, 140vmax);
      transform: translate(-50%, 0) scaleY(var(--sun-rays-length));
      transform-origin: 50% 82%;
      background: repeating-conic-gradient(
        from 180deg at 50% 100%,
        rgba(255, 214, 170, 0.55) 0deg 7deg,
        rgba(255, 214, 170, 0) 7deg 18deg
      );
      background: repeating-conic-gradient(
        from 180deg at 50% 100%,
        color-mix(in srgb, var(--sun-rays-color) 72%, transparent) 0deg 7deg,
        rgba(255, 255, 255, 0) 7deg 18deg
      );
      filter: blur(24px);
      opacity: var(--sun-rays-opacity);
      transition: opacity 12s ease, transform 12s ease;
      mask-image: radial-gradient(
        circle at 50% 82%,
        rgba(0, 0, 0, 1) 0%,
        rgba(0, 0, 0, 0) 64%
      );
      mix-blend-mode: screen;
      will-change: opacity, transform;
    }

    .day-cycle-arc__sun-haze {
      position: absolute;
      left: 50%;
      bottom: var(--sun-haze-bottom);
      width: calc(60vmin * var(--sun-size));
      height: calc(30vmin * var(--sun-size));
      transform: translate(-50%, calc(var(--sun-offset) * 32%));
      border-radius: 50%;
      background: radial-gradient(
        circle,
        color-mix(in srgb, white 42%, var(--sun-haze-color) 58%) 0%,
        color-mix(in srgb, var(--sun-haze-color) 62%, transparent) 48%,
        color-mix(in srgb, var(--sun-haze-color) 18%, transparent) 82%
      );
      opacity: var(--sun-haze-opacity);
      filter: blur(56px);
      mix-blend-mode: screen;
      transition: opacity 12s ease, transform 12s ease, filter 12s ease;
      will-change: opacity, transform, filter;
    }

    .day-cycle-arc__sun {
      position: absolute;
      left: 50%;
      bottom: var(--sun-core-bottom);
      width: calc(16vmin * var(--sun-size));
      height: calc(16vmin * var(--sun-size));
      transform: translate(-50%, calc(var(--sun-offset) * 44%));
      border-radius: 50%;
      background: radial-gradient(
        circle,
        color-mix(in srgb, white 75%, var(--sun-core-color) 25%) 0%,
        color-mix(in srgb, white 42%, var(--sun-core-color) 58%) 32%,
        color-mix(in srgb, var(--sun-core-color) 82%, transparent) 62%,
        color-mix(in srgb, var(--sun-core-color) 28%, transparent) 86%
      );
      opacity: var(--sun-core-opacity);
      filter: blur(0.35px);
      mix-blend-mode: screen;
      box-shadow: 0 0 220px color-mix(
          in srgb,
          var(--sun-core-color) 38%,
          rgba(0, 0, 0, 0)
        );
      transition: opacity 12s ease, transform 12s ease, filter 12s ease,
        box-shadow 12s ease;
      will-change: opacity, transform, filter;
    }

    .day-cycle-arc__sun::after {
      content: "";
      position: absolute;
      inset: 20%;
      border-radius: 50%;
      background: radial-gradient(
        circle,
        rgba(255, 255, 255, 0.98) 0%,
        rgba(255, 255, 255, 0.78) 45%,
        rgba(255, 255, 255, 0) 76%
      );
      opacity: var(--sun-core-opacity);
      mix-blend-mode: screen;
      filter: blur(6px);
      pointer-events: none;
    }

    .day-cycle-arc__moon-halo {
      position: absolute;
      left: 50%;
      bottom: var(--moon-bottom);
      width: calc(24vmin * var(--moon-size));
      height: calc(24vmin * var(--moon-size));
      transform: translate(-50%, calc(var(--moon-offset) * 36%));
      border-radius: 50%;
      background: radial-gradient(
        circle,
        color-mix(in srgb, var(--moon-glow-color) 75%, transparent) 0%,
        rgba(255, 255, 255, 0) 80%
      );
      opacity: var(--moon-glow-opacity);
      filter: blur(46px);
      mix-blend-mode: screen;
      transition: opacity 16s ease, transform 16s ease, filter 16s ease,
        background 12s ease;
      will-change: opacity, transform, filter;
    }

    .day-cycle-arc__moon {
      position: absolute;
      left: 50%;
      bottom: var(--moon-bottom);
      width: calc(10vmin * var(--moon-size));
      height: calc(10vmin * var(--moon-size));
      transform: translate(-50%, calc(var(--moon-offset) * 44%));
      border-radius: 50%;
      background: radial-gradient(
          110% 110% at 30% 30%,
          rgba(255, 255, 255, 0.6) 0%,
          rgba(255, 255, 255, 0) 60%
        ),
        radial-gradient(
          circle,
          color-mix(in srgb, var(--moon-core-color) 92%, white 8%) 0%,
          color-mix(in srgb, var(--moon-core-color) 62%, transparent) 65%,
          rgba(255, 255, 255, 0) 82%
        );
      box-shadow: 0 0 80px color-mix(
          in srgb,
          var(--moon-core-color) 24%,
          rgba(0, 0, 0, 0)
        );
      opacity: var(--moon-opacity);
      filter: blur(0.6px);
      mix-blend-mode: screen;
      transition: opacity 16s ease, transform 16s ease, filter 16s ease,
        box-shadow 16s ease, background 12s ease;
      will-change: opacity, transform, filter;
    }

    .day-cycle-arc__clouds {
      position: absolute;
      inset: 0;
      pointer-events: none;
      opacity: var(--cloud-opacity);
      transition: opacity 18s ease;
      mix-blend-mode: screen;
      mask-image: radial-gradient(
        circle at 50% 78%,
        rgba(0, 0, 0, 1) 0%,
        rgba(0, 0, 0, 0) 88%
      );
      will-change: opacity;
    }

    .day-cycle-arc__clouds::before,
    .day-cycle-arc__clouds::after {
      content: "";
      position: absolute;
      top: 12%;
      left: -12%;
      width: 160vmax;
      height: 90vmax;
      background:
        radial-gradient(
          circle at 18% 42%,
          rgba(255, 255, 255, 0.72) 0%,
          rgba(255, 255, 255, 0) 58%
        ),
        radial-gradient(
          circle at 38% 30%,
          rgba(255, 255, 255, 0.68) 0%,
          rgba(255, 255, 255, 0) 55%
        ),
        radial-gradient(
          circle at 58% 46%,
          rgba(255, 255, 255, 0.7) 0%,
          rgba(255, 255, 255, 0) 60%
        ),
        radial-gradient(
          circle at 78% 34%,
          rgba(255, 255, 255, 0.74) 0%,
          rgba(255, 255, 255, 0) 62%
        );
      background:
        radial-gradient(
            circle at 18% 42%,
            color-mix(in srgb, white 86%, var(--cloud-tint-color) 14%) 0%,
            rgba(255, 255, 255, 0) 58%
          ),
        radial-gradient(
            circle at 38% 30%,
            color-mix(in srgb, white 82%, var(--cloud-tint-color) 18%) 0%,
            rgba(255, 255, 255, 0) 55%
          ),
        radial-gradient(
            circle at 58% 46%,
            color-mix(in srgb, white 84%, var(--cloud-tint-color) 16%) 0%,
            rgba(255, 255, 255, 0) 60%
          ),
        radial-gradient(
            circle at 78% 34%,
            color-mix(in srgb, white 88%, var(--cloud-tint-color) 12%) 0%,
            rgba(255, 255, 255, 0) 62%
          );
      opacity: 0.8;
      filter: blur(12px);
      animation: day-cycle-cloud-drift 120s ease-in-out infinite;
      will-change: transform;
    }

    .day-cycle-arc__clouds::after {
      top: 22%;
      left: -18%;
      width: 180vmax;
      height: 80vmax;
      opacity: 0.6;
      filter: blur(18px);
      animation: day-cycle-cloud-drift-alt 160s ease-in-out infinite;
    }

    @keyframes day-cycle-cloud-drift {
      0% {
        transform: translate3d(-8%, 0, 0);
      }
      50% {
        transform: translate3d(8%, 0, 0);
      }
      100% {
        transform: translate3d(-8%, 0, 0);
      }
    }

    @keyframes day-cycle-cloud-drift-alt {
      0% {
        transform: translate3d(10%, 0, 0);
      }
      50% {
        transform: translate3d(-12%, 2%, 0);
      }
      100% {
        transform: translate3d(10%, 0, 0);
      }
    }

    @keyframes day-cycle-ambient-pulse {
      0%,
      100% {
        --day-cycle-bleed-pulse: var(--day-cycle-bleed-pulse-low);
      }
      52% {
        --day-cycle-bleed-pulse: var(--day-cycle-bleed-pulse-high);
      }
    }

    .day-cycle-arc__svg {
      width: 100%;
      height: 100%;
      display: block;
      position: relative;
    }

    .day-cycle-arc #day-cycle-arc-gradient stop[data-stop="edge"] {
      stop-opacity: 0;
    }

    .day-cycle-arc #day-cycle-arc-gradient stop[data-stop="core"] {
      stop-opacity: clamp(0, var(--arc-fade-strength), 1);
    }

    .day-cycle-arc #day-cycle-arc-gradient-glow stop[data-stop="edge"] {
      stop-opacity: 0;
    }

    .day-cycle-arc #day-cycle-arc-gradient-glow stop[data-stop="core"] {
      stop-opacity: var(--arc-glow-core-opacity);
    }

    .day-cycle-arc__glow {
      mix-blend-mode: screen;
      opacity: 0.38;
      filter: blur(28px);
      transform-origin: center;
      animation: day-cycle-arc-glow-shift var(--day-cycle-glow-duration, 40s)
          linear infinite;
      will-change: transform, opacity;
    }

    .day-cycle-arc--calm .day-cycle-arc__glow {
      animation-play-state: paused;
    }

    @keyframes day-cycle-arc-glow-shift {
      0% {
        transform: translate3d(calc(var(--day-cycle-glow-amplitude, 3px) * -0.8), 0, 0)
          scale3d(0.99, 1.02, 1);
        opacity: 0.36;
      }
      19% {
        transform: translate3d(
            calc(var(--day-cycle-glow-amplitude, 3px) * 0.4),
            calc(var(--day-cycle-glow-amplitude, 3px) * -0.35),
            0
          )
          scale3d(1.02, 0.99, 1);
        opacity: 0.43;
      }
      37% {
        transform: translate3d(
            calc(var(--day-cycle-glow-amplitude, 3px) * -0.6),
            calc(var(--day-cycle-glow-amplitude, 3px) * 0.28),
            0
          )
          scale3d(1.01, 1.01, 1);
        opacity: 0.4;
      }
      58% {
        transform: translate3d(
            calc(var(--day-cycle-glow-amplitude, 3px) * 0.75),
            calc(var(--day-cycle-glow-amplitude, 3px) * -0.18),
            0
          )
          scale3d(0.98, 1.03, 1);
        opacity: 0.45;
      }
      79% {
        transform: translate3d(
            calc(var(--day-cycle-glow-amplitude, 3px) * -0.3),
            calc(var(--day-cycle-glow-amplitude, 3px) * 0.42),
            0
          )
          scale3d(1.03, 0.98, 1);
        opacity: 0.41;
      }
      100% {
        transform: translate3d(
            calc(var(--day-cycle-glow-amplitude, 3px) * 0.55),
            calc(var(--day-cycle-glow-amplitude, 3px) * 0.1),
            0
          )
          scale3d(1.0, 1.02, 1);
        opacity: 0.37;
      }
    }

    .day-cycle-arc__stars circle {
      fill: #ffffff;
      opacity: 0;
      transition: opacity 1s ease;
      transform-box: fill-box;
      transform-origin: center;
      will-change: transform, opacity;
    }

    .day-cycle-arc__stars circle[data-visible="true"] {
      opacity: 1;
    }

    .day-cycle-arc__stars {
      opacity: var(--day-cycle-star-opacity);
      transition: opacity 1.5s ease; /* shorter fade */
      will-change: opacity;
    }



/* ════════════════════════════════════════════════════════════════════
   DAY-CYCLE AMBIENCE UPGRADES
   day → fuller drifting cloud banks · twilight → very rare shooting
   stars · night → varied twinkling star field with hero stars ·
   morning → crisper, swaying god-rays and a hotter sun core.
   All layers respect the Ambience toggle (body.ambience-disabled) and
   calm mode.
   ════════════════════════════════════════════════════════════════════ */

/* ── night: living star field ───────────────────────────────────────── */
@keyframes ivy-star-twinkle {
  0%, 100% { filter: brightness(0.55); }
  50%      { filter: brightness(1.65) drop-shadow(0 0 3px rgba(255, 255, 255, 0.75)); }
}
@keyframes ivy-star-twinkle-hero {
  0%, 100% { filter: brightness(0.8) drop-shadow(0 0 2px rgba(255, 255, 255, 0.5)); }
  50%      { filter: brightness(2) drop-shadow(0 0 7px rgba(255, 255, 255, 0.95))
                     drop-shadow(0 0 14px rgba(190, 210, 255, 0.55)); }
}
.day-cycle-arc__stars circle {
  animation: ivy-star-twinkle var(--tw-dur, 3.4s) ease-in-out var(--tw-delay, 0s) infinite;
}
.day-cycle-arc__stars circle.star--hero {
  animation-name: ivy-star-twinkle-hero;
}

/* ── twilight: very rare shooting stars ─────────────────────────────── */
.day-cycle-arc__shooting-stars {
  position: absolute;
  inset: 0;
  pointer-events: none;
  overflow: hidden;
}
.day-cycle-arc__shooting-star {
  position: absolute;
  left: var(--ss-x, 40%);
  top: var(--ss-y, 60px);
  width: 150px;
  height: 2px;
  border-radius: 999px;
  background: linear-gradient(90deg,
    rgba(255, 255, 255, 0) 0%,
    rgba(255, 255, 255, 0.35) 55%,
    rgba(255, 255, 255, 0.95) 100%);
  transform: rotate(var(--ss-rot, 18deg));
  transform-origin: 100% 50%;
  opacity: 0;
  translate: 0 0;
  animation: ivy-shooting var(--ss-dur, 1.1s) ease-out forwards;
  filter: drop-shadow(0 0 6px rgba(255, 255, 255, 0.85));
  mix-blend-mode: screen;
  pointer-events: none;
}
@keyframes ivy-shooting {
  0%   { opacity: 0; translate: 0 0; }
  10%  { opacity: 1; }
  70%  { opacity: 0.9; }
  100% { opacity: 0; translate: var(--ss-tx, -320px) var(--ss-ty, 96px); }
}

/* ── day: an extra slow-drifting cloud bank on the layer itself ─────── */
.day-cycle-arc__clouds {
  background:
    radial-gradient(34vmax 11vmax at 22% 30%, rgba(255, 255, 255, 0.5) 0%, rgba(255, 255, 255, 0) 60%),
    radial-gradient(26vmax 9vmax at 64% 22%, rgba(255, 255, 255, 0.42) 0%, rgba(255, 255, 255, 0) 58%),
    radial-gradient(40vmax 12vmax at 88% 34%, rgba(255, 255, 255, 0.36) 0%, rgba(255, 255, 255, 0) 62%);
  background-size: 220% 100%;
  background-repeat: repeat-x;
  animation: ivy-cloud-bank-drift 160s linear infinite;
}
@keyframes ivy-cloud-bank-drift {
  from { background-position: 0% 0; }
  to   { background-position: -220% 0; }
}

/* ── morning: realistic sun — crisp swaying god-rays, hotter core ───── */
.day-cycle-arc[data-phase="postSunrise"] .day-cycle-arc__sun-rays {
  background: repeating-conic-gradient(
      from 180deg at 50% 100%,
      color-mix(in srgb, var(--sun-rays-color) 82%, transparent) 0deg 4.5deg,
      rgba(255, 255, 255, 0) 4.5deg 11deg
    ),
    repeating-conic-gradient(
      from 184deg at 50% 100%,
      color-mix(in srgb, var(--sun-rays-color) 38%, transparent) 0deg 2deg,
      rgba(255, 255, 255, 0) 2deg 16deg
    );
  filter: blur(13px);
  rotate: 0deg;
  animation: ivy-rays-sway 22s ease-in-out infinite;
}
@keyframes ivy-rays-sway {
  0%, 100% { rotate: -1.6deg; }
  50%      { rotate: 1.6deg; }
}
.day-cycle-arc[data-phase="postSunrise"] .day-cycle-arc__sun {
  filter: blur(0.2px);
  box-shadow:
    0 0 90px color-mix(in srgb, var(--sun-core-color) 55%, rgba(0, 0, 0, 0)),
    0 0 260px color-mix(in srgb, var(--sun-core-color) 42%, rgba(0, 0, 0, 0)),
    0 0 480px color-mix(in srgb, var(--sun-core-color) 22%, rgba(0, 0, 0, 0));
}
.day-cycle-arc[data-phase="postSunrise"] .day-cycle-arc__sun-haze {
  scale: 1;
  animation: ivy-haze-breathe 14s ease-in-out infinite;
}
@keyframes ivy-haze-breathe {
  0%, 100% { scale: 1; }
  50%      { scale: 1.07; }
}

/* ── gating: ambience toggle + calm mode + reduced motion ───────────── */
body.ambience-disabled .day-cycle-arc__shooting-stars,
body.ambience-disabled .day-cycle-arc__shooting-star {
  opacity: 0 !important;
  transition: opacity 0.8s ease;
}
body.ambience-disabled .day-cycle-arc__stars circle,
body.ambience-disabled .day-cycle-arc__sun-rays,
body.ambience-disabled .day-cycle-arc__sun-haze,
body.ambience-disabled .day-cycle-arc__clouds {
  animation-play-state: paused !important;
}
.day-cycle-arc--calm .day-cycle-arc__stars circle,
.day-cycle-arc--calm .day-cycle-arc__clouds,
.day-cycle-arc--calm .day-cycle-arc__sun-rays,
.day-cycle-arc--calm .day-cycle-arc__sun-haze {
  animation-play-state: paused;
}
@media (prefers-reduced-motion: reduce) {
  .day-cycle-arc__stars circle,
  .day-cycle-arc__clouds,
  .day-cycle-arc__sun-rays,
  .day-cycle-arc__sun-haze,
  .day-cycle-arc__shooting-star {
    animation: none !important;
  }
}

/* ════════════════════════════════════════════════════════════════════
   REALISTIC CLOUDS (v3) — replaces the old "fog" wash entirely.
   The previous clouds were full-screen white gradients with
   mix-blend-mode:screen over a light sky — invisible by construction.
   These are discrete cumulus clusters with bright tops and tinted
   undersides, painted normally so they stay clearly visible through
   the frosted glass panel, drifting at different heights and speeds.
   (.ivy-cloud children are spawned by the day-cycle controller.)
   ════════════════════════════════════════════════════════════════════ */
.day-cycle-arc__clouds {
  background: none !important;
  mix-blend-mode: normal;
  -webkit-mask-image: none;
  mask-image: none;
  animation: none;
}
.day-cycle-arc__clouds::before,
.day-cycle-arc__clouds::after {
  display: none;
}

.ivy-cloud {
  position: absolute;
  top: var(--c-top, 8%);
  left: 0;
  width: var(--c-w, 340px);
  height: calc(var(--c-w, 340px) * 0.36);
  opacity: var(--c-op, 0.9);
  background:
    /* bright cumulus tops */
    radial-gradient(38% 52% at 36% 60%, #ffffff 55%, rgba(255, 255, 255, 0) 64%),
    radial-gradient(30% 46% at 56% 48%, #ffffff 52%, rgba(255, 255, 255, 0) 61%),
    radial-gradient(24% 36% at 20% 70%, #fbfdff 50%, rgba(255, 255, 255, 0) 58%),
    radial-gradient(22% 34% at 72% 62%, #f8fbff 48%, rgba(255, 255, 255, 0) 57%),
    radial-gradient(16% 26% at 85% 74%, #f4f8fe 46%, rgba(255, 255, 255, 0) 55%),
    radial-gradient(56% 30% at 48% 82%, #fdfeff 56%, rgba(255, 255, 255, 0) 64%),
    /* phase-tinted underside shading for depth */
    radial-gradient(58% 18% at 50% 94%,
      color-mix(in srgb, var(--cloud-tint-color, #9fb4cd) 45%, #8b9db4) 36%,
      rgba(140, 160, 185, 0) 68%);
  filter: blur(0.5px) drop-shadow(0 10px 22px rgba(70, 95, 130, 0.22));
  animation: ivy-cloud-cross var(--c-dur, 240s) linear var(--c-delay, 0s) infinite;
  will-change: transform;
  pointer-events: none;
}
@keyframes ivy-cloud-cross {
  from { transform: translateX(-620px) scale(var(--c-scale, 1)); }
  to   { transform: translateX(calc(100vw + 620px)) scale(var(--c-scale, 1)); }
}

/* gating: ambience modes, calm, reduced motion */
body.ambience-disabled .ivy-cloud,
body.ambience-off .ivy-cloud,
.day-cycle-arc--calm .ivy-cloud {
  animation-play-state: paused;
}
@media (prefers-reduced-motion: reduce) {
  .ivy-cloud { animation: none; }
}

/* ── AMBIENCE PAINT-ORDER FIX ─────────────────────────────────────────
   The arc band SVG is appended AFTER the ambient-effects layer, so the
   band was painting OVER the clouds, sun and shooting stars — anything
   clipped inside the band was completely hidden underneath it. Lift the
   ambience above the band (clips still keep it INSIDE the band shape);
   the phase clock stays on top of everything. */
.day-cycle-arc__svg {
  z-index: 1;
}
.day-cycle-arc__ambient-effects {
  z-index: 2;
}
.day-cycle-arc__phase-clock {
  z-index: 3;
}

/* ── Cloud shape variants — different silhouettes & proportions ───────
   a = classic cumulus (the base .ivy-cloud look)
   b = long, flat stratus bank
   c = tall billowing cumulus tower */
.ivy-cloud--b {
  height: calc(var(--c-w, 340px) * 0.26);
  background:
    radial-gradient(44% 60% at 28% 52%, #ffffff 50%, rgba(255, 255, 255, 0) 60%),
    radial-gradient(38% 54% at 58% 44%, #fdfeff 48%, rgba(255, 255, 255, 0) 58%),
    radial-gradient(26% 42% at 80% 56%, #f8fbff 46%, rgba(255, 255, 255, 0) 56%),
    radial-gradient(72% 38% at 50% 74%, #fcfdff 58%, rgba(255, 255, 255, 0) 66%),
    radial-gradient(80% 20% at 50% 92%,
      color-mix(in srgb, var(--cloud-tint-color, #9fb4cd) 42%, #8b9db4) 38%,
      rgba(140, 160, 185, 0) 70%);
}
.ivy-cloud--c {
  height: calc(var(--c-w, 340px) * 0.5);
  background:
    radial-gradient(28% 30% at 48% 22%, #ffffff 52%, rgba(255, 255, 255, 0) 62%),
    radial-gradient(22% 24% at 64% 36%, #ffffff 48%, rgba(255, 255, 255, 0) 58%),
    radial-gradient(24% 28% at 33% 40%, #fbfdff 50%, rgba(255, 255, 255, 0) 60%),
    radial-gradient(18% 20% at 76% 52%, #f6fafe 46%, rgba(255, 255, 255, 0) 55%),
    radial-gradient(40% 34% at 50% 62%, #fdfeff 54%, rgba(255, 255, 255, 0) 63%),
    radial-gradient(52% 26% at 48% 82%, #f8fbff 52%, rgba(255, 255, 255, 0) 62%),
    radial-gradient(54% 14% at 50% 95%,
      color-mix(in srgb, var(--cloud-tint-color, #9fb4cd) 46%, #8b9db4) 36%,
      rgba(140, 160, 185, 0) 68%);
}

/* ── VOLUMETRIC CLOUDS — canvas sprites replace the gradient blobs ────
   The canvas carries the whole cloud (particle-stacked volume); kill the
   old CSS-gradient background and let the sprite keep its own aspect. */
canvas.ivy-cloud {
  background: none !important;
  height: auto;
  filter: blur(0.4px) drop-shadow(0 12px 26px rgba(70, 95, 130, 0.16));
}