:root { color-scheme: dark; }
html { background: #0a0809; }
body { overflow-x: hidden; }

#scroll-progress { box-shadow: 0 0 16px rgba(159, 16, 45, .8); }

.ambient-orb {
  position: fixed;
  z-index: 0;
  width: 28rem;
  height: 28rem;
  border-radius: 50%;
  background: rgba(159, 16, 45, .11);
  filter: blur(110px);
  pointer-events: none;
  animation: ambient-drift 16s ease-in-out infinite alternate;
}

.ambient-orb-one { top: 32vh; left: -18rem; }
.ambient-orb-two { right: -20rem; top: 160vh; animation-delay: -8s; }
main > section { position: relative; z-index: 1; }

.hero .parallax {
  inset: -8%;
  min-height: 116%;
  background-position: 52% 32%;
}

.hero::after {
  content: '';
  position: absolute;
  z-index: 1;
  inset: 0;
  background: radial-gradient(circle at 50% 68%, transparent 20%, rgba(10, 8, 9, .18) 58%, rgba(10, 8, 9, .55));
  pointer-events: none;
  animation: hero-vignette 7s ease-in-out infinite alternate;
}

.hero h1 { text-shadow: 0 18px 70px rgba(0, 0, 0, .65); }

.parallax-section .parallax {
  inset: -10%;
  min-height: 120%;
}

.reveal {
  opacity: 0;
  transform: translateY(24px);
  transition: opacity .8s ease, transform .8s cubic-bezier(.2, .7, .2, 1);
}

.reveal.is-visible { opacity: 1; transform: none; }
.reveal:nth-child(2) { transition-delay: .08s; }
.reveal:nth-child(3) { transition-delay: .14s; }
.field { display: grid; gap: .55rem; }
.field.hidden { display: none; }

.couple-photo { isolation: isolate; }
.couple-photo img {
  clip-path: polygon(0 5%, 91% 0, 100% 91%, 9% 100%);
  box-shadow: 0 35px 80px rgba(0, 0, 0, .45);
  transition: transform .8s cubic-bezier(.2, .7, .2, 1), filter .8s ease;
}
.couple-photo:hover img { transform: scale(1.025) rotate(-.35deg); filter: saturate(1.08); }
.photo-glow {
  position: absolute;
  z-index: -1;
  inset: 10% -8% -8% 8%;
  border-radius: 45% 55% 42% 58%;
  background: rgba(159, 16, 45, .28);
  filter: blur(40px);
  animation: photo-glow 5s ease-in-out infinite alternate;
}
.photo-date {
  position: absolute;
  right: -1rem;
  bottom: 1.5rem;
  border-radius: 999px;
  background: rgba(10, 8, 9, .88);
  padding: .75rem 1.1rem;
  color: #f3ece5;
  font-family: Prata, serif;
  font-size: .75rem;
  letter-spacing: .22em;
  box-shadow: 0 15px 40px rgba(0, 0, 0, .35);
  backdrop-filter: blur(12px);
}

.timeline li > span:first-child { animation: timeline-pulse 2.8s ease-in-out infinite; }
.timeline li:nth-child(2) > span:first-child { animation-delay: .45s; }
.timeline li:nth-child(3) > span:first-child { animation-delay: .9s; }

.wish-grid article {
  position: relative;
  overflow: hidden;
  transition: transform .45s cubic-bezier(.2, .7, .2, 1), background .45s ease;
}
.wish-grid article::after {
  content: '';
  position: absolute;
  width: 12rem;
  height: 12rem;
  right: -8rem;
  bottom: -8rem;
  border-radius: 50%;
  background: rgba(159, 16, 45, .14);
  filter: blur(12px);
  transition: transform .5s ease;
}
.wish-grid article:hover { z-index: 2; transform: translateY(-6px); background: #100b0d; }
.wish-grid article:hover::after { transform: translate(-2rem, -2rem) scale(1.25); }
.gallery-track img { filter: saturate(.88); transition: filter .6s ease, transform .6s ease; }
.gallery-track img:hover { filter: saturate(1.1); transform: scale(.985); }

.field span,
fieldset legend {
  color: rgba(255, 255, 255, .55);
  font-size: .75rem;
  letter-spacing: .12em;
  text-transform: uppercase;
}

.field input,
.field textarea,
.field select {
  width: 100%;
  border: 0;
  border-bottom: 1px solid rgba(255, 255, 255, .25);
  border-radius: 0;
  background: transparent;
  padding: .8rem 0;
  color: #fff;
  outline: none;
}

.field input:focus,
.field textarea:focus,
.field select:focus { border-color: #9f102d; }
.field input[readonly] { color: rgba(255, 255, 255, .75); }
.choice input { position: absolute; opacity: 0; }

.choice span {
  display: flex;
  min-height: 4rem;
  align-items: center;
  justify-content: center;
  border: 1px solid rgba(255, 255, 255, .18);
  padding: .8rem;
  text-align: center;
  font-size: .875rem;
  cursor: pointer;
}

.choice input:checked + span {
  border-color: #9f102d;
  background: rgba(159, 16, 45, .25);
}

.rsvp-button:active { transform: translateY(1px) scale(.98); }

.confetti-piece {
  position: absolute;
  left: 50%;
  top: 50%;
  width: 8px;
  height: 14px;
  border-radius: 2px;
  opacity: 0;
  animation: confetti-burst 1.05s cubic-bezier(.15, .65, .25, 1) forwards;
}

@keyframes confetti-burst {
  0% { opacity: 1; transform: translate(-50%, -50%) rotate(0) scale(.7); }
  100% { opacity: 0; transform: translate(calc(-50% + var(--x)), calc(-50% + var(--y))) rotate(var(--r)) scale(1); }
}

@keyframes ambient-drift { to { transform: translate3d(5rem, 8rem, 0) scale(1.15); } }
@keyframes hero-vignette { to { opacity: .72; } }
@keyframes photo-glow { to { transform: scale(1.12) translate(-3%, 3%); opacity: .72; } }
@keyframes timeline-pulse { 50% { filter: drop-shadow(0 0 7px rgba(159, 16, 45, .95)); opacity: .72; } }

.gallery-track {
  width: max-content;
  animation: gallery 28s linear infinite alternate;
}

@keyframes gallery { to { transform: translateX(calc(-100% + 100vw)); } }

@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  .reveal { opacity: 1; transform: none; transition: none; }
  .gallery-track { animation: none; overflow-x: auto; }
  .parallax { transform: none !important; }
  .confetti-piece { display: none; }
  .ambient-orb, .hero::after, .photo-glow, .timeline li > span:first-child { animation: none; }
  .couple-photo img, .wish-grid article, .gallery-track img { transition: none; }
}

@media (max-width: 767px) {
  .hero .parallax { background-position: 56% center; }
  .photo-date { right: .25rem; bottom: .75rem; }
  .gallery-track {
    width: 100%;
    overflow-x: auto;
    scroll-snap-type: x mandatory;
    padding-bottom: 1rem;
    animation: none;
  }
  .gallery-track img { scroll-snap-align: center; }
}

@media print {
  * { color: #111 !important; background: #fff !important; box-shadow: none !important; text-shadow: none !important; }
  .hero { min-height: 52vh !important; }
  .hero .parallax { display: none; }
  .hero h1 { font-size: 4rem !important; }
  .reveal { opacity: 1 !important; transform: none !important; }
  section { padding-top: 2rem !important; padding-bottom: 2rem !important; break-inside: avoid; }
  .parallax-section, .gallery-track, #rsvp form { display: none !important; }
  a { text-decoration: none; }
}