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

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

.families-stage {
    position: relative;
    height: 100vh;
    height: 100svh;
    min-height: 620px;
    overflow: hidden;
    container: fstage / size
}

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

.f-wall {
    position: absolute;
    inset: 0;
    background: var(--paper) url(../assets/families/wall-phone.webp) center / cover no-repeat
}

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

.f-layout>* {
    margin: 0
}

.f-title {
    font: 600 calc(2.6 * var(--u))/1.3 "Cormorant Garamond", Georgia, serif;
    letter-spacing: .32em;
    padding-left: .32em;
    text-transform: uppercase;
    color: var(--ink-soft)
}

.f-title:before,
.f-title:after {
    content: "";
    display: inline-block;
    vertical-align: middle;
    width: 2.2em;
    height: 1px;
    margin: 0 .9em .15em;
    background: linear-gradient(90deg, transparent, rgba(169, 128, 63, .8))
}

.f-title:after {
    background: linear-gradient(90deg, rgba(169, 128, 63, .8), transparent);
    margin-left: .6em
}

.f-windows {
    display: flex;
    align-items: center;
    justify-content: center;
    margin-top: calc(3 * var(--u)) !important
}

.f-and {
    width: calc(4 * var(--u));
    font: 400 calc(11 * var(--u))/1 "Pinyon Script", cursive;
    color: var(--gold);
    margin-top: calc(6 * var(--u)) !important
}

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

.f-window {
    position: relative;
    width: calc(46 * var(--u));
    aspect-ratio: 760 / 1478;
    container-type: inline-size;
    filter: drop-shadow(0 1.2cqi 1.8cqi rgba(92, 40, 30, .28))
}

.f-frame,
.f-panel,
.f-shutter {
    position: absolute;
    inset: 0;
    pointer-events: none
}

.f-frame {
    background: url(../assets/families/window.webp) 0 0 / 100% 100% no-repeat
}

