/* ================= fx.css — cypherpunk interaction layer =================
   will-change hints: keep GPU layers only while animating to avoid memory bloat.
   Loaded after classic.css. Adds futuristic, terminal-style animations for
   interactions on ali.as. Style stays minimalist: only existing tokens
   (--acc / --warn / --line / --dim) are used — no new palette.
   All effects are disabled for retro themes (handled in fx.js) and respect
   prefers-reduced-motion (see guard at bottom). */

/* ---- shared sweep overlay (boot + view switches) ---- */
.fx-sweep{position:absolute;inset:0;pointer-events:none;overflow:hidden;z-index:6}
.fx-sweep::before{content:"";position:absolute;left:0;right:0;height:2px;
  background:linear-gradient(90deg,transparent,var(--acc),transparent);
  box-shadow:0 0 10px var(--acc),0 0 22px var(--accfade);top:-3px;opacity:0}
.fx-sweep.run::before{animation:fx-sweep-down .55s cubic-bezier(.22,.9,.35,1) forwards;will-change:top,opacity}
.fx-sweep.warn::before{background:linear-gradient(90deg,transparent,var(--warn),transparent);
  box-shadow:0 0 10px var(--warn),0 0 22px rgba(255,56,96,.25)}
@keyframes fx-sweep-down{0%{top:-3px;opacity:0}8%{opacity:1}92%{opacity:1}100%{top:100%;opacity:0}}

/* ---- panel wipe-in (new view reveals via scanline clip) ---- */
.panel.fx-wipe-in{animation:fx-wipe-in .5s cubic-bezier(.22,.9,.35,1) both;will-change:clip-path,opacity}
@keyframes fx-wipe-in{
  0%{clip-path:inset(0 0 100% 0);opacity:.25;filter:brightness(1.6)}
  35%{clip-path:inset(0 0 60% 0);opacity:.7}
  100%{clip-path:inset(0 0 0 0);opacity:1;filter:none}
}

/* ---- quick glitch-out flash (old view, non-blocking) ---- */
.panel.fx-glitch-out{animation:fx-glitch-out .26s steps(2,jump-none) both;will-change:transform,opacity}
@keyframes fx-glitch-out{
  0%{transform:translateX(0);opacity:1}
  25%{transform:translateX(-4px) skewX(-3deg);opacity:.85}
  50%{transform:translateX(5px) skewX(2deg);opacity:.5}
  75%{transform:translateX(-2px);opacity:.25}
  100%{transform:translateX(0);opacity:0}
}

/* ---- boot: UI visible immediately, panel reveals like a view switch ---- */
.fx-boot main{opacity:1}
.fx-boot.go main{opacity:1}
.fx-boot h1 a{display:inline-flex;align-items:center;min-width:5.2em}
.fx-boot h1 img{height:2.1rem;width:auto}
.fx-boot .panel{opacity:1;transform:none}
.fx-boot.go .panel{opacity:1;transform:none}
.fx-boot.go .panel.fx-wipe-in{transition:none}

/* ---- handshake overlay (create flow) ---- */
.fx-handshake{position:fixed;inset:0;background:rgba(5,8,7,.82);z-index:50;
  display:flex;align-items:center;justify-content:center;flex-direction:column;
  gap:.6rem;opacity:0;pointer-events:none}
.fx-handshake.on{opacity:1;pointer-events:auto;animation:fx-hs-fade .2s ease}
.fx-handshake .hs-title{color:var(--acc);font-size:.8rem;letter-spacing:.4em;
  text-transform:uppercase;text-shadow:0 0 8px var(--accfade)}
.fx-handshake .hs-bars{display:flex;gap:.3rem}
.fx-handshake .hs-bar{width:3px;height:1.4rem;background:var(--acc);
  box-shadow:0 0 6px var(--accfade);animation:fx-hs-bar .5s ease-in-out infinite}
.fx-handshake .hs-bar:nth-child(2){animation-delay:.08s}
.fx-handshake .hs-bar:nth-child(3){animation-delay:.16s}
.fx-handshake .hs-bar:nth-child(4){animation-delay:.24s}
.fx-handshake .hs-bar:nth-child(5){animation-delay:.32s}
.fx-handshake .hs-stream{color:var(--dim);font-size:.65rem;letter-spacing:.1em;
  height:1.2em;overflow:hidden;white-space:nowrap;text-align:center;max-width:80vw}
@keyframes fx-hs-fade{from{opacity:0}to{opacity:1}}
@keyframes fx-hs-bar{0%,100%{transform:scaleY(.3);opacity:.4}50%{transform:scaleY(1);opacity:1}}

/* ---- address / key glow pulse after creation ---- */
.addr.fx-pulse{animation:fx-pulse 1.6s ease-out 1;will-change:box-shadow}
@keyframes fx-pulse{
  0%{box-shadow:0 0 0 0 var(--accfade),inset 0 0 0 0 var(--accfade)}
  30%{box-shadow:0 0 18px 2px var(--accfade),inset 0 0 14px var(--accfade)}
  100%{box-shadow:0 0 0 0 transparent,inset 0 0 0 0 transparent}
}

