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

.countdown {
    position: relative;
    background: var(--paper)
}

.countdown-stage {
    position: relative;
    height: 100vh;
    height: 100svh;
    min-height: 640px;
    overflow: hidden;
    container: cstage / size
}

.countdown-stage>* {
    --u: 1cqw
}

.c-bg {
    position: absolute;
    inset: 0;
    background: radial-gradient(ellipse 60% 45% at 50% 55%, rgba(255, 244, 222, .7), transparent 70%), var(--paper) url(../assets/hero/sky.webp) 50% 0 / cover no-repeat
}

.c-larian {
    position: absolute;
    inset: 0;
    pointer-events: none
}

.c-strand {
    position: absolute;
    top: -1px;
    left: var(--x);
    width: calc(5.4 * var(--u));
    translate: -50% 0;
    transform-origin: 50% 0;
    animation: c-sway var(--t) ease-in-out var(--d) infinite;
    filter: drop-shadow(0 .8cqw .8cqw rgba(92, 40, 30, .22))
}

.c-strand img {
    width: 100%
}

@keyframes c-sway {
    0%,
    to {
        rotate: -1.2deg
    }
    50% {
        rotate: 1.2deg
    }
}

.c-layout {
    position: absolute;
    inset: 0;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    padding: calc(33 * var(--u)) calc(6 * var(--u)) calc(9 * var(--u));
    text-align: center;
    color: var(--ink)
}

.c-layout>* {
    margin: 0
}

.c-head>* {
    margin: 0
}

.c-kicker {
    font: 600 calc(2.8 * var(--u))/1.3 "Cormorant Garamond", Georgia, serif;
    letter-spacing: .3em;
    padding-left: .3em;
    text-transform: uppercase;
    color: var(--gold)
}

.c-title {
    font: 400 calc(10.5 * var(--u))/1.15 "Pinyon Script", cursive;
    color: var(--ink);
    text-shadow: 0 .012em 0 rgba(255, 255, 255, .75), 0 -.006em 0 rgba(60, 8, 20, .28)
}

.c-heart-wrap {
    position: relative;
    width: calc(58 * var(--u));
    margin-top: calc(3 * var(--u)) !important
}

.c-heart {
    position: relative;
    z-index: 1;
    aspect-ratio: 720 / 711;
    container-type: inline-size;
    filter: drop-shadow(0 1.6cqi 2.2cqi rgba(92, 40, 30, .3))
}

.c-heart-rim,
.c-heart-paper {
    position: absolute;
    -webkit-mask: url(../assets/countdown/heart.webp) 0 0 / 100% 100% no-repeat;
    mask: url(../assets/countdown/heart.webp) 0 0 / 100% 100% no-repeat
}

