/* 10X AI motion layer – shared by every page. Safe to delete: pages work without it.
   Turns itself off for visitors who prefer reduced motion. */

/* ---- card hover: lift + glow + cursor spotlight ---- */
@media (hover:hover) and (pointer:fine) {
  html .tool-card, html .lab-card, html .mdl-card, html .cat-tile, html .compare-card {
    transition: transform .22s cubic-bezier(.2,.7,.2,1), box-shadow .22s ease, border-color .2s ease, background-color .2s ease;
  }
  html .tool-card:hover, html .lab-card:hover, html .mdl-card:hover, html .cat-tile:hover, html .compare-card:hover {
    transform: translateY(-4px);
    border-color: var(--lime-tint, rgba(180,255,58,.2));
    box-shadow: 0 10px 30px -12px var(--lime-glow, rgba(180,255,58,.25)), 0 2px 0 0 var(--lime-tint, rgba(180,255,58,.14));
  }
  html .tool-card, html .lab-card, html .mdl-card { background-repeat: no-repeat; }
  html .tool-card:hover, html .lab-card:hover, html .mdl-card:hover {
    background-image: radial-gradient(260px circle at var(--mx, 50%) var(--my, 0%), var(--lime-subtle, rgba(180,255,58,.08)), transparent 65%);
  }
}

/* ---- buttons: neon edge ---- */
@media (hover:hover) {
  html .btn-primary { transition: transform .15s ease, box-shadow .2s ease, background-color .15s ease; }
  html .btn-primary:hover { box-shadow: 0 0 0 1px var(--lime, #B4FF3A), 0 8px 26px -6px var(--lime-glow, rgba(180,255,58,.4)); transform: translateY(-1px); }
  html .btn-primary:active { transform: translateY(0) scale(.98); }
  html .btn-outline:hover { transform: translateY(-1px); }
}

/* ---- scroll reveal (class added by motion.js only) ---- */
.mo-pre { opacity: 0; transform: translateY(18px); }
.mo-in { opacity: 1; transform: none; transition: opacity .5s ease var(--mo-d, 0ms), transform .55s cubic-bezier(.2,.7,.2,1) var(--mo-d, 0ms); }
/* once revealed, hand hover transforms back to the card rules */
.mo-done { transition-delay: 0ms !important; }

/* ---- tab views: fade up on switch ---- */
@keyframes moViewIn { from { opacity: 0; transform: translateY(10px); } to { opacity: 1; transform: none; } }
.tools-view.active { animation: moViewIn .32s cubic-bezier(.2,.7,.2,1); }

/* ---- scroll progress bar ---- */
#mo-progress { position: fixed; top: 0; left: 0; height: 2px; width: 100%; transform-origin: 0 50%; transform: scaleX(0); background: linear-gradient(90deg, var(--lime, #B4FF3A), var(--cyan, #3ABDFF)); z-index: 9999; pointer-events: none; box-shadow: 0 0 10px var(--lime-glow, rgba(180,255,58,.4)); }

/* ---- mascot: gentle bob ---- */
@keyframes moBob { 0%,100% { transform: translateY(0) rotate(-1deg); } 50% { transform: translateY(-6px) rotate(1.5deg); } }
.hero-mascot { animation: moBob 5s ease-in-out infinite; }

/* ---- logo / nav touches ---- */
@media (hover:hover) { html .nav-link { transition: color .15s ease, background-color .15s ease; } }
html .tc-save { transition: transform .15s ease, color .15s ease; }
html .tc-save:active { transform: scale(1.25); }

@media (prefers-reduced-motion: reduce) {
  .mo-pre { opacity: 1; transform: none; }
  .mo-in { transition: none; }
  .tools-view.active, .hero-mascot { animation: none; }
  html .tool-card:hover, html .lab-card:hover, html .mdl-card:hover, html .cat-tile:hover, html .compare-card:hover, html .btn-primary:hover { transform: none; }
  #mo-progress { display: none; }
}