.page-transition { position: fixed; inset: 0; z-index: 1000; overflow: hidden; visibility: hidden; pointer-events: none; color: #f3efe8; }
html[data-navigation] .page-transition { visibility: visible; pointer-events: auto; }
html[data-navigation="covered"]::before { content: ""; position: fixed; inset: 0; z-index: 999; background: #09080c; }
.navigation-panel { position: absolute; transition: transform .65s cubic-bezier(.76,0,.24,1); }
.navigation-panel-top { inset: 0 0 50%; background: radial-gradient(ellipse at 24% 100%, #842eea30, transparent 60%), #0b0910; transform: translateX(-101%); }
.navigation-panel-bottom { inset: 50% 0 0; background: radial-gradient(ellipse at 76% 0, #d9ac621a, transparent 60%), #08080b; transform: translateX(101%); }
html[data-navigation="cover"] .navigation-panel,
html[data-navigation="covered"] .navigation-panel { transform: translate(0, 0); }
html[data-navigation="covered"] .page-transition * { transition: none; }
html[data-navigation="reveal"] .navigation-panel-top { transform: translateX(101%); }
html[data-navigation="reveal"] .navigation-panel-bottom { transform: translateX(-101%); }
.navigation-line { position: absolute; z-index: 2; left: 0; right: 0; top: 50%; height: 1px; background: linear-gradient(90deg, transparent, #f0d099, transparent); opacity: 0; transform: scaleX(0); transition: transform .35s ease, opacity .2s ease; }
html[data-navigation="cover"] .navigation-line { transition-delay: .25s; }
html[data-navigation="cover"] .navigation-line,
html[data-navigation="covered"] .navigation-line { opacity: .9; transform: scaleX(1); }
.navigation-copy { position: absolute; z-index: 3; inset: 0; display: flex; flex-direction: column; align-items: center; justify-content: center; opacity: 0; transform: translateY(20px); transition: opacity .24s ease, transform .36s ease; }
.navigation-index, .navigation-motto { color: #aaa5ad; font-size: 12px; letter-spacing: .32em; text-transform: uppercase; }
.navigation-title { margin: 18px 0 22px; font-family: Arial, Helvetica, sans-serif; font-size: clamp(80px, 12vw, 210px); font-weight: 800; line-height: .8; letter-spacing: -.075em; }
.navigation-motto { color: #f0d099; }
html[data-navigation="cover"] .navigation-copy { transition-delay: .3s; }
html[data-navigation="cover"] .navigation-copy,
html[data-navigation="covered"] .navigation-copy { opacity: 1; transform: none; }
html[data-navigation="reveal"] .navigation-copy { opacity: 0; transform: translateY(-18px); }
html[data-navigation-mode="mobile"] .navigation-panel-top { inset: 0; background: radial-gradient(ellipse at 50% 15%, #8c43e657, transparent 55%), #09080c; transform: translateY(-101%); transition-duration: .52s; }
html[data-navigation-mode="mobile"] .navigation-panel-bottom { display: none; }
.navigation-leading-edge { display: none; }
html[data-navigation-mode="mobile"] .navigation-leading-edge { display: block; position: absolute; bottom: 0; left: 0; right: 0; height: 7px; background: linear-gradient(90deg, #8a4cff, #f0d099, #8a4cff); box-shadow: 0 0 24px #bc83ff55; }
html[data-navigation-mode="mobile"][data-navigation="cover"] .navigation-panel-top,
html[data-navigation-mode="mobile"][data-navigation="covered"] .navigation-panel-top { transform: translateY(0); }
html[data-navigation-mode="mobile"][data-navigation="reveal"] .navigation-panel-top { transform: translateY(101%); transition-duration: .58s; }
html[data-navigation-mode="mobile"] .navigation-line { top: auto; bottom: 62px; left: 24px; right: 24px; transform-origin: left; }
html[data-navigation-mode="mobile"] .navigation-copy { inset: auto 24px 84px; align-items: flex-start; justify-content: flex-end; }
html[data-navigation-mode="mobile"] .navigation-title { font-size: clamp(58px, 17vw, 130px); margin: 16px 0 20px; }
html[data-navigation-mode="mobile"] .navigation-index,
html[data-navigation-mode="mobile"] .navigation-motto { font-size: 10px; letter-spacing: .25em; }
@media (prefers-reduced-motion: reduce) {
  .page-transition, html[data-navigation="covered"]::before { display: none!important; }
}