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

:root {
    --ink: #5e1424;
    --ink-soft: #8a4a52;
    --gold: #a9803f;
    --paper: #f6eee1;
    --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;
    background: radial-gradient(ellipse 70% 60% at 50% 45%, rgba(120, 24, 40, .55), transparent 70%), radial-gradient(ellipse at 50% 50%, #4a0f19, #26060c 62%, #120206) fixed;
    background-color: #1c0409
}

body {
    min-height: 100vh
}

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

.card {
    position: relative;
    width: var(--card-w);
    margin: 0 auto;
    background: var(--paper);
    box-shadow: 0 0 60px #0800038c
}

@media(max-aspect-ratio:3/4),
(max-width:360px) {
    html,
    body {
        background: var(--paper)
    }
    .card {
        box-shadow: none
    }
}

html.is-tablet,
html.is-tablet body {
    background: var(--paper)
}

html.is-tablet .card {
    box-shadow: none
}

.lace-edged:before {
    --trim: clamp(44px, 13vw, 84px);
    content: "";
    position: absolute;
    z-index: 2;
    left: 0;
    right: 0;
    top: calc(var(--trim) * -.66);
    height: var(--trim);
    background: url(../assets/letter/trim.webp) 50% 0 / auto 100% repeat-x;
    -webkit-mask: linear-gradient(#000 58%, transparent 97%);
    mask: linear-gradient(#000 58%, transparent 97%);
    filter: drop-shadow(0 -1px 2px rgba(60, 10, 18, .3));
    pointer-events: none
}

.lace-edged:after {
    --trim: clamp(44px, 13vw, 84px);
    content: "";
    position: absolute;
    z-index: 2;
    left: 0;
    right: 0;
    bottom: calc(var(--trim) * -.66);
    height: var(--trim);
    background: url(../assets/letter/trim.webp) 50% 0 / auto 100% repeat-x;
    transform: scaleY(-1);
    -webkit-mask: linear-gradient(#000 58%, transparent 97%);
    mask: linear-gradient(#000 58%, transparent 97%);
    filter: drop-shadow(0 -1px 2px rgba(60, 10, 18, .3));
    pointer-events: none
}

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
}

[data-section].is-away :is(.h-petal, .h-petal img, .h-twinkle, .h-swing, .h-glow, .c-strand, .c-hint, .k-drift, .k-lantern img, .k-glow),
[data-section].is-away :is(.h-scroll-line, .l-hint i):after {
    animation-play-state: paused !important
}

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

[data-section].is-far :is(.h-petal, .h-twinkle) {
    display: none
}

[data-section].is-far :is(.h-swing, .h-glow, .c-strand, .c-hint),
[data-section].is-far :is(.h-scroll-line, .l-hint i):after {
    animation: none !important
}

html.is-lite :is(.h-petal, .h-twinkle) {
    display: none
}

html.is-lite :is(.h-swing, .h-glow, .c-strand, .c-hint, .k-drift, .k-lantern img, .k-glow),
html.is-lite :is(.h-scroll-line, .l-hint i):after,
html.is-lite .music-toggle svg {
    animation: none !important
}

html.is-lite .music-toggle {
    -webkit-backdrop-filter: none;
    backdrop-filter: none
}