/* Final wedding details and the brighter seal treatment. */
.arabic {
  margin: 0 0 22px !important;
  color: #692d37 !important;
  -webkit-text-fill-color: #692d37;
  font-family: "Amiri", "Noto Naskh Arabic", serif !important;
  font-size: 23px !important;
  font-weight: 700 !important;
  line-height: 1.2 !important;
}

/* Keep the longer family details neatly separated on mobile screens. */
.welcome {
  padding: 56px 28px 48px !important;
}

.welcome .invite {
  margin-bottom: 18px !important;
}

.welcome .hosts {
  line-height: 1.15 !important;
}

.welcome .copy {
  margin: 28px 0 22px !important;
}

.welcome h1 {
  margin-top: 0 !important;
  font-family: "Italiana", "Cormorant Garamond", serif !important;
  font-size: 58px !important;
  font-weight: 400 !important;
  letter-spacing: .015em;
  gap: 6px !important;
}

.welcome h1 em {
  font-family: "Italiana", "Cormorant Garamond", serif !important;
  font-size: 32px !important;
}

.welcome h1 {
  color: #b88a3b !important;
  background: linear-gradient(110deg, #a97827 0%, #d6b15d 38%, #fff1b0 50%, #d6b15d 62%, #a97827 100%);
  background-size: 220% auto;
  -webkit-background-clip: text;
  background-clip: text;
  -webkit-text-fill-color: transparent;
  text-shadow: 0 0 12px rgba(214,177,93,.14);
  animation: none;
}

.invitation.open .welcome h1 {
  animation: nameSparkle 2.6s ease-out 1;
}

.welcome h1 em {
  color: #b88a3b !important;
}

.events header p,
.event-name {
  font-family: "Cormorant Garamond", serif !important;
  font-weight: 400 !important;
  letter-spacing: .08em !important;
}

.events header p {
  font-size: 47px !important;
}

.event-name {
  font-size: 42px !important;
}

@keyframes nameShimmer {
  0%, 55%, 100% { background-position: 100% center; }
  25% { background-position: 0% center; }
}

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

/* Reliable one-time sparkle when the welcome page opens. */
.invitation.open .welcome h1 {
  animation: nameSparkle 2.6s ease-out 1;
}

@keyframes nameSparkle {
  0%, 100% {
    filter: brightness(1);
    text-shadow: 0 0 12px rgba(214,177,93,.14);
  }
  32% {
    filter: brightness(1.5);
    text-shadow: 0 0 5px rgba(255,241,176,.95), 0 0 22px rgba(214,177,93,.7), 0 0 42px rgba(214,177,93,.35);
  }
  62% {
    filter: brightness(1.14);
    text-shadow: 0 0 3px rgba(255,241,176,.62), 0 0 12px rgba(214,177,93,.35);
  }
}

/* One gold sweep, then a steady gold finish. */
.welcome h1 {
  background: none;
  -webkit-text-fill-color: #b88a3b;
  animation: none;
}

.invitation.open .welcome h1 {
  animation: nameShimmer 2.4s ease-out 1;
}

.events header p {
  font-family: "Cormorant Garamond", serif !important;
  font-weight: 600 !important;
}

@keyframes nameShimmer {
  0% {
    background: linear-gradient(110deg, #a97827 0%, #d6b15d 38%, #fff1b0 50%, #d6b15d 62%, #a97827 100%);
    background-size: 220% auto;
    background-position: 100% center;
    -webkit-background-clip: text;
    background-clip: text;
    -webkit-text-fill-color: transparent;
  }
  72% {
    background-position: 0% center;
    -webkit-background-clip: text;
    background-clip: text;
    -webkit-text-fill-color: transparent;
  }
  100% {
    background: none;
    -webkit-text-fill-color: #b88a3b;
    color: #b88a3b;
  }
}

.envelope-letter i {
  font-family: "Great Vibes", cursive !important;
}

.envelope-letter p {
  font-family: "Italiana", "Cormorant Garamond", serif !important;
  font-size: 43px !important;
}

.welcome .family {
  margin: 28px 0 0 !important;
  line-height: 1.34 !important;
}

.welcome .sharing {
  position: static !important;
  margin: 34px 0 0 !important;
}

.welcome .scroll {
  bottom: 14px !important;
}

.seal {
  animation: sealGlow 2.1s ease-in-out infinite;
  isolation: isolate;
}

.seal::before {
  content: "";
  position: absolute;
  z-index: -1;
  inset: -28%;
  border-radius: 50%;
  background: radial-gradient(circle, rgba(255,250,225,.96) 0 17%, rgba(255,220,144,.68) 35%, rgba(241,181,97,.26) 53%, transparent 72%);
  filter: blur(8px);
  animation: sealHalo 2.1s ease-in-out infinite;
}

@keyframes sealGlow {
  0%, 100% { box-shadow: 0 4px 13px rgba(78,38,43,.42), 0 0 24px rgba(255,237,183,.92), 0 0 58px rgba(239,190,104,.64), 0 0 102px rgba(241,202,141,.36); }
  50% { box-shadow: 0 4px 16px rgba(78,38,43,.46), 0 0 42px rgba(255,250,220,1), 0 0 94px rgba(245,196,104,.95), 0 0 145px rgba(243,198,124,.58); }
}

@keyframes sealHalo {
  0%, 100% { transform: scale(.88); opacity: .66; }
  50% { transform: scale(1.18); opacity: 1; }
}