#hero {
  min-height: 100vh; display: grid; grid-template-rows: 1fr auto;
  padding: 0 60px 60px; border-bottom: 1px solid var(--line); position: relative;
}
.hero-main{
    display:flex;
    flex-direction:column;
    justify-content:flex-end;
    padding-bottom:90px;
}

.hero-name-block { overflow: hidden; line-height: 0.92; }

.hero-name {
  font-family: 'Bebas Neue', sans-serif;
  font-size: clamp(45px, 11.5vw, 240px);
  font-weight: 400;
  letter-spacing: 0.04em;
  display: block;
  margin: 0;
  transform: translateY(110%);
  transition: transform 1s cubic-bezier(0.16,1,0.3,1) 0.05s;
}
.hero-name.vis { transform: translateY(0); }

.hero-sub {
  display: flex; justify-content: space-between; align-items: flex-end;
  margin-top: 32px; padding-top: 28px; border-top: 1px solid var(--line); gap: 24px;
}

.hero-role {
  font-family: 'Space Grotesk', sans-serif; font-weight: 300;
  font-size: clamp(18px, 2.3vw, 30px); color: var(--muted); overflow: hidden; line-height: 1.2; letter-spacing: -0.03em;
}

.hero-marquee{
    width:480px;
    max-width:100%;
    overflow:hidden;
    margin-top:18px;
    margin-bottom:24px;

    mask-image:linear-gradient(
        to right,
        transparent,
        black 12%,
        black 88%,
        transparent
    );

    -webkit-mask-image:linear-gradient(
        to right,
        transparent,
        black 12%,
        black 88%,
        transparent
    );

    opacity:0;
    transform:translateY(10px);

    animation:
        heroFade .8s ease forwards .25s;
} 

@keyframes heroFade{
    to{
        opacity:.18;
        transform:translateY(0);
    }
}

.hero-marquee-track{
    display:inline-flex;
    align-items:center;
    white-space:nowrap;
    width:max-content;

    font-family:'Space Mono', monospace;
    font-size: 12px;
    letter-spacing: .18em;
    font-weight: 500;
    text-transform:uppercase;
    color:var(--text);

    animation:heroMarquee 34s linear infinite;
}
.hero-marquee:hover .hero-marquee-track { animation-play-state: paused; }

.hero-role span { display: block; transform: translateY(110%); transition: transform 0.9s cubic-bezier(0.16,1,0.3,1) 0.3s; }
.hero-role span.vis { transform: translateY(0); }

.hero-right-meta { text-align: right; opacity: 0; transform: translateY(14px); transition: opacity 0.8s ease 0.6s, transform 0.8s ease 0.6s; }
.hero-right-meta.vis { opacity: 1; transform: translateY(0); }
.hero-status { font-family: 'Space Mono', monospace; font-size: 10px; letter-spacing: 0.16em; text-transform: uppercase; color: var(--muted); }
.hero-version { font-family: 'Space Grotesk', sans-serif; font-size: 15px; color: var(--text2); margin-top: 4px; }

.hero-scroll-cue { display: flex; align-items: center; gap: 16px; opacity: 0; transition: opacity 0.8s ease 1s; padding-top: 32px; align-self: start; }
.hero-scroll-cue.vis { opacity: 1; }
.scroll-line { width: 40px; height: 1px; background: var(--dim); position: relative; overflow: hidden; }
.scroll-line::after { content: ''; position: absolute; top: 0; left: -100%; width: 100%; height: 100%; background: var(--accent); animation: scanLine 2.2s ease infinite; }
@keyframes scanLine { to { left: 200%; } }
.scroll-label { font-family: 'Space Mono', monospace; font-size: 9px; letter-spacing: 0.2em; text-transform: uppercase; color: var(--muted); }


@keyframes heroMarquee{
    from{
        transform:translateX(0);
    }
    to{
        transform:translateX(-50%);
    }
}