*{box-sizing:border-box;margin:0;padding:0}
/* palette: warm black, amber gold, bone white, ember red */
:root{--gold:#e0a43a;--gold2:#ffd27a;--ember:#ff5a2e;--bone:#f3ede2;--mute:#a8a294;--ink:rgba(10,9,8,.72);--line:rgba(224,164,58,.35)}
html{scroll-behavior:smooth}
body{background:#080706;color:var(--bone);font-family:"Inter","Segoe UI",sans-serif;font-size:1rem;line-height:1.6}
body.locked{overflow:hidden}
h1,h2,h3,.brand,.btn,.price,.day,.stats i,#msg,#rt,#go,.sec b,.marquee span,.title{font-family:"Anton","Impact",sans-serif;font-weight:400;letter-spacing:.03em;text-transform:uppercase}

/* background: photo + smoke + warm cursor light */
#bg{position:fixed;inset:0 0 -9% 0;z-index:-1;background-color:#0b0a08;
  background-image:linear-gradient(rgba(8,6,4,.52),rgba(8,6,4,.52)),url(bg.webp);background-size:cover;background-position:center}
#smoke{position:absolute;inset:0;width:100%;height:100%;opacity:.8}
.vignette{position:absolute;inset:0;background:radial-gradient(ellipse at 50% 55%,transparent 30%,rgba(0,0,0,.75))}
#beam{position:absolute;inset:0;pointer-events:none;background:radial-gradient(circle 280px at var(--x,50%) var(--y,50%),rgba(255,190,90,.13),transparent 70%)}

/* ---------- intro: garage door ---------- */
#intro{position:fixed;inset:0;z-index:100;overflow:hidden;touch-action:none;cursor:grab}
#intro.drag{cursor:grabbing}
#intro.launch{opacity:0;pointer-events:none;transition:opacity .5s}
.door{position:absolute;inset:0;transform:translateY(calc(var(--lift,0) * -100%));will-change:transform;
  background:
    linear-gradient(180deg,rgba(255,255,255,.07),transparent 3%),
    repeating-linear-gradient(180deg,#1a1814 0,#24211b 10%,#14120f 10.4%,#14120f 11%);
  box-shadow:0 30px 80px rgba(224,164,58,calc(var(--lift,0) * .55)),0 8px 0 var(--gold);
  display:flex;align-items:center;justify-content:center}
.door.snap{transition:transform .9s cubic-bezier(.6,0,.2,1)}
.plate{position:relative;text-align:center;padding:2.4rem clamp(1.6rem,6vw,4.5rem);background:rgba(8,7,6,.78);border:1px solid var(--line);outline:1px solid rgba(224,164,58,.15);outline-offset:8px}
.est{color:var(--gold);letter-spacing:.35em;text-transform:uppercase;font-size:.75rem;font-weight:600;margin-bottom:.8rem}
.title{font-size:clamp(3rem,13vw,9rem);line-height:.92;color:var(--bone);text-shadow:4px 4px 0 #000}
.title em{font-style:normal;color:transparent;-webkit-text-stroke:2px var(--gold);text-shadow:none}
.prompt{margin-top:1.2rem;color:var(--mute);letter-spacing:.3em;text-transform:uppercase;font-size:.8rem}
.handle{position:absolute;left:50%;bottom:5.5rem;translate:-50% 0;width:7rem;height:2.2rem;border-radius:1.1rem;background:linear-gradient(#cfcab9,#7b7667);
  box-shadow:0 4px 10px rgba(0,0,0,.6),inset 0 -3px 4px rgba(0,0,0,.35);animation:tug 1.3s ease-in-out infinite alternate}
.handle span{position:absolute;inset:.55rem 1.4rem;border-radius:.4rem;background:#2a2720}
.handle::before{content:"\2191";position:absolute;left:50%;top:-2.6rem;translate:-50% 0;color:var(--gold);font-size:1.8rem;animation:tug 1.3s ease-in-out infinite alternate}
@keyframes tug{to{transform:translateY(-10px)}}
#intro.drag .handle,#intro.drag .handle::before{animation:none}
.hazard{position:absolute;left:0;right:0;bottom:0;height:1.4rem;background:repeating-linear-gradient(-45deg,var(--gold) 0 18px,#14110d 18px 36px)}

#skip{position:absolute;right:1rem;bottom:2.4rem;z-index:5;background:none;border:0;color:var(--mute);cursor:pointer;font:inherit;text-transform:uppercase;letter-spacing:.15em;font-size:.8rem}
#skip:hover{color:var(--bone)}

/* ---------- nav ---------- */
header#top{position:fixed;top:0;left:0;right:0;z-index:20;display:flex;justify-content:space-between;align-items:center;padding:1rem clamp(1rem,4vw,3rem);
  background:linear-gradient(180deg,rgba(8,7,6,.85),transparent)}
.brand{font-size:1.4rem;color:var(--bone);text-decoration:none}
.brand em{font-style:normal;color:var(--gold)}
nav{display:flex;gap:1.6rem;align-items:center}
nav a{color:var(--bone);text-decoration:none;font-size:.85rem;text-transform:uppercase;letter-spacing:.18em;font-weight:500;position:relative;transition:color .2s}
nav a:not(.pill):hover{color:var(--gold)}
nav .pill{border:1px solid var(--gold);padding:.45rem 1.1rem;color:var(--gold);transition:all .2s}
nav .pill:hover{background:var(--gold);color:#120d04}
#mute{background:none;border:0;color:var(--mute);cursor:pointer;font:inherit;font-size:.7rem;letter-spacing:.15em}
#mute:hover{color:var(--bone)}

/* ---------- hero ---------- */
section{max-width:1100px;margin:0 auto;padding:6.5rem clamp(1rem,4vw,2rem)}
#hero{max-width:none;min-height:100vh;display:flex;flex-direction:column;justify-content:center;padding:6rem clamp(1.2rem,8vw,7rem) 4rem;position:relative}
.eyebrow{display:flex;align-items:center;gap:.9rem;color:var(--gold);text-transform:uppercase;letter-spacing:.3em;font-size:.8rem;font-weight:600}
.eyebrow span{width:3rem;height:1px;background:var(--gold)}
h1{font-size:clamp(3rem,12.5vw,10.5rem);line-height:.9;margin:1rem 0 1.2rem;color:var(--bone);text-shadow:5px 5px 0 rgba(0,0,0,.6)}
h1 em{font-style:normal;color:transparent;-webkit-text-stroke:2px var(--gold);text-shadow:none}
.lead{font-size:1.3rem;color:var(--bone);opacity:.85;max-width:30rem;margin-bottom:2rem}
.actions{display:flex;gap:1rem;flex-wrap:wrap}
.btn{display:inline-block;padding:.95rem 2.2rem;font-size:1.05rem;letter-spacing:.14em;text-decoration:none;transition:transform .2s,background .2s,color .2s,box-shadow .2s}
.btn.solid{background:var(--gold);color:#120d04;border:1px solid var(--gold)}
.btn.solid:hover{background:var(--gold2);box-shadow:0 8px 30px rgba(224,164,58,.4)}
.btn.ghost{border:1px solid var(--bone);color:var(--bone)}
.btn.ghost:hover{background:var(--bone);color:#120d04}
.scroll{position:absolute;bottom:1.6rem;left:clamp(1.2rem,8vw,7rem);font-size:.7rem;letter-spacing:.35em;text-transform:uppercase;color:var(--mute);padding-left:2.2rem}
.scroll::before{content:"";position:absolute;left:0;top:50%;width:1.4rem;height:1px;background:var(--gold);animation:slide 1.4s infinite alternate}
@keyframes slide{to{width:.4rem}}

/* marquee */
.marquee{overflow:hidden;border-block:1px solid var(--line);background:rgba(8,7,6,.7);backdrop-filter:blur(6px);padding:.9rem 0}
.marquee div{display:flex;width:max-content;animation:run 28s linear infinite}
.marquee span{font-size:1.5rem;color:var(--bone);padding:0 2rem;white-space:nowrap;opacity:.85}
.marquee span::after{content:"/";color:var(--gold);margin-left:2rem}
@keyframes run{to{transform:translateX(-50%)}}

/* ---------- sections ---------- */
.sec{display:flex;align-items:baseline;gap:1rem;margin-bottom:2.2rem;border-bottom:1px solid var(--line);padding-bottom:.8rem}
.sec b{font-size:1.2rem;color:var(--gold)}
h2{font-size:clamp(2rem,6vw,3.6rem);line-height:1}
.cards{display:grid;grid-template-columns:repeat(auto-fit,minmax(270px,1fr));gap:1.4rem}
.car{background:var(--ink);border:1px solid var(--line);backdrop-filter:blur(8px);transition:transform .15s,box-shadow .25s,border-color .25s;transform-style:preserve-3d}
.car:hover{border-color:var(--gold);box-shadow:0 20px 50px rgba(0,0,0,.6),0 0 30px rgba(224,164,58,.15)}
.photo{position:relative;aspect-ratio:4/3;background:var(--img) center/cover,repeating-linear-gradient(45deg,#14110d 0 12px,#1b1711 12px 24px);
  display:flex;align-items:center;justify-content:center;text-align:center;color:var(--gold);font-family:"Anton",sans-serif;letter-spacing:.15em}
.photo small{display:block;font-family:"Inter",sans-serif;font-size:.7rem;letter-spacing:.05em;color:var(--mute);margin-top:.3rem}
.price{position:absolute;right:0;bottom:0;background:var(--gold);color:#120d04;padding:.35rem .9rem;font-size:1.2rem;letter-spacing:.06em}
.info{padding:1.1rem 1.2rem 1.4rem}
h3{font-size:1.35rem;margin-bottom:.3rem}
.info p{color:var(--mute)}

.events{list-style:none;display:grid;gap:.9rem}
.events li{display:grid;grid-template-columns:5rem 1fr auto;gap:1.2rem;align-items:center;background:var(--ink);border:1px solid var(--line);padding:1rem 1.4rem;backdrop-filter:blur(8px);
  transition:transform .2s,border-color .2s,background .2s}
.events li:hover{transform:translateX(10px);border-color:var(--gold);background:rgba(224,164,58,.08)}
.day{font-size:2rem;color:var(--gold)}
.events p{color:var(--mute)}
.events i{font-style:normal;font-size:1.6rem;color:var(--gold);transition:transform .2s}
.events li:hover i{transform:translateX(6px)}

.stats{display:grid;grid-template-columns:repeat(auto-fit,minmax(180px,1fr));gap:1.2rem}
.stats div{background:var(--ink);border:1px solid var(--line);padding:1.6rem;backdrop-filter:blur(8px);position:relative}
.stats div::before{content:"";position:absolute;left:0;top:0;width:3rem;height:3px;background:var(--gold)}
.stats i{display:block;font-style:normal;font-size:4rem;line-height:1;color:var(--bone)}
.stats span{text-transform:uppercase;letter-spacing:.25em;font-size:.75rem;color:var(--gold)}

.cta{display:flex;justify-content:space-between;align-items:center;gap:1.6rem;flex-wrap:wrap;background:var(--ink);border:1px solid var(--line);padding:2rem;backdrop-filter:blur(8px)}
.cta p{font-size:1.2rem;max-width:34rem}
footer{text-align:center;padding:2.5rem;color:var(--mute);font-size:.85rem;letter-spacing:.1em}

.reveal{opacity:0;transform:translateY(40px);transition:opacity .8s,transform .8s}
.reveal.in{opacity:1;transform:none}
@media(max-width:760px){nav a:not(.pill){display:none}.events li{grid-template-columns:3.6rem 1fr}.events i{display:none}}