/* Warm royal refinement — emerald, rose, amber and ivory; intentionally no violet. */
:root {
  --ink: #082d32;
  --emerald: #075e56;
  --rose: #a74332;
  --amber: #e6ae50;
  --ivory: #fff8e9;
}

.invitation::after {
  background-image: url('royal-palace-wedding.png') !important;
  background-position: center center !important;
  filter: saturate(1.04) contrast(1.05) brightness(.72) sepia(.08) !important;
}

.invitation::before {
  background:
    radial-gradient(circle at 12% 10%, #e7ad4a42, transparent 27%),
    radial-gradient(circle at 90% 33%, #bb51403a, transparent 30%),
    radial-gradient(circle at 48% 88%, #0f8e7240, transparent 32%),
    linear-gradient(135deg, #062e32a8, #104e4aa0 48%, #7a302893 100%) !important;
  animation: royal-warm-drift 18s ease-in-out infinite alternate !important;
}

.invitation .hero::before {
  background: linear-gradient(180deg, #06262d20, #06323875 67%, #072b31c7) !important;
}

.invitation .hero-content {
  background:
    radial-gradient(circle at 14% 8%, #f6c76024, transparent 30%),
    radial-gradient(circle at 90% 93%, #d35c3b28, transparent 31%),
    linear-gradient(135deg, #073a3edb, #086257c6 49%, #a04835bc) !important;
  background-size: 180% 180% !important;
  border-color: #f5cf79d1 !important;
  box-shadow: 0 30px 85px #02191bd1, inset 0 0 0 6px #fff3c921 !important;
  backdrop-filter: blur(15px) saturate(1.2) !important;
  animation: warm-card-shift 13s ease-in-out infinite alternate !important;
}

.invitation.is-ready .hero-content {
  animation: guestHeroIn 1.05s cubic-bezier(.16, .85, .2, 1) both, warm-card-shift 13s ease-in-out 1.1s infinite alternate !important;
}

.invitation .hero-content::before,
.invitation .hero-content::after {
  color: #ffe4a3 !important;
  text-shadow: 0 0 20px #e69b35 !important;
}

.welcome-seal {
  background: linear-gradient(145deg, #ffe7a42e, #ffac7030) !important;
  box-shadow: 0 0 0 6px #f5d77d20, 0 0 32px #e6a1424f !important;
}

.invitation .hero .personal { color: #ffe3a0 !important; text-shadow: 0 2px 16px #053136 !important; }
.invitation .hero .request, .hero-note { color: #fff5e1 !important; }
.invitation .hero h1 { background: linear-gradient(130deg, #fffaf0, #ffdb82 43%, #ffd0a3 74%, #fffaf0) !important; -webkit-background-clip: text !important; background-clip: text !important; }
.invitation .hero .date { color: #ffe6a1 !important; }

.auth-screen {
  background:
    linear-gradient(130deg, #06313580, #0b6a5f61 48%, #9d452f78),
    url('royal-login-garden.png') center / cover no-repeat !important;
}

.auth-screen::before {
  background:
    radial-gradient(circle at 15% 24%, #e6a54c42, transparent 24%),
    radial-gradient(circle at 85% 28%, #c9513938, transparent 28%),
    radial-gradient(circle at 50% 92%, #18a68236, transparent 32%),
    linear-gradient(#04272c75, #06282dbc) !important;
}

.auth-screen::after { box-shadow: inset 0 0 0 5px #ffe9ad1a, 0 0 72px #d06a3d1f !important; }
.auth-halo { border-color: #f6c975ab !important; box-shadow: 0 0 0 19px #e7a84e1c, 0 0 0 42px #20a98615, 0 0 94px #d35c3b26 !important; }

.auth-card {
  /* royal-login.css starts this card transparent for its entrance animation.
     Our colour animation replaces that animation, so explicitly keep it visible. */
  opacity: 1 !important;
  transform: translateY(0) scale(1) !important;
  filter: none !important;
  background:
    radial-gradient(circle at 18% 10%, #e8b64c2c, transparent 28%),
    radial-gradient(circle at 91% 92%, #bd49372c, transparent 32%),
    linear-gradient(135deg, #06393edd, #08665bc6 52%, #99402fbc) !important;
  background-size: 180% 180% !important;
  border-color: #f5d388bd !important;
  box-shadow: 0 30px 78px #021214c9, inset 0 0 0 6px #fff1b322 !important;
  animation: warm-card-shift 13s ease-in-out infinite alternate !important;
}

.auth-card::before {
  background: conic-gradient(from 30deg, transparent, #ffcf6a28, transparent, #cf593827, transparent, #48c99d20, transparent) !important;
}

.auth-crest { background: linear-gradient(135deg, #ffe7a632, #e4664030) !important; box-shadow: 0 0 0 5px #ffdf861c, 0 0 26px #e37a3b45 !important; }
.auth-card h1 { background: linear-gradient(110deg, #fff9e9, #ffd778 44%, #ffd1a6 71%, #fff9e9) !important; -webkit-background-clip: text !important; background-clip: text !important; }
.auth-divider { background: linear-gradient(90deg, transparent, #f8d273, #e8784c, #58c7a5, #f8d273, transparent) !important; }
.auth-divider span { background: #075047 !important; }
.auth-card input { background: #0634398d !important; }
.auth-card .gold-button { background: linear-gradient(105deg, #ffe28b, #edac43 49%, #e67d47) !important; box-shadow: 0 5px 0 #a45431, 0 14px 34px #e9894330 !important; }

.event.event-card { background: linear-gradient(150deg, #074b50f5, #0a7b6eea) !important; border-color: #f4cc78a8 !important; box-shadow: 0 22px 46px #031a1da0 !important; }
.event.event-card:nth-child(3n + 2) { background: linear-gradient(150deg, #7d2d31f4, #bd5440e9) !important; }
.event.event-card:nth-child(3n + 3) { background: linear-gradient(150deg, #063742f5, #176c61eb) !important; }
.event.event-card:hover, .event.event-card:focus-within, .event.event-card:focus { box-shadow: 0 30px 58px #031719bd, 0 0 34px #e8ad4b31 !important; }
.event-facts span { background: #06333842 !important; border-color: #fff3ca55 !important; }
.event-facts b { color: #ffe39a !important; }
.event-directions { background: #042c3047 !important; }

.invitation .rsvp::before {
  background:
    radial-gradient(circle at 11% 42%, #edb64c2e, transparent 27%),
    radial-gradient(circle at 90% 25%, #ce563633, transparent 28%),
    radial-gradient(circle at 54% 88%, #1494742b, transparent 32%) !important;
}

.invitation .rsvp-form {
  background:
    radial-gradient(circle at 10% 8%, #f8c95b26, transparent 26%),
    radial-gradient(circle at 92% 95%, #c956372e, transparent 31%),
    linear-gradient(135deg, #064147e9, #087267d0 54%, #9b4433c8) !important;
  background-size: 190% 190% !important;
  border-color: #f7d68cbe !important;
  box-shadow: 0 28px 60px #02191dae, inset 0 0 0 5px #fff3c714 !important;
  backdrop-filter: blur(12px) saturate(1.18) !important;
  animation: warm-card-shift 15s ease-in-out infinite alternate !important;
}

.invitation .rsvp-form input,
.invitation .rsvp-form select,
.invitation .rsvp-form textarea {
  background: #06343cb5 !important;
  border-color: #f6d68b9e !important;
}

.invitation .rsvp-form input:focus,
.invitation .rsvp-form select:focus,
.invitation .rsvp-form textarea:focus {
  background: #06434ad9 !important;
  box-shadow: 0 0 0 3px #ffd27639, 0 0 22px #2bd3a43b !important;
}

.invitation .rsvp-form select option { background: #075149 !important; color: #fff8e7 !important; }
.meal-options label { background: #06343c94 !important; }

@keyframes royal-warm-drift {
  0% { background-position: 0% 0%; filter: saturate(1); }
  50% { background-position: 65% 42%; filter: saturate(1.1); }
  100% { background-position: 100% 100%; filter: saturate(1.04); }
}

@keyframes warm-card-shift {
  0%, 100% { background-position: 0% 0%; box-shadow: 0 30px 85px #02191bd1, inset 0 0 0 6px #fff3c921; }
  50% { background-position: 100% 100%; box-shadow: 0 35px 92px #02191dd8, 0 0 38px #e8ad4a2b, inset 0 0 0 6px #fff3c930; }
}

@media (max-width: 620px) {
  .invitation::after {
    background-image: url('royal-mobile-palace.png') !important;
    background-position: center center !important;
    background-size: cover !important;
    filter: saturate(1.03) contrast(1.04) brightness(.78) sepia(.07) !important;
  }

  .invitation::before {
    background:
      radial-gradient(circle at 50% 9%, #edb24a2f, transparent 27%),
      radial-gradient(circle at 10% 57%, #128d7340, transparent 31%),
      radial-gradient(circle at 91% 42%, #bb4c3835, transparent 31%),
      linear-gradient(180deg, #06313672, #084d4880 53%, #692b2e75) !important;
  }

  .invitation .hero {
    min-height: 100svh !important;
    padding: max(74px, env(safe-area-inset-top)) 16px 44px !important;
    place-items: start center !important;
  }

  .invitation .hero-content {
    margin-top: 20px;
    padding: 34px 19px 31px !important;
    background: linear-gradient(145deg, #073e44dc, #086359c9 52%, #994130bd) !important;
  }

  .invitation .hero h1 { font-size: clamp(4rem, 18vw, 5.2rem) !important; }
  .auth-screen { background-position: center center !important; }
  .auth-screen::before { background: linear-gradient(180deg, #04303680, #08615872 50%, #87382980) !important; }
  .auth-card { background: linear-gradient(145deg, #063e43dc, #087064c9 54%, #98412fba) !important; }
  .invitation .rsvp-form { padding: 27px 19px !important; }
}

@media (prefers-reduced-motion: reduce) {
  .invitation::before,
  .invitation .hero-content,
  .auth-card,
  .invitation .rsvp-form { animation: none !important; }
}