/*! © 2026 AQD Invites, aqdinvites.com. All rights reserved. This invitation's design, code, artwork and music may not be copied, reused or resold. */

.closing {
    position: relative;
    background: var(--paper);
    container: ksec / inline-size
}

.closing-stage {
    position: relative;
    height: 100vh;
    height: 100svh;
    min-height: 640px;
    overflow: hidden;
    container: kstage / size
}

.closing img {
    user-select: none;
    -webkit-user-drag: none
}

.closing-stage>* {
    --u: min(1cqw, .52cqh);
    --pal-r: 1.0152;
    --pal-w: min(94cqw, calc(41cqh * var(--pal-r)));
    --words-top: 17cqh;
    --lan: 1.2
}

@container kstage (min-aspect-ratio: 10 / 19) {
    .closing-stage>* {
        --u: min(1cqw, .48cqh);
        --pal-w: min(94cqw, calc(36cqh * var(--pal-r)));
        --words-top: 16cqh
    }
}

.k-sky {
    position: absolute;
    inset: 0;
    background: var(--paper) url(../assets/closing/sky.webp) 50% 0 / cover no-repeat
}

.k-lanterns {
    position: absolute;
    inset: 0;
    pointer-events: none
}

.k-palace {
    position: absolute;
    left: calc(50cqw - var(--pal-w) / 2);
    bottom: -1cqw;
    width: var(--pal-w);
    aspect-ratio: var(--pal-r);
    background: url(../assets/closing/palace.webp) 50% 100% / 100% 100% no-repeat;
    transform-origin: 50% 100%
}

.k-roses {
    position: absolute;
    bottom: -3cqw;
    width: 44cqw;
    pointer-events: none
}

.k-roses img {
    width: 100%
}

.k-roses-l {
    left: -5cqw;
    transform-origin: 0 100%
}

.k-roses-r {
    right: -5cqw;
    transform-origin: 100% 100%
}

.k-lantern {
    position: absolute;
    left: 0;
    top: 0;
    will-change: transform, opacity
}

.k-drift {
    position: relative;
    display: block;
    animation: k-drift var(--dt, 7s) ease-in-out var(--dd, 0s) infinite alternate
}

.k-lantern img {
    position: relative;
    width: 100%;
    transform-origin: 50% 15%;
    animation: k-sway var(--st, 5s) ease-in-out var(--sd, 0s) infinite alternate
}

