/* ═══════════════════════════════════════════════════════════════════════
   rmap-fx.css — R-MAP shared visual-FX layer (paired with rmap-fx.js)

   Injected into every model / Knowledge Web page. Provides:
   3D tilt + sheen, scroll reveals, click ripples, dbl-click card flips,
   image lightbox zoom, ambient aurora, emblem coin-spin, animated title
   underlines, annotate (edit) mode, and a floating FX toolbar.

   Everything is additive and namespaced rfx- so it can't collide with the
   page's own styles. body.rfx-still disables all motion (toolbar toggle).
═══════════════════════════════════════════════════════════════════════ */

:root{
  --rfx-cyan:#00cfff;
  --rfx-cyan2:#67e8ff;
  --rfx-ink:#04121f;
  --rfx-glass:rgba(7,16,29,.78);
  --rfx-line:rgba(41,88,117,.55);
  --rfx-z:2147482000;
}

/* ── Scroll reveal ─────────────────────────────────────────────────────── */
.rfx-reveal{
  opacity:0;
  transform:translateY(26px) scale(.985);
  filter:blur(6px);
}
.rfx-in{
  opacity:1;
  transform:none;
  filter:blur(0);
  transition:
    opacity .7s cubic-bezier(.2,.65,.25,1) var(--rfx-d,0s),
    transform .7s cubic-bezier(.2,.65,.25,1) var(--rfx-d,0s),
    filter .7s ease var(--rfx-d,0s);
}
body.rfx-still .rfx-reveal{opacity:1;transform:none;filter:none;transition:none}

/* ── 3D tilt + sheen ───────────────────────────────────────────────────── */
.rfx-tilt{
  transform-style:preserve-3d;
  will-change:transform;
  transition:transform .45s cubic-bezier(.2,.65,.25,1), box-shadow .45s ease;
}
.rfx-tilting{transition:box-shadow .45s ease}
.rfx-tilt:hover{box-shadow:0 22px 60px rgba(0,0,0,.45), 0 0 0 1px rgba(0,207,255,.16)}
body.rfx-still .rfx-tilt{transform:none !important;box-shadow:none}

.rfx-sheen{
  position:absolute;
  inset:0;
  border-radius:inherit;
  pointer-events:none;
  opacity:0;
  z-index:3;
  background:radial-gradient(
    420px circle at var(--rfx-mx,50%) var(--rfx-my,50%),
    rgba(103,232,255,.16), rgba(0,207,255,.05) 42%, transparent 68%);
  transition:opacity .35s ease;
  mix-blend-mode:screen;
}
.rfx-tilting > .rfx-sheen{opacity:1}
body.rfx-still .rfx-sheen{display:none}

/* ── Double-click flip (full 360° spin, non-destructive) ───────────────── */
@keyframes rfxFlipY{
  0%{transform:perspective(900px) rotateY(0)}
  100%{transform:perspective(900px) rotateY(360deg)}
}
.rfx-flip-anim{animation:rfxFlipY .9s cubic-bezier(.3,.1,.25,1) both;backface-visibility:visible}
body.rfx-still .rfx-flip-anim{animation:none}

/* ── Click ripple ──────────────────────────────────────────────────────── */
.rfx-ripple-host{position:relative;overflow:hidden}
.rfx-ripple{
  position:absolute;
  border-radius:50%;
  pointer-events:none;
  transform:translate(-50%,-50%) scale(0);
  background:radial-gradient(circle, rgba(103,232,255,.55), rgba(0,207,255,.18) 55%, transparent 72%);
  animation:rfxRipple .65s ease-out forwards;
  z-index:4;
}
@keyframes rfxRipple{
  to{transform:translate(-50%,-50%) scale(1);opacity:0}
}
body.rfx-still .rfx-ripple{display:none}

/* ── Animated title underline (applied to detected section titles) ─────── */
.rfx-title{position:relative}
.rfx-title::after{
  content:"";
  position:absolute;
  left:0;bottom:-6px;
  height:2px;width:0;
  border-radius:2px;
  background:linear-gradient(90deg,var(--rfx-cyan),var(--rfx-cyan2),transparent);
  box-shadow:0 0 12px rgba(0,207,255,.55);
  transition:width 1s cubic-bezier(.2,.65,.25,1) .15s;
}
.rfx-title.rfx-in::after{width:64px}
body.rfx-still .rfx-title::after{width:64px;transition:none}

