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

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

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

.hero {
    position: relative;
    height: 100vh;
    height: 100svh;
    min-height: 520px;
    overflow: hidden;
    container-type: size;
    background: var(--onyx);
    isolation: isolate;
    touch-action: pan-y;
    -webkit-tap-highlight-color: transparent
}

.h-scene {
    position: absolute;
    left: 50%;
    top: 50%;
    width: max(100cqw, 100cqh * var(--pic-r));
    height: max(100cqh, 100cqw / var(--pic-r));
    translate: -50% -50%
}

.h-dark,
.h-lit,
.h-light,
.h-lights,
.h-flames,
.h-throw,
.h-throw-push,
.h-sway,
.h-push,
.h-stars-push {
    position: absolute;
    inset: 0
}

.h-dark,
.h-lit,
.h-light {
    background: center / 100% 100% no-repeat
}

.h-light,
.h-lit,
.h-flames,
.h-stars {
    opacity: 0
}

.h-light {
    -webkit-mask-image: radial-gradient(var(--rx) var(--ry) at var(--x) var(--y), #000 38%, rgba(0, 0, 0, .55) 66%, transparent 100%);
    mask-image: radial-gradient(var(--rx) var(--ry) at var(--x) var(--y), #000 38%, rgba(0, 0, 0, .55) 66%, transparent 100%)
}

.hero.is-lit .h-light,
.hero.is-lit .h-lit,
.hero.is-lit .h-flames,
.hero.is-lit .h-stars {
    opacity: 1
}

.h-flame {
    position: absolute;
    left: var(--x);
    top: var(--y);
    width: var(--s);
    aspect-ratio: 1;
    translate: -50% -60%;
    border-radius: 50%;
    background: radial-gradient(circle, #ffe4a0cc, #ffb05052 38%, #ff963c00 70%);
    animation: h-flicker 2.3s ease-in-out infinite;
    pointer-events: none
}

.h-flame:nth-child(2n) {
    animation-duration: 1.7s;
    animation-delay: -.6s
}

.h-flame:nth-child(3n) {
    animation-duration: 2.9s;
    animation-delay: -1.3s
}

.h-flame:nth-child(5n) {
    animation-duration: 1.4s;
    animation-delay: -.2s
}

@keyframes h-flicker {
    0%,
    to {
        opacity: .75;
        scale: 1
    }
    23% {
        opacity: .5;
        scale: .92
    }
    41% {
        opacity: .9;
        scale: 1.06
    }
    67% {
        opacity: .6;
        scale: .96
    }
}

.h-throw,
.h-throw-push,
.h-sway,
.h-push,
.h-stars-push {
    transform-origin: var(--swing-x) var(--swing-y)
}

.h-throw {
    mix-blend-mode: screen
}

.h-lamp {
    position: absolute;
    left: var(--lamp-l);
    top: var(--lamp-t);
    width: var(--lamp-w);
    height: var(--lamp-h)
}

.h-lamp-art {
    position: absolute;
    inset: 0;
    background: center / 100% 100% no-repeat;
    filter: brightness(.3) saturate(.6)
}

.hero.is-lit .h-lamp-art {
    filter: none
}

.h-lamp-glow {
    position: absolute;
    left: var(--glow-x);
    top: var(--glow-y);
    width: calc(var(--lamp-w) * 1.7);
    aspect-ratio: 1;
    translate: -50% -50%;
    border-radius: 50%;
    background: radial-gradient(circle, #ffecbe8c, #ffbe6438 30%, #ffa04600 66%);
    opacity: 0;
    pointer-events: none
}

.hero.is-lit .h-lamp-glow {
    opacity: 1
}

.h-lamp-glow:before,
.h-lamp-glow:after {
    content: "";
    position: absolute;
    border-radius: 50%
}

.h-lamp-glow:before {
    inset: -80%;
    background: radial-gradient(closest-side, #ffc47633, #ffb05812 42%, #ffa04600 76%);
    animation: h-breathe 3.3s linear infinite
}

.h-lamp-glow:after {
    inset: 36%;
    background: radial-gradient(closest-side, #fff6de6b, #ffd68c29 55%, #ffbe6400);
    animation: h-tremble 1.9s ease-in-out infinite
}

.h-stars-push {
    animation: h-breathe 3.3s linear infinite
}

.h-stars {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    transform-origin: var(--glow-x) var(--glow-y);
    animation: h-tremble 2.3s ease-in-out infinite
}

@keyframes h-breathe {
    0%,
    to {
        opacity: 1
    }
    9% {
        opacity: .9
    }
    17% {
        opacity: .97
    }
    31% {
        opacity: .83
    }
    38% {
        opacity: .95
    }
    52% {
        opacity: 1
    }
    63% {
        opacity: .87
    }
    71% {
        opacity: .96
    }
    86% {
        opacity: .9
    }
}

@keyframes h-tremble {
    0%,
    to {
        scale: 1
    }
    27% {
        scale: 1.007 .998
    }
    55% {
        scale: .996 1.005
    }
    80% {
        scale: 1.004 1
    }
}

.h-words {
    position: absolute;
    left: calc(var(--in-l) + (var(--in-r) - var(--in-l)) * .06);
    right: calc(100% - var(--in-r) + (var(--in-r) - var(--in-l)) * .06);
    top: calc(var(--in-t) + (var(--in-b) - var(--in-t)) * .05);
    bottom: calc(100% - var(--in-b) + (var(--in-b) - var(--in-t)) * .05);
    container-type: size;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    text-align: center
}

.h-words>* {
    margin: 0
}

.h-bism {
    --bism-w: min(84cqw, 52cqh);
    font-family: Amiri, serif;
    font-size: calc(var(--bism-w) / 11.4);
    line-height: 1.6;
    white-space: nowrap;
    padding: 0 .3em;
    background: linear-gradient(180deg, #f8e6b2, #dcb766, #a8823f);
    -webkit-background-clip: text;
    background-clip: text;
    color: transparent;
    filter: drop-shadow(0 1px 1px rgba(0, 0, 0, .6))
}

.h-kicker {
    margin-top: min(1.6cqw, 1.1cqh) !important;
    font: 600 min(4.7cqw, 3.2cqh)/1.35 "Cormorant Garamond", Georgia, serif;
    letter-spacing: .24em;
    padding-left: .24em;
    text-transform: uppercase;
    white-space: nowrap;
    color: #e6d3a4;
    text-shadow: 0 1px 2px rgba(0, 0, 0, .6)
}

.h-names {
    margin: min(4cqw, 2.8cqh) 0 min(3cqw, 2cqh) !important;
    font: 400 1em/.94 Luxurious Script, cursive;
    width: 100%
}

.h-name,
.h-amp {
    display: block;
    width: fit-content;
    max-width: none;
    margin-inline: auto;
    padding: .06em .3em .16em;
    background: linear-gradient(100deg, transparent calc(var(--gleam) - 14%), rgba(255, 251, 236, .95) var(--gleam), transparent calc(var(--gleam) + 14%)), linear-gradient(180deg, rgba(255, 246, 220, .25), transparent 36%, transparent 62%, rgba(60, 34, 6, .3)), 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 .03em .02em rgba(0, 0, 0, .7)) drop-shadow(0 0 .12em rgba(0, 0, 0, .45));
    white-space: nowrap
}

.h-name {
    font-size: calc(min(30cqw, 19.5cqh) * var(--fit, 1))
}

.h-name.is-wrapped {
    white-space: normal;
    max-width: 100%;
    text-wrap: balance
}

.h-amp {
    font: italic 500 calc(min(11cqw, 7cqh) * var(--fit, 1)) / 1 "Cormorant Garamond", Georgia, serif;
    margin-block: -.1em -.06em
}

.h-line {
    max-width: 94cqw;
    font: italic 500 min(7cqw, 4.7cqh)/1.3 "Cormorant Garamond", Georgia, serif;
    color: #f3ead8eb;
    text-shadow: 0 1px 2px rgba(0, 0, 0, .6);
    text-wrap: balance
}

.h-urdu {
    margin-top: min(1.5cqw, 1cqh) !important;
    font: 400 min(5.8cqw, 3.8cqh)/1.95 "Noto Nastaliq Urdu", serif;
    color: #e6d3a4;
    text-shadow: 0 1px 2px rgba(0, 0, 0, .6);
    white-space: nowrap
}

html:not(.is-revealed) .h-words>:is(.h-bism, .h-kicker, .h-names, .h-line, .h-urdu) {
    opacity: 0
}

@media(prefers-reduced-motion:reduce) {
    .h-flame {
        animation: none;
        opacity: .7
    }
    .h-stars,
    .h-stars-push,
    .h-lamp-glow:before,
    .h-lamp-glow:after {
        animation: none
    }
}