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

:root {
    --blush: #e9b8b3;
    --blush-deep: #c98a86;
    --rose: #a8646a;
    --sage: #9caf88;
    --sage-deep: #5f7355;
    --ivory: #fbf6ef;
    --pearl: #f6ece6;
    --gold-soft: #c9a86a;
    --ink: #5b3c40;
    --rose-ink: #7a3542;
    --rose-ink-soft: #8e4a54;
    --sage-ink: #46593c;
    --ink-soft: #4f3337;
    --card-w: min(100%, max( 75svh, 360px))
}

html.is-tablet {
    --card-w: 100%
}

*,
*:before,
*:after {
    box-sizing: border-box
}

html {
    -webkit-text-size-adjust: 100%
}

html,
body {
    margin: 0
}

html {
    background-color: var(--pearl)
}

html:before {
    content: "";
    position: fixed;
    inset: 0;
    z-index: -1;
    pointer-events: none;
    background: radial-gradient(ellipse at 50% 50%, #f6e9e3, #ecd8d1 62%, #dcc2ba) var(--pearl)
}

body {
    min-height: 100vh;
    background: radial-gradient(ellipse 70% 60% at 50% 40%, rgba(255, 250, 244, .9), transparent 70%)
}

img {
    display: block;
    max-width: 100%
}

.card {
    position: relative;
    width: var(--card-w);
    margin: 0 auto;
    background: var(--ivory);
    box-shadow: 0 0 60px #7846462e
}

html.is-preloading [data-section]:not([data-section=hero]),
html.is-preloading [data-section]:not([data-section=hero]):before,
html.is-preloading [data-section]:not([data-section=hero]):after,
html.is-preloading [data-section]:not([data-section=hero]) *,
html.is-preloading [data-section]:not([data-section=hero]) *:before,
html.is-preloading [data-section]:not([data-section=hero]) *:after {
    background-image: none !important;
    -webkit-mask-image: none !important;
    mask-image: none !important;
    border-image-source: none !important
}

.invite-clock {
    display: block;
    position: absolute !important;
    left: 0;
    top: 0;
    width: 1px;
    height: 1px;
    overflow: hidden;
    opacity: 0;
    pointer-events: none
}

.invite-wait {
    display: block;
    width: 1px;
    height: 1px;
    opacity: 0
}

.hero.is-away .h-pav:after,
.hero.is-away .h-scroll i,
.letter.is-away .lt-shade:before,
.letter.is-away .gl-seal-ring,
.letter.is-away .lt-hint,
.events.is-away .ev-shade,
.countdown.is-away .cd-shade,
.closing.is-away .cl-glow {
    animation-play-state: paused !important
}

.hero.is-far .h-pav:after,
.hero.is-far .h-petals,
.letter.is-far .lt-shade,
.letter.is-far .lt-petals,
.families.is-far .fm-petals,
.events.is-far .ev-shade,
.events.is-far .ev-petals,
.countdown.is-far .cd-shade,
.closing.is-far .cl-glow,
.closing.is-far .cl-flies,
.closing.is-far .cl-petals {
    display: none
}

html.is-lite .h-pav:after,
html.is-lite .lt-shade:before,
html.is-lite .ev-shade,
html.is-lite .cd-shade,
html.is-lite .cl-glow,
html.is-lite .music-toggle svg {
    animation: none !important
}

html.is-lite .cl-glow {
    opacity: .75
}

html.is-lite .h-petals,
html.is-lite .lt-petals,
html.is-lite .fm-petals,
html.is-lite .ev-petals,
html.is-lite .cl-petals,
html.is-lite .seam-p {
    display: none
}

html.is-lite .music-toggle {
    -webkit-backdrop-filter: none;
    backdrop-filter: none;
    background-color: #fffaf6e6
}

[data-section].is-far:before,
[data-section].is-far:after {
    animation-play-state: paused !important
}