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

.hero {
    position: relative;
    height: 100vh;
    height: 100svh;
    min-height: 600px;
    overflow: hidden;
    background: var(--paper)
}

.hero-stage {
    position: absolute;
    inset: 0;
    container: stage / size;
    overflow: hidden
}

.h-depth {
    position: absolute;
    inset: 0;
    pointer-events: none;
    will-change: transform
}

.hero.is-asleep .h-depth {
    will-change: auto
}

.hero img {
    user-select: none;
    -webkit-user-drag: none
}

.h-sky {
    inset: -14cqh -3cqw -3cqh;
    background: var(--paper) url(../assets/hero/sky.webp) 50% 0 / cover no-repeat
}

.hero-stage>* {
    --u: 1cqw;
    --pal-w: 80cqw;
    --dome: calc(var(--pal-w) * .95);
    --lan-w: 8.8cqw;
    --lan-x: 18.6cqw;
    --lan-cord: 16cqw;
    --words-top: 17.5cqw
}

.h-palace {
    position: absolute;
    left: calc(50cqw - var(--pal-w) / 2);
    width: var(--pal-w);
    aspect-ratio: 4 / 5;
    bottom: -1.5cqw;
    background: url(../assets/hero/palace.webp) 0 0 / 100% 100% no-repeat
}

.h-lantern {
    position: absolute;
    top: 3cqw;
    width: var(--lan-w)
}

.h-lantern-l {
    left: calc(var(--lan-x) - var(--lan-w) / 2)
}

.h-lantern-r {
    left: calc(100cqw - var(--lan-x) - var(--lan-w) / 2)
}

.h-swing {
    position: relative;
    padding-top: var(--lan-cord);
    transform-origin: 50% 0
}

