/* ============================================================
index-animation.css — NetsTuts Hero Network Animation
Place in: C:\xampp\htdocs\netstuts\public\
Link in index.html: is injected inside .cat-hero
by animation-init.js which is inlined at the bottom of index.html
============================================================ */
/* ── Canvas sits behind all hero content ─────────────────────── */
#nt-anim-canvas {
position: absolute;
inset: 0;
width: 100%;
height: 100%;
pointer-events: none;
opacity: 0.72;
z-index: 0;
will-change: transform;
transform: translateZ(0);
image-rendering: crisp-edges;
}
/* ── Hero must be relative so canvas is positioned inside it ── */
.cat-hero {
position: relative;
overflow: hidden;
}
/* ── All hero children sit above canvas ──────────────────────── */
.cat-hero > * {
position: relative;
z-index: 1;
}
/* ── Legend bar below canvas ──────────────────────────────────── */
#nt-anim-legend {
display: flex;
flex-wrap: wrap;
justify-content: center;
gap: 10px 20px;
padding: 10px 16px 4px;
background: rgba(0, 0, 0, 0.35);
border-top: 1px solid rgba(255, 255, 255, 0.08);
position: relative;
z-index: 2;
}
#nt-anim-legend .nt-leg-item {
display: flex;
align-items: center;
gap: 6px;
font-family: 'Sora', 'Segoe UI', sans-serif;
font-size: 11px;
color: rgba(255, 255, 255, 0.65);
letter-spacing: 0.02em;
}
#nt-anim-legend .nt-leg-dot {
width: 9px;
height: 9px;
border-radius: 50%;
flex-shrink: 0;
}
/* ── Tooltip ─────────────────────────────────────────────────── */
#nt-anim-tip {
position: absolute;
z-index: 20;
pointer-events: none;
background: rgba(13, 27, 42, 0.92);
border: 1px solid rgba(255, 255, 255, 0.18);
border-radius: 8px;
padding: 6px 12px;
font-family: 'JetBrains Mono', 'Courier New', monospace;
font-size: 11px;
color: #e2e8f0;
white-space: nowrap;
display: none;
line-height: 1.7;
}
/* ── Responsive: hide on very small screens ───────────────────── */
@media (max-width: 480px) {
#nt-anim-canvas {
opacity: 0.45;
}
#nt-anim-legend {
display: none;
}
}