/* Illuminated champagne-glass cards — shared by the opening, sign-in, welcome and RSVP moments. */
:root {
  --glass-paper: rgb(255 252 244 / .76);
  --glass-champagne: rgb(245 226 191 / .64);
  --glass-jade: rgb(220 237 220 / .54);
  --glass-ink: #35261d;
  --glass-copy: #594331;
  --glass-gold: #b78643;
}

.royal-message,
.auth-card,
.invitation .hero-content,
.invitation .rsvp-form {
  isolation: isolate;
  border-color: rgb(186 138 70 / .78) !important;
  background:
    radial-gradient(ellipse at 17% 8%, rgb(255 255 255 / .94) 0 1%, transparent 22%),
    radial-gradient(ellipse at 89% 89%, rgb(193 116 95 / .20), transparent 26%),
    linear-gradient(132deg, var(--glass-paper), var(--glass-champagne) 52%, rgb(255 248 229 / .70)) !important;
  background-size: auto, auto, 100% 100% !important;
  box-shadow:
    0 27px 65px rgb(72 47 26 / .28),
    0 9px 23px rgb(255 239 196 / .22),
    inset 0 1px 0 rgb(255 255 255 / .92),
    inset 0 0 0 6px rgb(255 253 244 / .30),
    inset 0 0 0 8px rgb(190 145 81 / .22) !important;
  backdrop-filter: blur(22px) saturate(1.18) brightness(1.03) !important;
  -webkit-backdrop-filter: blur(22px) saturate(1.18) brightness(1.03) !important;
}

/* A fine glass rim and a slow reflection move independently of the card content. */
.royal-message::before,
.auth-card::before,
.invitation .hero-content::before,
.invitation .rsvp-form::before {
  inset: 12px !important;
  border: 1px solid rgb(168 119 55 / .47) !important;
  background:
    radial-gradient(circle at 20% 10%, rgb(255 255 255 / .70) 0 1px, transparent 2px),
    radial-gradient(circle at 80% 88%, rgb(205 145 80 / .22) 0 1px, transparent 2px),
    linear-gradient(112deg, transparent 33%, rgb(255 255 255 / .76) 48%, transparent 63%) !important;
  background-size: 69px 69px, 93px 93px, 240% 100% !important;
  opacity: .92 !important;
  animation: champagne-glass-sheen 9s ease-in-out infinite !important;
}

.royal-message::after,
.auth-card::after,
.invitation .hero-content::after,
.invitation .rsvp-form::after {
  content: '✾  ❦' !important;
  right: 22px !important;
  bottom: 16px !important;
  color: rgb(171 120 59 / .75) !important;
  font: 1.2rem / 1 'Cormorant Garamond', serif !important;
  letter-spacing: .13em;
  text-shadow: 0 0 16px rgb(255 245 197 / .85) !important;
  animation: glass-flora-float 5.5s ease-in-out infinite !important;
}

.royal-message > *,
.auth-card > *,
.invitation .hero-content > *,
.invitation .rsvp-form > * { z-index: 2 !important; }

