/* Final mobile presentation layer for the public invitation. */
@media (max-width: 760px) {
    html { scroll-padding-top: 12px; }
    body {
        background:
            radial-gradient(circle at 50% 8%, color-mix(in srgb, var(--primary) 24%, transparent), transparent 28%),
            var(--bg);
    }
    #petalCanvas, #sparkleCanvas { opacity: .58; }

    .opening { padding: 14px; }
    .opening-card {
        width: min(430px, calc(100vw - 28px));
        min-height: min(520px, calc(100svh - 28px));
        padding: 48px 24px;
        border-radius: 26px;
        background:
            radial-gradient(circle at 50% 24%, color-mix(in srgb, var(--accent) 8%, transparent), transparent 34%),
            rgba(24,11,18,.66);
        box-shadow: 0 26px 74px rgba(0,0,0,.52), 0 0 42px color-mix(in srgb, var(--primary) 22%, transparent);
    }
    .opening-card::before { inset: 9px; border-radius: 19px; }
    .opening-card #openInvite { width: min(230px, 82%); min-height: 54px; }
    .opening-card small { max-width: 260px; line-height: 1.65; }

    .hero {
        min-height: 100svh;
        padding: 76px 18px 64px;
        background-position: center 28%;
        isolation: isolate;
    }
    .hero::before { inset: 10px; border-radius: 18px; }
    .hero::after { opacity: .34; filter: saturate(.92) brightness(.72); }
    .hero-inner {
        display: flex;
        width: 100%;
        max-width: 540px;
        flex-direction: column;
        align-items: center;
        justify-content: center;
    }
    .hero .eyebrow {
        margin-bottom: 13px;
        font-size: 9px;
        letter-spacing: .28em;
    }
    .hero h1 {
        max-width: 92%;
        margin-bottom: 20px;
        font-size: clamp(14px, 4vw, 18px);
        letter-spacing: .25em;
        line-height: 1.45;
    }
    .hero .names {
        width: 100%;
        font-size: clamp(47px, 15vw, 70px);
        line-height: .86;
    }
    .hero .animated-name-ampersand-word { margin-block: .08em; line-height: .58; }
    .date-line {
        margin: 27px 0 30px;
        padding: 10px 17px;
        border: 1px solid color-mix(in srgb, var(--accent) 25%, transparent);
        border-radius: 999px;
        background: rgba(15,7,12,.25);
        font-size: 10px;
        letter-spacing: .14em;
        -webkit-backdrop-filter: none;
        backdrop-filter: none;
    }
    .scroll-down { bottom: 17px; }

    .section {
        width: 100%;
        max-width: 620px;
        padding: 72px 17px;
    }
    .section-label {
        margin-bottom: 10px;
        font-size: 9px;
        letter-spacing: .19em;
    }
    .divider { margin-bottom: 19px; }
    .divider::before, .divider::after { width: 48px; }
    .section h2 { margin-bottom: 20px; }
    .section .lead {
        max-width: 520px;
        font-size: 14px;
        line-height: 1.85;
    }

    .families-section { padding-bottom: 62px; }
    .family-grid {
        width: 100%;
        max-width: 480px;
        margin-top: 30px;
        gap: 11px;
    }
    .family-card {
        width: 100%;
        min-height: 0;
        padding: 29px 20px;
        border-radius: 22px;
        background:
            radial-gradient(circle at 50% 0, color-mix(in srgb, var(--accent) 8%, transparent), transparent 45%),
            linear-gradient(145deg, rgba(255,255,255,.095), rgba(255,255,255,.028));
        box-shadow: 0 18px 48px rgba(0,0,0,.22);
    }
    .family-card .couple-name { margin: 16px 0 7px; }
    .family-card b { font-size: 18px; line-height: 1.35; }
    .family-card small { max-width: 310px; }
    .ampersand { margin-block: -5px; font-size: 42px; line-height: .7; }

    .intro { padding-block: 68px; }
    .intro .lead {
        padding: 0 7px;
        font-family: "Cormorant Garamond", serif;
        font-size: 18px;
        line-height: 1.75;
    }

    .countdown { padding-block: 72px; }
    .count-grid {
        grid-template-columns: repeat(2, minmax(0, 1fr));
        width: min(100%, 380px);
        margin-top: 30px;
        gap: 10px;
    }
    .count-grid div {
        min-height: 108px;
        padding: 18px 8px;
        border-radius: 18px;
        display: grid;
        place-items: center;
        align-content: center;
    }
    .count-grid strong { font-size: 39px; line-height: 1; }
    .count-grid span { margin-top: 7px; }

    .ceremony-grid {
        width: 100%;
        max-width: 500px;
        margin-top: 30px;
        gap: 13px;
    }
    .ceremony-card {
        width: 100%;
        padding: 31px 20px;
        border-radius: 22px;
    }
    .ceremony-card h3 { margin: 13px 0 19px; line-height: 1.5; }
    .detail-list { gap: 16px; margin: 21px auto 25px; }
    .detail-list span { font-size: 21px; line-height: 1.25; }
    .detail-list small { max-width: 340px; margin: 7px auto 0; line-height: 1.55; }
    .ceremony-card .btn { width: min(100%, 260px); }

    .love-story .story-card,
    .guest-guide .guest-info-card,
    .rsvp .glass-card {
        box-shadow: 0 20px 54px rgba(0,0,0,.24);
    }
    .story-card { border-radius: 23px; }
    .story-card .lead { font-size: 19px; line-height: 1.75; }
    .guest-info-grid { width: 100%; max-width: 480px; gap: 11px; }
    .guest-info-card { border-radius: 20px; }

    .gallery-showcase {
        max-width: 640px;
        padding-inline: 13px;
    }
    .gallery {
        display: grid;
        grid-template-columns: repeat(2, minmax(0, 1fr));
        grid-auto-rows: auto;
        width: 100%;
        margin-top: 28px;
        gap: 9px;
    }
    .gallery-item,
    .gallery-item:nth-child(5n+1),
    .gallery-item:nth-child(7n+3) {
        grid-column: auto !important;
        grid-row: auto !important;
        width: 100%;
        height: auto;
        aspect-ratio: 4 / 5;
        border-radius: 15px;
        box-shadow: 0 11px 28px rgba(0,0,0,.28);
    }
    .gallery-item:first-child,
    .gallery-item:nth-child(6n+4) {
        grid-column: 1 / -1 !important;
        aspect-ratio: 16 / 10;
    }
    .gallery-item img {
        width: 100%;
        height: 100%;
        object-fit: cover;
        object-position: center;
    }
    .gallery-more { width: min(100%, 290px); margin-top: 24px; }

    .rsvp { padding-inline: 13px; }
    .rsvp .glass-card {
        width: 100%;
        padding: 34px 18px;
        border-radius: 24px;
    }
    .rsvp form { gap: 13px; margin-top: 25px; }
    .rsvp input, .rsvp select, .rsvp textarea {
        min-height: 50px;
        border-radius: 12px;
        font-size: 16px;
    }
    .rsvp textarea { min-height: 112px; }
    .rsvp form > .btn { width: 100%; min-height: 53px; margin-top: 5px; }

    .btn { min-height: 50px; padding-inline: 21px; }
    footer { padding: 22px 16px calc(68px + env(safe-area-inset-bottom)); }
    footer p { max-width: 330px; margin: 20px auto 0; line-height: 1.65; }

    .music-btn {
        top: max(12px, env(safe-area-inset-top));
        right: 12px;
        width: 50px;
        height: 50px;
        box-shadow: 0 10px 28px rgba(0,0,0,.34);
    }
    .music-status { top: calc(max(12px, env(safe-area-inset-top)) + 58px); right: 12px; }
    .lightbox { grid-template-columns: 42px minmax(0,1fr) 42px; padding: 12px 5px; }
    .lightbox img { max-height: 82svh; border-radius: 8px; }

    /* Chỉ hiển thị phần nhìn thấy đầu tiên; giảm việc dựng trang dài trên điện thoại. */
    .section:not(.families-section), footer {
        content-visibility: auto;
        contain-intrinsic-size: auto 720px;
    }
}

