/* Local invitation: a quiet entrance, with the original wax seal artwork. */
#wrap .stage-3d {
    background: radial-gradient(circle at 50% 42%, #34131e 0%, #250d16 58%, #1a0a10 100%);
    transition: opacity .56s ease;
}

html.mc-envelope-preparing #wrap .stage-3d .envelope-wrapper {
    opacity: 0;
    transform: translate3d(0, 12px, 0) scale(.985);
}

html.mc-envelope-ready body:not(.anim-started) #wrap .stage-3d .envelope-wrapper {
    animation: mcEnvelopeArrive .84s cubic-bezier(.2, .7, .2, 1) both;
}

@keyframes mcEnvelopeArrive {
    from { opacity: 0; transform: translate3d(0, 12px, 0) scale(.985); }
    to { opacity: 1; transform: translate3d(0, 0, 0) scale(1); }
}

#wrap .stage-3d .envelope-wrapper {
    border-radius: 2px;
    -webkit-tap-highlight-color: transparent;
    touch-action: manipulation;
}

#wrap .stage-3d .envelope-wrapper:focus-visible {
    outline: 2px solid #e5c995;
    outline-offset: 10px;
}

#wrap .stage-3d .seal {
    width: 96px;
    height: 96px;
    contain: layout paint;
}

#wrap .stage-3d .seal img {
    width: 96px;
    height: 96px;
    will-change: auto;
    backface-visibility: hidden;
}

html.mc-seal-unavailable #wrap .stage-3d .seal { visibility: hidden; }

html.mc-envelope-ready body:not(.anim-started) #wrap .stage-3d .seal {
    animation: mcSealBreath 4.8s ease-in-out 1.1s infinite;
}

@keyframes mcSealBreath {
    0%, 100% { transform: translate(-50%, -50%) scale(1); }
    50% { transform: translate(-50%, -50%) scale(1.018); }
}

#wrap .stage-3d .tap-hint {
    color: rgba(255, 247, 235, .87);
    font-size: .85rem;
    letter-spacing: .15em;
    text-align: center;
    white-space: nowrap;
}

html.mc-envelope-ready body:not(.anim-started) #wrap .stage-3d .tap-hint {
    animation: mcHintBreath 3.8s ease-in-out 1.2s infinite;
}

@keyframes mcHintBreath {
    0%, 100% { opacity: .78; }
    50% { opacity: 1; }
}

body:not(.mc-envelope-exited) #music-control {
    visibility: hidden !important;
    pointer-events: none !important;
}

body.mc-envelope-exited #music-control { visibility: visible; }
body.mc-envelope-exited #wrap .stage-3d { visibility: hidden; }
#burst { display: none !important; }

#wrap .stage-3d .top-flap {
    transition: transform .76s cubic-bezier(.23, .72, .22, 1), opacity .42s ease, z-index .2s linear;
}

#wrap .stage-3d .card-container {
    transition: bottom .84s cubic-bezier(.22, .68, .2, 1), transform .62s cubic-bezier(.22, .68, .2, 1), opacity .52s ease;
}

#wrap .stage-3d .front-flap,
#wrap .stage-3d .envelope::before {
    transition: opacity .55s ease, transform .7s cubic-bezier(.22, .68, .2, 1);
}

body.step-2 #wrap .stage-3d .card-container { bottom: 225px; }
body.step-3 #wrap .stage-3d .card-container {
    bottom: 225px;
    opacity: 0;
    transform: translate3d(0, -28px, 0) scale(1.05);
}
body.step-3 #wrap .stage-3d .envelope::before,
body.step-3 #wrap .stage-3d .front-flap {
    opacity: 0;
    transform: translate3d(0, 50px, 0) scale(.98);
}
body.step-3 #wrap .stage-3d .top-flap {
    opacity: 0;
    transform: rotateX(180deg) translateY(-40px);
}

body.finished #final-website { animation: mcSiteReveal .8s ease both; }
@keyframes mcSiteReveal { from { opacity: 0; } to { opacity: 1; } }

body.finished #intro.intro-section {
    animation: mcHeroReveal .9s cubic-bezier(.22, .68, .2, 1) both;
}
@keyframes mcHeroReveal {
    from { opacity: .72; transform: translate3d(0, 14px, 0); }
    to { opacity: 1; transform: translate3d(0, 0, 0); }
}

html.mc-motion-ready .mc-refine-reveal {
    opacity: 0;
    transform: translate3d(0, 18px, 0);
    transition: opacity .76s ease, transform .76s cubic-bezier(.22, .68, .2, 1);
}

html.mc-motion-ready .mc-refine-reveal.mc-refine-visible {
    opacity: 1;
    transform: translate3d(0, 0, 0);
}

#wrap .btn-grl,
#mc-rsvp-personalized .mc-rsvp-button,
#mc-photo-story .mc-gallery-controls button {
    transition: transform .24s ease, box-shadow .24s ease, background-color .24s ease;
}

@media (hover: hover) {
    #wrap .btn-grl:hover,
    #mc-rsvp-personalized .mc-rsvp-button:hover,
    #mc-photo-story .mc-gallery-controls button:hover { transform: translateY(-2px); }
    #mc-photo-story .mc-gallery-item img { transition: transform .5s ease; }
    #mc-photo-story .mc-gallery-item:hover img { transform: scale(1.012); }
}

#wrap .btn-grl:active,
#mc-rsvp-personalized .mc-rsvp-button:active,
#mc-photo-story .mc-gallery-controls button:active { transform: translateY(0) scale(.985); }

#wrap .btn-grl:focus-visible,
#mc-rsvp-personalized .mc-rsvp-button:focus-visible,
#mc-photo-story .mc-gallery-controls button:focus-visible {
    outline: 2px solid #8b3447;
    outline-offset: 3px;
}

@media (prefers-reduced-motion: reduce) {
    html { scroll-behavior: auto; }
    html.mc-envelope-ready body:not(.anim-started) #wrap .stage-3d .envelope-wrapper,
    html.mc-envelope-ready body:not(.anim-started) #wrap .stage-3d .seal,
    html.mc-envelope-ready body:not(.anim-started) #wrap .stage-3d .tap-hint,
    body.finished #final-website,
    body.finished #intro.intro-section { animation: none !important; }
    #wrap .stage-3d *, #wrap .stage-3d,
    html.mc-motion-ready .mc-refine-reveal,
    #wrap .btn-grl,
    #mc-rsvp-personalized .mc-rsvp-button,
    #mc-photo-story .mc-gallery-controls button,
    #mc-photo-story .mc-gallery-item img { transition-duration: .01ms !important; }
    html.mc-envelope-ready #wrap .stage-3d .envelope-wrapper,
    html.mc-motion-ready .mc-refine-reveal { opacity: 1; transform: none; }
    body.finished #final-website { opacity: 1 !important; }
}