/* Shared sky: season, hour and weather tokens and the sky layers.
   Driven by body[data-season|data-time|data-weather] from atmosphere.js. */
/* —— Atmosphere tokens ——
   Registered so the whole scene eases between hours, seasons and weather. */
@property --sky-top { syntax: "<color>"; inherits: true; initial-value: #1c0a24; }
@property --sky-mid { syntax: "<color>"; inherits: true; initial-value: #5a2040; }
@property --sky-low { syntax: "<color>"; inherits: true; initial-value: #c86a4a; }
@property --glow { syntax: "<color>"; inherits: true; initial-value: rgba(255, 140, 90, 0.4); }
@property --veil-grey { syntax: "<color>"; inherits: true; initial-value: #3a3040; }
@property --cloud-base { syntax: "<color>"; inherits: true; initial-value: #b86a78; }
@property --stone-light { syntax: "<color>"; inherits: true; initial-value: #6a2f48; }
@property --stone-dark { syntax: "<color>"; inherits: true; initial-value: #24121c; }
@property --roof-light { syntax: "<color>"; inherits: true; initial-value: #6a2440; }
@property --roof-dark { syntax: "<color>"; inherits: true; initial-value: #26101c; }
@property --snow { syntax: "<color>"; inherits: true; initial-value: #d6c0cc; }
@property --season-far { syntax: "<color>"; inherits: true; initial-value: #a08058; }
@property --season-mid { syntax: "<color>"; inherits: true; initial-value: #8a6a3a; }
@property --season-near { syntax: "<color>"; inherits: true; initial-value: #6e5230; }
@property --season-foliage { syntax: "<color>"; inherits: true; initial-value: #c8662e; }
@property --season-bloom { syntax: "<color>"; inherits: true; initial-value: #e8b44a; }
@property --light { syntax: "<percentage>"; inherits: true; initial-value: 52%; }
@property --stars { syntax: "<number>"; inherits: true; initial-value: 0.35; }
@property --veil { syntax: "<number>"; inherits: true; initial-value: 0; }
@property --clouds { syntax: "<number>"; inherits: true; initial-value: 0.12; }
@property --fog { syntax: "<number>"; inherits: true; initial-value: 0; }
@property --weather-bright { syntax: "<number>"; inherits: true; initial-value: 1; }

body {
  /* hour: dusk is the default */
  --sky-top: #1c0a24;
  --sky-mid: #5a2040;
  --sky-low: #c86a4a;
  --glow: rgba(255, 140, 90, 0.4);
  --veil-grey: #3a3040;
  --cloud-base: #b86a78;
  --stone-light: #6a2f48;
  --stone-dark: #24121c;
  --roof-light: #6a2440;
  --roof-dark: #26101c;
  --snow: #d6c0cc;
  --light: 52%;
  --stars: 0.35;
  --asleep-bright: 0.8;
  --cel-x: 84%;
  --cel-y: 26%;
  --birds-t: 0;

  /* season */
  --season-far: #a08058;
  --season-mid: #8a6a3a;
  --season-near: #6e5230;
  --season-foliage: #c8662e;
  --season-bloom: #e8b44a;
  --bloom-on: 1;
  --crown-on: 1;
  --pine-base: #2f5a3c;

  /* weather */
  --veil: 0;
  --clouds: 0.12;
  --cloud-mix: 100%;
  --fog: 0;
  --clear: 1;
  --weather-bright: 1;
  --birds-w: 1;
  --cloud-pace: 1;
  --banner-pace: 4s;

  /* derived */
  --cloud: color-mix(in srgb, var(--cloud-base) var(--cloud-mix), #1c1c26);
  --hill-far: color-mix(
    in srgb,
    color-mix(in srgb, var(--season-far) 65%, var(--sky-low)) var(--light),
    var(--night-ink)
  );
  --hill-mid: color-mix(in srgb, var(--season-mid) var(--light), var(--night-ink));
  --hill-near: color-mix(in srgb, var(--season-near) var(--light), var(--night-ink));
  --ground-deep: color-mix(in srgb, var(--season-near) calc(var(--light) * 0.3), #0a0507);
  --foliage: color-mix(in srgb, var(--season-foliage) var(--light), var(--night-ink));
  --bloom: color-mix(in srgb, var(--season-bloom) var(--light), var(--night-ink));
  --pine: color-mix(in srgb, var(--pine-base) var(--light), var(--night-ink));
  --bark: color-mix(in srgb, #5a3a2a var(--light), var(--night-ink));
  --merlon: color-mix(in srgb, var(--stone-light) 72%, var(--stone-dark));
  --water-top: color-mix(in srgb, var(--sky-mid) 55%, #0a0610);
  --water-low: color-mix(in srgb, var(--sky-low) 25%, #0a0610);
}

body.atmos-ready {
  transition:
    --sky-top 3s ease, --sky-mid 3s ease, --sky-low 3s ease, --glow 3s ease,
    --veil-grey 3s ease, --cloud-base 3s ease, --stone-light 3s ease,
    --stone-dark 3s ease, --roof-light 3s ease, --roof-dark 3s ease, --snow 3s ease,
    --season-far 3s ease, --season-mid 3s ease, --season-near 3s ease,
    --season-foliage 3s ease, --season-bloom 3s ease, --light 3s ease,
    --stars 3s ease, --veil 3s ease, --clouds 3s ease, --fog 3s ease,
    --weather-bright 3s ease;
}

body[data-time="night"] {
  --sky-top: #0a0614;
  --sky-mid: #1e0c1c;
  --sky-low: #3a1628;
  --glow: rgba(110, 40, 70, 0.5);
  --veil-grey: #121018;
  --cloud-base: #3a2a3e;
  --stone-light: #4a1f34;
  --stone-dark: #1a1017;
  --roof-light: #3a1a36;
  --roof-dark: #120812;
  --snow: #8a92ae;
  --light: 24%;
  --stars: 1;
  --asleep-bright: 0.78;
  --cel-x: 76%;
  --cel-y: 9%;
}

body[data-time="dawn"] {
  --sky-top: #2e3462;
  --sky-mid: #a0688a;
  --sky-low: #f0b488;
  --glow: rgba(255, 200, 150, 0.5);
  --veil-grey: #7a7482;
  --cloud-base: #f0c0c0;
  --stone-light: #a0707e;
  --stone-dark: #4a2a3a;
  --roof-light: #8a3a56;
  --roof-dark: #3a1626;
  --snow: #f2dfe4;
  --light: 72%;
  --stars: 0.2;
  --asleep-bright: 0.9;
  --cel-x: 16%;
  --cel-y: 30%;
  --birds-t: 1;
}

body[data-time="day"] {
  --sky-top: #4f7fae;
  --sky-mid: #93b7d3;
  --sky-low: #ecd8bf;
  --glow: rgba(255, 244, 220, 0.45);
  --veil-grey: #9aa0ac;
  --cloud-base: #ffffff;
  --stone-light: #dcc2b2;
  --stone-dark: #8a6668;
  --roof-light: #a03e5a;
  --roof-dark: #4e1a2c;
  --snow: #f6f8fc;
  --light: 100%;
  --stars: 0;
  --asleep-bright: 0.96;
  --cel-x: 70%;
  --cel-y: 7%;
  --birds-t: 1;
}

body[data-season="spring"] {
  --season-far: #8aa884;
  --season-mid: #6d9a62;
  --season-near: #5a8a4e;
  --season-foliage: #86b565;
  --season-bloom: #f6bccd;
  --bloom-on: 1;
}

body[data-season="summer"] {
  --season-far: #6f915f;
  --season-mid: #54803f;
  --season-near: #3f6d36;
  --season-foliage: #3f7d3a;
  --season-bloom: #3f7d3a;
  --bloom-on: 0;
}

body[data-season="winter"] {
  --season-far: #d4dce8;
  --season-mid: #bcc8d8;
  --season-near: #a8b6c8;
  --season-foliage: #a8b6c8;
  --season-bloom: #ffffff;
  --bloom-on: 0;
  --crown-on: 0;
  --pine-base: #2a4a3a;
}

body[data-weather="cloudy"] {
  --veil: 0.4;
  --clouds: 0.85;
  --clear: 0.2;
  --weather-bright: 0.93;
}

body[data-weather="fog"] {
  --veil: 0.5;
  --clouds: 0.4;
  --cloud-mix: 90%;
  --fog: 1;
  --clear: 0;
  --weather-bright: 0.86;
  --birds-w: 0;
}

body[data-weather="rain"] {
  --veil: 0.55;
  --clouds: 0.95;
  --cloud-mix: 55%;
  --fog: 0.25;
  --clear: 0;
  --weather-bright: 0.8;
  --birds-w: 0;
}

body[data-weather="storm"] {
  --veil: 0.75;
  --clouds: 1;
  --cloud-mix: 35%;
  --fog: 0.15;
  --clear: 0;
  --weather-bright: 0.7;
  --birds-w: 0;
}

body[data-weather="snow"] {
  --veil: 0.4;
  --clouds: 0.85;
  --fog: 0.2;
  --clear: 0;
  --weather-bright: 0.92;
  --birds-w: 0;
}

body[data-windy="1"] {
  --cloud-pace: 0.45;
  --banner-pace: 1.3s;
}

/* —— Sky —— */
.sky {
  position: fixed;
  inset: 0;
  z-index: 0;
  pointer-events: none;
  overflow: hidden;
}

.sky__wash {
  position: absolute;
  inset: 0;
  background: linear-gradient(
    180deg,
    var(--sky-top) 0%,
    var(--sky-mid) 30%,
    var(--sky-low) 52%,
    var(--sky-low) 100%
  );
}

.sky__glow {
  position: absolute;
  inset: 0;
  background: radial-gradient(
    ellipse 70% 40% at var(--cel-x) 36%,
    var(--glow) 0%,
    transparent 70%
  );
  transition: background-position 3s ease;
}

.sky__stars,
.sky__stars::after {
  position: absolute;
  inset: 0 0 45%;
  opacity: calc(var(--stars) * var(--clear));
  background-image:
    radial-gradient(1px 1px at 12% 18%, rgba(255, 236, 200, 0.9), transparent),
    radial-gradient(1px 1px at 28% 8%, rgba(255, 236, 200, 0.7), transparent),
    radial-gradient(1.5px 1.5px at 72% 14%, rgba(255, 236, 200, 0.85), transparent),
    radial-gradient(1px 1px at 88% 22%, rgba(255, 236, 200, 0.6), transparent),
    radial-gradient(1px 1px at 55% 6%, rgba(255, 236, 200, 0.75), transparent),
    radial-gradient(1px 1px at 40% 24%, rgba(255, 236, 200, 0.5), transparent),
    radial-gradient(1.5px 1.5px at 6% 40%, rgba(255, 236, 200, 0.6), transparent),
    radial-gradient(1px 1px at 20% 52%, rgba(255, 236, 200, 0.45), transparent),
    radial-gradient(1px 1px at 94% 46%, rgba(255, 236, 200, 0.5), transparent),
    radial-gradient(1px 1px at 63% 32%, rgba(255, 236, 200, 0.55), transparent);
}

.sky__stars::after {
  content: "";
  inset: 0;
  background-image:
    radial-gradient(1.5px 1.5px at 34% 14%, rgba(255, 244, 220, 0.95), transparent),
    radial-gradient(1px 1px at 48% 38%, rgba(255, 244, 220, 0.7), transparent),
    radial-gradient(1px 1px at 81% 6%, rgba(255, 244, 220, 0.8), transparent),
    radial-gradient(1.5px 1.5px at 16% 30%, rgba(255, 244, 220, 0.75), transparent),
    radial-gradient(1px 1px at 67% 50%, rgba(255, 244, 220, 0.5), transparent),
    radial-gradient(1px 1px at 91% 34%, rgba(255, 244, 220, 0.65), transparent),
    radial-gradient(1px 1px at 3% 12%, rgba(255, 244, 220, 0.6), transparent),
    radial-gradient(1.5px 1.5px at 58% 20%, rgba(255, 244, 220, 0.85), transparent);
  opacity: 1;
  animation: twinkle 5.5s ease-in-out infinite;
}

.celestial {
  position: absolute;
  left: var(--cel-x);
  top: var(--cel-y);
  width: 5rem;
  height: 5rem;
  translate: -50% 0;
  border-radius: 50%;
  background: radial-gradient(
    circle,
    #fff9ec 0 36%,
    #ffe6ae 52%,
    rgba(255, 230, 174, 0) 70%
  );
  opacity: calc(1 - var(--veil) * 1.1);
  transition:
    left 3s ease,
    top 3s ease,
    width 3s ease,
    height 3s ease,
    background 3s ease;
}

body[data-time="dawn"] .celestial,
body[data-time="dusk"] .celestial {
  width: 6rem;
  height: 6rem;
  background: radial-gradient(
    circle,
    #ffe2b0 0 32%,
    #f5a263 50%,
    rgba(245, 140, 90, 0) 70%
  );
}

body[data-time="night"] .celestial {
  width: 2.6rem;
  height: 2.6rem;
  background: transparent;
  box-shadow: -0.65rem 0.25rem 0 0 #f4e8c8;
  filter: drop-shadow(0 0 10px rgba(244, 232, 200, 0.45));
}

.clouds {
  position: absolute;
  inset: 0 0 45%;
  opacity: var(--clouds);
}

.cloud {
  position: absolute;
  left: 0;
  width: 22rem;
  height: 5.5rem;
  border-radius: 50%;
  background:
    radial-gradient(ellipse 40% 60% at 30% 60%, var(--cloud) 0 40%, transparent 72%),
    radial-gradient(ellipse 35% 70% at 58% 45%, var(--cloud) 0 40%, transparent 72%),
    radial-gradient(ellipse 50% 50% at 50% 70%, var(--cloud) 0 45%, transparent 75%);
  filter: blur(3px);
  animation: cloud-drift linear infinite;
  will-change: transform;
}

.cloud--1 {
  top: 6%;
  animation-duration: calc(150s * var(--cloud-pace));
  animation-delay: -30s;
}

.cloud--2 {
  top: 17%;
  width: 30rem;
  height: 7rem;
  animation-duration: calc(200s * var(--cloud-pace));
  animation-delay: -130s;
}

.cloud--3 {
  top: 2%;
  width: 16rem;
  animation-duration: calc(120s * var(--cloud-pace));
  animation-delay: -80s;
}

.cloud--4 {
  top: 28%;
  width: 26rem;
  height: 6rem;
  animation-duration: calc(175s * var(--cloud-pace));
  animation-delay: -10s;
}

.birds {
  position: absolute;
  top: 13%;
  left: 0;
  width: 3.4rem;
  opacity: calc(var(--birds-t) * var(--birds-w) * 0.75);
  animation: birds-fly 70s linear infinite;
  transition: opacity 3s ease;
}

.birds svg {
  display: block;
  width: 100%;
  fill: none;
  stroke: color-mix(in srgb, var(--sky-top) 55%, #1a1020);
  stroke-width: 1.6;
  stroke-linecap: round;
  animation: birds-bob 3s ease-in-out infinite;
}

.sky__veil {
  position: absolute;
  inset: 0;
  background: color-mix(in srgb, var(--sky-mid) 45%, var(--veil-grey));
  opacity: var(--veil);
}

/* A single candle keeps watch while the castle sleeps after dark */

@keyframes twinkle {
  0%,
  100% {
    opacity: 1;
  }
  50% {
    opacity: 0.25;
  }
}

@keyframes cloud-drift {
  from {
    transform: translateX(-35rem);
  }
  to {
    transform: translateX(110vw);
  }
}

@keyframes birds-fly {
  from {
    transform: translateX(-4rem);
  }
  to {
    transform: translateX(110vw);
  }
}

@keyframes birds-bob {
  0%,
  100% {
    transform: translateY(0) scaleY(1);
  }
  50% {
    transform: translateY(-3px) scaleY(0.7);
  }
}

/* Festival skies, behind the castle; confetti in front of everything */
.festival-sky,
.festival-confetti {
  position: fixed;
  inset: 0;
  width: 100%;
  height: 100%;
  pointer-events: none;
}

.festival-sky {
  z-index: 0;
}

.festival-confetti {
  z-index: 36;
}