@media (max-width: 420px) {
    .opening-card { padding-inline: 19px; }
    .hero { padding-inline: 14px; }
    .hero .names { font-size: clamp(44px, 14.5vw, 61px); }
    .section { padding-inline: 14px; }
    .wedding-section-heading { max-width: calc(100vw - 30px); }
    .gallery-showcase, .rsvp { padding-inline: 10px; }
    .gallery { gap: 7px; }
    .gallery-item,
    .gallery-item:nth-child(5n+1),
    .gallery-item:nth-child(7n+3) { border-radius: 13px; }
}

@media (prefers-reduced-motion: reduce) {
    .gallery-item, .family-card, .ceremony-card { transition: none !important; }
}

/* Mobile rendering keeps the existing visual design while avoiding delayed taps
   and forcing the opening image onto its own stable compositor layer. */
@media (max-width: 760px) {
    .btn,
    button,
    a,
    input,
    select,
    textarea {
        touch-action: manipulation;
    }

    .invitation-poster .poster-photo,
    .invitation-poster .poster-vignette {
        transform: translateZ(0);
        backface-visibility: hidden;
    }
}
/* Refined invitation journey: a quiet status cue while the page tours itself. */
.journey-hint{position:fixed;left:50%;bottom:calc(env(safe-area-inset-bottom,0px) + 18px);z-index:80;margin:0;max-width:calc(100vw - 32px);padding:9px 15px;border:1px solid color-mix(in srgb,var(--accent) 40%,transparent);border-radius:999px;background:color-mix(in srgb,var(--bg) 82%,#000);box-shadow:0 8px 26px #0004;color:var(--accent);font:600 11px/1.2 Montserrat,system-ui,sans-serif;letter-spacing:.04em;opacity:0;pointer-events:none;transform:translate(-50%,12px);transition:opacity .24s ease,transform .24s ease;-webkit-backdrop-filter:blur(8px);backdrop-filter:blur(8px)}.journey-hint.is-visible{opacity:1;transform:translate(-50%,0)}
@media(max-width:760px){.journey-hint{bottom:calc(env(safe-area-inset-bottom,0px) + 14px);padding:8px 13px;font-size:10px}}
@media(prefers-reduced-motion:reduce){.journey-hint{display:none}}