/* === Homepage Hero === */
.hero-section {
    position: relative;
    width: 100vw;
    height: 100vh;
    overflow: hidden;
    transition: filter 0.3s ease;
    will-change: filter;
}

/* Override fixed nav for homepage — nav sits inside hero */
.hero-section .nav-header {
    position: absolute;
    background: none;
    backdrop-filter: none;
    opacity: 0;
    animation: navFadeIn 1s ease-out 0.2s forwards;
}

.camo-background {
    position: absolute;
    top: 0; left: 0;
    width: 100%; height: 100%;
    background: var(--bg-deep);
    z-index: 1;
}

#camo-canvas, #circuit-canvas {
    position: absolute;
    top: 0; left: 0;
    width: 100%; height: 100%;
    pointer-events: none;
}
#camo-canvas { z-index: 2; }
#circuit-canvas { z-index: 3; }

.vignette {
    position: absolute;
    top: 0; left: 0;
    width: 100%; height: 100%;
    background: radial-gradient(ellipse at center, transparent 0%, rgba(0,0,0,0.4) 100%);
    z-index: 4;
    pointer-events: none;
}

/* Content Overlay */
.content-overlay {
    position: absolute;
    top: 50%;
    left: 0;
    transform: translateY(-50%);
    max-width: 65%;
    z-index: 10;
    color: white;
    margin-left: 100px;
}

.content-overlay h1 {
    font-size: clamp(2.5rem, 5vw, 4rem);
    font-weight: 800;
    margin: 0;
    line-height: 1.1;
    letter-spacing: -0.02em;
}

.content-overlay .tagline {
    font-size: clamp(1rem, 1.8vw, 1.35rem);
    font-weight: 600;
    margin-bottom: 1.5rem;
    line-height: 1.5;
    color: var(--text);
}

.content-overlay .description {
    font-size: clamp(0.9rem, 1.4vw, 1.1rem);
    max-width: 700px;
    margin-bottom: 2.5rem;
    line-height: 1.7;
    font-weight: 400;
}

/* === Text Reveal Animations === */
.content-overlay h1,
.content-overlay .divider,
.content-overlay .tagline,
.content-overlay .description,
.content-overlay .cta-button {
    opacity: 0;
    will-change: opacity, transform;
}

.content-overlay h1.blend-in {
    animation: blendIn 2s ease-in-out 0.5s forwards;
    color: var(--bg);
}

.content-overlay h1.stand-out {
    animation: standOutFade 0.5s ease-out 2.3s forwards;
}

.content-overlay .divider.reveal {
    animation: dividerReveal 0.6s ease-out 2.8s forwards;
    transform-origin: left center;
}

.content-overlay .tagline.reveal {
    animation: fadeUp 0.8s ease-out 3.2s forwards;
}

.content-overlay .description.reveal {
    animation: fadeUpDim 0.8s ease-out 3.5s forwards;
}

.content-overlay .cta-button.reveal {
    animation: fadeUpButton 0.6s ease-out 3.8s forwards, buttonShine 1.7s ease-out 4.9s forwards;
}

@keyframes navFadeIn {
    from { opacity: 0; transform: translateY(-10px); }
    to   { opacity: 1; transform: translateY(0); }
}

@keyframes blendIn {
    from { opacity: 0; color: var(--bg); }
    to   { opacity: 1; color: #fff; }
}

@keyframes standOutFade {
    from { opacity: 0; }
    to   { opacity: 1; }
}

@keyframes dividerReveal {
    from { opacity: 0; transform: scaleX(0); }
    to   { opacity: 1; transform: scaleX(1); }
}

@keyframes fadeUp {
    from { opacity: 0; transform: translateY(15px); }
    to   { opacity: 1; transform: translateY(0); }
}

@keyframes fadeUpDim {
    from { opacity: 0; transform: translateY(15px); }
    to   { opacity: 0.85; transform: translateY(0); }
}

@keyframes fadeUpButton {
    from { opacity: 0; transform: translateY(15px); }
    to   { opacity: 1; transform: translateY(0); }
}

@keyframes buttonShine {
    0%   { border-color: var(--accent); color: var(--accent); box-shadow: none; }
    20%  { border-color: var(--accent-light); color: var(--accent-light); box-shadow: 0 0 25px rgba(161,205,66,0.6), inset 0 0 20px rgba(161,205,66,0.15); }
    50%  { border-color: var(--accent-light); color: var(--accent-light); box-shadow: 0 0 25px rgba(161,205,66,0.6), inset 0 0 20px rgba(161,205,66,0.15); }
    100% { border-color: var(--accent); color: var(--accent); box-shadow: none; }
}

/* === Mobile === */
@media (max-width: 768px) {
    .content-overlay {
        left: 50%;
        top: 320px;
        transform: translate(-50%, -50%);
        width: 100% !important;
        max-width: 100% !important;
        text-align: center;
        padding: 0 1.25rem;
        margin-left: 0px;
    }
    .content-overlay h1 { font-size: clamp(1.8rem, 7vw, 2.5rem); }
    .content-overlay .divider.reveal { transform-origin: center center; }
    .content-overlay .tagline { font-size: clamp(0.95rem, 3.5vw, 1.1rem); margin-bottom: 1rem; }
    .content-overlay .tagline br { display: none; }
    .content-overlay .description { font-size: clamp(0.85rem, 3vw, 1rem); margin-bottom: 1.5rem; }
}