.fireflies,
.quiet-discoveries,
.narrative-voice {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
}

.fireflies {
  z-index: 82;
  pointer-events: none;
}

.firefly {
  --firefly-delay: 0s;
  --firefly-duration: 8s;

  position: absolute;
  left: var(--firefly-left);
  bottom: var(--firefly-bottom);
  width: clamp(3px, 0.28vw, 4px);
  aspect-ratio: 1;
  border-radius: 50%;
  background: rgb(var(--firefly-light));
  box-shadow:
    0 0 0.55rem rgba(var(--firefly-light), 0.88),
    0 0 1.35rem rgba(var(--firefly-light), 0.34);
  opacity: 0;
}

.fireflies.is-awake .firefly {
  animation: firefly-wander var(--firefly-duration) ease-in-out var(--firefly-delay) infinite;
}

.firefly--one {
  --firefly-left: 18%;
  --firefly-bottom: 18%;
}

.firefly--two {
  --firefly-left: 31%;
  --firefly-bottom: 24%;
  --firefly-delay: -2.8s;
  --firefly-duration: 9.4s;
}

.firefly--three {
  --firefly-left: 48%;
  --firefly-bottom: 17%;
  --firefly-delay: -5.1s;
  --firefly-duration: 7.6s;
}

.firefly--four {
  --firefly-left: 64%;
  --firefly-bottom: 25%;
  --firefly-delay: -1.7s;
  --firefly-duration: 10.2s;
}

.firefly--five {
  --firefly-left: 79%;
  --firefly-bottom: 20%;
  --firefly-delay: -6.4s;
  --firefly-duration: 8.7s;
}

.firefly--six {
  --firefly-left: 11%;
  --firefly-bottom: 29%;
  --firefly-delay: -4.2s;
  --firefly-duration: 9.8s;
}

.firefly--seven {
  --firefly-left: 24%;
  --firefly-bottom: 12%;
  --firefly-delay: -7.1s;
  --firefly-duration: 8.4s;
}

.firefly--eight {
  --firefly-left: 39%;
  --firefly-bottom: 31%;
  --firefly-delay: -3.4s;
  --firefly-duration: 10.6s;
}

.firefly--nine {
  --firefly-left: 55%;
  --firefly-bottom: 13%;
  --firefly-delay: -8.2s;
  --firefly-duration: 9.1s;
}

.firefly--ten {
  --firefly-left: 71%;
  --firefly-bottom: 34%;
  --firefly-delay: -5.7s;
  --firefly-duration: 10.9s;
}

.firefly--eleven {
  --firefly-left: 86%;
  --firefly-bottom: 28%;
  --firefly-delay: -2.2s;
  --firefly-duration: 8.9s;
}

.firefly--twelve {
  --firefly-left: 93%;
  --firefly-bottom: 12%;
  --firefly-delay: -6.8s;
  --firefly-duration: 9.7s;
}

.quiet-discoveries {
  z-index: 89;
  pointer-events: none;
}

.quiet-hotspot {
  position: absolute;
  z-index: 1;
  min-width: 2.75rem;
  min-height: 2.75rem;
  padding: 0;
  border: 0;
  background: transparent;
  cursor: pointer;
  pointer-events: auto;
  -webkit-tap-highlight-color: transparent;
}

.quiet-hotspot:focus-visible {
  outline: 1px solid rgba(246, 216, 121, 0.72);
  outline-offset: 0.2rem;
}

.quiet-hotspot:not(.builder-note)::before,
.quiet-hotspot:not(.builder-note)::after {
  content: "";
  position: absolute;
  left: var(--glint-left, 50%);
  top: var(--glint-top, 50%);
  pointer-events: none;
}

.quiet-hotspot:not(.builder-note)::before {
  width: 0.32rem;
  aspect-ratio: 1;
  border-radius: 50%;
  background: rgba(255, 239, 174, 0.94);
  box-shadow:
    0 0 0.45rem rgba(255, 235, 157, 0.76),
    0 0 1.1rem rgba(255, 235, 157, 0.32);
  transform: translate(-50%, -50%);
  animation: interaction-glint 4.6s ease-in-out var(--glint-delay, 0s) infinite;
}

