/* ==========================================================================
   Tools page additions to the "Ribbon & Decode" motion system.
   Loaded after netpack-motion.css and dark.css, whose card rules it adapts.
   ========================================================================== */

/* ---------- Hero: starfield behind the copy, arrow where the ribbon starts ---------- */
.tools-header .bg-continer {
    position: absolute;
    inset: 0;
    overflow: hidden;
    z-index: 0;
    pointer-events: none;
}
.tools-header::before { z-index: 1; }
.tools-header #menu { z-index: 20; }
.tools-header .np-arrive { --np-d: 0; }
.tools-header .h2-subtitle.np-arrive { --np-d: 2; }
.tools-header .tools-hero-stats.np-arrive { --np-d: 4; }
.tools-header .tools-arrow {
    position: absolute;
    z-index: 10;
    margin: 0 auto;
}
/* a tool page gets straight to the tool: a shorter hero, no stats */
.tools-header.tool-hero { min-height: 0; height: auto; }
.tools-header.tool-hero .centerHeader {
    top: auto;
    transform: none;
    padding: 120px 20px 56px;
}

/* ---------- Category titles: decoded words on a gradient-clipped heading ---------- */
.category-title .np-glyph { -webkit-text-fill-color: var(--np-magenta); }
.tool-category .border_netpack { margin-bottom: 34px; margin-top: -18px; }

/* ---------- Tool cards: dark.css draws a top stripe on ::before, np-card needs ::before
   for the cursor spotlight, so the stripe moves to the card's own background ---------- */
.tool-card.np-card::before {
    top: 0;
    right: 0;
    bottom: 0;
    left: 0;
    height: auto;
    background: radial-gradient(380px circle at var(--mx, 50%) var(--my, 50%), rgba(255, 255, 255, .13), transparent 70%) !important;
}
.tool-card.np-card {
    background-image: linear-gradient(90deg, var(--np-magenta), var(--np-violet), var(--np-blue)) !important;
    background-size: 100% 3px !important;
    background-repeat: no-repeat !important;
}
.tool-card.np-card .tool-icon { transition: transform .35s var(--np-ease), box-shadow .35s; }
.tool-card.np-card:hover .tool-icon {
    transform: scale(1.12) rotate(-4deg);
    box-shadow: 0 0 30px rgba(233, 18, 112, .55);
}

/* ---------- Search: the ribbon's colours wrap the box while typing ---------- */
.tools-search-container { position: relative; z-index: 5; }
.tools-search-input { transition: box-shadow .35s, border-color .35s; }
.tools-search-input:focus {
    border-color: transparent !important;
    box-shadow: 0 0 0 2px var(--np-magenta), 0 0 36px rgba(139, 15, 163, .55) !important;
}

@media (prefers-reduced-motion: reduce) {
    .tool-card.np-card:hover .tool-icon { transform: none; }
}