/* Royal garden finish. The locally generated illustrations remain unchanged. */
:root {
  --background: 39 70% 96%;
  --foreground: 342 22% 14%;
  --card: 43 100% 99%;
  --card-foreground: 342 22% 14%;
  --popover: 43 100% 99%;
  --popover-foreground: 342 22% 14%;
  --primary: 344 65% 26%;
  --primary-foreground: 39 70% 96%;
  --primary-glow: 347 55% 40%;
  --primary-deep: 339 68% 14%;
  --secondary: 35 48% 83%;
  --secondary-foreground: 344 65% 26%;
  --gold: 37 39% 54%;
  --gold-light: 41 60% 78%;
  --gold-deep: 29 42% 38%;
  --muted: 24 38% 91%;
  --muted-foreground: 342 19% 38%;
  --accent: 350 31% 87%;
  --accent-foreground: 344 65% 26%;
  --border: 33 37% 79%;
  --input: 33 37% 79%;
  --ring: 37 39% 54%;
  --gradient-velvet: linear-gradient(142deg, #731a35 0%, #4b0d24 55%, #2d0719 100%);
  --gradient-gold: linear-gradient(135deg, #f1ddba 0%, #c9a46a 52%, #936a3e 100%);
  --gradient-ivory: linear-gradient(180deg, #fffaf2 0%, #f4ece2 100%);
  --gradient-blush: linear-gradient(135deg, #f8eee9 0%, #f2e2dd 60%, #f7ede4 100%);
  --gradient-curtain: linear-gradient(90deg, #2d0719, #731a35 50%, #2d0719);
  --gradient-wax: radial-gradient(circle at 35% 30%, #b3445a, #6d1730 70%);
  --shadow-royal: 0 26px 70px -28px rgb(69 13 34 / 43%), 0 8px 24px -14px rgb(69 13 34 / 24%);
  --shadow-gold: 0 14px 36px -18px rgb(185 149 91 / 48%);
  --shadow-soft: 0 12px 34px -20px rgb(69 13 34 / 24%);
  --shadow-glow-gold: 0 0 30px rgb(214 182 126 / 40%);
}

body {
  color: #2a1b20;
  background: #fcf7ee;
  font-family: "Cormorant Garamond", Georgia, serif;
  font-size: 1.06rem;
}

h1, h2, h3, h4,
.font-pinyon,
.font-script {
  font-family: "Cormorant Garamond", Georgia, serif;
  font-style: normal;
  font-weight: 600;
  letter-spacing: -.045em;
}

.font-display {
  font-family: Cinzel, Georgia, serif;
  font-weight: 600;
  letter-spacing: .17em;
}

.font-serif-elegant {
  font-family: "Cormorant Garamond", Georgia, serif;
  font-weight: 500;
  letter-spacing: .005em;
}

.font-italianno {
  font-family: "Playfair Display", Georgia, serif;
  font-style: italic;
  font-weight: 400;
  letter-spacing: -.035em;
}

.shimmer-text,
#home .shimmer-text { color: #6d1730; }
#thanks .shimmer-text { color: #f7e9cf; }

.velvet-texture {
  background: radial-gradient(circle at 18% 12%, rgb(185 73 88 / 22%), transparent 35%),
    linear-gradient(145deg, #6d1730, #2d0719 75%);
}

.velvet-texture::before {
  background-image: repeating-linear-gradient(45deg, rgb(242 221 186 / 3%) 0 1px, transparent 1px 7px);
}

header {
  border-bottom: 1px solid rgb(185 149 91 / 18%);
}

header nav button.font-pinyon {
  font-family: "Cormorant Garamond", Georgia, serif;
  font-size: 1.85rem;
  font-weight: 700;
  letter-spacing: -.055em;
}

header nav button.font-pinyon span { color: #b9955b; }

section#home {
  background: linear-gradient(180deg, rgb(255 250 242 / 92%), rgb(255 250 242 / 74%) 52%, rgb(248 234 223 / 80%)),
    url("./udaipur-lake-editorial.webp") center center / cover no-repeat !important;
}

#home h1.font-pinyon {
  font-size: clamp(5.1rem, 16vw, 9.5rem);
  line-height: .9;
  letter-spacing: -.075em;
}

#home .font-italianno,
#thanks .font-italianno { line-height: 1.65; }

div[aria-label="Wedding invitation envelope"] { background: #fcf7ee; }

button[aria-label="Open Sarravanan and Dharaniswary wedding invitation"] {
  border-color: #d5bd9b;
  box-shadow: 0 30px 80px -28px rgb(69 13 34 / 38%);
}

button[aria-label="Open Sarravanan and Dharaniswary wedding invitation"]::after {
  color: #6d1730;
  font-family: "Cormorant Garamond", Georgia, serif;
  font-size: clamp(2.7rem, 9vw, 4.2rem);
  font-weight: 600;
  letter-spacing: -.065em;
}

div[aria-label="Wedding invitation envelope"] p:last-child {
  font-family: Cinzel, Georgia, serif;
  font-size: .7rem;
  letter-spacing: .19em;
}

#save-the-date {
  background: linear-gradient(115deg, rgb(255 250 242 / 97%), rgb(247 234 224 / 93%)),
    url("./garden-invitation-arch.webp") right center / 45% auto no-repeat;
}

#story { background: #fbf4ec; }
#events { background: #f7ece6; }
#venue { background: #f9f1e9; }
#wardrobe { background: #fffaf2; }

#events article {
  position: relative;
  isolation: isolate;
  border-color: rgb(185 149 91 / 40%);
  box-shadow: 0 18px 45px -28px rgb(69 13 34 / 35%);
  transform: perspective(1100px) rotateX(var(--tilt-x, 0deg)) rotateY(var(--tilt-y, 0deg));
  transition: transform .35s cubic-bezier(.2,.8,.2,1), box-shadow .35s ease, border-color .35s ease;
}

#events article::after {
  content: "";
  position: absolute;
  inset: 0;
  z-index: 3;
  pointer-events: none;
  border-radius: inherit;
  background: radial-gradient(340px circle at var(--pointer-x, 50%) var(--pointer-y, 50%), rgb(255 237 198 / 24%), transparent 58%);
  opacity: 0;
  transition: opacity .3s ease;
}

#events article:hover {
  box-shadow: 0 32px 64px -28px rgb(69 13 34 / 40%);
  border-color: #b9955b;
}

#events article:hover::after { opacity: 1; }

#events article img {
  filter: saturate(.94) contrast(1.02);
  transition: transform .7s cubic-bezier(.2,.8,.2,1), filter .7s ease;
}

#events article:hover img {
  transform: scale(1.045);
  filter: saturate(1.05) contrast(1.03);
}

#story .rounded-2xl,
#venue .rounded-2xl,
#wardrobe .rounded-2xl {
  border-color: rgb(185 149 91 / 36%);
  transition: transform .35s ease, box-shadow .35s ease, border-color .35s ease;
}

