/* Hero (STEP 03) */

.hero {
    padding-block: var(--space-xl);
}

.hero__layout {
    display: grid;
    grid-template-columns: minmax(0, 0.85fr) minmax(0, 1.2fr);
    align-items: center;
    gap: var(--space-md);
}

.hero__inner {
    min-width: 0;
    max-width: 40rem;
}

.hero__eyebrow {
    margin: 0 0 var(--space-sm);
    font-size: 0.75rem;
    font-weight: 500;
    letter-spacing: 0.12em;
    text-transform: uppercase;
    color: var(--color-accent);
}

.hero__title {
    margin: 0 0 var(--space-sm);
    font-size: clamp(1.35rem, 5.5vw, 3.25rem);
    font-weight: 700;
    letter-spacing: -0.02em;
    color: var(--color-text);
}

.hero__typewriter {
    margin: 0 0 var(--space-md);
    font-size: clamp(0.62rem, 2.55vw, 1.35rem);
    font-weight: 500;
    letter-spacing: -0.01em;
    color: var(--color-accent);
    min-height: 1.5em;
    max-width: 100%;
    white-space: nowrap;
}

.hero__typewriter-copy {
    display: inline-flex;
    align-items: center;
    max-width: 100%;
}

.hero__typewriter-copy::before {
    content: "";
    display: inline-block;
    min-height: 1.2em;
    white-space: pre;
    border-right: 2px solid var(--color-text);
    padding-right: 2px;
    animation:
        typewriter-phrases 12s steps(1, end) infinite,
        typewriter-caret 1s infinite;
}

@keyframes typewriter-caret {
    0%,
    45% {
        border-right-color: var(--color-text);
    }

    50%,
    95% {
        border-right-color: transparent;
    }

    100% {
        border-right-color: var(--color-text);
    }
}

@keyframes typewriter-phrases {
    0% { content: ""; }
    0.8% { content: "F"; }
    1.6% { content: "Fu"; }
    2.4% { content: "Ful"; }
    3.2% { content: "Full"; }
    4% { content: "Full "; }
    4.8% { content: "Full S"; }
    5.6% { content: "Full St"; }
    6.4% { content: "Full Sta"; }
    7.2% { content: "Full Stac"; }
    8% { content: "Full Stack"; }
    8.8% { content: "Full Stack "; }
    9.6% { content: "Full Stack D"; }
    10.4% { content: "Full Stack De"; }
    11.2% { content: "Full Stack Dev"; }
    12% { content: "Full Stack Deve"; }
    12.8% { content: "Full Stack Devel"; }
    13.6% { content: "Full Stack Develo"; }
    14.4% { content: "Full Stack Develop"; }
    15.2% { content: "Full Stack Develope"; }
    16% { content: "Full Stack Developer"; }
    30% { content: "Full Stack Developer"; }
    30.6% { content: "Full Stack Develope"; }
    31.2% { content: "Full Stack Develop"; }
    31.8% { content: "Full Stack Develo"; }
    32.4% { content: "Full Stack Devel"; }
    33% { content: "Full Stack Deve"; }
    33.6% { content: "Full Stack Dev"; }
    34.2% { content: "Full Stack De"; }
    34.8% { content: "Full Stack D"; }
    35.4% { content: "Full Stack "; }
    36% { content: "Full Stack"; }
    36.6% { content: "Full Stac"; }
    37.2% { content: "Full Sta"; }
    37.8% { content: "Full St"; }
    38.4% { content: "Full S"; }
    39% { content: "Full "; }
    39.6% { content: "Full"; }
    40.2% { content: "Ful"; }
    40.8% { content: "Fu"; }
    41.4% { content: "F"; }
    42% { content: ""; }
    50% { content: ""; }
    50.8% { content: "P"; }
    51.6% { content: "Pr"; }
    52.4% { content: "Pro"; }
    53.2% { content: "Prog"; }
    54% { content: "Progr"; }
    54.8% { content: "Progra"; }
    55.6% { content: "Program"; }
    56.4% { content: "Programi"; }
    57.2% { content: "Programis"; }
    58% { content: "Programist"; }
    58.8% { content: "Programista"; }
    59.6% { content: "Programista "; }
    60.4% { content: "Programista F"; }
    61.2% { content: "Programista Fu"; }
    62% { content: "Programista Ful"; }
    62.8% { content: "Programista Full"; }
    63.6% { content: "Programista Full "; }
    64.4% { content: "Programista Full S"; }
    65.2% { content: "Programista Full St"; }
    66% { content: "Programista Full Sta"; }
    66.8% { content: "Programista Full Stac"; }
    67.6% { content: "Programista Full Stack"; }
    79.6% { content: "Programista Full Stack"; }
    80.2% { content: "Programista Full Stac"; }
    80.8% { content: "Programista Full Sta"; }
    81.4% { content: "Programista Full St"; }
    82% { content: "Programista Full S"; }
    82.6% { content: "Programista Full "; }
    83.2% { content: "Programista Full"; }
    83.8% { content: "Programista Ful"; }
    84.4% { content: "Programista Fu"; }
    85% { content: "Programista F"; }
    85.6% { content: "Programista "; }
    86.2% { content: "Programista"; }
    86.8% { content: "Programist"; }
    87.4% { content: "Programis"; }
    88% { content: "Programi"; }
    88.6% { content: "Program"; }
    89.2% { content: "Progra"; }
    89.8% { content: "Progr"; }
    90.4% { content: "Prog"; }
    91% { content: "Pro"; }
    91.6% { content: "Pr"; }
    92.2% { content: "P"; }
    92.8% { content: ""; }
    100% { content: ""; }
}

