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

.countdown {
    --tone-ink: var(--cobalt);
    position: relative;
    height: 100vh;
    height: 100svh;
    min-height: 520px;
    overflow: hidden;
    container-type: size;
    isolation: isolate;
    background: #a9644a;
    color: var(--ink);
    -webkit-tap-highlight-color: transparent
}

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

.cd-court,
.cd-fx {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    pointer-events: none
}

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

.cd-date,
.cd-hint {
    position: absolute;
    left: var(--dt-x);
    top: var(--dt-y);
    width: var(--dt-w);
    height: var(--dt-h);
    translate: -50% -50%;
    margin: 0;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    text-align: center;
    pointer-events: none
}

.cd-date {
    container-type: inline-size;
    perspective: calc(var(--u) * 30);
    opacity: 0
}

.cd-date>span {
    display: block;
    transform: rotateX(30deg);
    white-space: nowrap
}

.cd-dmy {
    font: 700 min(calc(var(--u) * 3.3), 12cqi)/1.05 "Cormorant Garamond", Georgia, serif;
    letter-spacing: .05em;
    color: #0e2462;
    text-shadow: 0 0 calc(var(--u) * .5) rgba(236, 252, 255, .95), 0 0 calc(var(--u) * 1.4) rgba(236, 252, 255, .6)
}

.cd-when {
    margin-top: calc(var(--u) * .3);
    font: 700 max(10px, min(calc(var(--u) * 1.4), 5cqi))/1.2 "Cormorant Garamond", Georgia, serif;
    letter-spacing: .2em;
    padding-left: .2em;
    text-transform: uppercase;
    color: #0e2462;
    text-shadow: 0 0 calc(var(--u) * .45) rgba(236, 252, 255, .95)
}

.countdown.is-revealed .cd-date {
    opacity: 1
}

.cd-hint {
    font: italic 600 max(14px, calc(var(--u) * 1.9))/1.2 "Cormorant Garamond", Georgia, serif;
    color: #fffaf0;
    text-shadow: 0 1px 2px rgba(10, 40, 50, .85), 0 0 calc(var(--u) * 1.2) rgba(10, 50, 60, .55);
    animation: cd-breathe 2.8s ease-in-out infinite;
    transition: opacity .6s ease
}

.countdown.is-revealed .cd-hint {
    opacity: 0;
    animation: none
}

@keyframes cd-breathe {
    0%,
    to {
        opacity: .55
    }
    50% {
        opacity: 1
    }
}

.cd-water {
    position: absolute;
    left: var(--wt-x);
    top: var(--wt-y);
    width: var(--wt-w);
    height: var(--wt-h);
    translate: -50% -50%;
    margin: 0;
    padding: 0;
    border: 0;
    border-radius: 50%;
    background: none;
    cursor: pointer;
    -webkit-tap-highlight-color: transparent
}

.cd-water:focus-visible {
    outline: 2px solid #fffaf0;
    outline-offset: 3px
}

.countdown.is-revealed .cd-water {
    cursor: default
}

.cd-head {
    position: absolute;
    left: var(--hd-x);
    top: var(--hd-t);
    height: var(--hd-h);
    width: min(var(--hd-w), 100cqw - 24px);
    translate: -50% 0;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    text-align: center
}

