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

.closing {
    --cl-r: .5628;
    position: relative;
    height: 100vh;
    height: 100svh;
    min-height: 420px;
    overflow: hidden;
    container-type: size;
    background: var(--night-deep);
    isolation: isolate;
    color: var(--pearl);
    -webkit-tap-highlight-color: transparent
}

.cl-scene {
    position: absolute;
    left: 50%;
    top: 50%;
    width: max(100cqw, 100cqh * var(--cl-r));
    aspect-ratio: var(--cl-r);
    translate: -50% -50%;
    cursor: pointer
}

.closing.is-lit .cl-scene {
    cursor: default
}

.cl-garden,
.cl-lights,
.cl-fx {
    position: absolute;
    inset: 0;
    pointer-events: none
}

.cl-garden {
    background-position: center;
    background-size: 100% 100%;
    background-repeat: no-repeat
}

.cl-l {
    position: absolute;
    display: none;
    background-size: 100% 100%;
    background-repeat: no-repeat;
    mix-blend-mode: screen;
    opacity: 0
}

.closing.is-lit .cl-l {
    opacity: 1;
    animation: cl-flicker var(--d, 3.1s) ease-in-out var(--delay, 0s) infinite alternate
}

.closing.is-away .cl-l {
    animation-play-state: paused
}

.cl-l1 {
    --d: 2.7s;
    --delay: -.4s
}

.cl-l2 {
    --d: 3.4s;
    --delay: -1.3s
}

.cl-l3 {
    --d: 2.9s;
    --delay: -2.1s
}

.cl-l4 {
    --d: 3.7s;
    --delay: -.9s
}

.cl-l5 {
    --d: 3.2s;
    --delay: -1.7s
}

.cl-l6 {
    --d: 2.6s;
    --delay: -.2s
}

.cl-l7 {
    --d: 3.5s;
    --delay: -2.6s
}

.cl-l8 {
    --d: 3s;
    --delay: -1.1s
}

.cl-l9 {
    --d: 2.8s;
    --delay: -1.9s
}

@keyframes cl-flicker {
    0% {
        opacity: 1
    }
    40% {
        opacity: .86
    }
    55% {
        opacity: .97
    }
    to {
        opacity: .9
    }
}