/* ── Emblem coin-spin + idle float ─────────────────────────────────────── */
@keyframes rfxCoin{
  0%{transform:perspective(600px) rotateY(0)}
  100%{transform:perspective(600px) rotateY(360deg)}
}
@keyframes rfxBob{
  0%,100%{transform:translateY(0)}
  50%{transform:translateY(-5px)}
}
.rfx-emblem{animation:rfxBob 4.5s ease-in-out infinite;will-change:transform;cursor:pointer}
.rfx-emblem:hover{animation:rfxCoin 1.1s cubic-bezier(.3,.1,.25,1)}
body.rfx-still .rfx-emblem{animation:none}

/* ── Ambient aurora (two drifting light blobs, blend-screen, subtle) ───── */
.rfx-aurora{
  position:fixed;
  width:52vmax;height:52vmax;
  border-radius:50%;
  pointer-events:none;
  z-index:1;
  opacity:.09;
  mix-blend-mode:screen;
  filter:blur(30px);
  will-change:transform;
}
.rfx-aurora.a{
  top:-18vmax;left:-12vmax;
  background:radial-gradient(circle at 35% 35%, #00cfff, #1f4477 55%, transparent 72%);
  animation:rfxDriftA 26s ease-in-out infinite alternate;
}
.rfx-aurora.b{
  bottom:-20vmax;right:-14vmax;
  background:radial-gradient(circle at 60% 60%, #7c4660, #2c5b86 55%, transparent 72%);
  animation:rfxDriftB 33s ease-in-out infinite alternate;
}
@keyframes rfxDriftA{
  from{transform:translate(0,0) rotate(0deg) scale(1)}
  to{transform:translate(9vmax,7vmax) rotate(40deg) scale(1.15)}
}
@keyframes rfxDriftB{
  from{transform:translate(0,0) rotate(0deg) scale(1.1)}
  to{transform:translate(-8vmax,-6vmax) rotate(-35deg) scale(.95)}
}
body.rfx-still .rfx-aurora{display:none}

/* ── Image lightbox zoom ───────────────────────────────────────────────── */
.rfx-zoomable{cursor:zoom-in;transition:transform .35s ease, filter .35s ease}
.rfx-zoomable:hover{transform:scale(1.02);filter:brightness(1.06)}
.rfx-lightbox{
  position:fixed;inset:0;
  z-index:var(--rfx-z);
  display:flex;align-items:center;justify-content:center;
  background:rgba(2,7,15,.86);
  backdrop-filter:blur(8px);
  cursor:zoom-out;
  animation:rfxFadeIn .2s ease;
}
.rfx-lightbox img{
  max-width:92vw;max-height:90vh;
  border-radius:14px;
  box-shadow:0 40px 120px rgba(0,0,0,.6), 0 0 0 1px rgba(0,207,255,.22);
  animation:rfxZoomIn .28s cubic-bezier(.2,.8,.3,1.15);
}
@keyframes rfxFadeIn{from{opacity:0}to{opacity:1}}
@keyframes rfxZoomIn{from{transform:scale(.82);opacity:0}to{transform:scale(1);opacity:1}}

/* ── Annotate (edit) mode ──────────────────────────────────────────────── */
body.rfx-annotate .rfx-editable{
  outline:1px dashed rgba(0,207,255,.45);
  outline-offset:3px;
  cursor:text;
  transition:outline-color .2s ease, background .2s ease;
}
body.rfx-annotate .rfx-editable:hover{
  outline-color:var(--rfx-cyan);
  background:rgba(0,207,255,.05);
}
.rfx-edited{box-shadow:inset 2px 0 0 var(--rfx-cyan)}
[contenteditable="true"].rfx-editable{
  outline:2px solid var(--rfx-cyan) !important;
  background:rgba(0,207,255,.07) !important;
  border-radius:4px;
}

/* ── Signature layer: per-model ambient canvas + hero glow ─────────────── */
.rfx-canvas{
  position:fixed;
  inset:0;
  width:100%;
  height:100%;
  pointer-events:none;
  z-index:1;
  mix-blend-mode:screen;
  opacity:.55;
}
body.rfx-still .rfx-canvas{display:none}

@keyframes rfxHeroGlow{
  0%,100%{text-shadow:0 0 14px var(--rfx-glow-c,rgba(0,207,255,.25)), 0 0 46px var(--rfx-glow-c2,rgba(0,207,255,.12))}
  50%{text-shadow:0 0 26px var(--rfx-glow-c,rgba(0,207,255,.5)), 0 0 80px var(--rfx-glow-c2,rgba(0,207,255,.22))}
}
.rfx-hero{animation:rfxHeroGlow 4.2s ease-in-out infinite}
body.rfx-still .rfx-hero{animation:none;text-shadow:none}

/* ── Floating FX toolbar ───────────────────────────────────────────────── */
.rfx-bar{
  position:fixed;
  right:16px;bottom:16px;
  z-index:calc(var(--rfx-z) - 1);
  display:flex;align-items:center;gap:6px;
  padding:4px;
  border-radius:999px;
  border:1px solid var(--rfx-line);
  background:var(--rfx-glass);
  backdrop-filter:blur(12px);
  box-shadow:0 14px 44px rgba(0,0,0,.45);
  font-family:'Manrope',system-ui,sans-serif;
  animation:rfxBarIn .6s cubic-bezier(.2,.8,.3,1.1) .8s both;
  cursor:grab;
  touch-action:none;
  user-select:none;
}
.rfx-bar.rfx-drag{cursor:grabbing;transition:none;animation:none}
/* Collapsed (default): just the round FX chip — covers almost nothing and can
   be dragged away from anything it does cover. */
.rfx-bar.rfx-min .rfx-bar-tools{display:none}
.rfx-bar-tools{display:flex;align-items:center;gap:6px;padding-right:4px}
.rfx-bar-toggle{
  width:32px;height:32px;
  display:flex;align-items:center;justify-content:center;
  border-radius:50%;
  border:1px solid rgba(0,207,255,.4);
  background:linear-gradient(135deg,rgba(0,207,255,.18),rgba(7,16,29,.6));
  color:var(--rfx-cyan);
  font-size:14px;line-height:1;
  cursor:pointer;
  transition:all .18s ease;
  flex:0 0 auto;
}
.rfx-bar-toggle:hover{transform:rotate(20deg) scale(1.08);box-shadow:0 0 16px rgba(0,207,255,.35)}
.rfx-bar-toggle .rfx-dot{
  position:absolute;top:-1px;right:-1px;width:8px;height:8px;border-radius:50%;
  background:var(--rfx-cyan);box-shadow:0 0 8px var(--rfx-cyan);display:none;
}
.rfx-bar.rfx-active .rfx-bar-toggle .rfx-dot{display:block}
@keyframes rfxBarIn{from{opacity:0;transform:translateY(18px)}to{opacity:1;transform:none}}
.rfx-bar-label{
  font-size:10px;font-weight:800;letter-spacing:.14em;
  color:var(--rfx-cyan);
  padding:0 4px 0 2px;
  user-select:none;
}
.rfx-bar button{
  width:30px;height:30px;
  display:flex;align-items:center;justify-content:center;
  border-radius:50%;
  border:1px solid transparent;
  background:transparent;
  color:#8aa9c2;
  font-size:14px;line-height:1;
  cursor:pointer;
  transition:all .18s ease;
}
.rfx-bar button:hover{color:#eef8ff;border-color:var(--rfx-line);transform:translateY(-1px)}
.rfx-bar button.on{color:var(--rfx-ink);background:linear-gradient(135deg,var(--rfx-cyan),var(--rfx-cyan2));box-shadow:0 0 14px rgba(0,207,255,.4)}
.rfx-toast{
  position:fixed;
  right:16px;bottom:64px;
  z-index:var(--rfx-z);
  padding:9px 14px;
  border-radius:12px;
  border:1px solid rgba(0,207,255,.3);
  background:var(--rfx-glass);
  color:#cfeaff;
  font:600 12.5px 'Manrope',system-ui,sans-serif;
  box-shadow:0 12px 36px rgba(0,0,0,.4);
  animation:rfxFadeIn .2s ease;
  pointer-events:none;
}

/* ── Per-model theme background (General Themes · Special Selection) ────── */
/* The page's own opaque background is made transparent and a fixed, veiled
   theme image sits behind everything; opaque cards are softened to glass so
   the texture reads through the layout. */
.rfx-bgimg{
  position:fixed;
  inset:0;
  z-index:-3;
  pointer-events:none;
  background-size:cover;
  background-position:center;
  /* the Special Selection plates are dark by design — lift them so the
     relief actually reads through the page */
  filter:brightness(1.32) saturate(1.1) contrast(1.03);
}
.rfx-bgimg::after{
  content:"";
  position:absolute;
  inset:0;
  background:
    radial-gradient(1100px 600px at 50% -8%, rgba(0,207,255,.05), transparent 60%),
    linear-gradient(180deg,
      rgba(4,9,17,var(--rfx-veil-top,.14)),
      rgba(3,7,14,var(--rfx-veil-mid,.24)) 70%,
      rgba(2,5,11,var(--rfx-veil-bot,.34)));
}
/* Dark fallback (NOT transparent-to-white): if the image layer ever fails
   to cover, the page floor stays R-MAP dark instead of flashing white. */
html.rfx-themed-root{background:#050a14 !important}
body.rfx-themed{background:transparent !important}
/* Pages that painted their old background via body::before hand over to the theme */
body.rfx-themed::before{background-image:none !important}
/* ...and pages that stacked their own second veil via body::after stand down too */
body.rfx-themed::after{background:none !important}

/* ── print: flatten the dark theme to paper ─────────────────────────────── */
@media print{
  .rfx-bar,.rfx-canvas,.rfx-bgimg,.rfx-aurora,.rfx-toast,.rfx-png-chip{display:none !important}
  html,body{background:#fff !important}
  body{color:#16222e !important}
  body *:not(canvas):not(img):not(svg):not(path):not(rect):not(circle){
    background:transparent !important;color:#16222e !important;
    text-shadow:none !important;box-shadow:none !important;
    animation:none !important;transition:none !important;backdrop-filter:none !important}
  a{color:#0b4a6e !important;text-decoration:underline}
  canvas,img{print-color-adjust:exact;-webkit-print-color-adjust:exact}
  .card,table,th,td,section,article{border-color:#c9d3db !important}
  header.top,header.site-header{position:static !important}
}

/* ── color studio panel ─────────────────────────────────────────────────── */
.rfx-colors{position:fixed;right:18px;bottom:64px;z-index:99998;display:none;flex-direction:column;gap:6px;
  min-width:232px;max-height:62vh;overflow:auto;padding:12px 14px;border-radius:14px;
  background:rgba(7,14,26,.96);border:1px solid #24506b;box-shadow:0 18px 50px rgba(0,0,0,.5);
  font-family:'Manrope',system-ui,sans-serif;font-size:12.5px;color:#cfe6f5;
  animation:rfxColorsIn .22s ease}
@keyframes rfxColorsIn{from{opacity:0;transform:translateY(8px)}to{opacity:1}}
.rfx-colors.on{display:flex}
.rfx-colors-head{display:flex;justify-content:space-between;gap:10px;align-items:baseline;margin-bottom:4px}
.rfx-colors-head span{font-size:9.5px;color:#55748f;letter-spacing:.08em;text-transform:uppercase}
.rfx-colors label{display:flex;align-items:center;gap:10px;cursor:pointer;text-transform:capitalize}
.rfx-colors input[type=color]{width:36px;height:24px;padding:1px;border:1px solid #24506b;border-radius:6px;
  background:none;cursor:pointer;flex:none}
.rfx-colors-foot{display:flex;gap:8px;margin-top:6px}
.rfx-colors-foot button{flex:1;padding:5px 8px;border-radius:8px;border:1px solid #24506b;
  background:rgba(15,32,53,.6);color:#cfe6f5;cursor:pointer;font-size:11.5px;font-family:inherit}
.rfx-colors-foot button:hover{border-color:#00cfff}
@media print{.rfx-colors{display:none !important}}

/* ── generic canvas tooltip ─────────────────────────────────────────────── */
.rfx-cvtip{position:fixed;z-index:100000;pointer-events:none;display:none;max-width:280px;
  padding:8px 12px;border-radius:11px;background:rgba(7,14,26,.96);border:1px solid rgba(103,232,255,.35);
  box-shadow:0 14px 40px rgba(0,0,0,.55);font:12px/1.5 'Manrope','Segoe UI',system-ui,sans-serif;color:#cfe6f5}
.rfx-cvtip.on{display:block}
.rfx-cvtip b{color:#eef8ff}
@media print{.rfx-cvtip{display:none !important}}

/* ── smart tooltips ─────────────────────────────────────────────────────── */
.rfx-tip{
  position:fixed;z-index:var(--rfx-z);pointer-events:none;
  max-width:300px;padding:8px 12px;border-radius:11px;
  background:rgba(7,14,26,.97);border:1px solid rgba(103,232,255,.4);
  box-shadow:0 14px 40px rgba(0,0,0,.55);
  color:#dff2ff;font:600 12px/1.5 'Manrope','Segoe UI',system-ui,sans-serif;
  opacity:0;transform:translateY(4px) scale(.97);
  transition:opacity .16s ease,transform .16s ease;
}
.rfx-tip.on{opacity:1;transform:none}
.rfx-tip.rich{max-width:340px;font-weight:500;line-height:1.45;text-align:left}
.rfx-tip.rich b{display:block;color:#67e8ff;font-weight:700;margin-bottom:3px}
.rfx-tip.rich div{color:#b9d2e4;margin-top:2px}
.rfx-tip.rich div+div{margin-top:5px}
.rfx-tip.below{transform:translateY(-4px) scale(.97)}
.rfx-tip.below.on{transform:none}
@media print{.rfx-tip{display:none !important}}

/* ── reading progress + back-to-top ─────────────────────────────────────── */
.rfx-progress{
  position:fixed;top:0;left:0;right:0;height:3px;
  z-index:calc(var(--rfx-z) - 2);
  transform-origin:0 50%;transform:scaleX(0);pointer-events:none;
  background:linear-gradient(90deg,var(--rfx-cyan),var(--rfx-cyan2) 55%,transparent);
  box-shadow:0 0 12px rgba(0,207,255,.5);
}
body.rfx-still .rfx-progress{display:none}
.rfx-top{
  position:fixed;right:16px;bottom:118px;
  z-index:calc(var(--rfx-z) - 2);
  width:44px;height:44px;border-radius:50%;
  border:1px solid var(--rfx-line);
  background:var(--rfx-glass);backdrop-filter:blur(10px);
  color:#7ce4ff;cursor:pointer;
  display:flex;align-items:center;justify-content:center;
  opacity:0;transform:translateY(14px);pointer-events:none;
  transition:opacity .3s ease,transform .3s ease,box-shadow .2s ease;
}
.rfx-top.show{opacity:1;transform:none;pointer-events:auto}
.rfx-top:hover{box-shadow:0 0 18px rgba(0,207,255,.4)}
.rfx-top svg{position:absolute;inset:3px;width:38px;height:38px;transform:rotate(-90deg)}
.rfx-top circle{fill:none;stroke-width:2.4}
.rfx-top .tr{stroke:rgba(41,88,117,.5)}
.rfx-top .pr{stroke:var(--rfx-cyan);stroke-linecap:round;transition:stroke-dashoffset .15s linear}
.rfx-top span{font-size:16px;font-weight:800;line-height:1;position:relative;z-index:1}
@media print{.rfx-progress,.rfx-top{display:none !important}}

/* ── floating auto-play chip (pairs with the toolbar tour button) ───────── */
.rfx-play{
  position:fixed;left:16px;bottom:16px;
  z-index:calc(var(--rfx-z) - 2);
  display:inline-flex;align-items:center;gap:8px;
  padding:9px 15px;border-radius:999px;
  border:1px solid rgba(0,207,255,.4);
  background:var(--rfx-glass);backdrop-filter:blur(8px);
  color:#7ce4ff;font:700 12px 'Manrope',system-ui,sans-serif;
  cursor:pointer;box-shadow:0 8px 26px rgba(0,0,0,.45);
  transition:all .2s ease;
  animation:rfxBarIn .6s cubic-bezier(.2,.8,.3,1.1) 1.1s both;
}
.rfx-play:hover{transform:translateY(-1px);border-color:var(--rfx-cyan);box-shadow:0 0 18px rgba(0,207,255,.3)}
.rfx-play.on{color:var(--rfx-ink);background:linear-gradient(135deg,var(--rfx-cyan),var(--rfx-cyan2));border-color:transparent;box-shadow:0 0 22px rgba(0,207,255,.5)}
.rfx-play .tri{font-size:10px;line-height:1}
@media (max-width:720px){.rfx-play .lbl{display:none}}
@media print{.rfx-play{display:none !important}}

/* ── tour control flash — see what the auto-tour just changed ───────────── */
@keyframes rfxFlash{
  0%{outline-color:rgba(0,207,255,.9);box-shadow:0 0 0 4px rgba(0,207,255,.35), 0 0 22px rgba(0,207,255,.5)}
  100%{outline-color:transparent;box-shadow:none}
}
.rfx-flash{outline:2px solid transparent;outline-offset:2px;animation:rfxFlash .95s ease-out both;border-radius:8px}
body.rfx-still .rfx-flash{animation:none;outline:none}

/* ── page command palette (Ctrl/⌘+K) ───────────────────────────────────── */
.rfx-cmdk{
  position:fixed;inset:0;z-index:var(--rfx-z);display:none;
  align-items:flex-start;justify-content:center;padding-top:12vh;
  background:rgba(2,7,15,.7);backdrop-filter:blur(6px);
}
.rfx-cmdk.on{display:flex;animation:rfxFadeIn .18s ease}
.rfx-cmdk-panel{
  width:min(620px,92vw);border-radius:16px;overflow:hidden;
  background:rgba(7,14,26,.97);border:1px solid #24506b;
  box-shadow:0 30px 90px rgba(0,0,0,.6);
  animation:rfxColorsIn .22s ease;
  font-family:'Manrope',system-ui,sans-serif;
}
.rfx-cmdk-head{display:flex;align-items:center;gap:10px;padding:12px 14px;border-bottom:1px solid rgba(36,80,107,.5)}
.rfx-cmdk-head .glyph{font:800 11px 'Manrope',system-ui,sans-serif;color:var(--rfx-cyan);border:1px solid rgba(0,207,255,.4);border-radius:7px;padding:3px 7px}
.rfx-cmdk-head input{flex:1;background:none;border:none;outline:none;color:#eef8ff;font:500 15px 'Manrope',system-ui,sans-serif}
.rfx-cmdk-head input::placeholder{color:#55748f}
.rfx-cmdk-head .esc{font:700 10px 'Manrope',system-ui;color:#55748f;background:none;border:1px solid rgba(85,116,143,.4);border-radius:6px;padding:3px 7px;cursor:pointer}
.rfx-cmdk-list{max-height:46vh;overflow:auto;padding:6px}
.rfx-cmdk-item{display:flex;align-items:center;justify-content:space-between;gap:12px;padding:10px 12px;border-radius:10px;cursor:pointer;color:#cfe6f5}
.rfx-cmdk-item b{font:600 13.5px 'Manrope',system-ui,sans-serif}
.rfx-cmdk-item .tag{font:700 9.5px 'Manrope',system-ui;letter-spacing:.08em;text-transform:uppercase;color:#55748f;white-space:nowrap}
.rfx-cmdk-item:hover,.rfx-cmdk-item.sel{background:rgba(0,207,255,.09);color:#eef8ff}
.rfx-cmdk-item.sel .tag{color:var(--rfx-cyan)}
.rfx-cmdk-none{padding:18px;text-align:center;color:#55748f;font:500 13px 'Manrope',system-ui}
.rfx-cmdk-foot{padding:8px 14px;border-top:1px solid rgba(36,80,107,.5);color:#55748f;font:500 10.5px 'Manrope',system-ui;letter-spacing:.04em}
@media print{.rfx-cmdk{display:none !important}}

/* ── 3D press on buttons + smoother bg parallax ─────────────────────────── */
.rfx-ripple-host:active{transform:scale(.965) translateY(1px);transition:transform .08s ease}
.rfx-bgimg{will-change:transform;transition:transform .1s linear}
body.rfx-still .rfx-bgimg{transform:none !important}