:root {
  --ivory: #f7efd9;
  --cream: #fff8df;
  --gold: #d4b25d;
  --gold-soft: rgba(212, 178, 93, 0.62);
  --forest: #07120c;
  --panel: rgba(12, 21, 15, 0.68);
  --shadow: rgba(0, 0, 0, 0.62);
}

* { box-sizing: border-box; }
html, body { min-height: 100%; margin: 0; }
body {
  background: var(--forest);
  color: var(--ivory);
  font-family: Georgia, "Times New Roman", serif;
}

.splash {
  position: relative;
  min-height: 100svh;
  display: grid;
  place-items: center;
  overflow: hidden;
  padding: clamp(1.2rem, 4vw, 3rem);
  isolation: isolate;
}

.background,
.shade {
  position: absolute;
  inset: 0;
}

.background {
  z-index: -4;
  background-image: url("assets/background/forest-glade-final.png");
  background-size: cover;
  background-position: center;
  transform: scale(1.025);
}

.shade {
  z-index: -3;
  background:
    radial-gradient(circle at 50% 43%, rgba(255, 240, 190, 0.22), transparent 30rem),
    linear-gradient(180deg, rgba(4, 10, 7, 0.28), rgba(2, 6, 4, 0.78)),
    linear-gradient(90deg, rgba(0, 0, 0, 0.50), transparent 35%, transparent 65%, rgba(0, 0, 0, 0.50));
}

.panel {
  width: min(92vw, 43rem);
  padding: clamp(2rem, 6vw, 4.2rem) clamp(1.4rem, 5vw, 4rem);
  text-align: center;
  border: 1px solid var(--gold-soft);
  border-radius: 999px 999px 2rem 2rem;
  background:
    linear-gradient(180deg, rgba(255, 248, 223, 0.08), rgba(3, 8, 5, 0.36)),
    var(--panel);
  box-shadow:
    0 2.2rem 6rem var(--shadow),
    inset 0 0 3rem rgba(255, 240, 190, 0.07);
  backdrop-filter: blur(3px);
}

.eyebrow {
  margin: 0 0 1rem;
  color: var(--gold);
  font-size: clamp(0.72rem, 2vw, 0.94rem);
  letter-spacing: 0.34em;
  text-transform: uppercase;
}

h1 {
  margin: 0;
  color: var(--cream);
  font-size: clamp(2.45rem, 8vw, 5.9rem);
  line-height: 0.91;
  font-weight: 400;
  text-shadow: 0 0.24rem 1rem rgba(0, 0, 0, 0.72);
}

h1 span {
  display: inline-block;
  color: var(--gold);
  font-size: 0.54em;
  line-height: 1.08;
  transform: translateY(-0.03em);
}

.message {
  margin: clamp(1.15rem, 3vw, 2rem) 0 0;
  color: var(--cream);
  font-size: clamp(1.05rem, 2.45vw, 1.45rem);
  line-height: 1.5;
}

.note {
  margin: 0.55rem auto 0;
  max-width: 31rem;
  color: rgba(247, 239, 217, 0.84);
  font-size: clamp(0.94rem, 2vw, 1.12rem);
  line-height: 1.55;
}

.corner,
.ornament,
.bird,
.figure {
  position: absolute;
  pointer-events: none;
  user-select: none;
}

.corner {
  width: clamp(4.6rem, 14vw, 10rem);
  opacity: 0.72;
  filter: drop-shadow(0 0.45rem 0.8rem rgba(0, 0, 0, 0.45));
}
.corner-top-left { top: 1rem; left: 1rem; }
.corner-top-right { top: 1rem; right: 1rem; }
.corner-bottom-left { bottom: 1rem; left: 1rem; }
.corner-bottom-right { bottom: 1rem; right: 1rem; }

.ornament {
  left: 50%;
  width: clamp(5.5rem, 17vw, 13rem);
  opacity: 0.62;
  transform: translateX(-50%);
}
.ornament-top { top: clamp(0.7rem, 2vw, 1.4rem); }
.ornament-bottom { bottom: clamp(0.7rem, 2vw, 1.4rem); }

.bird-fantail {
  left: clamp(0.7rem, 7vw, 6rem);
  top: 24%;
  width: clamp(4.2rem, 11vw, 8.5rem);
  opacity: 0.72;
  transform: rotate(-8deg);
}

.bird-tui {
  right: clamp(1rem, 8vw, 7rem);
  top: 15%;
  width: clamp(3.1rem, 8vw, 6rem);
  opacity: 0.74;
  transform: rotate(8deg);
}

.figure {
  bottom: 0;
  opacity: 0.86;
  filter: drop-shadow(0 1rem 1.2rem rgba(0, 0, 0, 0.55));
}

.priestess {
  left: 50%;
  width: clamp(7rem, 16vw, 13rem);
  transform: translateX(-50%);
  opacity: 0.30;
  z-index: -1;
}

.bride {
  left: clamp(0.6rem, 8vw, 8rem);
  width: clamp(5rem, 13vw, 10rem);
}

.groom {
  right: clamp(0.6rem, 8vw, 8rem);
  width: clamp(4.5rem, 11vw, 8.8rem);
}

@media (max-width: 720px) {
  .splash { padding: 1rem; }
  .panel { border-radius: 3rem 3rem 1.4rem 1.4rem; }
  .figure, .bird { opacity: 0.28; }
  .bride { left: -1.8rem; }
  .groom { right: -1.4rem; }
}

@media (prefers-reduced-motion: reduce) {
  * { scroll-behavior: auto !important; }
}