/* ============================================
   HERO SECTION
   ============================================ */
.hero {
    position: relative;
    min-height: clamp(500px, 80vh, 800px);
    display: grid;
    place-items: center;
    padding: var(--space-16) var(--container-padding) var(--space-12);
}

.hero.hero--split {
    grid-template-columns: 1fr;
    gap: var(--space-8);
    text-align: center;
    max-width: var(--container-max);
    margin-inline: auto;
    padding-top: clamp(var(--space-8), 12vh, var(--space-16));
}

/* ============================================
   HERO PHOTO
   ============================================ */
.hero__photo {
    position: relative;
    width: clamp(180px, 40vw, 300px);
    aspect-ratio: 1;
    margin-inline: auto;
}

.hero__photo img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    border-radius: var(--radius-full);
    position: relative;
    z-index: 2;
}

/* Animated border ring */
.hero__photo::before {
    content: '';
    position: absolute;
    inset: clamp(-8px, -1.5vw, -12px);
    border-radius: var(--radius-full);
    border: clamp(6px, 1vw, 10px) solid transparent;
    border-top-color: var(--color-accent);
    border-right-color: var(--color-brand-primary);
    border-bottom-color: var(--color-brand-tertiary);
    border-left-color: var(--color-text-muted);
    animation: hero-spin 6s linear infinite;
    z-index: 1;
}

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

/* Subtle glow effect */
.hero__photo::after {
    content: '';
    position: absolute;
    inset: -20px;
    background: radial-gradient(
            circle,
            rgba(253, 56, 102, 0.15) 0%,
            transparent 70%
    );
    z-index: 0;
    pointer-events: none;
}

/* ============================================
   HERO CONTENT
   ============================================ */
.hero__content {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: var(--space-3);
}

.hero__content h1 {
    font-size: var(--font-size-4xl);
    font-weight: var(--font-weight-extrabold);
    line-height: var(--line-height-tight);
    color: var(--color-text-primary);
    margin: 0;
}

.hero__content h1 .first-name,
.hero__content h1 .last-name {
    display: block;
}

.eyebrow {
    font-size: var(--font-size-sm);
    font-weight: var(--font-weight-semibold);
    color: var(--color-text-secondary);
    letter-spacing: 0.05em;
    margin: 0;
}

.subtitle {
    font-size: var(--font-size-base);
    font-weight: var(--font-weight-medium);
    font-style: italic;
    color: var(--color-accent);
    margin: var(--space-2) 0 var(--space-4);
}

/* ============================================
   GREETING (Dynamic)
   ============================================ */
.hero-greeting {
    font-size: var(--font-size-lg);
    font-weight: var(--font-weight-semibold);
    color: var(--color-text-secondary);
    margin: var(--space-2) 0;
}

#usernameForm {
    display: flex;
    gap: var(--space-2);
    justify-content: center;
    margin: var(--space-2) 0;
}

#usernameInput {
    padding: var(--space-2) var(--space-3);
    border: 2px solid var(--border-color);
    border-radius: var(--radius-md);
    background: var(--color-surface);
    color: var(--color-text-primary);
    font-size: var(--font-size-sm);
    min-width: 150px;
    transition: border-color var(--transition-fast);
}

#usernameInput:focus {
    border-color: var(--color-accent);
    outline: none;
}

#usernameForm button {
    padding: var(--space-2) var(--space-4);
    background: var(--color-brand-primary);
    color: var(--color-text-primary);
    border-radius: var(--radius-md);
    font-weight: var(--font-weight-semibold);
    font-size: var(--font-size-sm);
    transition: background var(--transition-fast), transform var(--transition-fast);
}

#usernameForm button:hover {
    background: var(--color-accent);
    transform: translateY(-1px);
}

#changeNameBtn {
    color: var(--color-accent);
    font-size: var(--font-size-sm);
    font-weight: var(--font-weight-medium);
    padding: var(--space-1) var(--space-2);
    transition: color var(--transition-fast);
}

#changeNameBtn:hover {
    color: var(--color-accent-hover);
}

/* ============================================
   HERO ICONS (Social Links)
   ============================================ */
.hero__icons {
    display: flex;
    gap: var(--space-3);
    justify-content: center;
    margin-top: var(--space-2);
}

.icon {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: clamp(48px, 10vw, 56px);
    height: clamp(48px, 10vw, 56px);
    border-radius: var(--radius-full);
    background: rgba(255, 255, 255, 0.05);
    border: 2px solid transparent;
    transition:
            transform var(--transition-fast),
            background var(--transition-fast),
            border-color var(--transition-fast);
}

.icon:hover {
    transform: translateY(-3px);
    background: rgba(253, 56, 102, 0.15);
    border-color: var(--color-brand-primary);
}

.icon::before {
    content: '';
    display: block;
    width: 55%;
    height: 55%;
    background-size: contain;
    background-repeat: no-repeat;
    background-position: center;
}

/* Email icon */
.hero__icons a[aria-label="Send email"]::before,
.hero__icons a[aria-label="Email"]::before {
    background-image: url('../assets/images/contactIcons/1.png');
}

/* GitHub icon */
.hero__icons a[aria-label="GitHub profile (opens in new tab)"]::before,
.hero__icons a[aria-label="GitHub"]::before {
    background-image: url('../assets/images/contactIcons/2.png');
}

/* LinkedIn icon */
.hero__icons a[aria-label="LinkedIn profile (opens in new tab)"]::before,
.hero__icons a[aria-label="LinkedIn"]::before {
    background-image: url('../assets/images/contactIcons/3.png');
}

/* Light theme icon adjustments */
.theme-light .icon {
    background: rgba(0, 0, 0, 0.03);
}

.theme-light .icon:hover {
    background: rgba(253, 56, 102, 0.1);
}

/* ============================================
   DESKTOP LAYOUT
   ============================================ */
@media (min-width: 768px) {
    .hero.hero--split {
        grid-template-columns: 1fr 1.2fr;
        text-align: left;
        gap: clamp(var(--space-8), 5vw, var(--space-12));
        align-items: center;
    }

    .hero__photo {
        justify-self: end;
        margin-inline: 0;
    }

    .hero__content {
        align-items: flex-start;
        justify-self: start;
    }

    .hero__icons {
        justify-content: flex-start;
    }

    #usernameForm {
        justify-content: flex-start;
    }
}

/* ============================================
   MOBILE ADJUSTMENTS
   ============================================ */
@media (max-width: 767px) {
    .hero {
        min-height: auto;
        padding: var(--space-8) var(--container-padding) var(--space-12);
    }

    .hero__photo {
        width: clamp(160px, 50vw, 220px);
    }
}