/* Global motion layer: ambient background, contextual cursor, command palette, menu, section rail and
   heading transitions. Every colour is a token from styles.css or a transparency of the brand blues. */

/* ---------------------------------------------------------------- ambient environment */
.ambient{position:fixed;inset:0;z-index:-1;pointer-events:none;overflow:hidden;contain:strict}
.ambient i{position:absolute;left:50%;top:50%;width:80vmax;height:80vmax;margin:-40vmax 0 0 -40vmax;border-radius:50%;will-change:transform}
.ambient .a1{background:radial-gradient(closest-side,rgba(0,106,248,.15),rgba(0,106,248,.05) 55%,transparent);transform:translate3d(28vw,-30vh,0)}
.ambient .a2{background:radial-gradient(closest-side,rgba(61,139,255,.08),transparent 70%);transform:translate3d(-34vw,32vh,0)}
.ambient::after{content:"";position:absolute;inset:-50%;opacity:.07;
  background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='160' height='160'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.85' numOctaves='3' stitchTiles='stitch'/%3E%3CfeColorMatrix values='0 0 0 0 1 0 0 0 0 1 0 0 0 0 1 0 0 0 .6 0'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E")}
html[data-tier="low"] .ambient::after{display:none}
/* Let the environment glow through the alternate section bands */
.section-alt{background:rgba(13,16,23,.72)}

/* ---------------------------------------------------------------- contextual cursor (desktop pointers only) */
.cursor{position:fixed;left:0;top:0;z-index:90;pointer-events:none;opacity:0;transition:opacity .25s}
.cursor.on{opacity:1}
.cursor-ring{position:absolute;left:-14px;top:-14px;width:28px;height:28px;border-radius:50%;border:1px solid rgba(61,139,255,.7);
  transition:transform .3s var(--ease),background .3s,border-color .3s,opacity .2s}
.cursor-label{position:absolute;left:18px;top:14px;padding:7px 11px;border-radius:999px;background:var(--blue);color:#fff;
  font:600 11px/1 var(--head);letter-spacing:.14em;text-transform:uppercase;white-space:nowrap;opacity:0;transform:translateY(4px) scale(.9);transform-origin:0 0;
  transition:opacity .2s,transform .25s var(--ease);box-shadow:0 10px 30px -10px var(--blue-glow)}
.cursor.is-link .cursor-ring{transform:scale(1.6);background:rgba(0,106,248,.12);border-color:rgba(61,139,255,.35)}
.cursor.is-label .cursor-ring{transform:scale(.45);background:var(--blue);border-color:var(--blue)}
.cursor.is-label .cursor-label{opacity:1;transform:none}
.cursor.is-text .cursor-ring{opacity:0}
.cursor.is-down .cursor-ring{transform:scale(.8)}

/* ---------------------------------------------------------------- command palette */
.palette{position:fixed;inset:12vh 0 auto;margin:0 auto;width:min(620px,calc(100% - 32px));max-height:72vh;padding:0;border:1px solid var(--line-2);border-radius:18px;
  background:rgba(13,16,23,.96);color:var(--ink);box-shadow:0 40px 120px -30px rgba(0,0,0,.9),0 0 0 1px rgba(255,255,255,.02),0 0 90px -30px var(--blue-glow);overflow:hidden}
.palette::backdrop{background:rgba(8,9,12,.6);backdrop-filter:blur(6px);-webkit-backdrop-filter:blur(6px)}
.palette[open]{animation:pal-in .22s var(--ease)}
@keyframes pal-in{from{opacity:0;transform:translateY(-8px) scale(.985)}}
.palette-head{display:flex;align-items:center;gap:12px;padding:16px 18px;border-bottom:1px solid var(--line)}
.palette-head svg{flex:none;color:var(--muted)}
.palette-input{flex:1;min-width:0;border:0;background:none;color:var(--ink);font:500 17px/1.3 var(--body);outline:none}
.palette-input::placeholder{color:var(--muted)}
.palette-esc{font:600 11px/1 var(--head);letter-spacing:.08em;color:var(--muted);border:1px solid var(--line-2);border-radius:6px;padding:5px 7px;background:none;cursor:pointer}
.palette-list{max-height:calc(72vh - 64px);overflow:auto;padding:8px;overscroll-behavior:contain}
.palette-group{padding:12px 12px 6px;font:600 11px/1 var(--head);letter-spacing:.16em;text-transform:uppercase;color:var(--muted)}
.palette-item{display:flex;align-items:center;gap:14px;padding:12px;border-radius:12px;color:var(--muted-2);cursor:pointer}
.palette-item b{font:500 15.5px/1.3 var(--body);color:var(--ink)}
.palette-item small{margin-left:auto;font-size:12.5px;color:var(--muted);white-space:nowrap}
.palette-item i{flex:none;width:30px;height:30px;border-radius:9px;display:grid;place-items:center;border:1px solid var(--line-2);font:600 12px/1 var(--head);font-style:normal;color:var(--blue-2)}
.palette-item[aria-selected="true"]{background:rgba(0,106,248,.14)}
.palette-item[aria-selected="true"] i{border-color:var(--blue);background:var(--blue);color:#fff}
.palette-empty{padding:28px 14px;color:var(--muted);text-align:center}

/* ---------------------------------------------------------------- mobile menu: numbered, full screen */
@media (max-width:1024px){
  .nav{counter-reset:menu}
  .nav a:not(.btn){display:flex;align-items:baseline;gap:16px;counter-increment:menu}
  .nav a:not(.btn)::before{content:counter(menu,decimal-leading-zero);font:600 13px/1 var(--head);letter-spacing:.1em;color:var(--blue-2);transform:translateY(-.6em)}
  .nav.open a{animation:menu-in .5s var(--ease) both}
  .nav.open a:nth-child(2){animation-delay:.04s}.nav.open a:nth-child(3){animation-delay:.08s}.nav.open a:nth-child(4){animation-delay:.12s}
  .nav.open a:nth-child(5){animation-delay:.16s}.nav.open a:nth-child(6){animation-delay:.2s}.nav.open a:nth-child(7){animation-delay:.24s}
}
@keyframes menu-in{from{opacity:0;transform:translateY(18px)}}

/* ---------------------------------------------------------------- section rail (homepage, wide screens) */
.rail{position:fixed;left:max(14px,calc((100vw - var(--wrap)) / 2 - 150px));top:50%;z-index:40;transform:translateY(-50%);display:none;flex-direction:column;gap:2px;
  opacity:0;transition:opacity .4s}
.rail.on{opacity:1}
.rail a{display:flex;align-items:center;gap:10px;padding:6px 0;font:600 10.5px/1 var(--head);letter-spacing:.16em;text-transform:uppercase;color:var(--muted);transition:color .25s}
.rail a i{display:block;width:14px;height:1px;background:var(--line-2);transition:width .35s var(--ease),background .25s}
.rail a span{opacity:0;transform:translateX(-4px);transition:opacity .25s,transform .25s var(--ease)}
.rail:hover a span,.rail a.active span,.rail a:focus-visible span{opacity:1;transform:none}
.rail a.active{color:var(--ink)}
.rail a.active i{width:30px;background:var(--blue)}
@media (min-width:1600px){.rail{display:flex}}

/* ---------------------------------------------------------------- reduced motion */
@media (prefers-reduced-motion:reduce){
  .cursor,.rail{display:none!important}
  .palette[open]{animation:none}
}


/* ---------------------------------------------------------------- easter eggs (optional, never in the way) */
.egg-toast{position:fixed;left:50%;bottom:28px;z-index:95;transform:translateX(-50%);padding:12px 18px;border-radius:999px;background:rgba(13,16,23,.95);border:1px solid var(--blue);
  color:var(--ink);font:500 14px/1.3 var(--body);box-shadow:0 20px 50px -20px rgba(0,0,0,.9),0 0 40px -14px var(--blue-glow);animation:menu-in .35s var(--ease);transition:opacity .5s,transform .5s var(--ease)}
.egg-toast.out{opacity:0;transform:translate(-50%,10px)}
html.egg-spred .ambient .a1{animation:egg-flare 2.2s var(--ease)}
html.egg-spred .brand-mark{animation:egg-hop .7s var(--ease) 2}
@keyframes egg-flare{30%{filter:brightness(2.2) saturate(1.3)}}
@keyframes egg-hop{40%{transform:translateY(-5px) rotate(-6deg)}}
.egg-grid{margin-left:auto;padding:6px 10px;border-radius:8px;border:1px solid var(--line);background:none;color:var(--muted);font:600 11px/1 var(--head);letter-spacing:.12em;text-transform:uppercase;cursor:pointer}
.egg-grid:hover,.egg-grid[aria-pressed="true"]{color:var(--ink);border-color:var(--blue-2)}
.grid-overlay{position:fixed;inset:0;z-index:80;pointer-events:none;display:none}
.grid-overlay .wrap{height:100%;display:grid;grid-template-columns:repeat(12,1fr);gap:clamp(12px,2vw,24px)}
.grid-overlay i{background:rgba(0,106,248,.06);border-inline:1px solid rgba(61,139,255,.18)}
html.grid-mode .grid-overlay{display:block}
html.grid-mode main section{outline:1px dashed rgba(61,139,255,.28);outline-offset:-1px}
.site-header .brand{position:relative}
.egg-note{position:absolute;left:0;top:calc(100% + 8px);padding:6px 10px;border-radius:8px;background:var(--bg-3);border:1px solid var(--line-2);font:500 12px/1 var(--body);color:var(--muted-2);white-space:nowrap;pointer-events:none;opacity:0;transform:translateY(-4px);transition:opacity .25s,transform .25s var(--ease)}
.brand.egg-note-on .egg-note{opacity:1;transform:none}
@media (prefers-reduced-motion:reduce){.egg-toast{animation:none}}