/* A short envelope opening, independent of network loading. */
.invitation-intro {
    display: none;
    position: fixed;
    inset: 0;
    z-index: 100;
    overflow: hidden;
    place-items: center;
    padding: 64px 24px;
    min-height: 100svh;
    background: radial-gradient(ellipse at 50% 42%, #29494b 0, #132d32 48%, #0c2025 100%);
    color: var(--paper);
    isolation: isolate;
}
.intro-loading { overflow: hidden; }
.intro-loading .invitation-intro { display: grid; }
.invitation-intro:focus { outline: none; }
.intro-loading .hero-enter { animation: none; }
.invitation-intro::before {
    content: '';
    position: absolute;
    inset: 20px;
    border: 1px solid #b5996340;
    pointer-events: none;
}
.invitation-intro::after {
    content: '';
    position: absolute;
    inset: 27px;
    border: 1px solid #b5996318;
    pointer-events: none;
}
.intro-content { text-align: center; position: relative; z-index: 1; }
.intro-kicker {
    color: var(--gold-light);
    font-size: 11px;
    letter-spacing: 2px;
    margin-bottom: 94px;
    animation: intro-rise .8s both;
}
.intro-envelope {
    position: relative;
    width: 300px;
    height: 192px;
    margin: 0 auto 48px;
    perspective: 1000px;
    animation: envelope-arrive 1s cubic-bezier(.2,.7,.25,1) both;
}
.envelope-back {
    position: absolute;
    inset: 0;
    border-radius: 3px;
    background: #dbcfb1;
    box-shadow: 0 28px 50px #0004, 0 0 65px #c4aa7110;
}
.envelope-letter {
    position: absolute;
    inset: 10px 16px 4px;
    z-index: 2;
    display: flex;
    align-items: center;
    justify-content: center;
    flex-direction: column;
    background: var(--paper);
    color: var(--navy);
    border: 1px solid var(--gold-light);
    outline: 1px solid #fff8e9;
    outline-offset: 5px;
    transition: transform .85s .3s cubic-bezier(.22,.7,.25,1);
}
.letter-star { color: var(--gold); font-size: 15px; margin-bottom: 4px; }
.letter-names { font: 35px/1.7 var(--display); }
.letter-names i { font: italic 22px Georgia,serif; color: var(--gold); margin: 0 8px; }
.letter-caption { font-size: 9px; color: var(--muted); margin-top: 8px; }
.envelope-front {
    position: absolute;
    inset: 0;
    z-index: 3;
    border-radius: 0 0 3px 3px;
    clip-path: polygon(0 0, 50% 53%, 100% 0, 100% 100%, 0 100%);
    background: linear-gradient(33deg, transparent 49.7%, #bdaa8238 50%, transparent 50.4%),
        linear-gradient(-33deg, #ece3ce 49.7%, #cbbb972e 50%, #f5ecda 50.4%);
}
.envelope-flap {
    position: absolute;
    inset: 0 0 auto;
    height: 108px;
    z-index: 4;
    background: linear-gradient(170deg, #fff7e6, #e4d6b7);
    clip-path: polygon(0 0, 100% 0, 50% 100%);
    transform-origin: top center;
    backface-visibility: hidden;
    transition: transform .75s cubic-bezier(.4,0,.2,1);
}
.envelope-seal {
    position: absolute;
    z-index: 5;
    top: 82px;
    left: calc(50% - 26px);
    width: 52px;
    height: 52px;
    display: grid;
    place-items: center;
    border-radius: 48% 51% 47% 50%;
    background: linear-gradient(135deg, #e2cb94, #a98749 55%, #d5bb7e);
    box-shadow: 0 4px 9px #74603c50, inset 0 0 0 4px #c1a46b, inset 0 0 0 5px #ead29d;
    color: #fff4d4;
    transform: rotate(-12deg);
    transition: opacity .25s, transform .4s;
}
.envelope-seal span { font: 30px Georgia,serif; }
.intro-content h2 { font: 34px/1.7 var(--display); animation: intro-rise .8s .2s both; }
.intro-subtitle { font: 23px/1.8 var(--display); color: var(--gold-light); margin-top: 8px; animation: intro-rise .8s .35s both; }
.intro-subtitle span { font: italic 16px Georgia,serif; margin: 0 8px; }
.intro-loading-line { height: 1px; width: 104px; margin: 27px auto 13px; background: #b5996330; overflow: hidden; }
.intro-loading-line span { display: block; width: 100%; height: 100%; background: var(--gold-light); transform-origin: right; animation: intro-line 1.6s ease-in-out both; }
.intro-note { font-size: 10px; color: #a7b7b1; }
.intro-skip {
    position: absolute;
    top: max(40px, env(safe-area-inset-top));
    left: 40px;
    border: 1px solid #b5996360;
    border-radius: 30px;
    background: transparent;
    color: var(--gold-light);
    padding: 10px 18px;
    min-height: 44px;
    cursor: pointer;
    font: 10px var(--body);
    z-index: 2;
    transition: background .2s;
}
.intro-skip span { margin-right: 10px; }
.intro-skip:hover { background: #b5996320; }
.intro-skip:focus-visible { outline: 2px solid var(--gold-light); outline-offset: 4px; }
.intro-bottom-note { position: absolute; bottom: max(38px, env(safe-area-inset-bottom)); font: 17px var(--display); color: #b5996390; }
.intro-orbit { position: absolute; border: 1px solid #b599631a; border-radius: 50%; pointer-events: none; }
.intro-orbit-outer { width: 760px; height: 760px; }
.intro-orbit-inner { width: 630px; height: 630px; border-style: dashed; opacity: .7; animation: intro-orbit 45s linear infinite; }
.intro-spark { position: absolute; color: var(--gold-light); animation: intro-twinkle 2s ease-in-out infinite alternate; }
.intro-spark-one { top: 26%; left: 24%; font-size: 25px; }
.intro-spark-two { top: 65%; right: 24%; font-size: 13px; animation-delay: .6s; }
.intro-spark-three { top: 20%; right: 30%; font-size: 16px; animation-delay: .3s; }
.intro-opening .envelope-flap { transform: rotateX(180deg); }
.intro-opening .envelope-seal { opacity: 0; transform: translateY(15px) rotate(12deg) scale(.8); }
.intro-opening .envelope-letter { transform: translateY(-85px); }
.intro-opening .invitation-intro { animation: intro-depart .6s 1s both; }
@keyframes intro-rise { from { opacity: 0; transform: translateY(12px); } to { opacity: 1; transform: none; } }
@keyframes envelope-arrive { from { opacity: 0; transform: translateY(25px) rotate(-5deg) scale(.94); } to { opacity: 1; transform: none; } }
@keyframes intro-line { from { transform: scaleX(0); } to { transform: scaleX(1); } }
@keyframes intro-orbit { to { transform: rotate(360deg); } }
@keyframes intro-twinkle { from { opacity: .25; transform: scale(.8); } to { opacity: .8; transform: scale(1.1); } }
@keyframes intro-depart { to { opacity: 0; transform: scale(1.04); } }
@media (max-width: 600px) {
    .invitation-intro { padding: 72px 20px; }
    .invitation-intro::before { inset: 12px; }
    .invitation-intro::after { inset: 18px; }
    .intro-kicker { font-size: 9px; letter-spacing: 1px; margin-bottom: 85px; }
    .intro-envelope { width: 260px; height: 170px; margin-bottom: 35px; }
    .envelope-flap { height: 96px; }
    .envelope-seal { top: 69px; }
    .intro-content h2 { font-size: 29px; }
    .letter-names { font-size: 30px; }
    .intro-skip { top: 30px; left: 30px; padding: 8px 14px; }
    .intro-spark-one { left: 12%; top: 26%; }
    .intro-spark-two { right: 12%; top: 75%; }
    .intro-spark-three { right: 18%; top: 18%; }
    .intro-bottom-note { bottom: 28px; }
}
@media (max-height: 650px) {
    .intro-kicker { margin-bottom: 50px; }
    .intro-envelope { width: 230px; height: 145px; margin-bottom: 20px; }
    .intro-opening .envelope-letter { transform: translateY(-60px); }
    .envelope-flap { height: 80px; }
    .envelope-seal { top: 58px; }
    .intro-content h2 { font-size: 25px; }
    .intro-bottom-note { display: none; }
    .intro-loading-line { margin-top: 12px; }
}
@media (prefers-reduced-motion: reduce) {
    .intro-loading { overflow: auto; }
    .intro-loading .invitation-intro { display: none; }
}