/* Invitation UI — timing: :root below + invitation.js (FLIP_MS, FLIP_START_MS, …). */
:root {
    --navy-900: #0A0F1D;
    --navy-800: #161E42;
    --navy-700: #2A3A5E;
    --navy-600: #445B82;
    --cream-100: #FFFBF2;
    --cream-200: #FFF5E1;
    --cream-300: #F4E3C9;
    --cream-400: #E9D1A7;
    --cream-500: #D8B37D;
    --amber-600: #C19354;
    --amber-700: #A6762A;
    --amber-800: #6D421A;
    --amber-900: #3D2109;
    --red-50:  #FFE1DC;
    --red-100: #FFC8C8;
    --red-200: #FFB4AA;
    --red-300: #EB8C82;
    --red-400: #D76E6E;
    --red-600: #B43C3C;
    --red-700: #9E2020;
    --red-800: #7A1414;
    --red-900: #430A0A;
    --red-950: #3D0808;
    --black: #000000;
    --white: #FFFFFF;

    --flip-duration: .6s;
    --card-perspective: 1200px;
    --letter-emerge-duration: 1.35s;
    --envelope-open-shift: min(200px, 24vh);
    --letter-invite-z: 5000;
    --page-main-opacity-duration: 0.6s;
}

body:has(#envelope) .page-main {
    opacity: 0;
    transition: opacity var(--page-main-opacity-duration) ease;
}

body:has(#envelope) .page-main.page-main--visible {
    opacity: 1;
}

.envelope-scene {
    perspective: 1200px;
    position: relative;
    z-index: 0;
    animation:
        pageLoad 1.4s cubic-bezier(0.22, 0.61, 0.36, 1) both,
        float    7s ease-in-out 1.4s infinite;
}

.envelope-scene.envelope-scene--open {
    transition: transform 0.9s cubic-bezier(0.34, 1.2, 0.64, 1);
    transform: translateY(var(--envelope-open-shift));
}

.envelope-scene.envelope-scene--falling {
    z-index: 0;
}

.envelope {
    perspective: 1000px;
    border-radius: 3px;

    box-shadow:
        0 6px 12px  rgba(12,27,61,0.15),
        0 22px 50px rgba(12,27,61,0.3),
        0 60px 120px rgba(12,27,61,0.55);
    transition: transform 0.35s cubic-bezier(0.34, 1.2, 0.64, 1),
                box-shadow 0.35s ease;
}

.envelope:not(.opening):hover {
    transform: translateY(-6px) scale(1.015);
    box-shadow:
        0 10px 20px  rgba(12,27,61,0.25),
        0 30px 65px  rgba(12,27,61,0.4),
        0 72px 140px rgba(12,27,61,0.65);
}

.envelope-interior {
    background: linear-gradient(160deg, var(--navy-700) 0%, var(--navy-700) 65%, var(--navy-900) 100%);
    border-radius: 2px;
}

.envelope-body {
    background:
        linear-gradient(158deg,
            var(--cream-200)  0%,
            var(--cream-300) 55%,
            var(--cream-400) 100%);
    border-radius: 3px;
    overflow: hidden;
    clip-path: polygon(0% 0%, 50% 50%, 100% 0%, 100% 100%, 0% 100%);
}

.envelope-body::before {
    content: '';
    position: absolute;
    inset: 0;
    opacity: 0.55;
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='300' height='300'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.75' numOctaves='4' stitchTiles='stitch'/%3E%3CfeColorMatrix type='saturate' values='0'/%3E%3C/filter%3E%3Crect width='300' height='300' filter='url(%23n)' opacity='1'/%3E%3C/svg%3E");
    background-size: 200px 200px;
    mix-blend-mode: multiply;
}

.envelope-body::after {
    content: '';
    position: absolute;
    inset: 0;
    background-image:
        repeating-linear-gradient( 45deg, transparent, transparent 10px, rgba(42,58,94,0.045) 10px, rgba(42,58,94,0.045) 11px),
        repeating-linear-gradient(-45deg, transparent, transparent 10px, rgba(42,58,94,0.045) 10px, rgba(42,58,94,0.045) 11px);
}

