/* Wedding RSVP — invitation sections.
   Countdown, background music, scroll reveal, content bands, gallery,
   love story and the gift block. Loaded after style.css. */

/* ── Scroll reveal ──
   Opacity settles faster than the transform on purpose: the element is fully
   opaque while it is still moving, which reads as settling into place rather
   than fading in. Content is visible by default and only hidden once the
   script has confirmed it can reveal it, so a failed observer or disabled
   JavaScript can never leave a section invisible. */
.reveal, .reveal-left, .reveal-right, .reveal-zoom {
    transition: opacity .5s ease, transform 1s ease;
}
html.js-reveal .reveal       { opacity: 0; transform: translateY(3.5rem) scale(.96); }
html.js-reveal .reveal-left  { opacity: 0; transform: translateX(-14%) scale(.96); }
html.js-reveal .reveal-right { opacity: 0; transform: translateX(14%) scale(.96); }
html.js-reveal .reveal-zoom  { opacity: 0; transform: scale(.82); transition-duration: .5s, .9s; }
html.js-reveal .is-visible   { opacity: 1; transform: none; }

@media (prefers-reduced-motion: reduce) {
    html.js-reveal .reveal, html.js-reveal .reveal-left,
    html.js-reveal .reveal-right, html.js-reveal .reveal-zoom {
        opacity: 1; transform: none; transition: none;
    }
}

/* ── Countdown (DD : HH : MM : SS) ── */

