/* ==========================================================================
   Sections 09–13 · gallery, boarding pass, RSVP, wishes, ending, lightbox
   ========================================================================== */

/* ---------- 09 · Gallery (CSS-columns masonry) ---------- */
.gallery { columns: 2; column-gap: 10px; }
.gallery li { break-inside: avoid; margin-bottom: 10px; }
.gallery li:first-child { column-span: all; }
.gallery li:first-child img { aspect-ratio: 16 / 10; }
.gallery button {
  display: block; width: 100%; padding: 0; border: 0; background: none;
  border-radius: var(--radius-sm); overflow: hidden; box-shadow: 0 6px 16px -10px rgba(75, 42, 19, .5);
}
.gallery img { width: 100%; object-fit: cover; transition: transform 1s var(--ease), filter .6s; }
.gallery button:hover img { transform: scale(1.04); }
.gallery__outro { font-size: clamp(1.9rem, 7vw, 2.5rem); color: var(--brown-800); text-align: center; margin-top: 30px; line-height: 1.25; }

/* ---------- 10 · Boarding pass (mobile: stacked · ≥860px: horizontal like the print) ---------- */
.ticket-wrap { max-width: 1000px; margin-inline: auto; filter: drop-shadow(0 26px 30px rgba(30, 15, 6, .45)); rotate: -1deg; }
.js [data-reveal="ticket"] { transform: translateY(50px) rotate(-5deg); }
.ticket {
  --notch: 14px; --stub: 188px;
  --cut-a: radial-gradient(circle at 0 calc(100% - var(--stub)), transparent var(--notch), #000 calc(var(--notch) + .5px));
  --cut-b: radial-gradient(circle at 100% calc(100% - var(--stub)), transparent var(--notch), #000 calc(var(--notch) + .5px));
  position: relative; display: grid; color: var(--ink); border-radius: 18px; overflow: hidden;
  background: var(--tex-paper), #FBF6EE;
  -webkit-mask: var(--cut-a), var(--cut-b); -webkit-mask-composite: source-in;
  mask: var(--cut-a), var(--cut-b); mask-composite: intersect;
}
.ticket::before { content: ""; position: absolute; inset: 20% 10% 30%; background: var(--map-brown) center / contain no-repeat; opacity: .06; pointer-events: none; }
.ticket__band {
  display: grid; place-items: center; min-height: 46px; padding: 8px;
  color: var(--cream); background: var(--tex-leather), var(--brown-800);
  font-family: var(--font-serif); font-weight: 500; font-size: 1.05rem; letter-spacing: .42em; text-transform: uppercase;
}
.ticket__main { position: relative; padding: 18px 20px 22px; display: grid; align-content: start; }
.ticket__top { position: relative; display: flex; flex-direction: column-reverse; }
.ticket__title { font-size: clamp(2.3rem, 10vw, 3.7rem); color: var(--brown-800); line-height: 1.05; margin-top: -14px; }
.ticket__postmark { display: flex; align-items: center; justify-content: flex-end; color: var(--brown-800); }
.ticket__waves { display: block; width: 74px; height: 34px; margin-right: -8px; }
.ticket__waves svg { width: 100%; height: 100%; }
.ticket__stamp { width: 76px; height: 76px; rotate: 8deg; }
.ticket__stamp .stamp { color: var(--brown-800); }
.is-visible .ticket__stamp { animation: stamp-in .6s var(--ease) .7s both; }
.ticket__welcome, .ticket__reception {
  font-weight: 600; font-size: clamp(.88rem, 3.6vw, 1.15rem); line-height: 1.55; letter-spacing: .07em; text-transform: uppercase;
}
.ticket__welcome { margin-top: 10px; }
.ticket__reception { margin-top: 14px; padding-bottom: 14px; border-bottom: 1px solid var(--line); }
.ticket__grid { display: grid; grid-template-columns: 1fr 1fr; gap: 0 18px; }
.ticket__field { padding: 12px 0; }
.ticket__field:nth-child(-n + 2) { border-bottom: 1px solid var(--line); }
.ticket__field dt { font-weight: 600; font-size: .8rem; letter-spacing: .12em; text-transform: uppercase; color: var(--ink-soft); }
.ticket__field dd { font-weight: 600; font-size: clamp(1rem, 4vw, 1.25rem); letter-spacing: .06em; text-transform: uppercase; color: var(--brown-900); line-height: 1.3; overflow-wrap: anywhere; }
.ticket__aside { position: relative; margin-top: 8px; display: grid; gap: 12px; align-content: start; }
.ticket__trail { position: relative; display: block; width: 150px; height: 75px; margin-left: auto; color: var(--brown-800); }
.ticket__transport, .ticket__thanks { font-weight: 600; font-size: clamp(.82rem, 3.4vw, 1rem); line-height: 1.5; letter-spacing: .06em; text-transform: uppercase; }
.ticket__stub {
  display: grid; grid-template-columns: 1fr auto; grid-template-areas: "date qr" "rsvp qr" "scan qr";
  align-items: center; column-gap: 16px; height: var(--stub); padding: 16px 22px;
  border-top: 2px dashed rgba(118, 80, 47, .4); color: var(--ink); text-decoration: none; text-align: center;
}
.ticket__stub-date { grid-area: date; font-weight: 600; font-size: 1.15rem; letter-spacing: .1em; }
.ticket__rsvp { grid-area: rsvp; font-weight: 600; font-size: 2.3rem; letter-spacing: .32em; padding-left: .32em; color: var(--brown-800); line-height: 1.1; border-block: 1px solid var(--line); }
.ticket__scan { grid-area: scan; font-weight: 600; font-size: .72rem; letter-spacing: .08em; text-transform: uppercase; line-height: 1.45; }
.ticket__qr { grid-area: qr; display: block; width: 132px; height: 132px; color: var(--brown-900); }
.ticket__qr svg { width: 100%; height: 100%; }
.ticket__stub:hover .ticket__rsvp { color: var(--caramel); }

/* Save / calendar actions */
.ticket-actions { display: grid; justify-items: center; gap: 12px; margin-top: 40px; }
.btn__stack { display: grid; text-align: left; line-height: 1.25; }
.btn__stack small { font-size: .66rem; letter-spacing: .06em; text-transform: none; font-weight: 500; opacity: .75; }
.ticket-actions .btn { min-width: 250px; min-height: 58px; justify-content: flex-start; padding-inline: 24px 28px; gap: 14px; }
.btn--shine { overflow: hidden; }
.btn--shine::after { display: none; }
.btn--shine::before {
  content: ""; position: absolute; top: 0; bottom: 0; left: 0; width: 60%; pointer-events: none;
  background: linear-gradient(110deg, transparent 30%, rgba(255, 255, 255, .75) 48%, transparent 66%);
  transform: translateX(-100%);
  animation: shine 3.6s ease-in-out 1s infinite;
}
/* same sweep as the old background-position animation, but transform-only (no repaint per frame) */
@keyframes shine { 0%, 55% { transform: translateX(-100%); } 100% { transform: translateX(166.67%); } }
.btn--soft { background: rgba(245, 223, 194, .08); }
.btn--soft:hover { background: rgba(245, 223, 194, .18); }
.btn.is-busy { opacity: .7; cursor: progress; }
.ticket-actions__hint { font-style: italic; color: rgba(245, 223, 194, .85); font-size: 1.05rem; }

/* ---------- 11 · RSVP ---------- */
.rsvp { display: grid; gap: 22px; }
.rsvp__choice { display: grid; gap: 10px; margin: 0; padding: 0; border: 0; }
.choice { position: relative; display: block; }
.choice input { position: absolute; opacity: 0; inset: 0; margin: 0; cursor: pointer; }
.choice span {
  display: flex; align-items: center; gap: 10px; min-height: 50px; padding: 10px 18px;
  font-family: var(--font-sans); font-size: .88rem; border: 1px solid var(--line); border-radius: var(--radius-pill);
  background: var(--paper); transition: background-color .3s, color .3s, border-color .3s;
}
.choice .icon { width: 18px; height: 18px; border: 1px solid var(--caramel); border-radius: 50%; padding: 2px; color: transparent; transition: color .3s; }
.choice input:checked + span { background: var(--brown-900); border-color: var(--brown-900); color: var(--cream); }
.choice input:checked + span .icon { color: var(--cream); border-color: var(--cream); }
.choice input:focus-visible + span { outline: 2px solid var(--caramel); outline-offset: 3px; }
.rsvp__hint {
  margin: -6px 0 0; padding: 10px 14px; text-align: center; font-style: italic; font-size: 1.02rem; line-height: 1.5;
  color: var(--brown-800); background: rgba(245, 223, 194, .5); border-radius: 10px; animation: fade-in .5s var(--ease);
}
#wishes:not([hidden]) { animation: fade-in .8s var(--ease); }
.field { display: grid; gap: 8px; }
.field__label { font-family: var(--font-sans); font-size: .78rem; letter-spacing: .06em; color: var(--ink-soft); }
#guest-count-field { justify-items: center; }
.stepper { display: inline-flex; align-items: center; border: 1px solid var(--line); border-radius: var(--radius-pill); background: var(--paper); }
.stepper button { width: 48px; height: 48px; display: grid; place-items: center; border: 0; background: none; color: var(--brown-800); border-radius: 50%; }
.stepper input { width: 52px; height: 48px; text-align: center; font-family: var(--font-sans); font-size: 1.05rem; border: 0; border-inline: 1px solid var(--line); background: none; -moz-appearance: textfield; appearance: textfield; }
.stepper input::-webkit-inner-spin-button, .stepper input::-webkit-outer-spin-button { -webkit-appearance: none; margin: 0; }
.input {
  width: 100%; min-height: 48px; padding: 12px 14px; font-family: var(--font-sans); font-size: 1rem;
  border: 1px solid var(--line); border-radius: 10px; background: var(--paper); color: var(--ink); resize: vertical;
}
.input::placeholder { color: #9C826B; }
.input:focus { outline: none; border-color: var(--caramel); box-shadow: 0 0 0 3px rgba(164, 119, 79, .18); }
.input[aria-invalid="true"] { border-color: #A33A2A; }
.field__error { font-family: var(--font-sans); font-size: .78rem; color: #A33A2A; }
.hp { position: absolute; left: -9999px; width: 1px; height: 1px; overflow: hidden; }
.form-status { font-family: var(--font-sans); font-size: .82rem; text-align: center; color: var(--ink-soft); min-height: 1em; }
.rsvp-done { text-align: center; display: grid; justify-items: center; gap: 16px; }
.rsvp-done__icon { width: 40px; height: 40px; color: var(--caramel); }
.rsvp-done__text { font-size: 1.3rem; line-height: 1.6; white-space: pre-line; }

/* ---------- 12 · Wishes / gifts ---------- */
.gifts { display: grid; gap: 18px; margin-top: 30px; justify-items: center; }
.gift { width: min(100%, 300px); display: grid; justify-items: center; gap: 6px; text-align: center; padding: 22px; }
.gift__qr { width: 190px; aspect-ratio: 1; object-fit: contain; background: #fff; border-radius: var(--radius-sm); padding: 8px; }
.gift__qr--empty {
  display: grid; place-items: center; padding: 18px; text-align: center;
  font-family: var(--font-sans); font-size: .75rem; line-height: 1.5; color: var(--caramel);
  border: 1.5px dashed var(--caramel); background: transparent;
}
.gift__bank { font-family: var(--font-sans); font-size: .72rem; font-weight: 600; letter-spacing: .14em; text-transform: uppercase; color: var(--caramel); margin-top: 8px; }
.gift__owner { font-weight: 600; font-size: 1.15rem; text-transform: uppercase; letter-spacing: .06em; }
.gift__account { font-family: var(--font-sans); font-size: 1rem; letter-spacing: .08em; font-variant-numeric: tabular-nums; }
.gift .btn { min-height: 44px; padding: 8px 18px; font-size: .72rem; margin-top: 6px; }

/* ---------- 13 · Ending ---------- */
.ending { min-height: 100vh; min-height: 100svh; display: flex; align-items: flex-end; justify-content: center; text-align: center; color: var(--cream); background: var(--brown-900); padding-bottom: 72px; }
.ending__bg { position: absolute; inset: 0; z-index: -2; width: 100%; height: 100%; object-fit: cover; }
.ending::after { content: ""; position: absolute; inset: 0; z-index: -1; background: linear-gradient(180deg, rgba(30, 15, 6, .25) 0%, rgba(30, 15, 6, .05) 35%, rgba(30, 15, 6, .78) 72%, rgba(30, 15, 6, .92)); }
.ending__content { padding-inline: var(--gutter); max-width: 560px; }
.ending .heart-trail { width: 120px; height: 96px; margin-bottom: 8px; }
.ending__title { font-size: clamp(2.9rem, 12vw, 4.4rem); color: #F7D9B0; text-shadow: 0 2px 18px rgba(0, 0, 0, .45); }
.ending__text { font-size: 1.25rem; margin-top: 14px; }
.ending__en { font-style: italic; opacity: .8; margin-top: 6px; }
.ending__names { font-size: clamp(2.3rem, 9vw, 3rem); color: #F7D9B0; margin-top: 22px; }
.ending__date { font-family: var(--font-sans); font-size: .82rem; letter-spacing: .3em; margin-top: 0; }

.footer {
  position: relative; padding: 44px var(--gutter) calc(40px + env(safe-area-inset-bottom)); text-align: center; color: var(--cream);
  background: radial-gradient(70% 60% at 50% 0%, rgba(164, 119, 79, .22), transparent 70%), var(--tex-leather), var(--brown-900);
  border-top: 1px solid rgba(195, 160, 107, .2); overflow: hidden;
}
/* container units let the plane fly with transform only (no layout work per frame) */
.footer__sky { position: relative; max-width: 520px; height: 40px; margin: 0 auto 6px; container-type: inline-size; }
.footer__route { position: absolute; left: 0; right: 0; top: 50%; border-top: 1.5px dashed rgba(195, 160, 107, .45); }
.footer__plane { position: absolute; top: 50%; left: 0; width: 26px; height: 26px; margin-top: -13px; color: var(--gold); animation: footer-fly 9s linear infinite; }
@keyframes footer-fly {
  0% { transform: translate(-6cqw, 4px); opacity: 0; }
  10% { opacity: 1; }
  50% { transform: translate(47cqw, -4px); }
  90% { opacity: 1; }
  100% { transform: translate(100cqw, 4px); opacity: 0; }
}
.footer__eyebrow { color: var(--gold); }
.board {
  display: grid; grid-template-columns: 1fr 1fr; gap: 14px 12px; max-width: 600px; margin: 14px auto 30px; padding: 16px 14px;
  background: #24140A; border-radius: 12px; text-align: left;
  box-shadow: inset 0 0 0 1px rgba(195, 160, 107, .25), 0 14px 30px -14px rgba(0, 0, 0, .7);
}
.board__cell { display: grid; gap: 6px; }
.board__label { font-family: var(--font-sans); font-size: .58rem; letter-spacing: .2em; text-transform: uppercase; color: rgba(245, 223, 194, .55); }
.board__value { display: flex; flex-wrap: wrap; gap: 3px; }
.flap {
  position: relative; display: inline-grid; place-items: center; width: 1.08em; height: 1.5em;
  font-family: var(--font-sans); font-weight: 600; font-size: .92rem; color: #F7D9B0;
  background: linear-gradient(#55351D 0 49%, #432814 51%); border-radius: 3px;
  box-shadow: inset 0 -1px 0 rgba(0, 0, 0, .45), 0 1px 0 rgba(255, 255, 255, .04);
  transition: transform .05s;
}
.flap::after { content: ""; position: absolute; left: 0; right: 0; top: 50%; height: 1px; background: rgba(0, 0, 0, .55); }
.flap.is-flipping { transform: scaleY(.82); }
.flap--gap { width: .45em; background: none; box-shadow: none; }
.flap--gap::after { display: none; }
.board__status.is-on-time .flap { color: #CFE3A6; }
.board__status.is-boarding .flap { color: #F2C46B; }
.footer__mark { display: inline-flex; align-items: center; gap: 12px; font-size: 1.3rem; font-weight: 600; letter-spacing: .3em; }
.footer__mark .icon { color: var(--gold); width: 18px; height: 18px; }
.footer__love { font-size: 2rem; color: #F7D9B0; margin-top: 2px; }
.footer__top {
  display: inline-flex; align-items: center; gap: 8px; min-height: 44px; margin-top: 18px; padding: 8px 18px;
  font-family: var(--font-sans); font-size: .72rem; letter-spacing: .12em; text-transform: uppercase; text-decoration: none;
  border: 1px solid rgba(245, 223, 194, .35); border-radius: var(--radius-pill); transition: background-color .3s;
}
.footer__top:hover { background: rgba(245, 223, 194, .1); }
.footer__top .icon { width: 16px; height: 16px; rotate: 180deg; }

/* ---------- Lightbox ---------- */
.lightbox {
  width: 100%; max-width: 100%; height: 100%; max-height: 100%; margin: 0; padding: 0; border: 0;
  background: rgba(24, 12, 5, .95); color: var(--cream);
}
.lightbox[open] { display: grid; place-items: center; animation: fade-in .35s var(--ease); }
.lightbox::backdrop { background: transparent; }
.lightbox__figure { width: 100%; height: 100%; display: grid; place-items: center; padding: 64px 12px 72px; }
.lightbox__figure img { max-width: 100%; max-height: 100%; object-fit: contain; border-radius: 4px; box-shadow: 0 20px 50px rgba(0, 0, 0, .5); }
.lightbox__btn { position: absolute; width: 48px; height: 48px; display: grid; place-items: center; border-radius: 50%; border: 1px solid rgba(245, 223, 194, .5); background: rgba(75, 42, 19, .5); color: var(--cream); }
.lightbox__close { top: calc(12px + env(safe-area-inset-top)); right: 12px; }
.lightbox__prev { left: 12px; bottom: calc(14px + env(safe-area-inset-bottom)); }
.lightbox__next { right: 12px; bottom: calc(14px + env(safe-area-inset-bottom)); }
.lightbox__count { position: absolute; left: 50%; bottom: calc(28px + env(safe-area-inset-bottom)); translate: -50% 0; font-family: var(--font-sans); font-size: .78rem; letter-spacing: .2em; }