:root {
    color-scheme: dark;
    --bg: #0b0c0e;
    --surface: #111317;
    --text: #f1f1ef;
    --muted: #a6a8ac;
    --silver: #d7dade;
    --gold: #c9a35c;
    --page-pad: clamp(22px, 5vw, 82px);
    background: var(--bg);
    font-family: Inter, Arial, sans-serif;
}

* { box-sizing: border-box; }
html { scroll-behavior: smooth; }
html, body { width: 100%; min-height: 100%; margin: 0; background: #000; }
html, body { overflow-x: hidden; overflow-y: hidden; }
body { color: var(--text); }
html.intro-complete,
body.intro-complete { overflow-y: auto; }
body.intro-complete { background: var(--bg); }
html.intro-skip,
html.intro-skip body { overflow-y: auto; }
html.intro-skip .intro-overlay { display: none; }
html.intro-skip .header-logo-target {
    background: url('../images/logo/text-only.png') center / contain no-repeat,
                url('../images/logo/S-only-clean.png') center / contain no-repeat,
                url('../images/logo/V-only.png') center / contain no-repeat;
}
html.intro-skip.header-logo-ready .header-logo-target { background: none; }
html.intro-skip #header-logo-canvas { visibility: visible; }
html.intro-skip .header-trace { opacity: .42; transform: scaleX(1); }
html.intro-skip .site-nav a,
html.intro-skip .header-cta,
html.intro-skip .reveal-mask > span,
html.intro-skip .hero-actions-mask > div { opacity: 1; transform: none; }
html.intro-skip .hero-visual { opacity: 1; filter: brightness(.88) saturate(.88); transform: none; }
a { color: inherit; text-decoration: none; }

.page-shell { position: relative; min-height: 100vh; overflow-x: hidden; background: var(--bg); }
.site-header {
    position: absolute; z-index: 5; top: 0; left: 0; width: 100%; height: clamp(94px, 10vw, 126px);
    display: flex; align-items: center; gap: clamp(18px, 2.4vw, 38px);
    padding: max(12px, env(safe-area-inset-top)) var(--page-pad) 10px;
}
.header-logo-target { width: clamp(78px, 7.7vw, 106px); aspect-ratio: 1; flex: none; z-index: 2; }
#header-logo-canvas { display: block; width: 100%; height: 100%; visibility: hidden; }
.header-trace { position: absolute; left: calc(var(--page-pad) + clamp(78px, 7.7vw, 106px) - 8px); right: var(--page-pad); top: 50%; height: 1px; transform: scaleX(0); transform-origin: left; opacity: 0; }
.header-trace::before { content: ''; position: absolute; inset: 0; background: linear-gradient(90deg, rgba(215,218,222,.58), rgba(201,163,92,.5), rgba(215,218,222,.18)); }
.header-trace span { position: absolute; right: -2px; top: -3px; width: 7px; height: 7px; border-radius: 50%; background: #eee8da; box-shadow: 0 0 10px rgba(215,218,222,.45); }
.site-nav { margin-left: auto; display: flex; align-items: center; gap: clamp(20px, 2.3vw, 40px); }
.site-nav a, .header-cta { position: relative; opacity: 0; transform: translateY(7px); font-size: 12px; font-weight: 500; letter-spacing: .075em; white-space: nowrap; }
.site-nav a::after { content: ''; position: absolute; left: 0; right: 100%; bottom: -8px; height: 1px; background: linear-gradient(90deg, var(--silver), var(--gold)); transition: right .25s ease; }
.site-nav a:hover::after, .site-nav a:focus-visible::after { right: 0; }
.header-cta { padding: 13px 18px; border: 1px solid rgba(215,218,222,.28); }

.hero { position: relative; min-height: 100svh; display: flex; align-items: center; isolation: isolate; background: var(--bg); }
.hero-visual, .hero-shade { position: absolute; inset: 0; }
.hero-visual { z-index: -2; background: url('../images/hero/vesyon-performance-coupe.png') center center / cover no-repeat; opacity: .18; filter: brightness(.42) saturate(.72); transform: scale(1.025); }
.hero-shade { z-index: -1; background: linear-gradient(90deg, #0b0c0e 0%, rgba(11,12,14,.97) 27%, rgba(11,12,14,.65) 48%, rgba(11,12,14,.04) 74%), linear-gradient(0deg, rgba(11,12,14,.42), transparent 42%); }
.hero-content { width: min(680px, 48vw); margin-left: var(--page-pad); padding-top: clamp(92px, 10vw, 126px); }
.reveal-mask { display: block; overflow: hidden; }
.reveal-mask > span, .hero-actions-mask > div { display: block; opacity: 0; transform: translateY(-108%); }
.hero-eyebrow { margin-bottom: 24px; color: var(--muted); font-size: clamp(10px, .82vw, 12px); font-weight: 600; letter-spacing: .25em; text-transform: uppercase; }
h1 { margin: 0; font-family: Manrope, Arial, sans-serif; font-size: clamp(48px, 5.9vw, 94px); font-weight: 600; line-height: .94; letter-spacing: -.052em; text-transform: uppercase; }
h1 .reveal-mask + .reveal-mask { color: transparent; -webkit-text-stroke: 1px rgba(241,241,239,.78); }
.hero-copy { margin: clamp(24px, 3vw, 42px) 0 0; color: var(--muted); font-size: clamp(14px, 1.15vw, 17px); line-height: 1.65; }
.hero-actions-mask { margin-top: clamp(28px, 3.2vw, 46px); }
.hero-actions { display: flex; gap: 14px; align-items: center; }
.button { display: inline-flex; min-height: 50px; align-items: center; justify-content: center; padding: 0 22px; font-size: 12px; font-weight: 600; letter-spacing: .055em; transition: border-color .25s ease, background .25s ease, color .25s ease; }
.button-primary { color: var(--text); border: 1px solid rgba(215,218,222,.46); background: rgba(215,218,222,.08); }
.button-secondary { color: var(--muted); border: 1px solid transparent; }
.button:hover, .button:focus-visible { border-color: var(--gold); color: var(--text); }

.interface-building .header-trace { animation: trace-grow 620ms cubic-bezier(.22,1,.36,1) forwards; }
.interface-building .site-nav a { animation: nav-in 240ms ease-out calc(110ms + var(--nav-index) * 90ms) forwards; }
.interface-building .header-cta { animation: nav-in 260ms ease-out 500ms forwards; }
.interface-building .hero-visual { animation: vehicle-reveal 1050ms cubic-bezier(.2,.7,.2,1) 430ms forwards; }
.interface-building .hero-eyebrow > span { animation: line-in 230ms ease-out 650ms forwards; }
.interface-building h1 .reveal-mask:nth-child(1) > span { animation: line-in 250ms ease-out 760ms forwards; }
.interface-building h1 .reveal-mask:nth-child(2) > span { animation: line-in 250ms ease-out 870ms forwards; }
.interface-building .hero-copy .reveal-mask:nth-child(1) > span { animation: line-in 230ms ease-out 980ms forwards; }
.interface-building .hero-copy .reveal-mask:nth-child(2) > span { animation: line-in 230ms ease-out 1090ms forwards; }
.interface-building .hero-actions-mask > div { animation: line-in 250ms ease-out 1200ms forwards; }
@keyframes trace-grow { 0% { opacity: 0; transform: scaleX(0); } 8% { opacity: 1; } 100% { opacity: .42; transform: scaleX(1); } }
@keyframes nav-in { to { opacity: 1; transform: translateY(0); } }
@keyframes vehicle-reveal { to { opacity: 1; filter: brightness(.88) saturate(.88); transform: scale(1); } }
@keyframes line-in { to { opacity: 1; transform: translateY(0); } }

.intro-overlay { position: fixed; inset: 0; display: grid; place-items: center; background: #000; z-index: 10; }
.intro-overlay[hidden] { display: none; }
.intro-composition { position: relative; width: min(92vw, 92vh, 1024px); aspect-ratio: 1; transform-origin: center; will-change: transform; }
#master-logo-canvas, #symbol-light-canvas, #text-reveal-canvas, #gold-reveal-canvas, #silver-reveal-canvas { position: absolute; inset: 0; display: block; width: 100%; height: 100%; }
#master-logo-canvas { z-index: 3; opacity: 0; }
#symbol-light-canvas { z-index: 4; pointer-events: none; }
#text-reveal-canvas { z-index: 2; }
#gold-reveal-canvas { z-index: 1; }
#silver-reveal-canvas { z-index: 2; }

@media (max-width: 820px) {
    .site-header { height: 90px; }
    .header-logo-target { width: 74px; }
    .header-trace { left: calc(var(--page-pad) + 66px); }
    .site-nav { display: none; }
    .header-cta { margin-left: auto; padding: 11px 13px; font-size: 10px; }
    .hero { align-items: flex-end; min-height: 100svh; }
    .hero-visual { background-position: 64% center; }
    .hero-shade { background: linear-gradient(0deg, #0b0c0e 5%, rgba(11,12,14,.88) 44%, rgba(11,12,14,.08) 78%), linear-gradient(90deg, rgba(11,12,14,.6), transparent); }
    .hero-content { width: auto; margin: 0 var(--page-pad); padding: 110px 0 9vh; }
    .hero-eyebrow { margin-bottom: 17px; letter-spacing: .18em; }
    h1 { font-size: clamp(42px, 12vw, 70px); }
    .hero-copy { font-size: 14px; }
}
@media (max-width: 460px) {
    .header-cta { display: none; }
    .hero-actions { align-items: stretch; flex-direction: column; }
    .button { width: 100%; }
}
@media (prefers-reduced-motion: reduce) {
    html { scroll-behavior: auto; }
    .header-trace, .site-nav a, .header-cta, .hero-visual, .reveal-mask > span, .hero-actions-mask > div { animation: none !important; transition: none !important; }
    .intro-complete .header-trace { opacity: .42; transform: scaleX(1); }
    .intro-complete .site-nav a, .intro-complete .header-cta, .intro-complete .reveal-mask > span, .intro-complete .hero-actions-mask > div { opacity: 1; transform: none; }
    .intro-complete .hero-visual { opacity: 1; filter: brightness(.88) saturate(.88); transform: none; }
}