/*! © 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(30cqi, 150px, 30svh * var(--lantern-r, .45));
    --gap: clamp(26px, 9cqi, 90px);
    --chain-w: calc(var(--lamp-w) * .34);
    --chain-h: clamp(44px, 12cqi, 90px);
    --motif: clamp(250px, 74cqi, 330px);
    --jw: calc(var(--motif) * var(--jaali-nx, 4));
    --jh: calc(var(--jw) / var(--jaali-r, 1));
    --moon-at: 72% 12%;
    position: relative;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    min-height: 100vh;
    min-height: 100svh;
    padding: calc(var(--seam-h) * .5 + 30px) 16px 44px;
    overflow: hidden;
    isolation: isolate;
    background-color: var(--night-deep);
    color: var(--pearl);
    text-align: center;
    container-type: inline-size;
    -webkit-tap-highlight-color: transparent
}

@media(min-aspect-ratio:5/8) {
    html:root .families {
        --lamp-w: min(24cqi, 210px, 28svh * var(--lantern-r, .45));
        --motif: clamp(280px, 44cqi, 400px)
    }
}

.fm-back,
.fm-back>*,
.fm-sky>* {
    position: absolute;
    inset: 0;
    pointer-events: none
}

.fm-sky {
    background: radial-gradient(circle at var(--moon-at), rgba(214, 230, 242, .5), rgba(150, 188, 218, .16) 16%, transparent 42%), linear-gradient(180deg, #0b2233, #12324a 48%, #163a53)
}

.fm-stars {
    width: 100%;
    height: 100%
}

.fm-stars-a {
    animation: fm-twinkle 3.7s ease-in-out infinite alternate
}

.fm-stars-b {
    animation: fm-twinkle 5.3s ease-in-out -2.1s infinite alternate-reverse
}

@keyframes fm-twinkle {
    0% {
        opacity: 1
    }
    to {
        opacity: .35
    }
}

.fm-moon {
    display: block;
    background: radial-gradient(circle at var(--moon-at), rgba(240, 247, 252, .95), rgba(196, 218, 236, .6) 14%, rgba(130, 170, 204, .26) 38%, transparent 72%), linear-gradient(180deg, #7098ba4d, #466e912e);
    opacity: 0
}

.fm-jaali,
.fm-glow,
.fm-moonlight {
    background-position: 50% 0;
    background-size: var(--jw) var(--jh);
    background-repeat: repeat;
    -webkit-mask-position: 50% 0;
    mask-position: 50% 0;
    -webkit-mask-size: var(--jw) var(--jh);
    mask-size: var(--jw) var(--jh);
    -webkit-mask-repeat: repeat;
    mask-repeat: repeat
}

.fm-shade {
    background: radial-gradient(ellipse 120% 90% at 50% 42%, #06162485, #05121ecc)
}

.fm-moonlight {
    background-image: radial-gradient(circle at var(--moon-at), rgba(238, 246, 252, .95), rgba(200, 222, 240, .6) 45%, rgba(165, 196, 222, .42));
    mix-blend-mode: screen;
    opacity: .22
}

.fm-glow {
    background-image: radial-gradient(circle calc(var(--lamp-w) * 2.1) at var(--gx, 25%) var(--gy, 40%), rgba(255, 238, 208, .7), rgba(255, 222, 176, .3) 34%, rgba(236, 226, 206, .08) 70%, transparent);
    mix-blend-mode: screen;
    opacity: 0
}

.fm-moon,
.fm-shade,
.fm-moonlight {
    transition: opacity 2.8s ease-in-out
}

.families.is-moonlit .fm-moon {
    opacity: 1
}

.families.is-moonlit .fm-shade {
    opacity: .74
}

.families.is-moonlit .fm-moonlight {
    opacity: .8
}

.fm-head,
.fm-names,
.fm-union,
.fm-hint {
    position: relative;
    isolation: isolate
}

.fm-head:before,
.fm-names:before,
.fm-union:before {
    content: "";
    position: absolute;
    z-index: -1;
    inset: -34% -16%;
    border-radius: 50%;
    background: radial-gradient(closest-side, rgba(7, 24, 38, .8), rgba(7, 24, 38, .52) 42%, rgba(7, 24, 38, .2) 72%, transparent);
    pointer-events: none
}

.fm-names:before {
    inset: -26% -10%
}

.fm-head>* {
    margin: 0
}

.fm-kicker {
    font: 700 clamp(11px, 3cqi, 14px)/1.3 "Cormorant Garamond", Georgia, serif;
    letter-spacing: .28em;
    padding-left: .28em;
    text-transform: uppercase;
    color: var(--moon);
    text-shadow: 0 1px 2px rgba(4, 16, 28, .8)
}

.fm-title {
    font: 400 clamp(48px, 14cqi, 84px)/1.2 "Allura", cursive
}

.fm-title .pearl {
    display: inline-block;
    padding: 0 .3em .1em
}

.fm-lamps {
    position: relative;
    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: 12px
}

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

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

.fm-union,
.fm-hint {
    grid-area: u
}

.fm-rail {
    position: absolute;
    top: 0;
    left: calc((100% - var(--gap)) / 4 - 30px);
    right: calc((100% - var(--gap)) / 4 - 30px);
    height: 4px;
    border-radius: 2px;
    background: linear-gradient(180deg, #fbfdff, #c9d4dc 38%, #7f909c 72%, #45535e);
    box-shadow: 0 2px 4px #020a128c
}

.fm-rail:before,
.fm-rail:after {
    content: "";
    position: absolute;
    top: 50%;
    width: 13px;
    height: 13px;
    border-radius: 50%;
    translate: 0 -50%;
    background: repeating-conic-gradient(from 10deg, rgba(255, 255, 255, .35) 0 12deg, transparent 12deg 36deg), radial-gradient(circle at 35% 30%, #fff, #cfd9e0 38%, #7d8d99 75%, #3f4c56);
    box-shadow: 0 1px 3px #020a1299
}

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

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

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

.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.2deg
    }
    to {
        rotate: 1.2deg
    }
}

.fm-chain {
    display: block;
    width: var(--chain-w);
    min-width: 10px;
    height: var(--chain-h);
    margin-bottom: calc(var(--lamp-w) * -.015);
    background-position: 50% 100%;
    background-size: 100% auto;
    background-repeat: repeat-y;
    filter: drop-shadow(0 2px 2px rgba(2, 10, 18, .5))
}

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

.fm-lamp:focus-visible {
    outline: 2px solid var(--moon);
    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;
    pointer-events: none
}

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

.fm-lit {
    opacity: 0
}

.fm-flicker {
    -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;
    background-color: #ffd6968c;
    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-halo {
    position: absolute;
    left: var(--flame-x, 50%);
    top: var(--flame-y, 55%);
    width: calc(var(--lamp-w) * 2.4);
    aspect-ratio: 1;
    translate: -50% -50%;
    border-radius: 50%;
    background: radial-gradient(closest-side, rgba(255, 226, 176, .4), rgba(255, 212, 150, .13) 38%, rgba(214, 228, 240, .05) 70%, 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 {
    margin-top: 12px;
    max-width: 100%
}

.fm-names>p {
    margin: 0;
    opacity: .5;
    transition: opacity .9s ease .25s, color .9s ease .25s, text-shadow .9s ease .25s
}

.fm-label {
    font: 700 clamp(10px, 2.7cqi, 13px)/1.3 "Cormorant Garamond", Georgia, serif;
    letter-spacing: .22em;
    text-transform: uppercase;
    color: var(--moon)
}

.fm-names>.fm-label {
    margin-bottom: 5px
}

.fm-parents {
    font: 500 clamp(17px, 4.8cqi, 24px)/1.3 "Cormorant Garamond", Georgia, serif;
    max-width: 11.5em;
    margin-inline: auto !important;
    color: var(--pearl);
    text-wrap: balance;
    text-shadow: 0 1px 2px rgba(4, 16, 28, .8)
}

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

.is-lit .fm-parents {
    color: #fffdf7;
    text-shadow: 0 0 14px rgba(255, 236, 205, .42), 0 0 4px rgba(210, 230, 246, .3), 0 1px 2px rgba(4, 16, 28, .85)
}

.fm-union {
    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>*,
.fm-blessing>* {
    margin: 0
}

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

.fm-couple {
    font: 400 calc(clamp(44px, 12.5cqi, 72px) * var(--fit, 1))/1.1 "Allura", cursive;
    text-wrap: balance
}

.fm-couple .pearl {
    display: inline-block;
    padding: 0 .3em .1em;
    filter: drop-shadow(0 0 12px rgba(190, 220, 245, .6)) drop-shadow(0 1.5px 1.5px rgba(4, 18, 32, .75))
}

.fm-couple i {
    font-style: normal;
    font-size: .62em
}

.fm-name {
    white-space: nowrap
}

.fm-couple.is-stacked .fm-name,
.fm-couple.is-stacked i {
    display: block
}

.fm-couple.is-stacked i {
    line-height: 1;
    margin: .02em 0 .04em
}

.fm-blessing {
    opacity: 0;
    transition: opacity 1.6s ease
}

.families.is-blessed .fm-blessing {
    opacity: 1
}

.fm-dua {
    margin-top: 8px !important;
    font: 400 clamp(20px, 6cqi, 30px)/1.9 "Amiri", serif;
    color: var(--pearl);
    text-wrap: balance;
    text-shadow: 0 0 12px rgba(180, 212, 238, .4), 0 1px 2px rgba(4, 16, 28, .8)
}

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

.fm-dua-ref {
    margin-top: 6px !important;
    font: 700 clamp(10px, 2.6cqi, 12px)/1.3 "Cormorant Garamond", Georgia, serif;
    letter-spacing: .22em;
    text-transform: uppercase;
    color: var(--moon)
}

.fm-hint {
    align-self: start;
    justify-self: center;
    margin: clamp(22px, 7cqi, 44px) 0 0;
    font: italic 500 clamp(15px, 4.3cqi, 19px)/1.3 "Cormorant Garamond", Georgia, serif;
    color: var(--moon);
    text-shadow: 0 0 8px rgba(5, 18, 30, .95), 0 1px 2px rgba(4, 16, 28, .9);
    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: .55
    }
    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: #cee4f8bf;
    stroke-width: 7;
    filter: url(#fmBlur)
}

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

.fm-bloom {
    position: absolute;
    left: 0;
    top: 0;
    width: 150px;
    height: 150px;
    margin: -75px 0 0 -75px;
    border-radius: 50%;
    background: radial-gradient(closest-side, rgba(255, 255, 255, .95), rgba(214, 232, 248, .5) 35%, rgba(170, 205, 235, .14) 65%, transparent);
    opacity: 0;
    pointer-events: none
}

@media(min-aspect-ratio:6/5) {
    html.is-tablet .families {
        --lamp-w: min(14cqi, 200px, 38svh * var(--lantern-r, .45));
        --gap: clamp(20px, 3cqi, 44px);
        --motif: clamp(300px, 30cqi, 400px)
    }
    html.is-tablet .fm-lamps {
        grid-template-columns: 1fr minmax(0, 1.8fr) 1fr;
        grid-template-areas: "a u b";
        max-width: 1080px;
        align-items: start
    }
    html.is-tablet .fm-union,
    html.is-tablet .fm-hint {
        margin-top: 0;
        align-self: center
    }
    html.is-tablet .fm-couple {
        font-size: calc(clamp(40px, 5.2cqi, 64px) * var(--fit, 1))
    }
    html.is-tablet .fm-rail {
        left: calc((100% - 2 * var(--gap)) / 7.6 - 30px);
        right: calc((100% - 2 * var(--gap)) / 7.6 - 30px)
    }
}

@media(prefers-reduced-motion:reduce) {
    .fm-side,
    .fm-rail,
    .fm-head,
    .fm-moon,
    .fm-shade,
    .fm-moonlight,
    .fm-union,
    .fm-blessing,
    .fm-names>p {
        transition: none
    }
    .fm-hang,
    .fm-hint,
    .fm-stars,
    .is-lit .fm-flicker {
        animation: none
    }
    .is-lit .fm-flicker {
        opacity: .35
    }
}