.cl-star {
    position: absolute;
    width: 16%;
    height: 2px;
    border-radius: 2px;
    background: linear-gradient(90deg, #ecf6ff00, #ecf6ff8c 70%, #fff);
    box-shadow: 0 0 6px #d6e8fab3;
    transform-origin: 100% 50%;
    opacity: 0
}

.cl-petal {
    position: absolute;
    background-image: url(../assets/cover/petals.webp);
    background-repeat: no-repeat;
    filter: drop-shadow(0 2px 2px rgba(4, 16, 28, .35));
    opacity: 0
}

.cl-block {
    position: absolute;
    container-type: size;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    text-align: center;
    pointer-events: none;
    --u: calc(min(1cqw, 1.9cqh) * var(--fit, 1))
}

.cl-block>* {
    margin: 0
}

.cl-sky {
    left: var(--sky-l);
    right: calc(100% - var(--sky-r));
    top: var(--sky-t);
    bottom: calc(100% - var(--sky-b))
}

.cl-water {
    left: var(--wat-l);
    right: calc(100% - var(--wat-r));
    top: var(--wat-t);
    bottom: calc(100% - var(--wat-b))
}

.cl-block:before {
    content: "";
    position: absolute;
    inset: -6% -12% -8%;
    z-index: -1;
    background: radial-gradient(closest-side, rgba(8, 24, 40, .34), rgba(8, 24, 40, .16) 60%, transparent)
}

.cl-water:before {
    display: none
}

.cl-veil {
    position: absolute;
    left: calc(var(--wat-l) - (var(--wat-r) - var(--wat-l)) * .08);
    right: calc(100% - var(--wat-r) - (var(--wat-r) - var(--wat-l)) * .08);
    top: calc(var(--wat-t) - (var(--wat-b) - var(--wat-t)) * .04);
    bottom: calc(100% - var(--wat-b) - (var(--wat-b) - var(--wat-t)) * .04);
    background: radial-gradient(closest-side, rgba(8, 26, 40, .72), rgba(8, 26, 40, .48) 62%, transparent);
    pointer-events: none;
    opacity: 0;
    transition: opacity 1.2s ease
}

.closing.is-told .cl-veil {
    opacity: 1
}

.cl-dua {
    font: 400 calc(var(--u) * 6.8)/1.75 "Amiri", serif;
    text-wrap: balance;
    text-shadow: 0 0 12px rgba(180, 212, 238, .4), 0 1px 2px rgba(4, 16, 28, .8)
}

.cl-dua-en {
    margin-top: calc(var(--u) * .8) !important;
    font: italic 500 calc(var(--u) * 4.9)/1.35 "Cormorant Garamond", Georgia, serif;
    color: #f4f1e8f0;
    text-wrap: balance;
    text-shadow: 0 1px 2px rgba(4, 16, 28, .9)
}

.cl-dua-ref,
.cl-kicker,
.cl-date {
    font: 700 calc(var(--u) * 3.2)/1.3 "Cormorant Garamond", Georgia, serif;
    letter-spacing: .24em;
    padding-left: .24em;
    text-transform: uppercase;
    color: #c3d6e4;
    text-shadow: 0 1px 3px rgba(4, 16, 28, .95)
}

.cl-dua-ref {
    margin-top: calc(var(--u) * 1.6) !important
}

.cl-water {
    --u: calc(min(1cqw, 1.55cqh) * var(--fit, 1))
}

.cl-urdu {
    font: 400 calc(var(--u) * 4.7)/2.05 "Noto Nastaliq Urdu", serif;
    text-shadow: 0 1px 3px rgba(4, 16, 28, .95)
}

.cl-kicker {
    margin-top: calc(var(--u) * 1.2) !important;
    letter-spacing: .28em;
    padding-left: .28em
}

.cl-families {
    font: 500 calc(var(--u) * 4.4)/1.3 "Cormorant Garamond", Georgia, serif;
    text-shadow: 0 1px 3px rgba(4, 16, 28, .95)
}

.cl-names {
    margin-top: calc(var(--u) * 1.4) !important;
    font: 400 calc(var(--u) * 12.5)/1.05 "Allura", cursive;
    white-space: nowrap
}

.cl-names .pearl {
    display: inline-block;
    padding: 0 .25em .08em
}

.cl-date {
    margin-top: calc(var(--u) * .6) !important
}

.closing:not(.is-told) .cl-water {
    visibility: hidden
}

.cl-hint {
    position: absolute;
    left: var(--wat-l);
    right: calc(100% - var(--wat-r));
    top: calc((var(--wat-t) + var(--wat-b)) / 2);
    translate: 0 -50%;
    margin: 0;
    text-align: center;
    font: italic 500 clamp(15px, 4.6cqmin, 22px)/1.3 "Cormorant Garamond", Georgia, serif;
    color: var(--pearl);
    text-shadow: 0 0 10px rgba(4, 14, 24, 1), 0 0 22px rgba(4, 14, 24, .9), 0 1px 3px rgba(4, 14, 24, .9);
    pointer-events: none;
    animation: cl-hint 2.8s ease-in-out infinite
}

.closing.is-lighting .cl-hint,
.closing.is-lit .cl-hint {
    visibility: hidden;
    animation: none
}

.cl-hint {
    display: none !important
}

@keyframes cl-hint {
    0%,
    to {
        opacity: .6
    }
    50% {
        opacity: 1
    }
}

.cl-foot {
    position: absolute;
    left: 0;
    right: 0;
    top: var(--step-y);
    translate: 0 -50%;
    margin: 0;
    text-align: center
}

.closing:not(.is-told) .cl-foot {
    visibility: hidden
}

.cl-replay {
    padding: 10px 18px 9px;
    border: 1px solid rgba(236, 244, 250, .55);
    border-radius: 999px;
    background: #0a1e2e9e;
    -webkit-backdrop-filter: blur(3px);
    backdrop-filter: blur(3px);
    color: var(--pearl);
    font: 700 clamp(10.5px, 3cqmin, 13px)/1.1 "Cormorant Garamond", Georgia, serif;
    letter-spacing: .16em;
    text-transform: uppercase;
    cursor: pointer
}

.cl-replay:hover {
    background: #0e283cbf
}

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

.cl-by {
    position: absolute;
    left: 0;
    right: 0;
    bottom: 6px;
    margin: 0;
    text-align: center;
    font: 700 clamp(8px, 2.2cqmin, 10px)/1 "Cormorant Garamond", Georgia, serif;
    letter-spacing: .24em;
    padding-left: .24em;
    text-transform: uppercase;
    color: #224056c7;
    pointer-events: none
}

.cl-light {
    position: absolute;
    z-index: 3;
    left: 50%;
    bottom: 18px;
    translate: -50% 0;
    padding: 10px 18px;
    border: 1px solid rgba(214, 226, 236, .7);
    border-radius: 999px;
    background: #0a1f30cc;
    color: var(--pearl);
    font: 700 12px/1 Cormorant Garamond, Georgia, serif;
    letter-spacing: .2em;
    text-transform: uppercase;
    opacity: 0;
    pointer-events: none
}

.cl-light:focus-visible {
    opacity: 1;
    pointer-events: auto;
    outline: 2px solid var(--moon);
    outline-offset: 3px
}

.closing.is-lit .cl-light {
    display: none
}

@media(prefers-reduced-motion:reduce) {
    .closing.is-lit .cl-l,
    .cl-hint {
        animation: none
    }
}