:root {
  --ink: #100b2d;
  --paper: #f2efff;
  --intro-panel: #0f092b;
  --scratch-one: #6043d8;
  --scratch-two: #17104d;
}
body { background: radial-gradient(circle at 20% 30%, rgba(124,92,255,.1), transparent 35%), var(--paper); }
.invite-intro::before { content: ""; position: absolute; z-index: 1; width: 60vmin; height: 60vmin; border: 1px solid rgba(255,255,255,.1); border-radius: 50%; box-shadow: 0 0 0 10vmin rgba(255,255,255,.025), 0 0 0 20vmin rgba(255,255,255,.018); }
.hero::after { background: linear-gradient(180deg, rgba(9,6,35,.35), rgba(9,6,35,.02) 44%, rgba(9,6,35,.58)), radial-gradient(circle at 50% 40%, transparent 5%, rgba(7,5,26,.16) 72%); }
.hero-inner { position: relative; z-index: 3; }
.cosmic-mobile { position: absolute; z-index: 2; top: -3rem; width: clamp(9rem, 18vw, 16rem); pointer-events: none; transform-origin: 50% 0; filter: drop-shadow(0 1.2rem 1.6rem rgba(5,2,24,.42)); will-change: transform; }
.cosmic-mobile img { display: block; width: 100%; height: auto; }
.cosmic-mobile--left { left: -3rem; animation: cosmic-pendulum-left 7s ease-in-out infinite; }
.cosmic-mobile--right { top: -5rem; right: -3.5rem; width: clamp(8rem, 15vw, 13rem); opacity: .82; animation: cosmic-pendulum-right 8.2s ease-in-out infinite; }
.cosmic-twinkles { position: absolute; inset: 0; z-index: 1; overflow: hidden; pointer-events: none; }
.cosmic-twinkles i { position: absolute; width: .32rem; height: .32rem; border-radius: 50%; background: #fff; box-shadow: 0 0 .45rem .12rem var(--accent), 0 0 1.2rem .25rem rgba(255,255,255,.5); animation: cosmic-twinkle 2.4s ease-in-out infinite; }
.cosmic-twinkles i::before, .cosmic-twinkles i::after { content: ""; position: absolute; top: 50%; left: 50%; background: rgba(255,255,255,.85); transform: translate(-50%,-50%); }
.cosmic-twinkles i::before { width: 1.25rem; height: 1px; }
.cosmic-twinkles i::after { width: 1px; height: 1.25rem; }
.cosmic-twinkles i:nth-child(1) { top: 14%; left: 12%; animation-delay: -.3s; }
.cosmic-twinkles i:nth-child(2) { top: 24%; left: 34%; animation-delay: -1.4s; transform: scale(.65); }
.cosmic-twinkles i:nth-child(3) { top: 11%; left: 61%; animation-delay: -.8s; }
.cosmic-twinkles i:nth-child(4) { top: 31%; left: 84%; animation-delay: -1.9s; transform: scale(.7); }
.cosmic-twinkles i:nth-child(5) { top: 47%; left: 8%; animation-delay: -1.1s; }
.cosmic-twinkles i:nth-child(6) { top: 54%; left: 27%; animation-delay: -.4s; transform: scale(.55); }
.cosmic-twinkles i:nth-child(7) { top: 45%; left: 72%; animation-delay: -1.7s; }
.cosmic-twinkles i:nth-child(8) { top: 61%; left: 91%; animation-delay: -.9s; transform: scale(.6); }
.cosmic-twinkles i:nth-child(9) { top: 73%; left: 17%; animation-delay: -2s; }
.cosmic-twinkles i:nth-child(10) { top: 82%; left: 41%; animation-delay: -.6s; transform: scale(.7); }
.cosmic-twinkles i:nth-child(11) { top: 71%; left: 67%; animation-delay: -1.2s; }
.cosmic-twinkles i:nth-child(12) { top: 87%; left: 86%; animation-delay: -.15s; transform: scale(.55); }
@keyframes cosmic-pendulum-left { 0%,100% { transform: rotate(-5deg); } 50% { transform: rotate(5deg); } }
@keyframes cosmic-pendulum-right { 0%,100% { transform: scaleX(-1) rotate(-4deg); } 50% { transform: scaleX(-1) rotate(5deg); } }
@keyframes cosmic-twinkle { 0%,100% { opacity: .15; scale: .35; filter: blur(.6px); } 42% { opacity: 1; scale: 1.15; filter: blur(0); } 64% { opacity: .42; scale: .7; } }
.hero-title { text-shadow: 0 .06em 0 rgba(8,5,34,.15), 0 .12em .32em rgba(3,2,14,.35); }
.hero-title > span { display: inline-block; max-width: 100%; padding: .04em .08em .08em .02em; background: linear-gradient(135deg, #fff 35%, var(--accent)); background-clip: text; color: transparent; line-height: .82; }
.countdown-section { padding-top: 8rem; background: #100b2d; color: #fff; clip-path: polygon(0 3.5rem, 100% 0, 100% 100%, 0 100%); }
.countdown-section::before { content: ""; position: absolute; inset: 0; opacity: .25; background-image: radial-gradient(circle, var(--accent) 0 1px, transparent 1.5px); background-size: 55px 55px; mask-image: linear-gradient(to bottom, transparent, #000 20%, #000 80%, transparent); }
.countdown-section .flip-card { --flip-card-bg: rgba(255,255,255,.09); --flip-card-text: #fff; border-color: rgba(255,255,255,.14); }
.map-section { background: #100b2d; color: #fff; }
.map-layout { border-color: rgba(255,255,255,.14); background: linear-gradient(140deg, #1b114b, #110b31); }
.map-frame-wrap { border: .55rem solid rgba(255,255,255,.07); }
.save-date-section { background: #ded7ff; }
.scratch-card { background: #f6f3ff; }
.details-section { background: var(--paper); }
.detail-card { background: rgba(255,255,255,.55); box-shadow: 0 1.2rem 4rem rgba(33,20,89,.07); }
.detail-card:nth-child(1) { background: var(--primary); color: #fff; transform: rotate(-1deg); }
.detail-card:nth-child(2) { background: var(--accent); color: #12112b; transform: translateY(1.5rem) rotate(1deg); }
.detail-card:nth-child(3) { background: #fff; }
.text-link { display: inline-block; margin-top: 1rem; border-bottom: 1px solid currentColor; font-size: .72rem; font-weight: 900; text-transform: uppercase; }
.moments-section { background: linear-gradient(180deg, var(--paper), #ded7ff); }
.moment-card { background: #fff; box-shadow: 0 1.3rem 4rem rgba(26,15,76,.09); }
.moment-art { background: radial-gradient(circle at 35% 25%, var(--accent), transparent 30%), linear-gradient(155deg, var(--primary), #21126b 78%); color: #fff; }
.moment-art-2 { background: radial-gradient(circle at 70% 35%, var(--highlight), transparent 30%), linear-gradient(155deg, #181253, var(--primary)); }
.moment-art-3 { background: radial-gradient(circle, #fff 0 1px, transparent 2px), linear-gradient(155deg, #15103d, #4430a7); background-size: 32px 32px, auto; }
.message-section { overflow: hidden; background: #ded7ff; }
.message-section::before { content: "AARAV"; position: absolute; top: 48%; left: 50%; color: var(--primary); font-family: var(--display); font-size: min(24vw, 18rem); font-weight: 900; letter-spacing: -.09em; opacity: .05; transform: translate(-50%, -50%); }
.message-note { max-width: 34rem; margin: 1.5rem auto 0; line-height: 1.75; }
.rsvp-section { background: #ded7ff; }
.rsvp-card { background: linear-gradient(140deg, #0f0a2d, #251063 75%, #39136c); box-shadow: 0 2rem 5rem rgba(23,10,64,.25); }
.site-footer { background: #100b2d; color: #fff; }
.site-footer .brand-mark { background: rgba(255,255,255,.08); }
.site-footer button { border: 0; background: transparent; color: inherit; font-weight: 700; cursor: pointer; }

html[data-variant="girl"] .hero::after { background: linear-gradient(180deg, rgba(55,9,58,.35), transparent 45%, rgba(46,6,62,.52)), radial-gradient(circle at 50% 40%, rgba(230,92,255,.1), transparent 58%); }
html[data-variant="universal"] .marquee { background: var(--accent); }

@media (min-width: 900px) {
  .hero-inner { justify-items: start; text-align: left; }
  .hero-title { max-width: 7ch; }
  .hero-actions { justify-content: flex-start; }
  .hero-kicker, .hero-title, .hero-age, .hero-actions { margin-left: 8%; }
}
@media (max-width: 760px) {
  .hero { min-height: 100svh; }
  .hero-art { object-position: center center; }
  .hero-title { width: 100%; max-width: none; margin-top: 4vh; overflow: visible; font-size: clamp(4.2rem, 17.5vw, 6.6rem); line-height: .82; text-align: center; }
  .hero-title > span { max-width: calc(100vw - 2.2rem); }
  .countdown-section { clip-path: polygon(0 1.7rem, 100% 0, 100% 100%, 0 100%); }
  .detail-card:nth-child(n) { transform: none; }
  .cosmic-mobile { top: 2.8rem; left: -3.5rem; width: 8.6rem; opacity: .76; }
  .cosmic-mobile--right { top: 4.8rem; right: -3.2rem; left: auto; width: 7.2rem; opacity: .66; }
}

@media (prefers-reduced-motion: reduce) { .cosmic-mobile, .cosmic-twinkles i { animation: none; } .cosmic-twinkles i { opacity: .65; } }