/* rsvp.css — Aarav & Riya Wedding */

/* ===================== RSVP ===================== */
#rsvp {
  position: relative;
  padding: 7rem 2rem;
  overflow: hidden;
  background: var(--dark);
}

.rsvp__bg {
  position: absolute;
  inset: 0;
  background:
    radial-gradient(ellipse 80% 80% at 50% 50%, rgba(212,160,23,0.04) 0%, transparent 70%),
    linear-gradient(135deg, color-mix(in srgb, var(--dark) 92%, var(--rose)) 0%, var(--dark) 48%, color-mix(in srgb, var(--copper) 72%, var(--dark)) 100%);
}

#rsvp .rsvp__header h2 { color: var(--gold-light); text-shadow: 0 3px 18px rgba(0,0,0,.45); }
#rsvp .rsvp__note, #rsvp .form__radio-label, #rsvp .form__check-label { color: var(--ivory); }
#rsvp .form__label-text { color: var(--gold-pale); }
#rsvp .form__input, #rsvp .form__textarea { color: var(--white); }
#rsvp .form__float-label { color: color-mix(in srgb, var(--ivory) 78%, var(--rose)); }
#rsvp .form__input:focus ~ .form__float-label,
#rsvp .form__input:not(:placeholder-shown) ~ .form__float-label { color: var(--gold-light); }
#rsvp .form__input { border-bottom-color: color-mix(in srgb, var(--gold) 72%, transparent); }
#rsvp .form__textarea { border-color: color-mix(in srgb, var(--gold) 55%, transparent); }

.rsvp__mandala {
  position: absolute;
  inset: 0;
  background-image: url("data:image/svg+xml,%3Csvg width='200' height='200' viewBox='0 0 200 200' xmlns='http://www.w3.org/2000/svg'%3E%3Ccircle cx='100' cy='100' r='80' fill='none' stroke='%23D4A017' stroke-width='0.5' opacity='0.08'/%3E%3Ccircle cx='100' cy='100' r='60' fill='none' stroke='%23D4A017' stroke-width='0.5' opacity='0.08'/%3E%3Ccircle cx='100' cy='100' r='40' fill='none' stroke='%23D4A017' stroke-width='0.5' opacity='0.08'/%3E%3C/svg%3E");
  background-size: 200px 200px;
  opacity: 0.5;
}

.rsvp__header {
  text-align: center;
  margin-bottom: 3rem;
  position: relative;
  z-index: 2;
}

.rsvp__lotus {
  width: 60px;
  height: 60px;
  margin: 0 auto 1rem;
  display: block;
}

.rsvp__header h2 {
  font-family: var(--font-script);
  font-size: clamp(3rem, 8vw, 5rem);
  color: var(--gold);
  line-height: 1;
  margin-bottom: 0.5rem;
}

.rsvp__note {
  font-family: var(--font-body);
  font-size: 0.85rem;
  font-style: italic;
  color: rgba(250,243,224,0.7);
  letter-spacing: 0.1em;
}

.rsvp__form {
  max-width: 560px;
  margin: 0 auto;
  padding: 1.25rem clamp(1rem, 4vw, 2rem);
  box-sizing: border-box;
  position: relative;
  z-index: 2;
  display: flex;
  flex-direction: column;
  gap: 3rem;
}

/* Radio buttons */
.form__radio-group {
  display: flex;
  flex-direction: column;
  gap: 0.8rem;
}

.form__label-text {
  font-family: var(--font-display);
  font-size: 1rem;
  color: var(--gold-pale);
  margin-bottom: 0.6rem;
  display: block;
}

.form__radio {
  display: flex;
  align-items: center;
  gap: 0.8rem;
  cursor: pointer;
}

.form__radio input { display: none; }

.form__radio-ring {
  width: 22px;
  height: 22px;
  border: 2px solid var(--gold);
  border-radius: 50%;
  flex-shrink: 0;
  position: relative;
  transition: all 0.3s cubic-bezier(0.34, 1.56, 0.64, 1);
}

.form__radio-ring::after {
  content: '';
  position: absolute;
  inset: 3px;
  background: var(--gold);
  border-radius: 50%;
  transform: scale(0);
  transition: transform 0.3s cubic-bezier(0.34, 1.56, 0.64, 1);
}

