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

.closing {
    position: relative;
    height: 100vh;
    height: 100svh;
    min-height: 560px;
    overflow: hidden;
    background: #0e1531;
    color: #f6ece6;
    container-type: size;
    -webkit-tap-highlight-color: transparent
}

.cl-scene {
    position: absolute;
    left: 50%;
    top: 50%;
    width: max(100cqw, 100cqh * var(--pic-r));
    aspect-ratio: var(--pic-r);
    translate: -50% -50%;
    background-position: center;
    background-size: 100% 100%;
    background-repeat: no-repeat;
    container-type: size
}

.cl-art {
    position: absolute;
    inset: 0;
    pointer-events: none
}

.cl-art>* {
    position: absolute
}

.cl-moon {
    left: var(--moon-l);
    top: var(--moon-t);
    width: var(--moon-w);
    aspect-ratio: 1;
    background-size: 100% 100%;
    mix-blend-mode: screen
}

.cl-glow {
    aspect-ratio: 1;
    translate: -50% -50%;
    border-radius: 50%;
    background: radial-gradient(closest-side, #ffc47880, #ffaa5a2e 45%, #ffa05000);
    mix-blend-mode: screen;
    animation: cl-flicker 3.1s ease-in-out infinite alternate
}

.cl-lamp1 {
    left: var(--lamp1-x);
    top: var(--lamp1-y);
    width: 16cqw
}

.cl-lamp2 {
    left: var(--lamp2-x);
    top: var(--lamp2-y);
    width: 16cqw;
    animation-duration: 2.6s;
    animation-delay: -1.2s
}

.cl-pav {
    left: var(--pav-x);
    top: var(--pav-y);
    width: 24cqw;
    aspect-ratio: 1.6;
    animation-duration: 4.4s;
    opacity: .8
}

@keyframes cl-flicker {
    0% {
        opacity: .55;
        scale: .96
    }
    30% {
        opacity: .85;
        scale: 1.02
    }
    55% {
        opacity: .68;
        scale: .99
    }
    80% {
        opacity: .95;
        scale: 1.04
    }
    to {
        opacity: .72;
        scale: 1
    }
}

.cl-veil {
    inset: 0;
    background: radial-gradient(ellipse calc((var(--in-r) - var(--in-l)) * .62) calc((var(--in-b) - var(--in-t)) * .62) at 50% calc((var(--in-t) + var(--in-b)) / 2), #0a0e2680, #0a0e2647 60%, #0a0e2600)
}

.cl-flies,
.cl-petals {
    inset: 0
}

.cl-flies {
    mix-blend-mode: screen
}

.cl-fly {
    position: absolute;
    left: 0;
    top: 0;
    width: var(--fly, .8cqw);
    aspect-ratio: 1
}

.cl-fly b {
    display: block;
    width: 100%;
    height: 100%;
    border-radius: 50%;
    background: radial-gradient(circle, #fffbe0 0, #ffe9a0 35%, #ffd66e00 72%);
    box-shadow: 0 0 calc(var(--fly, .8cqw) * 2) calc(var(--fly, .8cqw) * .7) #ffd6789e, 0 0 calc(var(--fly, .8cqw) * 5) calc(var(--fly, .8cqw) * .6) #ffc86438
}

.cl-petal {
    position: absolute;
    left: 0;
    top: 0;
    perspective: 300px
}

.cl-petal b {
    display: block;
    transform-style: preserve-3d
}

.cl-petal img {
    width: 100%;
    height: auto;
    filter: brightness(.72) saturate(.9) drop-shadow(0 2px 3px rgba(0, 0, 0, .3))
}

.cl-words {
    --iw: calc((var(--in-r-n) - var(--in-l-n)) * 100cqw);
    --ih: calc((var(--in-b-n) - var(--in-t-n)) * 100cqh);
    --u: calc(min(var(--iw), var(--ih) * .9) * var(--fit, 1));
    position: absolute;
    left: var(--in-l);
    right: calc(100% - var(--in-r));
    top: var(--in-t);
    bottom: calc(100% - var(--in-b));
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: calc(var(--u) * .06);
    text-align: center
}

.cl-words p {
    margin: 0
}

.cl-words * {
    text-shadow: 0 0 14px rgba(8, 10, 32, .9), 0 0 3px rgba(8, 10, 32, .75)
}

.cl-thanks,
.cl-dua {
    display: flex;
    flex-direction: column;
    align-items: center
}

.cl-kicker {
    font: 600 max(10.5px, var(--u) * .036)/1.3 "Cormorant Garamond", Georgia, serif;
    letter-spacing: .3em;
    padding-left: .3em;
    text-transform: uppercase;
    color: #cdd8c0
}

.cl-title {
    margin: 0 0 calc(var(--u) * .01);
    font: 700 calc(var(--u) * .2)/1.05 "Corinthia", cursive;
    padding: 0 .2em .04em;
    white-space: nowrap;
    color: #f2cdbf;
    --wipe: 130%;
    -webkit-mask-image: linear-gradient(90deg, #000 calc(var(--wipe) - 18%), transparent var(--wipe));
    mask-image: linear-gradient(90deg, #000 calc(var(--wipe) - 18%), transparent var(--wipe))
}

.cl-msg {
    max-width: 30em;
    font: italic 500 max(14px, var(--u) * .052)/1.4 "Cormorant Garamond", Georgia, serif;
    color: #f6ece6f2;
    text-wrap: balance
}

.cl-sign {
    margin-top: .55em !important;
    font: 600 max(15px, var(--u) * .062)/1.2 "Cormorant Garamond", Georgia, serif;
    color: #f6ece6
}

.cl-fams {
    font: italic 500 max(12.5px, var(--u) * .042)/1.3 "Cormorant Garamond", Georgia, serif;
    color: #f6ece6d9
}

.cl-dua {
    gap: calc(var(--u) * .012)
}

.cl-dua-ar {
    font: 400 max(17px, var(--u) * .062)/1.95 "Amiri Quran", "Amiri", serif;
    color: #f0c9bb;
    text-wrap: balance
}

.cl-dua-en {
    max-width: 30em;
    font: italic 500 max(13px, var(--u) * .045)/1.4 "Cormorant Garamond", Georgia, serif;
    color: #f6ece6eb;
    text-wrap: balance
}

.cl-dua-ref {
    margin-top: .3em !important;
    font: 600 max(9.5px, var(--u) * .031)/1.3 "Cormorant Garamond", Georgia, serif;
    letter-spacing: .22em;
    text-transform: uppercase;
    color: #cdd8c0
}

.cl-credit {
    margin-top: 1.6em !important;
    font: 500 max(10px, var(--u) * .03)/1.3 "Cormorant Garamond", Georgia, serif;
    letter-spacing: .14em;
    color: #f0e8e28c
}

.closing.is-armed:not(.is-played) .cl-anim,
.closing.is-armed:not(.is-played) .cl-moon {
    opacity: 0
}

@media(min-aspect-ratio:6/5) {
    html.is-tablet .cl-words {
        --u: calc(min(var(--iw) * .62, var(--ih) * 1.2) * var(--fit, 1));
        display: grid;
        grid-template-columns: 1fr 1fr;
        align-items: center;
        column-gap: calc(var(--u) * .12)
    }
    html.is-tablet .cl-thanks {
        grid-column: 1
    }
    html.is-tablet .cl-dua {
        grid-column: 2
    }
}

@media(prefers-reduced-motion:reduce) {
    .cl-glow {
        animation: none;
        opacity: .75
    }
    .closing.is-armed:not(.is-played) .cl-anim,
    .closing.is-armed:not(.is-played) .cl-moon {
        opacity: 1
    }
}