/* ============================================
   CANDIDATE LANDING PAGE — Clean, focused
   ============================================ */

@keyframes float {
    0%, 100% { transform: translate(0, 0) scale(1); }
    33% { transform: translate(50px, -60px) scale(1.1); }
    66% { transform: translate(-40px, 40px) scale(0.9); }
}

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

@keyframes pulse-dot {
    0%, 100% { opacity: 1; box-shadow: 0 0 0 0 oklch(70% 0.22 145 / 0.6); }
    50% { opacity: 0.8; box-shadow: 0 0 0 6px oklch(70% 0.22 145 / 0); }
}

@keyframes shimmer {
    0% { inset-inline-start: -100%; }
    100% { inset-inline-start: 200%; }
}

@layer components {

    .hero {
        position: relative;
        overflow: hidden;
        display: flex;
        align-items: center;
        justify-content: center;
        min-block-size: calc(100cqb - 60px);
        padding: var(--space-3xl) clamp(1rem, 5vw, 4rem);

        .hero-bg {
            position: fixed;
            inset: 0;
            z-index: -1;
            overflow: hidden;
        }

        .gradient-orb {
            position: absolute;
            border-radius: 50%;
            filter: blur(90px);
            animation: float 18s ease-in-out infinite;
        }

        .gradient-orb--1 {
            width: 700px; height: 700px;
            top: -25%; left: -10%;
        }

        .gradient-orb--2 {
            width: 600px; height: 600px;
            bottom: -20%; right: -5%;
            animation-delay: -6s;
        }

        .noise-overlay {
            position: absolute;
            inset: 0;
            pointer-events: none;
        }

        .hero-content {
            position: relative;
            z-index: 1;
            display: flex;
            flex-direction: column;
            align-items: center;
            gap: var(--space-lg);
            text-align: center;
            max-inline-size: 700px;
            animation: fadeInUp 0.7s ease-out both;
        }

        .hero-badge {
            display: inline-flex;
            align-items: center;
            gap: var(--space-xs);
            padding: 6px 16px;
            border-radius: 100px;
            font-family: var(--font-heading);
            font-size: 0.75rem;
            font-weight: 600;
            letter-spacing: 0.06em;
            text-transform: uppercase;
            inline-size: fit-content;
        }

        .badge-dot {
            inline-size: 8px; block-size: 8px;
            border-radius: 50%;
            animation: pulse-dot 2s ease-in-out infinite;
        }

        h1 {
            font-family: var(--font-heading);
            font-size: clamp(2.5rem, 5.5vw, 4.2rem);
            font-weight: 800;
            line-height: 1.1;
            letter-spacing: -0.02em;
        }

        .hero-line { display: block; }

        .tagline {
            font-size: clamp(1rem, 1.5vw, 1.15rem);
            line-height: 1.7;
            max-inline-size: 55ch;
        }

        .cta-group {
            display: flex;
            flex-wrap: wrap;
            justify-content: center;
            gap: var(--space-md);
            padding-block-start: var(--space-sm);
        }

        .cta-button {
            display: inline-flex;
            align-items: center;
            gap: var(--space-xs);
            padding: 14px 32px;
            border-radius: 100px;
            font-family: var(--font-heading);
            font-size: 0.95rem;
            font-weight: var(--fw-semibold);
            cursor: pointer;
            transition: all 0.3s cubic-bezier(0.23, 1, 0.32, 1);
            position: relative;
            overflow: hidden;

            svg { transition: transform 0.3s ease-out; }
            &:hover svg { transform: translateX(4px); }
        }

        .btn-shimmer {
            position: absolute;
            inset-block-start: 0; inset-inline-start: -100%;
            inline-size: 60%; block-size: 100%;
            animation: shimmer 3s ease-in-out infinite;
            pointer-events: none;
        }

        .help-text {
            font-size: var(--fs-small);
            opacity: 0.5;
        }
    }
}

/* ==============================
   THEME LAYER
   ============================== */
@layer theme {

    .hero {
        .gradient-orb--1 { background: light-dark(oklch(55% 0.25 270 / 0.08), oklch(55% 0.25 270 / 0.2)); }
        .gradient-orb--2 { background: light-dark(oklch(65% 0.22 25 / 0.04), oklch(65% 0.22 25 / 0.08)); }
        .noise-overlay { background: light-dark(oklch(100% 0 0 / 0.03), oklch(100% 0 0 / 0.015)); }

        .hero-badge {
            background: light-dark(oklch(55% 0.18 145 / 0.1), oklch(70% 0.22 145 / 0.12));
            border: 1px solid light-dark(oklch(55% 0.18 145 / 0.25), oklch(70% 0.22 145 / 0.25));
            color: light-dark(oklch(40% 0.15 145), oklch(75% 0.2 145));
        }

        .badge-dot {
            background: light-dark(oklch(55% 0.22 145), oklch(70% 0.22 145));
        }

        h1 {
            color: var(--text-primary);
        }

        .hero-line--accent {
            background: linear-gradient(135deg, var(--accent-primary), var(--accent-warm));
            -webkit-background-clip: text;
            -webkit-text-fill-color: transparent;
            background-clip: text;
        }

        .tagline {
            color: var(--text-secondary);
        }

        .btn-shimmer {
            background: linear-gradient(90deg, transparent, oklch(100% 0 0 / 0.08), transparent);
        }

        .help-text {
            color: var(--text-secondary);
        }
    }
}