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

.families {
    --lamp-w: min(31cqi, 150px, 14.5svh);
    --gap: clamp(30px, 9cqi, 90px);
    position: relative;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    min-height: 100vh;
    min-height: 100svh;
    padding: 64px 16px 48px;
    overflow: hidden;
    background-color: var(--onyx);
    background-position: center;
    background-size: cover;
    background-repeat: no-repeat;
    color: var(--ivory);
    text-align: center;
    container-type: inline-size;
    -webkit-tap-highlight-color: transparent
}

@media(min-aspect-ratio:5/8) {
    html:root .families {
        --lamp-w: min(22cqi, 180px, 16svh)
    }
}

.families:before {
    content: "";
    position: absolute;
    inset: 0;
    background: radial-gradient(ellipse 95% 72% at 50% 46%, #08060480, #080604e0);
    pointer-events: none
}

.fm-glow {
    position: absolute;
    inset: 0;
    -webkit-mask-position: center;
    mask-position: center;
    -webkit-mask-size: cover;
    mask-size: cover;
    -webkit-mask-repeat: no-repeat;
    mask-repeat: no-repeat;
    background: radial-gradient(circle calc(var(--lamp-w) * 2.5) at var(--gx, 25%) var(--gy, 40%), rgba(255, 238, 196, .95), rgba(255, 212, 140, .5) 34%, rgba(255, 196, 120, .12) 70%, transparent);
    mix-blend-mode: screen;
    opacity: 0;
    pointer-events: none
}

.families>:not(.fm-glow, .fm-threads, .fm-bloom, .fm-clock) {
    position: relative
}

.fm-head>* {
    margin: 0
}

.fm-kicker {
    font-size: clamp(11.5px, 3.2cqi, 15px)
}

.fm-title {
    font: 400 clamp(46px, 13cqi, 80px) / 1.12 "Luxurious Script", cursive
}

.fm-title .gold-leaf {
    padding: 0 .2em .06em
}

.fm-lamps {
    display: grid;
    grid-template-columns: 1fr 1fr;
    grid-template-areas: "a b" "u u";
    column-gap: var(--gap);
    width: 100%;
    max-width: 760px;
    margin-top: 14px
}

.fm-side-a {
    grid-area: a
}

.fm-side-b {
    grid-area: b
}

.fm-union {
    grid-area: u
}

.fm-rail {
    position: absolute;
    top: 0;
    left: calc((100% - var(--gap)) / 4 - 40px);
    right: calc((100% - var(--gap)) / 4 - 40px);
    height: 4px;
    border-radius: 2px;
    background: linear-gradient(180deg, #f6e2a6, #c29645 50%, #6f5020);
    box-shadow: 0 2px 5px #0009
}

.fm-rail:before,
.fm-rail:after {
    content: "";
    position: absolute;
    top: 50%;
    width: 13px;
    height: 13px;
    border-radius: 50%;
    translate: 0 -50%;
    background: radial-gradient(circle at 35% 30%, #fff1c4, #c9a45c 45%, #6f5020);
    box-shadow: 0 1px 3px #0009
}

.fm-rail:before {
    left: -7px
}

.fm-rail:after {
    right: -7px
}

.fm-side {
    display: flex;
    flex-direction: column;
    align-items: center;
    min-width: 0
}

.fm-hang {
    display: flex;
    flex-direction: column;
    align-items: center;
    transform-origin: 50% 0;
    animation: fm-sway 5.4s ease-in-out infinite alternate
}

.fm-side-b .fm-hang {
    animation-duration: 6.1s;
    animation-delay: -2.2s
}

@keyframes fm-sway {
    0% {
        rotate: -1.4deg
    }
    to {
        rotate: 1.4deg
    }
}

.fm-chain {
    display: block;
    width: calc(var(--lamp-w) * .085);
    min-width: 7px;
    height: clamp(22px, 7cqi, 60px);
    background-position: center top;
    background-size: 100% auto;
    background-repeat: repeat-y;
    filter: drop-shadow(0 1px 1px rgba(0, 0, 0, .6));
    margin-bottom: -3px
}

.fm-lamp {
    position: relative;
    display: block;
    width: var(--lamp-w);
    aspect-ratio: var(--lamp-r);
    padding: 0;
    border: 0;
    background: none;
    cursor: pointer;
    border-radius: 40%;
    -webkit-tap-highlight-color: transparent
}

.fm-lamp:focus-visible {
    outline: 2px solid var(--gold-hi);
    outline-offset: 6px
}

.is-lit .fm-lamp {
    cursor: default
}

.fm-lantern {
    position: absolute;
    inset: 0;
    background-position: center;
    background-size: 100% 100%;
    background-repeat: no-repeat;
    -webkit-mask-position: center;
    mask-position: center;
    -webkit-mask-size: 100% 100%;
    mask-size: 100% 100%;
    -webkit-mask-repeat: no-repeat;
    mask-repeat: no-repeat;
    pointer-events: none
}

.fm-unlit {
    filter: drop-shadow(0 6px 10px rgba(0, 0, 0, .6))
}

.fm-lit {
    opacity: 0
}

.fm-flicker {
    background-color: #ffc8788c;
    mix-blend-mode: screen;
    opacity: 0
}

.is-lit .fm-flicker {
    animation: fm-flicker 2.3s steps(1, end) infinite
}

@keyframes fm-flicker {
    0% {
        opacity: .35
    }
    9% {
        opacity: .5
    }
    17% {
        opacity: .28
    }
    26% {
        opacity: .45
    }
    38% {
        opacity: .32
    }
    47% {
        opacity: .55
    }
    58% {
        opacity: .3
    }
    66% {
        opacity: .42
    }
    78% {
        opacity: .26
    }
    87% {
        opacity: .5
    }
    94% {
        opacity: .36
    }
    to {
        opacity: .35
    }
}

.fm-gleam {
    background-image: linear-gradient(100deg, transparent 45%, rgba(255, 196, 110, .34) 50%, transparent 55%);
    background-size: 300% 100%;
    background-position: 100% 0;
    mix-blend-mode: screen;
    animation: fm-gleam 5s ease-in-out 1.2s infinite
}

.fm-side-b .fm-gleam {
    animation-delay: 2.1s
}

.is-lit .fm-gleam {
    animation: none;
    opacity: 0
}

@keyframes fm-gleam {
    0% {
        background-position: 100% 0
    }
    30%,
    to {
        background-position: 0% 0
    }
}

.fm-halo {
    position: absolute;
    left: 50%;
    top: calc(var(--flame-y) * 100%);
    width: calc(var(--lamp-w) * 2.8);
    aspect-ratio: 1;
    translate: -50% -50%;
    border-radius: 50%;
    background: radial-gradient(closest-side, rgba(255, 206, 130, .45), rgba(255, 180, 90, .15) 50%, transparent);
    opacity: 0;
    pointer-events: none
}

.is-lit .fm-lit,
.is-lit .fm-halo,
.families.lit-a .fm-glow-a,
.families.lit-b .fm-glow-b {
    opacity: 1
}

.fm-side,
.fm-rail,
.fm-head {
    transition: opacity 1s ease, translate 1.4s cubic-bezier(.2, .7, .2, 1)
}

.fm-side-b {
    transition-delay: .12s
}

.families:not(.is-seen) .fm-side {
    opacity: 0;
    translate: 0 -28px
}

.families:not(.is-seen) .fm-rail,
.families:not(.is-seen) .fm-head {
    opacity: 0
}

.fm-names {
    position: relative;
    isolation: isolate;
    margin-top: 16px;
    max-width: 100%;
    padding: 4px 6px;
    opacity: .32;
    transition: opacity .9s ease .25s
}

.fm-names:before,
.fm-union:before {
    content: "";
    position: absolute;
    inset: -22% -14%;
    z-index: -1;
    background: radial-gradient(closest-side, rgba(8, 6, 4, .8), rgba(8, 6, 4, .5) 62%, transparent);
    pointer-events: none
}

.fm-names>* {
    margin: 0
}

.fm-label {
    font: 600 clamp(9.5px, 2.6cqi, 13px) / 1.3 "Cormorant Garamond", Georgia, serif;
    letter-spacing: .24em;
    padding-left: .24em;
    text-transform: uppercase;
    color: #d9c08a;
    margin-bottom: 7px !important
}

.fm-parents {
    font: 600 clamp(17px, 5cqi, 24px) / 1.22 "Cormorant Garamond", Georgia, serif;
    color: var(--ivory);
    text-wrap: balance;
    transition: color .9s ease .25s, text-shadow .9s ease .25s
}

.fm-mrs {
    display: block;
    font-style: italic;
    font-weight: 500;
    font-size: .8em
}

.is-lit .fm-names {
    opacity: 1
}

.is-lit .fm-parents {
    color: var(--gold-hi);
    text-shadow: 0 0 14px rgba(255, 200, 120, .45), 0 1px 2px rgba(0, 0, 0, .7)
}

.fm-union {
    position: relative;
    isolation: isolate;
    margin-top: clamp(22px, 7cqi, 44px);
    opacity: 0;
    translate: 0 10px;
    transition: opacity 1.1s ease, translate 1.2s cubic-bezier(.2, .7, .2, 1)
}

.fm-union>* {
    margin: 0
}

.families.is-united .fm-union {
    opacity: 1;
    translate: none
}

.fm-couple {
    font: 400 clamp(48px, 14cqi, 80px) / 1.1 "Luxurious Script", cursive
}

.fm-cw {
    padding: .04em .3em .14em;
    background: linear-gradient(100deg, transparent calc(var(--gleam) - 14%), rgba(255, 251, 236, .95) var(--gleam), transparent calc(var(--gleam) + 14%)), var(--gold-leaf);
    -webkit-background-clip: text;
    background-clip: text;
    color: transparent;
    -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));
    filter: drop-shadow(0 0 .2em rgba(255, 200, 120, .3)) drop-shadow(0 .03em .02em rgba(0, 0, 0, .75))
}

.fm-cw i {
    font: italic 500 .5em Cormorant Garamond, Georgia, serif
}

.families:not(.is-united) .fm-cw {
    --wipe: -2%
}

.fm-dua {
    margin-top: 8px !important
}

.fm-dua-ar {
    font: 400 clamp(20px, 6.2cqi, 30px) / 1.9 "Amiri", serif;
    background: var(--gold-leaf);
    -webkit-background-clip: text;
    background-clip: text;
    color: transparent;
    filter: drop-shadow(0 1px 1px rgba(0, 0, 0, .8));
    padding: 0 .2em
}

.fm-dua-en {
    font: italic 500 clamp(15px, 4.4cqi, 20px) / 1.4 "Cormorant Garamond", Georgia, serif;
    color: #f3ead8e6;
    max-width: 30em;
    margin-inline: auto !important;
    text-wrap: balance;
    text-shadow: 0 1px 2px rgba(0, 0, 0, .7)
}

.fm-dua-ref {
    margin-top: 6px !important;
    font: 600 clamp(9.5px, 2.6cqi, 12px) / 1.3 "Cormorant Garamond", Georgia, serif;
    letter-spacing: .24em;
    padding-left: .24em;
    text-transform: uppercase;
    color: var(--gold)
}

.fm-hint {
    margin: 18px 0 0;
    font: italic 500 clamp(15px, 4.4cqi, 19px) / 1.3 "Cormorant Garamond", Georgia, serif;
    color: #e6d3a4;
    text-shadow: 0 1px 3px rgba(0, 0, 0, .8);
    animation: fm-hint 2.8s ease-in-out infinite;
    transition: opacity .6s
}

.families.is-joined .fm-hint {
    opacity: 0 !important;
    animation: none
}

.fm-hint {
    visibility: hidden;
    animation: none
}

@keyframes fm-hint {
    0%,
    to {
        opacity: .5
    }
    50% {
        opacity: 1
    }
}

.fm-threads {
    position: absolute;
    left: 0;
    top: 0;
    overflow: visible;
    pointer-events: none
}

.fm-threads path {
    fill: none;
    stroke-linecap: round;
    opacity: 0
}

.fm-thread-glow {
    stroke: #ffce82b3;
    stroke-width: 7;
    filter: url(#fmBlur)
}

.fm-thread-core {
    stroke: #fff4d6;
    stroke-width: 1.6
}

.fm-bloom {
    position: absolute;
    left: 0;
    top: 0;
    width: 160px;
    height: 160px;
    margin: -80px 0 0 -80px;
    border-radius: 50%;
    background: radial-gradient(closest-side, rgba(255, 252, 236, .95), rgba(255, 222, 160, .45) 35%, rgba(255, 200, 120, .12) 65%, transparent);
    opacity: 0;
    pointer-events: none
}

@media(min-aspect-ratio:6/5) {
    html.is-tablet .families {
        --lamp-w: min(12cqi, 170px, 17svh);
        --gap: clamp(20px, 3cqi, 44px)
    }
    html.is-tablet .fm-lamps {
        grid-template-columns: 1fr minmax(0, 1.5fr) 1fr;
        grid-template-areas: "a u b";
        max-width: 1080px;
        align-items: start
    }
    html.is-tablet .fm-union {
        margin-top: 0;
        align-self: center
    }
    html.is-tablet .fm-rail {
        left: calc((100% - 2 * var(--gap)) / 7 - 34px);
        right: calc((100% - 2 * var(--gap)) / 7 - 34px)
    }
}

@media(prefers-reduced-motion:reduce) {
    .fm-side,
    .fm-rail,
    .fm-head {
        transition: none
    }
    .fm-hang,
    .fm-hint,
    .fm-gleam,
    .is-lit .fm-flicker {
        animation: none
    }
    .is-lit .fm-flicker {
        opacity: .35
    }
}