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

@property --sun {
    syntax: "<percentage>";
    inherits: false;
    initial-value: 120%;
}

.closing {
    --cl-r: .5628;
    --dusk-ink: rgba(36, 30, 92, .62);
    position: relative;
    height: 100vh;
    height: 100svh;
    min-height: 420px;
    overflow: hidden;
    container-type: size;
    background: #6d5a8e;
    isolation: isolate;
    color: var(--snow);
    -webkit-tap-highlight-color: transparent;
    overflow-anchor: none
}

.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-dusk .cl-scene {
    cursor: default
}

.cl-view,
.cl-gold,
.cl-stars,
.cl-petals {
    position: absolute;
    inset: 0;
    pointer-events: none
}

.cl-view,
.cl-gold {
    background-position: center;
    background-size: 100% 100%;
    background-repeat: no-repeat
}

.cl-gold-land {
    --soft: 9%;
    -webkit-mask-image: linear-gradient(180deg, #000 calc(var(--sun) - var(--soft)), transparent calc(var(--sun) + var(--soft)));
    mask-image: linear-gradient(180deg, #000 calc(var(--sun) - var(--soft)), transparent calc(var(--sun) + var(--soft)))
}

.closing.is-dusk .cl-gold {
    display: none
}

.cl-unlit,
.cl-flame {
    position: absolute;
    pointer-events: none
}

.cl-unlit {
    background-size: 100% 100%;
    background-repeat: no-repeat
}

.closing.is-lit .cl-unlit {
    opacity: 0
}

.cl-flame {
    aspect-ratio: 1;
    translate: -50% -58%;
    background: radial-gradient(closest-side, #ffe8a080, #ffba6033 45%, #ff963c00);
    mix-blend-mode: screen;
    opacity: 0
}

.closing.is-lit .cl-flame {
    opacity: 1;
    animation: cl-flicker 2.9s ease-in-out infinite alternate
}

@keyframes cl-flicker {
    0% {
        opacity: 1
    }
    35% {
        opacity: .62
    }
    55% {
        opacity: .9
    }
    to {
        opacity: .74
    }
}

.cl-star {
    position: absolute;
    width: var(--s, 1%);
    aspect-ratio: 1;
    translate: -50% -50%;
    background: radial-gradient(closest-side, #fff, #fff0) center / 100% 9% no-repeat, radial-gradient(closest-side, #fff, #fff0) center / 9% 100% no-repeat, radial-gradient(closest-side, #fffcf0, #e6ecff80 40%, #dce6ff00) center / 46% 46% no-repeat;
    opacity: 0
}

.closing.is-starry .cl-star.is-out {
    opacity: 1;
    animation: cl-twinkle var(--d, 4s) ease-in-out var(--dl, 0s) infinite
}

@keyframes cl-twinkle {
    0%,
    to {
        opacity: 1;
        scale: 1
    }
    45% {
        opacity: .55;
        scale: .78
    }
    60% {
        opacity: .9;
        scale: .95
    }
}

.closing.is-away.is-starry .cl-star.is-out,
.closing.is-away.is-lit .cl-flame {
    animation-play-state: paused
}

.cl-petals {
    overflow: hidden
}

.cl-petal {
    position: absolute;
    left: 0;
    top: 0;
    background-image: url(../assets/cover/petals.webp);
    background-repeat: no-repeat;
    filter: brightness(.86) sepia(.12) hue-rotate(-12deg) drop-shadow(1px 2px 1.5px rgba(40, 24, 60, .35));
    will-change: transform, opacity
}

.cl-words {
    position: absolute;
    left: var(--w-l);
    right: calc(100% - var(--w-r));
    top: var(--w-t);
    bottom: calc(100% - var(--w-b));
    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.95cqh) * var(--fit, 1))
}

.cl-words>* {
    margin: 0;
    text-shadow: 0 0 .5em var(--dusk-ink), 0 0 .14em var(--dusk-ink), 0 .04em .08em rgba(30, 22, 70, .5)
}

.cl-dua {
    font: 400 calc(var(--u) * 6.6) / 1.7 Amiri, serif;
    text-wrap: balance
}

.cl-dua-en {
    max-width: 30em;
    font: italic 500 max(12px, calc(var(--u) * 4.3)) / 1.3 "Cormorant Garamond", Georgia, serif;
    text-wrap: balance
}

.cl-thanks {
    margin-top: calc(var(--u) * 3.4) !important;
    font: italic 600 max(13px, calc(var(--u) * 5.2)) / 1.25 "Cormorant Garamond", Georgia, serif;
    text-wrap: balance
}

.cl-kicker {
    margin-top: calc(var(--u) * 2.8) !important;
    font: 700 max(10px, calc(var(--u) * 3.2)) / 1.3 "Cormorant Garamond", Georgia, serif;
    letter-spacing: .28em;
    text-indent: .28em;
    text-transform: uppercase
}

.cl-families {
    font: 400 calc(var(--u) * 12.4) / 1.02 Italianno, cursive;
    white-space: nowrap;
    padding: 0 .12em .06em
}

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

.cl-foot {
    position: absolute;
    left: 0;
    right: 0;
    bottom: max(34px, 6.5cqh);
    margin: 0;
    text-align: center
}

.cl-replay {
    padding: .78em 1.5em .72em;
    border: 0;
    border-radius: 99px;
    white-space: nowrap;
    font: 700 clamp(11px, 2.9cqmin, 14px)/1 "Cormorant Garamond", Georgia, serif;
    letter-spacing: .2em;
    text-indent: .2em;
    text-transform: uppercase;
    color: var(--snow);
    background: #3a2010bd;
    box-shadow: 0 0 0 1px #fbfaf680, 0 4px 14px #1e102859;
    -webkit-backdrop-filter: blur(3px);
    backdrop-filter: blur(3px);
    cursor: pointer
}

.cl-replay:hover {
    background: #4e2c16d1
}

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

.cl-by {
    position: absolute;
    left: 0;
    right: 0;
    bottom: max(10px, 1.6cqh);
    margin: 0;
    text-align: center;
    font: 700 clamp(8.5px, 2.2cqmin, 11px)/1 "Cormorant Garamond", Georgia, serif;
    letter-spacing: .26em;
    text-indent: .26em;
    text-transform: uppercase;
    color: #fbfaf6d1;
    text-shadow: 0 1px 3px rgba(30, 16, 10, .9);
    pointer-events: none
}

.cl-sunset {
    position: absolute;
    z-index: 3;
    left: 50%;
    bottom: max(16px, 3cqh);
    translate: -50% 0;
    padding: .7em 1.4em .64em;
    border: 0;
    border-radius: 99px;
    white-space: nowrap;
    font: 700 13px/1 Cormorant Garamond, Georgia, serif;
    letter-spacing: .2em;
    text-indent: .2em;
    text-transform: uppercase;
    color: var(--snow);
    background: #3a2010bd;
    box-shadow: 0 0 0 1px #fbfaf673;
    cursor: pointer;
    opacity: 0;
    pointer-events: none
}

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

.closing.is-dusk .cl-sunset {
    display: none
}

@media(prefers-reduced-motion:reduce) {
    .closing.is-lit .cl-flame,
    .closing.is-starry .cl-star.is-out {
        animation: none
    }
    .cl-petals {
        display: none
    }
}