/* Full-screen navigation motion: only the three implemented local views. */
html { overflow-x: hidden; }
body { overflow-x: hidden; }
.site-shell { transition: opacity 0.52s cubic-bezier(.22,1,.36,1), transform 0.52s cubic-bezier(.22,1,.36,1); }
body.page-enter-forward .site-shell { opacity: 0.65; transform: translate3d(8vw,0,0); }
body.page-enter-back .site-shell { opacity: 0.65; transform: translate3d(-8vw,0,0); }
body.page-leave-forward .site-shell { opacity: 0.35; transform: translate3d(-8vw,0,0); }
body.page-leave-back .site-shell { opacity: 0.35; transform: translate3d(8vw,0,0); }
.mobile-menu { transform: translate3d(0,-100%,0); transition: opacity 0.42s ease, transform 0.42s cubic-bezier(.22,1,.36,1), visibility 0.42s; }
.mobile-menu.is-open { transform: translate3d(0,0,0); }
@media (prefers-reduced-motion: reduce) {
    .mobile-menu,
.site-shell { transition: none !important; }
    body.page-enter-forward .site-shell, body.page-enter-back .site-shell,
    body.page-leave-forward .site-shell, body.page-leave-back .site-shell,
    .mobile-menu { transform: none; }
}

/* Direction-aware dimming: forward darkens from the right, back from the left.
   The incoming view brightens as its existing slide settles into place. */
body.page-leave-forward::after,
body.page-leave-back::after,
body.page-enter-forward::after,
body.page-enter-back::after {
    content: "";
    position: fixed;
    inset: 0;
    z-index: 9999;
    pointer-events: none;
    opacity: 0;
}
body.page-leave-forward::after,
body.page-enter-forward::after {
    background: linear-gradient(90deg, rgba(8, 5, 13, .22), rgba(8, 5, 13, .72));
}
body.page-leave-back::after,
body.page-enter-back::after {
    background: linear-gradient(270deg, rgba(8, 5, 13, .22), rgba(8, 5, 13, .72));
}
body.page-leave-forward::after,
body.page-leave-back::after {
    animation: mirsens-dim-out .44s ease-in forwards;
}
body.page-enter-forward::after,
body.page-enter-back::after {
    animation: mirsens-brighten-in .52s ease-out forwards;
}
@keyframes mirsens-dim-out { from { opacity: 0; } to { opacity: .72; } }
@keyframes mirsens-brighten-in { from { opacity: .72; } to { opacity: 0; } }
@media (prefers-reduced-motion: reduce) {
    body.page-leave-forward::after, body.page-leave-back::after,
    body.page-enter-forward::after, body.page-enter-back::after {
        animation: none !important;
        opacity: 0 !important;
    }
}

/* Cross-document View Transitions: overlapping old/new screenshots.
   Native navigation remains intact; unsupported browsers use the legacy fallback. */
@view-transition { navigation: none; }

@media (prefers-reduced-motion: no-preference) {
    html::view-transition-old(root),
    html::view-transition-new(root) {
        animation-duration: 680ms;
        animation-timing-function: cubic-bezier(.76, 0, .24, 1);
        animation-fill-mode: both;
    }
    html::view-transition-old(root) { animation-name: mirsens-vt-old-forward; }
    html::view-transition-new(root) { animation-name: mirsens-vt-new-forward; }
    html[data-transition-direction="back"]::view-transition-old(root) { animation-name: mirsens-vt-old-back; }
    html[data-transition-direction="back"]::view-transition-new(root) { animation-name: mirsens-vt-new-back; }
}
@keyframes mirsens-vt-old-forward {
    from { opacity: 1; transform: translateX(0) scale(1); filter: brightness(1); }
    to { opacity: .12; transform: translateX(-12%) scale(.985); filter: brightness(.55); }
}
@keyframes mirsens-vt-new-forward {
    from { opacity: .12; transform: translateX(18%) scale(1.015); filter: brightness(.65); }
    to { opacity: 1; transform: translateX(0) scale(1); filter: brightness(1); }
}
@keyframes mirsens-vt-old-back {
    from { opacity: 1; transform: translateX(0) scale(1); filter: brightness(1); }
    to { opacity: .12; transform: translateX(12%) scale(.985); filter: brightness(.55); }
}
@keyframes mirsens-vt-new-back {
    from { opacity: .12; transform: translateX(-18%) scale(1.015); filter: brightness(.65); }
    to { opacity: 1; transform: translateX(0) scale(1); filter: brightness(1); }
}
@media (prefers-reduced-motion: reduce) {
    html::view-transition-old(root), html::view-transition-new(root) {
        animation-duration: 0.01ms !important;
    }
}

/* Reliable entry animation: keyframes do not depend on a first-frame style flush. */
@media (prefers-reduced-motion: no-preference) {
  body.page-enter-forward .site-shell { animation: mirsens-stable-enter-forward .52s cubic-bezier(.22,1,.36,1) both; }
  body.page-enter-back .site-shell { animation: mirsens-stable-enter-back .52s cubic-bezier(.22,1,.36,1) both; }
}
@keyframes mirsens-stable-enter-forward { from { opacity: .65; transform: translate3d(8vw,0,0); } to { opacity: 1; transform: translate3d(0,0,0); } }
@keyframes mirsens-stable-enter-back { from { opacity: .65; transform: translate3d(-8vw,0,0); } to { opacity: 1; transform: translate3d(0,0,0); } }