@font-face {
  font-family: "Forest Serif";
  font-style: normal;
  font-weight: 500;
  font-display: swap;
  src: url("/assets/forest-serif.8197bf53615d.woff2") format("woff2");
}

@font-face {
  font-family: "Forest Serif";
  font-style: italic;
  font-weight: 400;
  font-display: swap;
  src: url("/assets/forest-serif-italic.e48e58027030.woff2") format("woff2");
}

:root {
  color-scheme: dark;
  color: #f8f1df;
  background: #132b23;
  font-family: "Forest Serif", Georgia, serif;
  font-synthesis: none;
}

* {
  box-sizing: border-box;
}

body {
  min-height: 100svh;
  margin: 0;
  background: #132b23;
}

.postcard {
  position: relative;
  display: flex;
  flex-direction: column;
  min-height: 100svh;
  height: 100dvh;
  isolation: isolate;
  container-type: inline-size;
}

.welcome {
  position: relative;
  z-index: 2;
  width: 100%;
  display: flex;
  flex: 420 1 min(calc(100vw * 420 / 1161), 350px);
  flex-direction: column;
  justify-content: center;
  min-height: max-content;
  padding: 2.5rem 1rem;
  text-align: center;
  text-shadow: 0 2px 12px #10271f;
  background: url("/assets/house-desktop.21733f473e7d.webp") center top / 100% calc(100% * 1355 / 420) no-repeat;
}

h1 {
  margin: 0;
  font-size: clamp(3.25rem, 6vw, 5.5rem);
  font-weight: 500;
  line-height: 1.05;
  letter-spacing: -0.025em;
  text-wrap: balance;
  overflow-wrap: anywhere;
}

.welcome p {
  margin: 0.8rem 0 0;
  color: #ede3ca;
  font-size: clamp(1.25rem, 1.8vw, 1.65rem);
  font-style: italic;
  line-height: 1.5;
}

.scene {
  position: relative;
  flex: none;
  width: 100%;
  height: calc(100cqw * 400 / 1161);
  overflow: hidden;
}

.house {
  display: block;
  width: 100%;
  height: auto;
  aspect-ratio: 1161 / 1355;
  transform: translateY(calc(-100% * 420 / 1355));
}

.forest-floor {
  flex: 535 1 min(calc(100vw * 535 / 1161), 360px);
  min-height: 2rem;
  background: url("/assets/house-desktop.21733f473e7d.webp") center bottom / 100% calc(100% * 1355 / 535) no-repeat;
}

/* Contiguous rows of the same painting: canopy 0–420, house 420–820,
   foreground 820–1355. Their edges meet without overlap or crossfading.
   Only the canopy and ground adapt vertically; buildings keep their proportions.
   Decorative regions shrink to fit the viewport, but text can still expand
   the page when zoom or a short window needs more room. */

.fireflies {
  position: absolute;
  z-index: 3;
  overflow: hidden;
  pointer-events: none;
  inset: 0;
}

.fireflies span {
  position: absolute;
  top: 40%;
  left: 4%;
  width: 5px;
  height: 5px;
  border-radius: 50%;
  background: #fff8ba;
  box-shadow: 0 0 5px 1px #fff1a9, 0 0 16px 5px #edc96899;
  opacity: 0.8;
  animation: firefly-drift 12s ease-in-out infinite alternate, firefly-glow 4s ease-in-out infinite alternate;
}

.fireflies span:nth-child(2) {
  top: 71%;
  left: 12%;
  animation-delay: -7s, -2s;
  animation-duration: 15s, 5s;
}

.fireflies span:nth-child(3) {
  top: 58%;
  left: 33%;
  animation-delay: -4s, -1s;
}

.fireflies span:nth-child(4) {
  top: 83%;
  left: 67%;
  animation-delay: -9s, -3s;
  animation-duration: 14s, 6s;
}

.fireflies span:nth-child(5) {
  top: 37%;
  left: 95%;
  animation-delay: -3s, -2s;
}

.fireflies span:nth-child(6) {
  top: 91%;
  left: 24%;
  animation-delay: -5s, -3s;
  animation-duration: 17s, 5s;
}

.fireflies span:nth-child(7) {
  top: 64%;
  left: 88%;
  animation-delay: -11s, -1s;
}

.fireflies span:nth-child(8) {
  top: 23%;
  left: 16%;
  animation-delay: -2s, -3s;
  animation-duration: 16s, 6s;
}

.fireflies span:nth-child(9) {
  top: 19%;
  left: 84%;
  animation-delay: -8s, -2s;
}

.fireflies span:nth-child(10) {
  top: 75%;
  left: 48%;
  animation-delay: -1s, -1s;
  animation-duration: 13s, 5s;
}

