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

html.is-shut,
html.is-shut body {
    overflow: hidden
}

html.is-loading .card,
html.is-loading .gate-stage {
    opacity: 0
}

.gate {
    position: fixed;
    inset: 0;
    z-index: 50;
    touch-action: manipulation;
    -webkit-tap-highlight-color: transparent;
    -webkit-user-select: none;
    user-select: none
}

.gate[hidden] {
    display: none
}

.gate-stage {
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    margin-inline: auto;
    width: var(--card-w);
    height: 100vh;
    height: 100svh;
    min-height: 420px;
    overflow: hidden;
    container-type: size;
    transition: opacity .9s ease
}

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

.g-blur,
.g-frame,
.g-sun,
.g-swing,
.g-petals {
    position: absolute;
    inset: 0;
    pointer-events: none
}

.g-blur,
.g-frame {
    background-position: center;
    background-size: 100% 100%;
    background-repeat: no-repeat
}

.g-blur {
    filter: blur(14px);
    opacity: 0;
    transition: opacity .6s ease
}

html.is-loading .g-blur {
    opacity: 1
}

.g-light {
    position: absolute;
    left: var(--gap-x);
    top: var(--top);
    height: calc(var(--foot) - var(--top));
    width: max(var(--gap-w), 3px);
    translate: -50% 0;
    background: linear-gradient(90deg, #fffaee00, #fffdf6 30%, #fffef9, #fffdf6 70%, #fffaee00);
    box-shadow: 0 0 6px 2px #fff6dee6;
    pointer-events: none
}

.g-morning {
    position: absolute;
    left: var(--leaf-l-x);
    right: calc(100% - var(--leaf-r-x) - var(--leaf-r-w));
    top: var(--top);
    height: calc(var(--foot) - var(--top));
    background: radial-gradient(ellipse 34% 70% at var(--gap-in, 50%) 46%, #fffefa, rgba(255, 252, 242, .92) 42%, rgba(255, 248, 232, .7) 100%);
    transform-origin: var(--gap-in, 50%) 50%;
    opacity: 0;
    pointer-events: none
}

.g-shimmer {
    position: absolute;
    left: var(--gap-x);
    top: var(--top);
    height: calc(var(--foot) - var(--top));
    width: calc(var(--gap-w) * 4 + 6px);
    translate: -50% 0;
    overflow: hidden;
    background: linear-gradient(#fff6e20f, #fff6e22e 45%, #fff6e20f);
    -webkit-mask: linear-gradient(90deg, transparent, #000 40%, #000 60%, transparent);
    mask: linear-gradient(90deg, transparent, #000 40%, #000 60%, transparent);
    mix-blend-mode: screen;
    pointer-events: none;
    animation: kh-breathe 4.6s ease-in-out infinite
}

.g-shimmer:before {
    content: "";
    position: absolute;
    left: 0;
    top: 0;
    width: 100%;
    height: 30%;
    background: linear-gradient(#fffcf000, #fffcf099 50%, #fffcf000);
    transform: translateY(-93.3333%);
    animation: kh-shimmer 7s cubic-bezier(.45, 0, .55, 1) 1.2s infinite
}

@keyframes kh-shimmer {
    0% {
        transform: translateY(-93.3333%)
    }
    62%,
    to {
        transform: translateY(326.6667%)
    }
}

@keyframes kh-breathe {
    0%,
    to {
        opacity: .75
    }
    50% {
        opacity: 1
    }
}

.g-swing {
    perspective: calc(max(100cqw, 100cqh * var(--pic-r))*1.7);
    perspective-origin: var(--gap-x) 46%
}

.g-leaf,
.g-hang {
    position: absolute;
    top: var(--top);
    height: calc(var(--foot) - var(--top));
    backface-visibility: hidden;
    -webkit-backface-visibility: hidden;
    pointer-events: none
}

.g-leaf-l,
.g-hang-l {
    left: var(--leaf-l-x);
    width: var(--leaf-l-w);
    transform-origin: 0 50%
}

.g-leaf-r,
.g-hang-r {
    left: var(--leaf-r-x);
    width: var(--leaf-r-w);
    transform-origin: 100% 50%
}

.g-art,
.g-shade {
    position: absolute;
    inset: 0
}

.g-art {
    background-position: 0 0;
    background-size: 100% 100%;
    background-repeat: no-repeat
}

.g-shade {
    background: linear-gradient(90deg, #1e1008e6, #1e1008b3);
    opacity: 0
}

.g-leaf-l .g-shade {
    background: linear-gradient(270deg, #1e1008e6, #1e1008a6)
}

.g-bar,
.g-staple,
.g-ring {
    position: absolute;
    background-position: center;
    background-size: 100% 100%;
    background-repeat: no-repeat;
    pointer-events: none;
    filter: drop-shadow(0 .25cqh .3cqh rgba(30, 14, 4, .45))
}

.g-bar {
    left: var(--bar-x);
    top: var(--bar-y);
    width: var(--bar-w);
    height: var(--bar-h);
    transform-origin: var(--pin-x) var(--pin-y)
}

.g-staple {
    left: var(--staple-x);
    top: var(--staple-y);
    width: var(--staple-w);
    height: var(--staple-h)
}

.g-ring {
    left: var(--ring-x);
    top: var(--ring-y);
    width: var(--ring-w);
    height: var(--ring-h);
    transform-origin: var(--hang-x) var(--hang-y)
}

.g-latch {
    position: absolute;
    left: var(--btn-x);
    top: var(--btn-y);
    width: var(--btn-w);
    height: var(--btn-h);
    margin: 0;
    padding: 0;
    border: 0;
    background: none;
    cursor: pointer;
    pointer-events: auto;
    outline: none;
    -webkit-tap-highlight-color: transparent
}

.g-latch:before {
    content: "";
    position: absolute;
    inset: -18% -10%;
    min-width: 56px;
    min-height: 56px
}

.g-latch:after {
    content: "";
    position: absolute;
    left: 50%;
    top: 50%;
    width: 150%;
    aspect-ratio: 1;
    translate: -50% -50%;
    border-radius: 50%;
    background: radial-gradient(closest-side, #fff4d600 58%, #fff4d680 70%, #fff4d600);
    opacity: 0;
    animation: kh-call 3.4s cubic-bezier(.2, .6, .3, 1) 1.6s infinite
}

@keyframes kh-call {
    0% {
        opacity: 0;
        scale: .55
    }
    25% {
        opacity: .9
    }
    70%,
    to {
        opacity: 0;
        scale: 1.05
    }
}

.g-latch:focus-visible:after {
    animation: none;
    opacity: 1;
    scale: .9
}

.gate.is-nudged .g-latch:after {
    animation: kh-call .9s cubic-bezier(.2, .6, .3, 1) 2
}

.g-sun {
    overflow: hidden;
    background: radial-gradient(ellipse 50% 60% at 85% 80%, rgba(40, 22, 10, .35), transparent 70%);
    mix-blend-mode: soft-light
}

.g-sun:before {
    content: "";
    position: absolute;
    left: -60%;
    top: -40%;
    width: 120%;
    height: 80%;
    background: radial-gradient(closest-side, rgba(255, 238, 200, .5), transparent 70%);
    transform: translate(18.3333%, 22.5%);
    animation: kh-sun 16s ease-in-out infinite alternate
}

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

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

@keyframes kh-sun {
    0% {
        transform: translate(11.6667%, 15%)
    }
    to {
        transform: translate(38.3333%, 37.5%)
    }
}

.g-branch {
    position: absolute;
    left: var(--branch-x);
    top: var(--branch-y);
    width: var(--branch-w);
    height: var(--branch-h);
    pointer-events: none
}

.g-branch i {
    position: absolute;
    inset: 0;
    background-position: center;
    background-size: 100% 100%;
    background-repeat: no-repeat;
    transform-origin: 0 var(--branch-py);
    animation: kh-sway 6.4s ease-in-out infinite alternate;
    filter: drop-shadow(0 .4cqh .5cqh rgba(40, 20, 8, .28))
}

@keyframes kh-sway {
    0% {
        rotate: -.7deg
    }
    45% {
        rotate: .5deg
    }
    to {
        rotate: 1deg
    }
}

.g-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
}

.g-hint {
    position: absolute;
    left: var(--gap-x);
    top: var(--hint-y);
    translate: -50% -50%;
    width: max-content;
    max-width: 86cqw;
    margin: 0;
    padding: .85em 1.6em .85em calc(1.6em + .28em);
    border-radius: 999px;
    background: #3a201080;
    box-shadow: 0 0 0 1px #fbfaf652 inset, 0 4px 18px #28140840;
    -webkit-backdrop-filter: blur(5px);
    backdrop-filter: blur(5px);
    color: var(--snow);
    font: 700 clamp(10.5px, min(3cqw, 1.7cqh), 14px)/1 "Cormorant Garamond", Georgia, serif;
    letter-spacing: .28em;
    text-transform: uppercase;
    text-shadow: 0 1px 6px rgba(40, 20, 8, .6);
    white-space: nowrap;
    pointer-events: none;
    animation: kh-hint 3.2s ease-in-out infinite
}

@keyframes kh-hint {
    0%,
    to {
        opacity: .8
    }
    50% {
        opacity: 1
    }
}

@keyframes kh-flash {
    0%,
    to {
        background-color: #3a201080
    }
    30% {
        background-color: #73442acc
    }
}

.gate.is-nudged .g-hint {
    animation: kh-flash .9s ease 2
}

.g-flood {
    position: absolute;
    inset: 0;
    background: radial-gradient(ellipse 70% 80% at 50% 46%, #fffefa, #fffbf0d9 45%, #fff7e680);
    opacity: 0;
    pointer-events: none
}

.sound-toggle {
    position: absolute;
    top: max(14px, env(safe-area-inset-top));
    right: calc((100% - var(--card-w)) / 2 + 14px);
    width: 40px;
    height: 40px;
    padding: 0;
    border: 0;
    border-radius: 50%;
    background: #3a201080;
    box-shadow: 0 0 0 1px #fbfaf666;
    -webkit-backdrop-filter: blur(5px);
    backdrop-filter: blur(5px);
    cursor: pointer
}

.sound-toggle svg {
    width: 22px;
    margin: 9px;
    fill: none;
    stroke: var(--snow);
    stroke-width: 1.6;
    stroke-linecap: round;
    stroke-linejoin: round
}

.sound-toggle .spk {
    fill: var(--snow)
}

.sound-toggle .mute,
.sound-toggle[aria-pressed=false] .wave {
    display: none
}

.sound-toggle[aria-pressed=false] .mute {
    display: inline
}

.sound-toggle:focus-visible {
    outline: 2px solid var(--snow);
    outline-offset: 2px
}

html.is-arriving .gate-stage {
    animation: kh-arrive 1.2s ease-out both
}

html.is-arriving .g-hint {
    animation: kh-fade-in .9s ease .7s both, kh-hint 3.2s ease-in-out 1.6s infinite
}

@keyframes kh-arrive {
    0% {
        opacity: 0;
        scale: 1.03;
        filter: brightness(.6)
    }
    to {
        opacity: 1;
        scale: 1;
        filter: none
    }
}

@keyframes kh-fade-in {
    0% {
        opacity: 0
    }
}

.gate.is-opening .g-latch {
    cursor: default
}

.gate.is-opening .g-latch:after,
.gate.is-opening .g-hint,
.gate.is-opening .g-shimmer,
.gate.is-opening .g-shimmer:before {
    animation: none
}

@media(prefers-reduced-motion:reduce) {
    .g-shimmer,
    .g-shimmer:before,
    .g-sun:before,
    .g-branch i,
    .g-hint,
    .g-latch:after {
        animation: none !important
    }
}