/**
 * Hero Component Styles
 *
 * Full-width hero section for the frontpage with tagline and CTA.
 */

@layer components {
    /* ========================================
       Hero Section
       ======================================== */
    .hero {
        position: relative;
        padding: var(--space-7) var(--space-5);
        text-align: center;
        background: linear-gradient(
            135deg,
            rgba(60, 159, 126, 0.15) 0%,
            rgba(78, 145, 201, 0.15) 50%,
            rgba(151, 33, 86, 0.15) 100%
        );
        overflow: hidden;
    }

    /* Subtle animated background pattern */
    .hero::before {
        content: "";
        position: absolute;
        inset: 0;
        background-image:
            radial-gradient(circle at 20% 50%, rgba(60, 159, 126, 0.1) 0%, transparent 50%),
            radial-gradient(circle at 80% 50%, rgba(151, 33, 86, 0.1) 0%, transparent 50%);
        animation: hero-pulse 8s ease-in-out infinite alternate;
    }

    @keyframes hero-pulse {
        0% { opacity: 0.5; }
        100% { opacity: 1; }
    }

    .hero__content {
        position: relative;
        z-index: 1;
        max-width: var(--content-max-width);
        margin-inline: auto;
    }

    /* ========================================
       Hero Typography
       ======================================== */
    .hero__tagline {
        font-family: var(--font-heading);
        font-size: clamp(2rem, 5vw + 1rem, 3.5rem);
        font-weight: var(--font-weight-bold);
        color: var(--color-text-bright);
        text-transform: uppercase;
        letter-spacing: 2px;
        line-height: var(--line-height-tight);
        margin: 0 0 var(--space-4);
    }

    .hero__tagline span {
        display: block;
        background: var(--gradient-animate);
        background-size: 200% 100%;
        -webkit-background-clip: text;
        background-clip: text;
        -webkit-text-fill-color: transparent;
        animation: gradient-shift 20s linear infinite;
    }

    .hero__subtitle {
        font-size: var(--text-lg);
        color: var(--color-text);
        max-width: 600px;
        margin-inline: auto;
        margin-block-end: var(--space-6);
        line-height: var(--line-height-normal);
    }

    /* ========================================
       Hero CTA
       ======================================== */
    .hero__cta {
        display: inline-flex;
        align-items: center;
        gap: var(--space-2);
        padding: var(--space-3) var(--space-5);
        font-family: var(--font-heading);
        font-size: var(--text-base);
        font-weight: var(--font-weight-bold);
        text-transform: uppercase;
        letter-spacing: 1px;
        color: var(--color-text-bright);
        background: linear-gradient(
            135deg,
            var(--color-secondary) 0%,
            var(--color-primary) 100%
        );
        border-radius: var(--radius-md);
        transition: transform var(--transition-fast), box-shadow var(--transition-fast);
    }

    .hero__cta:hover {
        transform: translateY(-2px);
        box-shadow: 0 8px 25px rgba(60, 159, 126, 0.3);
        text-decoration: none;
    }

    .hero__cta:focus-visible {
        outline: 2px solid var(--color-text-bright);
        outline-offset: 2px;
    }

    /* Arrow icon */
    .hero__cta::after {
        content: "→";
        transition: transform var(--transition-fast);
    }

    .hero__cta:hover::after {
        transform: translateX(4px);
    }

    /* ========================================
       Responsive Adjustments
       ======================================== */
    @media (max-width: 600px) {
        .hero {
            padding: var(--space-6) var(--space-4);
        }

        .hero__subtitle {
            font-size: var(--text-base);
        }
    }

    /* Reduced motion */
    @media (prefers-reduced-motion: reduce) {
        .hero::before {
            animation: none;
        }
    }
}