/* ==========================================
   HERO ENHANCEMENT — focus + WOW
   Load AFTER style.css, ai-styles.css, apple-premium.css
   ========================================== */

/* ---- Ambient mint glow (dark only) ---- */
.hero {
    position: relative;
    isolation: isolate;
    /* Content iets omhoog: 'voorhoofd' kleiner. Robin's feedback.
       align-items: center + extra padding-bottom shift de content omhoog
       binnen de 100vh hero zonder de min-height te breken. */
    align-items: center;
    padding-bottom: clamp(80px, 10vh, 160px) !important;
}

body.dark-theme .hero::before {
    content: "";
    position: absolute;
    top: -180px;
    left: -220px;
    width: 800px;
    height: 800px;
    border-radius: 50%;
    background: radial-gradient(circle at center,
        rgba(46, 242, 160, 0.18) 0%,
        rgba(46, 242, 160, 0.06) 35%,
        transparent 70%);
    opacity: 0.55;
    filter: blur(20px);
    pointer-events: none;
    z-index: 0;
    will-change: transform;
}

body.dark-theme .hero .hero-content {
    position: relative;
    z-index: 2;
}

/* ---- Status chip (above H1) ---- */
.hero .hero-status-chip {
    display: inline-flex;
    align-items: center;
    gap: 0.55rem;
    padding: 0.4rem 0.95rem;
    margin-bottom: 1.35rem;
    border-radius: 999px;
    background: rgba(46, 242, 160, 0.08);
    border: 1px solid rgba(46, 242, 160, 0.28);
    backdrop-filter: blur(14px);
    -webkit-backdrop-filter: blur(14px);
    font-family: 'JetBrains Mono', ui-monospace, monospace;
    font-size: 0.7rem;
    font-weight: 600;
    letter-spacing: 0.16em;
    text-transform: uppercase;
    color: #2EF2A0;
    will-change: transform;
}

.hero .hero-status-chip__dot {
    width: 7px;
    height: 7px;
    border-radius: 50%;
    background: #2EF2A0;
    box-shadow: 0 0 12px rgba(46, 242, 160, 0.9);
    animation: hero-chip-pulse 2s ease-in-out infinite;
}

@keyframes hero-chip-pulse {
    0%, 100% { box-shadow: 0 0 10px rgba(46, 242, 160, 0.8), 0 0 0 0 rgba(46, 242, 160, 0.55); }
    70% { box-shadow: 0 0 14px rgba(46, 242, 160, 1), 0 0 0 9px rgba(46, 242, 160, 0); }
}

body.light-theme .hero .hero-status-chip {
    background: rgba(59, 130, 246, 0.08);
    border-color: rgba(59, 130, 246, 0.28);
    color: var(--accent-strong);
}

body.light-theme .hero .hero-status-chip__dot {
    background: var(--accent-strong);
    box-shadow: 0 0 12px rgba(59, 130, 246, 0.7);
}

/* ---- H1: kinetic shimmer + scale ---- */
.hero h1 {
    font-family: 'Inter', system-ui, sans-serif;
    font-weight: 900;
    font-size: clamp(3rem, 8vw, 6.5rem);
    line-height: 1;
    white-space: nowrap;
    letter-spacing: -0.04em;
    margin: 0 0 1.5rem 0;
    padding-bottom: 0.08em;
    background-image: linear-gradient(
        100deg,
        #2EF2A0 0%,
        #7FFFD0 30%,
        #FFFFFF 50%,
        #7FFFD0 70%,
        #2EF2A0 100%
    );
    background-size: 220% 100%;
    background-position: 0% 50%;
    background-repeat: no-repeat;
    -webkit-background-clip: text;
    background-clip: text;
    -webkit-text-fill-color: transparent;
    color: transparent;
    animation: hero-shimmer 8s ease-in-out infinite;
    text-wrap: balance;
    will-change: background-position, transform;
}

@keyframes hero-shimmer {
    0%   { background-position: 0% 50%; }
    50%  { background-position: 100% 50%; }
    100% { background-position: 0% 50%; }
}

body.light-theme .hero h1 {
    background-image: linear-gradient(
        100deg,
        #1e40af 0%,
        #3b82f6 30%,
        #0f172a 50%,
        #3b82f6 70%,
        #1e40af 100%
    );
    background-size: 220% 100%;
    -webkit-background-clip: text;
    background-clip: text;
    -webkit-text-fill-color: transparent;
}

/* ---- Subtitle: lighter, narrower, calmer ---- */
.hero .hero-subtitle {
    font-weight: 500;
    font-size: clamp(1rem, 1.4vw, 1.2rem);
    line-height: 1.55;
    max-width: 580px;
    margin-left: auto;
    margin-right: auto;
    margin-bottom: 2rem;
    opacity: 0.78;
    letter-spacing: 0.005em;
    text-wrap: balance;
    will-change: transform;
}

body.light-theme .hero .hero-subtitle {
    opacity: 0.82;
}

