/*! © 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;
    overflow: hidden;
    background: var(--emerald-night);
    color: var(--ivory);
    text-align: center;
    container: closing / inline-size;
    -webkit-tap-highlight-color: transparent
}

.cl-stage,
.cl-foot {
    --variant: phone;
    --scene: url(../assets/closing/scene.webp);
    --scene-r: var(--scene-r-phone);
    --reach: var(--reach-phone);
    --sky-top: var(--sky-top-phone);
    --water-foot: var(--water-foot-phone)
}

@container closing (min-width: 560px) {
    .cl-stage,
    .cl-foot {
        --variant: tab;
        --scene: url(../assets/closing/scene-tab.webp);
        --scene-r: var(--scene-r-tab);
        --reach: var(--reach-tab);
        --sky-top: var(--sky-top-tab);
        --water-foot: var(--water-foot-tab)
    }
}

.cl-stage {
    position: relative;
    display: grid;
    grid-template: 1fr / 100%;
    background: var(--sky-top)
}

.cl-stage>* {
    grid-area: 1 / 1
}

.cl-moon {
    position: absolute;
    z-index: 1;
    top: clamp(12px, 3.5cqi, 26px);
    right: 9%;
    width: clamp(40px, 11cqi, 64px);
    filter: drop-shadow(0 0 12px rgba(255, 240, 205, .35));
    pointer-events: none
}

.cl-scene {
    align-self: end;
    position: relative;
    width: 100%;
    aspect-ratio: var(--scene-r);
    background: var(--scene) center / 100% 100% no-repeat;
    -webkit-mask: linear-gradient(transparent, #000 6%, #000 95%, transparent);
    mask: linear-gradient(transparent, #000 6%, #000 95%, transparent);
    overflow: hidden;
    touch-action: manipulation;
    cursor: pointer;
    user-select: none;
    -webkit-user-select: none
}

.cl-glints {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    mix-blend-mode: screen;
    pointer-events: none
}

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

.cl-diya {
    position: absolute;
    display: block;
    transform-origin: 50% var(--wl)
}

.cl-diya img {
    display: block;
    width: 100%;
    height: 100%;
    pointer-events: none
}

.cl-land,
.cl-bob,
.cl-refl {
    position: absolute;
    inset: 0;
    transform-origin: 50% var(--wl)
}

.cl-bob {
    animation: cl-bob var(--bt, 3.4s) ease-in-out var(--bd, 0s) infinite alternate
}

@keyframes cl-bob {
    0% {
        transform: translateY(0) rotate(-1.6deg)
    }
    to {
        transform: translateY(-2.2%) rotate(1.6deg)
    }
}

.cl-halo {
    position: absolute;
    left: var(--fx);
    top: var(--fy);
    width: 170%;
    aspect-ratio: 1;
    translate: -50% -50%;
    background: radial-gradient(closest-side, rgba(255, 226, 160, .62), rgba(255, 190, 100, .2) 42%, transparent);
    mix-blend-mode: screen;
    animation: cl-flicker var(--ft, 1.3s) ease-in-out var(--fd, 0s) infinite alternate
}

@keyframes cl-flicker {
    0% {
        opacity: .78;
        scale: .94
    }
    45% {
        opacity: 1;
        scale: 1.04
    }
    70% {
        opacity: .86;
        scale: .98
    }
    to {
        opacity: .96;
        scale: 1.02
    }
}

.cl-refl {
    transform: scaleY(-.8);
    opacity: .4;
    filter: brightness(.72) blur(.5px);
    -webkit-mask: linear-gradient(transparent 8%, rgba(0, 0, 0, .9) 72%);
    mask: linear-gradient(transparent 8%, rgba(0, 0, 0, .9) 72%)
}

.cl-refl img {
    animation: cl-wobble var(--bt, 3.4s) ease-in-out var(--bd, 0s) infinite alternate
}

@keyframes cl-wobble {
    0% {
        transform: skew(-3deg) scaleX(1.02)
    }
    to {
        transform: skew(3deg) scaleX(.98)
    }
}

.cl-glade {
    position: absolute;
    left: var(--fx);
    top: var(--wl);
    width: 46%;
    height: 190%;
    translate: -50% -4%;
    transform-origin: 50% 0;
    background: radial-gradient(ellipse 50% 50% at 50% 8%, rgba(255, 214, 140, .62), rgba(255, 190, 100, .2) 55%, transparent);
    mix-blend-mode: screen;
    animation: cl-glade var(--ft, 1.3s) ease-in-out var(--fd, 0s) infinite alternate
}

@keyframes cl-glade {
    0% {
        transform: scale(.78, .92);
        opacity: .75
    }
    50% {
        transform: scale(1.08, 1.04);
        opacity: 1
    }
    to {
        transform: scaleX(.9);
        opacity: .85
    }
}

.cl-ripple {
    position: absolute;
    border: 1.5px solid rgba(255, 228, 175, .55);
    border-radius: 50%;
    box-shadow: 0 0 6px #ffd68c40;
    pointer-events: none
}

.cl-words {
    align-self: start;
    position: relative;
    z-index: 1;
    padding: clamp(66px, 18cqi, 96px) 20px 0;
    margin-bottom: calc(100cqi / var(--scene-r) * (1 - var(--reach)) + clamp(12px, 3cqi, 26px))
}

.cl-words>* {
    margin: 0
}

.cl-dua {
    font: 400 clamp(19px, 5.5cqi, 34px)/1.9 "Amiri", serif;
    text-wrap: balance;
    color: var(--gold-soft);
    text-shadow: 0 1px 12px rgba(0, 0, 0, .5)
}

.cl-dua-en {
    max-width: 30em;
    margin-inline: auto !important;
    font: italic 500 clamp(15px, 4.4cqi, 20px)/1.4 "Cormorant Garamond", Georgia, serif;
    color: #f5efe2e0;
    text-wrap: balance
}

.cl-divider {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 10px;
    width: min(240px, 62%);
    margin: clamp(14px, 4cqi, 22px) auto !important
}

.cl-divider:before,
.cl-divider:after {
    content: "";
    flex: 1;
    height: 1px;
    background: linear-gradient(90deg, transparent, var(--gold))
}

.cl-divider:after {
    background: linear-gradient(90deg, var(--gold), transparent)
}

.cl-divider i {
    width: 9px;
    height: 9px;
    rotate: 45deg;
    border: 1px solid var(--gold);
    background: linear-gradient(135deg, #fffaf0, #b9c8c2 45%, #eef3f0 60%, #8fa39b);
    box-shadow: 0 0 8px #fff4d699
}

.cl-thanks {
    max-width: 22em;
    margin-inline: auto !important;
    font: 500 clamp(17px, 5cqi, 23px)/1.4 "Cormorant Garamond", Georgia, serif;
    color: var(--ivory);
    text-wrap: balance
}

.cl-sign {
    margin-top: clamp(16px, 4.6cqi, 26px) !important;
    font-weight: 400
}

.cl-with {
    display: block;
    font: italic 500 clamp(15px, 4.2cqi, 19px)/1.3 "Cormorant Garamond", Georgia, serif;
    color: var(--gold);
    letter-spacing: .02em
}

.cl-fam {
    display: block;
    padding: .04em .3em .1em;
    font: 400 clamp(32px, 8.4cqi, 50px)/1.2 "Alex Brush", cursive;
    background: url(../assets/hero/gold.webp) 0 0 / 4em 4em;
    -webkit-background-clip: text;
    background-clip: text;
    color: transparent;
    filter: drop-shadow(0 .03em .03em rgba(0, 0, 0, .6));
    text-wrap: balance
}

.cl-float {
    align-self: end;
    justify-self: center;
    position: relative;
    z-index: 2;
    display: inline-flex;
    align-items: center;
    gap: .45em;
    min-height: 42px;
    margin-bottom: clamp(18px, 6cqi, 40px);
    padding: 5px 16px 5px 8px;
    border: 1px solid rgba(230, 207, 152, .5);
    border-radius: 999px;
    background: #03170f8c;
    -webkit-backdrop-filter: blur(3px);
    backdrop-filter: blur(3px);
    box-shadow: 0 2px 12px #00000059;
    color: var(--gold-soft);
    font: italic 600 clamp(14.5px, 4.1cqi, 17px)/1.1 "Cormorant Garamond", Georgia, serif;
    letter-spacing: .02em;
    cursor: pointer;
    -webkit-tap-highlight-color: transparent
}

.closing:not(.is-ready) .cl-float {
    display: none
}

.cl-float img {
    width: 30px;
    height: auto
}

.cl-float:hover {
    border-color: var(--gold-soft);
    background: #062a21b3
}

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

.cl-sr {
    position: absolute !important;
    width: 1px;
    height: 1px;
    overflow: hidden;
    clip-path: inset(50%);
    white-space: nowrap
}

.cl-foot {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 16px;
    padding: 10px 16px calc(34px + env(safe-area-inset-bottom));
    background: var(--water-foot)
}

.cl-foot>* {
    margin: 0
}

.cl-replay {
    display: inline-flex;
    align-items: center;
    gap: .5em;
    min-height: 40px;
    padding: 6px 18px;
    border: 1px solid rgba(230, 207, 152, .6);
    border-radius: 999px;
    background: #062a21b3;
    box-shadow: 0 2px 10px #00000059;
    color: var(--gold-soft);
    font: 700 clamp(13px, 3.8cqi, 15px)/1 "Cormorant Garamond", Georgia, serif;
    letter-spacing: .06em;
    cursor: pointer
}

.cl-replay:hover {
    background: #0b4a3bd9;
    border-color: var(--gold-soft)
}

.cl-replay svg {
    width: 1.25em;
    height: 1.25em;
    fill: none;
    stroke: currentColor;
    stroke-width: 1.8;
    stroke-linecap: round;
    stroke-linejoin: round
}

.cl-credit {
    font: 600 11px/1.4 Cormorant Garamond, Georgia, serif;
    letter-spacing: .26em;
    padding-left: .26em;
    text-transform: uppercase;
    color: #c9a45cb8
}

.cl-credit span {
    font: italic 600 1.35em/1 Cormorant Garamond, Georgia, serif;
    letter-spacing: .04em;
    text-transform: none;
    color: var(--gold-soft)
}

.closing.is-ready:not(.is-seen) .cl-scene {
    filter: brightness(.42) saturate(.75)
}

.closing.is-ready:not(.is-seen) .cl-dua {
    clip-path: inset(-20% 0 -20% 100%)
}

.closing.is-ready:not(.is-seen) .cl-fam {
    clip-path: inset(-30% 100% -30% -10%)
}

.closing.is-ready:not(.is-seen) :is(.cl-dua-en, .cl-thanks, .cl-with, .cl-float) {
    opacity: 0;
    translate: 0 10px
}

.closing.is-ready:not(.is-seen) .cl-divider {
    opacity: 0;
    scale: .2 1
}

.closing.is-ready:not(.is-seen) .cl-moon {
    opacity: 0
}

.closing.is-seen .cl-scene {
    transition: filter 2.6s ease .15s
}

.closing.is-seen .cl-moon {
    transition: opacity 2s ease .3s
}

.closing.is-seen .cl-dua {
    clip-path: inset(-20% 0 -20% 0);
    transition: clip-path 1.8s cubic-bezier(.4, .1, .3, 1) .5s
}

.closing.is-seen :is(.cl-dua-en, .cl-thanks, .cl-with, .cl-float) {
    transition: opacity 1.1s ease, translate 1.3s cubic-bezier(.2, .7, .2, 1)
}

.closing.is-seen .cl-dua-en {
    transition-delay: 1.6s
}

.closing.is-seen .cl-divider {
    transition: opacity .8s ease 2s, scale 1.2s cubic-bezier(.3, .7, .2, 1) 2s
}

.closing.is-seen .cl-thanks {
    transition-delay: 2.4s
}

.closing.is-seen .cl-with {
    transition-delay: 2.9s
}

.closing.is-seen .cl-fam {
    clip-path: inset(-30% -10% -30% -10%);
    transition: clip-path 1.7s cubic-bezier(.4, .1, .3, 1) 3.1s
}

.closing.is-seen .cl-float {
    transition-delay: 4.4s
}

@media(prefers-reduced-motion:reduce) {
    .closing.is-seen :is(.cl-scene, .cl-dua, .cl-dua-en, .cl-divider, .cl-thanks, .cl-with, .cl-fam, .cl-float, .cl-moon) {
        transition: none
    }
    .cl-bob,
    .cl-refl img,
    .cl-halo,
    .cl-glade {
        animation: none
    }
}

html.is-tablet .cl-stage {
    min-height: 100svh
}

@media(min-aspect-ratio:6/5) {
    html.is-tablet .cl-stage,
    html.is-tablet .cl-foot {
        --variant: land;
        --scene: url(../assets/closing/scene-land.webp);
        --scene-r: var(--scene-r-land);
        --reach: var(--reach-land);
        --sky-top: var(--sky-top-land);
        --water-foot: var(--water-foot-land)
    }
    html.is-tablet .cl-words {
        padding-top: clamp(24px, 3.2svh, 48px);
        margin-bottom: calc(100cqi / var(--scene-r) * (1 - var(--reach)) + 6px)
    }
    html.is-tablet .cl-dua {
        font-size: clamp(24px, 3.9svh, 34px);
        line-height: 1.7
    }
    html.is-tablet .cl-dua-en {
        max-width: 44em;
        font-size: clamp(15px, 2.3svh, 19px)
    }
    html.is-tablet .cl-divider {
        margin: clamp(8px, 1.6svh, 16px) auto !important
    }
    html.is-tablet .cl-thanks {
        max-width: 40em;
        font-size: clamp(16px, 2.5svh, 21px)
    }
    html.is-tablet .cl-sign {
        margin-top: clamp(8px, 1.8svh, 18px) !important
    }
    html.is-tablet .cl-with {
        display: inline-block;
        margin-right: .5em
    }
    html.is-tablet .cl-fam {
        display: inline-block;
        font-size: clamp(32px, 5.6svh, 50px)
    }
    html.is-tablet .cl-moon {
        right: 6%
    }
}