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

:root {
    --wine: #3a0a12;
    --wine-deep: #1c0409;
    --ivory: #f4ead9
}

html.is-sealed,
html.is-sealed body {
    overflow: hidden;
    overscroll-behavior: none
}

html.is-sealed:not(.is-revealed) .card {
    height: 100vh;
    height: 100svh;
    overflow: hidden
}

.gate {
    --env-h: max(100vh, calc(100vw / var(--env-r)));
    --env-w: max(100vw, calc(100vh * var(--env-r)));
    --pull: .94;
    position: fixed;
    inset: 0;
    z-index: 50;
    overflow: hidden;
    touch-action: manipulation;
    -webkit-tap-highlight-color: transparent;
    user-select: none;
    -webkit-user-select: none;
    cursor: pointer
}

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

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

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

.gate[hidden] {
    display: none
}

.gate-backdrop {
    position: absolute;
    inset: 0;
    background: radial-gradient(ellipse 70% 60% at 50% 45%, rgba(120, 24, 40, .55), transparent 70%), radial-gradient(ellipse at 50% 50%, #4a0f19, #26060c 62%, #120206)
}

.gate-backdrop:after {
    content: "";
    position: absolute;
    inset: -10%;
    background: url(../assets/cover/envelope.webp) center / cover no-repeat;
    filter: blur(40px) brightness(.55) saturate(1.1);
    opacity: .5
}

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

.stage {
    position: absolute;
    inset: 0;
    perspective: calc(var(--env-h) * 2);
    perspective-origin: 50% 50%
}

.env-box {
    position: absolute;
    left: 50%;
    top: 50%;
    width: var(--env-w);
    height: var(--env-h);
    transform: translate(-50%, -50%)
}

.env {
    transform-style: preserve-3d
}

.env-inside {
    position: absolute;
    inset: 0;
    background: #efe5d3 url(../assets/cover/liner.webp) center / cover no-repeat;
    box-shadow: 0 calc(var(--env-h) * .03) calc(var(--env-h) * .09) #08000380
}

.inside-shade,
.inside-glow {
    position: absolute;
    inset: 0;
    pointer-events: none
}

.inside-shade {
    background: radial-gradient(ellipse 60% 45% at 50% 48%, #3c0c1059, #28060ad9)
}

.inside-glow {
    background: radial-gradient(ellipse 55% 40% at 50% 50%, #fff6e4f2, #ffeccd73 45%, #ffeccd00 75%);
    opacity: 0
}

.env-base {
    position: absolute;
    inset: 0;
    background: url(../assets/cover/envelope.webp) 0 0 / 100% 100% no-repeat
}

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

.gate:not(.is-lower-free) .flap-left,
.gate:not(.is-lower-free) .flap-right,
.gate:not(.is-lower-free) .flap-bottom {
    visibility: hidden
}

.gate.is-lower-free .env-base {
    visibility: hidden
}

.face {
    position: absolute;
    inset: 0;
    overflow: hidden;
    backface-visibility: hidden;
    -webkit-backface-visibility: hidden
}

.face-front .art {
    position: absolute;
    background: url(../assets/cover/envelope.webp) 0 0 / 100% 100% no-repeat
}

.face-back {
    transform: rotateX(180deg);
    background: #efe5d3 url(../assets/cover/liner.webp) center / cover no-repeat
}

.shade {
    position: absolute;
    inset: 0;
    background: #1a0307;
    opacity: 0;
    pointer-events: none
}

.face-back .shade {
    background: #3b1a14;
    opacity: .55
}

.env-overlay {
    pointer-events: none
}

.env-overlay .seal {
    pointer-events: auto
}

.env-light {
    position: absolute;
    inset: 0;
    overflow: hidden;
    mix-blend-mode: soft-light
}

.env-light i {
    position: absolute;
    left: -30%;
    top: -10%;
    width: 90%;
    height: 60%;
    border-radius: 50%;
    background: radial-gradient(closest-side, #ffe8d666, #ffe8d600);
    animation: env-drift 16s ease-in-out infinite alternate
}

@keyframes env-drift {
    0% {
        transform: translateZ(0) scale(1)
    }
    50% {
        transform: translate3d(55%, 35%, 0) scale(1.15)
    }
    to {
        transform: translate3d(95%, 70%, 0) scale(.95)
    }
}

.env-vignette {
    position: absolute;
    inset: 0;
    background: radial-gradient(ellipse 75% 60% at 50% 48%, transparent 55%, rgba(12, 0, 4, .38) 100%)
}

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

.seal:focus-visible .seal-ring {
    opacity: 1;
    animation: none;
    transform: scale(1.12)
}

.seal-body {
    position: absolute;
    inset: 0;
    transition: transform .16s cubic-bezier(.3, .7, .4, 1);
    animation: seal-breathe 3.6s ease-in-out infinite
}

.gate.is-pressed .seal-body {
    transform: scale(.955)
}

@keyframes seal-breathe {
    0%,
    to {
        scale: 1
    }
    50% {
        scale: 1.018
    }
}

.seal-whole,
.seal-half {
    position: absolute;
    inset: 0
}

.seal img {
    display: block;
    width: 100%;
    height: 100%;
    pointer-events: none;
    filter: drop-shadow(0 calc(var(--env-w) * .006) calc(var(--env-w) * .009) rgba(30, 0, 6, .55))
}

.seal-half {
    opacity: 0
}

.seal-half-l {
    clip-path: polygon(0 0, 47% 0, 47% 3%, 50% 14%, 45% 24%, 51% 33%, 48% 44%, 55% 52%, 49% 61%, 53% 70%, 47% 80%, 52% 89%, 54% 97%, 54% 100%, 0 100%)
}

.seal-half-r {
    clip-path: polygon(47% 0, 100% 0, 100% 100%, 54% 100%, 54% 97%, 52% 89%, 47% 80%, 53% 70%, 49% 61%, 55% 52%, 48% 44%, 51% 33%, 45% 24%, 50% 14%, 47% 3%)
}

.seal-crack {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    overflow: visible;
    pointer-events: none
}

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

.crack-dark {
    stroke: #583a28cc;
    stroke-width: 1.5
}

.crack-light {
    stroke: #fffaf0bf;
    stroke-width: .6;
    transform: translate(.7px, .5px)
}

.seal-sheen {
    position: absolute;
    inset: 0;
    overflow: hidden;
    -webkit-mask: url(../assets/cover/seal.webp) center / 100% 100% no-repeat;
    mask: url(../assets/cover/seal.webp) center / 100% 100% no-repeat;
    mix-blend-mode: soft-light
}

.seal-sheen:before {
    content: "";
    position: absolute;
    left: 0;
    top: 0;
    width: 250%;
    height: 100%;
    background: linear-gradient(115deg, transparent 38%, rgba(255, 255, 255, .55) 50%, transparent 62%);
    transform: translate(90%);
    animation: seal-sheen 5.2s ease-in-out 1.6s infinite
}

@keyframes seal-sheen {
    0%,
    62% {
        transform: translate(90%)
    }
    to {
        transform: translate(-150%)
    }
}

.seal-ring {
    position: absolute;
    inset: 4%;
    border-radius: 50%;
    border: 1px solid rgba(244, 234, 217, .6);
    opacity: 0;
    animation: seal-ring 2.8s cubic-bezier(.2, .6, .3, 1) 1.2s infinite
}

@keyframes seal-ring {
    0% {
        transform: scale(1);
        opacity: 0
    }
    12% {
        opacity: .75
    }
    to {
        transform: scale(1.55);
        opacity: 0
    }
}

.seal-glow {
    position: absolute;
    inset: -60%;
    border-radius: 50%;
    background: radial-gradient(closest-side, #ffeccde6, #ffd6aa59 45%, #ffd6aa00);
    opacity: 0;
    transform: scale(.4);
    pointer-events: none
}

.wax-crumb {
    position: absolute;
    left: var(--x0);
    top: var(--y0);
    width: var(--s);
    height: var(--s);
    margin: calc(var(--s) / -2);
    background: linear-gradient(135deg, #fbf5e9, #e6d7bd 55%, #b9a282);
    pointer-events: none
}

.wax-crumb:nth-child(3n) {
    clip-path: polygon(10% 20%, 90% 0, 70% 100%)
}

.wax-crumb:nth-child(3n+1) {
    clip-path: polygon(0 40%, 60% 0, 100% 70%, 30% 100%)
}

.wax-crumb:nth-child(3n+2) {
    clip-path: polygon(20% 0, 100% 30%, 80% 90%, 0 100%)
}

.gate-hint {
    position: absolute;
    left: 0;
    right: 0;
    top: var(--hint-y, 59%);
    margin: 0;
    text-align: center;
    font-family: Pinyon Script, Great Vibes, cursive;
    font-size: calc(var(--env-w) * var(--hint-k, .085));
    line-height: 1;
    color: var(--ivory);
    text-shadow: 0 1px calc(var(--env-w) * .02) rgba(20, 0, 5, .55);
    animation: hint-pulse 3.2s ease-in-out 1.4s infinite
}

.gate-hint {
    top: min(var(--hint-y, 59%), calc(50% + 36vh))
}

@supports (height: 100svh) {
    .gate-hint {
        top: min(var(--hint-y, 59%), calc(50% + 36svh))
    }
}

@keyframes hint-pulse {
    0%,
    to {
        opacity: .62
    }
    50% {
        opacity: 1
    }
}

.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(244, 234, 217, .35);
    border-radius: 50%;
    background: #1c040959;
    -webkit-backdrop-filter: blur(6px);
    backdrop-filter: blur(6px);
    color: var(--ivory);
    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
}

html.is-loading .stage,
html.is-loading .env-overlay,
html.is-loading .sound-toggle {
    opacity: 0
}

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

html.is-arriving .env-light,
html.is-arriving .env-vignette {
    animation: arrive-fade 1.2s ease both
}

html.is-arriving .seal {
    animation: arrive-seal .9s cubic-bezier(.2, 1.35, .35, 1) .35s 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: blur(10px)
    }
    to {
        opacity: 1;
        transform: none;
        filter: none
    }
}

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

@keyframes arrive-seal {
    0% {
        opacity: 0;
        transform: translate(-50%, -50%) scale(1.25)
    }
    to {
        opacity: 1;
        transform: translate(-50%, -50%) scale(1)
    }
}

.gate.is-opening {
    cursor: default
}

.gate.is-opening .seal-body,
.gate.is-opening .seal-ring,
.gate.is-opening .seal-sheen:before,
.gate.is-opening .gate-hint,
.gate.is-opening .env-light i {
    animation: none
}

.gate.is-opening .seal-ring {
    opacity: 0
}

.card {
    transform-origin: 50% 45%
}

@media(prefers-reduced-motion:reduce) {
    .env-light i,
    .seal-body,
    .seal-ring,
    .seal-sheen:before,
    .gate-hint {
        animation: none !important
    }
}