/* v4: reveal choreography, post overlay, glass polish, flips, hidden effects. */
:root{--fx-noise:url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='200' height='200'><filter id='n'><feTurbulence type='fractalNoise' baseFrequency='.85' numOctaves='2' stitchTiles='stitch'/><feColorMatrix values='0 0 0 0 1  0 0 0 0 1  0 0 0 0 1  0 0 0 1.3 -.25'/></filter><rect width='100%' height='100%' filter='url(%23n)'/></svg>")}

/* ---- reveal: staggered, blur-to-sharp ---- */
html.fx-pre:not(.fx-reveal) .top .brand,html.fx-pre:not(.fx-reveal) .top .controls>*,html.fx-pre:not(.fx-reveal) .hero-copy,
html.fx-pre:not(.fx-reveal) .stats .stat,html.fx-pre:not(.fx-reveal) .readout,html.fx-pre:not(.fx-reveal) .cf-labels,
html.fx-pre:not(.fx-reveal) .station-launch,html.fx-pre:not(.fx-reveal) .cf-index-btn,html.fx-pre:not(.fx-reveal) .footer-note{opacity:0}
html.fx-reveal:not(.fx-revealed) .top .brand{animation:fx-in .9s cubic-bezier(.2,.8,.2,1) both}
html.fx-reveal:not(.fx-revealed) .top .controls>*{animation:fx-in .8s cubic-bezier(.2,.8,.2,1) both}
html.fx-reveal:not(.fx-revealed) .top .controls>*:nth-child(1){animation-delay:.12s}
html.fx-reveal:not(.fx-revealed) .top .controls>*:nth-child(2){animation-delay:.2s}
html.fx-reveal:not(.fx-revealed) .top .controls>*:nth-child(3){animation-delay:.28s}
html.fx-reveal:not(.fx-revealed) .top .controls>*:nth-child(4){animation-delay:.36s}
html.fx-reveal:not(.fx-revealed) .hero-copy{animation:fx-in 1s .3s cubic-bezier(.2,.8,.2,1) both}
html.fx-reveal:not(.fx-revealed) .stats .stat{animation:fx-up .8s cubic-bezier(.2,.8,.2,1) both}
html.fx-reveal:not(.fx-revealed) .stats .stat:nth-child(2){animation-delay:.08s}
html.fx-reveal:not(.fx-revealed) .stats .stat:nth-child(3){animation-delay:.16s}
html.fx-reveal:not(.fx-revealed) .stats .stat:nth-child(4){animation-delay:.24s}
html.fx-reveal:not(.fx-revealed) .readout{animation:fx-side .9s .35s cubic-bezier(.2,.8,.2,1) both}
html.fx-reveal:not(.fx-revealed) .cf-labels{animation:fx-labels 1.3s .45s cubic-bezier(.2,.8,.2,1) both}
html.fx-reveal:not(.fx-revealed) .station-launch,html.fx-reveal:not(.fx-revealed) .cf-index-btn,html.fx-reveal:not(.fx-revealed) .footer-note{animation:fx-in .8s .6s both}
@keyframes fx-in{from{opacity:0;filter:blur(12px);transform:translateY(-8px)}to{opacity:1;filter:none;transform:none}}
@keyframes fx-up{from{opacity:0;filter:blur(10px);transform:translateY(18px)}to{opacity:1;filter:none;transform:none}}
@keyframes fx-side{from{opacity:0;filter:blur(10px);transform:translateX(-24px)}to{opacity:1;filter:none;transform:none}}
@keyframes fx-labels{0%{opacity:0;filter:blur(8px) brightness(2)}40%{opacity:.6}100%{opacity:1;filter:none}}

/* ---- post overlay: grain + vignette ---- */
.fx-grain{position:fixed;inset:-8%;z-index:30;pointer-events:none;opacity:.035;background:var(--fx-noise);background-size:200px 200px;animation:fx-grain .6s steps(5) infinite;will-change:transform}
.fx-vignette{position:fixed;inset:0;z-index:0;pointer-events:none;background:radial-gradient(120% 95% at 50% 45%,transparent 55%,rgba(0,0,0,.55) 100%)}
@keyframes fx-grain{0%{transform:translate(0,0)}20%{transform:translate(-2%,1%)}40%{transform:translate(1%,-2%)}60%{transform:translate(-1%,2%)}80%{transform:translate(2%,1%)}}

/* ---- glass + HUD polish ---- */
.readout{-webkit-backdrop-filter:blur(14px) saturate(1.35);backdrop-filter:blur(14px) saturate(1.35)}
.readout{box-shadow:0 0 0 1px rgba(61,255,138,.12) inset,0 18px 50px rgba(0,0,0,.45),0 0 30px rgba(61,255,138,.06)}
.readout::before{content:"";position:absolute;inset:0;border-radius:inherit;pointer-events:none;
  background:linear-gradient(130deg,rgba(255,255,255,.07),transparent 35%,transparent 70%,rgba(61,255,138,.06))}
.stat b{font-variant-numeric:tabular-nums;text-shadow:0 0 18px color-mix(in srgb,currentColor 45%,transparent)}
.cf-label{transition:box-shadow .2s ease,filter .2s ease}
.cf-label:hover .nm,.cf-label:focus-visible .nm{text-shadow:-1px 0 rgba(255,58,74,.75),1px 0 rgba(55,230,255,.75)}
.cf-label:hover,.cf-label:focus-visible{filter:brightness(1.15) saturate(1.2)}

/* ---- flip cards (Case Index + List view): front = case badge, back = summary ---- */
.cf-list li.fx-card{perspective:900px}
.fx-flip{position:relative;display:grid;transform-style:preserve-3d;transition:transform .7s cubic-bezier(.2,.8,.2,1)}
.fx-flip>.fx-face{grid-area:1/1;backface-visibility:hidden;-webkit-backface-visibility:hidden}
.fx-flip>.fx-back{transform:rotateY(180deg)}
.fx-card.is-flipped .fx-flip{transform:rotateY(180deg)}
@media (hover:hover) and (pointer:fine){ .fx-card:hover .fx-flip{transform:rotateY(180deg);transition-delay:.35s} }
.cf-list .fx-back{display:block;text-align:left;padding:.55rem .7rem;font:12px/1.4 var(--cf-mono,monospace);color:#cfe9da;
  border:1px solid color-mix(in srgb,var(--c,#3dff8a) 45%,transparent);border-radius:8px;
  background:linear-gradient(160deg,rgba(10,22,16,.95),rgba(6,10,14,.95));cursor:pointer;overflow:hidden}
.cf-list .fx-back b{display:block;color:var(--c,#3dff8a);letter-spacing:.1em;font-size:10.5px;margin-bottom:.2rem}
.cf-list .fx-back span{display:-webkit-box;-webkit-line-clamp:3;-webkit-box-orient:vertical;overflow:hidden}
.fx-card{position:relative}
.cf-list .fx-flipbtn,.fallback-list .fx-flipbtn{min-height:0;box-shadow:none;position:absolute;right:.25rem;top:.25rem;z-index:3;width:1.45rem;height:1.45rem;border-radius:50%;border:1px solid rgba(61,255,138,.35);
  background:rgba(4,10,8,.8);color:#9fffc6;font-size:.75rem;line-height:1;cursor:pointer;display:grid;place-items:center;padding:0}
.cf-list .fx-flipbtn:hover,.cf-list .fx-flipbtn:focus-visible,.fallback-list .fx-flipbtn:hover{border-color:#3dff8a;color:#fff;outline:none;box-shadow:0 0 10px rgba(61,255,138,.5)}
.fallback-card.fx-card{perspective:1000px;padding:0;background:none;border:0}
.fallback-card .fx-face{padding:1rem 1.1rem;border-radius:14px;border:1px solid var(--panel-border);background:rgba(7,10,12,.78);text-align:left}
.fallback-card .fx-back{border-color:rgba(61,255,138,.4);background:linear-gradient(160deg,rgba(10,26,18,.95),rgba(6,10,14,.95))}

/* ---- dossier: page-turn on prev/next, blur-to-sharp sheets ---- */
.cf-dossier.is-swap .cf-sheet{transform:perspective(1200px) rotateY(-72deg) translateX(18%);opacity:0;filter:blur(6px)}
.cf-dossier.is-swap.is-open .cf-sheet{transform:none;opacity:1;filter:none;transition:transform .75s cubic-bezier(.16,1,.3,1),opacity .4s,filter .5s}
.cf-dossier.is-open:not(.is-swap) .cf-sheet{animation:fx-sharp .9s both;animation-delay:calc(.55s + var(--i) * .13s)}
@keyframes fx-sharp{from{filter:blur(6px)}to{filter:none}}

/* ---- easter-egg UI ---- */
.fx-eggs{position:fixed;right:1rem;bottom:4.1rem;z-index:41;font:11px/1 "CF Mono",ui-monospace,monospace;letter-spacing:.14em;color:#bfffd8;
  background:rgba(4,10,8,.6);border:1px solid rgba(61,255,138,.3);border-radius:999px;padding:.38rem .7rem;cursor:pointer;
  -webkit-backdrop-filter:blur(10px);backdrop-filter:blur(10px)}
.fx-eggs b{color:#3dff8a}.fx-eggs .d{color:#ff3a4a}
.fx-eggs.pop{animation:fx-pop .7s cubic-bezier(.2,1.6,.4,1)}
@keyframes fx-pop{0%{transform:scale(.6);box-shadow:0 0 0 rgba(61,255,138,0)}50%{transform:scale(1.15);box-shadow:0 0 30px rgba(61,255,138,.7)}100%{transform:none}}
.fx-toast{position:fixed;left:50%;top:1rem;z-index:10000;transform:translate(-50%,-140%) rotateX(60deg);opacity:0;pointer-events:none;
  min-width:min(320px,90vw);max-width:92vw;padding:.7rem 1rem;border-radius:12px;font:12px/1.35 "CF Mono",ui-monospace,monospace;letter-spacing:.08em;color:#e8fff1;
  background:linear-gradient(160deg,rgba(8,22,14,.88),rgba(5,8,12,.92));border:1px solid rgba(61,255,138,.45);
  box-shadow:0 20px 60px rgba(0,0,0,.5),0 0 30px rgba(61,255,138,.18);-webkit-backdrop-filter:blur(14px);backdrop-filter:blur(14px);
  display:flex;gap:.7rem;align-items:center;flex-wrap:wrap;transition:transform .6s cubic-bezier(.2,1.2,.3,1),opacity .4s}
.fx-toast.is-in{transform:translate(-50%,0);opacity:1;pointer-events:auto}
.fx-toast .k{color:#3dff8a;font-size:10px;letter-spacing:.24em}
.fx-toast b{font-size:14px;letter-spacing:.12em;text-transform:uppercase}
.fx-toast .n{margin-left:auto;color:#ff8a94}
.fx-toast.t-red{border-color:rgba(255,58,74,.6)}.fx-toast.t-red .k{color:#ff3a4a}
.fx-toast.t-cyan{border-color:rgba(55,230,255,.5);display:block}
.fx-log{list-style:none;margin:.5rem 0 0;padding:0;display:grid;grid-template-columns:repeat(auto-fill,minmax(210px,1fr));gap:.2rem .8rem}
.fx-log li{color:#8fa79a;font-size:11px}.fx-log li.ok{color:#3dff8a}.fx-log i{font-style:normal}

html.fx-overclock #stage{filter:saturate(1.5) contrast(1.08)}
html.fx-overclock .cf-label{animation:fx-oc 0.42s ease-in-out infinite alternate}
html.fx-overclock .wordmark em{text-shadow:0 0 24px #ff3a4a,0 0 4px #fff}
@keyframes fx-oc{to{filter:brightness(1.35) drop-shadow(0 0 6px currentColor)}}
html.fx-adrenaline .pulse-row b{color:#ff3a4a!important;text-shadow:0 0 12px #ff3a4a}

.fx-storm{position:fixed;inset:0;width:100vw;height:100vh;z-index:9000;pointer-events:none;opacity:0}
.fx-flash{position:fixed;inset:0;z-index:9001;pointer-events:none;background:radial-gradient(80% 60% at 50% 30%,rgba(210,255,235,.55),rgba(61,255,138,.12) 60%,transparent);opacity:0}
.fx-flash.on{animation:fx-flash .5s ease-out}
@keyframes fx-flash{0%{opacity:0}8%{opacity:1}20%{opacity:.2}30%{opacity:.8}100%{opacity:0}}

.wordmark.fx-glitching{position:relative;animation:fx-glitch 1.2s steps(2) 1}
.wordmark.fx-glitching::before,.wordmark.fx-glitching::after{content:attr(data-text);position:absolute;inset:0;pointer-events:none}
.wordmark.fx-glitching::before{color:#ff3a4a;transform:translate(-3px,0);clip-path:inset(10% 0 55% 0);mix-blend-mode:screen;animation:fx-gl1 .3s steps(2) 4}
.wordmark.fx-glitching::after{color:#37e6ff;transform:translate(3px,0);clip-path:inset(55% 0 8% 0);mix-blend-mode:screen;animation:fx-gl2 .25s steps(2) 5}
@keyframes fx-glitch{0%,100%{transform:none}20%{transform:skewX(-8deg)}40%{transform:skewX(6deg) translateX(2px)}60%{transform:none}80%{transform:translateX(-2px)}}
@keyframes fx-gl1{50%{clip-path:inset(60% 0 10% 0);transform:translate(4px,1px)}}
@keyframes fx-gl2{50%{clip-path:inset(5% 0 70% 0);transform:translate(-4px,-1px)}}
.fx-sub{margin:.25rem 0 0;font:12px "CF Mono",ui-monospace,monospace;letter-spacing:.18em;color:#3dff8a;text-transform:uppercase;opacity:0;filter:blur(6px);transition:opacity .5s,filter .5s;pointer-events:none}
.fx-sub.on{opacity:.9;filter:none}

.fx-watcher{position:fixed;left:1rem;bottom:16rem;z-index:42;width:220px;aspect-ratio:16/9;padding:0;border:0;background:none;cursor:crosshair;
  opacity:0;transform:translateX(-30px) scale(.96);filter:blur(10px);transition:opacity 1.2s ease,transform 1.4s cubic-bezier(.2,.8,.2,1),filter 1.2s}
.fx-watcher img{width:100%;height:100%;object-fit:cover;display:block;border-radius:14px;
  -webkit-mask-image:radial-gradient(closest-side,#000 55%,transparent);mask-image:radial-gradient(closest-side,#000 55%,transparent)}
.fx-watcher .e{position:absolute;top:50%;width:9%;aspect-ratio:1.5;border-radius:50%;transform:translate(-50%,-50%);
  background:radial-gradient(closest-side,rgba(255,255,255,.9),rgba(61,255,138,.8) 40%,rgba(61,255,138,0));mix-blend-mode:screen;animation:sp-pulse 1.2s ease-in-out infinite}
.fx-watcher .e.l{left:39.6%}.fx-watcher .e.r{left:60.4%}
.fx-watcher.in{opacity:.8;transform:none;filter:none}
.fx-watcher.caught{opacity:0;transform:scale(1.6);filter:brightness(3) blur(4px);transition:all .6s ease}
@keyframes sp-pulse{0%,100%{opacity:.7}50%{opacity:1}}

.fx-intercept{position:fixed;right:1rem;top:42%;z-index:42;max-width:min(330px,86vw);text-align:left;cursor:pointer;
  display:grid;gap:.3rem;padding:.7rem .85rem;border-radius:10px;font:12px/1.4 "CF Mono",ui-monospace,monospace;color:#d8ffe8;
  background:linear-gradient(160deg,rgba(26,8,10,.85),rgba(6,8,12,.9));border:1px solid rgba(255,58,74,.5);
  box-shadow:0 0 26px rgba(255,58,74,.2);-webkit-backdrop-filter:blur(12px);backdrop-filter:blur(12px);
  opacity:0;transform:perspective(800px) rotateY(-50deg) translateX(40px);transition:opacity .5s,transform .7s cubic-bezier(.2,.9,.3,1)}
.fx-intercept.in{opacity:1;transform:none}
.fx-intercept .k{color:#ff8a94;font-size:10px;letter-spacing:.2em;display:flex;align-items:center;gap:.45rem}
.fx-intercept .k i{width:.5rem;height:.5rem;border-radius:50%;background:#ff3a4a;box-shadow:0 0 8px #ff3a4a;animation:sp-pulse .8s infinite}
.fx-intercept .m{font-size:13px;letter-spacing:.04em;word-break:break-word}
.fx-intercept .h{font-size:10px;letter-spacing:.2em;color:#7e8f86;text-transform:uppercase}

.fx-term{position:fixed;left:50%;top:50%;z-index:9500;width:min(520px,92vw);border-radius:12px;overflow:hidden;cursor:pointer;
  background:rgba(3,8,6,.9);border:1px solid rgba(61,255,138,.45);box-shadow:0 30px 80px rgba(0,0,0,.6),0 0 40px rgba(61,255,138,.15);
  -webkit-backdrop-filter:blur(14px);backdrop-filter:blur(14px);opacity:0;transform:translate(-50%,-50%) perspective(900px) rotateX(35deg) scale(.9);
  transition:opacity .4s,transform .6s cubic-bezier(.2,1.1,.3,1)}
.fx-term.in{opacity:1;transform:translate(-50%,-50%)}
.fx-term .bar{display:flex;gap:.35rem;align-items:center;padding:.45rem .7rem;border-bottom:1px solid rgba(61,255,138,.2);font:11px "CF Mono",monospace;color:#7e8f86}
.fx-term .bar span{width:.6rem;height:.6rem;border-radius:50%;background:#ff3a4a}.fx-term .bar span:nth-child(2){background:#ffb340}.fx-term .bar span:nth-child(3){background:#3dff8a}
.fx-term .bar b{margin-left:auto;font-weight:400;letter-spacing:.14em}
.fx-term pre{margin:0;padding:.9rem 1rem 1.1rem;font:14px/1.5 "CF Term","VT323",monospace;color:#3dff8a;white-space:pre-wrap;min-height:9.5em}

.fx-links{position:fixed;inset:0;width:100vw;height:100vh;z-index:21;pointer-events:none}
.fx-links line{stroke-width:2.2;stroke-linecap:round;transition:stroke-dashoffset .45s cubic-bezier(.2,.8,.2,1),opacity .8s}
.fx-links line.g{stroke:#3dff8a;filter:drop-shadow(0 0 6px #3dff8a)}
.fx-links line.r{stroke:#ff3a4a;filter:drop-shadow(0 0 6px #ff3a4a)}
.fx-links line.out{opacity:0}

#stage.fx-roll{animation:fx-roll 1.2s cubic-bezier(.6,0,.2,1)}
@keyframes fx-roll{0%{transform:perspective(1400px) rotateY(0)}50%{transform:perspective(1400px) rotateY(180deg) scale(.85)}100%{transform:perspective(1400px) rotateY(360deg)}}

@media (max-width:760px){
  .fx-eggs{bottom:auto;top:auto;right:.6rem;bottom:8.6rem;font-size:10px}
  .fx-watcher{width:150px;bottom:16rem;left:.5rem}
  .fx-intercept{top:auto;bottom:12rem;right:.5rem}
}
@media (prefers-reduced-motion:reduce){
  html.fx-pre .top .brand,html.fx-pre .cf-labels{opacity:1!important}
  .fx-grain{display:none}
  .fx-flip{transition:none}
  .fx-toast,.fx-watcher,.fx-intercept,.fx-term{transition:opacity .2s}
  .cf-dossier.is-swap .cf-sheet{transform:none;filter:none}
  html.fx-overclock .cf-label{animation:none}
  #stage.fx-roll{animation:none}
}
.cf-list .fx-front{padding-right:2rem}
.cf-list li.fx-card{animation:fx-up .5s cubic-bezier(.2,.8,.2,1) both;animation-delay:calc(min(var(--n,0),14) * 35ms)}
@media (prefers-reduced-motion:reduce){.cf-list li.fx-card{animation:none}}

/* auto-lite: dropped when the device can't hold a smooth frame rate */
html.fx-lite .fx-grain,html.fx-lite .fx-vignette{display:none}