.hero{
    position:relative;
    width:100%;height:100svh;min-height:600px;
    overflow:hidden;
    display:flex;flex-direction:column;
    align-items:center;justify-content:center;
}

.hero-video-wrap{position:absolute;inset:0;z-index:0}
.hero-video{width:100%;height:100%;object-fit:cover;object-position:center}
.hero-vignette{
    position:absolute;inset:0;
    background:radial-gradient(ellipse at center,
        rgba(5,5,5,0.2) 0%,
        rgba(5,5,5,0.5) 60%,
        rgba(5,5,5,0.85) 100%);
}

.hero-eyebrow{
    position:absolute;top:50%;left:var(--gut);
    transform:translateY(-50%);
    writing-mode:vertical-rl;
    font-family:var(--font-mono);
    font-size:var(--sz-xs);
    letter-spacing:0.2em;
    text-transform:uppercase;
    color:var(--white-40);
    z-index:2;
    animation:fadeIn 1s var(--ease) 1.8s both;
}

.hero-title-wrap{
    position:relative;z-index:2;
    text-align:center;
    animation:fadeUp 1.2s var(--ease) 1s both;
}
.hero-title{
    font-family:var(--font-serif);
    font-size:var(--sz-hero);
    font-weight:300;
    line-height:0.9;
    color:var(--white);
    letter-spacing:-0.01em;
    display:flex;flex-direction:column;align-items:center;
}
.ht-line{display:block;overflow:hidden}
.ht-italic{font-style:italic;color:var(--white-70)}

.hero-nav-links{
    position:absolute;bottom:var(--sp6);left:50%;
    transform:translateX(-50%);
    display:flex;align-items:center;gap:1.5rem;
    z-index:2;
    animation:fadeIn 1s var(--ease) 2s both;
    white-space:nowrap;
}
.hero-nav-links a{
    font-family:var(--font-mono);font-size:var(--sz-xs);
    letter-spacing:0.16em;text-transform:uppercase;
    color:var(--white-40);
    transition:color var(--t2);
}
.hero-nav-links a:hover{color:var(--white)}
.hero-nav-links span{color:var(--white-15);font-size:var(--sz-xs)}
.hero-nav-cta{
    color:var(--white)!important;
    border:var(--border);
    padding:0.5rem 1.2rem;
}

.hero-counter{
    position:absolute;bottom:var(--sp6);right:var(--gut);
    z-index:2;
    font-family:var(--font-mono);font-size:var(--sz-xs);
    color:var(--white-40);letter-spacing:0.1em;
    animation:fadeIn 1s var(--ease) 2s both;
}

.hero-scroll-indicator{
    position:absolute;bottom:0;left:50%;
    transform:translateX(-50%);
    z-index:2;
    display:flex;flex-direction:column;align-items:center;
    animation:fadeIn 1s var(--ease) 2.2s both;
}
.hero-scroll-line{
    width:1px;height:80px;
    background:linear-gradient(to bottom,transparent,var(--white-40));
    animation:scrollAnim 2.5s ease infinite;
}
@keyframes scrollAnim{
    0%{transform:scaleY(0);transform-origin:top;opacity:0}
    50%{transform:scaleY(1);transform-origin:top;opacity:1}
    51%{transform-origin:bottom}
    100%{transform:scaleY(0);transform-origin:bottom;opacity:0}
}

@keyframes fadeUp{
    from{opacity:0;transform:translateY(50px)}
    to{opacity:1;transform:none}
}
@keyframes fadeIn{
    from{opacity:0}to{opacity:1}
}