.letter-bl {
    z-index: 2;
    background: linear-gradient(148deg, var(--navy-700) 0%, var(--navy-700) 65%, var(--navy-900) 100%);
    border-radius: 2px;
    box-shadow:
        0 12px 40px rgba(12,27,61,0.35),
        0 4px 12px  rgba(12,27,61,0.2),
        inset 0 0 0 1px rgba(193,147,84,0.10);
}

.letter-preview {
    position: absolute;
    inset: 0;
    display: flex;
    align-items: center;
    justify-content: center;
    pointer-events: none;

    background: linear-gradient(148deg, var(--navy-700) 0%, var(--navy-700) 65%, var(--navy-900) 100%);
    border-radius: 2px;

    transform: translateZ(1px) rotateY(0deg);
    transform-origin: center center;
    backface-visibility: hidden;
    -webkit-backface-visibility: hidden;

    z-index: 2;
}

.letter-frame {
    border: 1px solid rgba(193,147,84,0.22);
}

.letter-title {
    font-family: 'Playfair Display', serif;
    font-style: italic;
    letter-spacing: 0.04em;
    line-height: 1;
    color: rgba(233,209,167,0.82);
}

.letter-sub {
    font-family: 'Playfair Display', serif;
    color: rgba(193,147,84,0.45);
}

.page-wrapper.for-invitation {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;

    visibility: hidden;
    opacity: 0;
    pointer-events: none;

    transform: translateZ(-1px) rotateY(180deg);
    transform-origin: center center;
    backface-visibility: hidden;
    -webkit-backface-visibility: hidden;

    overflow: hidden;
    z-index: 1;
}

.page-wrapper.for-invitation.is-primed {
    visibility: visible;
    opacity: 1;
}

.page-wrapper.for-invitation.is-revealed {
    pointer-events: none;
}

.letter-bl.is-flat .page-wrapper.for-invitation.is-revealed {
    pointer-events: auto;
    overflow-y: auto;
    overflow-x: hidden;
    -webkit-overflow-scrolling: touch;
    touch-action: pan-y;
}

.page-wrapper.for-invitation.is-primed .invitation-content {
    display: block;
    opacity: 1 !important;
    visibility: visible !important;
}

.flap-bottom {
    background: linear-gradient(175deg, var(--cream-400) 0%, var(--cream-500) 100%);
    clip-path: polygon(0% 100%, 50% 0%, 100% 100%);
    filter: brightness(0.91);
}

.flap-left {
    background: linear-gradient(95deg, var(--cream-300) 0%, var(--cream-200) 100%);
    clip-path: polygon(0% 0%, 0% 100%, 100% 50%);
    filter: brightness(0.95);
}

.flap-right {
    background: linear-gradient(265deg, var(--cream-300) 0%, var(--cream-200) 100%);
    clip-path: polygon(100% 0%, 100% 100%, 0% 50%);
    filter: brightness(0.89);
}

.flap-top {
    transform-origin: top center;
    z-index: 5;
    background: linear-gradient(172deg,
        var(--cream-100)  0%,
        var(--cream-200) 50%,
        var(--cream-300) 100%);
    clip-path: polygon(0% 0%, 100% 0%, 50% 100%);
}

.flap-top::after {
    content: '';
    position: absolute;
    bottom: 0; left: 5%; right: 5%;
    height: 20px;
    background: linear-gradient(180deg, transparent, rgba(109,66,26,0.08));
}

.return-label {
    font-family: 'Playfair Display', serif;
    color: rgba(61,33,9,0.32);
}

.return-name {
    font-family: 'Playfair Display', serif;
    font-weight: 500;
    color: rgba(61,33,9,0.45);
}

.stamp {
    background: linear-gradient(148deg, var(--cream-100), var(--cream-300));
}

