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

.closing {
    --lw: clamp(22px, 6.6cqi, 46px);
    position: relative;
    min-height: 100svh;
    overflow: hidden;
    background: #020100;
    color: var(--ivory);
    text-align: center;
    container-type: inline-size;
    -webkit-tap-highlight-color: transparent
}

.cl-stage {
    position: absolute;
    left: 0;
    top: 0;
    width: 100%;
    aspect-ratio: var(--cl-r)
}

.cl-scene {
    position: absolute;
    inset: 0;
    background-size: 100% 100%;
    background-repeat: no-repeat
}

.cl-scene:after {
    content: "";
    position: absolute;
    left: 0;
    right: 0;
    bottom: 0;
    height: 12%;
    background: linear-gradient(180deg, #02010000, #020100)
}

.cl-sky {
    position: absolute;
    left: 0;
    top: 0;
    z-index: 3;
    width: 100%;
    height: calc(var(--cl-line) * 100%);
    margin: 0;
    padding: 0;
    border: 0;
    background: none;
    cursor: pointer;
    -webkit-tap-highlight-color: transparent
}

.cl-sky:focus {
    outline: none
}

.cl-sky:focus-visible {
    outline: 2px solid rgba(240, 217, 156, .7);
    outline-offset: -8px;
    border-radius: 16px
}

.cl-lanterns {
    position: absolute;
    inset: 0;
    z-index: 2;
    pointer-events: none
}

.cl-lantern {
    position: absolute;
    width: var(--lw);
    aspect-ratio: var(--ln-r);
    translate: -50% -50%;
    transform: scale(var(--s, 1))
}

.cl-ln-bob {
    position: absolute;
    inset: 0;
    animation: cl-bob 6s ease-in-out var(--d, 0s) infinite paused
}

.closing.is-visible .cl-ln-bob {
    animation-play-state: running
}

@keyframes cl-bob {
    0%,
    to {
        transform: translate(0) rotate(-1.5deg)
    }
    50% {
        transform: translateY(-7%) rotate(1.5deg)
    }
}

.cl-ln-bob>i {
    position: absolute;
    background-size: 100% 100%;
    background-repeat: no-repeat
}

.cl-ln-art {
    inset: 0
}

.cl-ln-glow {
    inset: -120% -170%;
    border-radius: 50%;
    background: radial-gradient(closest-side, #ffc46880, #ffaa4629 50%, #ffa03c00);
    animation: cl-flicker 2.6s ease-in-out var(--d, 0s) infinite paused
}

.closing.is-visible .cl-ln-glow {
    animation-play-state: running
}

@keyframes cl-flicker {
    0%,
    to {
        opacity: 1
    }
    30% {
        opacity: .82
    }
    55% {
        opacity: .95
    }
    75% {
        opacity: .78
    }
}

.cl-mono {
    position: absolute;
    left: 50%;
    top: calc(var(--cl-dome) * 50%);
    z-index: 1;
    margin: 0;
    translate: -50% -50%;
    padding: 0 .2em .06em;
    white-space: nowrap;
    font: 600 clamp(34px, 11cqi, 72px) / 1 "Cormorant Garamond", Georgia, serif;
    letter-spacing: .06em;
    background: var(--gold-leaf);
    -webkit-background-clip: text;
    background-clip: text;
    color: transparent;
    filter: drop-shadow(0 0 10px rgba(255, 196, 104, .55)) drop-shadow(0 0 26px rgba(255, 170, 70, .3));
    --wipe: -2%;
    -webkit-mask-image: linear-gradient(90deg, #000 calc(var(--wipe) - 16%), transparent var(--wipe));
    mask-image: linear-gradient(90deg, #000 calc(var(--wipe) - 16%), transparent var(--wipe));
    pointer-events: none
}

.cl-mono i {
    font-style: italic;
    font-weight: 500;
    margin: 0 .12em
}

.closing.is-finale .cl-mono {
    --wipe: 130%
}

.cl-words {
    position: relative;
    z-index: 4;
    padding: calc(100cqi / var(--cl-r) * (var(--cl-line) + .03)) 16px calc(clamp(26px, 7cqi, 52px) + env(safe-area-inset-bottom, 0px));
    pointer-events: none
}

.cl-text {
    position: relative;
    max-width: 34em;
    margin: 0 auto;
    font-size: clamp(15px, 4.3cqi, 19px)
}

.cl-text:before {
    content: "";
    position: absolute;
    z-index: -1;
    inset: -6% -14% -4%;
    background: radial-gradient(closest-side, #020100c7, #02010080 60%, #02010000)
}

.cl-text>* {
    margin: 0;
    text-shadow: 0 1px 6px rgba(0, 0, 0, .95)
}

.cl-text button {
    pointer-events: auto
}

.cl-hint {
    margin-bottom: 1em !important;
    font: italic 500 1em/1.3 Cormorant Garamond, Georgia, serif;
    color: #f0d99c;
    animation: cl-breathe 3.2s ease-in-out infinite;
    transition: opacity .8s
}

@keyframes cl-breathe {
    50% {
        opacity: .45
    }
}

.closing.is-lit .cl-hint {
    opacity: 0;
    animation: none
}

.cl-dua {
    font: 400 1.45em/1.95 Amiri, serif;
    color: #f0d99c;
    text-wrap: balance
}

.cl-dua-en {
    margin-top: .2em !important;
    font: italic 500 1em/1.4 Cormorant Garamond, Georgia, serif;
    color: var(--ivory);
    text-wrap: balance
}

.cl-ref {
    margin-top: .45em !important;
    font: 600 .66em/1.3 Cormorant Garamond, Georgia, serif;
    letter-spacing: .22em;
    padding-left: .22em;
    text-transform: uppercase;
    color: var(--gold)
}

.cl-title {
    margin-top: .3em !important;
    font-size: clamp(50px, 14cqi, 88px)
}

.cl-title .gold-leaf {
    padding: 0 .2em .08em
}

.cl-line {
    font: italic 500 1.02em/1.35 Cormorant Garamond, Georgia, serif;
    color: var(--ivory);
    text-wrap: balance
}

.cl-sign {
    margin-top: .9em !important;
    font: 600 .74em/1.6 Cormorant Garamond, Georgia, serif;
    letter-spacing: .22em;
    padding-left: .22em;
    text-transform: uppercase;
    color: #e6d3a4
}

.cl-replay {
    display: inline-flex;
    align-items: center;
    min-height: 44px;
    margin-top: 1.2em;
    padding: 0 1.4em;
    border: 1px solid #b08a3e;
    border-radius: 999px;
    background: #14100bb8;
    box-shadow: 0 2px 8px #00000080, inset 0 1px #f0d99c29;
    color: #f0d99c;
    font: 700 .9em/1 Cormorant Garamond, Georgia, serif;
    letter-spacing: .06em;
    cursor: pointer;
    -webkit-tap-highlight-color: transparent
}

.cl-replay:hover {
    background: #2a231ad9
}

.cl-replay:focus-visible {
    outline: 2px solid var(--gold);
    outline-offset: 3px
}

.cl-credit {
    margin-top: 1.1em !important;
    font: italic 500 .74em/1.3 Cormorant Garamond, Georgia, serif;
    letter-spacing: .04em;
    color: #bfa877
}

@media(min-aspect-ratio:6/5) {
    html.is-tablet .closing {
        --lw: clamp(22px, 3.4cqi, 46px)
    }
    html.is-tablet .cl-text {
        font-size: clamp(15px, 1.55cqi, 19px)
    }
    html.is-tablet .cl-title {
        font-size: clamp(50px, 5.4cqi, 80px)
    }
    html.is-tablet .cl-mono {
        font-size: clamp(34px, 5cqi, 64px)
    }
}

@media(prefers-reduced-motion:reduce) {
    .cl-ln-bob,
    .cl-ln-glow,
    .cl-hint {
        animation: none
    }
}