/*
  moodboards.css — v2
  ─────────────────────────────────────────────────────────────────────────────
  Themes: data-moodboard="landscape" (default — add more freely)
  Times:  morning | day | evening | night   (driven by applyLocalMood() in app.js)
  Weather: data-weather="rain"              (set via JS, e.g. toggle button)

  New in v2
  ─────────
  • Much richer star field (two tiled layers + independent twinkle timing)
  • Shooting star that crosses the sky every ~8 s at night
  • Northern-lights aurora at night (CSS radial gradients + hue-rotate shimmer)
  • Morning ground mist that gently drifts
  • Rain weather layer (toggle body[data-weather="rain"] from JS)
  • City building windows that glow amber at evening / night
  • Rounder, softer clouds with filter: drop-shadow
  • All scene transitions 1 200 ms for smoother time-of-day crossfades
*/

/* ── SCENE CONTAINER ──────────────────────────────────────────────────────── */

.moodboard-scene {
  position: fixed;
  /* Replace inset: 0; with strict boundaries to prevent mobile scaling glitches */
  top: -20px;
  left: -20px;
  right: -20px;
  bottom: -20px;
  
  z-index: 0;
  overflow: hidden;
  pointer-events: none;
  background: linear-gradient(to bottom, var(--sky-top), var(--sky-mid) 55%, var(--sky-low));
  transition: background 1200ms ease;
}

/* ── DEFAULT: LANDSCAPE / DAY ────────────────────────────────────────────── */

body[data-moodboard="landscape"] {
  --sky-top:       #7fc5f0;
  --sky-mid:       #c9edf7;
  --sky-low:       #f3d38a;
  --hill-back:     #7dab72;
  --hill-front:    #4f8f54;
  --city-color:    rgba(46,57,71,0.46);
  --win-color:     rgba(255,220,120,0);   /* no glow during day */
  --star-opacity:  0;
  --sun-opacity:   1;
  --moon-opacity:  0;
  --cloud-opacity: 0.84;
  --mist-opacity:  0;
  --rain-opacity:  0;
  --aurora-opacity:0;
}

/* ── TIME OVERRIDES ──────────────────────────────────────────────────────── */

body[data-time="morning"] {
  --sky-top:       #84bde8;
  --sky-mid:       #f2d89d;
  --sky-low:       #f8b56d;
  --hill-back:     #82a96a;
  --hill-front:    #4d8248;
  --cloud-opacity: 0.55;
  --mist-opacity:  0.62;    /* morning mist rolls in */
}

body[data-time="evening"] {
  --sky-top:       #2a3d6a;
  --sky-mid:       #9e5c78;
  --sky-low:       #e09660;
  --hill-back:     #4a6b60;
  --hill-front:    #2f5a48;
  --city-color:    rgba(22,28,42,0.72);
  --win-color:     rgba(255,210,100,0.50);
  --star-opacity:  0.38;
  --sun-opacity:   0.26;
  --moon-opacity:  0;
  --cloud-opacity: 0.36;
  --aurora-opacity:0;
}

body[data-time="night"] {
  --sky-top:       #080f28;
  --sky-mid:       #111d3c;
  --sky-low:       #1e2b50;
  --hill-back:     #1c3130;
  --hill-front:    #132824;
  --city-color:    rgba(6,10,20,0.88);
  --win-color:     rgba(255,215,95,0.78);
  --star-opacity:  1;
  --sun-opacity:   0;
  --moon-opacity:  1;
  --cloud-opacity: 0.16;
  --aurora-opacity:0.30;
}

/* ── WEATHER: RAIN ───────────────────────────────────────────────────────── */
/* Toggle via JS:  document.body.dataset.weather = "rain"  (or remove it)    */

body[data-weather="rain"] {
  --sky-top:       #3d5470;
  --sky-mid:       #6a8aa0;
  --sky-low:       #9ab0c0;
  --cloud-opacity: 0.78;
  --sun-opacity:   0;
  --star-opacity:  0;
  --moon-opacity:  0;
  --rain-opacity:  1;
  --mist-opacity:  0.40;
}

/* ── STAR FIELD ──────────────────────────────────────────────────────────── */

.stars {
  position: absolute;
  inset: 0;
  opacity: var(--star-opacity, 0);
  transition: opacity 1500ms ease;
}