.quiet-hotspot:not(.builder-note)::after {
  width: 1.5rem;
  aspect-ratio: 1;
  background:
    linear-gradient(to bottom, transparent 46%, rgba(255, 246, 205, 0.8) 49%, transparent 53%),
    linear-gradient(to right, transparent 46%, rgba(255, 246, 205, 0.8) 49%, transparent 53%);
  opacity: 0;
  transform: translate(-50%, -50%) scale(0.55) rotate(8deg);
  animation: interaction-rays 4.6s ease-in-out var(--glint-delay, 0s) infinite;
}

.quiet-hotspot:not(.builder-note):hover::before,
.quiet-hotspot:not(.builder-note):focus-visible::before {
  box-shadow:
    0 0 0.65rem rgba(255, 239, 174, 0.94),
    0 0 1.6rem rgba(255, 235, 157, 0.48);
}

.quiet-hotspot--horizon {
  --glint-left: 61%;
  --glint-top: 48%;
  --glint-delay: -2.4s;

  left: 4%;
  top: 42%;
  z-index: 0;
  width: 92%;
  height: 10%;
}

.quiet-hotspot--moon {
  --glint-delay: -0.7s;

  top: 9.5%;
  right: 11.5%;
  width: clamp(4rem, 8vw, 7rem);
  aspect-ratio: 1;
  border-radius: 50%;
}

.quiet-hotspot--lake {
  --glint-left: 57%;
  --glint-top: 43%;
  --glint-delay: -1.5s;

  left: 67%;
  bottom: 11%;
  width: clamp(28rem, 38vw, 46rem);
  height: clamp(8.5rem, 19vh, 12.5rem);
  border-radius: 50%;
  overflow: hidden;
  transform: translateX(-50%);
}

.quiet-hotspot--tree {
  --glint-left: 47%;
  --glint-top: 39%;
  --glint-delay: -3.3s;

  left: 27%;
  bottom: 20%;
  width: clamp(12rem, 19vw, 21rem);
  height: clamp(15rem, 36vh, 24rem);
  transform: translateX(-50%);
}

.quiet-hotspot--rock {
  left: 48%;
  bottom: 18%;
  z-index: 2;
  width: clamp(4rem, 8vw, 7rem);
  height: clamp(3rem, 7vh, 4.5rem);
}

.quiet-hotspot--flowers {
  --glint-left: 48%;
  --glint-top: 35%;
  --glint-delay: -4.1s;

  left: 28%;
  bottom: 13%;
  width: 22%;
  height: 10%;
}

.builder-note {
  z-index: 3;
  display: grid;
  place-items: center;
  overflow: visible;
}

.builder-note--beginning,
.builder-note--distance,
.builder-note--codes {
  width: 3.25rem;
  height: 3.25rem;
}

.builder-note--beginning {
  left: 32%;
  bottom: 27%;
  --note-rotation: -7deg;
  --note-delay: -1.3s;
}

.builder-note--distance {
  left: 90%;
  bottom: 24%;
  --note-rotation: 5deg;
  --note-delay: -3.7s;
}

.builder-note--codes {
  left: 15%;
  bottom: 12%;
  --note-rotation: -3deg;
  --note-delay: -5.2s;
}

.builder-note--rock {
  --note-rotation: 4deg;
  --note-delay: -2.5s;
}

