/*! © 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: true;
    initial-value: -20%;
}

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

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

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

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

.h-view,
.h-sun,
.h-river,
.h-petals {
    position: absolute;
    inset: 0;
    pointer-events: none
}

.h-view {
    background-position: center;
    background-size: 100% 100%;
    background-repeat: no-repeat
}

.h-sun {
    overflow: hidden;
    -webkit-mask-size: 100% 100%;
    mask-size: 100% 100%;
    mix-blend-mode: soft-light
}

.h-sun:before,
.h-sun:after {
    content: "";
    position: absolute
}

.h-sun:after {
    left: -34%;
    top: -24%;
    width: 68%;
    height: 48%;
    background: radial-gradient(closest-side, rgba(255, 238, 196, .75), rgba(255, 232, 186, .25) 55%, transparent 75%);
    transform: translate(17.6471%, 41.6667%);
    animation: h-sun 22s ease-in-out infinite alternate
}

.h-sun:before {
    left: -26%;
    top: -18%;
    width: 52%;
    height: 36%;
    background: radial-gradient(closest-side, rgba(255, 236, 192, .5), transparent 70%);
    transform: translate(169.2308%, 244.4444%);
    animation: h-sun-echo 22s ease-in-out infinite alternate
}

@keyframes h-sun {
    0% {
        transform: translate(8.8235%, 29.1667%)
    }
    to {
        transform: translate(138.2353%, 191.6667%)
    }
}

@keyframes h-sun-echo {
    0% {
        transform: translate(180.7692%, 254.4444%)
    }
    to {
        transform: translate(11.5385%, 124.4444%)
    }
}

.h-glint {
    position: absolute;
    width: 1.7%;
    aspect-ratio: 1;
    translate: -50% -50%;
    background: radial-gradient(closest-side, #fff, #fff0) center / 100% 10% no-repeat, radial-gradient(closest-side, #fff, #fff0) center / 10% 100% no-repeat, radial-gradient(closest-side, #fffdf0f2, #e6f8ff00) center / 38% 38% no-repeat;
    mix-blend-mode: screen;
    opacity: 0;
    animation: h-twinkle var(--d, 3.6s) ease-in-out var(--dl, 0s) infinite
}

@keyframes h-twinkle {
    0%,
    70%,
    to {
        opacity: 0;
        scale: .3
    }
    80% {
        opacity: .95;
        scale: 1
    }
    90% {
        opacity: .35;
        scale: .55
    }
}

.h-river.is-sparkling .h-glint {
    animation-duration: calc(var(--d, 3.6s) * .32)
}

.hero.is-away .h-glint,
.hero.is-away .h-sun:before,
.hero.is-away .h-sun:after {
    animation-play-state: paused
}

.h-petal {
    position: absolute;
    left: 0;
    top: 0;
    background-image: url(../assets/cover/petals.webp);
    background-repeat: no-repeat;
    pointer-events: none;
    will-change: transform, opacity
}

.h-words {
    position: absolute;
    left: var(--w-l);
    right: calc(100% - var(--w-r));
    top: var(--w-t);
    bottom: calc(100% - var(--w-b));
    container-type: size;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    text-align: center;
    color: var(--snow);
    --n: calc(min(23cqw, 37cqh) * var(--fit, 1))
}

.h-words>* {
    margin: 0;
    text-shadow: 0 0 .5em rgba(40, 92, 160, .55), 0 0 .14em rgba(30, 70, 130, .55)
}

.h-bis {
    margin-bottom: calc(var(--n) * .14);
    font: 400 calc(var(--n) * .42) / 1.5 Amiri, serif
}

.h-kicker {
    margin-bottom: calc(var(--n) * .06);
    font: 700 max(10px, calc(var(--n) * .165)) / 1.2 "Cormorant Garamond", Georgia, serif;
    letter-spacing: .28em;
    text-indent: .28em;
    text-transform: uppercase
}

.h-names {
    display: flex;
    align-items: baseline;
    justify-content: center;
    white-space: nowrap;
    font: 400 var(--n) / 1 Italianno, cursive;
    text-shadow: none
}

.h-name {
    position: relative;
    display: inline-block;
    padding: .06em .16em .16em;
    filter: drop-shadow(0 0 .14em rgba(60, 120, 190, .55)) drop-shadow(0 .02em .03em rgba(20, 60, 110, .7))
}

.h-name .h-ink {
    filter: none
}

.h-name>span {
    display: block
}

.h-ink {
    -webkit-mask-image: linear-gradient(90deg, #000 calc(var(--wipe) - 12%), transparent var(--wipe));
    mask-image: linear-gradient(90deg, #000 calc(var(--wipe) - 12%), transparent var(--wipe))
}

.h-pen {
    position: absolute;
    inset: 0;
    padding: inherit;
    background: linear-gradient(90deg, transparent calc(var(--wipe) - 9%), rgba(255, 252, 240, .95) calc(var(--wipe) - 2.5%), rgba(255, 228, 170, .8) calc(var(--wipe) - .5%), transparent var(--wipe));
    -webkit-background-clip: text;
    background-clip: text;
    color: transparent;
    filter: drop-shadow(0 0 .1em rgba(255, 240, 200, .95)) drop-shadow(0 0 .3em rgba(255, 220, 150, .6));
    opacity: 0
}

.h-amp {
    font-size: .76em;
    padding: 0 .06em .1em
}

.h-date {
    margin-top: calc(var(--n) * .08);
    font: italic 600 max(12px, calc(var(--n) * .25)) / 1.2 "Cormorant Garamond", Georgia, serif;
    letter-spacing: .04em
}

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

.h-breeze {
    position: absolute;
    left: 50%;
    bottom: max(16px, 3cqh);
    translate: -50% 0;
    padding: .7em 1.4em .64em;
    border: 0;
    border-radius: 99px;
    white-space: nowrap;
    font: 700 13px/1 Cormorant Garamond, Georgia, serif;
    letter-spacing: .2em;
    text-indent: .2em;
    text-transform: uppercase;
    color: var(--snow);
    background: #3a2010b8;
    box-shadow: 0 0 0 1px #fbfaf673;
    cursor: pointer;
    opacity: 0
}

.h-breeze:focus-visible {
    opacity: 1;
    outline: 2px solid var(--snow);
    outline-offset: 3px
}

@media(prefers-reduced-motion:reduce) {
    .h-sun:before,
    .h-sun:after,
    .h-glint {
        animation: none
    }
}