/* travel.shreyaandashish.com - the guest page. Built from the invitation's own pieces: toran garland, blush header,
   sky-to-peach paper sheet, cusped mandir arch with the kalash on top, gold button, peacocks, falling petals. */

/* ---------- Header: blush dawn under the toran ---------- */
.top { position: relative; text-align: center; padding: 78px 22px 70px; background: linear-gradient(180deg, var(--pink-1) 0%, var(--pink-2) 55%, var(--pink-3) 100%); }
.toran { position: absolute; top: 0; left: 0; right: 0; height: 64px; background: var(--toran) repeat-x top center / 44px 64px; z-index: 2; pointer-events: none; }
.top-logo { display: block; width: clamp(78px, 22vw, 96px); height: auto; margin: 0 auto 2px; }
.top-greet { font-family: var(--script); font-size: clamp(30px, 8.4vw, 40px); line-height: 1.25; color: var(--green-2); }
html[lang="gu"] .top-greet { font-size: clamp(22px, 6vw, 28px); line-height: 1.6; font-weight: 600; }
.names { font-family: var(--display); font-weight: 400; font-size: clamp(32px, 9vw, 58px); line-height: 1.12; letter-spacing: .08em; color: var(--ink); margin-top: 6px; }
html[lang="gu"] .names { font-weight: 600; }
.names span { display: block; }
.names em { display: block; font-family: var(--script); font-style: normal; color: var(--gold); font-size: .7em; line-height: 1; margin: 4px 0; }
.hero-date { font-family: var(--display); letter-spacing: .18em; font-size: clamp(12px, 3.3vw, 16px); text-transform: uppercase; margin-top: 20px; color: #7a1f33; font-weight: 600; }

/* ---------- Paper sheets with a torn top edge (polygon + grain generated in decor.js) ---------- */
.sheet, .foot { position: relative; overflow: hidden; margin-top: -12px; -webkit-clip-path: polygon(var(--tear), 100% 100%, 0 100%); clip-path: polygon(var(--tear), 100% 100%, 0 100%); }
.sheet::before, .foot::before { content: ""; position: absolute; inset: 0; z-index: 0; pointer-events: none; background-image: var(--grain), linear-gradient(180deg, rgba(255,255,255,.65), rgba(255,255,255,0) 15px); background-size: 180px 180px, 100% 15px; background-repeat: repeat, no-repeat; }
.sheet { padding: clamp(56px, 9vw, 84px) 0 clamp(60px, 10vw, 96px); background: linear-gradient(180deg, var(--sky-2) 0%, var(--sky) 22%, #fdf1f0 58%, var(--peach) 100%); }
.sheet::after { content: ""; position: absolute; left: 0; right: 0; bottom: 0; height: 20px; z-index: 0; pointer-events: none; background: linear-gradient(0deg, rgba(90,50,60,.14), rgba(90,50,60,0)); }
.section-title { font-family: var(--display); font-weight: 400; text-align: center; font-size: clamp(22px, 5.5vw, 34px); letter-spacing: .14em; text-transform: uppercase; color: var(--green-2); margin-bottom: 14px; text-wrap: balance; }
html[lang="gu"] .section-title { font-weight: 700; }
.section-title::after { content: ""; display: block; width: 90px; height: 2px; margin: 16px auto 0; background: linear-gradient(90deg, transparent, var(--gold), transparent); }
.section-sub { text-align: center; color: var(--muted); max-width: 520px; margin: 0 auto 30px; text-wrap: balance; }

/* ---------- The arch (the RSVP's own): a plain box until main drawing succeeds, then the scalloped SVG behind the form ---------- */
.arch { position: relative; background: linear-gradient(180deg, #fff6ee, var(--peach)); border: 2px solid var(--gold-2); border-radius: 240px 240px 22px 22px; padding: clamp(128px, 30vw, 150px) clamp(22px, 6vw, 46px) 30px; box-shadow: 0 14px 40px rgba(150,90,60,.18), inset 0 0 0 6px rgba(255,255,255,.55); }
.arch::before { content: "✦"; position: absolute; top: clamp(56px, 13vw, 72px); left: 50%; transform: translateX(-50%); color: var(--gold); font-size: 22px; letter-spacing: 0; line-height: 1; }
.arch, .arch-shape { isolation: isolate; }
.arch-shape { position: absolute; left: 0; top: 0; z-index: -1; overflow: visible; pointer-events: none; filter: drop-shadow(0 14px 22px rgba(150, 90, 60, .2)); }
.arch-svg .arch { background: none; border: 0; box-shadow: none; margin-top: 74px; padding-left: clamp(38px, 9.8vw, 54px); padding-right: clamp(38px, 9.8vw, 54px); }
.arch-svg .arch::before { top: clamp(64px, 15vw, 80px); }
.apex { position: absolute; left: 50%; top: -66px; width: 48px; transform: translateX(-50%); pointer-events: none; z-index: 2; }
.apex svg { display: block; width: 100%; height: auto; }
.apex .flag { animation: flutter 3.4s ease-in-out infinite; }
@keyframes flutter { 0%, 100% { transform: skewY(-5deg) scaleX(1); } 50% { transform: skewY(6deg) scaleX(.86); } }
@media (prefers-reduced-motion: reduce) { .apex .flag { animation: none; } }

/* ---------- Passport picker ---------- */
.file-input { position: absolute; width: 1px; height: 1px; opacity: 0; overflow: hidden; clip-path: inset(50%); }
.file-btn { display: flex; align-items: center; justify-content: center; gap: 10px; min-height: 54px; padding: 12px 16px; border: 1.5px dashed var(--gold); border-radius: 12px; background: rgba(255,255,255,.72); color: var(--green-2); font-family: var(--display); font-size: 13px; font-weight: 600; letter-spacing: .1em; text-transform: uppercase; cursor: pointer; text-align: center; line-height: 1.3; transition: background .2s, border-color .2s; }
html[lang="gu"] .file-btn { font-size: 16px; }
.file-btn:hover { background: #fff; }
.file-btn svg { flex: none; width: 22px; height: 22px; }
.file-input:focus-visible + .file-btn { outline: 3px solid rgba(185,138,62,.55); outline-offset: 2px; }
.field.invalid .file-btn { border-color: var(--red); }
.file-chip { display: flex; align-items: center; gap: 12px; margin-top: 12px; padding: 10px 12px; border: 1px solid #e3c9b8; border-radius: 12px; background: #fff; }
.file-thumb { flex: none; width: 56px; height: 56px; border-radius: 8px; object-fit: cover; background: #f3e6dc; display: grid; place-items: center; font: 600 12px/1 var(--display); letter-spacing: .06em; color: var(--green-2); }
.file-meta { min-width: 0; flex: 1; }
.file-name { display: block; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; font-size: 17px; }
.file-size { display: block; font-size: 15px; color: var(--muted); }
.file-remove { flex: none; border: 1px solid #e3c9b8; background: #fff; border-radius: 10px; min-height: 40px; padding: 6px 12px; font: 600 12px/1 var(--display); letter-spacing: .08em; text-transform: uppercase; color: var(--green-2); cursor: pointer; }
html[lang="gu"] .file-remove { font-size: 15px; }
.file-remove:hover { background: var(--cream); }

.unit { display: flex; align-items: center; gap: 10px; }
.unit input { width: 110px; flex: none; }
.unit .unit-txt { font-size: 17px; color: var(--ink); }
.consent { margin-top: 4px; }
.consent .check-one { align-items: flex-start; font-size: 17px; line-height: 1.4; }
.consent .check-one input { margin-top: 2px; }
.privacy { font-size: 15px; line-height: 1.45; color: var(--muted); margin: 10px 2px 18px; }

/* ---------- Thank-you (same peacocks as the invitation's) ---------- */
.thanks { text-align: center; padding: 6px 4px 8px; }
.thanks-birds { display: flex; justify-content: center; align-items: flex-end; gap: 6px; margin-bottom: 6px; }
.thanks-birds .bird { width: clamp(78px, 22vw, 104px); }
.thanks-birds .bird.flip { transform: scaleX(-1); }
.bird img { display: block; width: 100%; height: auto; }
.thanks h3 { font-family: var(--script); font-weight: 400; font-size: 46px; line-height: 1.2; color: var(--green-2); }
html[lang="gu"] .thanks h3 { font-size: 34px; font-weight: 700; line-height: 1.5; }
.thanks p { margin-top: 8px; }
.thanks .who { font-weight: 600; }
.thanks-next { margin-top: 22px; padding-top: 18px; border-top: 1px solid rgba(201,161,90,.35); }
.thanks-next .help { margin: 0 0 12px; }

/* ---------- Footer ---------- */
.foot { background: linear-gradient(180deg, var(--pink-2), var(--pink-3)); color: var(--ink); text-align: center; padding: 54px 16px calc(clamp(110px, 30vw, 170px) + env(safe-area-inset-bottom)); }
.foot > p { position: relative; z-index: 1; }
.foot-greet { font-family: var(--script); font-size: clamp(30px, 8vw, 38px); color: var(--green-2); line-height: 1.3; }
html[lang="gu"] .foot-greet { font-size: clamp(22px, 6vw, 28px); font-weight: 600; line-height: 1.6; }
.foot-bird { position: absolute; bottom: 0; width: clamp(84px, 24vw, 150px); z-index: 1; pointer-events: none; }
.foot-bird img { display: block; width: 100%; height: auto; }
.foot-bird.l { left: 6px; }
.foot-bird.r { right: 6px; transform: scaleX(-1); }

/* ---------- A soft entrance ---------- */
@keyframes rise { from { opacity: 0; transform: translateY(18px); } to { opacity: 1; transform: none; } }
.rise { animation: rise .9s var(--ease) both; }
.rise.d2 { animation-delay: .15s; }
@media (prefers-reduced-motion: reduce) { .rise { animation: none; } }