:root {
  --bg: #f6f3ee;
  --fg: #1f1d1a;
  --muted: #6b665e;
  --line: #ddd6cb;
  --accent: #a0522d;
}

@media (prefers-color-scheme: dark) {
  :root {
    --bg: #171614;
    --fg: #ece7df;
    --muted: #a39d93;
    --line: #34312c;
    --accent: #d98b5f;
  }
}

* { box-sizing: border-box; }

html, body {
  margin: 0;
  background: var(--bg);
  color: var(--fg);
  font-family: Georgia, "Times New Roman", serif;
  line-height: 1.55;
}

main {
  max-width: 820px;
  margin: 0 auto;
  padding: 56px 16px 32px;
}

header { text-align: center; margin-bottom: 32px; }

.eyebrow {
  margin: 0;
  font: 600 0.8rem/1 system-ui, sans-serif;
  letter-spacing: 0.2em;
  text-transform: uppercase;
  color: var(--accent);
}

h1 {
  margin: 12px 0 8px;
  font-size: clamp(2.6rem, 9vw, 4.2rem);
  font-weight: 400;
  letter-spacing: -0.01em;
}

.tagline { margin: 0; color: var(--muted); font-size: 1.1rem; }

.facade {
  margin: 0;
  overflow: hidden;
  border-radius: 12px;
  box-shadow: 0 1px 2px rgb(0 0 0 / 6%), 0 16px 40px rgb(0 0 0 / 10%);
  line-height: 0;
}

.scene { width: 100%; height: auto; display: block; }

footer {
  text-align: center;
  padding: 24px 16px 40px;
  color: var(--muted);
  font: 0.85rem system-ui, sans-serif;
}

/* ---------- Scene animation: one full day in 60 s ---------- */

.scene { --cycle: 60s; }

.scene .sky-dusk, .scene .sky-night, .scene .dim, .scene .stars,
.scene .sun, .scene .moon, .scene .glow .win, .scene .birds, .scene .clouds {
  animation-duration: var(--cycle);
  animation-timing-function: linear;
  animation-iteration-count: infinite;
}

.scene .sky-dusk  { opacity: 0; animation-name: dusk; }
.scene .sky-night { opacity: 0; animation-name: night; }
.scene .dim       { opacity: 0; animation-name: dim; }
.scene .stars     { opacity: 0; animation-name: night; }
.scene .sun       { animation-name: sun; }
.scene .moon      { opacity: 0; animation-name: moon; }
.scene .glow .win { opacity: 0; animation-name: glow; animation-delay: var(--d, 0s); }
.scene .birds     { animation-name: fly; }
.scene .clouds    { animation-name: cloudsNight; }

@keyframes dusk {
  0%, 32% { opacity: 0; }
  43%     { opacity: 1; }
  56%     { opacity: .3; }
  62%, 84% { opacity: 0; }
  91%     { opacity: .85; }
  100%    { opacity: 0; }
}
@keyframes night {
  0%, 42% { opacity: 0; }
  58%, 84% { opacity: 1; }
  95%, 100% { opacity: 0; }
}
@keyframes dim {
  0%, 40% { opacity: 0; }
  48%     { opacity: .18; }
  58%, 84% { opacity: .5; }
  93%, 100% { opacity: 0; }
}
@keyframes glow {
  0%, 46% { opacity: 0; }
  52%, 86% { opacity: 1; }
  91%, 100% { opacity: 0; }
}
@keyframes sun {
  0%   { transform: translate(0, 0); opacity: 1; }
  18%  { transform: translate(-360px, -100px); opacity: 1; }
  44%  { transform: translate(-810px, 410px); opacity: 1; }
  46%  { opacity: 0; transform: translate(-830px, 450px); }
  86%  { opacity: 0; transform: translate(160px, 460px); }
  88%  { opacity: 1; transform: translate(140px, 420px); }
  100% { transform: translate(0, 0); opacity: 1; }
}
@keyframes moon {
  0%, 45% { opacity: 0; transform: translate(40px, 90px); }
  54%  { opacity: 1; transform: translate(0, 0); }
  84%  { opacity: 1; transform: translate(-110px, -70px); }
  92%, 100% { opacity: 0; transform: translate(-150px, 0); }
}
@keyframes cloudsNight {
  0%, 42% { opacity: 1; }
  58%, 84% { opacity: .35; }
  95%, 100% { opacity: 1; }
}
@keyframes fly {
  0%     { transform: translate(1300px, 190px); }
  28%    { transform: translate(-200px, 110px); }
  28.01%, 100% { transform: translate(1300px, 190px); }
}

.scene .cloud {
  animation: drift var(--dur) linear infinite;
  animation-delay: var(--delay);
}
@keyframes drift {
  from { transform: translateX(var(--x)); }
  to   { transform: translateX(calc(var(--x) - 1700px)); }
}

.scene .star {
  animation: twinkle var(--d) ease-in-out infinite alternate;
  opacity: var(--o);
}
@keyframes twinkle { from { opacity: .35; } to { opacity: var(--o); } }

.scene .bird {
  transform-box: fill-box;
  transform-origin: 50% 100%;
  animation: flap var(--d) ease-in-out infinite alternate;
}
@keyframes flap { from { transform: scaleY(1); } to { transform: scaleY(-.6); } }

.scene .tree {
  transform-box: fill-box;
  transform-origin: 50% 100%;
  animation: sway 6s ease-in-out infinite alternate;
}
.scene .t2 { animation-duration: 4.5s; animation-delay: -2s; }
@keyframes sway { from { transform: rotate(-1deg); } to { transform: rotate(1deg); } }

.scene .tuft {
  transform-box: fill-box;
  transform-origin: 50% 100%;
  animation: rustle var(--d) ease-in-out infinite alternate;
}
@keyframes rustle { from { transform: skewX(-8deg); } to { transform: skewX(8deg); } }

@media (prefers-reduced-motion: reduce) {
  .scene * { animation: none !important; }
}