.stamp::before {
    content: '';
    position: absolute;
    inset: -5px;
    background-image:
        radial-gradient(circle at 5px 0px,  var(--cream-200) 3.5px, transparent 3.5px),
        radial-gradient(circle at 15px 0px, var(--cream-200) 3.5px, transparent 3.5px),
        radial-gradient(circle at 25px 0px, var(--cream-200) 3.5px, transparent 3.5px),
        radial-gradient(circle at 35px 0px, var(--cream-200) 3.5px, transparent 3.5px),
        radial-gradient(circle at 45px 0px, var(--cream-200) 3.5px, transparent 3.5px),
        radial-gradient(circle at 55px 0px, var(--cream-200) 3.5px, transparent 3.5px),
        radial-gradient(circle at 65px 0px, var(--cream-200) 3.5px, transparent 3.5px),
        radial-gradient(circle at 75px 0px, var(--cream-200) 3.5px, transparent 3.5px),
        radial-gradient(circle at 85px 0px, var(--cream-200) 3.5px, transparent 3.5px),
        radial-gradient(circle at 5px 84px,  var(--cream-200) 3.5px, transparent 3.5px),
        radial-gradient(circle at 15px 84px, var(--cream-200) 3.5px, transparent 3.5px),
        radial-gradient(circle at 25px 84px, var(--cream-200) 3.5px, transparent 3.5px),
        radial-gradient(circle at 35px 84px, var(--cream-200) 3.5px, transparent 3.5px),
        radial-gradient(circle at 45px 84px, var(--cream-200) 3.5px, transparent 3.5px),
        radial-gradient(circle at 55px 84px, var(--cream-200) 3.5px, transparent 3.5px),
        radial-gradient(circle at 65px 84px, var(--cream-200) 3.5px, transparent 3.5px),
        radial-gradient(circle at 75px 84px, var(--cream-200) 3.5px, transparent 3.5px),
        radial-gradient(circle at 85px 84px, var(--cream-200) 3.5px, transparent 3.5px),
        radial-gradient(circle at 0px 5px,  var(--cream-200) 3.5px, transparent 3.5px),
        radial-gradient(circle at 0px 16px, var(--cream-200) 3.5px, transparent 3.5px),
        radial-gradient(circle at 0px 27px, var(--cream-200) 3.5px, transparent 3.5px),
        radial-gradient(circle at 0px 38px, var(--cream-200) 3.5px, transparent 3.5px),
        radial-gradient(circle at 0px 49px, var(--cream-200) 3.5px, transparent 3.5px),
        radial-gradient(circle at 0px 60px, var(--cream-200) 3.5px, transparent 3.5px),
        radial-gradient(circle at 0px 71px, var(--cream-200) 3.5px, transparent 3.5px),
        radial-gradient(circle at 0px 82px, var(--cream-200) 3.5px, transparent 3.5px),
        radial-gradient(circle at 86px 5px,  var(--cream-200) 3.5px, transparent 3.5px),
        radial-gradient(circle at 86px 16px, var(--cream-200) 3.5px, transparent 3.5px),
        radial-gradient(circle at 86px 27px, var(--cream-200) 3.5px, transparent 3.5px),
        radial-gradient(circle at 86px 38px, var(--cream-200) 3.5px, transparent 3.5px),
        radial-gradient(circle at 86px 49px, var(--cream-200) 3.5px, transparent 3.5px),
        radial-gradient(circle at 86px 60px, var(--cream-200) 3.5px, transparent 3.5px),
        radial-gradient(circle at 86px 71px, var(--cream-200) 3.5px, transparent 3.5px),
        radial-gradient(circle at 86px 82px, var(--cream-200) 3.5px, transparent 3.5px);
}

.stamp-inner-frame {
    background: linear-gradient(145deg, rgba(255,251,242,0.8), rgba(244,227,201,0.6));
}

.stamp-text {
    font-family: 'Playfair Display', serif;
    font-weight: 600;
}

.envelope-border {
    border-radius: 3px;
    border: 1px solid rgba(193,147,84,0.22);
}

.envelope-inner-shadow {
    border-radius: 3px;
    box-shadow: inset 0 0 30px rgba(109,66,26,0.06);
}