.c-heart-rim {
    inset: -2.2%;
    background: linear-gradient(160deg, #e7c77e, #b3863d 45%, #8f6424);
    opacity: 0;
    transition: opacity .8s ease .3s
}

.c-heart-paper {
    inset: 0;
    background: radial-gradient(ellipse 70% 60% at 50% 40%, rgba(255, 250, 238, .75), transparent 75%), #f3e8d2 url(../assets/letter/paper.webp) center / cover
}

.c-date {
    position: absolute !important;
    left: 18%;
    right: 18%;
    top: 17%;
    height: 50%;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    color: var(--ink)
}

.c-date span {
    display: block
}

.c-date-day {
    font: 600 6.2cqi/1.2 Cormorant Garamond, Georgia, serif;
    letter-spacing: .3em;
    padding-left: .3em;
    text-transform: uppercase;
    color: var(--ink-soft)
}

.c-date-num {
    font: 500 30cqi/.95 Cormorant Garamond, Georgia, serif;
    text-shadow: 0 .012em 0 rgba(255, 255, 255, .7)
}

.c-date-month {
    font: italic 500 8.6cqi/1.2 Cormorant Garamond, Georgia, serif;
    color: var(--gold)
}

.c-foil {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    touch-action: none;
    cursor: pointer
}

.countdown.is-revealed .c-heart-rim {
    opacity: 1
}

.countdown.is-revealed .c-foil {
    pointer-events: none
}

.c-roses {
    position: absolute;
    z-index: 0;
    bottom: -13%;
    width: 54%;
    pointer-events: none;
    filter: drop-shadow(0 .8cqw 1.2cqw rgba(92, 40, 30, .28))
}

.c-roses img {
    width: 100%
}

.c-roses-l {
    left: -9%;
    transform-origin: 0 100%
}

.c-roses-r {
    right: -9%;
    transform-origin: 100% 100%
}

.c-under {
    position: relative;
    z-index: 1;
    min-height: calc(7 * var(--u));
    margin-top: calc(4.5 * var(--u)) !important;
    display: grid;
    place-items: center
}

.c-hint {
    margin: 0;
    font: italic 500 calc(4.2 * var(--u))/1.3 "Cormorant Garamond", Georgia, serif;
    color: var(--ink-soft);
    animation: c-pulse 3s ease-in-out infinite
}

@keyframes c-pulse {
    0%,
    to {
        opacity: .55
    }
    50% {
        opacity: 1
    }
}

.countdown.is-scratching .c-hint,
.countdown.is-revealed .c-hint {
    opacity: 0;
    animation: none;
    transition: opacity .4s
}

.c-reveal {
    position: absolute;
    padding: .5em 1.2em;
    border: 1px solid rgba(169, 128, 63, .7);
    border-radius: 999px;
    background: #fffaf0;
    color: var(--ink);
    font: 600 calc(3.6 * var(--u))/1 "Cormorant Garamond", Georgia, serif;
    cursor: pointer;
    opacity: 0;
    pointer-events: none
}

.c-reveal:focus-visible {
    opacity: 1;
    pointer-events: auto;
    outline: 2px solid #d4b06a;
    outline-offset: 2px
}

.countdown.is-revealed .c-reveal {
    display: none
}

.c-count {
    width: calc(84 * var(--u));
    container-type: inline-size;
    margin-top: calc(1 * var(--u)) !important
}

.c-tiles {
    display: grid;
    grid-template-columns: repeat(4, minmax(0, 1fr));
    gap: 3.2cqi
}

.c-card {
    position: relative;
    aspect-ratio: 1 / 1.08;
    perspective: 70cqi;
    border-radius: 1.6cqi;
    box-shadow: 0 1.4cqi 2.4cqi #5c281e38, 0 .3cqi .5cqi #5c281e33;
    font: 600 11.5cqi/1 Cormorant Garamond, Georgia, serif;
    font-variant-numeric: lining-nums tabular-nums;
    color: var(--ink)
}

.c-half {
    position: absolute;
    left: 0;
    right: 0;
    height: 50%;
    overflow: hidden;
    background: #f3e8d2 url(../assets/letter/paper.webp) 0 0 / 60cqi auto
}

.c-up {
    top: 0;
    border-radius: 1.6cqi 1.6cqi 0 0;
    background-image: linear-gradient(#fffcf473, #78481e12), url(../assets/letter/paper.webp);
    background-size: auto, 60cqi auto;
    box-shadow: inset 0 -1px #78481e47
}

.c-down {
    bottom: 0;
    border-radius: 0 0 1.6cqi 1.6cqi;
    background-image: linear-gradient(#78481e0d, #fffcf433), url(../assets/letter/paper.webp);
    background-size: auto, 60cqi auto;
    box-shadow: inset 0 1px #ffffff8c
}

.c-half b {
    position: absolute;
    left: 0;
    right: 0;
    height: 200%;
    display: flex;
    align-items: center;
    justify-content: center;
    font-weight: inherit
}

.c-up b {
    top: 0
}

.c-down b {
    bottom: 0
}

.c-leaf {
    visibility: hidden;
    z-index: 2;
    backface-visibility: hidden
}

.c-leaf-up {
    transform-origin: 50% 100%
}

.c-leaf-down {
    transform-origin: 50% 0
}

.c-card:after {
    content: "";
    position: absolute;
    z-index: 3;
    left: -.8cqi;
    right: -.8cqi;
    top: 50%;
    height: 1.6cqi;
    translate: 0 -50%;
    background: radial-gradient(circle at 50% 50%, #e2c27c, #9c7131 70%, transparent 72%) 0 50% / 1.6cqi 1.6cqi no-repeat, radial-gradient(circle at 50% 50%, #e2c27c, #9c7131 70%, transparent 72%) 100% 50% / 1.6cqi 1.6cqi no-repeat;
    pointer-events: none
}

.c-unit {
    display: block;
    margin-top: 2.4cqi;
    font: 600 3.3cqi/1.2 Cormorant Garamond, Georgia, serif;
    letter-spacing: .22em;
    padding-left: .22em;
    text-transform: uppercase;
    color: var(--gold)
}

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

.c-married {
    margin: 0;
    font: italic 500 5.4cqi/1.3 Cormorant Garamond, Georgia, serif;
    color: var(--ink-soft)
}

.c-married strong {
    display: block;
    font: 400 15cqi/1.15 Pinyon Script, cursive;
    color: var(--ink)
}

.c-count.is-married .c-tiles,
.c-count.is-married .c-save {
    display: none
}

.c-save {
    --k: 1.25;
    position: relative;
    display: flex;
    justify-content: center;
    margin-top: 6cqi;
    container-type: inline-size
}

.c-save .e-btn {
    flex: none;
    padding: 0 8cqi
}

.c-save .e-cal-menu {
    right: auto;
    left: 50%;
    translate: -50% 0;
    bottom: calc(100% + 2cqi)
}

@container cstage (min-aspect-ratio: 5 / 8) {
    .countdown-stage>* {
        --u: min(1cqw, .75cqh)
    }
    .c-bg {
        background-image: radial-gradient(ellipse 60% 45% at 50% 55%, rgba(255, 244, 222, .7), transparent 70%), url(../assets/hero/sky-lg.webp)
    }
    .c-strand {
        width: calc(4.4 * var(--u))
    }
    .c-layout {
        padding-top: calc(27 * var(--u))
    }
    .c-kicker {
        font-size: calc(2 * var(--u))
    }
    .c-title {
        font-size: calc(7.6 * var(--u))
    }
    .c-heart-wrap {
        width: calc(42 * var(--u))
    }
    .c-hint {
        font-size: calc(3.1 * var(--u))
    }
    .c-count {
        width: calc(62 * var(--u))
    }
}

@container cstage (min-aspect-ratio: 6 / 5) {
    .countdown-stage>* {
        --u: min(1cqw, 1.3333cqh)
    }
    .c-bg {
        background-image: radial-gradient(ellipse 60% 45% at 50% 55%, rgba(255, 244, 222, .7), transparent 70%), url(../assets/hero/sky-wide.webp)
    }
    .c-strand {
        width: calc(3.8 * var(--u))
    }
    .c-layout {
        display: grid;
        grid-template-columns: auto calc(44 * var(--u));
        grid-template-areas: "head  head" "heart count" "under count";
        align-content: center;
        justify-content: center;
        align-items: center;
        column-gap: calc(9 * var(--u));
        padding: calc(9 * var(--u)) calc(8 * var(--u)) calc(4 * var(--u))
    }
    .c-head {
        grid-area: head;
        margin-bottom: calc(3 * var(--u)) !important
    }
    .c-heart-wrap {
        grid-area: heart;
        width: calc(33 * var(--u));
        margin: 0 !important
    }
    .c-under {
        grid-area: under;
        margin-top: calc(3 * var(--u)) !important
    }
    .c-count {
        grid-area: count;
        width: 100%;
        margin: 0 !important
    }
    .c-kicker {
        font-size: calc(1.6 * var(--u))
    }
    .c-title {
        font-size: calc(6.4 * var(--u))
    }
    .c-hint {
        font-size: calc(2.4 * var(--u))
    }
}

@media(prefers-reduced-motion:reduce) {
    .c-strand,
    .c-hint {
        animation: none
    }
}