/* ============================================================================
   MOLVRIX — Interactive Enhancement Layer (v1)
   Global UI/UX polish on top of editorial-brutalism base.
   Pure additive — no override of backend wiring.
   ========================================================================== */

/* ---------- 0. CSS vars extension ---------- */
:root{
  --mx-shadow-hard: 6px 6px 0 var(--ink, #0B0B0B);
  --mx-shadow-hard-lg: 10px 10px 0 var(--ink, #0B0B0B);
  --mx-shadow-green: 6px 6px 0 var(--green, #22C55E);
  --mx-ease: cubic-bezier(.16,1,.3,1);
}

/* ---------- 1. Custom cursor (desktop, hover-capable only) ---------- */
@media (hover:hover) and (pointer:fine){
  html.mx-cursor-on, html.mx-cursor-on body{cursor:none;}
  html.mx-cursor-on a, html.mx-cursor-on button,
  html.mx-cursor-on input, html.mx-cursor-on textarea, html.mx-cursor-on select,
  html.mx-cursor-on [role="button"], html.mx-cursor-on .calm-card,
  html.mx-cursor-on summary{cursor:none;}
  .mx-cursor{position:fixed;top:0;left:0;width:14px;height:14px;border:1.5px solid var(--ink,#0B0B0B);
    background:rgba(34,197,94,.0);border-radius:50%;pointer-events:none;z-index:99998;
    transform:translate(-50%,-50%);transition:width .18s var(--mx-ease),height .18s var(--mx-ease),
    background .18s var(--mx-ease),border-color .18s var(--mx-ease),opacity .2s;mix-blend-mode:difference;opacity:0;}
  .mx-cursor.is-ready{opacity:1;}
  .mx-cursor-dot{position:fixed;top:0;left:0;width:4px;height:4px;background:var(--green,#22C55E);
    border-radius:50%;pointer-events:none;z-index:99999;transform:translate(-50%,-50%);opacity:0;
    transition:opacity .2s,transform .15s var(--mx-ease);}
  .mx-cursor-dot.is-ready{opacity:1;}
  .mx-cursor.is-link{width:46px;height:46px;background:rgba(34,197,94,.18);border-color:var(--green,#22C55E);}
  .mx-cursor.is-text{width:4px;height:22px;border-radius:2px;background:var(--ink,#0B0B0B);border:none;}
  .mx-cursor.is-down{width:10px;height:10px;background:var(--green,#22C55E);}
}
@media (hover:none),(pointer:coarse){.mx-cursor,.mx-cursor-dot{display:none!important;}}

/* ---------- 2. Magnetic buttons & subtle hover lift ---------- */
.mx-magnetic{transition:transform .25s var(--mx-ease);will-change:transform;}
.mx-magnetic:hover{filter:brightness(1.02);}

/* ---------- 3. Scroll progress ring (top-right corner) ---------- */
.mx-progress-ring{position:fixed;top:18px;right:18px;width:46px;height:46px;z-index:998;
  display:flex;align-items:center;justify-content:center;pointer-events:auto;
  opacity:0;transform:translateY(-12px) scale(.92);transition:opacity .3s,transform .3s;}
.mx-progress-ring.is-on{opacity:1;transform:none;}
.mx-progress-ring svg{position:absolute;inset:0;width:100%;height:100%;transform:rotate(-90deg);}
.mx-progress-ring circle{fill:none;stroke-width:2;}
.mx-progress-ring .mx-pr-bg{stroke:rgba(11,11,11,.12);}
.mx-progress-ring .mx-pr-fg{stroke:var(--green,#22C55E);stroke-linecap:round;
  stroke-dasharray:132;stroke-dashoffset:132;transition:stroke-dashoffset .15s linear;}
.mx-progress-ring button{position:relative;z-index:1;background:var(--cream,#F5F2EA);
  border:1.5px solid var(--ink,#0B0B0B);width:32px;height:32px;display:flex;align-items:center;
  justify-content:center;cursor:pointer;font-family:var(--mono,monospace);font-size:14px;
  line-height:1;padding:0;transition:background .18s,transform .18s;}
.mx-progress-ring button:hover{background:var(--green,#22C55E);transform:translateY(-2px);}
.mx-progress-ring button::before{content:'^';font-weight:700;}

/* ---------- 4. Command palette (Cmd / Ctrl + K) ---------- */
.mx-palette-overlay{position:fixed;inset:0;background:rgba(11,11,11,.55);backdrop-filter:blur(4px);
  -webkit-backdrop-filter:blur(4px);z-index:10001;display:none;align-items:flex-start;
  justify-content:center;padding:12vh 16px 16px;opacity:0;transition:opacity .2s;}
.mx-palette-overlay.is-open{display:flex;opacity:1;}
.mx-palette{width:min(640px,100%);background:var(--cream,#F5F2EA);border:1.5px solid var(--ink,#0B0B0B);
  box-shadow:10px 10px 0 var(--ink,#0B0B0B);overflow:hidden;transform:translateY(-8px);
  transition:transform .25s var(--mx-ease);}
.mx-palette-overlay.is-open .mx-palette{transform:none;}
.mx-palette-head{display:flex;align-items:center;gap:10px;padding:14px 16px;border-bottom:1.5px solid var(--ink,#0B0B0B);background:var(--white,#fff);}
.mx-palette-head svg{flex:0 0 auto;}
.mx-palette-head input{flex:1;border:none;outline:none;background:transparent;font-family:var(--sans,sans-serif);
  font-size:16px;color:var(--ink,#0B0B0B);font-weight:500;}
.mx-palette-head kbd{font-family:var(--mono,monospace);font-size:10px;letter-spacing:.1em;
  border:1px solid rgba(11,11,11,.3);padding:3px 7px;background:var(--cream,#F5F2EA);text-transform:uppercase;}
.mx-palette-list{max-height:55vh;overflow:auto;}
.mx-palette-section{padding:10px 16px 4px;font-family:var(--mono,monospace);font-size:9px;
  letter-spacing:.18em;text-transform:uppercase;color:rgba(11,11,11,.48);background:var(--cream,#F5F2EA);}
.mx-palette-item{display:flex;align-items:center;gap:14px;padding:12px 16px;cursor:pointer;
  border-bottom:1px solid rgba(11,11,11,.08);font-family:var(--sans,sans-serif);font-size:14px;
  color:var(--ink,#0B0B0B);transition:background .12s;text-decoration:none;}
.mx-palette-item:last-child{border-bottom:none;}
.mx-palette-item .mx-pi-icon{width:28px;height:28px;border:1.5px solid var(--ink,#0B0B0B);
  display:flex;align-items:center;justify-content:center;font-family:var(--mono,monospace);
  font-size:11px;background:var(--white,#fff);flex:0 0 auto;}
.mx-palette-item .mx-pi-main{flex:1;min-width:0;}
.mx-palette-item .mx-pi-main strong{display:block;font-weight:600;font-size:14px;}
.mx-palette-item .mx-pi-main span{display:block;font-size:11px;color:rgba(11,11,11,.5);
  font-family:var(--mono,monospace);letter-spacing:.05em;margin-top:2px;}
.mx-palette-item .mx-pi-hint{font-family:var(--mono,monospace);font-size:9px;letter-spacing:.12em;
  text-transform:uppercase;color:rgba(11,11,11,.4);flex:0 0 auto;}
.mx-palette-item.is-active,.mx-palette-item:hover{background:var(--green,#22C55E);}
.mx-palette-foot{display:flex;gap:14px;padding:10px 16px;border-top:1.5px solid var(--ink,#0B0B0B);
  background:var(--white,#fff);font-family:var(--mono,monospace);font-size:9px;letter-spacing:.12em;
  text-transform:uppercase;color:rgba(11,11,11,.55);flex-wrap:wrap;}
.mx-palette-foot kbd{border:1px solid rgba(11,11,11,.3);padding:2px 6px;background:var(--cream,#F5F2EA);
  font-family:var(--mono,monospace);font-size:9px;margin-right:6px;}

/* Cmd-K hint pill (desktop, shown once on first idle) */
.mx-kbd-hint{position:fixed;bottom:22px;left:22px;z-index:997;background:var(--ink,#0B0B0B);
  color:var(--cream,#F5F2EA);border:1.5px solid var(--ink,#0B0B0B);padding:10px 14px;
  display:none;align-items:center;gap:10px;font-family:var(--mono,monospace);font-size:9px;
  letter-spacing:.14em;text-transform:uppercase;box-shadow:5px 5px 0 var(--green,#22C55E);
  cursor:pointer;animation:mx-pop .35s var(--mx-ease);}
.mx-kbd-hint.is-on{display:inline-flex;}
.mx-kbd-hint kbd{border:1px solid rgba(245,242,234,.4);padding:3px 6px;background:rgba(255,255,255,.06);
  color:var(--cream,#F5F2EA);}
.mx-kbd-hint button{background:none;border:none;color:rgba(245,242,234,.5);cursor:pointer;
  font-size:14px;line-height:1;padding:0 0 0 6px;}
@keyframes mx-pop{from{opacity:0;transform:translateY(8px) scale(.96);}to{opacity:1;transform:none;}}

/* ---------- 5. Sticky bottom CTA (appears after scroll on home) ---------- */
.mx-sticky-cta{position:fixed;left:50%;bottom:18px;transform:translateX(-50%) translateY(120%);
  z-index:996;background:var(--ink,#0B0B0B);color:var(--cream,#F5F2EA);border:1.5px solid var(--ink,#0B0B0B);
  box-shadow:6px 6px 0 var(--green,#22C55E);display:flex;align-items:center;gap:14px;
  padding:10px 12px 10px 18px;max-width:calc(100% - 32px);transition:transform .35s var(--mx-ease);
  font-family:var(--mono,monospace);font-size:10px;letter-spacing:.12em;text-transform:uppercase;}
.mx-sticky-cta.is-on{transform:translateX(-50%) translateY(0);}
.mx-sticky-cta .mx-sc-dot{width:8px;height:8px;background:var(--green,#22C55E);border-radius:50%;
  animation:mx-pulse 1.4s ease-in-out infinite;}
.mx-sticky-cta a{background:var(--green,#22C55E);color:var(--ink,#0B0B0B);padding:9px 14px;
  border:1.5px solid var(--ink,#0B0B0B);font-weight:700;letter-spacing:.12em;transition:transform .15s;}
.mx-sticky-cta a:hover{transform:translate(-2px,-2px);box-shadow:3px 3px 0 var(--cream,#F5F2EA);}
.mx-sticky-cta button{background:none;border:none;color:rgba(245,242,234,.5);cursor:pointer;
  font-size:18px;line-height:1;padding:0 4px;}
@keyframes mx-pulse{50%{transform:scale(1.55);opacity:.45;}}
@media(max-width:560px){.mx-sticky-cta{font-size:9px;gap:10px;padding:8px 8px 8px 14px;}
  .mx-sticky-cta a{padding:8px 10px;}}

/* ---------- 6. Tilt / parallax cards (no-JS-fallback) ---------- */
.mx-tilt{transform-style:preserve-3d;transition:transform .35s var(--mx-ease);will-change:transform;}

/* ---------- 7. Reveal-up animation (richer than base) ---------- */
.mx-r{opacity:0;transform:translateY(22px);transition:opacity .55s var(--mx-ease),transform .55s var(--mx-ease);}
.mx-r.is-in{opacity:1;transform:none;}
.mx-r-1{transition-delay:.08s;} .mx-r-2{transition-delay:.16s;}
.mx-r-3{transition-delay:.24s;} .mx-r-4{transition-delay:.32s;}

/* ---------- 8. Hero animated SVG diagram ---------- */
.mx-hero-svg{display:block;width:100%;height:auto;}
.mx-hero-svg .mx-flow{stroke-dasharray:6 8;animation:mx-flow 1.4s linear infinite;}
.mx-hero-svg .mx-flow-2{animation-delay:.5s;}
.mx-hero-svg .mx-flow-3{animation-delay:1s;}
.mx-hero-svg .mx-node{transition:transform .25s var(--mx-ease);}
.mx-hero-svg .mx-node:hover{transform:translateY(-3px);}
.mx-hero-svg .mx-pulse{animation:mx-pulse-svg 2.2s ease-in-out infinite;transform-origin:center;transform-box:fill-box;}
.mx-hero-svg .mx-pulse-2{animation-delay:.7s;}
.mx-hero-svg .mx-pulse-3{animation-delay:1.4s;}
@keyframes mx-flow{to{stroke-dashoffset:-28;}}
@keyframes mx-pulse-svg{0%,100%{opacity:.7;transform:scale(1);}50%{opacity:1;transform:scale(1.18);}}

/* Tag word-rotator inside hero */
.mx-rotator{display:inline-flex;flex-wrap:wrap;align-items:baseline;gap:0;position:relative;
  vertical-align:baseline;color:var(--green,#22C55E);text-shadow:2px 2px 0 var(--ink,#0B0B0B);font-style:italic;}
.mx-rotator-track{position:relative;height:1.05em;overflow:hidden;display:inline-block;vertical-align:bottom;}
.mx-rotator-word{display:block;line-height:1.05;transition:transform .55s var(--mx-ease);will-change:transform;}

/* ---------- 9. Live activity ticker (cosmetic, no backend) ---------- */
.mx-live{position:fixed;left:18px;bottom:18px;z-index:995;background:var(--white,#fff);
  border:1.5px solid var(--ink,#0B0B0B);box-shadow:4px 4px 0 var(--ink,#0B0B0B);
  padding:10px 14px;display:none;align-items:center;gap:10px;max-width:300px;
  transform:translateY(40px);opacity:0;transition:transform .4s var(--mx-ease),opacity .4s;
  font-family:var(--mono,monospace);font-size:9px;letter-spacing:.1em;text-transform:uppercase;
  color:rgba(11,11,11,.65);}
.mx-live.is-on{display:flex;transform:none;opacity:1;}
.mx-live .mx-live-dot{width:8px;height:8px;background:var(--green,#22C55E);border-radius:50%;
  animation:mx-pulse 1.4s ease-in-out infinite;flex:0 0 auto;}
.mx-live strong{color:var(--ink,#0B0B0B);font-weight:700;letter-spacing:.04em;}
.mx-live button{position:absolute;top:-10px;right:-10px;width:22px;height:22px;background:var(--ink,#0B0B0B);
  color:var(--cream,#F5F2EA);border:1.5px solid var(--ink,#0B0B0B);cursor:pointer;font-size:12px;line-height:1;padding:0;}
@media(max-width:640px){.mx-live{display:none!important;}}

/* ---------- 10. Reading time / share strip on long-form ---------- */
.mx-read-meta{display:inline-flex;align-items:center;gap:14px;font-family:var(--mono,monospace);
  font-size:10px;letter-spacing:.12em;text-transform:uppercase;color:rgba(11,11,11,.5);margin-top:8px;}
.mx-read-meta span{display:inline-flex;align-items:center;gap:6px;}
.mx-read-meta i{width:6px;height:6px;background:var(--green,#22C55E);border-radius:50%;font-style:normal;}

/* ---------- 11. Skip-to-content (a11y) ---------- */
.mx-skip{position:absolute;top:-100px;left:0;background:var(--ink,#0B0B0B);color:var(--cream,#F5F2EA);
  padding:12px 18px;font-family:var(--mono,monospace);font-size:11px;letter-spacing:.12em;
  text-transform:uppercase;border:1.5px solid var(--ink,#0B0B0B);z-index:10002;text-decoration:none;}
.mx-skip:focus{top:8px;left:8px;outline:2px solid var(--green,#22C55E);outline-offset:2px;}

/* ---------- 12. Easter-egg overlay (Konami code) ---------- */
.mx-egg{position:fixed;inset:0;background:rgba(11,11,11,.92);color:var(--cream,#F5F2EA);
  z-index:10003;display:none;align-items:center;justify-content:center;padding:24px;text-align:center;
  font-family:var(--mono,monospace);}
.mx-egg.is-on{display:flex;animation:mx-glitch .35s var(--mx-ease);}
.mx-egg-inner{max-width:480px;}
.mx-egg-tag{display:inline-block;background:var(--green,#22C55E);color:var(--ink,#0B0B0B);
  border:1.5px solid var(--cream,#F5F2EA);padding:6px 12px;font-size:9px;letter-spacing:.18em;text-transform:uppercase;}
.mx-egg h3{font-family:var(--serif,serif);font-size:42px;line-height:1;font-weight:900;margin:16px 0 12px;}
.mx-egg p{font-size:13px;line-height:1.6;color:rgba(245,242,234,.7);margin:0 0 20px;letter-spacing:.04em;}
.mx-egg code{display:block;background:rgba(255,255,255,.06);border:1px dashed rgba(245,242,234,.3);
  padding:14px;font-size:16px;letter-spacing:.18em;color:var(--green,#22C55E);margin-bottom:18px;}
.mx-egg button{background:var(--cream,#F5F2EA);color:var(--ink,#0B0B0B);border:1.5px solid var(--cream,#F5F2EA);
  padding:10px 18px;font-family:var(--mono,monospace);font-size:10px;letter-spacing:.12em;text-transform:uppercase;
  cursor:pointer;font-weight:700;}
.mx-egg button:hover{background:var(--green,#22C55E);}
@keyframes mx-glitch{
  0%{transform:translate(0);}
  20%{transform:translate(-3px,2px);}
  40%{transform:translate(2px,-2px);}
  60%{transform:translate(-2px,1px);}
  100%{transform:translate(0);}
}

/* ---------- 13. Section anchor "halo" on hash-jump ---------- */
.mx-halo{animation:mx-halo 1.4s var(--mx-ease);}
@keyframes mx-halo{
  0%{box-shadow:0 0 0 0 rgba(34,197,94,.55);}
  100%{box-shadow:0 0 0 28px rgba(34,197,94,0);}
}

/* ---------- 14. Section dividers w/ ticker numbers ---------- */
.mx-section-tag{display:inline-flex;align-items:center;gap:8px;font-family:var(--mono,monospace);
  font-size:9px;letter-spacing:.18em;text-transform:uppercase;color:rgba(11,11,11,.5);margin-bottom:8px;}
.mx-section-tag::before{content:'';width:18px;height:1.5px;background:var(--green,#22C55E);}

/* ---------- 15. Hero typing cursor ---------- */
.mx-type{display:inline-block;}
.mx-type::after{content:'_';color:var(--green,#22C55E);margin-left:2px;animation:mx-blink 1s steps(2) infinite;}
@keyframes mx-blink{50%{opacity:0;}}

/* ---------- 16. Toolbar (right side) — settings dock ---------- */
.mx-dock{position:fixed;right:18px;top:50%;transform:translateY(-50%);z-index:994;display:none;flex-direction:column;
  gap:6px;background:var(--cream,#F5F2EA);border:1.5px solid var(--ink,#0B0B0B);padding:6px;
  box-shadow:4px 4px 0 var(--ink,#0B0B0B);}
@media (hover:hover) and (pointer:fine){.mx-dock{display:flex;}}
.mx-dock button{width:34px;height:34px;background:var(--white,#fff);border:1px solid rgba(11,11,11,.15);
  display:flex;align-items:center;justify-content:center;cursor:pointer;font-family:var(--mono,monospace);
  font-size:10px;font-weight:700;color:var(--ink,#0B0B0B);transition:background .15s,transform .15s;padding:0;}
.mx-dock button:hover{background:var(--green,#22C55E);transform:translateX(-3px);}
.mx-dock button.is-on{background:var(--ink,#0B0B0B);color:var(--cream,#F5F2EA);}
.mx-dock button svg{width:14px;height:14px;}
.mx-dock-tip{position:absolute;right:46px;top:50%;transform:translateY(-50%) translateX(-4px);
  background:var(--ink,#0B0B0B);color:var(--cream,#F5F2EA);padding:5px 9px;font-family:var(--mono,monospace);
  font-size:9px;letter-spacing:.12em;text-transform:uppercase;white-space:nowrap;opacity:0;pointer-events:none;
  transition:opacity .15s,transform .15s;}
.mx-dock button:hover .mx-dock-tip{opacity:1;transform:translateY(-50%) translateX(0);}
@media(max-width:1080px){.mx-dock{display:none!important;}}

/* ---------- 17. Image lazy-fade ---------- */
img.mx-lazy{opacity:0;transition:opacity .6s var(--mx-ease);}
img.mx-lazy.is-loaded{opacity:1;}

/* ---------- 18. Reduced motion ---------- */
@media (prefers-reduced-motion:reduce){
  .mx-cursor,.mx-cursor-dot{display:none!important;}
  html.mx-cursor-on,html.mx-cursor-on *{cursor:auto!important;}
  .mx-flow,.mx-pulse,.mx-rotator-word{animation:none!important;}
  .mx-r{opacity:1!important;transform:none!important;}
  .mx-magnetic,.mx-tilt{transform:none!important;}
}