.f-panel {
    background: radial-gradient(ellipse 60% 45% at 50% 52%, #fff8eaf2, #ecdbbee6 70%, #cdb08ce6), var(--paper);
    -webkit-mask: url(../assets/families/opening.png) 0 0 / 100% 100% no-repeat;
    mask: url(../assets/families/opening.png) 0 0 / 100% 100% no-repeat
}

.f-names {
    position: absolute;
    left: 27%;
    width: 46%;
    top: 36%;
    height: 40%;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: calc(1.6cqi * var(--fit, 1));
    text-align: center;
    color: var(--ink)
}

.f-names>* {
    margin: 0
}

.f-mr {
    font: italic 500 calc(8.2cqi * var(--fit, 1))/1.1 "Cormorant Garamond", Georgia, serif;
    color: var(--ink-soft)
}

.f-parents {
    font: 600 calc(10.4cqi * var(--fit, 1))/1.08 "Cormorant Garamond", Georgia, serif;
    text-wrap: balance;
    text-shadow: 0 .15cqi 0 rgba(255, 255, 255, .7)
}

.f-role {
    margin-top: calc(2cqi * var(--fit, 1)) !important;
    padding-top: calc(2.4cqi * var(--fit, 1));
    border-top: 1px solid rgba(169, 128, 63, .55);
    font: italic 500 calc(6.4cqi * var(--fit, 1))/1.15 "Cormorant Garamond", Georgia, serif;
    color: var(--gold);
    text-wrap: balance
}

.f-shutter {
    background: url(../assets/families/jali.webp) 50% 57.6% / auto 49.5% no-repeat;
    -webkit-mask: url(../assets/families/opening.png) 0 0 / 100% 100% no-repeat;
    mask: url(../assets/families/opening.png) 0 0 / 100% 100% no-repeat;
    filter: drop-shadow(0 .4cqi .5cqi rgba(92, 40, 30, .35));
    opacity: 0
}

.f-shutter-l {
    clip-path: inset(0 50% 0 0);
    transform-origin: 25.8% 50%
}

.f-shutter-r {
    clip-path: inset(0 0 0 50%);
    transform-origin: 74.1% 50%
}

.families.is-waiting .f-shutter {
    opacity: 1
}

.f-garland {
    width: calc(50 * var(--u));
    aspect-ratio: 1400 / 601;
    margin-top: calc(-11 * var(--u)) !important;
    background: url(../assets/families/garland.webp) 0 0 / 100% 100% no-repeat;
    filter: drop-shadow(0 .8cqw 1cqw rgba(92, 40, 30, .25));
    transform-origin: 50% 0
}

.f-invite {
    margin-top: calc(3 * var(--u)) !important;
    font: italic 500 calc(4.4 * var(--u))/1.4 "Cormorant Garamond", Georgia, serif;
    color: var(--ink-soft)
}

.f-couple {
    margin-top: calc(1.5 * var(--u)) !important;
    font: 400 calc(12 * var(--u))/1.2 "Pinyon Script", cursive;
    color: var(--ink);
    text-shadow: 0 .012em 0 rgba(255, 255, 255, .75), 0 -.006em 0 rgba(60, 8, 20, .28)
}

.f-couple-amp {
    font-size: .55em;
    color: var(--gold);
    margin: 0 .1em
}

.f-couple-1,
.f-couple-2 {
    display: inline-block;
    padding: 0 .12em
}

.f-roses {
    position: absolute;
    bottom: calc(-3 * var(--u));
    width: calc(44 * var(--u));
    filter: drop-shadow(0 1cqw 1.6cqw rgba(92, 40, 30, .3));
    pointer-events: none
}

.f-roses img {
    width: 100%
}

.f-roses-l {
    left: -6cqw;
    transform-origin: 0 100%
}

.f-roses-r {
    right: -6cqw;
    transform-origin: 100% 100%
}

.f-petals {
    position: absolute;
    inset: 0;
    overflow: hidden;
    pointer-events: none
}

@container fstage (min-aspect-ratio: 5 / 8) {
    .families-stage>* {
        --u: min(1cqw, .75cqh)
    }
    .f-wall {
        background-image: url(../assets/families/wall-tab.webp)
    }
    .f-window {
        width: calc(34 * var(--u))
    }
    .f-and {
        width: calc(8 * var(--u));
        font-size: calc(8 * var(--u));
        margin-top: calc(5 * var(--u)) !important
    }
    .f-garland {
        width: calc(44 * var(--u));
        margin-top: calc(-9 * var(--u)) !important
    }
    .f-invite {
        font-size: calc(3.3 * var(--u))
    }
    .f-couple {
        font-size: calc(9.5 * var(--u))
    }
    .f-title {
        font-size: calc(2 * var(--u))
    }
    .f-roses {
        width: calc(38 * var(--u))
    }
}

@container fstage (min-aspect-ratio: 6 / 5) {
    .families-stage>* {
        --u: min(1cqw, 1.3333cqh)
    }
    .f-wall {
        background-image: url(../assets/families/wall-land.webp)
    }
    .f-layout {
        padding: calc(4 * var(--u)) calc(6 * var(--u)) calc(6 * var(--u))
    }
    .f-windows {
        position: absolute;
        left: 0;
        right: 0;
        top: 50%;
        translate: 0 -46%;
        justify-content: space-between;
        padding: 0 calc(4.5 * var(--u));
        margin: 0 !important
    }
    .f-window {
        width: calc(25 * var(--u))
    }
    .f-and {
        display: none
    }
    .f-title {
        font-size: calc(1.5 * var(--u))
    }
    .f-garland {
        width: calc(52 * var(--u));
        margin-top: calc(2 * var(--u)) !important
    }
    .f-invite {
        font-size: calc(2.5 * var(--u));
        margin-top: calc(1 * var(--u)) !important
    }
    .f-couple {
        font-size: calc(6.6 * var(--u))
    }
    .f-roses {
        width: calc(30 * var(--u));
        bottom: calc(-2 * var(--u))
    }
    .f-roses-l {
        left: -3cqw
    }
    .f-roses-r {
        right: -3cqw
    }
}