.form__radio input:checked ~ .form__radio-ring::after { transform: scale(1); }
.form__radio input:checked ~ .form__radio-ring { box-shadow: 0 0 12px rgba(212,160,23,0.5); }

.form__radio-label {
  font-family: var(--font-body);
  font-size: 0.95rem;
  color: var(--ivory);
}

/* Floating label inputs */
.form__field {
  position: relative;
}

.form__input {
  width: 100%;
  background: transparent;
  border: none;
  border-bottom: 1.5px solid rgba(212,160,23,0.4);
  padding: 1rem 0 0.5rem;
  color: var(--ivory);
  font-family: var(--font-body);
  font-size: 1rem;
  outline: none;
  transition: border-color 0.3s ease;
  caret-color: var(--gold);
}

.form__input::placeholder { color: transparent; }

.form__input:focus { border-bottom-color: var(--gold); }

.form__input:focus ~ .form__float-label,
.form__input:not(:placeholder-shown) ~ .form__float-label {
  transform: translateY(-100%) scale(0.8);
  color: var(--gold);
}

.form__float-label {
  position: absolute;
  left: 0;
  top: 1rem;
  font-family: var(--font-body);
  font-size: 0.9rem;
  color: rgba(250,243,224,0.5);
  pointer-events: none;
  transform-origin: left;
  transition: transform 0.3s ease, color 0.3s ease;
}

.form__glow {
  position: absolute;
  bottom: 0;
  left: 0;
  height: 1.5px;
  width: 0%;
  background: var(--gold);
  transition: width 0.4s ease;
  box-shadow: 0 0 8px var(--gold);
}

.form__input:focus ~ .form__float-label ~ .form__glow { width: 100%; }
.form__input:focus ~ .form__glow { width: 100%; }
.form__field { padding: .45rem .35rem .7rem; }
.form__radio-group, .form__checkbox-group { padding: .35rem .35rem .55rem; }
.form__radio, .form__checkbox { transition: color .3s ease; }
.form__radio:hover, .form__checkbox:hover { transform: none; }

/* Textarea */
.form__textarea {
  width: 100%;
  background: transparent;
  border: 1.5px solid rgba(212,160,23,0.3);
  border-radius: 8px;
  padding: 1rem;
  color: var(--ivory);
  font-family: var(--font-body);
  font-size: 0.95rem;
  outline: none;
  resize: none;
  min-height: 100px;
  margin: .35rem .35rem 0;
  width: calc(100% - .7rem);
  transition: border-color 0.3s ease, box-shadow 0.3s ease;
}

.form__textarea:focus {
  border-color: var(--gold);
  box-shadow: 0 0 15px rgba(212,160,23,0.2);
}

/* Checkboxes */
.form__checkbox-group { display: flex; flex-direction: column; gap: 0.8rem; }

.form__checkbox {
  display: flex;
  align-items: center;
  gap: 0.8rem;
  cursor: pointer;
}

.form__checkbox input { display: none; }

.form__check-box {
  width: 20px;
  height: 20px;
  border: 2px solid var(--gold);
  border-radius: 3px;
  flex-shrink: 0;
  position: relative;
  transition: all 0.3s ease;
  overflow: hidden;
}

.form__check-box svg {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  stroke-dasharray: 30;
  stroke-dashoffset: 30;
  transition: stroke-dashoffset 0.3s ease;
}

.form__checkbox input:checked ~ .form__check-box {
  background: var(--gold);
  box-shadow: 0 0 10px rgba(212,160,23,0.4);
}

.form__checkbox input:checked ~ .form__check-box svg { stroke-dashoffset: 0; }

.form__check-label {
  font-family: var(--font-body);
  font-size: 0.9rem;
  color: var(--ivory);
}

/* Submit */
.form__submit {
  width: 100%;
  padding: 1.1rem;
  background: var(--gold);
  color: var(--dark);
  border: none;
  border-radius: 50px;
  font-family: var(--font-body);
  font-size: 0.9rem;
  font-weight: 700;
  letter-spacing: 0.2em;
  text-transform: uppercase;
  cursor: pointer;
  position: relative;
  overflow: hidden;
  transition: transform 0.3s ease, box-shadow 0.3s ease;
  box-shadow: 0 8px 25px rgba(212,160,23,0.4);
}