.k-glow {
    position: absolute;
    inset: -35% -70% -55%;
    border-radius: 50%;
    background: radial-gradient(closest-side, #ffbe609e, #ffc46e38 55%, #ffc46e00);
    animation: k-flicker var(--ft, 2.6s) ease-in-out var(--fd, 0s) infinite
}

@keyframes k-drift {
    0% {
        transform: translate(calc(var(--dx, 2cqw) * -1))
    }
    to {
        transform: translate(var(--dx, 2cqw))
    }
}

@keyframes k-sway {
    0% {
        rotate: -3.5deg
    }
    to {
        rotate: 3.5deg
    }
}

@keyframes k-flicker {
    0%,
    to {
        opacity: .82
    }
    30% {
        opacity: 1
    }
    48% {
        opacity: .7
    }
    66% {
        opacity: .95
    }
    80% {
        opacity: .78
    }
}

.k-words {
    position: absolute;
    left: 0;
    right: 0;
    top: var(--words-top);
    display: flex;
    flex-direction: column;
    align-items: center;
    padding: 0 calc(7 * var(--u));
    text-align: center;
    color: var(--ink);
    pointer-events: none
}

.k-words>* {
    margin: 0;
    pointer-events: auto
}

.k-dua {
    max-width: calc(84 * var(--u));
    font: 400 calc(6.4 * var(--u))/1.85 "Amiri", "Amiri Quran", serif;
    color: var(--ink);
    text-shadow: 0 0 .5em rgba(252, 243, 228, .9);
    text-wrap: balance
}

.k-dua-en {
    max-width: calc(76 * var(--u));
    margin-top: calc(1 * var(--u)) !important;
    font: italic 500 calc(3.9 * var(--u))/1.45 "Cormorant Garamond", Georgia, serif;
    color: var(--ink-soft);
    text-shadow: 0 0 .6em rgba(252, 243, 228, .95);
    text-wrap: balance
}

.k-divider {
    width: calc(40 * var(--u));
    margin-top: calc(3.2 * var(--u)) !important
}

.k-sign {
    display: flex;
    flex-direction: column;
    align-items: center;
    margin-top: calc(2.6 * var(--u)) !important;
    font-weight: 400;
    text-shadow: 0 0 .5em rgba(252, 243, 228, .9)
}

.k-with {
    font: italic 500 calc(4.4 * var(--u))/1.3 "Cormorant Garamond", Georgia, serif;
    color: var(--ink-soft)
}

.k-fam {
    max-width: calc(80 * var(--u));
    font: 400 calc(9 * var(--u))/1.12 "Pinyon Script", cursive;
    color: var(--ink);
    text-wrap: balance
}

.k-release {
    display: inline-flex;
    align-items: center;
    gap: calc(1.4 * var(--u));
    min-height: 40px;
    margin-top: calc(3.6 * var(--u));
    padding: calc(.8 * var(--u)) calc(3.4 * var(--u)) calc(.8 * var(--u)) calc(2.4 * var(--u));
    border: 1px solid rgba(169, 128, 63, .7);
    border-radius: 999px;
    background: #fffaf0a8;
    color: var(--ink);
    font: 600 max(12px, calc(3.4 * var(--u)))/1 "Cormorant Garamond", Georgia, serif;
    letter-spacing: .04em;
    cursor: pointer;
    -webkit-tap-highlight-color: transparent;
    transition: background-color .2s
}

.k-release:hover {
    background: #fffaf0f2
}

.k-release img {
    width: calc(3.6 * var(--u));
    min-width: 14px;
    filter: drop-shadow(0 0 .3em rgba(255, 176, 70, .7))
}

.k-release:focus-visible,
.k-replay:focus-visible {
    outline: 2px solid #a9803f;
    outline-offset: 3px
}

.k-sr,
.k-probe {
    position: absolute;
    width: 1px;
    height: 1px;
    overflow: hidden;
    clip-path: inset(50%)
}

.k-probe {
    width: calc(100 * var(--u));
    height: 0;
    visibility: hidden;
    clip-path: none
}

.k-foot {
    position: relative;
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 14px;
    padding: 30px 24px max(34px, env(safe-area-inset-bottom));
    background: var(--paper) url(../assets/cover/liner.webp) 50% 0 / cover;
    box-shadow: inset 0 1px #a9803f73;
    text-align: center
}

.k-replay {
    display: inline-flex;
    align-items: center;
    gap: 10px;
    min-height: 46px;
    padding: 0 24px 0 20px;
    border: 1px solid rgba(94, 20, 36, .55);
    border-radius: 999px;
    background: #fffaf0b3;
    color: var(--ink);
    font: 600 17px/1 Cormorant Garamond, Georgia, serif;
    letter-spacing: .03em;
    cursor: pointer;
    -webkit-tap-highlight-color: transparent;
    transition: background-color .2s, color .2s
}

.k-replay:hover {
    background: #5e1424;
    color: #f4ead9
}

.k-replay svg {
    width: 18px;
    height: 18px;
    fill: none;
    stroke: currentColor;
    stroke-width: 1.7;
    stroke-linecap: round;
    stroke-linejoin: round
}

.k-credit {
    margin: 0;
    font: 600 11px/1.4 Cormorant Garamond, Georgia, serif;
    letter-spacing: .24em;
    text-transform: uppercase;
    color: var(--ink-soft);
    opacity: .8
}

.k-credit span {
    color: var(--ink)
}

@container kstage (min-aspect-ratio: 5 / 8) {
    .closing-stage>* {
        --u: min(1cqw, .75cqh);
        --pal-w: min(66cqw, calc(44cqh * var(--pal-r)));
        --words-top: 21cqh;
        --lan: 1
    }
    .k-sky {
        background-image: url(../assets/closing/sky-lg.webp);
        background-position: 50% 14%
    }
    .k-palace {
        background-image: url(../assets/closing/palace-lg.webp)
    }
    .k-roses {
        width: 36cqw;
        bottom: -2cqw
    }
    .k-dua {
        max-width: calc(76 * var(--u));
        font-size: calc(4 * var(--u))
    }
    .k-dua-en {
        max-width: calc(64 * var(--u));
        font-size: calc(2.5 * var(--u))
    }
    .k-divider {
        width: calc(30 * var(--u));
        margin-top: calc(2.4 * var(--u)) !important
    }
    .k-sign {
        margin-top: calc(2 * var(--u)) !important
    }
    .k-with {
        font-size: calc(2.8 * var(--u))
    }
    .k-fam {
        max-width: none;
        font-size: calc(6 * var(--u))
    }
    .k-release {
        margin-top: calc(2.6 * var(--u));
        font-size: calc(2.2 * var(--u))
    }
    .k-release img {
        width: calc(2.4 * var(--u))
    }
}

@container kstage (min-aspect-ratio: 6 / 5) {
    .closing-stage>* {
        --u: min(1cqw, 1.3333cqh);
        --pal-r: 2.5552;
        --pal-w: min(84cqw, calc(47cqh * var(--pal-r)));
        --words-top: 11cqh;
        --lan: .8
    }
    .k-sky {
        background-image: url(../assets/closing/sky-wide.webp);
        background-position: 0 0
    }
    .k-palace {
        background-image: url(../assets/closing/palace-wide.webp);
        bottom: -.6cqw
    }
    .k-roses {
        width: 25cqw
    }
    .k-dua {
        max-width: calc(80 * var(--u));
        font-size: calc(3.1 * var(--u))
    }
    .k-dua-en {
        max-width: calc(54 * var(--u));
        font-size: calc(1.75 * var(--u));
        margin-top: calc(.4 * var(--u)) !important
    }
    .k-divider {
        width: calc(22 * var(--u));
        margin-top: calc(1.6 * var(--u)) !important
    }
    .k-sign {
        margin-top: calc(1.2 * var(--u)) !important
    }
    .k-with {
        font-size: calc(1.9 * var(--u))
    }
    .k-fam {
        font-size: calc(4.4 * var(--u))
    }
    .k-release {
        margin-top: calc(1.8 * var(--u));
        font-size: calc(1.55 * var(--u));
        padding: calc(.6 * var(--u)) calc(2.2 * var(--u)) calc(.6 * var(--u)) calc(1.6 * var(--u))
    }
    .k-release img {
        width: calc(1.7 * var(--u))
    }
}

@media(prefers-reduced-motion:reduce) {
    .k-drift,
    .k-lantern img,
    .k-glow {
        animation: none
    }
}