/* ---- CTAs: dominant primary, ghost secondary, micro-arrow ---- */
.hero .hero-actions {
    gap: 1rem;
    margin-top: 0.5rem;
}

.hero .hero-actions .btn-primary {
    position: relative;
    padding: 1.05rem 2.2rem 1.05rem 1.9rem;
    background: #2EF2A0;
    background-image: none;
    color: #0a0a0a;
    font-weight: 700;
    font-size: 1rem;
    letter-spacing: -0.005em;
    border-radius: 12px;
    box-shadow:
        0 0 0 1px rgba(46, 242, 160, 0.35),
        0 10px 30px -10px rgba(46, 242, 160, 0.55);
    transition: transform 0.25s cubic-bezier(0.16, 1, 0.3, 1),
                box-shadow 0.25s ease,
                background 0.25s ease;
}

.hero .hero-actions .btn-primary:hover {
    transform: translateY(-2px) scale(1.025);
    background: #3FF7AE;
    filter: none;
    box-shadow:
        0 0 0 1px rgba(46, 242, 160, 0.5),
        0 18px 44px -12px rgba(46, 242, 160, 0.7);
}

.hero .hero-actions .btn-primary i[data-lucide] {
    display: none;
}

.hero .hero-actions .btn-primary::after {
    content: "→";
    display: inline-block;
    margin-left: 0.65rem;
    font-weight: 600;
    font-size: 1.05em;
    transform: translateX(0);
    transition: transform 0.25s cubic-bezier(0.16, 1, 0.3, 1);
}

.hero .hero-actions .btn-primary:hover::after {
    transform: translateX(4px);
}

body.light-theme .hero .hero-actions .btn-primary {
    background: var(--accent-strong);
    color: #ffffff;
    box-shadow:
        0 0 0 1px rgba(59, 130, 246, 0.35),
        0 10px 30px -10px rgba(59, 130, 246, 0.55);
}

body.light-theme .hero .hero-actions .btn-primary:hover {
    background: #2563EB;
    box-shadow:
        0 0 0 1px rgba(59, 130, 246, 0.5),
        0 18px 44px -12px rgba(59, 130, 246, 0.7);
}

.hero .hero-actions .btn-secondary {
    padding: 1.05rem 1.8rem;
    background: transparent;
    border: 1px solid rgba(46, 242, 160, 0.4);
    color: #2EF2A0;
    font-weight: 600;
    border-radius: 12px;
    transition: transform 0.25s cubic-bezier(0.16, 1, 0.3, 1),
                background 0.25s ease,
                border-color 0.25s ease,
                color 0.25s ease;
}

.hero .hero-actions .btn-secondary:hover {
    background: rgba(46, 242, 160, 0.08);
    border-color: rgba(46, 242, 160, 0.7);
    color: #2EF2A0;
    transform: translateY(-2px);
}

.hero .hero-actions .btn-secondary i[data-lucide] {
    display: none;
}

.hero .hero-actions .btn-secondary::after {
    display: none;
}

body.light-theme .hero .hero-actions .btn-secondary {
    border-color: rgba(59, 130, 246, 0.4);
    color: var(--accent-strong);
}

body.light-theme .hero .hero-actions .btn-secondary:hover {
    background: rgba(59, 130, 246, 0.08);
    border-color: rgba(59, 130, 246, 0.7);
    color: var(--accent-strong);
}

/* ---- Reduce motion ---- */
@media (prefers-reduced-motion: reduce) {
    .hero h1 {
        animation: none;
        background-position: 50% 50%;
    }
    .hero .hero-status-chip__dot {
        animation: none;
    }
    .hero .hero-actions .btn-primary,
    .hero .hero-actions .btn-secondary,
    .hero .hero-actions .btn-primary::after,
    .hero .hero-actions .btn-secondary::after {
        transition: none;
    }
}

/* ---- Mobile ---- */
@media (max-width: 768px) {
    body.dark-theme .hero::before {
        width: 520px;
        height: 520px;
        top: -120px;
        left: -160px;
    }

    .hero h1 {
        font-size: clamp(3.5rem, 14vw, 5.5rem);
        letter-spacing: -0.035em;
    }

    .hero .hero-subtitle {
        max-width: 100%;
        padding: 0 0.5rem;
    }

    .hero .hero-actions {
        flex-direction: column;
        width: 100%;
        gap: 0.75rem;
    }

    .hero .hero-actions .btn-primary,
    .hero .hero-actions .btn-secondary {
        width: 100%;
        justify-content: center;
        padding-left: 1.5rem;
        padding-right: 1.5rem;
    }
}

/* Hero role line under the name */
.hero .hero-role {
    font-family: 'JetBrains Mono', monospace;
    font-size: 0.95rem;
    letter-spacing: 0.18em;
    text-transform: uppercase;
    color: var(--accent-strong);
    margin: 0.4rem 0 1.1rem;
}

@media (max-width: 640px) {
    .hero .hero-role { font-size: 0.8rem; letter-spacing: 0.12em; }
}