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

.countdown {
    --u: min(1cqw, .52cqh);
    position: relative;
    height: 100vh;
    height: 100svh;
    min-height: 480px;
    overflow: hidden;
    container-type: size;
    isolation: isolate;
    background-color: var(--night-deep);
    color: var(--pearl);
    -webkit-tap-highlight-color: transparent
}

@media(min-aspect-ratio:5/8) {
    html:root .countdown {
        --u: min(.8cqw, .55cqh)
    }
}

@media(min-aspect-ratio:6/5) {
    html.is-tablet .countdown {
        --u: min(.55cqw, .66cqh)
    }
}

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

.countdown.is-parted .cd-scene {
    cursor: default
}

.cd-sky,
.cd-stars,
.cd-veil,
.cd-clouds,
.cd-night,
.cd-moon,
.cd-halo {
    position: absolute;
    inset: 0;
    pointer-events: none
}

.cd-sky,
.cd-clouds,
.cd-moon {
    background-position: center;
    background-size: 100% 100%;
    background-repeat: no-repeat
}

.cd-tw {
    position: absolute;
    width: calc(var(--u) * 1.6);
    aspect-ratio: 1;
    translate: -50% -50%;
    border-radius: 50%;
    background: radial-gradient(closest-side, rgba(255, 255, 255, .95), rgba(214, 232, 250, .35) 40%, transparent);
    mix-blend-mode: screen;
    opacity: 0;
    animation: cd-twinkle var(--d, 4s) ease-in-out var(--delay, 0s) infinite
}

@keyframes cd-twinkle {
    0%,
    to {
        opacity: 0;
        scale: .6
    }
    45% {
        opacity: 1;
        scale: 1.2
    }
    60% {
        opacity: .5;
        scale: .9
    }
}

.cd-veil {
    background: radial-gradient(ellipse calc(var(--moon-rx) * 3.6) calc(var(--moon-ry) * 3.6) at var(--moon-x) var(--moon-y), rgba(6, 18, 30, .8) 30%, rgba(6, 18, 30, .42) 60%, transparent)
}

.cd-clouds,
.cd-cover {
    mix-blend-mode: screen
}

.cd-cover {
    position: absolute;
    inset: 0;
    background-position: center;
    background-size: 100% 100%;
    background-repeat: no-repeat;
    pointer-events: none
}