/* Layer A — larger, brighter stars, slow twinkle */
.stars::before {
  content: '';
  position: absolute;
  inset: 0;
  background-image:
    radial-gradient(circle, rgba(255,255,255,0.96) 0 1.5px, transparent 2px),
    radial-gradient(circle, rgba(255,255,255,0.82) 0 1px,   transparent 1.5px),
    radial-gradient(circle, rgba(255,255,255,0.90) 0 2px,   transparent 2.5px),
    radial-gradient(circle, rgba(255,255,255,0.72) 0 1px,   transparent 1.5px),
    radial-gradient(circle, rgba(255,255,255,0.94) 0 1.5px, transparent 2px),
    radial-gradient(circle, rgba(255,255,255,0.62) 0 1px,   transparent 1.5px),
    radial-gradient(circle, rgba(255,255,255,0.88) 0 1px,   transparent 1.5px);
  background-position:
    47px 23px,  134px 67px,  218px 41px,  312px 88px,
    423px 29px, 78px 112px,  189px 95px,  267px 54px,
    378px 130px,512px 71px,  623px 38px,  734px 108px,
    845px 62px, 923px 140px, 156px 155px, 490px 152px;
  background-size: 980px 180px;
  background-repeat: repeat-x;
  animation: twinkleA 3.8s ease-in-out infinite alternate;
}

/* Layer B — smaller, dimmer stars at different positions, faster twinkle */
.stars::after {
  content: '';
  position: absolute;
  inset: 0;
  background-image:
    radial-gradient(circle, rgba(255,255,255,0.78) 0 1px,   transparent 1.5px),
    radial-gradient(circle, rgba(255,255,255,0.92) 0 1.5px, transparent 2px),
    radial-gradient(circle, rgba(255,255,255,0.66) 0 1px,   transparent 1.5px),
    radial-gradient(circle, rgba(255,255,255,0.84) 0 1px,   transparent 1.5px),
    radial-gradient(circle, rgba(255,255,255,0.56) 0 1.5px, transparent 2px),
    radial-gradient(circle, rgba(255,255,255,0.74) 0 1px,   transparent 1.5px);
  background-position:
    23px 168px, 98px 182px,  201px 196px, 345px 174px,
    467px 190px,589px 166px, 701px 178px, 812px 193px,
    67px 210px, 432px 220px, 560px 200px, 680px 215px;
  background-size: 980px 100px;
  background-repeat: repeat-x;
  animation: twinkleB 2.6s ease-in-out infinite alternate-reverse;
}

/* ── SHOOTING STAR ───────────────────────────────────────────────────────── */

.shooting-star {
  position: absolute;
  top: 12%;
  left: 0;
  width: 140px;
  height: 1.5px;
  background: linear-gradient(
    to right,
    transparent 0%,
    rgba(255,255,255,0.15) 15%,
    rgba(255,255,255,0.95) 65%,
    rgba(255,255,255,0.60) 85%,
    transparent 100%
  );
  border-radius: 2px;
  opacity: 0;
  transform: rotate(-28deg);
  transform-origin: left center;
  animation: shoot 9s ease-in 2s infinite;
}

@keyframes shoot {
  0%   { opacity: 0;   left: -5%;  top: 8%; }
  2%   { opacity: 0.9; }
  14%  { opacity: 0;   left: 108%; top: 32%; }
  100% { opacity: 0;   left: -5%;  top: 8%; }
}

