/*
 * Daytime phases. The daytime module (step 4) sets
 * <html data-phase="dawn|day|dusk|night">. Each phase only overrides tokens;
 * no selectors inside the SVG are needed. Defaults for "day" live in base.css.
 *
 * Add a new phase by adding one block here and extending the hour table in
 * src/modules/daytime.js.
 */

/* Registering the tokens lets the browser animate them (2 s fade between phases). */
@property --sky-top {
  syntax: "<color>";
  inherits: true;
  initial-value: #a9d3ea;
}
@property --sky-bottom {
  syntax: "<color>";
  inherits: true;
  initial-value: #e8f1f6;
}
@property --light-tint {
  syntax: "<color>";
  inherits: true;
  initial-value: transparent;
}

:root {
  transition: --sky-top 2s ease, --sky-bottom 2s ease, --light-tint 2s ease;
}

:root[data-phase="dawn"] {
  --sky-top: #9fb6d6;
  --sky-bottom: #f6c9a3;
  --light-tint: rgba(246, 170, 110, 0.18);
  --shadow-strength: 0.1;
}

:root[data-phase="dusk"] {
  --sky-top: #5d6ea6;
  --sky-bottom: #f2a66a;
  --light-tint: rgba(230, 120, 80, 0.22);
  --shadow-strength: 0.2;
}

:root[data-phase="night"] {
  --sky-top: #0f1b33;
  --sky-bottom: #2a3b5e;
  --light-tint: rgba(18, 30, 60, 0.55);
  --shadow-strength: 0.35;
}

/* The sky is a painted image; this rect lays a phase colour over it. */
.sky-tint {
  fill: var(--sky-tint, transparent);
  transition: fill 2s ease;
}
:root[data-phase="dawn"] { --sky-tint: rgba(246, 190, 150, 0.35); }
:root[data-phase="dusk"] { --sky-tint: rgba(236, 140, 90, 0.40); }
:root[data-phase="night"] { --sky-tint: rgba(12, 24, 52, 0.78); }

/* Distant mountains and forest darken with the sky; the overlay does the rest. */
#layer-mountains image,
#layer-forest image {
  transition: filter 2s ease;
}
:root[data-phase="night"] #layer-mountains image {
  filter: brightness(0.42) saturate(0.7);
}
:root[data-phase="night"] #layer-forest image {
  filter: brightness(0.7);
}
:root[data-phase="dusk"] #layer-mountains image {
  filter: brightness(0.85) sepia(0.25);
}

.beacon-logs {
  stroke: #4a3a22;
  stroke-width: 3;
  stroke-linecap: round;
}

/* The sun hides at night; the moon only exists at night (injected by JS). */
:root[data-phase="night"] #sun {
  opacity: 0;
}
#sun {
  transition: opacity 2s ease;
}

.moon {
  fill: #f1ecd8;
  opacity: 0.95;
}

.star {
  fill: #ffffff;
  opacity: 0.8;
  animation: twinkle 4s ease-in-out infinite;
}

.firefly {
  fill: #ffe98a;
  filter: drop-shadow(0 0 4px #ffe98a);
  opacity: 0;
  animation: firefly 7s ease-in-out infinite;
}

.beacon-flame {
  fill: #ffb347;
  transform-box: fill-box;
  transform-origin: center bottom;
  animation: flicker 0.9s ease-in-out infinite alternate;
}
.beacon-glow {
  fill: #ffb347;
  opacity: 0.18;
}

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

@keyframes firefly {
  0% { opacity: 0; transform: translate(0, 0); }
  20% { opacity: 1; }
  50% { opacity: 0.6; transform: translate(14px, -18px); }
  80% { opacity: 1; }
  100% { opacity: 0; transform: translate(-10px, -32px); }
}

@keyframes flicker {
  from { transform: scaleY(1) scaleX(1); }
  to { transform: scaleY(1.15) scaleX(0.92); }
}

@media (prefers-reduced-motion: reduce) {
  .star,
  .firefly,
  .beacon-flame {
    animation: none;
  }
  .firefly {
    opacity: 0.8;
  }
}