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

.families {
    position: relative;
    height: 100vh;
    height: 100svh;
    min-height: 520px;
    overflow: hidden;
    background: #f1e3dc;
    color: var(--ink);
    container-type: size
}

.fm-scene {
    position: absolute;
    left: 50%;
    top: 50%;
    width: max(100cqw, 100cqh * var(--pic-r));
    aspect-ratio: var(--pic-r);
    translate: -50% -50%;
    background-position: center;
    background-size: 100% 100%;
    background-repeat: no-repeat;
    container-type: size
}

.fm-art {
    position: absolute;
    inset: 0;
    pointer-events: none
}

.fm-art>* {
    position: absolute
}

.fm-veil {
    inset: 0;
    background: radial-gradient(ellipse calc((var(--in-r) - var(--in-l)) * .68) calc((var(--in-b) - var(--in-t)) * .7) at 50% calc(var(--in-t) * .42 + var(--in-b) * .58), #fffaf5cc, #fffaf575 60%, #fffaf500)
}

.fm-vines,
.fm-vines-still {
    inset: 0;
    width: 100%;
    height: 100%
}

.fm-vines-still {
    background-position: center;
    background-size: 100% 100%;
    background-repeat: no-repeat
}

.families.has-gl .fm-vines-still {
    display: none
}

.families:not(.has-gl) .fm-vines {
    display: none
}

.fm-rose {
    left: var(--apex-x);
    top: var(--apex-y);
    width: var(--rose-w, 17cqw);
    aspect-ratio: 1;
    translate: -50% -42%;
    filter: saturate(.8) brightness(1.04) sepia(.08) drop-shadow(0 2px 4px rgba(110, 60, 55, .24));
    -webkit-mask-image: linear-gradient(#000 60%, transparent 78%);
    mask-image: linear-gradient(#000 60%, transparent 78%)
}

.fm-rose img {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    opacity: 0
}

.fm-rose img:last-child {
    opacity: 1
}

.fm-petals {
    inset: 0;
    overflow: hidden
}

.fm-petal {
    position: absolute;
    left: 0;
    top: 0;
    perspective: 300px
}

.fm-petal b {
    display: block;
    transform-style: preserve-3d
}

.fm-petal img {
    width: 100%;
    height: auto;
    filter: drop-shadow(0 2px 3px rgba(120, 70, 70, .16))
}

.fm-words {
    --iw: calc((var(--in-r-n) - var(--in-l-n)) * 100cqw);
    --ih: calc((var(--in-b-n) - var(--in-t-n)) * 100cqh);
    --u: calc(min(var(--iw), var(--ih) * .62) * var(--fit, 1));
    position: absolute;
    left: calc(var(--in-l) + 1cqw);
    right: calc(100% - var(--in-r) + 1cqw);
    top: var(--in-t);
    bottom: calc(100% - var(--in-b));
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: calc(var(--u) * .03);
    text-align: center
}

.fm-words p {
    margin: 0
}

.fm-kicker {
    font: 600 max(10px, var(--u) * .045)/1.3 "Cormorant Garamond", Georgia, serif;
    letter-spacing: .28em;
    padding-left: .28em;
    text-transform: uppercase;
    color: var(--sage-ink)
}

.fm-title {
    margin: 0 0 calc(var(--u) * .04);
    font: 700 calc(var(--u) * .175)/1.05 "Corinthia", cursive;
    padding: 0 .2em .04em;
    white-space: nowrap;
    color: var(--rose-ink);
    --wipe: 130%;
    -webkit-mask-image: linear-gradient(90deg, #000 calc(var(--wipe) - 18%), transparent var(--wipe));
    mask-image: linear-gradient(90deg, #000 calc(var(--wipe) - 18%), transparent var(--wipe))
}

.fm-label {
    font: 600 max(9.5px, var(--u) * .04)/1.3 "Cormorant Garamond", Georgia, serif;
    letter-spacing: .24em;
    padding-left: .24em;
    text-transform: uppercase;
    color: var(--sage-ink)
}

.fm-parents {
    margin-top: .15em !important;
    font: 600 max(15px, var(--u) * .078)/1.2 "Cormorant Garamond", Georgia, serif;
    color: var(--ink);
    overflow-wrap: anywhere
}

.fm-amp {
    font: 700 calc(var(--u) * .15)/1 "Corinthia", cursive;
    color: var(--rose-ink);
    margin: calc(var(--u) * -.01) 0 !important
}

.fm-dua {
    margin-top: calc(var(--u) * .05);
    text-wrap: balance
}

.fm-dua>* {
    text-wrap: balance
}

.fm-dua-ar {
    font: 400 max(15px, var(--u) * .068)/1.9 "Amiri", serif;
    color: var(--rose-ink-soft)
}

.fm-dua-en {
    margin-top: .1em !important;
    font: italic 500 max(13px, var(--u) * .054)/1.4 "Cormorant Garamond", Georgia, serif;
    color: #5b3c40e0
}

.fm-dua-ref {
    margin-top: .45em !important;
    font: 600 max(9px, var(--u) * .036)/1.3 "Cormorant Garamond", Georgia, serif;
    letter-spacing: .2em;
    text-transform: uppercase;
    color: var(--sage-ink)
}

.fm-words>*,
.fm-fam>*,
.fm-dua>* {
    text-shadow: 0 0 12px rgba(255, 251, 246, .9), 0 0 2px rgba(255, 251, 246, .8)
}

.families.is-armed:not(.is-played) .fm-anim,
.families.is-armed:not(.is-played) .fm-rose {
    opacity: 0
}

@media(min-aspect-ratio:5/8) {
    html:root .families {
        --rose-w: 12cqw
    }
}

@media(min-aspect-ratio:6/5) {
    html.is-tablet .families {
        --rose-w: 8cqw
    }
    html.is-tablet .fm-words {
        --u: calc(min(var(--iw) * 1.05, var(--ih) * .66) * var(--fit, 1))
    }
    html.is-tablet .fm-fam {
        position: absolute;
        top: var(--fam-y, 50%);
        width: calc((var(--out-l-n) - .025) * 100cqw - 2cqw);
        translate: 0 -50%
    }
    html.is-tablet .fm-groom {
        right: calc(100% + (var(--in-l-n) - var(--out-l-n)) * 100cqw + 2cqw)
    }
    html.is-tablet .fm-bride {
        left: calc(100% + (var(--out-r-n) - var(--in-r-n)) * 100cqw + 2cqw)
    }
    html.is-tablet .fm-fam .fm-parents {
        font-size: max(17px, var(--u) * .095);
        text-wrap: balance
    }
    html.is-tablet .fm-fam .fm-label {
        font-size: max(10px, var(--u) * .048)
    }
    html.is-tablet .fm-veil {
        background: radial-gradient(ellipse calc((var(--in-r) - var(--in-l)) * .7) calc((var(--in-b) - var(--in-t)) * .62) at 50% calc((var(--in-t) + var(--in-b)) / 2), #fffaf5b8, #fffaf561 58%, #fffaf500), radial-gradient(ellipse calc(var(--out-l) * .56) 22% at calc(var(--out-l) / 2 + 1%) calc((var(--in-t) + var(--in-b)) / 2), #fffaf5bd, #fffaf566 58%, #fffaf500), radial-gradient(ellipse calc((100% - var(--out-r)) * .56) 22% at calc((100% + var(--out-r)) / 2 - 1%) calc((var(--in-t) + var(--in-b)) / 2), #fffaf5bd, #fffaf566 58%, #fffaf500)
    }
}

@media(prefers-reduced-motion:reduce) {
    .families.is-armed:not(.is-played) .fm-anim,
    .families.is-armed:not(.is-played) .fm-rose {
        opacity: 1
    }
}