/*! © 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%;
}

.hero {
    position: relative;
    height: 100vh;
    height: 100svh;
    min-height: 420px;
    overflow: hidden;
    container-type: size;
    background: var(--pearl);
    isolation: isolate;
    -webkit-tap-highlight-color: transparent
}

.h-scene {
    position: absolute;
    left: 50%;
    top: 50%;
    width: max(100cqw, 100cqh * var(--pav-r));
    height: max(100cqh, 100cqw / var(--pav-r));
    translate: -50% -50%;
    transform-origin: 50% calc(var(--arch-t) / 2 + var(--arch-b) / 2);
    touch-action: manipulation
}

.h-pav,
.h-roses,
.h-petals {
    position: absolute;
    inset: 0
}

.h-pav {
    background-color: var(--pearl);
    background-position: center;
    background-size: 100% 100%;
    background-repeat: no-repeat
}

.h-pav:after {
    content: "";
    position: absolute;
    inset: 0;
    background: radial-gradient(ellipse 60% 42% at 50% 18%, rgba(255, 252, 244, .55), transparent 70%);
    mix-blend-mode: soft-light;
    animation: h-breathe 9s ease-in-out infinite alternate
}

@keyframes h-breathe {
    0% {
        opacity: .4
    }
    to {
        opacity: 1
    }
}

.h-roses,
.h-petals {
    pointer-events: none
}

.h-rose {
    position: absolute;
    width: var(--rose-w);
    aspect-ratio: 1;
    translate: -50% -42%;
    filter: saturate(.78) brightness(1.04) sepia(.08) drop-shadow(0 2px 3px rgba(110, 60, 55, .2));
    -webkit-mask-image: linear-gradient(#000 58%, transparent 76%);
    mask-image: linear-gradient(#000 58%, transparent 76%)
}

.h-rose img {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    opacity: 0
}

.h-rose img:first-child {
    opacity: 1
}

.h-petal {
    position: absolute;
    left: 0;
    top: 0;
    perspective: 300px
}

.h-petal b {
    display: block;
    transform-style: preserve-3d
}

.h-petal img {
    width: 100%;
    height: auto;
    filter: drop-shadow(0 2px 3px rgba(120, 70, 70, .16))
}

.h-words {
    position: absolute;
    left: calc(var(--arch-l) + (var(--arch-r) - var(--arch-l)) * .04);
    right: calc(100% - var(--arch-r) + (var(--arch-r) - var(--arch-l)) * .04);
    top: calc(var(--arch-t) + (var(--arch-s) - var(--arch-t)) * .3);
    bottom: calc(100% - var(--arch-b) + (var(--arch-b) - var(--arch-s)) * .06);
    container-type: size;
    display: flex;
    flex-direction: column;
    align-items: center;
    text-align: center;
    pointer-events: none
}

.h-words>* {
    margin: 0
}

.h-bism {
    --bism-w: min(82cqw, 44cqh);
    font-family: Amiri, serif;
    font-size: calc(var(--bism-w) / 11.4);
    line-height: 1.7;
    white-space: nowrap;
    padding: 0 .3em;
    background: linear-gradient(180deg, #a3646a 0%, var(--rose-ink) 55%, #5e2631 100%);
    -webkit-background-clip: text;
    background-clip: text;
    color: transparent
}

.h-kicker {
    margin-top: auto !important;
    padding-top: .5em;
    font: 600 min(6.2cqw, 3.4cqh)/1.35 "Cormorant Garamond", Georgia, serif;
    letter-spacing: .2em;
    padding-left: .2em;
    text-transform: uppercase;
    color: var(--sage-ink)
}

.h-names {
    margin: min(3cqw, 1.8cqh) 0 min(2cqw, 1.2cqh) !important;
    font: 700 1em/.9 Corinthia, cursive;
    width: 100%
}

.h-name,
.h-amp {
    display: block;
    width: fit-content;
    max-width: none;
    margin-inline: auto;
    padding: .08em .3em .16em;
    background: linear-gradient(180deg, rgba(255, 246, 238, .16), transparent 38%, transparent 58%, rgba(60, 18, 26, .5)), linear-gradient(#76283473, #76283473), url(../assets/hero/foil.webp) 0 0 / 3.4em 3.4em;
    -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 .02em .02em rgba(90, 40, 40, .35));
    white-space: nowrap
}

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

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

.h-amp {
    font-size: min(22cqw, 10cqh);
    margin-block: -.2em -.16em
}

.h-line {
    margin-bottom: auto !important;
    max-width: 94cqw;
    font: italic 500 min(8.6cqw, 4.8cqh)/1.3 "Cormorant Garamond", Georgia, serif;
    color: var(--ink-soft);
    text-wrap: balance
}

html:not(.is-revealed) .h-words>* {
    opacity: 0
}

.h-scroll {
    position: absolute;
    left: 50%;
    bottom: max(16px, 3cqh);
    translate: -50% 0;
    margin: 0;
    width: 30px;
    height: 30px;
    display: grid;
    place-items: center;
    opacity: 0;
    pointer-events: none;
    transition: opacity .6s
}

.h-scroll i {
    width: 11px;
    height: 11px;
    border-right: 1.5px solid var(--rose);
    border-bottom: 1.5px solid var(--rose);
    rotate: 45deg;
    filter: drop-shadow(0 1px 1px rgba(255, 255, 255, .8));
    animation: h-bob 2.4s ease-in-out infinite
}

html.is-open .h-scroll {
    opacity: .85;
    transition: opacity 1.2s 2.2s
}

@keyframes h-bob {
    0%,
    to {
        translate: 0 -3px
    }
    50% {
        translate: 0 3px
    }
}

@media(prefers-reduced-motion:reduce) {
    .h-scroll i,
    .h-pav:after {
        animation: none
    }
}