.form__submit::before {
  content: '';
  position: absolute;
  top: 0;
  left: -100%;
  width: 100%;
  height: 100%;
  background: linear-gradient(90deg, transparent, rgba(255,255,255,0.4), transparent);
  transition: left 0.5s ease;
}

.form__submit:hover { transform: translateY(-2px); box-shadow: 0 12px 35px rgba(212,160,23,0.5); }
.form__submit:hover::before { left: 100%; }
.form__submit:active { transform: translateY(1px) scale(.985); }

.form__submit.submitted {
  background: #2ecc71;
  color: white;
}

/* RSVP lotus floats */
.rsvp__lotus-float {
  position: absolute;
  opacity: 0.15;
  animation: float-bob 5s ease-in-out infinite;
  pointer-events: none;
}

/* ===================== VENUE ===================== */
#venue {
  margin-top: 100px;
  position: relative;
  width: 100%;
  display: block;
  background: #0d1840;
}

/* image wrapper: natural aspect ratio, full width, no clipping */




/* overlay sits on top of the image */


/* particles canvas — same size as image */


/* content floats over the image, centered */


/* On small screens where 100vw image gets too short,
   give the section a min-height so content doesn't squash */
@media (max-width: 600px) {
  #venue { min-height: 100vw; }
  
}











.venue__eyebrow {
  font-family: var(--font-body);
  font-size: 0.75rem;
  letter-spacing: 0.4em;
  color: rgba(250,243,224,0.6);
  text-transform: uppercase;
  margin-bottom: 1rem;
}

.venue__name {
  font-family: var(--font-display);
  font-size: clamp(3rem, 9vw, 7rem);
  font-weight: 300;
  color: var(--white);
  letter-spacing: 0.08em;
  line-height: 1;
  margin-bottom: 1rem;
}

.venue__divider {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 1rem;
  margin: 1.5rem auto;
}

.venue__divider-line {
  width: 60px;
  height: 1px;
  background: linear-gradient(90deg, transparent, var(--gold));
}

.venue__divider-line.right { background: linear-gradient(90deg, var(--gold), transparent); }

.venue__details-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(180px, 1fr));
  gap: 1.6rem;
  margin-top: 2.5rem;
  max-width: 700px;
  margin-left: auto;
  margin-right: auto;
  align-items: stretch;
}

.venue__detail-card {
  background: rgba(255,255,255,0.05);
  backdrop-filter: blur(12px);
  border: 1px solid rgba(212,160,23,0.25);
  border-radius: 12px;
  padding: 1.8rem 1.25rem;
  transition: transform 0.3s ease, border-color 0.3s ease;
  line-height: 1.4;
  text-align: center;
  min-height: 150px;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  opacity: 0;
  animation: venue-card-enter .8s cubic-bezier(.16,1,.3,1) forwards;
}
.venue__detail-card:nth-child(2){animation-delay:.12s}.venue__detail-card:nth-child(3){animation-delay:.24s}.venue__detail-card:nth-child(4){animation-delay:.36s}

.venue__detail-card:hover {
  transform: translateY(-4px);
  border-color: rgba(212,160,23,0.5);
}

.venue__detail-icon {
  font-size: 1.5rem;
  display: block;
  line-height: 1;
  margin-bottom: 0.85rem;
  transform: translateY(0) rotate(0deg) scale(1);
  transition: transform .55s cubic-bezier(.16,1,.3,1), filter .55s ease;
}

.venue__detail-label {
  font-family: var(--font-body);
  font-size: 0.7rem;
  letter-spacing: 0.2em;
  color: var(--gold);
  text-transform: uppercase;
  margin-bottom: 0.3rem;
  transition: letter-spacing .55s ease, color .55s ease;
}

.venue__detail-value {
  font-family: var(--font-display);
  font-size: 1rem;
  color: var(--white);
  line-height: 1.3;
  min-height: 2.6em;
  display: grid;
  align-content: center;
  transition: transform .55s cubic-bezier(.16,1,.3,1), color .55s ease;
}

