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

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

.countdown {
    position: relative;
    min-height: 100svh;
    overflow: hidden;
    background-color: #080605;
    color: var(--ivory);
    text-align: center;
    container-type: inline-size;
    -webkit-tap-highlight-color: transparent
}

.cd-hall {
    position: absolute;
    inset: 0;
    background-size: cover;
    background-position: 50% 100%;
    background-repeat: no-repeat
}

.cd-hall:after {
    content: "";
    position: absolute;
    inset: 0;
    background: linear-gradient(180deg, #080605b8, #08060500 26%), radial-gradient(ellipse 80% 40% at 50% 100%, rgba(8, 6, 5, .5), transparent 80%)
}

.cd-head {
    position: relative;
    z-index: 2;
    padding: calc(clamp(22px, 6.4cqi, 40px)/2 + clamp(30px, 8cqi, 56px)) 16px 0
}

.cd-kicker {
    font-size: clamp(11.5px, 3.3cqi, 15px)
}

.cd-title {
    font-size: clamp(50px, 14cqi, 88px)
}

.cd-gold {
    padding: 0 .24em .1em
}

.cd-date {
    display: flex;
    flex-direction: column;
    align-items: center;
    margin: .35em 0 0;
    font: 600 clamp(12px, 3.5cqi, 16px) / 1.4 "Cormorant Garamond", serif;
    letter-spacing: .22em;
    text-transform: uppercase;
    color: #f0d99c;
    text-shadow: 0 1px 6px rgba(0, 0, 0, .9)
}

.cd-date i {
    font-style: normal;
    color: var(--gold)
}

.cd-time {
    font-size: .86em;
    letter-spacing: .18em;
    text-transform: none;
    font-style: italic;
    color: #e6d3a4
}

.cd-glass {
    position: absolute;
    z-index: 1;
    left: var(--glass-x, 50%);
    top: var(--glass-y, 30%);
    height: var(--glass-h, 40%);
    aspect-ratio: var(--hg-r);
    translate: -50% 0
}

.cd-face,
.cd-face>i {
    position: absolute;
    inset: 0;
    pointer-events: none
}

.cd-face {
    transform-origin: calc(var(--hg-neck-x) * 100%) calc(var(--hg-neck) * 100%)
}

.cd-face>i {
    background-size: 100% 100%;
    background-repeat: no-repeat
}

.cd-shadow {
    position: absolute;
    left: 2%;
    right: 2%;
    top: calc(var(--hg-feet) * 100% - 4%);
    height: 7%;
    border-radius: 50%;
    background: radial-gradient(closest-side, rgba(0, 0, 0, .75), rgba(0, 0, 0, .3) 60%, transparent);
    pointer-events: none
}

.cd-top {
    --lvl: 0%;
    -webkit-mask-image: linear-gradient(180deg, transparent var(--lvl), #000 calc(var(--lvl) + .5%));
    mask-image: linear-gradient(180deg, transparent var(--lvl), #000 calc(var(--lvl) + .5%))
}

.cd-b .cd-pile {
    transform-origin: 50% calc(var(--hg-pile-foot) * 100%);
    transform: scaleY(0)
}

.cd-face>i.cd-stream {
    left: calc(var(--hg-neck-x) * 100% - .45%);
    right: auto;
    width: .9%;
    top: calc(var(--hg-neck) * 100% - .5%);
    bottom: auto;
    height: calc((var(--hg-pile-foot) - var(--hg-neck)) * 100%);
    border-radius: 1px;
    background: repeating-linear-gradient(180deg, #ffeeb4f2 0 2px, #d6a03cb3 2px 4px, #ffe296e6 4px 7px);
    background-size: 100% 14px;
    transform-origin: 50% 0;
    opacity: 0;
    animation: cd-grains .45s linear infinite paused
}

.countdown.is-visible .cd-stream {
    animation-play-state: running
}

@keyframes cd-grains {
    to {
        background-position: 0 14px
    }
}

.cd-b,
.countdown.is-running .cd-a {
    visibility: hidden
}

.countdown.is-running .cd-b {
    visibility: visible
}

.cd-turn {
    position: absolute;
    inset: 0 -6%;
    margin: 0;
    padding: 0;
    border: 0;
    border-radius: 18px;
    background: none;
    cursor: pointer;
    -webkit-tap-highlight-color: transparent
}

.cd-turn:focus {
    outline: none
}

.cd-turn:focus-visible {
    outline: 2px solid var(--gold);
    outline-offset: 4px
}

.cd-foot {
    position: absolute;
    z-index: 2;
    left: 0;
    right: 0;
    top: var(--foot-top, 72%);
    display: flex;
    flex-direction: column;
    align-items: center;
    padding: 0 16px
}

.cd-foot:before {
    content: "";
    position: absolute;
    z-index: -1;
    left: 50%;
    top: 44%;
    width: min(118%, 640px);
    height: 150%;
    translate: -50% -50%;
    background: radial-gradient(closest-side, rgba(6, 5, 4, .78), rgba(6, 5, 4, .5) 55%, transparent);
    pointer-events: none
}

.cd-hint {
    position: absolute;
    top: .6em;
    left: 0;
    right: 0;
    margin: 0;
    font: italic 500 clamp(15px, 4.2cqi, 19px) / 1.3 "Cormorant Garamond", serif;
    color: #f0d99c;
    text-shadow: 0 1px 6px rgba(0, 0, 0, .9);
    animation: cd-breathe 3.2s ease-in-out infinite
}

@keyframes cd-breathe {
    50% {
        opacity: .45
    }
}

.cd-count {
    display: flex;
    justify-content: center;
    gap: clamp(6px, 2.4cqi, 18px)
}

.cd-unit {
    display: flex;
    flex-direction: column;
    align-items: center;
    min-width: clamp(58px, 17cqi, 92px)
}

.cd-num {
    display: block;
    padding: .02em 0 .06em;
    border-block: 1px solid rgba(201, 162, 75, .55);
    width: 100%;
    font: 500 clamp(34px, 10.5cqi, 58px) / 1.05 "Cormorant Garamond", serif;
    font-variant-numeric: lining-nums tabular-nums;
    background: var(--gold-leaf);
    -webkit-background-clip: text;
    background-clip: text;
    color: transparent;
    filter: drop-shadow(0 1px 1px rgba(0, 0, 0, .9))
}

.cd-label {
    margin-top: .4em;
    font: 600 clamp(10px, 2.9cqi, 12.5px) / 1 "Cormorant Garamond", serif;
    letter-spacing: .24em;
    padding-left: .24em;
    text-transform: uppercase;
    color: #e6d3a4
}

.cd-line {
    margin: clamp(10px, 3cqi, 18px) 0 0;
    font: italic 500 clamp(16px, 4.6cqi, 21px) / 1.3 "Cormorant Garamond", serif;
    color: var(--ivory);
    text-shadow: 0 1px 6px rgba(0, 0, 0, .9)
}

.cd-save-wrap {
    position: relative;
    margin-top: clamp(10px, 3cqi, 18px)
}

.cd-save {
    --fs: 16px;
    min-width: 190px
}

.countdown:not(.is-turned) .cd-date,
.countdown:not(.is-turned) .cd-count,
.countdown:not(.is-turned) .cd-line,
.countdown:not(.is-turned) .cd-save-wrap {
    visibility: hidden
}

.countdown.is-turned .cd-hint {
    visibility: hidden
}

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

@media(min-aspect-ratio:6/5) {
    html.is-tablet .countdown {
        display: grid;
        grid-template-columns: 52% 44%;
        align-content: center;
        min-height: 100svh
    }
    html.is-tablet .cd-head,
    html.is-tablet .cd-foot {
        grid-column: 2;
        position: relative;
        top: auto;
        padding: 0
    }
    html.is-tablet .cd-head {
        padding-top: calc(clamp(22px, 6.4cqi, 40px)/2)
    }
    html.is-tablet .cd-title {
        font-size: clamp(50px, 7cqi, 88px)
    }
    html.is-tablet .cd-foot {
        margin-top: clamp(18px, 3vh, 34px);
        min-height: 190px
    }
    html.is-tablet .cd-hint {
        top: 3em
    }
    html.is-tablet .cd-unit {
        min-width: clamp(58px, 7.5cqi, 92px)
    }
    html.is-tablet .cd-num {
        font-size: clamp(34px, 4.6cqi, 58px)
    }
    html.is-tablet .cd-date,
    html.is-tablet .cd-line,
    html.is-tablet .cd-hint {
        font-size: clamp(15px, 1.7cqi, 20px)
    }
}

@media(prefers-reduced-motion:reduce) {
    .cd-hint {
        animation: none
    }
    .cd-face>i.cd-stream {
        animation: none
    }
}

.countdown {
    cursor: pointer;
    -webkit-tap-highlight-color: transparent
}