/*! © 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;
    aspect-ratio: var(--fm-r);
    overflow: hidden;
    background: #8a5532;
    isolation: isolate;
    container-type: inline-size;
    -webkit-tap-highlight-color: transparent
}

.fm-panel,
.fm-shade,
.fm-sun,
.fm-petals {
    position: absolute;
    inset: 0;
    pointer-events: none
}

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

.fm-shade {
    overflow: hidden
}

.fm-shade:before {
    content: "";
    position: absolute;
    left: -16%;
    top: -7%;
    width: 92%;
    aspect-ratio: var(--shade-r, 1.366);
    background: url(../assets/theme/shade.webp) 0 0 / 100% 100% no-repeat;
    opacity: .13;
    filter: blur(4px);
    mix-blend-mode: multiply;
    transform-origin: 0 0;
    transform: rotate(14deg);
    animation: kh-shade 12s ease-in-out infinite alternate
}

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

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

.fm-sun {
    z-index: 3;
    overflow: hidden;
    mix-blend-mode: soft-light;
    opacity: 0;
    transition: opacity 2.4s ease
}

.fm-sun:before {
    content: "";
    position: absolute;
    left: -46%;
    top: -30%;
    width: 92%;
    height: 60%;
    background: radial-gradient(closest-side, rgba(255, 228, 182, .42), transparent 70%);
    transform: translate(28.2609%, 36.6667%)
}

.families.is-written .fm-sun {
    opacity: 1
}

.families.is-written .fm-sun:before {
    animation: fm-sun 26s ease-in-out infinite alternate
}

@keyframes fm-sun {
    0% {
        transform: translate(28.2609%, 36.6667%)
    }
    35% {
        transform: translate(76.087%, 56.6667%)
    }
    70% {
        transform: translate(43.4783%, 110%)
    }
    to {
        transform: translate(73.913%, 136.6667%)
    }
}

.fm-band {
    position: absolute;
    z-index: 3;
    inset: 0;
    pointer-events: none;
    background: linear-gradient(112deg, transparent 37%, rgba(255, 236, 196, .55) 46%, rgba(255, 222, 170, .75) 50%, rgba(255, 236, 196, .55) 54%, transparent 63%) 100% 0 / 280% 100% no-repeat;
    mix-blend-mode: soft-light;
    opacity: 0
}

.fm-area {
    position: absolute;
    z-index: 2;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    text-align: center;
    container-type: size;
    --fit: 1;
    color: var(--snow);
    text-shadow: 0 0 .25em rgba(40, 18, 6, .65), 0 .04em .06em rgba(30, 12, 4, .8)
}

.fm-area>* {
    margin: 0
}

.fm-left,
.fm-right {
    justify-content: flex-start
}

:is(.fm-left, .fm-right)>* {
    translate: 0 var(--drop, 0px)
}

.fm-line {
    padding: .2em .45em;
    margin: -.2em -.45em !important;
    -webkit-mask-image: linear-gradient(90deg, #000 calc(var(--wipe) - 14%), transparent var(--wipe));
    mask-image: linear-gradient(90deg, #000 calc(var(--wipe) - 14%), transparent var(--wipe))
}

.fm-line[dir=rtl] {
    -webkit-mask-image: linear-gradient(270deg, #000 calc(var(--wipe) - 14%), transparent var(--wipe));
    mask-image: linear-gradient(270deg, #000 calc(var(--wipe) - 14%), transparent var(--wipe))
}

.families.is-written .fm-line {
    -webkit-mask-image: none;
    mask-image: none
}

.fm-kicker,
.fm-label,
.fm-ref {
    font-family: Cormorant Garamond, Georgia, serif;
    font-weight: 700;
    text-transform: uppercase;
    color: #f6efe4
}

.fm-kicker {
    font-size: calc(clamp(10px, min(4.3cqw, 14cqh), 18px) * var(--fit));
    line-height: 1.3;
    letter-spacing: .28em;
    padding-left: .28em
}

.fm-title {
    font: 400 calc(min(22cqw, 70cqh) * var(--fit))/1 "Italianno", cursive;
    margin-top: .02em !important
}

.fm-label {
    font-size: calc(clamp(9px, min(7.6cqw, 6cqh), 16px) * var(--fit));
    line-height: 1.3;
    letter-spacing: .18em;
    padding-left: .18em;
    max-width: 11em;
    text-wrap: balance;
    margin-bottom: 1.3em !important
}

.fm-mr {
    font: 400 calc(min(29cqw, 22cqh) * var(--fit))/1 "Italianno", cursive;
    margin-bottom: .14em !important
}

.fm-name {
    font: 600 calc(min(17.5cqw, 13cqh) * var(--fit))/1.16 "Cormorant Garamond", Georgia, serif;
    text-wrap: balance
}

.fm-dua {
    font: 400 calc(min(7.4cqw, 28cqh) * var(--fit))/1.6 "Amiri", serif
}

.fm-dua-en {
    font: italic 500 calc(min(4.4cqw, 17cqh) * var(--fit))/1.3 "Cormorant Garamond", Georgia, serif;
    max-width: 34em;
    text-wrap: balance
}

.fm-ref {
    font-size: calc(min(3.1cqw, 12cqh) * var(--fit));
    line-height: 1.3;
    letter-spacing: .2em;
    padding-left: .2em;
    margin-top: .45em !important
}

.fm-petals {
    z-index: 4;
    overflow: hidden
}

.fm-petal {
    position: absolute;
    left: 0;
    top: 0;
    background-image: url(../assets/cover/petals.webp);
    background-repeat: no-repeat;
    filter: drop-shadow(1px 2px 1.5px rgba(50, 25, 10, .3));
    will-change: transform, opacity
}

@media(prefers-reduced-motion:reduce) {
    .fm-shade:before,
    .families.is-written .fm-sun:before {
        animation: none
    }
    .fm-petals {
        display: none
    }
}