.venue__detail-card:hover .venue__detail-icon { transform: translateY(-5px) rotate(-6deg) scale(1.16); filter: drop-shadow(0 5px 8px rgba(212,160,23,.45)); }
.venue__detail-card:hover .venue__detail-label { color: var(--gold-light); letter-spacing: .28em; }
.venue__detail-card:hover .venue__detail-value { color: var(--gold-pale); transform: translateY(-2px); }

@keyframes venue-card-enter { from { opacity: 0; transform: translateY(24px); } to { opacity: 1; transform: translateY(0); } }
@media (prefers-reduced-motion: reduce) { .venue__detail-card, .venue__detail-icon, .venue__detail-label, .venue__detail-value { animation: none; opacity: 1; transition: none; transform: none; } }

/* Venue floating elements */
.venue__float {
  position: absolute;
  pointer-events: none;
  z-index: 2;
}

.venue__peacock {
  bottom: 10%;
  right: 5%;
  width: clamp(80px, 15vw, 180px);
  opacity: 0.5;
  animation: float-bob 5s ease-in-out infinite;
  filter: drop-shadow(0 0 20px rgba(212,160,23,0.3));
}

.venue__marigold {
  top: 10%;
  left: 5%;
  width: clamp(60px, 10vw, 120px);
  opacity: 0.4;
  animation: float-bob 7s ease-in-out infinite 1s;
}

.venue__diya {
  top: 20%;
  right: 8%;
  width: clamp(40px, 7vw, 80px);
  opacity: 0.5;
  animation: glow-pulse 2.5s ease-in-out infinite;
}

@keyframes glow-pulse {
  0%, 100% { filter: drop-shadow(0 0 5px rgba(212,160,23,0.3)); }
  50% { filter: drop-shadow(0 0 20px rgba(212,160,23,0.8)); }
}

/* Warm wishes RSVP redesign */
#rsvp .rsvp__form { width: min(100%, 46rem); padding: clamp(1.25rem, 4vw, 2.5rem); border: 1px solid rgba(240,200,66,.35); border-radius: 1.5rem; background: rgba(13,26,58,.58); box-shadow: 0 24px 60px rgba(0,0,0,.24); backdrop-filter: blur(8px); }
#rsvp .form__radio-group { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: .75rem; }
#rsvp .form__radio-group > .form__label-text { grid-column: 1 / -1; margin-bottom: .25rem; }
#rsvp .form__radio { min-height: 3.4rem; padding: .8rem 1rem; border: 1px solid rgba(240,200,66,.32); border-radius: .9rem; background: rgba(255,248,239,.06); }
#rsvp .form__radio:has(input:checked) { border-color: var(--gold); background: rgba(240,200,66,.16); }
#rsvp .form__field--select { padding-top: .8rem; }
#rsvp .form__field--select .form__label-text { display: block; margin-bottom: .45rem; }
#rsvp .form__field--select .form__input { width: 100%; border: 1px solid rgba(240,200,66,.55); border-radius: .7rem; padding: .8rem .9rem; background: rgba(255,248,239,.1); color: var(--ivory); font: 1rem var(--font-body); }
#rsvp .form__field--select option { color: var(--dark); background: var(--ivory); }
#rsvp .form__textarea { min-height: 8rem; padding: 1rem; border: 1px solid rgba(240,200,66,.55); border-radius: .8rem; background: rgba(255,248,239,.06); }
#rsvp .form__submit { width: 100%; margin-top: 1rem; padding: 1rem 1.25rem; font-size: 1rem; letter-spacing: .04em; }
@media (max-width: 560px) { #rsvp .rsvp__form { border-radius: 1rem; padding: 1rem; } #rsvp .form__radio-group { grid-template-columns: 1fr; } #rsvp .form__radio-group > .form__label-text { grid-column: auto; } }

/* Keep RSVP content visible even if scroll-triggered animation loads late. */
#rsvp .rsvp__header,
#rsvp .rsvp__header > *,
#rsvp .rsvp__form,
#rsvp .rsvp__form > * { opacity: 1 !important; visibility: visible !important; transform: none !important; }