/* Opening message */
.royal-message .eyebrow,
.auth-card .eyebrow,
.invitation .hero .personal,
.invitation .rsvp .eyebrow { color: #825d31 !important; }

.royal-message h1,
.auth-card h1,
.invitation .hero h1 { color: var(--glass-ink) !important; -webkit-text-fill-color: var(--glass-ink) !important; }
.royal-message h1 i,
.auth-card h1 i,
.invitation .hero h1 i { color: #aa7638 !important; -webkit-text-fill-color: #aa7638 !important; }
.royal-message > p:not(.eyebrow),
.auth-card .auth-intro,
.wedding-date,
.invitation .hero .request,
.hero-note { color: var(--glass-copy) !important; }
.royal-message .opening-date,
.invitation .hero .date { color: #946831 !important; }

.royal-message.is-visible {
  animation:
    orchid-message-arrive 1.15s cubic-bezier(.16,.84,.2,1) both,
    champagne-card-breathe 7.5s ease-in-out 1.1s infinite !important;
}

.royal-message .message-ornament,
.auth-crest span,
.welcome-seal i { color: #b8853f !important; }

/* Login card */
.auth-screen .auth-card {
  background:
    radial-gradient(ellipse at 11% 10%, rgb(255 255 255 / .94) 0 1%, transparent 21%),
    radial-gradient(ellipse at 88% 90%, rgb(126 166 125 / .22), transparent 27%),
    linear-gradient(132deg, rgb(255 252 243 / .74), rgb(231 239 214 / .62) 48%, rgb(247 227 202 / .71)) !important;
}

.auth-screen.login-enter .auth-card {
  animation:
    orchid-card-arrive 1s cubic-bezier(.16,.84,.2,1) both,
    champagne-card-breathe 7.5s ease-in-out 1.05s infinite !important;
}

.auth-crest,
.welcome-seal {
  background: rgb(255 252 243 / .57) !important;
  border-color: rgb(177 126 57 / .82) !important;
  box-shadow: 0 0 0 7px rgb(255 251 233 / .28), 0 10px 25px rgb(91 62 29 / .18) !important;
  backdrop-filter: blur(8px);
}

.auth-card input {
  background: rgb(255 253 247 / .62) !important;
  border-color: rgb(160 112 51 / .64) !important;
  color: #3f2d20 !important;
  box-shadow: inset 0 1px 0 rgb(255 255 255 / .78) !important;
}

.auth-card input::placeholder { color: #7a6b5c !important; }

/* Personalized welcome card */
.invitation .hero-content {
  background:
    radial-gradient(ellipse at 16% 8%, rgb(255 255 255 / .94) 0 1%, transparent 21%),
    radial-gradient(ellipse at 87% 90%, rgb(97 145 112 / .20), transparent 27%),
    linear-gradient(132deg, rgb(255 253 245 / .76), rgb(241 226 198 / .64) 49%, rgb(237 245 228 / .60)) !important;
}

.invitation.is-ready .hero-content {
  animation:
    orchid-card-arrive 1.08s cubic-bezier(.16,.84,.2,1) both,
    champagne-card-breathe 7.5s ease-in-out 1.12s infinite !important;
}

.invitation .hero .scroll-cue {
  position: relative;
  padding: 11px 20px;
  border: 1px solid rgb(171 121 58 / .56);
  border-radius: 999px;
  background: rgb(255 252 243 / .40);
  color: #4b392a !important;
  box-shadow: inset 0 1px 0 rgb(255 255 255 / .72);
  overflow: hidden;
  transition: transform .3s ease, background .3s ease, box-shadow .3s ease;
}

.invitation .hero .scroll-cue::after {
  content: '';
  position: absolute;
  inset: 0;
  background: linear-gradient(112deg, transparent 29%, rgb(255 255 255 / .75) 50%, transparent 69%);
  transform: translateX(-125%);
  transition: transform .65s ease;
}

.invitation .hero .scroll-cue:hover,
.invitation .hero .scroll-cue:focus-visible { transform: translateY(-3px); background: rgb(255 249 231 / .66); box-shadow: 0 9px 18px rgb(94 61 26 / .18); }
.invitation .hero .scroll-cue:hover::after,
.invitation .hero .scroll-cue:focus-visible::after { transform: translateX(125%); }

/* RSVP becomes transparent glass, while its fields remain deliberately easy to read. */
.invitation .rsvp-form {
  background:
    radial-gradient(ellipse at 14% 7%, rgb(255 255 255 / .92) 0 1%, transparent 22%),
    radial-gradient(ellipse at 88% 90%, rgb(100 150 118 / .21), transparent 29%),
    linear-gradient(132deg, rgb(255 253 245 / .65), rgb(228 239 220 / .55) 48%, rgb(249 229 204 / .62)) !important;
  box-shadow:
    0 28px 72px rgb(60 47 26 / .28),
    inset 0 1px 0 rgb(255 255 255 / .92),
    inset 0 0 0 7px rgb(255 253 243 / .25),
    inset 0 0 0 9px rgb(190 145 81 / .22) !important;
  animation: rsvp-glass-arrive .95s cubic-bezier(.16,.84,.2,1) both, champagne-card-breathe 8.5s ease-in-out 1s infinite !important;
}

.invitation .rsvp-form label,
.meal-choice legend { color: #4a3424 !important; }

.invitation .rsvp-form input,
.invitation .rsvp-form select,
.invitation .rsvp-form textarea {
  background: rgb(255 253 247 / .76) !important;
  border-color: rgb(160 112 51 / .63) !important;
  color: #3d2d20 !important;
  box-shadow: inset 0 1px 0 rgb(255 255 255 / .82) !important;
}

.invitation .rsvp-form input:focus,
.invitation .rsvp-form select:focus,
.invitation .rsvp-form textarea:focus {
  background: rgb(255 254 249 / .90) !important;
  box-shadow: 0 0 0 3px rgb(194 147 75 / .22), 0 0 22px rgb(109 154 122 / .30), inset 0 1px 0 white !important;
}

.meal-options label { background: rgb(255 253 247 / .51) !important; }
.rsvp-actions .text-button { background: rgb(255 252 243 / .43) !important; }

@keyframes champagne-glass-sheen {
  0%, 24% { background-position: 0 0, 0 0, -130% 0; }
  46%, 100% { background-position: 0 0, 0 0, 230% 0; }
}

@keyframes champagne-card-breathe {
  0%, 100% {
    box-shadow: 0 27px 65px rgb(72 47 26 / .28), 0 9px 23px rgb(255 239 196 / .22), inset 0 1px 0 rgb(255 255 255 / .92), inset 0 0 0 6px rgb(255 253 244 / .30), inset 0 0 0 8px rgb(190 145 81 / .22);
  }
  50% {
    box-shadow: 0 33px 76px rgb(72 47 26 / .34), 0 0 38px rgb(255 228 171 / .35), inset 0 1px 0 rgb(255 255 255 / .96), inset 0 0 0 6px rgb(255 253 244 / .38), inset 0 0 0 8px rgb(190 145 81 / .30);
  }
}

@keyframes glass-flora-float {
  0%, 100% { opacity: .54; transform: translateY(0) rotate(0); }
  50% { opacity: .96; transform: translateY(-7px) rotate(6deg); }
}

@keyframes rsvp-glass-arrive {
  from { opacity: 0; transform: translateY(27px) scale(.975); filter: blur(5px); }
  to { opacity: 1; transform: none; filter: none; }
}

@media (max-width: 620px) {
  .royal-message::before,
  .auth-card::before,
  .invitation .hero-content::before,
  .invitation .rsvp-form::before { inset: 9px !important; }

  .royal-message,
  .auth-card,
  .invitation .hero-content,
  .invitation .rsvp-form { backdrop-filter: blur(17px) saturate(1.13) !important; -webkit-backdrop-filter: blur(17px) saturate(1.13) !important; }
}

@media (prefers-reduced-motion: reduce) {
  .royal-message.is-visible,
  .auth-screen.login-enter .auth-card,
  .invitation.is-ready .hero-content,
  .invitation .rsvp-form,
  .royal-message::before,
  .auth-card::before,
  .invitation .hero-content::before,
  .invitation .rsvp-form::before,
  .royal-message::after,
  .auth-card::after,
  .invitation .hero-content::after,
  .invitation .rsvp-form::after { animation: none !important; }
}