/*! © 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: "<angle>";
    inherits: true;
    initial-value: 64deg;
}

.countdown {
    --d: min(90cqw, 56cqh);
    position: relative;
    height: 100vh;
    height: 100svh;
    min-height: 560px;
    overflow: hidden;
    background: #e6c9a2;
    color: var(--ink);
    container-type: size
}

.countdown p {
    margin: 0
}

.cd-pave {
    position: absolute;
    inset: 0;
    background-position: center;
    background-size: cover
}

.cd-pave:after {
    content: "";
    position: absolute;
    inset: 0;
    background: radial-gradient(ellipse 80% 60% at 8% 96%, #ffd69652, #ffd69600 70%), radial-gradient(ellipse 70% 50% at 50% 50%, #fff6e629, #fff6e600 70%)
}

.cd-shade {
    position: absolute;
    right: -14cqw;
    top: -8cqh;
    width: max(110cqw, 80cqh);
    aspect-ratio: 1;
    background: url(../assets/letter/shade.webp) 0 0 / 100% 100% no-repeat;
    scale: -1 1;
    opacity: .22;
    mix-blend-mode: multiply;
    transform-origin: 100% 0;
    animation: cd-sway 9s ease-in-out infinite alternate
}

@keyframes cd-sway {
    0% {
        transform: rotate(-1deg) translate(-.8%, .3%) skew(.8deg)
    }
    50% {
        transform: rotate(.6deg) translate(.6%, -.3%) skew(-.4deg)
    }
    to {
        transform: rotate(1.2deg) translate(1%, .5%) skew(-1deg)
    }
}

.cd-inner {
    position: relative;
    height: 100%;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: calc(var(--d) * .045);
    padding: 4cqh 5cqw;
    text-align: center
}

.cd-head,
.cd-foot {
    position: relative;
    isolation: isolate;
    padding: .3em 1.4em
}

.cd-head:before,
.cd-foot:before {
    content: "";
    position: absolute;
    inset: -20% -8%;
    z-index: -1;
    background: radial-gradient(closest-side, #fff9f0d6, #fff9f080 58%, #fff9f000)
}

.cd-head>*,
.cd-foot>p {
    text-shadow: 0 0 12px rgba(255, 250, 242, .95), 0 0 3px rgba(255, 250, 242, .9)
}

.cd-kicker {
    font: 600 max(11px, calc(var(--d) * .036))/1.3 "Cormorant Garamond", Georgia, serif;
    letter-spacing: .3em;
    padding-left: .3em;
    text-transform: uppercase;
    color: var(--sage-ink)
}

.cd-title {
    margin: 0;
    font: 700 calc(var(--d) * .128)/1.05 "Corinthia", cursive;
    padding: 0 .2em .04em;
    white-space: nowrap;
    color: var(--rose-ink);
    --wipe: 130%;
    -webkit-mask-image: linear-gradient(90deg, #000 calc(var(--wipe) - 18%), transparent var(--wipe));
    mask-image: linear-gradient(90deg, #000 calc(var(--wipe) - 18%), transparent var(--wipe))
}

.cd-dial {
    position: relative;
    flex: none;
    width: var(--d);
    aspect-ratio: 1;
    container-type: inline-size
}

.cd-dial-art {
    position: absolute;
    inset: 0;
    background-position: center;
    background-size: 100% 100%;
    border-radius: 50%
}

.cd-dial-art:not(.cd-gnomon) {
    box-shadow: 0 0 0 .25cqw #78522c40, 1.2cqw -1cqw 3cqw #6e461e47, inset 0 0 6cqw #ffe2b42e
}

.cd-shadow {
    --len: 44%;
    position: absolute;
    inset: 0;
    display: none;
    opacity: .42;
    filter: blur(.7cqw);
    mix-blend-mode: multiply;
    pointer-events: none
}

@supports (width: calc(sin(1deg)*1px)) {
    .cd-shadow {
        display: block
    }
}

.cd-shadow i {
    position: absolute;
    inset: 0;
    background: radial-gradient(circle closest-side at var(--gx) var(--gy), rgb(92, 56, 26), rgba(92, 56, 26, .82) 55%, rgba(92, 56, 26, .4) 80%, rgba(92, 56, 26, 0) 94%);
    -webkit-clip-path: polygon(var(--gx) var(--gy), var(--gx) var(--gt), calc(var(--gx) + sin(var(--sun)) * var(--len)) calc(var(--gy) - cos(var(--sun)) * var(--len)));
    clip-path: polygon(var(--gx) var(--gy), var(--gx) var(--gt), calc(var(--gx) + sin(var(--sun)) * var(--len)) calc(var(--gy) - cos(var(--sun)) * var(--len)))
}

.cd-gnomon {
    -webkit-clip-path: polygon(49.4% 9.6%, 51.4% 9.6%, 51.7% 45%, 52.9% 45.8%, 52.9% 50.6%, 47.9% 50.6%, 47.9% 45.8%, 49.1% 45%);
    clip-path: polygon(49.4% 9.6%, 51.4% 9.6%, 51.7% 45%, 52.9% 45.8%, 52.9% 50.6%, 47.9% 50.6%, 47.9% 45.8%, 49.1% 45%);
    filter: drop-shadow(.3cqw -.2cqw .3cqw rgba(70, 40, 10, .3))
}

.cd-count {
    position: absolute;
    left: 50%;
    top: 54.5%;
    translate: -50% 0;
    display: flex;
    align-items: flex-start;
    gap: 2.2cqw
}

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

.cd-unit {
    display: flex;
    flex-direction: column;
    align-items: center
}

.cd-num {
    display: flex;
    font: 600 11.5cqw/1 Cormorant Garamond, Georgia, serif;
    font-variant-numeric: lining-nums tabular-nums;
    color: #5a3a34;
    text-shadow: 0 .12cqw 0 rgba(255, 248, 236, .85), 0 -.1cqw .1cqw rgba(60, 30, 20, .35)
}

.cd-dg {
    display: block;
    height: 1em;
    overflow: hidden
}

.cd-strip {
    display: flex;
    flex-direction: column
}

.cd-strip b {
    display: block;
    height: 1em;
    font-weight: inherit;
    text-align: center
}

.cd-label {
    margin-top: .7cqw;
    font: 700 max(8.5px, 2.5cqw)/1.2 "Cormorant Garamond", Georgia, serif;
    letter-spacing: .22em;
    padding-left: .22em;
    text-transform: uppercase;
    color: var(--sage-ink)
}

.cd-sep {
    width: 1cqw;
    aspect-ratio: 1;
    margin-top: 5cqw;
    border-radius: 50%;
    background: var(--rose);
    opacity: .7
}

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

.cd-day-words {
    position: absolute;
    left: 22%;
    right: 22%;
    top: 53%;
    font: 700 12cqw/1 Corinthia, cursive;
    color: var(--rose-ink);
    text-shadow: 0 .12cqw 0 rgba(255, 248, 236, .85);
    text-wrap: balance
}

.cd-day-words[hidden] {
    display: none
}

.countdown.is-married .cd-day-words {
    font-size: 10cqw;
    top: 52%
}

.countdown.is-today .cd-days,
.countdown.is-today .cd-sep-d {
    display: none
}

.cd-date {
    font: 600 max(14px, calc(var(--d) * .05))/1.3 "Cormorant Garamond", Georgia, serif;
    color: var(--ink-soft)
}

.cd-date span {
    display: block
}

.cd-when {
    font-style: italic;
    font-weight: 500;
    color: var(--rose-ink-soft);
    font-size: .92em
}

.cd-line {
    margin-top: .45em !important;
    font: italic 500 max(14px, calc(var(--d) * .05))/1.3 "Cormorant Garamond", Georgia, serif;
    color: var(--ink-soft)
}

.cd-save-wrap {
    position: relative;
    display: inline-block;
    margin-top: calc(var(--d) * .04)
}

.cd-save {
    min-height: 40px;
    padding: 8px 20px;
    font-size: max(14px, calc(var(--d) * .042))
}

.countdown.is-now .cd-save-wrap,
.countdown.is-married .cd-save-wrap {
    display: none
}

.countdown.is-armed:not(.is-lit) .cd-head>*,
.countdown.is-armed:not(.is-lit) .cd-count,
.countdown.is-armed:not(.is-lit) .cd-day-words,
.countdown.is-armed:not(.is-lit) .cd-foot>*,
.countdown.is-armed:not(.is-lit) .cd-shadow {
    opacity: 0
}

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

@media(min-aspect-ratio:6/5) {
    html.is-tablet .countdown {
        --d: min(46cqw, 55cqh)
    }
    html.is-tablet .cd-inner {
        gap: calc(var(--d) * .03);
        padding-block: 2.5cqh
    }
    html.is-tablet .cd-title {
        font-size: calc(var(--d) * .14)
    }
}

@media(prefers-reduced-motion:reduce) {
    .cd-shade {
        animation: none
    }
}