/*! © 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 {
    --d-h: max(100vh, calc(100vw / var(--gate-r)));
    --d-w: max(100vw, calc(100vh * var(--gate-r)));
    position: fixed;
    inset: 0;
    z-index: 50;
    overflow: hidden;
    background: var(--pearl);
    touch-action: manipulation;
    -webkit-tap-highlight-color: transparent;
    user-select: none;
    -webkit-user-select: none
}

@supports (height: 100svh) {
    .gate {
        --d-h: max(100svh, calc(100vw / var(--gate-r)));
        --d-w: max(100vw, calc(100svh * var(--gate-r)))
    }
}

@media(min-aspect-ratio:751/1000) {
    html:not(.is-tablet) .gate {
        --d-h: 100vh;
        --d-w: calc(100vh * var(--gate-r))
    }
    @supports (height: 100svh) {
        html:not(.is-tablet) .gate {
            --d-h: 100svh;
            --d-w: calc(100svh * var(--gate-r))
        }
    }
}

.gate[hidden] {
    display: none
}

.gate.is-opening {
    background: none
}

html.is-loading .gate,
html.is-arriving .gate {
    background: var(--pearl) var(--gate-tiny) center / cover no-repeat
}

.gate-backdrop {
    position: absolute;
    inset: 0;
    background: radial-gradient(ellipse at 50% 45%, #fbf3ee, #efdcd5 62%, #dcc3bb)
}

.gate-backdrop:after {
    content: "";
    position: absolute;
    inset: -10%;
    background-position: center;
    background-size: cover;
    background-repeat: no-repeat;
    filter: blur(40px) brightness(1.05) saturate(.9);
    opacity: .7
}

.gate-inner {
    position: absolute;
    inset: 0
}

.garden {
    position: absolute;
    left: 50%;
    top: 50%;
    width: var(--d-w);
    height: var(--d-h);
    transform: translate(-50%, -50%);
    overflow: hidden
}

.stage {
    position: absolute;
    inset: 0;
    perspective: calc(var(--d-w) * 1.3);
    perspective-origin: 50% 55%
}

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

.g-light {
    position: absolute;
    inset: 0;
    background: radial-gradient(ellipse 30% 36% at var(--open-cx) var(--open-cy), #fffdf8, rgba(255, 244, 232, .75) 45%, rgba(255, 236, 222, 0) 100%);
    -webkit-mask: var(--open-mask) 0 0 / 100% 100% no-repeat;
    mask: var(--open-mask) 0 0 / 100% 100% no-repeat;
    opacity: 0
}

.g-leaf {
    position: absolute;
    backface-visibility: hidden;
    -webkit-backface-visibility: hidden
}

.g-leaf-l {
    left: var(--lf-l-x);
    top: var(--lf-l-y);
    width: var(--lf-l-w);
    height: var(--lf-l-h);
    transform-origin: 0 50%
}

.g-leaf-r {
    left: var(--lf-r-x);
    top: var(--lf-r-y);
    width: var(--lf-r-w);
    height: var(--lf-r-h);
    transform-origin: 100% 50%
}

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

.g-seam {
    position: absolute;
    left: var(--seam-x);
    top: var(--open-t);
    height: calc(var(--open-b) - var(--open-t));
    width: calc(var(--d-w) * .006);
    translate: -50% 0;
    background: linear-gradient(transparent, #fffaf0 12%, #fffef9 50%, #fffaf0 88%, transparent);
    box-shadow: 0 0 calc(var(--d-w) * .03) calc(var(--d-w) * .012) #ffeed6cc;
    opacity: 0
}

.g-petals,
.g-flies {
    position: absolute;
    inset: 0;
    pointer-events: none
}

.g-petal {
    position: absolute;
    left: 0;
    top: 0;
    perspective: 300px;
    will-change: transform
}

.g-petal b {
    display: block;
    transform-style: preserve-3d
}

.g-petal img {
    width: 100%;
    height: auto;
    filter: drop-shadow(0 2px 3px rgba(120, 70, 70, .18))
}

.g-fly {
    position: absolute;
    left: 0;
    top: 0;
    width: var(--fly, 40px);
    aspect-ratio: var(--fly-r);
    margin: calc(var(--fly, 40px) / var(--fly-r) * -.5) 0 0 calc(var(--fly, 40px) * -.5);
    will-change: transform
}

.g-fly-in {
    position: absolute;
    inset: 0;
    perspective: calc(var(--fly, 40px) * 3);
    filter: drop-shadow(0 3px 3px rgba(90, 60, 50, .22))
}

.g-wing {
    position: absolute;
    inset: 0;
    background: url(../assets/cover/butterfly.webp) 0 0 / 100% 100% no-repeat;
    transform-origin: var(--fly-body) 50%
}

.g-wing-l {
    clip-path: inset(0 calc(100% - var(--fly-body)) 0 0)
}

.g-wing-r {
    clip-path: inset(0 0 0 var(--fly-body))
}

.ribbon {
    position: absolute;
    left: var(--rb-x);
    top: var(--rb-y);
    width: var(--rb-w);
    aspect-ratio: var(--rb-r);
    translate: -50% calc(var(--rb-knot) * -100%);
    padding: 0;
    border: 0;
    background: none;
    cursor: pointer;
    outline: none;
    -webkit-tap-highlight-color: transparent
}

.rb-band,
.rb-bow {
    position: absolute;
    inset: 0;
    background: url(../assets/cover/ribbon.webp) 0 0 / 100% 100% no-repeat;
    filter: drop-shadow(0 calc(var(--d-w) * .004) calc(var(--d-w) * .005) rgba(110, 60, 60, .25))
}

.rb-band-l {
    clip-path: inset(0 calc(100% - var(--rb-bow-l)) 0 0);
    transform-origin: var(--rb-bow-l) var(--rb-knot-y)
}

.rb-band-r {
    clip-path: inset(0 0 0 var(--rb-bow-r));
    transform-origin: var(--rb-bow-r) var(--rb-knot-y)
}

.rb-bow {
    clip-path: inset(0 calc(100% - var(--rb-bow-r)) 0 var(--rb-bow-l));
    transform-origin: 50% var(--rb-knot-y)
}

.gate.is-pressed .rb-bow {
    transform: scale(.96);
    transition: transform .14s ease
}

.rb-ring {
    position: absolute;
    left: 50%;
    top: calc(var(--rb-knot) * 100%);
    width: calc(var(--rb-bow-r) - var(--rb-bow-l));
    aspect-ratio: 1;
    translate: -50% -50%;
    border-radius: 50%;
    border: 1.5px solid rgba(255, 255, 255, .9);
    box-shadow: 0 0 10px #ffdcd799;
    opacity: 0;
    animation: rb-ring 2.8s cubic-bezier(.2, .6, .3, 1) 1.2s infinite;
    pointer-events: none
}

@keyframes rb-ring {
    0% {
        opacity: .95;
        transform: scale(.7)
    }
    to {
        opacity: 0;
        transform: scale(1.5)
    }
}

.ribbon:focus-visible .rb-ring {
    opacity: 1;
    animation: none;
    transform: scale(1.05)
}

.gate.is-nudged .rb-ring {
    animation: rb-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%;
    bottom: max(26px, calc(env(safe-area-inset-bottom) + 18px), 4.5vh);
    width: max-content;
    max-width: 86vw;
    margin: 0;
    padding: 10px 20px 10px calc(20px + .26em);
    translate: -50% 0;
    border: 1px solid rgba(255, 255, 255, .75);
    border-radius: 999px;
    background: #fffaf69e;
    -webkit-backdrop-filter: blur(8px);
    backdrop-filter: blur(8px);
    box-shadow: 0 4px 18px #7846461f;
    color: var(--rose);
    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: .92
    }
    50% {
        opacity: .66
    }
}

@keyframes hint-flash {
    0%,
    to {
        opacity: .92
    }
    30% {
        opacity: 1;
        background: #ffffffe6
    }
}

.g-flood {
    position: absolute;
    inset: 0;
    background: radial-gradient(circle at 50% 45%, #fffefb, #fff8f2 45%, #f8e8e1 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(255, 255, 255, .75);
    border-radius: 50%;
    background: #fffaf68c;
    -webkit-backdrop-filter: blur(6px);
    backdrop-filter: blur(6px);
    color: var(--rose);
    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(--rose);
    outline-offset: 2px
}

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

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

html.is-arriving .ribbon {
    animation: arrive-bow .9s cubic-bezier(.2, 1.3, .35, 1) .42s both
}

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

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

@keyframes arrive-gates {
    0% {
        opacity: 0;
        transform: scale(1.05);
        filter: brightness(1.25) saturate(.7)
    }
    to {
        opacity: 1;
        transform: none;
        filter: none
    }
}

@keyframes arrive-bow {
    0% {
        opacity: 0;
        transform: scale(.8)
    }
    to {
        opacity: 1;
        transform: none
    }
}

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

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

@media(prefers-reduced-motion:reduce) {
    .rb-ring,
    .gate-hint {
        animation: none !important
    }
}