.cd-cover-l {
    transform: translate(26%);
    -webkit-mask-image: radial-gradient(ellipse calc(var(--moon-rx) * 2.5) calc(var(--moon-ry) * 3.2) at calc(var(--moon-x) - 26%) var(--moon-y), #000 30%, transparent);
    mask-image: radial-gradient(ellipse calc(var(--moon-rx) * 2.5) calc(var(--moon-ry) * 3.2) at calc(var(--moon-x) - 26%) var(--moon-y), #000 30%, transparent)
}

.cd-cover-r {
    transform: translate(-24%);
    -webkit-mask-image: radial-gradient(ellipse calc(var(--moon-rx) * 2.5) calc(var(--moon-ry) * 3.2) at calc(var(--moon-x) + 24%) calc(var(--moon-y) + 2%), #000 30%, transparent);
    mask-image: radial-gradient(ellipse calc(var(--moon-rx) * 2.5) calc(var(--moon-ry) * 3.2) at calc(var(--moon-x) + 24%) calc(var(--moon-y) + 2%), #000 30%, transparent)
}

.countdown.is-parted .cd-cover {
    visibility: hidden
}

.countdown.is-parted .cd-clouds {
    animation: cd-drift 19s ease-in-out infinite alternate
}

@keyframes cd-drift {
    0% {
        translate: -.8% 0
    }
    to {
        translate: .8% 0
    }
}

.cd-night {
    background: linear-gradient(180deg, #040e1866, #040e183d 34%, #040e184d 62%, #040e187a)
}

.cd-moon {
    -webkit-mask-image: radial-gradient(ellipse calc(var(--moon-rx) * 1.5) calc(var(--moon-ry) * 1.5) at var(--moon-x) var(--moon-y), #000 64%, transparent);
    mask-image: radial-gradient(ellipse calc(var(--moon-rx) * 1.5) calc(var(--moon-ry) * 1.5) at var(--moon-x) var(--moon-y), #000 64%, transparent);
    opacity: 0
}

.cd-halo {
    background: radial-gradient(ellipse calc(var(--moon-rx) * 4.2) calc(var(--moon-ry) * 4.2) at var(--moon-x) var(--moon-y), rgba(222, 236, 250, .34), rgba(170, 205, 235, .12) 42%, transparent 70%);
    mix-blend-mode: screen;
    opacity: 0
}

.countdown.is-parted .cd-veil {
    opacity: 0
}

.countdown.is-parted .cd-moon,
.countdown.is-parted .cd-halo {
    opacity: 1
}

.cd-block {
    position: absolute;
    z-index: 2;
    left: 50%;
    width: min(100cqw - 28px, calc(var(--u) * 94));
    translate: -50% 0;
    margin: 0;
    text-align: center;
    isolation: isolate
}

.cd-block:before {
    content: "";
    position: absolute;
    z-index: -1;
    inset: -22% 4%;
    border-radius: 50%;
    background: radial-gradient(closest-side, rgba(5, 16, 27, .8), rgba(5, 16, 27, .5) 58%, transparent);
    pointer-events: none
}

.cd-head {
    top: var(--w-head)
}

.cd-date {
    top: var(--w-date)
}

.cd-count,
.cd-after {
    top: var(--w-nums)
}

.cd-line {
    top: var(--w-line)
}

.cd-save {
    top: var(--w-btn)
}

.cd-head>* {
    margin: 0
}

.cd-kicker {
    font: 700 calc(var(--u) * 3.2)/1.3 "Cormorant Garamond", Georgia, serif;
    letter-spacing: .28em;
    padding-left: .28em;
    text-transform: uppercase;
    color: var(--moon);
    text-shadow: 0 1px 3px rgba(4, 14, 24, .9)
}

.cd-title {
    font: 400 calc(var(--u) * 12.8)/1.15 "Allura", cursive
}

.cd-title .pearl,
.cd-wed .pearl {
    display: inline-block;
    padding: 0 .28em .06em
}

.cd-date {
    font: 600 calc(var(--u) * 4.1)/1.3 "Cormorant Garamond", Georgia, serif;
    letter-spacing: .05em;
    text-shadow: 0 1px 3px rgba(4, 14, 24, .95), 0 0 10px rgba(4, 14, 24, .8)
}

.cd-count {
    display: flex;
    justify-content: center;
    gap: calc(var(--u) * 3.2)
}

.cd-n {
    width: calc(var(--u) * 18.5);
    text-align: center
}

.cd-n b {
    display: block;
    font: 600 calc(var(--u) * 10.5)/1.05 "Cormorant Garamond", Georgia, serif;
    font-variant-numeric: lining-nums tabular-nums
}

.cd-n small {
    display: block;
    margin-top: calc(var(--u) * 1.2);
    font: 700 calc(var(--u) * 2.6)/1 "Cormorant Garamond", Georgia, serif;
    letter-spacing: .24em;
    padding-left: .24em;
    text-transform: uppercase;
    color: var(--moon);
    text-shadow: 0 1px 3px rgba(4, 14, 24, .9)
}

.cd-after[hidden],
.cd-count[hidden],
.cd-save[hidden] {
    display: none
}

.cd-after>* {
    margin: 0
}

.cd-wed {
    font: 400 calc(var(--u) * 11)/1.15 "Allura", cursive
}

.cd-since,
.cd-line {
    font: italic 500 calc(var(--u) * 4.4)/1.3 "Cormorant Garamond", Georgia, serif;
    text-shadow: 0 1px 3px rgba(4, 14, 24, .95), 0 0 12px rgba(4, 14, 24, .85)
}

.cd-btn {
    padding: calc(var(--u) * 2.6) calc(var(--u) * 5.2) calc(var(--u) * 2.3);
    border: 1px solid rgba(214, 226, 236, .7);
    border-radius: 999px;
    background: #0a1f3099;
    color: var(--pearl);
    font: 700 max(11px, calc(var(--u) * 3.1))/1 "Cormorant Garamond", Georgia, serif;
    letter-spacing: .2em;
    text-transform: uppercase;
    box-shadow: 0 0 14px #afd0eb40;
    cursor: pointer
}

.cd-btn:hover {
    background: #14324ab3
}

.cd-btn:focus-visible,
.cd-part:focus-visible {
    outline: 2px solid var(--moon);
    outline-offset: 3px
}

.cd-cal {
    position: relative;
    display: inline-block
}

.cd-save:before {
    display: none
}

.countdown:not(.is-parting):not(.is-parted) :is(.cd-date, .cd-count, .cd-after, .cd-line, .cd-save) {
    opacity: 0;
    visibility: hidden
}

.cd-hint {
    position: absolute;
    z-index: 2;
    left: 0;
    right: 0;
    top: var(--w-nums);
    margin: 0;
    text-align: center;
    font: italic 500 calc(var(--u) * 5.2)/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: cd-hint 2.8s ease-in-out infinite
}

.countdown:is(.is-parting, .is-parted) .cd-hint {
    visibility: hidden;
    animation: none
}

.cd-hint {
    display: none !important
}

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

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

.cd-part {
    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
}

.cd-part:focus-visible {
    opacity: 1;
    pointer-events: auto
}

.countdown.is-parted .cd-part {
    display: none
}

@media(prefers-reduced-motion:reduce) {
    .cd-tw,
    .cd-hint,
    .countdown.is-parted .cd-clouds {
        animation: none
    }
}