/* wedding-gallery 相册入口、祝福氛围弹幕与横向婚纱照故事 */
body.wedding-gallery-open {
    overflow: hidden;
}

#wedding-gallery-section {
    position: relative;

    >.heading {
        position: relative;
        z-index: 2;
    }

    .images-box {
        position: relative;
        z-index: 2;
        display: flex;
        justify-content: center;
        width: 100%;
        margin-top: var(--space-6);
    }

    .images-box-music-hint {
        margin: var(--space-4) 0 0;
        color: color-mix(in srgb, var(--wedding-ink) 66%, transparent);
        font-family: Georgia, serif;
        font-size: var(--font-size-xs);
        letter-spacing: var(--letter-spacing-wide);
        text-align: center;
    }

    .images-box-music-hint span {
        margin-right: var(--space-1);
        color: var(--wedding-accent);
        font-size: var(--font-size-md);
    }

    .images-box-trigger {
        position: relative;
        z-index: 2;
        width: 7.25rem;
        height: 9.75rem;
        padding: 0;
        border: 0;
        color: var(--wedding-ink);
        background: transparent;
        cursor: pointer;
    }

    .images-box-stack {
        position: absolute;
        top: 0;
        left: 50%;
        width: 6rem;
        height: 8.4rem;
        transform: translateX(-50%);
    }

    .images-box-card {
        position: absolute;
        inset: 0;
        width: 100%;
        height: 100%;
        border: 0.25rem solid var(--wedding-card);
        object-fit: cover;
        transform-origin: 50% 90%;
        pointer-events: none;

        &:nth-child(1) {
            z-index: 3;
            transform: rotate(2deg);
        }

        &:nth-child(2) {
            z-index: 2;
            transform: translate(-0.45rem, 0.2rem) rotate(-6deg);
        }

        &:nth-child(3) {
            z-index: 1;
            transform: translate(-0.8rem, 0.45rem) rotate(-11deg);
        }
    }

    .images-box-label {
        position: absolute;
        right: 50%;
        bottom: 0;
        font-family: Georgia, serif;
        font-size: var(--font-size-2xs);
        letter-spacing: var(--letter-spacing-wide);
        transform: translateX(50%);
        white-space: nowrap;
    }

    .images-box-trigger:hover .images-box-card:nth-child(1),
    .images-box-trigger:focus-visible .images-box-card:nth-child(1) {
        transform: translateY(-0.3rem) rotate(4deg);
    }

    .images-box-trigger:focus-visible {
        outline: 1px solid var(--wedding-accent);
        outline-offset: var(--space-1);
    }

    .wedding-gallery-section-danmaku {
        position: absolute;
        z-index: 1;
        inset: 0;
        overflow: hidden;
        mask-image: linear-gradient(to right, transparent, #000 12%, #000 88%, transparent);
        pointer-events: none;
        user-select: none;
    }

    .wedding-gallery-section-danmaku-item {
        position: absolute;
        top: calc(var(--section-danmaku-top) + var(--section-danmaku-offset));
        left: 0;
        color: color-mix(in srgb, var(--wedding-ink) 78%, transparent);
        font-size: var(--font-size-xs);
        line-height: 1.5;
        letter-spacing: var(--letter-spacing-wide);
        opacity: 0.5;
        transform: translateX(100vw);
        animation: wedding-gallery-section-danmaku var(--section-danmaku-duration) linear infinite;
        animation-delay: var(--section-danmaku-delay);
        white-space: nowrap;
        will-change: transform;
        pointer-events: none;
    }

    .wedding-gallery {
        --gallery-bg: #171513;
        --gallery-paper: #fbf6ef;
        --gallery-muted: rgba(251, 246, 239, 0.62);
        --gallery-line: rgba(251, 246, 239, 0.2);
        position: fixed;
        inset: 0;
        z-index: 2000;
        overflow: hidden;
        color: var(--gallery-paper);
        background: var(--gallery-bg);
        visibility: hidden;

        &[hidden] {
            display: none;
        }
    }

    .wedding-gallery-toolbar,
    .wedding-gallery-status {
        position: absolute;
        right: var(--space-6);
        left: var(--space-6);
        z-index: 4;
        display: flex;
        align-items: center;
        justify-content: space-between;
        pointer-events: none;
    }

    .wedding-gallery-toolbar {
        top: var(--space-5);
    }

    .wedding-gallery-brand {
        margin: 0;
        color: var(--gallery-muted);
        font-family: Georgia, serif;
        font-size: var(--font-size-2xs);
        letter-spacing: 0.18em;
        text-transform: uppercase;
    }

    .wedding-gallery-danmaku-toggle,
    .wedding-gallery-close,
    .wedding-gallery-outro button {
        flex-shrink: 0;
        pointer-events: auto;
        border: 1px solid var(--gallery-line);
        border-radius: 999px;
        color: var(--gallery-paper);
        background: transparent;
        font-size: var(--font-size-xs);
        letter-spacing: var(--letter-spacing-wide);
        cursor: pointer;
    }

    .wedding-gallery-actions {
        position: relative;
        display: flex;
        align-items: center;
        gap: var(--space-2);
        pointer-events: auto;
    }

    .wedding-gallery-music-hint {
        position: absolute;
        top: calc(100% + var(--space-3));
        right: 0;
        display: grid;
        grid-template-columns: auto minmax(0, 1fr);
        align-items: center;
        z-index: 5;
        box-sizing: border-box;
        width: min(18rem, calc(100vw - (var(--space-4) * 2)));
        max-width: none;
        margin: 0;
        padding: var(--space-3) var(--space-4);
        gap: var(--space-3);
        border: 1px solid color-mix(in srgb, var(--wedding-accent) 42%, var(--gallery-line));
        border-radius: var(--radius-lg);
        color: var(--gallery-paper);
        background: color-mix(in srgb, var(--gallery-bg) 88%, transparent);
        box-shadow: 0 var(--space-3) var(--space-7) color-mix(in srgb, var(--gallery-bg) 55%, transparent);
        backdrop-filter: blur(0.75rem);
        pointer-events: none;
        visibility: hidden;
        opacity: 0;
        transform: translateY(-0.375rem);

        &::before {
            position: absolute;
            top: -0.3rem;
            right: calc(var(--space-8) + var(--space-5));
            width: 0.55rem;
            height: 0.55rem;
            border-top: 1px solid color-mix(in srgb, var(--wedding-accent) 42%, var(--gallery-line));
            border-left: 1px solid color-mix(in srgb, var(--wedding-accent) 42%, var(--gallery-line));
            background: color-mix(in srgb, var(--gallery-bg) 92%, transparent);
            content: '';
            transform: rotate(45deg);
        }
    }

    .wedding-gallery-music-hint__mark {
        display: grid;
        width: var(--space-7);
        height: var(--space-7);
        place-items: center;
        border: 1px solid color-mix(in srgb, var(--wedding-accent) 58%, transparent);
        border-radius: var(--radius-pill);
        color: var(--wedding-accent);
        font-family: Georgia, serif;
        font-size: var(--font-size-md);
    }

    .wedding-gallery-music-hint__copy {
        display: grid;
        gap: var(--space-1);
        min-width: 0;
    }

    .wedding-gallery-music-hint__copy strong,
    .wedding-gallery-music-hint__copy small {
        overflow: hidden;
        text-overflow: ellipsis;
        white-space: nowrap;
    }

    .wedding-gallery-music-hint__copy strong {
        font-family: Georgia, serif;
        font-size: var(--font-size-xs);
        font-weight: 400;
        letter-spacing: var(--letter-spacing-wide);
    }

    .wedding-gallery-music-hint__copy small {
        color: var(--gallery-muted);
        font-size: var(--font-size-2xs);
        letter-spacing: 0.04em;
    }

    .wedding-gallery-danmaku-toggle,
    .wedding-gallery-close {
        padding: var(--space-2) var(--space-4);
    }

    .wedding-gallery-danmaku-toggle[aria-pressed="false"] {
        opacity: 0.5;
        text-decoration: line-through;
    }

    .wedding-gallery-danmaku-toggle:hover,
    .wedding-gallery-danmaku-toggle:focus-visible,
    .wedding-gallery-close:hover,
    .wedding-gallery-close:focus-visible,
    .wedding-gallery-outro button:hover,
    .wedding-gallery-outro button:focus-visible {
        color: var(--gallery-bg);
        background: var(--gallery-paper);
        outline: none;
    }

    .wedding-gallery-danmaku-toggle[aria-pressed="false"]:hover,
    .wedding-gallery-danmaku-toggle[aria-pressed="false"]:focus-visible {
        color: var(--gallery-paper);
        background: transparent;
    }

    .wedding-gallery-viewport {
        width: 100%;
        height: 100%;
        overflow: hidden;
        touch-action: pan-y;
        user-select: none;
        -webkit-user-select: none;
        -webkit-touch-callout: none;
        cursor: grab;

        &.is-dragging {
            cursor: grabbing;
        }

        &:focus-visible {
            outline: none;
        }
    }

    .wedding-gallery-track {
        display: flex;
        align-items: stretch;
        width: max-content;
        height: 100%;
        background: transparent;
        user-select: none;
        -webkit-user-select: none;
        will-change: transform;
    }

    .wedding-gallery-blessing input,
    .wedding-gallery-blessing textarea {
        user-select: text;
        -webkit-user-select: text;
    }

    .wedding-gallery-intro,
    .wedding-gallery-blessing,
    .wedding-gallery-outro {
        flex: 0 0 100vw;
        width: 100vw;
        height: 100%;
        padding: clamp(var(--space-7), 8vw, 8rem);
    }

    .wedding-gallery-intro,
    .wedding-gallery-outro {
        display: flex;
        flex-direction: column;
        justify-content: center;
    }

    .wedding-gallery-intro {
        background:
            radial-gradient(circle at 72% 35%, color-mix(in srgb, var(--wedding-accent) 24%, transparent), transparent 28%),
            var(--gallery-bg);
    }

    .wedding-gallery-kicker,
    .wedding-gallery-item figcaption span {
        margin: 0 0 var(--space-4);
        color: var(--wedding-accent);
        font-family: Georgia, serif;
        font-size: var(--font-size-xs);
        letter-spacing: 0.22em;
        text-transform: uppercase;
    }

    .wedding-gallery-intro h2,
    .wedding-gallery-blessing h2,
    .wedding-gallery-outro h2 {
        max-width: 12ch;
        margin: 0;
        font-family: Georgia, serif;
        font-size: clamp(var(--font-size-2xl), 6vw, 5.5rem);
        font-weight: 400;
        line-height: 1.08;
    }

    .wedding-gallery-intro>p:not(.wedding-gallery-kicker),
    .wedding-gallery-outro>p:not(.wedding-gallery-kicker) {
        max-width: 34rem;
        margin: var(--space-6) 0 0;
        color: var(--gallery-muted);
        font-size: var(--font-size-sm);
        line-height: var(--line-height-relaxed);
    }

    .wedding-gallery-direction {
        margin-top: var(--space-7);
        color: var(--gallery-muted);
        font-family: Georgia, serif;
        font-size: var(--font-size-xs);
        letter-spacing: var(--letter-spacing-wide);
        text-transform: uppercase;
    }

    .wedding-gallery-skip {
        width: fit-content;
        margin-top: var(--space-5);
        padding: var(--space-2) 0;
        border: 0;
        border-bottom: 1px solid var(--gallery-line);
        color: var(--gallery-paper);
        background: transparent;
        font: inherit;
        font-size: var(--font-size-xs);
        letter-spacing: var(--letter-spacing-wide);
        cursor: pointer;
        transition: border-color var(--duration-fast) ease-out, color var(--duration-fast) ease-out;

        &:hover,
        &:focus-visible {
            border-color: var(--wedding-accent);
            outline: none;
            color: var(--wedding-accent);
        }
    }

    .wedding-gallery-item {
        --gallery-shift-y: 0;
        display: grid;
        flex: 0 0 clamp(20rem, 42vw, 34rem);
        width: clamp(20rem, 42vw, 34rem);
        height: 100%;
        align-content: center;
        margin: 0 clamp(4rem, 10vw, 11rem) 0 0;
        padding: var(--space-7) 0;
        transform: translateY(var(--gallery-shift-y));

        &.gallery-item--landscape {
            flex-basis: clamp(32rem, 68vw, 60rem);
            width: clamp(32rem, 68vw, 60rem);
        }

        &.gallery-item--high {
            --gallery-shift-y: -4vh;
        }

        &.gallery-item--low {
            --gallery-shift-y: 5vh;
        }
    }

    .wedding-gallery-media {
        position: relative;
        height: min(62vh, 46rem);
        overflow: hidden;
    }

    .gallery-item--landscape .wedding-gallery-media {
        height: min(54vh, 38rem);
    }

    .wedding-gallery-media img {
        width: 112%;
        height: 100%;
        margin-left: -6%;
        object-fit: cover;
        pointer-events: none;
        user-select: none;
        will-change: transform;
    }

    .wedding-gallery-item figcaption {
        max-width: 34rem;
        padding-top: var(--space-4);
        will-change: transform, opacity;
    }

    .wedding-gallery-item figcaption span {
        display: block;
        margin-bottom: var(--space-2);
    }

    .wedding-gallery-item figcaption h3 {
        margin: 0;
        color: var(--gallery-paper);
        font-family: Georgia, serif;
        font-size: var(--font-size-xl);
        font-weight: 400;
    }

    .wedding-gallery-item figcaption p {
        margin: var(--space-2) 0 0;
        color: var(--gallery-muted);
        font-size: var(--font-size-sm);
        line-height: var(--line-height-relaxed);
    }

    .wedding-gallery-outro {
        align-items: flex-start;
        /* 末尾面板随横向轨道进入时不制造浅色边，底层 gallery 背景负责铺底。 */
        background: transparent;
    }

    .wedding-gallery-outro button {
        margin-top: var(--space-7);
        padding: var(--space-3) var(--space-5);
    }

    .wedding-gallery-blessing {
        display: grid;
        grid-template-columns: minmax(0, 0.9fr) minmax(20rem, 0.75fr);
        align-items: center;
        gap: clamp(var(--space-7), 7vw, 7rem);
        overflow-y: auto;
        touch-action: pan-y;
        -webkit-overflow-scrolling: touch;
        overscroll-behavior: contain;
        background:
            radial-gradient(circle at 20% 30%, color-mix(in srgb, var(--wedding-accent) 20%, transparent), transparent 34%),
            color-mix(in srgb, var(--wedding-accent) 7%, var(--gallery-bg));
    }

    .wedding-gallery-blessing__copy {
        max-width: 42rem;
    }

    .wedding-gallery-blessing__copy>p:not(.wedding-gallery-kicker) {
        max-width: 32rem;
        margin: var(--space-6) 0 0;
        color: var(--gallery-muted);
        font-size: var(--font-size-sm);
        line-height: var(--line-height-relaxed);
    }

    .wedding-gallery-blessing__form {
        display: grid;
        justify-self: end;
        width: min(100%, 32rem);
        gap: var(--space-4);
        padding: 0;
        /* border: 1px solid var(--gallery-line); */
        /* border-radius: var(--radius-lg); */
        /* background: color-mix(in srgb, var(--gallery-paper) 6%, transparent); */
        /* backdrop-filter: blur(0.75rem); */

        .wedding-gallery-blessing__field {
            display: grid;
            grid-template-columns: max-content minmax(0, 1fr);
            align-items: center;
            gap: var(--space-3);
            justify-items: stretch;
        }

        label {
            color: var(--gallery-muted);
            font-size: var(--font-size-xs);
            letter-spacing: var(--letter-spacing-wide);
            line-height: var(--line-height-normal);
            white-space: nowrap;
        }

        .wedding-gallery-blessing__control {
            min-width: 0;
        }

        input {
            display: block;
            width: 100%;
            padding: var(--space-3) var(--space-4);
            border: 1px solid var(--gallery-line);
            border-radius: var(--radius-sm);
            outline: none;
            background: color-mix(in srgb, var(--gallery-paper) 8%, transparent);
            color: var(--gallery-paper);
            caret-color: var(--wedding-accent);
            font: inherit;

            &::placeholder {
                color: var(--gallery-muted);
            }

            &:focus-visible {
                border-color: var(--wedding-accent);
                box-shadow: 0 0 0 0.125rem color-mix(in srgb, var(--wedding-accent) 28%, transparent);
            }
        }

        .blessing-presets {
            display: flex;
            flex-wrap: wrap;
            gap: var(--space-2);
            padding: var(--space-3) 0;
        }

        .blessing-presets__chip {
            padding: var(--space-2) var(--space-3);
            border: 1px solid var(--gallery-line);
            border-radius: var(--radius-pill);
            background: transparent;
            color: var(--gallery-muted);
            font: inherit;
            font-size: var(--font-size-xs);
            cursor: pointer;

            &:hover,
            &:focus-visible {
                border-color: var(--wedding-accent);
                outline: none;
                color: var(--gallery-paper);
            }
        }

        .wedding-gallery-blessing__submit {
            width: fit-content;
            padding: var(--space-3) var(--space-5);
            border: 0;
            border-radius: var(--radius-pill);
            background: var(--wedding-accent);
            color: var(--gallery-paper);
            font: inherit;
            cursor: pointer;

            &:hover,
            &:focus-visible {
                outline: 0.125rem solid color-mix(in srgb, var(--gallery-paper) 70%, transparent);
                outline-offset: 0.125rem;
            }

            &:disabled {
                opacity: 0.55;
                cursor: not-allowed;
            }
        }

        .form-status {
            min-height: 1.5em;
            margin: 0;
            color: var(--wedding-accent);
            font-size: var(--font-size-xs);
        }
    }

    .wedding-gallery-danmaku {
        position: absolute;
        inset: 0;
        z-index: 3;
        overflow: hidden;
        pointer-events: none;
    }

    .wedding-gallery-danmaku-item {
        position: absolute;
        top: calc(var(--danmaku-top) + var(--danmaku-offset));
        left: 0;
        max-width: none;
        color: rgba(255, 255, 255, 0.9);
        opacity: 0.5;
        font-size: var(--font-size-sm);
        font-weight: 500;
        line-height: 1.5;
        letter-spacing: 0.02em;
        text-shadow: 0 1px 4px rgba(0, 0, 0, 0.72);
        white-space: nowrap;
        will-change: transform;
    }

    .wedding-gallery-status {
        bottom: var(--space-5);
        gap: var(--space-4);
        color: var(--gallery-muted);
        font-family: Georgia, serif;
        font-size: var(--font-size-2xs);
        letter-spacing: var(--letter-spacing-wide);
        text-transform: uppercase;
    }

    .wedding-gallery-progress {
        position: relative;
        flex: 1;
        height: 1px;
        overflow: hidden;
        background: var(--gallery-line);
    }

    .wedding-gallery-progress i {
        position: absolute;
        inset: 0;
        background: var(--gallery-paper);
        transform: scaleX(0);
        transform-origin: 0 50%;
    }

    .wedding-gallery-transition-card {
        position: fixed;
        z-index: 2002;
        object-fit: cover;
        border: 0.25rem solid var(--gallery-paper);
        box-shadow: 0 1.5rem 4rem color-mix(in srgb, var(--gallery-bg) 70%, transparent);
        pointer-events: none;
        will-change: transform, opacity;
    }

    @media (max-width: 767px) {

        .wedding-gallery-toolbar,
        .wedding-gallery-status {
            right: var(--space-4);
            left: var(--space-4);
        }

        .wedding-gallery-toolbar {
            top: var(--space-4);
        }

        .wedding-gallery-music-hint {
            width: min(16rem, calc(100vw - (var(--space-4) * 2)));
        }

        .wedding-gallery-status {
            bottom: var(--space-4);
        }

        .wedding-gallery-brand {
            max-width: 16rem;
        }

        .wedding-gallery-intro,
        .wedding-gallery-blessing,
        .wedding-gallery-outro {
            padding: var(--space-7) var(--space-5);
        }

        .wedding-gallery-intro h2,
        .wedding-gallery-blessing h2,
        .wedding-gallery-outro h2 {
            font-size: clamp(var(--font-size-2xl), 12vw, 4rem);
        }

        .wedding-gallery-blessing {
            grid-template-columns: minmax(0, 1fr);
            align-content: center;
            gap: var(--space-6);
            padding-top: var(--space-10);
            padding-bottom: var(--space-9);
        }

        .wedding-gallery-blessing__form {
            justify-self: stretch;
        }

        .wedding-gallery-item,
        .wedding-gallery-item.gallery-item--landscape {
            flex-basis: 84vw;
            width: 84vw;
            margin-right: 16vw;
            padding: var(--space-8) 0 var(--space-7);
        }

        .wedding-gallery-item.gallery-item--landscape {
            flex-basis: 92vw;
            width: 92vw;
            margin-right: 12vw;
        }

        .wedding-gallery-item.gallery-item--high {
            --gallery-shift-y: -2vh;
        }

        .wedding-gallery-item.gallery-item--low {
            --gallery-shift-y: 3vh;
        }

        .wedding-gallery-media {
            height: 58vh;
        }

        .gallery-item--landscape .wedding-gallery-media {
            height: 42vh;
        }

        .wedding-gallery-item figcaption {
            padding-right: var(--space-4);
            padding-left: var(--space-4);
        }

        .wedding-gallery-direction {
            margin-top: var(--space-6);
        }
    }

    @media (prefers-reduced-motion: reduce) {

        .images-box-card,
        .wedding-gallery-section-danmaku-item,
        .wedding-gallery-danmaku-item,
        .wedding-gallery-media img,
        .wedding-gallery-item figcaption {
            will-change: auto;
        }
    }

}

/* Keep the transient music hint animation flat so older mobile WebViews do not
 * lose it when they only partially support CSS nesting. */
.wedding-gallery-music-hint.is-visible {
    animation: wedding-gallery-music-hint 5s ease both;
}

@keyframes wedding-gallery-music-hint {
    0% {
        visibility: hidden;
        opacity: 0;
        transform: translateY(-0.375rem);
    }

    21% {
        visibility: visible;
        opacity: 1;
        transform: translateY(0);
    }

    81% {
        visibility: visible;
        opacity: 1;
        transform: translateY(0);
    }

    100% {
        visibility: hidden;
        opacity: 0;
        transform: translateY(-0.1875rem);
    }
}

@media (prefers-reduced-motion: reduce) {
    .wedding-gallery-music-hint.is-visible {
        animation-duration: 1.12s;
    }
}

@keyframes wedding-gallery-section-danmaku {
    from {
        transform: translateX(100vw);
    }

    to {
        transform: translateX(-120%);
    }
}