.wax-seal {
    transform: translate(-50%, -50%);
    filter:
        drop-shadow(0 1px  3px  rgba(61,8,8,0.30))
        drop-shadow(0 5px  12px rgba(61,8,8,0.45))
        drop-shadow(0 12px 30px rgba(61,8,8,0.38))
        drop-shadow(0 22px 52px rgba(61,8,8,0.22));
}

.wax-body {
    border-radius: 46% 54% 42% 58% / 54% 44% 56% 46%;
    background:
        radial-gradient(ellipse 42% 32% at 28% 20%, rgba(215,110,110,0.52) 0%, transparent 100%),
        radial-gradient(circle at 52% 54%, var(--red-900) 0%, transparent 38%),
        radial-gradient(ellipse 95% 90% at 50% 55%, transparent 60%, rgba(109,66,26,0.18) 100%),
        radial-gradient(ellipse 90% 84% at 50% 48%,
            var(--red-700) 12%,
            var(--red-800) 48%,
            var(--red-900) 78%,
            var(--red-950) 100%);
    box-shadow:
        inset 0 3px  7px rgba(255,200,200,0.22),
        inset 0 -4px 8px rgba(0,0,0,0.55);
}

.wax-body::before {
    content: '';
    position: absolute;
    top: 10%;
    left: 16%;
    width: 40%;
    height: 32%;
    background: radial-gradient(ellipse, rgba(255,225,220,0.48) 0%, rgba(255,180,170,0.18) 55%, transparent 100%);
    border-radius: 50%;
    transform: rotate(-22deg);
}

.wax-body::after {
    content: '';
    position: absolute;
    inset: 10px;
    border-radius: 50%;
    border: 1.5px solid rgba(255,180,170,0.24);
    box-shadow:
        inset 0 0 10px rgba(0,0,0,0.30),
        0 0 4px rgba(180,60,60,0.20);
}

@keyframes pageLoad {
    0%  { opacity: 0; transform: translateY(28px) scale(0.975); }
    100%{ opacity: 1; transform: translateY(0)    scale(1);     }
}

@keyframes float {
    0%, 100% { transform: translateY(0px)   rotate(-0.8deg); }
    50%      { transform: translateY(-14px) rotate(-0.3deg); }
}

@keyframes sealDrop {
    0%   { opacity: 0; transform: translate(-50%, -50%) scale(0.5)  rotate(-15deg); }
    65%  {              transform: translate(-50%, -50%) scale(1.08) rotate(3deg); }
    85%  {              transform: translate(-50%, -50%) scale(0.96) rotate(-1deg); }
    100% { opacity: 1; transform: translate(-50%, -50%) scale(1)    rotate(0deg); }
}

@keyframes stampFadeIn {
    0%   { opacity: 0; transform: translateY(-6px); }
    100% { opacity: 1; transform: translateY(0); }
}

@keyframes flapOpen {
    0% {
        transform: rotateX(0deg);
        z-index: 5;
        animation-timing-function: linear;
    }
    46.451613% {
        transform: rotateX(-90deg);
        z-index: 0;
        animation-timing-function: cubic-bezier(0.34, 1.2, 0.64, 1);
    }
    80% {
        transform: rotateX(-155deg);
        z-index: 0;
        animation-timing-function: cubic-bezier(0.34, 1.2, 0.64, 1);
    }
    100% {
        transform: rotateX(-145deg);
        z-index: 0;
    }
}

@keyframes sealBreak {
    0%   { opacity: 1;   transform: translate(-50%, -50%) scale(1)    rotate(0deg); }
    25%  { opacity: 1;   transform: translate(-50%, -50%) scale(1.12) rotate(6deg); }
    65%  { opacity: 0.4; transform: translate(-50%, -50%) scale(0.55) rotate(-12deg); }
    100% { opacity: 0;   transform: translate(-50%, -50%) scale(0.1)  rotate(-22deg); }
}

@keyframes stampRipAway {
    0%   { transform: translateY(0)     skewX(0deg)  skewY(0deg);  opacity: 1; }
    20%  { transform: translateY(3px)   skewX(0deg)  skewY(0deg);  opacity: 1; }
    55%  { transform: translateY(-20px) skewX(-5deg) skewY(3deg);  opacity: 0.7; }
    100% { transform: translateY(-58px) skewX(4deg)  skewY(-2deg); opacity: 0; }
}