.cd-head:before {
    content: "";
    position: absolute;
    left: 50%;
    top: 50%;
    width: min(100%, calc(var(--u) * 46));
    height: 125%;
    translate: -50% -50%;
    background: radial-gradient(closest-side, #fbf4e2db, #fbf4e29e 55%, #fbf4e200);
    pointer-events: none
}

.cd-head>* {
    position: relative;
    margin: 0
}

.cd-kicker {
    font: 700 max(11px, calc(var(--u) * 1.45))/1.3 "Cormorant Garamond", Georgia, serif;
    letter-spacing: .26em;
    padding-left: .26em;
    text-transform: uppercase;
    color: var(--kick)
}

.cd-title {
    font: 400 calc(var(--u) * 6.3)/1.15 "Great Vibes", cursive;
    white-space: nowrap
}

.cd-title .glaze {
    display: inline-block;
    padding: 0 .26em .06em
}

.cd-foot {
    --tile: min(calc(var(--u) * 8.4), (100cqw - 64px) / 4.5, 100px);
    position: absolute;
    left: var(--ft-x);
    top: var(--ft-t);
    height: var(--ft-h);
    width: min(var(--ft-w), 100cqw - 16px);
    translate: -50% 0;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: calc(var(--u) * 1.3);
    padding-bottom: calc(var(--seam-h) * .5);
    text-align: center
}

.cd-foot>* {
    margin: 0
}

.cd-count {
    position: relative;
    display: flex;
    gap: calc(var(--tile) * .17)
}

.cd-unit {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: calc(var(--tile) * .09)
}

.cd-tile {
    display: block;
    width: var(--tile);
    aspect-ratio: 1;
    perspective: calc(var(--tile) * 4)
}

.cd-flip {
    position: relative;
    display: block;
    width: 100%;
    height: 100%;
    transform-style: preserve-3d
}

.cd-face {
    position: absolute;
    inset: 0;
    display: grid;
    place-items: center;
    padding-top: 3%;
    background: url(../assets/countdown/tile.webp) 0 0 / 100% 100% no-repeat;
    -webkit-backface-visibility: hidden;
    backface-visibility: hidden;
    filter: drop-shadow(calc(var(--tile) * .03) calc(var(--tile) * .05) calc(var(--tile) * .05) rgba(60, 25, 10, .5));
    font: 600 calc(var(--tile) * .44)/1 "Cormorant Garamond", Georgia, serif;
    font-variant-numeric: lining-nums tabular-nums;
    color: var(--ink)
}

.cd-back {
    transform: rotateX(180deg)
}

.countdown.is-asleep .cd-flip {
    display: none
}

.cd-sr {
    position: absolute;
    width: 1px;
    height: 1px;
    margin: -1px;
    padding: 0;
    overflow: hidden;
    clip: rect(0 0 0 0);
    white-space: nowrap
}

.cd-label {
    font: 700 max(9.5px, calc(var(--tile) * .145))/1.2 "Cormorant Garamond", Georgia, serif;
    letter-spacing: .2em;
    padding-left: .2em;
    text-transform: uppercase;
    color: #fff7e6;
    text-shadow: 0 1px 2px rgba(40, 14, 4, .85), 0 0 6px rgba(40, 14, 4, .5)
}

.cd-line {
    font: italic 500 max(15px, calc(var(--u) * 1.95))/1.25 "Cormorant Garamond", Georgia, serif;
    color: #fff7e6;
    text-shadow: 0 1px 3px rgba(40, 14, 4, .9), 0 0 12px rgba(40, 14, 4, .55);
    text-wrap: balance
}

.cd-save-wrap {
    position: relative
}

.cd-save {
    min-height: 38px;
    padding-inline: 18px;
    background: #fffbf0eb;
    box-shadow: 0 2px 6px #28140559
}

.cd-label,
.cd-line,
.cd-save-wrap {
    transition: opacity .9s ease, translate 1.1s cubic-bezier(.2, .7, .2, 1)
}

.countdown:not(.is-revealed) .cd-label,
.countdown:not(.is-revealed) .cd-line,
.countdown:not(.is-revealed) .cd-save-wrap {
    opacity: 0;
    translate: 0 8px
}

.countdown:not(.is-revealed) .cd-save-wrap {
    visibility: hidden
}

.countdown.is-revealed .cd-line {
    transition-delay: 1.9s
}

.countdown.is-revealed .cd-save-wrap {
    transition-delay: 2.1s
}

.countdown.is-revealed .cd-label {
    transition-delay: 1.2s
}

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

@media(min-aspect-ratio:6/5) {
    html.is-tablet .cd-title {
        font-size: calc(var(--u) * 7.4)
    }
    html.is-tablet .cd-foot {
        --tile: min(calc(var(--u) * 9.4), (100cqw * .36) / 4.6, 100px);
        justify-content: flex-start;
        padding-top: calc(var(--u) * 1.5)
    }
}

@media(prefers-reduced-motion:reduce) {
    .cd-hint {
        animation: none;
        opacity: 1
    }
    .cd-hint,
    .cd-label,
    .cd-line,
    .cd-save-wrap {
        transition: none
    }
}