/*! © 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: none;
    -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;
    cursor: pointer;
    background: var(--night-deep);
    transition: opacity .9s ease
}

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

.c-garden,
.c-still,
.c-frame,
.c-curtain,
.c-shine,
.c-sparks {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    pointer-events: none
}

.c-garden,
.c-still,
.c-frame {
    background-position: center;
    background-size: 100% 100%;
    background-repeat: no-repeat
}

.c-frame {
    -webkit-mask-size: 100% 100%;
    mask-size: 100% 100%
}

html.is-revealed .gate-stage {
    background: transparent
}

html.is-revealed .c-garden,
.gate.is-live .c-still {
    visibility: hidden
}

.c-cloth[hidden] {
    display: none
}

.c-flame {
    position: absolute;
    width: 8%;
    aspect-ratio: 1;
    translate: -50% -56%;
    border-radius: 50%;
    background: radial-gradient(circle, rgba(255, 226, 160, .7) 0%, rgba(255, 186, 90, .3) 26%, rgba(255, 160, 60, .1) 50%, transparent 72%);
    mix-blend-mode: screen;
    pointer-events: none;
    animation: mr-flicker 2.3s ease-in-out infinite
}

.c-flame:nth-of-type(2) {
    animation-duration: 1.9s;
    animation-delay: -.8s
}

@keyframes mr-flicker {
    0%,
    to {
        opacity: .82;
        scale: 1
    }
    12% {
        opacity: .98;
        scale: 1.06
    }
    23% {
        opacity: .74;
        scale: .95
    }
    41% {
        opacity: .92;
        scale: 1.03
    }
    58% {
        opacity: .7;
        scale: .96
    }
    71% {
        opacity: 1;
        scale: 1.07
    }
    86% {
        opacity: .8;
        scale: .98
    }
}

.c-shine {
    background: radial-gradient(circle calc(var(--gr, 30cqmax) * .45) at var(--gx, 50%) var(--gy, 40%), rgba(236, 244, 255, .3), rgba(220, 234, 252, .12) 45%, transparent 100%), radial-gradient(circle var(--gr, 30cqmax) at var(--gx, 50%) var(--gy, 40%), rgba(214, 230, 250, .14), transparent 100%);
    mix-blend-mode: soft-light
}

.c-sparks {
    mix-blend-mode: normal
}

.c-hint {
    position: absolute;
    left: 50%;
    top: var(--hint-y, 49%);
    translate: -50% -50%;
    margin: 0;
    padding: 1.5em 3.2em;
    border: 0;
    border-radius: 50%;
    background: radial-gradient(closest-side, rgba(8, 26, 42, .62), rgba(8, 26, 42, .34) 58%, transparent);
    white-space: nowrap;
    font: 700 clamp(10.5px, min(3.1cqw, 1.8cqh), 15px)/1 "Cormorant Garamond", Georgia, serif;
    letter-spacing: .3em;
    text-indent: .3em;
    text-transform: uppercase;
    color: #fbfaf3;
    text-shadow: 0 0 8px rgba(8, 26, 42, .9), 0 0 2px rgba(8, 26, 42, .9);
    cursor: pointer;
    animation: mr-hint 3.2s ease-in-out infinite;
    -webkit-tap-highlight-color: transparent
}

.c-hint:focus-visible {
    outline: 1.5px solid rgba(244, 241, 232, .9);
    outline-offset: -.6em
}

@keyframes mr-hint {
    0%,
    to {
        opacity: .7
    }
    50% {
        opacity: 1
    }
}

.gate.is-sliding .c-hint {
    animation-duration: 1.3s
}

.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: #0a1f3080;
    box-shadow: 0 0 0 1px #dce8f073;
    cursor: pointer
}

.sound-toggle svg {
    width: 22px;
    margin: 9px;
    fill: none;
    stroke: #f4f1e8;
    stroke-width: 1.6;
    stroke-linecap: round;
    stroke-linejoin: round
}

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

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

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

@keyframes mr-arrive {
    0% {
        opacity: 0;
        scale: 1.025
    }
    to {
        opacity: 1;
        scale: 1
    }
}

.gate.is-opening .gate-stage {
    cursor: default
}

.gate.is-opening .c-hint {
    pointer-events: none
}

.gate.is-faded .c-shine,
.gate.is-faded .c-hint {
    visibility: hidden
}

@media(prefers-reduced-motion:reduce) {
    .c-flame,
    .c-hint {
        animation: none
    }
}