@keyframes letterEmerge {
    0%   { transform: translateY(0) scale(1); }
    34%  { transform: translateY(0) scale(1);     animation-timing-function: cubic-bezier(0.4, 0, 1, 1); }
    55%  { transform: translateY(-252px) scale(0.95); animation-timing-function: cubic-bezier(0, 0, 0.2, 1); }
    72%  { transform: translateY(-504px) scale(0.95); }
    100% { transform: translateY(-504px) scale(0.95); }
}

@keyframes letterFlipRotate {
    0%   { transform: perspective(var(--card-perspective)) rotateY(0deg)   scale(0.95); }
    12%  { transform: perspective(var(--card-perspective)) rotateY(21.6deg) scale(1.02); }
    25%  { transform: perspective(var(--card-perspective)) rotateY(45deg)   scale(1); }
    50%  { transform: perspective(var(--card-perspective)) rotateY(90deg)   scale(1); }
    100% { transform: perspective(var(--card-perspective)) rotateY(180deg) scale(1); }
}

.return-address { animation: stampFadeIn 0.8s ease 1.2s both; }
.wax-seal       { animation: sealDrop    1.1s cubic-bezier(0.34, 1.4, 0.64, 1) 0.5s both; }

.envelope.opening .flap-top    { animation: flapOpen 0.6s forwards; }
.envelope.opening .wax-seal    { animation: sealBreak     0.55s cubic-bezier(0.4, 0, 0.2, 1) 0.05s both; }
.envelope.opening .letter-bl      { animation: letterEmerge  var(--letter-emerge-duration) cubic-bezier(0.25, 0.46, 0.45, 0.94) 0s forwards; }
.envelope.opening .return-address {
    animation: none;
    opacity: 0;
    transition: opacity 0.25s ease 0.1s;
}

.letter-bl.is-3d {
    transform-style: preserve-3d;
    -webkit-transform-style: preserve-3d;
    transform-origin: center center;
    will-change: transform, left, top, width, height;
    z-index: var(--letter-invite-z);
}

.letter-bl.is-3d .page-wrapper.for-invitation {
    overflow: visible;
}

.letter-bl.is-3d .letter-preview,
.letter-bl.is-3d .page-wrapper.for-invitation {
    z-index: auto;
}

.letter-bl.is-3d.is-flipping {
    animation: letterFlipRotate var(--flip-duration) forwards linear;
    transition:
        left var(--flip-duration) linear,
        top var(--flip-duration) linear,
        width var(--flip-duration) linear,
        height var(--flip-duration) linear,
        border-radius var(--flip-duration) linear,
        box-shadow var(--flip-duration) linear;
}

@keyframes invitation-front-face-off {
    0%,
    49.99% {
        opacity: 1;
    }
    50%,
    100% {
        opacity: 0;
        visibility: hidden;
    }
}

@keyframes invitation-back-face-on {
    0%,
    49.99% {
        opacity: 0;
    }
    50%,
    100% {
        opacity: 1;
        visibility: visible;
    }
}

.letter-bl.is-3d.is-flipping .letter-preview {
    animation: invitation-front-face-off var(--flip-duration) forwards linear;
}

.letter-bl.is-3d.is-flipping .page-wrapper.for-invitation.is-primed {
    animation: invitation-back-face-on var(--flip-duration) forwards linear;
    backface-visibility: visible;
    -webkit-backface-visibility: visible;
}

.letter-bl.is-flat {
    transform-style: flat;
    -webkit-transform-style: flat;
    transform: none !important;
    will-change: auto;
    z-index: var(--letter-invite-z);
    overflow: hidden;
    pointer-events: auto;
}
.letter-bl.is-flat .letter-preview {
    display: none;
}
.letter-bl.is-flat .page-wrapper.for-invitation {
    transform: none;
    backface-visibility: visible;
    -webkit-backface-visibility: visible;
    z-index: auto;
}