/* The header frame and brand stay still; its controls fade through shadow. */
@property --norae-dust-grain {
  syntax: '<percentage>';
  inherits: false;
  initial-value: 100%;
}
html{background-color:#141714}
html.norae-dust-pending main,html.norae-dust-pending body>footer{opacity:0;pointer-events:none;animation:norae-dust-rescue 0s 1.8s forwards}
.norae-dust-canvas{position:fixed;inset:0;display:block;width:100%;height:100%;z-index:80;pointer-events:none;contain:strict}
.norae-leaving .norae-dust-surface,.norae-entering .norae-dust-surface{will-change:opacity,filter,transform;transform-origin:center;mask-image:radial-gradient(ellipse at 37% 43%,#000 var(--norae-dust-grain),transparent calc(var(--norae-dust-grain) + 14%));mask-size:3px 4px;-webkit-mask-image:radial-gradient(ellipse at 37% 43%,#000 var(--norae-dust-grain),transparent calc(var(--norae-dust-grain) + 14%));-webkit-mask-size:3px 4px}
.norae-leaving .norae-dust-surface{animation:norae-dust-away 900ms linear both;pointer-events:none}
.norae-entering .norae-dust-surface{animation:norae-dust-together 1100ms linear both}
@keyframes norae-dust-away{
  0%{--norae-dust-grain:100%;opacity:1;filter:blur(0);transform:translate(0,0)}
  22%{--norae-dust-grain:66%;opacity:.95;filter:blur(.2px)}
  50%{--norae-dust-grain:24%;opacity:.48;filter:blur(.8px)}
  78%,100%{--norae-dust-grain:0%;opacity:0;filter:blur(2px);transform:translate(14px,-6px)}
}
@keyframes norae-dust-together{
  0%,18%{--norae-dust-grain:0%;opacity:0;filter:blur(2px);transform:translate(14px,-6px)}
  48%{--norae-dust-grain:24%;opacity:.48;filter:blur(.8px)}
  78%{--norae-dust-grain:66%;opacity:.95;filter:blur(.2px)}
  100%{--norae-dust-grain:100%;opacity:1;filter:blur(0);transform:translate(0,0)}
}
@keyframes norae-dust-rescue{to{opacity:1;pointer-events:auto}}
html.norae-dust-pending body>header>:is(nav,.header-actions){opacity:0;pointer-events:none}
.norae-leaving body>header>:is(nav,.header-actions),.norae-entering body>header>:is(nav,.header-actions){will-change:opacity,filter;pointer-events:none}
.norae-leaving body>header>:is(nav,.header-actions){animation:norae-header-away 900ms ease-in-out both}
.norae-entering body>header>:is(nav,.header-actions){animation:norae-header-return 1100ms ease-out both}
@keyframes norae-header-away{
  0%{opacity:1;filter:blur(0) brightness(1)}
  75%,100%{opacity:0;filter:blur(5px) brightness(.35)}
}
@keyframes norae-header-return{
  0%,18%{opacity:0;filter:blur(5px) brightness(.35)}
  100%{opacity:1;filter:blur(0) brightness(1)}
}
@media(prefers-reduced-motion:reduce){
  html.norae-dust-pending main,html.norae-dust-pending body>footer{opacity:1;pointer-events:auto;animation:none}
  .norae-leaving .norae-dust-surface,.norae-entering .norae-dust-surface{animation:none;mask-image:none;-webkit-mask-image:none;filter:none;transform:none;will-change:auto}
  .norae-dust-canvas{display:none}
  html.norae-dust-pending body>header>:is(nav,.header-actions),.norae-leaving body>header>:is(nav,.header-actions),.norae-entering body>header>:is(nav,.header-actions){opacity:1;filter:none;animation:none;pointer-events:auto;will-change:auto}
}

.navigation-feedback{position:fixed;z-index:100;bottom:120px;left:50%;transform:translateX(-50%);width:min(560px,calc(100% - 32px));display:flex;flex-wrap:wrap;align-items:center;gap:12px;padding:18px 22px;border:1px solid #d9fa7750;border-radius:22px;background:#20261ef5;color:var(--ink);box-shadow:0 14px 50px #0006;font-size:14px}
.navigation-feedback span{flex:1 1 240px}
.navigation-feedback button{border:1px solid #ffffff30;border-radius:999px;padding:9px 15px;background:#d9fa7715;color:var(--lime);font:inherit;cursor:pointer}
main h1[tabindex="-1"]:focus{outline:none}