Welcome

/* ─── VLH Hero ─────────────────────────────────────────────── */
.vlh-hero {
position: relative;
width: 100%;
height: 100vh; /* full viewport height */
min-height: 560px;
overflow: hidden;
}

/* Slide */
.vlh-hero__slide {
position: absolute;
inset: 0;
opacity: 0;
transition: opacity 1.2s ease;
pointer-events: none;
}
.vlh-hero__slide.is-active {
opacity: 1;
pointer-events: auto;
}

/* Parallax background */
.vlh-hero__bg {
position: absolute;
inset: -80px; /* extra room for the scale zoom */
background-size: cover;
background-position: center;
transform: scale(1);
transition: transform 8s ease-out;
will-change: transform;
}
.vlh-hero__slide.is-active .vlh-hero__bg {
transform: scale(1.1);
}

/* Dark overlay */
.vlh-hero__overlay {
position: absolute;
inset: 0;
background: linear-gradient(150deg, rgba(0,0,0,.65) 0%, rgba(0,0,0,.25) 100%);
}

/* Content */
.vlh-hero__content {
position: absolute;
inset: 0;
display: flex;
flex-direction: column;
justify-content: center;
padding: 0 8vw;
max-width: 860px;
}

/* Tag */
.vlh-hero__tag {
font-family: ‘Courier New’, Courier, monospace;
font-size: 11px;
letter-spacing: .2em;
text-transform: uppercase;
color: rgba(255,255,255,.55);
margin: 0 0 16px;
opacity: 0;
transform: translateY(14px);
transition: opacity .7s .3s ease, transform .7s .3s ease;
}
.vlh-hero__slide.is-active .vlh-hero__tag {
opacity: 1;
transform: translateY(0);
}

/* Heading */
.vlh-hero__heading {
font-family: Georgia, ‘Times New Roman’, serif;
font-size: clamp(32px, 5vw, 58px);
font-weight: 700;
color: #fff;
line-height: 1.1;
margin: 0 0 18px;
opacity: 0;
transform: translateY(20px);
transition: opacity .7s .5s ease, transform .7s .5s ease;
}
.vlh-hero__slide.is-active .vlh-hero__heading {
opacity: 1;
transform: translateY(0);
}

/* Subtitle */
.vlh-hero__sub {
font-family: ‘Courier New’, Courier, monospace;
font-size: 14px;
color: rgba(255,255,255,.75);
line-height: 1.65;
max-width: 440px;
margin: 0 0 32px;
opacity: 0;
transform: translateY(12px);
transition: opacity .7s .7s ease, transform .7s .7s ease;
}
.vlh-hero__slide.is-active .vlh-hero__sub {
opacity: 1;
transform: translateY(0);
}

/* CTA button */
.vlh-hero__cta {
display: inline-block;
font-family: ‘Courier New’, Courier, monospace;
font-size: 11px;
letter-spacing: .18em;
text-transform: uppercase;
color: #fff;
border: 1px solid rgba(255,255,255,.65);
padding: 12px 30px;
text-decoration: none;
background: transparent;
transition: background .25s, border-color .25s, opacity .7s .9s ease, transform .7s .9s ease;
opacity: 0;
transform: translateY(10px);
width: fit-content;
}
.vlh-hero__slide.is-active .vlh-hero__cta {
opacity: 1;
transform: translateY(0);
}
.vlh-hero__cta:hover {
background: rgba(255,255,255,.12);
border-color: #fff;
color: #fff;
text-decoration: none;
}

/* Slide counter */
.vlh-hero__label {
position: absolute;
top: 28px;
right: 36px;
font-family: ‘Courier New’, Courier, monospace;
font-size: 10px;
letter-spacing: .18em;
color: rgba(255,255,255,.38);
text-transform: uppercase;
z-index: 10;
}

/* Dot navigation */
.vlh-hero__dots {
position: absolute;
bottom: 32px;
left: 50%;
transform: translateX(-50%);
display: flex;
gap: 10px;
z-index: 10;
}
.vlh-hero__dot {
width: 8px;
height: 8px;
border-radius: 50%;
border: 1.5px solid rgba(255,255,255,.45);
background: transparent;
cursor: pointer;
padding: 0;
transition: background .3s, border-color .3s;
}
.vlh-hero__dot.is-active {
background: #fff;
border-color: #fff;
}

/* Progress bar */
.vlh-hero__progress {
position: absolute;
bottom: 0;
left: 0;
height: 3px;
background: rgba(255,255,255,.85);
width: 0%;
z-index: 10;
}

/* Mobile */
@media (max-width: 640px) {
.vlh-hero__content { padding: 0 6vw; }
.vlh-hero__label { top: 20px; right: 20px; }
}