/*! © 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;
    bottom: 0;
    left: 50%;
    width: var(--card-w);
    translate: -50% 0;
    overflow: hidden;
    container-type: size;
    cursor: pointer;
    transition: opacity .9s ease
}

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

.p-art,
.p-sun,
.p-glint,
.p-sparks {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    pointer-events: none
}

.p-art {
    background: center / 100% 100% no-repeat
}

.p-sun {
    inset: -30%;
    width: auto;
    height: auto;
    background: radial-gradient(ellipse 42% 30% at 38% 40%, rgba(255, 226, 170, .55), rgba(255, 214, 150, .18) 55%, transparent 75%);
    mix-blend-mode: soft-light;
    animation: km-sun 26s ease-in-out infinite alternate
}

.p-leaves {
    position: absolute;
    inset: -12%;
    background: center / cover no-repeat;
    opacity: .42;
    pointer-events: none;
    animation: km-leaves 34s ease-in-out infinite alternate, km-breeze 7s ease-in-out infinite
}

@keyframes km-leaves {
    0% {
        translate: -5% -3%
    }
    to {
        translate: 5% 4%
    }
}

@keyframes km-breeze {
    0%,
    to {
        rotate: 0deg;
        scale: 1
    }
    40% {
        rotate: .5deg;
        scale: 1.008
    }
    70% {
        rotate: -.3deg;
        scale: .996
    }
}

.panel:after {
    content: "";
    position: absolute;
    inset: 0;
    background: radial-gradient(ellipse 80% 70% at 42% 45%, transparent 55%, rgba(20, 34, 72, .28));
    pointer-events: none
}

@keyframes km-sun {
    0% {
        translate: -6% -4%
    }
    to {
        translate: 8% 7%
    }
}

.p-glint {
    -webkit-mask-size: 100% 100%;
    mask-size: 100% 100%;
    background: radial-gradient(circle calc(var(--gr, 26cqmax) * .42) at var(--gx, 50%) var(--gy, 42%), rgba(255, 252, 242, .5), rgba(255, 246, 222, .2) 45%, transparent 100%), radial-gradient(circle var(--gr, 26cqmax) at var(--gx, 50%) var(--gy, 42%), rgba(255, 240, 205, .26), rgba(255, 232, 190, .1) 50%, transparent 100%);
    mix-blend-mode: screen
}

.p-sparks {
    mix-blend-mode: screen
}

.tiles {
    position: absolute;
    inset: 0;
    perspective: 1100px;
    pointer-events: none
}

.tile {
    position: absolute;
    transform-style: preserve-3d
}

.tile>i {
    position: absolute;
    inset: 0;
    background-repeat: no-repeat;
    -webkit-backface-visibility: hidden;
    backface-visibility: hidden
}

.tile>i:first-child {
    box-shadow: inset 0 0 0 .6px #46301861
}

.tile>i>b {
    position: absolute;
    inset: 0;
    background: #0b1224;
    opacity: 0
}

.medallion {
    position: absolute;
    left: var(--med-x);
    top: var(--med-y);
    width: var(--med-d);
    aspect-ratio: 1;
    translate: -50% -50%;
    padding: 0;
    border: 0;
    border-radius: 50%;
    background: none;
    cursor: pointer;
    -webkit-tap-highlight-color: transparent
}

.medallion:focus-visible {
    outline: 2px solid #fff3d6;
    outline-offset: 5px
}

.m-ring {
    position: absolute;
    inset: -4%;
    border-radius: 50%;
    box-shadow: 0 0 0 1.5px #ffe8aabf, 0 0 22px 6px #ffd68266;
    animation: km-ring 2.8s ease-in-out infinite
}

@keyframes km-ring {
    0%,
    to {
        opacity: .25;
        scale: .97
    }
    50% {
        opacity: 1;
        scale: 1.04
    }
}

.gate-hint {
    position: absolute;
    left: 50%;
    top: calc(var(--med-y) + var(--med-d) * var(--pic-r) / 2 + 3.2%);
    translate: -50% 0;
    margin: 0;
    padding: .62em 1.3em .58em;
    border-radius: 99px;
    white-space: nowrap;
    font: 700 clamp(10.5px, min(3cqw, 1.7cqh), 15px)/1 "Cormorant Garamond", Georgia, serif;
    letter-spacing: .24em;
    text-indent: .24em;
    text-transform: uppercase;
    color: #fff6e2;
    background: #0e1e46a8;
    box-shadow: 0 0 0 1px #ffdc9673, 0 4px 14px #0000004d;
    pointer-events: none;
    animation: km-hint 2.8s ease-in-out infinite
}

@keyframes km-hint {
    0%,
    to {
        opacity: .72
    }
    50% {
        opacity: 1
    }
}

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

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

.sound-toggle svg {
    width: 22px;
    margin: 9px;
    fill: none;
    stroke: #fff2d8;
    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: km-arrive 1.1s ease-out both
}

@keyframes km-arrive {
    0% {
        opacity: 0;
        scale: 1.03
    }
    to {
        opacity: 1;
        scale: 1
    }
}

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

.gate.is-faded .p-sun,
.gate.is-faded .p-leaves,
.gate.is-faded .p-glint,
.gate.is-faded .p-sparks,
.gate.is-faded .gate-hint,
.gate.is-faded .m-ring {
    visibility: hidden
}

.gate.is-opening .medallion {
    pointer-events: none
}

@media(prefers-reduced-motion:reduce) {
    .p-sun,
    .p-leaves,
    .m-ring,
    .gate-hint {
        animation: none
    }
    .m-ring {
        opacity: .8
    }
}