/*! © 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;
    overscroll-behavior: none
}

html.is-shut .card {
    height: 100vh;
    height: 100svh;
    overflow: hidden
}

.gate {
    position: fixed;
    inset: 0;
    z-index: 50;
    overflow: hidden;
    background: radial-gradient(ellipse 70% 60% at 50% 50%, #1b150e, var(--onyx) 70%, var(--table));
    touch-action: manipulation;
    -webkit-tap-highlight-color: transparent;
    user-select: none;
    -webkit-user-select: none
}

.gate[hidden] {
    display: none
}

.stage {
    position: absolute;
    inset: 0;
    perspective: calc(var(--vw, 100vw) * 1.1)
}

.inside {
    position: absolute;
    inset: 0;
    overflow: hidden;
    background: url(../assets/theme/paper-b.webp) 0 0 / max(46vmin, 300px) repeat, var(--ivory)
}

.inside:before {
    content: "";
    position: absolute;
    inset: 0;
    background: linear-gradient(90deg, rgba(40, 26, 10, .45), transparent 14%, transparent 86%, rgba(40, 26, 10, .45))
}

.in-shade {
    position: absolute;
    inset: 0;
    background: linear-gradient(90deg, rgba(20, 12, 4, .75), transparent 22%, transparent 78%, rgba(20, 12, 4, .75));
    opacity: 0
}

.in-light {
    position: absolute;
    inset: -20%;
    background: radial-gradient(circle at 50% 50%, #fffaf0, #ffe2a0eb 16%, #e2a44880 38%, #78461400 66%);
    mix-blend-mode: screen;
    opacity: .35
}

.whole {
    position: absolute;
    inset: 0
}

.flap {
    position: absolute;
    top: 0;
    bottom: 0;
    transform-style: preserve-3d
}

.flap-l {
    left: 0;
    width: var(--jx);
    transform-origin: 0 50%
}

.flap-r {
    left: var(--jx);
    right: 0;
    transform-origin: 100% 50%
}

.face {
    position: absolute;
    top: 0;
    bottom: 0;
    -webkit-backface-visibility: hidden;
    backface-visibility: hidden
}

.front {
    width: var(--vw)
}

.flap-l .front {
    left: 0
}

.flap-r .front {
    left: calc(-1 * var(--jx))
}

.env-art {
    position: absolute;
    inset: 0;
    background: var(--onyx) center / cover no-repeat
}

.f-shade {
    position: absolute;
    inset: 0;
    background: #000;
    opacity: 0
}

.seal-initials i {
    font-style: italic;
    font-weight: 500;
    margin: 0 .06em
}

.seal-initials {
    position: absolute;
    left: var(--sx);
    top: var(--sy);
    translate: -50% -52%;
    margin: 0;
    white-space: nowrap;
    font: 600 calc(var(--sr) * .5) / 1 "Cormorant Garamond", Georgia, serif;
    letter-spacing: .04em;
    color: #5a3b10;
    text-shadow: 0 1.2px 0 rgba(255, 234, 186, .75), 0 -1px 1px rgba(36, 20, 3, .7), 0 0 1px rgba(60, 36, 6, .5)
}

.back {
    inset: 0;
    width: auto;
    transform: rotateY(180deg);
    background: url(../assets/theme/paper-b.webp) 0 0 / max(46vmin, 300px) repeat, var(--ivory)
}

.back:after {
    content: "";
    position: absolute;
    inset: 0;
    background: linear-gradient(90deg, rgba(46, 30, 10, .5), transparent 22%, transparent 94%, #c9a24b 97%, #f3dc97 98.5%, #9c7231 100%)
}

.flap-l .back:after {
    transform: scaleX(-1)
}

.join-glow {
    position: absolute;
    top: 0;
    bottom: 0;
    left: calc(var(--jx) - 9px);
    width: 18px;
    background: linear-gradient(90deg, transparent, rgba(255, 180, 90, .35) 38%, rgba(255, 236, 196, .8) 50%, rgba(255, 180, 90, .35) 62%, transparent);
    -webkit-mask-image: linear-gradient(180deg, #000 calc(var(--sy) - var(--sr) * 1.15), transparent calc(var(--sy) - var(--sr) * .95), transparent calc(var(--sy) + var(--sr) * .95), #000 calc(var(--sy) + var(--sr) * 1.15));
    mask-image: linear-gradient(180deg, #000 calc(var(--sy) - var(--sr) * 1.15), transparent calc(var(--sy) - var(--sr) * .95), transparent calc(var(--sy) + var(--sr) * .95), #000 calc(var(--sy) + var(--sr) * 1.15));
    animation: breathe 4.2s ease-in-out infinite;
    pointer-events: none
}

@keyframes breathe {
    0%,
    to {
        opacity: .2
    }
    50% {
        opacity: .7
    }
}

.gleam {
    position: absolute;
    inset: 0;
    background: linear-gradient(104deg, transparent 40%, rgba(255, 246, 222, 0) 44%, rgba(255, 246, 222, .8) 50%, rgba(255, 246, 222, 0) 56%, transparent 60%) 0 0 / 300% 100% no-repeat;
    -webkit-mask-size: cover;
    mask-size: cover;
    -webkit-mask-position: center;
    mask-position: center;
    -webkit-mask-repeat: no-repeat;
    mask-repeat: no-repeat;
    animation: gleam 6.5s cubic-bezier(.45, 0, .35, 1) 1.2s infinite;
    pointer-events: none
}

@keyframes gleam {
    0% {
        background-position: 100% 0
    }
    38%,
    to {
        background-position: 0% 0
    }
}

.dust {
    position: absolute;
    inset: 0;
    pointer-events: none
}

.dust i {
    position: absolute;
    left: var(--x);
    top: var(--y);
    width: var(--s);
    height: var(--s);
    border-radius: 50%;
    background: radial-gradient(circle, #fff3cf, #f5cd78d9, #e6aa4600 70%);
    opacity: 0;
    animation: mote var(--d) linear var(--delay) infinite
}

@keyframes mote {
    0% {
        opacity: 0;
        transform: translate(0)
    }
    18% {
        opacity: var(--o)
    }
    80% {
        opacity: calc(var(--o) * .7)
    }
    to {
        opacity: 0;
        transform: translate(var(--dx), var(--dy))
    }
}

.crack {
    position: absolute;
    left: calc(var(--jx) - var(--sr) * 1.2);
    top: calc(var(--sy) - var(--sr) * 1.2);
    width: calc(var(--sr) * 2.4);
    height: calc(var(--sr) * 2.4);
    overflow: visible;
    pointer-events: none
}

.crack path {
    fill: none;
    stroke-linecap: round;
    stroke-linejoin: round;
    stroke-dasharray: 1;
    stroke-dashoffset: 1
}

.crack .c-dark {
    stroke: #2a1806;
    stroke-width: .05
}

.crack .c-light {
    stroke: #fff1c8;
    stroke-width: .022;
    filter: drop-shadow(0 0 .04px #ffd98a);
    opacity: 0
}

.seal-btn {
    position: absolute;
    left: calc(var(--sx) - var(--sr));
    top: calc(var(--sy) - var(--sr));
    width: calc(var(--sr) * 2);
    height: calc(var(--sr) * 2);
    z-index: 2;
    padding: 0;
    border: 0;
    border-radius: 50%;
    background: transparent;
    cursor: pointer
}

.seal-btn:disabled {
    cursor: default
}

.s-ring {
    position: absolute;
    inset: -4%;
    border-radius: 50%;
    border: 1.5px solid rgba(255, 228, 160, .8);
    box-shadow: 0 0 14px #ffd28273;
    opacity: 0;
    animation: s-ring 3s cubic-bezier(.2, .6, .3, 1) 2s infinite;
    pointer-events: none
}

@keyframes s-ring {
    0% {
        opacity: .85;
        transform: scale(1)
    }
    to {
        opacity: 0;
        transform: scale(1.55)
    }
}

.seal-btn:focus-visible {
    outline: none
}

.seal-btn:focus-visible .s-ring {
    opacity: 1;
    animation: none;
    transform: scale(1.12);
    border-color: #fff4d6
}

.gate.is-pressed .s-ring {
    opacity: 1;
    animation: none;
    transform: scale(1.04);
    border-color: #fff4d6;
    box-shadow: 0 0 22px #ffdc96cc
}

.gate.is-nudged .s-ring {
    animation: s-ring .9s cubic-bezier(.2, .6, .3, 1) 2
}

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

.gate-hint {
    position: absolute;
    left: 50%;
    top: var(--hint-y, 72%);
    z-index: 2;
    width: max-content;
    max-width: 86vw;
    margin: 0;
    padding: 9px 18px 9px calc(18px + .26em);
    translate: -50% 0;
    border: 1px solid rgba(201, 162, 75, .5);
    border-radius: 999px;
    background: #0a080699;
    -webkit-backdrop-filter: blur(6px);
    backdrop-filter: blur(6px);
    color: var(--gold-hi);
    font: 600 12px/1 Cormorant Garamond, Georgia, serif;
    letter-spacing: .26em;
    text-transform: uppercase;
    animation: hint-pulse 3.2s ease-in-out 1.4s infinite;
    pointer-events: none
}

@keyframes hint-pulse {
    0%,
    to {
        opacity: .9
    }
    50% {
        opacity: .6
    }
}

@keyframes hint-flash {
    0%,
    to {
        opacity: .9
    }
    30% {
        opacity: 1;
        background: #3c2a0ed9
    }
}

.flood {
    position: absolute;
    inset: 0;
    background: radial-gradient(circle at 50% 50%, #fffef9, #fff8e4 45%, #f6e2b0 90%);
    opacity: 0;
    pointer-events: none
}

.sound-toggle {
    position: absolute;
    top: max(14px, env(safe-area-inset-top));
    right: max(14px, env(safe-area-inset-right));
    z-index: 3;
    width: 40px;
    height: 40px;
    padding: 9px;
    border: 1px solid rgba(240, 217, 156, .4);
    border-radius: 50%;
    background: #0a080680;
    -webkit-backdrop-filter: blur(6px);
    backdrop-filter: blur(6px);
    color: var(--gold-hi);
    cursor: pointer
}

.sound-toggle svg {
    width: 100%;
    height: 100%;
    display: block
}

.sound-toggle path {
    fill: none;
    stroke: currentColor;
    stroke-width: 1.5;
    stroke-linecap: round;
    stroke-linejoin: round
}

.sound-toggle .spk {
    fill: currentColor
}

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

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

html.is-loading .stage,
html.is-loading .gate-hint,
html.is-loading .sound-toggle {
    opacity: 0
}

html.is-arriving .stage {
    animation: arrive-env 1.3s cubic-bezier(.2, .7, .2, 1) both
}

html.is-arriving .gate-hint {
    animation: arrive-fade .9s ease .9s both, hint-pulse 3.2s ease-in-out 1.8s infinite
}

html.is-arriving .sound-toggle {
    animation: arrive-fade .7s ease 1.1s both
}

@keyframes arrive-env {
    0% {
        opacity: 0;
        transform: scale(1.04);
        filter: brightness(.45)
    }
    to {
        opacity: 1;
        transform: none;
        filter: none
    }
}

@keyframes arrive-fade {
    0% {
        opacity: 0
    }
    to {
        opacity: 1
    }
}

.gate.is-opening .gate-hint,
.gate.is-opening .s-ring {
    animation: none;
    opacity: 0
}

.gate.is-opening .gleam {
    animation-play-state: paused
}

.gate.is-opening .join-glow {
    animation: none
}

@media(prefers-reduced-motion:reduce) {
    .gleam,
    .dust,
    .s-ring {
        display: none
    }
    .join-glow,
    .gate-hint {
        animation: none !important
    }
    .join-glow {
        opacity: .5
    }
}