.countdown {
    display: flex;
    align-items: flex-start;
    justify-content: center;
    gap: 4px;
    margin-top: 18px;
}
.cd-cell {
    display: flex;
    flex-direction: column;
    align-items: center;
    min-width: 58px;
    background: var(--gold-tint);
    border-radius: 12px;
    padding: 8px 6px 6px;
}
.cd-num {
    font-family: var(--font-heading);
    font-size: 27px;
    font-weight: 600;
    line-height: 1;
    color: var(--gold-dark);
    font-variant-numeric: tabular-nums;
}
.cd-lbl {
    font-size: 9.5px;
    letter-spacing: .14em;
    text-transform: uppercase;
    color: var(--muted);
    margin-top: 4px;
}
.cd-sep {
    font-family: var(--font-heading);
    font-size: 24px;
    color: var(--gold);
    line-height: 1;
    padding-top: 10px;
}
.hero-full.has-bg .cd-cell { background: rgba(255, 255, 255, .16); backdrop-filter: blur(3px); }
.hero-full.has-bg .cd-num  { color: #FFFFFF; }
.hero-full.has-bg .cd-lbl  { color: rgba(255, 255, 255, .78); }
.hero-full.has-bg .cd-sep  { color: rgba(255, 255, 255, .6); }

/* ── Music toggle & language switch ── */

.music-toggle {
    position: fixed;
    right: 16px;
    bottom: calc(16px + env(safe-area-inset-bottom, 0px));
    z-index: 55;
    width: 44px; height: 44px;
    border-radius: 50%;
    border: 1px solid var(--line);
    background: rgba(255, 255, 255, .92);
    color: var(--gold-dark);
    box-shadow: 0 6px 18px rgba(0, 0, 0, .16);
    cursor: pointer;
    display: flex; align-items: center; justify-content: center;
}
.music-toggle .ico-pause { display: none; }
.music-toggle.playing .ico-play { display: none; }
.music-toggle.playing .ico-pause { display: block; }

.lang-switch {
    position: fixed;
    left: 16px;
    bottom: calc(16px + env(safe-area-inset-bottom, 0px));
    z-index: 55;
    background: rgba(255, 255, 255, .92);
    border: 1px solid var(--line);
    border-radius: 999px;
    padding: 9px 16px;
    font-size: 12px;
    font-weight: 500;
    letter-spacing: .1em;
    text-transform: uppercase;
    color: var(--ink);
    text-decoration: none;
    box-shadow: 0 6px 18px rgba(0, 0, 0, .12);
}

.lang-offer {
    position: fixed;
    left: 50%;
    transform: translateX(-50%);
    bottom: calc(74px + env(safe-area-inset-bottom, 0px));
    z-index: 56;
    display: flex; align-items: center; gap: 12px;
    background: #FFFFFF;
    border: 1px solid var(--line);
    border-radius: 14px;
    padding: 12px 14px;
    box-shadow: 0 12px 30px rgba(0, 0, 0, .16);
    font-size: 13.5px;
    max-width: calc(100vw - 32px);
}
.lang-offer .btn { padding: 8px 16px; font-size: 12.5px; }
.lang-offer-x { background: none; border: none; font-size: 20px; line-height: 1; color: var(--muted); cursor: pointer; }

/* ── Full-width bands, each able to carry its own photo ── */

.band {
    margin-left: calc(var(--gutter) * -1);
    margin-right: calc(var(--gutter) * -1);
    padding: 54px var(--gutter);
    position: relative;
}
.band.has-bg { background-size: cover; background-position: center; }
.band.has-bg::before {
    content: '';
    position: absolute;
    inset: 0;
    background: rgba(250, 248, 244, .86);
}
.band-inner { position: relative; z-index: 1; max-width: 920px; margin: 0 auto; }
.band-title { text-align: center; font-size: 36px; margin-bottom: 10px; }
.band-sub { text-align: center; color: var(--muted); font-size: 15.5px; margin-bottom: 26px; }

/* Verse / quote */
.verse-band .band-inner { max-width: 640px; text-align: center; }
.verse-text {
    font-family: var(--font-heading);
    font-size: 21px;
    line-height: 1.65;
    color: var(--ink);
    white-space: pre-line;
}
.verse-ref {
    margin-top: 16px;
    font-size: 12.5px;
    letter-spacing: .22em;
    text-transform: uppercase;
    color: var(--gold-dark);
    font-weight: 500;
}

/* Couple & parents */
.couple-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 20px; }
.couple-card { padding: 26px 22px; text-align: center; }
.couple-photo {
    width: 128px; height: 128px;
    margin: 0 auto 16px;
    border-radius: 50%;
    overflow: hidden;
    border: 3px solid var(--gold-tint);
}
.couple-photo img { width: 100%; height: 100%; object-fit: cover; display: block; }
.couple-name { font-family: var(--font-names); font-size: 30px; font-weight: normal; line-height: 1.2; }
.couple-desc { color: var(--muted); font-size: 14px; margin-top: 4px; }
.couple-parents { font-size: 14px; color: #3c3c3c; margin-top: 14px; line-height: 1.5; }
.couple-parents span {
    display: block;
    font-size: 11px;
    letter-spacing: .16em;
    text-transform: uppercase;
    color: var(--gold-dark);
    margin-bottom: 4px;
}

/* Gallery */
.gallery-grid {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(140px, 1fr));
    gap: 10px;
}
.gal-item {
    padding: 0; border: none; background: none; cursor: pointer;
    aspect-ratio: 1;
    border-radius: 12px;
    overflow: hidden;
    box-shadow: 0 4px 14px rgba(30, 26, 12, .1);
}
.gal-item img { width: 100%; height: 100%; object-fit: cover; display: block; transition: transform .5s ease; }
.gal-item:hover img { transform: scale(1.06); }

/* ── Gallery viewer ──
   A real full-screen viewer: the photo is centred with room to breathe, the
   controls sit clear of it, and the page behind cannot scroll. */
.lightbox {
    border: none;
    padding: 0;
    margin: 0;
    width: 100vw;
    height: 100dvh;
    max-width: 100vw;
    max-height: 100dvh;
    background: #0d0b09;
    overflow: hidden;
}
.lightbox::backdrop { background: rgba(8, 7, 6, .96); }
html.lb-open, html.lb-open body { overflow: hidden; }

.lb-stage {
    position: absolute;
    inset: 0 0 72px 0;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 56px 16px 8px;
}
.lightbox img {
    max-width: 100%;
    max-height: 100%;
    object-fit: contain;
    border-radius: 8px;
    opacity: 0;
    transform: scale(.985);
    transition: opacity .25s ease, transform .25s ease;
}
.lightbox img.is-in { opacity: 1; transform: none; }

