/* Glowing colored cards, brought back from the original Metamorphosis look.
   Each card gets a soft color glow (purple, teal, pink, blue, cycling) that brightens and turns when you hover. */
.tool, .way { position: relative; overflow: hidden; isolation: isolate; background: rgba(12,16,34,.72); }
.tool::before, .way::before { content: ""; position: absolute; inset: -40%; z-index: -1; pointer-events: none;
  background: radial-gradient(circle at 30% 30%, var(--g1, rgba(169,139,255,.55)), transparent 55%), radial-gradient(circle at 80% 90%, var(--g2, rgba(92,225,255,.45)), transparent 50%);
  opacity: .38; transition: opacity .3s, transform 6s linear; }
.tool:hover::before, .way:hover::before, .tool:focus-visible::before, .way:focus-visible::before { opacity: .7; transform: rotate(25deg); }
.tool:hover, .way:hover { border-color: var(--g1c, #a98bff) !important; box-shadow: 0 20px 50px -24px var(--g1c, #a98bff); }
.tool:nth-child(4n+1), .way:nth-child(4n+1) { --g1: rgba(169,139,255,.6); --g2: rgba(92,225,255,.35); --g1c: #a98bff; }   /* purple */
.tool:nth-child(4n+2), .way:nth-child(4n+2) { --g1: rgba(46,214,170,.5);  --g2: rgba(92,150,255,.35); --g1c: #2ed6aa; }   /* teal */
.tool:nth-child(4n+3), .way:nth-child(4n+3) { --g1: rgba(255,92,190,.48); --g2: rgba(169,139,255,.35); --g1c: #ff5cbe; }   /* pink */
.tool:nth-child(4n+4), .way:nth-child(4n+4) { --g1: rgba(80,150,255,.55); --g2: rgba(46,214,170,.3);  --g1c: #5096ff; }   /* blue */
@media (prefers-reduced-motion: reduce) { .tool::before, .way::before { transition: none; } .tool:hover::before, .way:hover::before { transform: none; } }