/*! © 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-ivory: #f4e9d2;
    --cl-brass: #dcb46a;
    position: relative;
    height: 100vh;
    height: 100svh;
    min-height: 520px;
    overflow: hidden;
    container-type: size;
    isolation: isolate;
    background: #2b1d33;
    color: var(--cl-ivory);
    text-align: center;
    -webkit-tap-highlight-color: transparent;
    cursor: pointer
}

.cl-scene {
    --u: calc(max(100cqh, 100cqw / var(--cl-r))*.01);
    position: absolute;
    left: 50%;
    top: calc((100cqh - max(100cqh, 100cqw / var(--cl-r))) * var(--cl-ay));
    width: max(100cqw, 100cqh * var(--cl-r));
    aspect-ratio: var(--cl-r);
    translate: -50% 0
}

.cl-court,
.cl-glow,
.cl-sky {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    pointer-events: none
}

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

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

.cl-dua {
    position: absolute;
    left: 50%;
    top: var(--sky-t);
    width: var(--sky-w);
    translate: -50% 0;
    pointer-events: none
}

.cl-dua>*,
.cl-foot>* {
    margin: 0
}

.cl-ar {
    width: var(--ar-w);
    margin-inline: auto !important;
    text-wrap: balance;
    font: 400 clamp(16px, calc(var(--u) * 2.6), 40px)/1.75 "Amiri", serif;
    text-shadow: 0 1px 2px rgba(12, 10, 40, .6), 0 0 18px rgba(24, 20, 70, .45)
}

.cl-en {
    width: 86%;
    margin: calc(var(--u) * .5) auto 0;
    font: italic 500 clamp(12px, calc(var(--u) * 1.72), 24px)/1.35 "Cormorant Garamond", Georgia, serif;
    text-wrap: balance;
    text-shadow: 0 1px 2px rgba(12, 10, 40, .7), 0 0 14px rgba(24, 20, 70, .5)
}

.cl-ref {
    margin-top: calc(var(--u) * .5);
    font: 700 clamp(9px, calc(var(--u) * 1.05), 14px)/1.2 "Cormorant Garamond", Georgia, serif;
    letter-spacing: .22em;
    padding-left: .22em;
    text-transform: uppercase;
    color: var(--cl-brass);
    text-shadow: 0 1px 2px rgba(12, 10, 40, .75)
}

.cl-fly {
    display: inline-block;
    margin-top: calc(var(--u) * .5);
    padding: .3em .9em;
    border: 0;
    border-radius: 999px;
    background: none;
    color: var(--cl-ivory);
    font: italic 500 clamp(13px, calc(var(--u) * 1.5), 20px)/1.2 "Cormorant Garamond", Georgia, serif;
    letter-spacing: .03em;
    white-space: nowrap;
    text-shadow: 0 1px 2px rgba(12, 10, 40, .8), 0 0 12px rgba(24, 20, 70, .6);
    cursor: pointer;
    pointer-events: auto;
    opacity: 0;
    transition: opacity 1s ease
}

.cl-fly-t {
    display: inline-block;
    animation: cl-breathe 3.4s ease-in-out infinite
}

@keyframes cl-breathe {
    0%,
    to {
        opacity: .62
    }
    50% {
        opacity: 1
    }
}

.closing.is-seen .cl-fly {
    opacity: 1;
    transition-delay: 2.6s
}

.closing.is-seen.is-flown .cl-fly {
    opacity: 0;
    transition-delay: 0s
}

.closing .cl-fly:focus-visible {
    opacity: 1;
    outline: 2px solid var(--cl-brass);
    outline-offset: 2px;
    background: #101d3c73
}

.cl-foot {
    position: absolute;
    left: 50%;
    bottom: var(--floor-b);
    width: var(--floor-w);
    translate: -50% 0;
    pointer-events: none
}

.cl-foot:before {
    content: "";
    position: absolute;
    inset: -34% -16% -12%;
    z-index: -1;
    background: radial-gradient(ellipse 58% 58% at 50% 60%, rgba(26, 12, 8, .62), rgba(26, 12, 8, .3) 55%, transparent 74%);
    pointer-events: none
}

.cl-thanks {
    font: italic 500 clamp(15px, calc(var(--u) * 1.9), 26px)/1.3 "Cormorant Garamond", Georgia, serif;
    text-wrap: balance;
    text-shadow: 0 1px 3px rgba(0, 0, 0, .7)
}

.cl-with {
    margin-top: calc(var(--u) * .7) !important;
    font: 700 clamp(9px, calc(var(--u) * 1.05), 14px)/1.2 "Cormorant Garamond", Georgia, serif;
    letter-spacing: .22em;
    padding-left: .22em;
    text-transform: uppercase;
    color: var(--cl-brass);
    text-shadow: 0 1px 2px rgba(0, 0, 0, .8)
}

.cl-fam {
    font: 400 clamp(26px, calc(var(--u) * 3.3), 46px)/1.15 "Great Vibes", cursive
}

.cl-fam-g {
    display: inline-block;
    padding: 0 .28em .08em;
    background: linear-gradient(180deg, #ffffff80, #fff0 38%, #0000 62%, #78461459), linear-gradient(90deg, #f6ecd6, #e9d6b0 30%, #fbf3e2 55%, #e2cda4 82%, #f6ecd6);
    -webkit-background-clip: text;
    background-clip: text;
    color: transparent;
    filter: drop-shadow(0 .03em .02em rgba(20, 8, 4, .8)) drop-shadow(0 0 .25em rgba(0, 0, 0, .4))
}

.cl-end {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: calc(var(--u) * .9);
    margin-top: calc(var(--u) * 1.1) !important
}

.cl-end>* {
    margin: 0
}

.cl-replay {
    min-height: 40px;
    padding: .55em 1.4em;
    border: 1.5px solid rgba(220, 180, 106, .9);
    border-radius: 999px;
    background: #101d3c94;
    box-shadow: 0 2px #ffffff1f inset, 0 6px 14px -4px #0000008c;
    color: var(--cl-ivory);
    font: 700 clamp(13px, calc(var(--u) * 1.6), 19px)/1 "Cormorant Garamond", Georgia, serif;
    letter-spacing: .06em;
    cursor: pointer;
    pointer-events: auto
}

.cl-replay:hover {
    background: #1d3a82b3
}

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

.cl-by {
    font: 600 clamp(9px, calc(var(--u) * 1.05), 13px)/1.2 "Cormorant Garamond", Georgia, serif;
    letter-spacing: .2em;
    padding-left: .2em;
    text-transform: uppercase;
    color: #f4e9d2b8;
    text-shadow: 0 1px 2px rgba(0, 0, 0, .8)
}

@media(min-aspect-ratio:6/5) {
    html.is-tablet .cl-end {
        flex-direction: row;
        justify-content: center;
        gap: calc(var(--u) * 2.2)
    }
    html.is-tablet .cl-with {
        margin-top: calc(var(--u) * .4) !important
    }
    html.is-tablet .cl-end {
        margin-top: calc(var(--u) * .8) !important
    }
}

.cl-dua>*,
.cl-foot>* {
    transition: opacity 1.4s ease, translate 1.6s cubic-bezier(.2, .7, .2, 1)
}

.cl-dua>:nth-child(2) {
    transition-delay: .5s
}

.cl-dua>:nth-child(3) {
    transition-delay: .8s
}

.cl-dua>.cl-fly {
    transition: opacity 1s ease;
    translate: none !important
}

.cl-foot>:nth-child(1) {
    transition-delay: 1.1s
}

.cl-foot>:nth-child(2) {
    transition-delay: 1.4s
}

.cl-foot>:nth-child(3) {
    transition-delay: 1.6s
}

.cl-foot>:nth-child(4) {
    transition-delay: 2s
}

.closing.is-ready:not(.is-seen) .cl-dua>*,
.closing.is-ready:not(.is-seen) .cl-foot>* {
    opacity: 0;
    translate: 0 10px
}

@media(prefers-reduced-motion:reduce) {
    .cl-fly-t {
        animation: none
    }
    .cl-fly,
    .cl-dua>*,
    .cl-foot>* {
        transition: none
    }
}