/* ==========================================================================
   EazyTrax.Com - Lenis Smooth Scrolling, GPU Compositing & Animations
   ========================================================================== */

/* ─── Lenis Smooth Scroll Engine ─────────────────────────────────────────── */
html.lenis,
html.lenis body {
    height: auto;
}

.lenis.lenis-smooth {
    scroll-behavior: auto !important;
}

.lenis.lenis-smooth [data-lenis-prevent] {
    overscroll-behavior: contain;
}

.lenis.lenis-stopped {
    overflow: hidden;
}

.lenis.lenis-smooth iframe {
    pointer-events: none;
}

/* ─── Page Fade-in & GPU Compositing ─────────────────────────────────────── */
@keyframes pageFadeIn {
    from {
        opacity: 0;
        transform: translate3d(0, 4px, 0);
    }
    to {
        opacity: 1;
        transform: translate3d(0, 0, 0);
    }
}

main {
    animation: pageFadeIn 0.3s cubic-bezier(0.16, 1, 0.3, 1);
    -webkit-backface-visibility: hidden;
    backface-visibility: hidden;
}

/* ─── Dynamic Scrolled Navbar ────────────────────────────────────────────── */
header {
    transition: background-color 0.25s ease, backdrop-filter 0.25s ease, box-shadow 0.25s ease, border-color 0.25s ease;
    -webkit-backface-visibility: hidden;
    backface-visibility: hidden;
}

header.nav-scrolled {
    background-color: rgba(255, 255, 255, 0.96) !important;
    backdrop-filter: blur(16px);
    box-shadow: 0 4px 20px -2px rgba(15, 23, 42, 0.07);
    border-bottom-color: rgba(226, 232, 240, 0.9);
}

/* ─── Ambient Background Spatial Atmosphere ──────────────────────────────── */
.spatial-mesh-bg {
    position: relative;
    overflow: hidden;
}

.spatial-mesh-bg::before {
    content: '';
    position: absolute;
    top: -120px;
    left: 50%;
    transform: translateX(-50%);
    width: 100%;
    max-width: 1200px;
    height: 550px;
    background: radial-gradient(ellipse at 50% 30%, rgba(37, 99, 235, 0.06) 0%, rgba(241, 245, 249, 0) 70%);
    pointer-events: none;
    z-index: 0;
}

.spatial-grid-overlay {
    background-size: 32px 32px;
    background-image: 
        linear-gradient(to right, rgba(226, 232, 240, 0.6) 1px, transparent 1px),
        linear-gradient(to bottom, rgba(226, 232, 240, 0.6) 1px, transparent 1px);
}

/* ─── Lightweight GPU-Accelerated Scroll Reveal ─────────────────────────── */
.reveal-init {
    opacity: 0;
    transform: translate3d(0, 16px, 0);
    transition: opacity 0.45s cubic-bezier(0.16, 1, 0.3, 1), transform 0.45s cubic-bezier(0.16, 1, 0.3, 1);
    -webkit-backface-visibility: hidden;
    backface-visibility: hidden;
}

.reveal-init.is-revealed {
    opacity: 1;
    transform: translate3d(0, 0, 0);
}

/* Stagger Delays */
.grid > .reveal-init:nth-child(1) { transition-delay: 0.03s; }
.grid > .reveal-init:nth-child(2) { transition-delay: 0.08s; }
.grid > .reveal-init:nth-child(3) { transition-delay: 0.13s; }
.grid > .reveal-init:nth-child(4) { transition-delay: 0.18s; }
.grid > .reveal-init:nth-child(5) { transition-delay: 0.23s; }
.grid > .reveal-init:nth-child(6) { transition-delay: 0.28s; }

/* ─── Micro-Interactions & Hover Depth ───────────────────────────────────── */
.ez-card-interactive,
.feature-spotlight-card,
.hw-card {
    transition: transform 0.2s cubic-bezier(0.16, 1, 0.3, 1), box-shadow 0.2s ease, border-color 0.2s ease;
    -webkit-backface-visibility: hidden;
    backface-visibility: hidden;
}

.ez-card-interactive:hover,
.feature-spotlight-card:hover,
.hw-card:hover {
    transform: translate3d(0, -3px, 0);
    box-shadow: 0 14px 30px -8px rgba(15, 23, 42, 0.08), 0 0 0 1px rgba(37, 99, 235, 0.12);
}

/* ─── Blueprint Grid System ──────────────────────────────────────────────── */
.blueprint-grid-light {
    background-size: 24px 24px;
    background-image: 
        linear-gradient(to right, rgba(226, 232, 240, 0.8) 1px, transparent 1px),
        linear-gradient(to bottom, rgba(226, 232, 240, 0.8) 1px, transparent 1px);
}

.blueprint-grid-dark {
    background-size: 24px 24px;
    background-image: 
        linear-gradient(to right, rgba(30, 41, 59, 0.7) 1px, transparent 1px),
        linear-gradient(to bottom, rgba(30, 41, 59, 0.7) 1px, transparent 1px);
}

/* ─── 3D Isometric View Switcher ─────────────────────────────────────────── */
.digital-twin-stage {
    perspective: 1200px;
}

.digital-twin-plane {
    transition: transform 0.6s cubic-bezier(0.16, 1, 0.3, 1), box-shadow 0.6s ease;
    transform-style: preserve-3d;
}

.digital-twin-plane.view-3d {
    transform: rotateX(28deg) rotateZ(-12deg) scale(0.94);
    box-shadow: -15px 20px 40px -10px rgba(15, 23, 42, 0.35), 0 0 0 1px rgba(59, 130, 246, 0.2);
}

.digital-twin-plane.view-2d {
    transform: rotateX(0deg) rotateZ(0deg) scale(1);
    box-shadow: 0 4px 20px -4px rgba(15, 23, 42, 0.15);
}

/* ─── Subtle Radar Scanline ──────────────────────────────────────────────── */
.radar-sweep-bar {
    position: absolute;
    top: 0;
    bottom: 0;
    width: 100px;
    background: linear-gradient(90deg, transparent, rgba(59, 130, 246, 0.08), rgba(59, 130, 246, 0.2), transparent);
    pointer-events: none;
    animation: radarSweep 7s linear infinite;
}

@keyframes radarSweep {
    0% { left: -120px; }
    100% { left: 100%; }
}

/* ─── Pulse Rings ────────────────────────────────────────────────────────── */
.beacon-pulse-ring {
    position: relative;
}

.beacon-pulse-ring::before {
    content: '';
    position: absolute;
    inset: -4px;
    border-radius: 9999px;
    border: 1.5px solid rgba(59, 130, 246, 0.6);
    animation: beaconPulse 2.5s cubic-bezier(0.25, 1, 0.5, 1) infinite;
    pointer-events: none;
}

@keyframes beaconPulse {
    0% { transform: scale(0.8); opacity: 1; }
    100% { transform: scale(2.0); opacity: 0; }
}