/* ---- inbox messages: staggered entrance ---- */
.msg.fx-in{opacity:0;animation:fx-msg-in .42s cubic-bezier(.22,.9,.35,1) forwards;will-change:opacity,transform,clip-path}
@keyframes fx-msg-in{
  0%{opacity:0;transform:translateX(-10px);clip-path:inset(0 100% 0 0)}
  100%{opacity:1;transform:none;clip-path:inset(0 0 0 0)}
}
/* unread: pulsing left accent + sweep highlight */
.msg.unread{position:relative;overflow:hidden}
.msg.unread::before{content:"";position:absolute;left:0;top:0;bottom:0;width:2px;
  background:var(--acc);box-shadow:0 0 8px var(--acc);
  animation:fx-unread-pulse 2.2s ease-in-out infinite}
.msg.unread::after{content:"";position:absolute;left:-60%;top:0;bottom:0;width:60%;
  background:linear-gradient(90deg,transparent,var(--accfade),transparent);
  animation:fx-unread-sweep 3.4s ease-in-out infinite;pointer-events:none}
@keyframes fx-unread-pulse{0%,100%{opacity:.4}50%{opacity:1}}
@keyframes fx-unread-sweep{0%{left:-60%}60%,100%{left:120%}}

/* ---- button: reinforce hover text color so it never stays green on green ---- */
button{position:relative;overflow:visible}
button:hover{color:#000}
button.ghost:hover{color:var(--fg)}
button.burn:hover{color:#fff}
.seg button.on:hover{color:#000}
.seg button:hover{color:var(--fg)}

/* ---- seg / button hover: micro glitch jitter ---- */
button.fx-jitter{animation:fx-jitter .22s steps(3) 1}
@keyframes fx-jitter{0%{transform:translateX(0)}33%{transform:translateX(-1px)}66%{transform:translateX(1px)}100%{transform:translateX(0)}}

/* ---- seg "on": orbiting glitter dot (same as language dropdown border-scan) ----
   Uniform speed on all sides: fx.js generates per-button keyframes with timing
   proportional to side length (--fx-orbit-anim/--fx-orbit-dur); the static
   fx-seg-orbit keyframes below are only the fallback. */
.seg button.on{position:relative;overflow:visible}
.seg button.on::after{content:"";position:absolute;width:3px;height:3px;
  background:var(--acc);box-shadow:0 0 8px var(--acc),0 0 14px var(--accfade);
  border-radius:50%;top:0;left:0;transform:translate(-50%,-50%);
  animation:var(--fx-orbit-anim,fx-seg-orbit) var(--fx-orbit-dur,1.6s) linear infinite;will-change:top,left}
@keyframes fx-seg-orbit{
  0%{top:0;left:0}
  25%{top:0;left:100%}
  50%{top:100%;left:100%}
  75%{top:100%;left:0}
  100%{top:0;left:0}
}

/* ---- toast: typewriter cursor ---- */
.toast .fx-cursor{display:inline-block;margin-left:.1em;color:var(--bg);
  animation:fx-cursor 1s steps(1) infinite}
@keyframes fx-cursor{0%,49%{opacity:1}50%,100%{opacity:0}}

/* ---- burn: red glitch dissolve ---- */
.panel.fx-burn{animation:fx-burn .5s cubic-bezier(.4,0,.7,.2) forwards;will-change:transform,opacity,filter}
@keyframes fx-burn{
  0%{filter:none;transform:translateX(0);opacity:1}
  15%{transform:translateX(-5px) skewX(-4deg);filter:hue-rotate(0)}
  30%{transform:translateX(6px) skewX(3deg);box-shadow:0 0 24px rgba(255,56,96,.5)}
  45%{transform:translateX(-8px);filter:contrast(1.6)}
  60%{transform:translateX(4px);opacity:.7}
  75%{transform:translateX(-2px) skewX(1deg);opacity:.4}
  100%{transform:translateX(0);opacity:0;filter:contrast(2) brightness(.4)}
}

/* ---- input/select/textarea focus: traveling border dot ---- */
.fx-border-scan{position:absolute;pointer-events:none;z-index:2;overflow:visible}
.fx-border-scan .dot{position:absolute;width:3px;height:3px;background:var(--acc);
  box-shadow:0 0 8px var(--acc),0 0 14px var(--accfade);
  transform:translate(-50%,-50%);animation:fx-border-dots 1.6s linear infinite;will-change:top,left}
@keyframes fx-border-dots{
  0%{top:0;left:0}
  25%{top:0;left:100%}
  50%{top:100%;left:100%}
  75%{top:100%;left:0}
  100%{top:0;left:0}
}

/* ---- particle burst canvas ---- */
#fx-burst{position:fixed;inset:0;pointer-events:none;z-index:40}

/* ---- reduced motion: kill all fx animations ---- */
@media (prefers-reduced-motion: reduce){
  .fx-sweep.run::before,.panel.fx-wipe-in,.panel.fx-glitch-out,.addr.fx-pulse,
  .msg.fx-in,.msg.unread::before,.msg.unread::after,
  button.fx-jitter,.seg button.on::after,.fx-border-scan .dot,.toast .fx-cursor,.panel.fx-burn,
  .fx-handshake .hs-bar{animation:none !important}
  .fx-boot main,.fx-boot .panel,.fx-boot.go .panel{opacity:1 !important;transform:none !important;filter:none !important}
  .panel.fx-wipe-in{clip-path:none !important;filter:none !important}
}