@media (prefers-reduced-motion: reduce) {
    .hero__typewriter-copy::before {
        content: "Full Stack Developer";
        animation: none;
        border-right-color: var(--color-text);
    }
}

.hero__positioning {
    margin: 0 0 var(--space-md);
    font-size: 0.9375rem;
    color: var(--color-muted);
    max-width: 36rem;
}

.hero__actions {
    display: flex;
    flex-direction: column;
    align-items: stretch;
    gap: var(--space-sm);
    margin-bottom: 0;
}

.hero__photo {
    margin: 0;
    min-width: 0;
}

.hero__photo img {
    width: 100%;
    height: auto;
    display: block;
    object-fit: cover;
    object-position: top;
    -webkit-mask-image: linear-gradient(to bottom, #000 40%, transparent 100%);
    mask-image: linear-gradient(to bottom, #000 40%, transparent 100%);
}

.hero__social {
    list-style: none;
    margin: 0 0 var(--space-lg);
    padding: 0;
    display: flex;
    flex-wrap: wrap;
    gap: var(--space-md);
}

.hero__social a {
    color: var(--color-muted);
    text-decoration: none;
    font-size: 0.9375rem;
}

.hero__social a:hover {
    color: var(--color-accent);
}

.hero__meta {
    margin: 0;
    font-size: 0.8125rem;
    color: var(--color-muted);
}

@media (min-width: 48rem) {
    .hero {
        padding-block: calc(var(--space-2xl) + var(--space-xl));
    }

    .hero__layout {
        grid-template-columns: minmax(0, 1fr) 15rem;
        gap: var(--space-xl);
    }

    .hero__eyebrow {
        margin-bottom: var(--space-md);
        font-size: 0.8125rem;
    }

    .hero__title {
        margin-bottom: var(--space-sm);
    }

    .hero__typewriter {
        margin-bottom: var(--space-lg);
        font-size: clamp(1.05rem, 2vw, 1.35rem);
    }

    .hero__positioning {
        margin-bottom: var(--space-xl);
        font-size: 1.125rem;
    }

    .hero__actions {
        flex-direction: row;
        flex-wrap: wrap;
        gap: var(--space-md);
        margin-bottom: var(--space-xl);
    }

    .hero__meta {
        font-size: 0.875rem;
    }
}

@media (min-width: 64rem) {
    .hero__layout {
        grid-template-columns: minmax(0, 1fr) 16.5rem;
        gap: var(--space-2xl);
    }
}