/* Progressive enhancement for PHP document navigation. No click interception. */
html{background:var(--bg,#080808)}
::view-transition-group(root){animation-duration:300ms;animation-timing-function:cubic-bezier(.22,1,.36,1)}
::view-transition-old(root){animation:120ms ease-out both page-leave;mix-blend-mode:normal}
::view-transition-new(root){animation:300ms cubic-bezier(.22,1,.36,1) both page-arrive;mix-blend-mode:normal}
@keyframes page-leave{to{opacity:0}}
@keyframes page-arrive{from{opacity:0}to{opacity:1}}
html[data-route-entry] main{animation:page-arrive 240ms ease-out both}
html[data-restored]{scroll-behavior:auto}
/* The original rotating brain, contained in a fixed-size, black intro. */
#site-intro{position:fixed;inset:0;z-index:100;background:var(--bg,#080808);place-items:center;opacity:0;transition:opacity 260ms ease;pointer-events:none}
html[data-intro] #site-intro{display:grid;opacity:1;pointer-events:auto}
.intro-mark{background:var(--bg);width:180px;display:flex;flex-direction:column;align-items:center;gap:22px;animation:intro-enter 180ms ease-out both;transition:opacity 180ms ease,transform 260ms var(--ease)}
.intro-mark video{width:168px;height:128px;object-fit:contain;mix-blend-mode:lighten}
.intro-mark>span{font-family:var(--display);font-size:13px;font-weight:600;letter-spacing:.12em;white-space:nowrap}
html[data-intro="leaving"] #site-intro{opacity:0;pointer-events:none}
html[data-intro="leaving"] .intro-mark{opacity:0;transform:scale(.98)}
@keyframes intro-enter{from{opacity:0}to{opacity:1}}
/* One understated entrance, with shopping immediately available underneath. */
html[data-experience="pending"] .hero-line>span{opacity:0;transform:translateY(18px)}
html[data-experience="pending"] .hero-edition,
html[data-experience="pending"] .hero-shop,
html[data-experience="pending"] .site-header{opacity:0}
.hero-line>span{transition:opacity 650ms var(--ease),transform 800ms var(--ease)}
.hero-line+.hero-line>span{transition-delay:65ms}
.hero-edition{transition:opacity 600ms var(--ease) 120ms}
.hero-shop{transition:opacity 400ms ease 160ms,border-color 180ms ease}
.site-header{transition:opacity 400ms ease,background var(--duration),border-color var(--duration)}
/* A small mark appears only when a document request is actually taking time. */
#route-progress{position:fixed;bottom:24px;right:var(--gutter);z-index:60;width:64px;height:50px;background:var(--bg);pointer-events:none}
html[data-navigation-pending] #route-progress{display:block;animation:intro-enter 180ms ease both}
.route-progress video{width:64px;height:50px;object-fit:contain;mix-blend-mode:lighten}
.nav-desktop a[data-pending]::after,.nav-desktop a:focus-visible::after{transform:scaleX(1)}
.nav-desktop a{transition:color 180ms ease}
.menu-dialog nav a{transition:color 180ms ease}
@media(max-width:480px){.intro-mark{width:160px;gap:18px}.intro-mark video{width:150px;height:114px}.intro-mark>span{font-size:12px}}
@media(prefers-reduced-motion:reduce){
  @view-transition{navigation:none}
  ::view-transition-group(*),::view-transition-old(*),::view-transition-new(*){animation:none!important}
  html{scroll-behavior:auto}
  html[data-intro] #site-intro,html[data-navigation-pending] #route-progress{display:none}
  html[data-experience="pending"] .hero-line>span,
  html[data-experience="pending"] .hero-edition,
  html[data-experience="pending"] .hero-shop,
  html[data-experience="pending"] .site-header{opacity:1;transform:none}
}