/* ── SUN ─────────────────────────────────────────────────────────────────── */
/*
  Solid opaque disc — the gradient never fades to transparent so the edge stays
  a clean crisp circle. Glow is done entirely via box-shadow layers instead.
*/
.sun {
  position: absolute;
  width: 72px;
  height: 72px;
  right: 13vw;
  top: 10vh;
  border-radius: 50%;
  opacity: var(--sun-opacity, 1);
  background: radial-gradient(circle at 38% 36%, #fffde0 0%, #ffe566 55%, #ffc93c 100%);
  box-shadow:
    0 0 0  10px rgba(255,228,80,0.22),   /* tight inner halo */
    0 0 0  26px rgba(255,210,60,0.11),   /* mid halo */
    0 0 70px 8px rgba(255,170,30,0.28);  /* soft outer glow */
  transition: opacity 1200ms ease;
}

/* ── MOON ────────────────────────────────────────────────────────────────── */

.moon {
  position: absolute;
  width: 72px;
  height: 72px;
  right: 14vw;
  top: 9vh;
  border-radius: 50%;
  opacity: var(--moon-opacity, 0);
  background: #eeead4;
  box-shadow:
    inset -16px 3px 0 #c5cdd8,
    0 0 40px 8px rgba(215,225,255,0.20);
  transition: opacity 1200ms ease;
}

/* ── AURORA ──────────────────────────────────────────────────────────────── */

.aurora {
  position: absolute;
  inset: 0;
  bottom: auto;
  height: 42%;
  opacity: var(--aurora-opacity, 0);
  background:
    radial-gradient(ellipse 55% 38% at 22% 0%,  rgba(70,220,175,0.38) 0%, transparent 72%),
    radial-gradient(ellipse 48% 32% at 60% 4%,  rgba(110,75,220,0.28) 0%, transparent 72%),
    radial-gradient(ellipse 38% 28% at 42% 0%,  rgba(50,195,240,0.22) 0%, transparent 70%),
    radial-gradient(ellipse 30% 24% at 78% 2%,  rgba(80,220,140,0.18) 0%, transparent 68%);
  mix-blend-mode: screen;
  animation: auroraShimmer 8s ease-in-out infinite alternate;
  transition: opacity 1800ms ease;
}

@keyframes auroraShimmer {
  0%   { filter: blur(14px) hue-rotate(0deg);    transform: scaleX(1);    }
  33%  { filter: blur(18px) hue-rotate(25deg);   transform: scaleX(1.04); }
  66%  { filter: blur(12px) hue-rotate(-15deg);  transform: scaleX(0.97); }
  100% { filter: blur(16px) hue-rotate(40deg);   transform: scaleX(1.02); }
}

/* ── CLOUDS ──────────────────────────────────────────────────────────────── */
/*
  Classic CSS cloud technique: a pill-shaped base + ::before puffs via
  box-shadow chains on a single positioned circle. Each shadow copy is a bubble.
  Much more reliable across browsers than background-image radial gradients.
*/
.cloud {
  position: absolute;
  width: 200px;
  height: 38px;
  background: rgba(255,255,255,0.92);
  border-radius: 100px;
  opacity: var(--cloud-opacity, 0.84);
  transition: opacity 900ms ease;
  filter: drop-shadow(0 3px 6px rgba(140,160,180,0.18));
}

/* The puff bumps sit above the pill base */
.cloud::before {
  content: '';
  position: absolute;
  width: 72px;
  height: 66px;
  background: rgba(255,255,255,0.92);
  border-radius: 50%;
  top: -38px;
  left: 22px;
  /* Each shadow = one more bubble: offset-x offset-y blur spread color */
  box-shadow:
    52px  6px  0  8px  rgba(255,255,255,0.88),  /* centre bump */
    96px 14px  0  0px  rgba(255,255,255,0.82);   /* right bump */
}

/* Tiny wisp on the right tail */
.cloud::after {
  content: '';
  position: absolute;
  width: 44px;
  height: 30px;
  background: rgba(255,255,255,0.80);
  border-radius: 50%;
  top: -14px;
  right: 14px;
}

.cloud-a { top: 14vh; left: -240px; animation: drift 56s linear         infinite; }
.cloud-b { top: 27vh; left: -200px; transform: scale(0.70); animation: drift 74s linear 14s infinite; }
.cloud-c { top:  8vh; left: -220px; transform: scale(0.52); animation: drift 82s linear 34s infinite; }

/* ── MORNING MIST ────────────────────────────────────────────────────────── */

.mist {
  position: absolute;
  bottom: 0;
  left: -10%;
  right: -10%;
  height: 30vh;
  opacity: var(--mist-opacity, 0);
  background: linear-gradient(
    to top,
    rgba(238,228,208,0.60) 0%,
    rgba(238,228,208,0.30) 40%,
    transparent 100%
  );
  filter: blur(10px);
  animation: mistDrift 20s ease-in-out infinite alternate;
  transition: opacity 1200ms ease;
}

@keyframes mistDrift {
  from { transform: translateX(-2.5%); }
  to   { transform: translateX(2.5%); }
}

/* ── RAIN ────────────────────────────────────────────────────────────────── */

.rain-layer {
  position: absolute;
  inset: 0;
  opacity: var(--rain-opacity, 0);
  transition: opacity 900ms ease;
  pointer-events: none;
}

/* Two offset streaks for parallax depth */
.rain-layer::before,
.rain-layer::after {
  content: '';
  position: absolute;
  inset: 0;
}

.rain-layer::before {
  background-image: repeating-linear-gradient(
    175deg,
    transparent         0px,
    transparent         4px,
    rgba(180,210,235,0.30) 4px,
    rgba(180,210,235,0.30) 5px
  );
  background-size: 5px 22px;
  animation: rainfall 0.38s linear infinite;
}

.rain-layer::after {
  background-image: repeating-linear-gradient(
    175deg,
    transparent         0px,
    transparent         9px,
    rgba(180,210,235,0.18) 9px,
    rgba(180,210,235,0.18) 10px
  );
  background-size: 8px 32px;
  animation: rainfall 0.55s linear 0.15s infinite;
}

@keyframes rainfall {
  from { background-position-y: 0; }
  to   { background-position-y: 32px; }
}

/* ── CITY SKYLINE ─────────────────────────────────────────────────────────── */

.city {
  position: absolute;
  left: 0;
  right: 0;
  bottom: 18vh;
  height: 200px;
  opacity: 0.88;
  overflow: hidden;
  transition:
    background 1200ms ease,
    opacity 1200ms ease;

  /* actual buildings */
  background:
    linear-gradient(
      to top,
      var(--city-color) 0,
      var(--city-color) 55px,
      transparent 55px
    ),
    repeating-linear-gradient(
      to right,
      transparent 0 24px,
      var(--city-color) 24px 58px,
      transparent 58px 72px,
      var(--city-color) 72px 110px,
      transparent 110px 128px,
      var(--city-color) 128px 170px
    );

  background-repeat: no-repeat;

  clip-path: polygon(
    0% 100%,
    0% 50%,
    4% 50%,
    4% 22%,
    8% 22%,
    8% 42%,
    13% 42%,
    13% 12%,
    18% 12%,
    18% 58%,
    24% 58%,
    24% 28%,
    30% 28%,
    30% 50%,
    36% 50%,
    36% 18%,
    41% 18%,
    41% 63%,
    47% 63%,
    47% 34%,
    54% 34%,
    54% 52%,
    60% 52%,
    60% 16%,
    66% 16%,
    66% 58%,
    70% 58%,
    70% 28%,
    79% 28%,
    79% 48%,
    86% 48%,
    86% 20%,
    91% 20%,
    91% 44%,
    100% 44%,
    100% 100%
  );
}

/* windows */
.city::after {
  content: '';
  position: absolute;
  inset: 0;
  pointer-events: none;
  opacity: 0.9;
  mix-blend-mode: screen;

  background:
    repeating-linear-gradient(
      to bottom,
      transparent 0 10px,
      var(--win-color, transparent) 10px 13px,
      transparent 13px 18px
    ),
    repeating-linear-gradient(
      to right,
      transparent 0 6px,
      var(--win-color, transparent) 6px 9px,
      transparent 9px 14px
    );

  transition: opacity 1200ms ease;
}

/* ── HILLS ───────────────────────────────────────────────────────────────── */

.hills {
  position: absolute;
  left: -5vw;
  right: -5vw;
  bottom: 0;
  height: 30vh;
  border-radius: 50% 50% 0 0 / 80% 80% 0 0;
}

.hill-back  {
  bottom: 8vh;
  height: 26vh;
  background: var(--hill-back, #7dab72);
  transform: rotate(-2deg);
  transition: background 1200ms ease;
}

.hill-front {
  background: var(--hill-front, #4f8f54);
  transform: rotate(2deg);
  transition: background 1200ms ease;
}

/* ── ANIMATIONS ──────────────────────────────────────────────────────────── */

@keyframes drift {
  from { translate: 0 0; }
  to   { translate: calc(100vw + 420px) 0; }
}

@keyframes twinkleA {
  from { filter: brightness(0.60) blur(0.3px); }
  to   { filter: brightness(1.30) blur(0px);   }
}

@keyframes twinkleB {
  from { filter: brightness(0.55) blur(0.2px); }
  to   { filter: brightness(1.20) blur(0px);   }
}