/* =============================================================================
   Hero Section - Split Layout
   ============================================================================= */
.hero {
    min-height: 100vh;
    min-height: 100dvh; /* Dynamic viewport height for mobile browsers */
    display: flex;
    flex-direction: column;
    justify-content: center;
    /* Responsive padding: scales with viewport, ensures content fits */
    padding: clamp(80px, 10vh, 120px) 0 clamp(40px, 6vh, 80px);
    position: relative;
}

/* Hero Banner - Bottom status strip */
.hero-banner {
    position: relative;
    display: flex;
    justify-content: center;
    align-items: center;
    gap: 12px;
    padding: 8px 20px;
    /* Responsive margin that adapts to viewport */
    margin: clamp(16px, 3vh, 32px) auto 0;
    width: fit-content;
    background: var(--bg-subtle);
    border: 1px solid var(--border);
    border-radius: 20px;
    font-family: var(--font-mono);
    font-size: 10px;
    font-weight: 500;
    letter-spacing: 0.1em;
    color: var(--text-tertiary);
    z-index: 20;
}

.hero-banner-dot {
    width: 6px;
    height: 6px;
    background: var(--accent);
    border-radius: 50%;
    animation: pulse 2s ease-in-out infinite;
}

.hero-banner-sep {
    opacity: 0.4;
}

/* Split layout container */
.hero-split {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: var(--spacing-3xl);
    align-items: start; /* Align to top for better text/diagram relationship */
    max-width: var(--content-max);
    margin: 0 auto;
    overflow: visible; /* Allow diagram to overflow */
}

.hero-content {
    text-align: left;
    max-width: 600px;
    width: 100%;
    /* Responsive top spacing with GUARANTEED minimum clearance from SVG:
       - 270px absolute minimum floor
       - 18vw scales with SVG size (SVG is 75vw, so padding tracks its growth)
       - 30vh scales with viewport height
       - Ensures clearance on both tall and ultra-wide screens */
    padding-top: max(270px, 18vw, min(30vh, 340px));
    margin-left: -60px; /* Closer to left edge */
    margin-right: -100px; /* Overflow into right section */
    position: relative;
    z-index: 2; /* Above the artifact */
}

/* Hero Brand - Logo + Title */
.hero-brand {
    display: flex;
    align-items: center;
    justify-content: flex-start;
    gap: clamp(12px, 2vw, 20px);
    margin-bottom: var(--spacing-lg);
}

.hero-logo {
    width: clamp(36px, 6vw, 52px);
    height: clamp(36px, 6vw, 52px);
    object-fit: contain;
}

.brand-title {
    font-family: var(--font-logo);
    font-size: clamp(36px, 6vw, 56px);
    font-weight: 700;
    letter-spacing: -0.03em;
    line-height: 1;
    position: relative;
    margin: 0;
}

.brand-dot {
    color: var(--accent);
    position: relative;
    display: inline-block;
    animation: blink 2s ease-in-out infinite;
    text-shadow: 0 0 30px var(--accent-glow), 0 0 60px var(--accent-faint);
}

@keyframes blink {
    0%, 100% { 
        opacity: 1;
        text-shadow: 0 0 30px var(--accent-glow), 0 0 60px var(--accent-faint);
    }
    50% { 
        opacity: 0.4;
        text-shadow: 0 0 10px var(--accent-faint);
    }
}

@media (prefers-reduced-motion: reduce) {
    .brand-dot {
        animation: none;
    }
}

.hero-tagline {
    font-family: var(--font-family);
    font-size: clamp(36px, 5vw, 56px);
    font-weight: 600;
    letter-spacing: -0.03em;
    line-height: 1.1;
    margin-bottom: var(--spacing-md);
    color: var(--text-primary);
}

.tagline-line {
    white-space: nowrap;
}

.hero-subtitle {
    font-size: clamp(15px, 1.8vw, 17px);
    color: var(--text-secondary);
    max-width: 420px;
    margin: 0 0 var(--spacing-xl);
    line-height: 1.7;
}

/* =============================================================================
   Hero Artifact - Sophisticated Pipeline Diagram
   ============================================================================= */
.hero-artifact {
    display: flex;
    align-items: flex-start;
    justify-content: flex-end; /* Push to the right */
    position: relative;
    margin-left: -280px; /* More overflow into left */
    margin-right: -150px;
    /* Responsive vertical alignment - scales with viewport */
    margin-top: clamp(-60px, -5vh, -30px);
    z-index: 1;
}

.artifact-container {
    position: relative;
    width: 100%;
    max-width: 520px;
    aspect-ratio: 480 / 400;
}

.artifact-image {
    width: 1650px;
    max-width: 75vw; /* Even larger */
    height: auto;
    background: transparent;
    display: flex;
    align-items: center;
    justify-content: center;
}

.artifact-image svg,
.pipeline-diagram {
    width: 100%;
    height: 100%;
    overflow: visible;
    /* GPU acceleration and containment for better rendering performance */
    contain: layout style;
    transform: translateZ(0);
}

