html {
    scroll-behavior: smooth;
    scroll-snap-type: y mandatory;
    overflow-x: hidden;
}

.hero-section {
    background-color: #0f172a;
    position: relative;
    overflow: hidden;
    min-height: 100vh;
    display: flex;
    align-items: center;
    justify-content: center;
}

.circuit-grid {
    position: absolute;
    inset: 0;
    background-image: radial-gradient(#334155 1px, transparent 1px);
    background-size: 40px 40px;
    opacity: 0.2;
}

.circuit-svg {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    pointer-events: none;
}

.circuit-trace {
    fill: none;
    stroke: #334155;
    stroke-width: 2;
    opacity: 0.5;
}

.circuit-active {
    fill: none;
    stroke: #3b82f6;
    stroke-width: 3;
    stroke-dasharray: 100 4000;
    stroke-dashoffset: 100;
    animation: circuit-anim 4s linear infinite;
    filter: drop-shadow(0 0 8px rgba(59, 130, 246, 0.6));
    stroke-linecap: round;
}

@keyframes circuit-anim {
    to { stroke-dashoffset: -4000; }
}

/* Full Page Scroll & Animation Classes */
.snap-section {
    scroll-snap-align: start;
    min-height: 100vh;
    position: relative;
}

.reveal {
    opacity: 0;
    transform: translateY(50px) scale(0.9);
    filter: blur(10px);
    transition: all 1s cubic-bezier(0.16, 1, 0.3, 1);
}

.reveal.active {
    opacity: 1;
    transform: translateY(0) scale(1);
    filter: blur(0);
}