/* ANOTHER WAY IN — Edition 02 enhancement layer.
   Everything here is additive: without fx.js the Edition 01 page renders unchanged. */

/* ---------- scroll progress ---------- */
.fx-progress{position:fixed;top:0;left:0;right:0;height:3px;z-index:60;pointer-events:none;background:var(--lime);transform-origin:0 50%;transform:scaleX(var(--p,0))}
@supports (animation-timeline: scroll()){
  .fx-progress{transform:scaleX(0);animation:fx-grow linear both;animation-timeline:scroll(root)}
  @keyframes fx-grow{to{transform:scaleX(1)}}
}

/* ---------- brand mark spins with scroll ---------- */
.fx .brand-symbol{transform:rotate(var(--spin,0deg));transition:transform .12s linear}

/* ---------- interference field (signature) ---------- */
.fx-field{position:absolute;inset:0;width:100%;height:100%;display:block;z-index:0}
.fx .hero-art .ring,.fx .hero-art .ring-line,.fx .hero-art .orbital-mark{opacity:.45}
.fx .signal-core{position:relative;backdrop-filter:blur(2px);background:rgba(17,29,27,.82)}
.fx-clock{display:block;margin-top:10px;font:10px var(--mono);letter-spacing:.18em;color:var(--muted)}
.fx-hint{position:absolute;left:24px;bottom:26px;z-index:2;font:11px var(--mono);letter-spacing:.14em;text-transform:uppercase;color:var(--muted);pointer-events:none;max-width:16em;line-height:1.5}
.fx-hint b{color:var(--lime);font-weight:500}

/* ---------- reveal on scroll ---------- */
.fx .fx-reveal{opacity:0;transform:translateY(28px);transition:opacity .7s cubic-bezier(.2,.7,.2,1),transform .7s cubic-bezier(.2,.7,.2,1);transition-delay:var(--d,0ms)}
.fx .fx-reveal.is-in{opacity:1;transform:none}

/* ---------- hero headline: letters assemble ---------- */
.fx-char{display:inline-block;opacity:0;transform:translateY(.35em) rotate(6deg);animation:fx-char .8s cubic-bezier(.2,.8,.2,1) forwards;animation-delay:var(--d)}
@keyframes fx-char{to{opacity:1;transform:none}}

/* ---------- spotlight cards ---------- */
.fx .route-card,.fx .work-link{position:relative;isolation:isolate}
.fx .route-card::before,.fx .work-link::before{content:'';position:absolute;inset:0;z-index:-1;pointer-events:none;opacity:0;transition:opacity .25s;
  background:radial-gradient(420px circle at var(--mx,50%) var(--my,50%),rgba(213,251,130,.13),transparent 60%)}
.fx .route-card:hover::before,.fx .work-link:hover::before,.fx .route-card:focus-visible::before,.fx .work-link:focus-visible::before{opacity:1}
.fx .work-link .arrow-bubble{transition:transform .3s cubic-bezier(.3,1.6,.5,1)}
.fx .work-link:hover .arrow-bubble{transform:translate(4px,-4px) rotate(8deg)}

/* ---------- magnetic buttons ---------- */
.fx .btn{transform:translate(var(--tx,0),var(--ty,0))}
.fx .btn:hover{transform:translate(var(--tx,0),calc(var(--ty,0px) - 3px))}

/* ---------- chooser view transition ---------- */
.choice-panel{view-transition-name:fx-choice}
::view-transition-old(fx-choice){animation:fx-out .22s ease-in both}
::view-transition-new(fx-choice){animation:fx-in .38s cubic-bezier(.2,.8,.2,1) both}
@keyframes fx-out{to{opacity:0;transform:translateX(-24px);filter:blur(4px)}}
@keyframes fx-in{from{opacity:0;transform:translateX(24px);filter:blur(4px)}}

/* ---------- header tools ---------- */
.fx-tool{font:11px var(--mono);letter-spacing:.11em;text-transform:uppercase;background:transparent;color:var(--muted);border:1px solid var(--line);padding:9px 11px;min-height:40px}
.fx-tool:hover{color:var(--ink);border-color:var(--lime)}
.fx-tool[aria-pressed="true"]{color:var(--bg);background:var(--lime);border-color:var(--lime)}
.fx-tool kbd{font:inherit;opacity:.7}

/* ---------- command palette ---------- */
.fx-palette{width:min(640px,calc(100% - 32px));max-height:min(560px,80vh);padding:0;border:1px solid var(--lime);background:var(--bg2);color:var(--ink);box-shadow:0 30px 80px #000a}
.fx-palette::backdrop{background:rgba(6,10,12,.72);backdrop-filter:blur(3px)}
.fx-palette[open]{animation:fx-pop .22s cubic-bezier(.2,.8,.2,1)}
@keyframes fx-pop{from{opacity:0;transform:translateY(12px) scale(.98)}}
.fx-palette label{display:block;padding:16px 18px 0;font:11px var(--mono);letter-spacing:.14em;color:var(--lime)}
.fx-palette input{width:100%;background:transparent;border:0;border-bottom:1px solid var(--line);color:var(--ink);font:500 22px var(--body);padding:10px 18px 16px;outline:none}
.fx-palette ul{list-style:none;margin:0;padding:6px;max-height:calc(min(560px,80vh) - 140px);overflow:auto}
.fx-palette li a{display:flex;justify-content:space-between;gap:16px;padding:11px 12px;text-decoration:none;border-left:2px solid transparent}
.fx-palette li a small{font:10px var(--mono);letter-spacing:.12em;color:var(--muted);text-transform:uppercase;white-space:nowrap}
.fx-palette li a[aria-selected="true"]{background:#22322c;border-left-color:var(--lime)}
.fx-palette .fx-empty{padding:16px 14px;color:var(--muted)}
.fx-palette footer{display:flex;gap:18px;padding:10px 18px;border-top:1px solid var(--line);font:10px var(--mono);letter-spacing:.12em;color:var(--muted);text-transform:uppercase}

/* ---------- 404 (moved out of inline styles so the CSP allows them) ---------- */
.nf{padding:15vh 0;min-height:80vh}
.nf h1{font-size:clamp(60px,9vw,150px);line-height:1;letter-spacing:-.08em}
.nf h1 span{color:var(--lime)}
.nf .nf-lead{max-width:35em;color:var(--muted);font-size:20px}

@media(max-width:760px){
  .fx-hint{left:16px;bottom:16px;font-size:10px}
  .fx-tool{width:100%;text-align:left}
}
@media (prefers-reduced-motion: reduce){
  .fx .fx-reveal{opacity:1;transform:none;transition:none}
  .fx-char{animation:none;opacity:1;transform:none}
  .fx .brand-symbol{transform:none}
  ::view-transition-old(fx-choice),::view-transition-new(fx-choice){animation:none}
  .fx-progress{animation:none}
}
@media(min-width:761px) and (max-width:1180px){
  .fx .nav-links{gap:14px}
  .fx-tool{padding:8px 9px}
  .fx-tool kbd{display:none}
}