/* ======================================================================
   NA WEBSITE THEME — Fiber-Optic Hero Canvas
   The animated <canvas> now IS the background — the parallax image
   is hidden so the canvas draws its own dark + fiber scene.
   ====================================================================== */

/* ── Hide the old parallax background image entirely ──────────── */
#wrapwrap #wrap section.s_cover .s_parallax_bg {
    opacity: 0 !important;
    visibility: hidden !important;
}

/* Dark fallback in case canvas takes a moment to paint */
#wrapwrap #wrap section.s_cover {
    background-color: #020a1a !important;
}

/* ── Canvas — sits at the very back (z-index 0) ──────────────── */
.naw-hero-canvas {
    position: absolute !important;
    inset: 0 !important;
    width: 100% !important;
    height: 100% !important;
    z-index: 0 !important;          /* behind everything */
    pointer-events: none !important; /* clicks pass through */
    opacity: 0;
    animation: nawCanvasFadeIn 2s ease-out 0.2s forwards;
}

@keyframes nawCanvasFadeIn {
    to { opacity: 1; }
}

/* ── Soften the gradient overlay (canvas already provides dark bg) */
#wrapwrap #wrap section.s_cover::before {
    z-index: 1 !important;
    /* Lighten the overlay — the canvas bg is already dark enough */
    background: linear-gradient(
        135deg,
        rgba(0, 30, 80, 0.35) 0%,
        rgba(0, 10, 30, 0.25) 50%,
        rgba(0, 40, 90, 0.30) 100%
    ) !important;
}

/* ── Text content stays on top ───────────────────────────────── */
#wrapwrap #wrap section.s_cover > .s_allow_columns {
    z-index: 2 !important;
}

/* ── Reduced motion — show static dark bg, no canvas ─────────── */
@media (prefers-reduced-motion: reduce) {
    .naw-hero-canvas {
        display: none !important;
    }
    #wrapwrap #wrap section.s_cover .s_parallax_bg {
        opacity: 1 !important;
        visibility: visible !important;
    }
}

/* ── Hero Logo Overlay (top-left of hero section) ──────────────── */
.naw-hero-logo {
    position: absolute !important;
    top: 28px !important;
    left: 36px !important;
    z-index: 3 !important;
    pointer-events: none !important;
    opacity: 0;
    animation: nawLogoFadeIn 1.5s ease-out 0.5s forwards;
}
.naw-hero-logo img {
    width: 340px !important;
    height: auto !important;
    filter: drop-shadow(0 4px 30px rgba(0, 120, 255, 0.25))
            drop-shadow(0 2px 10px rgba(0, 0, 0, 0.4)) !important;
    opacity: 0.95 !important;
}
@keyframes nawLogoFadeIn {
    from { opacity: 0; transform: translateY(-10px); }
    to   { opacity: 1; transform: translateY(0); }
}

/* ── Hero logo responsive ─────────────────────────────────────── */
@media (max-width: 991.98px) {
    .naw-hero-logo {
        top: 20px !important;
        left: 20px !important;
    }
    .naw-hero-logo img {
        width: 180px !important;
    }
}
@media (max-width: 575.98px) {
    .naw-hero-logo {
        top: 16px !important;
        left: 16px !important;
    }
    .naw-hero-logo img {
        width: 140px !important;
    }
}