#story .rounded-2xl:hover,
#wardrobe .rounded-2xl:hover {
  transform: translateY(-5px);
  box-shadow: var(--shadow-royal);
  border-color: #b9955b;
}

#venue a {
  position: relative;
  overflow: hidden;
  transition: transform .25s ease, box-shadow .25s ease;
}

#venue a:hover {
  transform: translateY(-3px);
  box-shadow: var(--shadow-royal);
}

#venue a::after {
  content: "";
  position: absolute;
  inset: 0;
  pointer-events: none;
  background: linear-gradient(110deg, transparent 15%, rgb(255 255 255 / 20%) 48%, transparent 80%);
  transform: translateX(-130%);
  transition: transform .65s ease;
}

#venue a:hover::after { transform: translateX(130%); }

header button,
main button,
main a {
  transition: transform .25s ease, box-shadow .25s ease, color .25s ease, background-color .25s ease;
}

header button:active,
main button:active,
main a:active { transform: scale(.97); }

.premium-ripple {
  position: absolute;
  z-index: 5;
  width: 12px;
  height: 12px;
  border-radius: 50%;
  background: rgb(255 239 204 / 45%);
  pointer-events: none;
  transform: translate(-50%, -50%) scale(0);
  animation: premium-ripple .6s ease-out forwards;
}

@keyframes premium-ripple {
  to { opacity: 0; transform: translate(-50%, -50%) scale(18); }
}

#royal-scroll-progress {
  position: fixed;
  z-index: 60;
  top: 0;
  left: 0;
  width: 100%;
  height: 3px;
  background: linear-gradient(90deg, #8f2a46, #e8c98d, #8f2a46);
  transform: scaleX(var(--scroll-progress, 0));
  transform-origin: left center;
  pointer-events: none;
}

#thanks {
  background: linear-gradient(rgb(60 7 28 / 92%), rgb(45 7 25 / 96%)),
    url("./udaipur-lake-editorial.webp") center bottom / cover no-repeat !important;
}

#thanks .font-pinyon,
#thanks .font-italianno { color: #f9ecda; }

a:focus-visible,
button:focus-visible {
  outline-color: #b9955b;
}

@media (hover: hover) and (pointer: fine) {
  #home .font-display:hover { color: #9b3a50; }
  #story .rounded-full:hover { transform: rotate(9deg) scale(1.09); }
}

@media (max-width: 640px) {
  #home h1.font-pinyon { font-size: clamp(4.8rem, 22vw, 6.7rem); }
  #events article { transform: none; }
}

@media (prefers-reduced-motion: reduce) {
  #events article,
  #events article img,
  #story .rounded-2xl,
  #wardrobe .rounded-2xl,
  #venue a,
  header button,
  main button,
  main a { transition-duration: .01ms !important; }
  .premium-ripple { display: none; }
}