/* Home hero after mauriciojuba.com: Rubik over the 6px field, hero tokens for dark (the reference) and light (paper), the reference's intro timeline. */
.hero-field {
    position: relative;
    min-height: max(560px, calc(100svh - 64px));
    display: flex;
    overflow: hidden;
    background: var(--hero-bg);
    color: var(--hero-fg);
    border-bottom: 1px solid var(--border-color);
}

.hero-canvas {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    image-rendering: pixelated;
    pointer-events: none;
    opacity: 0;
    animation: heroFade 1.6s cubic-bezier(0.45, 0, 0.55, 1) 0.1s forwards;
}

.hero-copy {
    position: relative;
    z-index: 1;
    display: flex;
    flex-direction: column;
    justify-content: space-between;
    padding: 48px 0 32px;
    font-family: var(--font-hero);
    pointer-events: none;
}

.hero-top {
    display: flex;
    flex-direction: column;
    gap: 8px;
}

.hero-role {
    font-size: clamp(16px, 4.6vw, 24px);
    font-weight: 300;
    letter-spacing: 0.06em;
    text-transform: uppercase;
    line-height: 32px;
    color: var(--hero-accent);
}

.hero-hud {
    font-size: 12px;
    font-weight: 500;
    letter-spacing: 0.18em;
    text-transform: uppercase;
    font-variant-numeric: tabular-nums;
    line-height: 16px;
    opacity: 0.8;
}

.hero-bottom {
    display: flex;
    flex-direction: column;
    gap: 24px;
}

.hero-name {
    display: flex;
    flex-direction: column;
    text-transform: uppercase;
    pointer-events: auto;
}

.hero-name-line {
    --wght: 320;
    --wght-hover: 700;
    display: block;
    white-space: nowrap;
    font-size: clamp(2.3rem, 0.5rem + 10.3vw, 10.3rem);
    font-weight: 300;
    line-height: 0.86;
    letter-spacing: -0.01em;
    opacity: 0;
    transform: translateY(24px);
    animation: heroRise 0.7s cubic-bezier(0.22, 1, 0.36, 1) 0.2s forwards;
}

.hero-name-line--2 {
    --wght: 900;
    --wght-hover: 600;
    font-size: clamp(3.5rem, 0.8rem + 14.8vw, 14.8rem);
    font-weight: 900;
    line-height: 0.84;
    letter-spacing: -0.02em;
    color: var(--hero-accent);
    animation-delay: 0.32s;
}

.hero-name [data-ch] {
    display: inline-block;
    font-variation-settings: 'wght' var(--wght);
    transition: font-variation-settings 0.55s cubic-bezier(0.22, 1, 0.36, 1);
    will-change: font-variation-settings;
}

.hero-tags {
    list-style: none;
    display: flex;
    flex-wrap: wrap;
    gap: 8px 24px;
}

.hero-tags li {
    display: flex;
    align-items: center;
    gap: 8px;
    opacity: 0;
    transform: translateY(10px);
    animation: heroRise 0.4s cubic-bezier(0.22, 1, 0.36, 1) 0.7s forwards;
}

.hero-tags li:nth-child(2) {
    animation-delay: 0.78s;
}

.hero-tags li:nth-child(3) {
    animation-delay: 0.86s;
}

.hero-tags li::before {
    content: '';
    width: 6px;
    height: 6px;
    background: var(--hero-accent);
}

.hero-cue {
    position: absolute;
    right: 0;
    bottom: 32px;
    display: flex;
    align-items: center;
    gap: 8px;
    opacity: 0;
    animation: heroFade 0.4s cubic-bezier(0.22, 1, 0.36, 1) 1.1s forwards;
}

.hero-cue::before {
    content: '▼';
    font-size: 10px;
    color: var(--hero-accent);
    animation: heroBlink 1.1s step-end infinite;
}

@media (min-width: 768px) {
    .hero-hud {
        font-size: 10px;
    }
}

@keyframes heroFade {
    to { opacity: 1; }
}

@keyframes heroRise {
    to { opacity: 1; transform: none; }
}

@keyframes heroBlink {
    0%, 55% { opacity: 1; }
    56%, 100% { opacity: 0; }
}

@media (hover: hover) and (prefers-reduced-motion: no-preference) {
    .hero-name [data-ch]:hover {
        font-variation-settings: 'wght' var(--wght-hover);
        transition-duration: 0.3s;
    }
}

@media (prefers-reduced-motion: reduce) {
    .hero-canvas,
    .hero-name-line,
    .hero-tags li,
    .hero-cue {
        animation: none;
        opacity: 1;
        transform: none;
    }

    .hero-cue::before {
        animation: none;
    }

    .hero-name [data-ch] {
        transition: none;
    }
}

@media (max-width: 768px) {
    .hero-field {
        min-height: max(480px, calc(100svh - 56px));
    }

    .hero-copy {
        padding: 32px 0 24px;
    }

    .hero-cue {
        display: none;
    }
}