html, body { max-width: 100%; overflow-x: hidden; }

.rsvp-form .event-picker { display: block; margin-bottom: 1.6rem; }
.event-picker details { position: relative; }
.event-picker summary { display: flex; align-items: center; justify-content: space-between; min-height: 54px; padding: .9rem .3rem; border-bottom: 1px solid rgba(255,255,255,.47); background: rgba(255,255,255,.035); cursor: pointer; list-style: none; font: 300 1rem var(--sans); }
.event-picker summary::-webkit-details-marker { display: none; }
.event-picker summary i { font-style: normal; transition: transform .2s; }
.event-picker details[open] summary i { transform: rotate(180deg); }
.event-options { position: absolute; z-index: 20; left: 0; right: 0; top: calc(100% + 2px); padding: .55rem; background: #f1e6d2; color: #321c19; box-shadow: 0 18px 45px rgba(0,0,0,.34); }
.event-options label { display: grid; grid-template-columns: 24px 1fr; align-items: center; gap: 0 .55rem; padding: .7rem .55rem; cursor: pointer; font-style: normal; }
.event-options label:hover { background: rgba(101,29,39,.08); }
.event-options input { grid-row: 1 / 3; width: 18px; height: 18px; margin: 0; accent-color: #651d27; }
.event-options span { font: 500 .86rem var(--sans); }
.event-options small { font: 400 .66rem var(--sans); color: #76564c; }

.sacred-thread {
  position: fixed;
  z-index: 55;
  right: 18px;
  top: 18vh;
  width: 1px;
  height: 64vh;
  background: rgba(255, 234, 189, .2);
  pointer-events: none;
  opacity: 0;
  transition: opacity .5s;
}

body.invitation-open .sacred-thread { opacity: 1; }

.sacred-thread::before {
  content: '';
  position: absolute;
  inset: 0;
  transform: scaleY(var(--scroll-progress, 0));
  transform-origin: top;
  background: linear-gradient(#e8be6f, #fff0c7);
  box-shadow: 0 0 9px rgba(232, 190, 111, .6);
}

.sacred-thread span {
  position: absolute;
  left: 50%;
  top: calc(var(--scroll-progress, 0) * 100%);
  width: 10px;
  height: 10px;
  border: 1px solid #f3cf8b;
  border-radius: 50% 50% 50% 0;
  background: #9d3b37;
  box-shadow: 0 0 0 4px rgba(232,190,111,.13), 0 0 12px #e8be6f;
  transform: translate(-50%, -50%) rotate(-45deg);
  transition: top .08s linear;
}

.scroll-cue span { animation: invitation-bounce 1.7s ease-in-out infinite; }

@keyframes invitation-bounce {
  0%, 100% { transform: translateY(0); opacity: .55; }
  50% { transform: translateY(8px); opacity: 1; }
}

.petal-layer { position: fixed; inset: 0; z-index: 52; overflow: hidden; pointer-events: none; }
.falling-petal {
  position: absolute;
  top: -24px;
  width: 9px;
  height: 15px;
  border-radius: 80% 15% 75% 25%;
  background: linear-gradient(145deg, #e89565, #a83e45);
  opacity: 0;
  animation: petal-fall var(--fall-time) cubic-bezier(.24,.56,.48,.93) forwards;
}

.falling-petal.yellow {
  background: linear-gradient(145deg, #ffd358, #e69a19);
  box-shadow: 0 0 5px rgba(255, 196, 54, .25);
}

.havan-real { width: min(78vw, 390px); margin: .75rem auto 2rem; text-align: center; }
.havan-real img { display: block; width: 100%; aspect-ratio: 1; object-fit: cover; border-radius: 50% 50% 16px 16px; box-shadow: 0 24px 60px #140205aa, 0 0 0 1px #f2c87855; transition: opacity .09s linear; }
.havan-real img.changing { opacity: .88; }
.havan-real p { margin: 1.1rem auto 0; font: italic 1rem var(--serif); color: #f4d8a0; }

@keyframes petal-fall {
  0% { opacity: 0; transform: translate3d(0,-15px,0) rotate(0deg); }
  12% { opacity: .75; }
  100% { opacity: 0; transform: translate3d(var(--drift),105vh,0) rotate(var(--spin)); }
}

@media (max-width: 600px) { .sacred-thread { right: 9px; } }
@media (prefers-reduced-motion: reduce) {
  .scroll-cue span, .falling-petal { animation: none; }
  .sacred-thread span { transition: none; }
}