/* Un solo paisaje continuo para toda la invitación. */
.invitation {
  position: relative;
  isolation: isolate;
  background: transparent;
}

.invitation::before {
  content: "";
  position: fixed;
  z-index: -2;
  inset: 0;
  background:
    linear-gradient(rgba(255, 250, 242, .5), rgba(255, 250, 242, .5)),
    url(../images/castillo-acuarela.png) center center / cover no-repeat;
  pointer-events: none;
}

.invitation::after {
  content: "";
  position: absolute;
  z-index: -1;
  inset: 0;
  background: linear-gradient(
    to bottom,
    rgba(255, 250, 242, .16),
    rgba(247, 216, 227, .12) 28%,
    rgba(220, 238, 246, .14) 58%,
    rgba(255, 250, 242, .12)
  );
  pointer-events: none;
}

.page-princess {
  position: fixed;
  z-index: 5;
  width: clamp(165px, 15vw, 265px);
  max-height: 46vh;
  object-fit: contain;
  pointer-events: none;
  filter: drop-shadow(0 14px 18px rgba(91, 55, 76, .2));
  animation: sidePrincessFloat 4.8s ease-in-out infinite;
}

.page-princess--left {
  bottom: 1.5vh;
  left: clamp(-32px, -1.5vw, -12px);
}

.page-princess--right {
  bottom: 1.5vh;
  right: clamp(-38px, -1.8vw, -14px);
  animation-delay: -2.4s;
}

.page-princess--top-left {
  top: 1.5vh;
  left: clamp(-28px, -1.2vw, -10px);
  animation-delay: -1.2s;
}

.page-princess--top-right {
  top: 1.5vh;
  right: clamp(-30px, -1.4vw, -12px);
  animation-delay: -3.6s;
}

@keyframes sidePrincessFloat {
  50% { transform: translateY(-7px); }
}

.intro,
.details,
.location,
.countdown-section {
  width: 100%;
  max-width: none;
  background: transparent;
}

.countdown-section {
  border-block: 1px solid rgba(255, 255, 255, .48);
  background: rgba(220, 211, 244, .22);
  backdrop-filter: blur(2px);
}

.detail-card {
  background: linear-gradient(145deg, rgba(255, 255, 255, .91), rgba(255, 250, 242, .76));
  backdrop-filter: blur(7px);
}

.map-frame {
  background: rgba(255, 255, 255, .72);
}

.rsvp {
  position: relative;
  isolation: isolate;
  overflow: hidden;
  background: linear-gradient(145deg, rgba(255, 255, 255, .9), rgba(247, 216, 227, .68));
  backdrop-filter: blur(8px);
}

.rsvp::before {
  content: "";
  position: absolute;
  z-index: -1;
  inset: 0;
  background:
    radial-gradient(circle at 8% 15%, rgba(189, 145, 56, .12), transparent 24%),
    radial-gradient(circle at 92% 84%, rgba(183, 95, 123, .15), transparent 30%);
  pointer-events: none;
}

.farewell {
  background: transparent;
}

.farewell__card {
  background: rgba(255, 255, 255, .78);
}

@media (max-width: 699px) {
  .invitation::before {
    position: absolute;
    background:
      linear-gradient(rgba(255, 250, 242, .46), rgba(255, 250, 242, .46)),
      url(../images/castillo-acuarela.png) center top / auto 100vh no-repeat;
    background-attachment: fixed;
  }

  .countdown-section {
    background: rgba(220, 211, 244, .2);
  }

  .page-princess {
    position: fixed;
    top: auto;
    bottom: auto;
    width: 106px;
    max-height: 205px;
    opacity: .96;
  }

  .page-princess--left { left: -28px; bottom: max(.75rem, env(safe-area-inset-bottom)); }
  .page-princess--right { right: -30px; bottom: max(.75rem, env(safe-area-inset-bottom)); }
  .page-princess--top-left { left: -27px; top: .75rem; }
  .page-princess--top-right { right: -29px; top: .75rem; }
}

@media (min-width: 700px) and (max-width: 1199px) {
  .page-princess {
    width: 150px;
    opacity: .94;
  }
}

@media (prefers-reduced-motion: reduce) {
  .page-princess { animation: none; }
}