/* Dusk over Grădina Floreasca: botanical foreground, string lights, a glowing balloon. */

:root {
  --night: #1b2440;
  --dusk: #4a3f6b;
  --blush: #b7657c;
  --ember: #e8996a;
  --gold: #f3c58b;
  --balloon-width: clamp(150px, 16vw, 220px);
  --fly-x: 17vw;
  --fly-y: calc(-56vh - 8vw);
  --fly-scale: 0.34;
  --fly-duration: 18s;
  --fly-delay: 0.8s;
  --reveal-delay: 5.5s;
  color-scheme: dark;
}

body {
  color: var(--linen);
  background: var(--night);
}

.scene {
  position: relative;
  min-height: 100svh;
  overflow: hidden;
  isolation: isolate;
  background: linear-gradient(180deg, #121a33 0%, var(--night) 22%, var(--dusk) 48%, var(--blush) 68%, var(--ember) 84%, var(--gold) 100%);
}

.stars {
  position: absolute;
  inset: 0;
  z-index: 1;
}

.stars span {
  position: absolute;
  width: var(--size);
  height: var(--size);
  border-radius: 50%;
  background: var(--linen);
  opacity: var(--peak);
  box-shadow: 0 0 6px 1px rgba(255, 249, 236, 0.35);
  animation: twinkle 3.5s ease-in-out infinite alternate;
}

.moon {
  position: absolute;
  top: 9vh;
  right: 12vw;
  z-index: 1;
  width: clamp(56px, 6vw, 84px);
  aspect-ratio: 1;
  border-radius: 50%;
  background: radial-gradient(circle at 42% 38%, #fff8e6, var(--gold) 65%, #d9a96a);
  box-shadow: 0 0 40px 12px rgba(243, 197, 139, 0.28), 0 0 120px 40px rgba(243, 197, 139, 0.12);
}

.balloon-flight {
  left: 52%;
  bottom: -4%;
}

.balloon-svg {
  filter: drop-shadow(0 0 28px rgba(255, 190, 110, 0.55)) drop-shadow(0 20px 26px rgba(20, 20, 40, 0.35));
  animation: glow 2.2s ease-in-out infinite alternate;
}

.treeline,
.salon {
  position: absolute;
  left: 0;
  right: 0;
  bottom: -2px;
  width: 100%;
  height: clamp(170px, 28vh, 320px);
  display: block;
}

.treeline {
  z-index: 3;
}

.salon {
  z-index: 4;
  mask-image: linear-gradient(to bottom, #000 65%, transparent 95%);
}

.night-garden {
  position: absolute;
  inset: auto 0 0;
  z-index: 4;
  height: clamp(210px, 29vh, 330px);
  background: url("assets/garden-foreground.webp") center bottom / cover no-repeat;
  filter: brightness(0.63) saturate(0.7) hue-rotate(18deg);
  opacity: 0.85;
  mask-image: linear-gradient(to bottom, transparent, #000 32%);
  pointer-events: none;
}

.lights {
  position: absolute;
  left: -2%;
  right: -2%;
  bottom: clamp(90px, 14vh, 170px);
  z-index: 5;
  height: clamp(60px, 9vh, 120px);
  pointer-events: none;
}

.lights svg {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  overflow: visible;
}

.bulb {
  position: absolute;
  width: 9px;
  height: 9px;
  margin: 5px 0 0 -4.5px;
  border-radius: 50%;
  background: #fff1c6;
  box-shadow: 0 0 10px 3px rgba(255, 220, 150, 0.75), 0 0 26px 8px rgba(255, 190, 110, 0.35);
  animation: flicker 2.1s ease-in-out infinite alternate;
}

.note {
  position: absolute;
  left: clamp(20px, 7vw, 130px);
  top: calc(50% - 24px);
  z-index: 6;
  width: min(560px, 46vw);
  transform: translateY(-50%);
  display: grid;
  gap: 18px;
}

.is-ready .note {
  animation-name: reveal-note;
}

@keyframes reveal-note {
  from {
    opacity: 0;
    transform: translateY(calc(-50% + 18px));
  }

  to {
    opacity: 1;
    transform: translateY(-50%);
  }
}

.note h1 {
  font-size: clamp(3.4rem, 7vw, 6.4rem);
  color: var(--linen);
  text-shadow: 0 6px 40px rgba(20, 20, 40, 0.5);
}

.note p {
  color: rgba(255, 249, 236, 0.84);
  font-size: 1.02rem;
  text-shadow: 0 2px 18px rgba(20, 20, 40, 0.6);
}

.note .lead {
  font-size: 1.2rem;
  color: var(--linen);
}

.signature {
  font-style: italic;
}

.signature strong {
  font-style: normal;
  font-weight: 600;
  color: var(--linen);
}

.replay {
  border-color: rgba(255, 249, 236, 0.25);
  background: rgba(27, 36, 64, 0.6);
  color: var(--linen);
}

.replay:hover {
  background: rgba(27, 36, 64, 0.9);
}

@keyframes twinkle {
  from {
    opacity: calc(var(--peak, 1) * 0.35);
  }

  to {
    opacity: var(--peak, 1);
  }
}

@keyframes flicker {
  from {
    opacity: 0.6;
  }

  to {
    opacity: 1;
  }
}

@keyframes glow {
  from {
    filter: drop-shadow(0 0 22px rgba(255, 190, 110, 0.4)) drop-shadow(0 20px 26px rgba(20, 20, 40, 0.35));
  }

  to {
    filter: drop-shadow(0 0 34px rgba(255, 200, 120, 0.7)) drop-shadow(0 20px 26px rgba(20, 20, 40, 0.35));
  }
}

@media (max-width: 820px) {
  :root {
    --balloon-width: clamp(130px, 36vw, 170px);
    --fly-x: 14vw;
    --fly-y: -74svh;
    --fly-scale: 0.38;
    --fly-duration: 15s;
    --reveal-delay: 4s;
  }

  .scene {
    min-height: 100svh;
  }

  .moon {
    top: 6vh;
    right: 8vw;
  }

  .balloon-flight {
    left: 36%;
    bottom: 6%;
  }

  .night-garden {
    height: 26svh;
    background-position: 54% bottom;
    opacity: 0.68;
  }

  .note {
    top: auto;
    bottom: clamp(150px, 24vh, 260px);
    left: 20px;
    right: 20px;
    width: auto;
    transform: translateY(18px);
    gap: 14px;
  }

  .is-ready .note {
    animation-name: reveal;
  }

  .note h1 {
    font-size: clamp(2.8rem, 15vw, 4rem);
  }

  .note p {
    font-size: 0.95rem;
  }

  .note .lead {
    font-size: 1.05rem;
  }
}

@media (prefers-reduced-motion: reduce) {
  .stars span,
  .bulb,
  .balloon-svg {
    animation: none;
  }
}