.h-cord {
    position: absolute;
    left: 50%;
    top: 0;
    width: max(1px, .2cqw);
    height: calc(var(--lan-cord) + 1cqw);
    margin-left: max(-.5px, -.1cqw);
    background: linear-gradient(#b88a45, #9d6625)
}

@container stage (max-aspect-ratio: 1 / 2) {
    .hero-stage>* {
        --pal-w: 86cqw;
        --lan-w: 10cqw;
        --lan-x: 19.4cqw;
        --lan-cord: 22cqw;
        --words-top: 20.5cqw
    }
}

.h-swing img {
    width: 100%;
    position: relative
}

.h-glow {
    position: absolute;
    left: 50%;
    top: calc(21cqw + 58%);
    width: 44cqw;
    aspect-ratio: 1;
    translate: -50% -50%;
    border-radius: 50%;
    background: radial-gradient(closest-side, #ffc47680, #ffba6433 42%, #ffba6400);
    mix-blend-mode: multiply;
    pointer-events: none
}

.h-words {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    justify-content: flex-end;
    top: var(--words-top);
    bottom: calc(var(--dome) + 4.5cqw);
    left: 12cqw;
    right: 12cqw;
    text-align: center;
    color: var(--ink);
    pointer-events: auto
}

.h-words>* {
    margin: 0
}

.h-bismillah {
    --bism-w: 44cqw;
    font-family: Amiri, serif;
    font-size: calc(var(--bism-w) / 11.4);
    line-height: 1.5;
    white-space: nowrap;
    padding: 0 .2em;
    margin-bottom: auto !important;
    background: linear-gradient(105deg, transparent 40%, rgba(255, 246, 214, .95) 50%, transparent 60%) -120% 0 / 250% 100% no-repeat, linear-gradient(180deg, #c89b52, #a57a36 45%, #8a6127);
    -webkit-background-clip: text;
    background-clip: text;
    color: transparent;
    -webkit-text-stroke: .018em rgba(150, 106, 42, .85);
    filter: drop-shadow(0 .12cqw 0 rgba(255, 255, 255, .7)) drop-shadow(0 -.1cqw 0 rgba(90, 50, 10, .25))
}

.h-kicker {
    font: 600 2.25cqw/1.3 Cormorant Garamond, Georgia, serif;
    letter-spacing: .2em;
    padding-left: .2em;
    text-transform: uppercase;
    color: var(--ink-soft)
}

.h-names {
    display: flex;
    flex-direction: column;
    align-items: center;
    margin-top: 2.2cqw !important;
    font-weight: 400;
    line-height: 1
}

.h-name {
    --name: 13cqw;
    font-family: Pinyon Script, cursive;
    font-size: var(--name);
    line-height: 1.12;
    padding: 0 3cqw;
    color: var(--ink);
    text-shadow: 0 .16cqw 0 rgba(255, 255, 255, .75), 0 -.08cqw 0 rgba(60, 8, 20, .28)
}

.h-name-1 {
    translate: -3cqw 0
}

.h-name-2 {
    translate: 3cqw 0
}

@container stage (max-aspect-ratio: 1 / 2) {
    .h-name {
        --name: 14.5cqw
    }
    .h-bismillah {
        --bism-w: 49cqw
    }
    .h-kicker {
        font-size: 2.6cqw
    }
}

.h-weds {
    margin: -.6cqw 0 -.4cqw;
    font: italic 500 4.4cqw/1 Cormorant Garamond, Georgia, serif;
    color: var(--gold);
    letter-spacing: .04em
}

.h-divider {
    width: 40cqw;
    margin-top: 2.4cqw !important
}

.h-date {
    display: grid;
    grid-template-columns: 1fr auto 1fr;
    grid-template-rows: auto auto;
    align-items: center;
    column-gap: 3.2cqw;
    margin-top: 1.6cqw !important;
    font-family: Cormorant Garamond, Georgia, serif;
    color: var(--ink)
}

.h-date-day,
.h-date-month {
    font-weight: 600;
    font-size: 2.7cqw;
    letter-spacing: .26em;
    text-transform: uppercase;
    padding: 1.1cqw 0;
    border-block: 1px solid rgba(169, 128, 63, .55)
}

.h-date-day {
    text-align: right;
    padding-right: .5em
}

.h-date-month {
    text-align: left;
    padding-left: .5em
}

.h-date-num {
    font-weight: 500;
    font-size: 9.5cqw;
    line-height: .9
}

.h-date-year {
    grid-column: 1 / -1;
    margin-top: 1.2cqw;
    font-weight: 600;
    font-size: 2.7cqw;
    letter-spacing: .5em;
    padding-left: .5em
}

.h-arch {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    aspect-ratio: 1080 / 1910;
    background: url(../assets/hero/arch.webp) 0 0 / 100% 100% no-repeat;
    filter: drop-shadow(0 1.2cqw 1.8cqw rgba(92, 40, 30, .28))
}

.h-roses {
    position: absolute;
    bottom: -3cqw;
    width: 58cqw;
    filter: drop-shadow(0 1cqw 1.6cqw rgba(92, 40, 30, .3))
}

.h-roses img {
    width: 100%
}

.h-roses-l {
    left: -4cqw;
    transform-origin: 0 100%
}

.h-roses-r {
    right: -4cqw;
    transform-origin: 100% 100%
}

.h-petals {
    overflow: hidden
}

.h-petal {
    position: absolute;
    top: -8cqw;
    left: var(--x);
    width: var(--s);
    animation: petal-fall var(--t) linear var(--d) infinite;
    opacity: 0
}

.h-petal img {
    width: 100%;
    animation: petal-flutter var(--f) ease-in-out var(--d) infinite alternate;
    filter: drop-shadow(0 .6cqw .6cqw rgba(92, 40, 30, .22))
}

@keyframes petal-fall {
    0% {
        transform: translateZ(0) rotate(0);
        opacity: 0
    }
    6% {
        opacity: .95
    }
    50% {
        transform: translate3d(var(--dx), 60cqh, 0) rotate(calc(var(--r) * .5))
    }
    90% {
        opacity: .95
    }
    to {
        transform: translate3d(calc(var(--dx) * -.4), 118cqh, 0) rotate(var(--r));
        opacity: 0
    }
}

@keyframes petal-flutter {
    0% {
        transform: rotateX(0) rotateY(0) translate(0)
    }
    50% {
        transform: rotateX(55deg) rotateY(-25deg) translate(3cqw)
    }
    to {
        transform: rotateX(-30deg) rotateY(40deg) translate(-2cqw)
    }
}

.h-twinkle {
    position: absolute;
    left: var(--x);
    top: var(--y);
    width: var(--s);
    aspect-ratio: 1;
    background: radial-gradient(closest-side, rgba(255, 236, 190, 1), rgba(214, 170, 90, .55) 45%, transparent);
    clip-path: polygon(50% 0, 58% 42%, 100% 50%, 58% 58%, 50% 100%, 42% 58%, 0 50%, 42% 42%);
    opacity: 0;
    animation: twinkle var(--t) ease-in-out var(--d) infinite
}

@keyframes twinkle {
    0%,
    to {
        opacity: 0;
        transform: scale(.4) rotate(0)
    }
    45% {
        opacity: .9;
        transform: scale(1) rotate(45deg)
    }
    60% {
        opacity: .5
    }
}

.h-scroll {
    position: absolute;
    left: 50%;
    bottom: max(3.2cqw, env(safe-area-inset-bottom));
    translate: -50% 0;
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 1.4cqw;
    padding: 1.6cqw 3cqw;
    text-decoration: none;
    color: var(--ink);
    font: 600 2.3cqw/1 Cormorant Garamond, Georgia, serif;
    letter-spacing: .32em;
    padding-left: calc(3cqw + .32em);
    text-transform: uppercase;
    -webkit-tap-highlight-color: transparent
}

.h-scroll-label {
    text-shadow: 0 0 2cqw rgba(246, 238, 225, .95), 0 0 .6cqw rgba(246, 238, 225, 1)
}

.h-scroll-line {
    position: relative;
    width: 1px;
    height: 7cqw;
    overflow: hidden;
    background: #5e14242e
}

.h-scroll-line:after {
    content: "";
    position: absolute;
    inset: 0;
    background: linear-gradient(transparent, var(--ink));
    animation: scroll-drip 2.2s cubic-bezier(.6, 0, .4, 1) infinite
}

@keyframes scroll-drip {
    0% {
        transform: translateY(-100%)
    }
    to {
        transform: translateY(100%)
    }
}

@container stage (min-aspect-ratio: 5 / 8) {
    .hero-stage>* {
        --u: min(1cqw, .75cqh);
        --pal-w: min(66cqw, 43.5cqh);
        --lan-w: 8cqw;
        --lan-x: 18.4cqw;
        --lan-cord: 15cqw;
        --words-top: 14cqw
    }
    .h-sky {
        background-image: url(../assets/hero/sky-lg.webp)
    }
    .h-palace {
        background-image: url(../assets/hero/palace-lg.webp)
    }
    .h-arch {
        aspect-ratio: 1800 / 2404;
        background-image: url(../assets/hero/arch-tab.webp)
    }
    .h-glow {
        width: calc(var(--lan-w) * 5);
        top: calc(var(--lan-cord) + var(--lan-w) * .57 + 58%)
    }
    .h-words {
        bottom: calc(var(--dome) + 4 * var(--u));
        left: 13cqw;
        right: 13cqw
    }
    .h-bismillah {
        --bism-w: calc(36 * var(--u))
    }
    .h-kicker {
        font-size: calc(2 * var(--u))
    }
    .h-names {
        margin-top: calc(1.8 * var(--u)) !important
    }
    .h-name {
        --name: calc(10.4 * var(--u));
        padding: 0 calc(2.4 * var(--u));
        text-shadow: 0 .012em 0 rgba(255, 255, 255, .75), 0 -.006em 0 rgba(60, 8, 20, .28)
    }
    .h-name-1 {
        translate: calc(-2.4 * var(--u)) 0
    }
    .h-name-2 {
        translate: calc(2.4 * var(--u)) 0
    }
    .h-weds {
        margin: calc(-.5 * var(--u)) 0 calc(-.3 * var(--u));
        font-size: calc(3.5 * var(--u))
    }
    .h-divider {
        width: calc(34 * var(--u));
        margin-top: calc(2 * var(--u)) !important
    }
    .h-date {
        column-gap: calc(2.6 * var(--u));
        margin-top: calc(1.3 * var(--u)) !important
    }
    .h-date-day,
    .h-date-month {
        font-size: calc(2.2 * var(--u));
        padding: calc(.9 * var(--u)) 0
    }
    .h-date-num {
        font-size: calc(7.8 * var(--u))
    }
    .h-date-year {
        font-size: calc(2.2 * var(--u));
        margin-top: calc(1 * var(--u))
    }
    .h-roses {
        width: 46cqw
    }
    .h-scroll {
        bottom: max(calc(2.6 * var(--u)), env(safe-area-inset-bottom));
        gap: calc(1.1 * var(--u));
        padding: calc(1.2 * var(--u)) calc(2.4 * var(--u));
        padding-left: calc(2.4 * var(--u) + .32em);
        font-size: calc(1.8 * var(--u))
    }
    .h-scroll-line {
        height: calc(5.6 * var(--u))
    }
}

@container stage (min-aspect-ratio: 17 / 20) {
    .hero-stage>* {
        --pal-w: min(66cqw, 38cqh);
        --words-top: 12.5cqw
    }
}

@container stage (min-aspect-ratio: 6 / 5) {
    .hero-stage>* {
        --u: min(1cqw, 1.3333cqh);
        --pal-w: calc(86 * var(--u));
        --dome: calc(var(--pal-w) / 2.585);
        --lan-w: calc(5.4 * var(--u));
        --lan-x: 17cqw;
        --lan-cord: 7cqw;
        --words-top: 6.5cqw
    }
    .h-sky {
        background-image: url(../assets/hero/sky-wide.webp)
    }
    .h-palace {
        aspect-ratio: 2200 / 851;
        bottom: calc(-1 * var(--u));
        background-image: url(../assets/hero/palace-wide.webp)
    }
    .h-arch {
        aspect-ratio: 3 / 2;
        background-image: url(../assets/hero/arch-wide.webp)
    }
    .h-glow {
        width: calc(var(--lan-w) * 5);
        top: calc(var(--lan-cord) + var(--lan-w) * .57 + 58%)
    }
    .h-words {
        bottom: calc(var(--dome) + 3 * var(--u));
        left: 14cqw;
        right: 14cqw
    }
    .h-bismillah {
        --bism-w: calc(26 * var(--u))
    }
    .h-kicker {
        font-size: calc(1.4 * var(--u))
    }
    .h-names {
        flex-direction: row;
        align-items: baseline;
        justify-content: center;
        margin-top: calc(1 * var(--u)) !important
    }
    .h-name {
        --name: calc(7.8 * var(--u));
        padding: 0 calc(1.4 * var(--u));
        text-shadow: 0 .012em 0 rgba(255, 255, 255, .75), 0 -.006em 0 rgba(60, 8, 20, .28)
    }
    .h-name-1,
    .h-name-2 {
        translate: none
    }
    .h-weds {
        margin: 0 calc(.6 * var(--u));
        font-size: calc(2.9 * var(--u))
    }
    .h-divider {
        width: calc(24 * var(--u));
        margin-top: calc(1 * var(--u)) !important
    }
    .h-date {
        column-gap: calc(2.2 * var(--u));
        margin-top: calc(1 * var(--u)) !important
    }
    .h-date-day,
    .h-date-month {
        font-size: calc(1.55 * var(--u));
        padding: calc(.7 * var(--u)) 0
    }
    .h-date-num {
        font-size: calc(5.4 * var(--u))
    }
    .h-date-year {
        font-size: calc(1.55 * var(--u));
        margin-top: calc(.8 * var(--u))
    }
    .h-roses {
        width: calc(36 * var(--u));
        bottom: calc(-2 * var(--u))
    }
    .h-roses-l {
        left: -2.5cqw
    }
    .h-roses-r {
        right: -2.5cqw
    }
    .h-scroll {
        bottom: max(calc(1.6 * var(--u)), env(safe-area-inset-bottom));
        gap: calc(.8 * var(--u));
        padding: calc(.9 * var(--u)) calc(1.8 * var(--u));
        padding-left: calc(1.8 * var(--u) + .32em);
        font-size: calc(1.3 * var(--u))
    }
    .h-scroll-line {
        height: calc(4 * var(--u))
    }
}

html:not(.is-revealed) .h-petal,
html:not(.is-revealed) .h-twinkle,
html:not(.is-revealed) .h-swing,
html:not(.is-revealed) .h-glow,
html:not(.is-revealed) .h-bismillah,
html:not(.is-revealed) .h-scroll-line:after {
    animation-play-state: paused
}

.h-lantern-l .h-swing {
    animation: sway-l 6.4s ease-in-out 1.6s infinite
}

.h-lantern-r .h-swing {
    animation: sway-r 7.3s ease-in-out 1.9s infinite
}

@keyframes sway-l {
    0%,
    to {
        rotate: 0deg
    }
    25% {
        rotate: 1.6deg
    }
    75% {
        rotate: -1.3deg
    }
}

@keyframes sway-r {
    0%,
    to {
        rotate: 0deg
    }
    30% {
        rotate: -1.4deg
    }
    70% {
        rotate: 1.7deg
    }
}

.h-glow {
    animation: flicker 3.1s linear infinite
}

.h-lantern-r .h-glow {
    animation-duration: 3.7s;
    animation-delay: -1.2s
}

@keyframes flicker {
    0%,
    to {
        opacity: .85
    }
    8% {
        opacity: 1
    }
    14% {
        opacity: .78
    }
    22% {
        opacity: .95
    }
    37% {
        opacity: .82
    }
    45% {
        opacity: 1
    }
    61% {
        opacity: .88
    }
    70% {
        opacity: .74
    }
    78% {
        opacity: .96
    }
    90% {
        opacity: .84
    }
}

@media(prefers-reduced-motion:reduce) {
    .h-petal,
    .h-twinkle,
    .h-swing,
    .h-glow,
    .h-bismillah,
    .h-scroll-line:after {
        animation: none !important
    }
    .h-petal,
    .h-twinkle {
        display: none
    }
}