.builder-note__paper {
  position: relative;
  display: block;
  width: 1.7rem;
  height: 1.25rem;
  border: 1px solid rgba(118, 99, 64, 0.4);
  border-radius: 0.08rem;
  background:
    repeating-linear-gradient(
      to bottom,
      transparent 0,
      transparent 0.32rem,
      rgba(113, 95, 66, 0.18) 0.34rem,
      transparent 0.36rem
    ),
    linear-gradient(145deg, #f2e8c4, #d8c897);
  box-shadow:
    0 0.15rem 0.2rem rgba(20, 28, 35, 0.28),
    0 0 1rem rgba(246, 216, 121, 0.34);
  transform: rotate(var(--note-rotation, -4deg));
  animation: note-beacon 5.6s ease-in-out var(--note-delay, 0s) infinite;
  pointer-events: none;
}

.builder-note__paper::after {
  content: "";
  position: absolute;
  top: -1px;
  right: -1px;
  width: 0.42rem;
  aspect-ratio: 1;
  background: linear-gradient(225deg, rgba(86, 72, 49, 0.34) 0 49%, #fff4cd 51%);
  clip-path: polygon(0 0, 100% 100%, 0 100%);
}

.builder-note:hover .builder-note__paper,
.builder-note:focus-visible .builder-note__paper {
  box-shadow:
    0 0.2rem 0.3rem rgba(20, 28, 35, 0.32),
    0 0 1.5rem rgba(255, 230, 143, 0.58);
}

.builder-note__paper.is-opened {
  animation: note-opened 1.7s ease-out;
}

.touch-ripple {
  position: absolute;
  left: var(--ripple-x);
  top: var(--ripple-y);
  width: 2rem;
  aspect-ratio: 2 / 1;
  border: 1px solid rgba(218, 240, 252, 0.74);
  border-radius: 50%;
  opacity: 0;
  transform: translate(-50%, -50%) scale(0.25);
  animation: touch-ripple 2.8s ease-out forwards;
}

.moon.is-listening {
  animation: moon-listen 2.6s ease-in-out;
}

.tree-crown.is-stirred::before {
  animation: tree-light-stir 2.8s ease-in-out;
}

.shoreline-rock.is-warm {
  animation: rock-warmth 2.4s ease-in-out;
}

.forest.is-breathing .forest-ridge--near {
  animation: forest-breathe 3.2s ease-in-out;
}

.flowers.is-stirred .flower::after {
  animation: flower-glimmer 2.4s ease-in-out;
}

.narrative-voice {
  z-index: 110;
  display: grid;
  place-items: end center;
  padding: 0 1rem clamp(2.5rem, 6vh, 4.5rem);
  pointer-events: none;
}

.narrative-voice__card {
  max-width: min(34rem, calc(100vw - 2rem));
  padding: 0.75rem 1rem;
  border-radius: 0.8rem;
  color: rgba(255, 246, 218, 0.92);
  text-align: center;
  text-shadow: 0 1px 1.2rem rgba(10, 20, 38, 0.72);
  opacity: 0;
  transform: translateY(0.55rem);
  transition:
    opacity 1.2s ease,
    transform 1.6s ease;
}

.narrative-voice.is-visible .narrative-voice__card {
  opacity: 1;
  transform: translateY(0);
}

.narrative-voice__speaker {
  display: none;
  margin-bottom: 0.35rem;
  color: rgba(247, 220, 128, 0.7);
  font-size: 0.68rem;
  letter-spacing: 0.08em;
  text-transform: uppercase;
}

.narrative-voice__text {
  margin: 0;
  font-family: Georgia, "Times New Roman", serif;
  font-size: clamp(0.95rem, 1.4vw, 1.15rem);
  line-height: 1.5;
}

.narrative-voice[data-voice="constructor"] .narrative-voice__card {
  position: relative;
  width: min(32rem, calc(100vw - 2rem));
  padding: 1.15rem 1.35rem 1.3rem;
  border: 1px solid rgba(112, 92, 58, 0.42);
  border-radius: 0.12rem;
  background:
    repeating-linear-gradient(
      to bottom,
      transparent 0,
      transparent 1.65rem,
      rgba(113, 95, 66, 0.1) 1.7rem,
      transparent 1.75rem
    ),
    linear-gradient(145deg, rgba(246, 236, 202, 0.98), rgba(215, 199, 151, 0.98));
  box-shadow:
    0 0.6rem 1.8rem rgba(13, 23, 35, 0.34),
    inset 0 0 1.5rem rgba(124, 103, 65, 0.09);
  color: rgba(63, 53, 39, 0.94);
  text-shadow: none;
  transform: translateY(0.55rem) rotate(-0.4deg);
  text-align: left;
}

.narrative-voice[data-voice="constructor"] .narrative-voice__card::after {
  content: "";
  position: absolute;
  top: -1px;
  right: -1px;
  width: 1rem;
  aspect-ratio: 1;
  background: linear-gradient(225deg, rgba(93, 76, 49, 0.32) 0 49%, #fff4cf 51%);
  clip-path: polygon(0 0, 100% 100%, 0 100%);
}

.narrative-voice.is-visible[data-voice="constructor"] .narrative-voice__card {
  transform: translateY(0) rotate(-0.4deg);
}

.narrative-voice[data-voice="constructor"] .narrative-voice__speaker {
  display: block;
  color: rgba(105, 83, 49, 0.78);
}

.narrative-voice[data-voice="constructor"] .narrative-voice__text {
  font-family: "Segoe Print", "Bradley Hand", "Comic Sans MS", cursive;
  font-size: clamp(0.9rem, 1.25vw, 1.05rem);
  line-height: 1.65;
}

@keyframes touch-ripple {
  0% {
    opacity: 0.72;
    transform: translate(-50%, -50%) scale(0.25);
  }

  100% {
    opacity: 0;
    transform: translate(-50%, -50%) scale(4.2);
  }
}

@keyframes moon-listen {
  0%,
  100% {
    filter: brightness(1);
    box-shadow: 0 0 3rem rgba(255, 231, 176, 0.2);
  }

  48% {
    filter: brightness(1.16);
    box-shadow: 0 0 4.4rem rgba(255, 231, 176, 0.36);
  }
}

@keyframes tree-light-stir {
  0%,
  100% {
    opacity: 1;
    transform: rotate(10deg) translateX(0);
  }

  50% {
    opacity: 0.72;
    transform: rotate(7deg) translateX(8%);
  }
}

@keyframes rock-warmth {
  0%,
  100% {
    filter: brightness(1);
  }

  50% {
    filter: brightness(1.18) saturate(1.08);
  }
}

@keyframes forest-breathe {
  0%,
  100% {
    transform: scaleY(1);
  }

  50% {
    transform: scaleY(1.035);
  }
}

@keyframes flower-glimmer {
  0%,
  100% {
    filter: brightness(1);
  }

  50% {
    filter: brightness(1.3) saturate(1.12);
  }
}

@keyframes firefly-wander {
  0%,
  100% {
    opacity: 0.12;
    transform: translate3d(-0.4rem, 0.3rem, 0) scale(0.72);
  }

  30% {
    opacity: 0.9;
    transform: translate3d(0.45rem, -0.7rem, 0) scale(1.08);
  }

  68% {
    opacity: 0.42;
    transform: translate3d(0.85rem, 0.1rem, 0) scale(0.88);
  }
}

@keyframes interaction-glint {
  0%,
  8%,
  34%,
  100% {
    opacity: 0.36;
    transform: translate(-50%, -50%) scale(0.72);
  }

  16% {
    opacity: 1;
    transform: translate(-50%, -50%) scale(1.28);
  }
}

@keyframes interaction-rays {
  0%,
  8%,
  28%,
  100% {
    opacity: 0;
    transform: translate(-50%, -50%) scale(0.55) rotate(8deg);
  }

  16% {
    opacity: 0.92;
    transform: translate(-50%, -50%) scale(1) rotate(0deg);
  }
}

@keyframes note-beacon {
  0%,
  100% {
    filter: brightness(0.9);
    transform: rotate(var(--note-rotation, -4deg)) translateY(0);
  }

  46% {
    filter: brightness(1.18);
    transform: rotate(var(--note-rotation, -4deg)) translateY(-0.15rem);
  }
}

@keyframes note-opened {
  0%,
  100% {
    transform: rotate(var(--note-rotation, -4deg)) scale(1);
  }

  42% {
    filter: brightness(1.25);
    transform: rotate(0) scale(1.2);
  }
}

@media (prefers-reduced-motion: reduce) {
  .fireflies.is-awake .firefly {
    animation: none;
    opacity: 0.42;
  }

  .touch-ripple,
  .moon.is-listening,
  .tree-crown.is-stirred::before,
  .shoreline-rock.is-warm,
  .forest.is-breathing .forest-ridge--near,
  .flowers.is-stirred .flower::after {
    animation-duration: 0.01ms;
  }

  .quiet-hotspot:not(.builder-note)::before,
  .quiet-hotspot:not(.builder-note)::after,
  .builder-note__paper,
  .builder-note__paper.is-opened {
    animation: none;
  }

  .quiet-hotspot:not(.builder-note)::before {
    opacity: 0.7;
  }

  .quiet-hotspot:not(.builder-note)::after {
    opacity: 0.34;
    transform: translate(-50%, -50%) scale(0.8);
  }

  .narrative-voice__card {
    transition-duration: 0.01ms;
  }
}