.firefly-target {
  position: absolute;
  top: 50%;
  left: 50%;
  width: 44px;
  height: 44px;
  padding: 0;
  border: 0;
  border-radius: 50%;
  background: transparent;
  transform: translate(-50%, -50%);
  pointer-events: auto;
  cursor: pointer;
  touch-action: manipulation;
  -webkit-tap-highlight-color: transparent;
}

.firefly-target:focus-visible {
  outline: 2px solid #ffe6a3;
  outline-offset: -5px;
}

.fireflies span:focus-within,
.fireflies span.is-bursting,
.fireflies span:has(.firefly-target:hover) {
  animation-play-state: paused;
}

.fireflies span.is-bursting {
  background: transparent;
  box-shadow: none;
}

.fireworks {
  position: absolute;
  z-index: 4;
  overflow: hidden;
  pointer-events: none;
  inset: 0;
}

.firework,
.firework-spark {
  position: absolute;
  top: 0;
  left: 0;
}

.firework-spark {
  width: 4px;
  height: 4px;
  border-radius: 50%;
  background: #fff2be;
  box-shadow: 0 0 6px 2px #ffcf7099;
}

.firework-spark:nth-child(3n) {
  background: #eab35f;
}

.firework-quiet::after {
  content: "";
  position: absolute;
  width: 30px;
  height: 30px;
  border: 2px solid #f3d692;
  border-radius: 50%;
  transform: translate(-50%, -50%);
  box-shadow: 0 0 10px #eab35f66;
}

@keyframes firefly-drift {
  0% {
    transform: translate(-12px, 18px);
  }

  40% {
    transform: translate(14px, -10px);
  }

  70% {
    transform: translate(-4px, -25px);
  }

  100% {
    transform: translate(24px, -38px);
  }
}

@keyframes firefly-glow {
  0% {
    opacity: 0.35;
  }

  100% {
    opacity: 1;
  }
}

@media (width < 600px) {
  .welcome {
    padding: 2rem 0.75rem;
  }

  h1 span {
    display: block;
  }

  .welcome p {
    margin-top: 1.25rem;
  }

  .fireflies span {
    width: 4px;
    height: 4px;
  }
}

@media (width <= 480px) and (resolution <= 2dppx), (width <= 960px) and (resolution <= 1dppx) {
  .welcome,
  .forest-floor {
    background-image: url("/assets/house-mobile.273a8145e81e.webp");
  }
}

@media (prefers-reduced-motion: reduce) {
  .fireflies span {
    animation: none;
    opacity: 0.6;
  }

}

/* The lost trail shares the home scene and its accessible motion preferences. */
.lost-postcard .welcome {
  padding-block: 1.5rem;
  align-items: center;
}

.lost-postcard h1 {
  max-width: 18ch;
  font-size: clamp(2.5rem, 5vw, 4.5rem);
}

.lost-postcard .trail-marker {
  margin: 0 0 0.75rem;
  color: #f4d69a;
  font-size: 1rem;
  font-style: normal;
  letter-spacing: 0.16em;
  text-transform: uppercase;
}

.home-link {
  display: inline-flex;
  align-items: center;
  gap: 0.75rem;
  min-height: 48px;
  margin-top: 1.25rem;
  border: 1px solid #e4c68b;
  border-radius: 999px;
  padding: 0.65rem 1.35rem;
  color: #fff2d5;
  background: #19372f;
  font-size: 1.25rem;
  text-decoration: none;
  text-shadow: none;
}

.home-link:hover {
  background: #2b4b3b;
}

.home-link:focus-visible {
  outline: 3px solid #fff2d5;
  outline-offset: 5px;
}

/* A hidden visitor, revealed only by the secret sequence. */
.bear-trail {
  position: absolute;
  z-index: 2;
  inset: 0;
  overflow: hidden;
  pointer-events: none;
}

.bear {
  position: absolute;
  top: 0;
  left: 0;
  width: clamp(60px, 11vw, 156px);
  aspect-ratio: 180 / 110;
  transform-origin: center bottom;
}

.bear-drawing {
  display: block;
  overflow: visible;
  width: 100%;
  height: 100%;
}

.fairy-dance {
  position: fixed;
  inset: 0;
  z-index: 5;
  width: 100%;
  height: 100%;
  pointer-events: none;
}

.fairy-stop {
  position: fixed;
  z-index: 6;
  right: max(1rem, env(safe-area-inset-right));
  bottom: max(1rem, env(safe-area-inset-bottom));
  min-height: 44px;
  padding: 0.5rem 1rem;
  border: 1px solid #d6d6b96b;
  border-radius: 2rem;
  color: #f8f1df;
  background: #142b24ed;
  font: italic 1rem "Forest Serif", Georgia, serif;
  cursor: pointer;
}

.fairy-stop:focus-visible {
  outline: 2px solid #f8e6ad;
  outline-offset: 4px;
}