/* Data flow particles */
.particle {
    will-change: transform, opacity;
}

.particle-group {
    pointer-events: none;
}

/* Data sources floating animation */
.pipeline-diagram .source {
    transform-origin: center;
}

.pipeline-diagram .source-docs {
    animation: float-source 5s ease-in-out infinite;
}

.pipeline-diagram .source-db {
    animation: float-source 5.5s ease-in-out infinite;
    animation-delay: -1.5s;
}

.pipeline-diagram .source-api {
    animation: float-source 4.5s ease-in-out infinite;
    animation-delay: -3s;
}

@keyframes float-source {
    0%, 100% { transform: translate(0, 0); }
    50% { transform: translate(2px, -4px); }
}

/* Document stack subtle shift */
.pipeline-diagram .doc-stack .doc {
    transition: transform 0.3s ease;
}

.pipeline-diagram .doc-stack:hover .doc-1 {
    transform: translate(-2px, -2px);
}

.pipeline-diagram .doc-stack:hover .doc-2 {
    transform: translate(-1px, -1px);
}

/* Processing core animations */
.pipeline-diagram .core-center {
    animation: core-pulse 2s ease-in-out infinite;
}

@keyframes core-pulse {
    0%, 100% { 
        transform: scale(1);
        opacity: 1;
    }
    50% { 
        transform: scale(1.15);
        opacity: 0.85;
    }
}

/* Core rings rotation */
.pipeline-diagram .ring-outer {
    animation: ring-rotate 20s linear infinite;
    transform-origin: center;
    transform-box: fill-box;
}

.pipeline-diagram .ring-middle {
    animation: ring-rotate 15s linear infinite reverse;
    transform-origin: center;
    transform-box: fill-box;
}

.pipeline-diagram .ring-inner {
    animation: ring-rotate 10s linear infinite;
    transform-origin: center;
    transform-box: fill-box;
}

@keyframes ring-rotate {
    from { transform: rotate(0deg); }
    to { transform: rotate(360deg); }
}

/* Pulse ring expansion */
.pipeline-diagram .core-pulse-ring {
    animation: pulse-expand 2.5s ease-out infinite;
}

@keyframes pulse-expand {
    0% {
        transform: scale(1);
        opacity: 0.8;
    }
    100% {
        transform: scale(2.5);
        opacity: 0;
    }
}

/* Core glow breathing */
.pipeline-diagram .core-glow {
    animation: glow-breathe 3s ease-in-out infinite;
}

@keyframes glow-breathe {
    0%, 100% { opacity: 0.1; transform: scale(1); }
    50% { opacity: 0.25; transform: scale(1.05); }
}

/* Floating nodes around core */
.pipeline-diagram .core-nodes .node {
    animation: node-orbit 8s ease-in-out infinite;
    transform-origin: center;
}

.pipeline-diagram .node-1 { animation-delay: 0s; }
.pipeline-diagram .node-2 { animation-delay: -2.67s; }
.pipeline-diagram .node-3 { animation-delay: -5.33s; }

@keyframes node-orbit {
    0%, 100% { 
        transform: translate(0, 0);
        opacity: 0.5;
    }
    25% { 
        transform: translate(3px, -2px);
        opacity: 0.8;
    }
    50% { 
        transform: translate(0, -4px);
        opacity: 0.6;
    }
    75% { 
        transform: translate(-3px, -2px);
        opacity: 0.8;
    }
}

/* Insight cards floating */
.pipeline-diagram .insight {
    animation: float-insight 6s ease-in-out infinite;
}

.pipeline-diagram .insight-1 {
    animation-delay: 0s;
}

.pipeline-diagram .insight-2 {
    animation-delay: -2s;
}

.pipeline-diagram .insight-3 {
    animation-delay: -4s;
}

@keyframes float-insight {
    0%, 100% { transform: translate(0, 0); }
    50% { transform: translate(3px, -5px); }
}

/* Flow path dashed animation - only animate primary paths for performance */
.pipeline-diagram .flow-paths path {
    stroke-dasharray: 8 6;
    /* Static by default - no animation */
}

/* Only animate the primary backbone paths */
.pipeline-diagram .flow-paths path.is-animated {
    animation: flow-dash 4s linear infinite;
}

@keyframes flow-dash {
    to { stroke-dashoffset: -28; }
}

@media (prefers-reduced-motion: reduce) {
    .pipeline-diagram .flow-paths path.is-animated {
        animation: none;
    }
}

/* Particles - initial hidden state (GSAP will animate) */
.pipeline-diagram .particle {
    opacity: 0;
}

/* Junction nodes pulse */
.pipeline-diagram .junction {
    animation: junction-pulse 3s ease-in-out infinite;
}

@keyframes junction-pulse {
    0%, 100% { transform: scale(1); }
    50% { transform: scale(1.1); }
}