.lb-close, .lb-nav {
    position: absolute;
    z-index: 2;
    display: flex;
    align-items: center;
    justify-content: center;
    border: none;
    cursor: pointer;
    border-radius: 50%;
    background: rgba(255, 255, 255, .12);
    color: #FFFFFF;
    width: 46px;
    height: 46px;
    backdrop-filter: blur(6px);
    transition: background .15s ease;
}
.lb-close:hover, .lb-nav:hover { background: rgba(255, 255, 255, .26); }
.lb-close { top: calc(12px + env(safe-area-inset-top, 0px)); right: 12px; }
.lb-prev { left: 10px; top: 50%; transform: translateY(-50%); }
.lb-next { right: 10px; top: 50%; transform: translateY(-50%); }

.lb-bar {
    position: absolute;
    left: 0; right: 0;
    bottom: calc(14px + env(safe-area-inset-bottom, 0px));
    text-align: center;
    padding: 0 60px;
    color: rgba(255, 255, 255, .92);
    pointer-events: none;
}
.lb-caption { font-size: 14.5px; line-height: 1.4; margin-bottom: 6px; }
.lb-count {
    font-size: 12px;
    letter-spacing: .18em;
    color: rgba(255, 255, 255, .6);
    font-variant-numeric: tabular-nums;
}

@media (max-width: 640px) {
    .lb-close, .lb-nav { width: 42px; height: 42px; }
    .lb-prev { left: 6px; }
    .lb-next { right: 6px; }
    .lb-stage { inset: 0 0 66px 0; padding: 52px 10px 6px; }
    .lb-caption { font-size: 13.5px; }
}
@media (prefers-reduced-motion: reduce) {
    .lightbox img { transition: none; }
}

/* Love story */
.story-list { list-style: none; max-width: 640px; margin: 0 auto; }
.story-list li { margin-bottom: 16px; }
.story-card { padding: 22px 24px; }
.story-date {
    display: block;
    font-size: 11.5px;
    letter-spacing: .18em;
    text-transform: uppercase;
    color: var(--gold-dark);
    font-weight: 500;
    margin-bottom: 6px;
}
.story-card h4 { font-family: var(--font-heading); font-size: 24px; margin-bottom: 8px; }
.story-card p { color: #3c3c3c; font-size: 15.5px; }

/* Wedding gift */
.gift-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(240px, 1fr)); gap: 16px; }
.gift-card { padding: 22px 24px; text-align: center; }
.gift-bank {
    font-size: 12.5px;
    letter-spacing: .18em;
    text-transform: uppercase;
    color: var(--gold-dark);
    font-weight: 500;
}
.gift-number { font-family: var(--font-heading); font-size: 26px; margin: 8px 0 4px; letter-spacing: .04em; }
.gift-holder { color: var(--muted); font-size: 14px; margin-bottom: 14px; }
.gift-copy.copied { border-color: var(--gold); color: var(--gold-dark); }
.gift-address { text-align: center; color: var(--muted); font-size: 14.5px; margin-top: 20px; }

/* Closing */
.closing-band { text-align: center; padding-top: 64px; padding-bottom: 64px; }
.closing-title { font-family: var(--font-heading); font-size: 40px; margin-bottom: 12px; }
.closing-names { font-family: var(--font-names); font-size: 32px; }
.closing-names .amp { font-family: var(--font-heading); font-style: italic; color: var(--gold); }

@media (max-width: 640px) {
    .band { padding: 40px var(--gutter); }
    .band-title { font-size: 30px; }
    .couple-grid { grid-template-columns: 1fr; }
    .couple-photo { width: 112px; height: 112px; }
    .gallery-grid { grid-template-columns: repeat(auto-fill, minmax(104px, 1fr)); gap: 8px; }
    .closing-title { font-size: 32px; }
    .closing-names { font-size: 26px; }
    .countdown { gap: 3px; }
    .cd-cell { min-width: 52px; padding: 7px 4px 5px; }
    .cd-num { font-size: 23px; }
    .cd-sep { font-size: 20px; padding-top: 9px; }
    .lang-switch { padding: 8px 13px; font-size: 11px; }
    .music-toggle { width: 40px; height: 40px; }
}