@import url('https://fonts.googleapis.com/css2?family=Manrope:wght@400;600;700;800&family=Russo+One&display=swap');

:root { --orange:#ff5a1f; --cream:#fff4db; --ink:#170e0a; }
* { box-sizing:border-box; }
html,body { margin:0; min-height:100%; background:#21120d; color:white; font-family:Manrope,system-ui,sans-serif; }
body { overflow-x:hidden; }
.hero { min-height:100svh; position:relative; isolation:isolate; display:grid; grid-template-columns:minmax(0,1fr) minmax(300px,410px); grid-template-rows:auto 1fr auto; gap:2rem; padding:28px clamp(22px,5vw,80px) 36px; overflow:hidden; }
.hero-photo { position:absolute; inset:0; width:100%; height:100%; object-fit:cover; object-position:58% center; z-index:-3; animation:hero-breathe 7s ease-in-out infinite alternate; }
.shade { position:absolute; inset:0; z-index:-2; background:linear-gradient(90deg,rgba(17,8,4,.88) 0%,rgba(17,8,4,.45) 48%,rgba(17,8,4,.16) 75%),linear-gradient(0deg,rgba(13,7,4,.72),transparent 50%); }
.noise { position:fixed; inset:0; z-index:20; opacity:.045; pointer-events:none; background-image:url("data:image/svg+xml,%3Csvg viewBox='0 0 180 180' xmlns='http://www.w3.org/2000/svg'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.85' numOctaves='3' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)' opacity='.7'/%3E%3C/svg%3E"); }
.topbar { grid-column:1/-1; display:flex; justify-content:space-between; align-items:center; }
.top-actions { display:flex; align-items:center; gap:10px; }
.brand { color:white; text-decoration:none; font:28px/1 'Russo One',sans-serif; letter-spacing:.05em; }
.brand span { color:var(--orange); }
.status { font-size:12px; letter-spacing:.14em; text-transform:uppercase; background:rgba(17,8,4,.5); backdrop-filter:blur(12px); border:1px solid rgba(255,255,255,.2); border-radius:999px; padding:10px 15px; }
.status i { display:inline-block; width:7px; height:7px; background:#71eb66; border-radius:50%; margin-right:8px; box-shadow:0 0 12px #71eb66; }
.music-toggle { width:auto; margin:0; padding:10px 15px; gap:8px; border:1px solid rgba(255,255,255,.2); border-radius:999px; color:white; background:rgba(17,8,4,.5); backdrop-filter:blur(12px); font-size:11px; letter-spacing:.08em; text-transform:uppercase; }
.music-toggle:hover { color:#251008; background:var(--cream); transform:none; }
.music-toggle[aria-pressed="true"] { color:#251008; background:var(--orange); }
.music-toggle span { font-size:15px; }
.copy { align-self:center; max-width:850px; }
.eyebrow,.card-kicker { color:#ffc49f; font-weight:800; font-size:11px; letter-spacing:.18em; text-transform:uppercase; }
h1 { font:clamp(46px,7.5vw,116px)/.88 'Russo One',sans-serif; letter-spacing:-.045em; text-transform:uppercase; margin:22px 0; text-wrap:balance; }
h1 em { color:var(--orange); font-style:normal; text-shadow:0 7px 0 rgba(82,18,0,.45); }
.lead { max-width:510px; color:rgba(255,255,255,.76); font-size:clamp(16px,1.6vw,21px); }
.login-card { align-self:end; margin-bottom:3vh; padding:29px; border:1px solid rgba(255,255,255,.22); border-radius:28px; background:rgba(28,14,9,.76); box-shadow:0 30px 80px rgba(0,0,0,.35); backdrop-filter:blur(16px); }
.card-icon { float:right; display:grid; place-items:center; width:46px; height:46px; color:#311008; background:var(--orange); border-radius:50%; font-size:24px; animation:spin 6s linear infinite; }
.login-card h2 { margin:5px 0 25px; font-size:24px; }
label { display:block; color:rgba(255,255,255,.68); font-size:12px; font-weight:700; margin:14px 0; }
input { width:100%; margin-top:7px; border:1px solid rgba(255,255,255,.18); border-radius:13px; padding:14px 15px; color:white; font:inherit; background:rgba(255,255,255,.08); outline:none; transition:.2s; }
input:focus { border-color:var(--orange); box-shadow:0 0 0 3px rgba(255,90,31,.18); }
button { width:100%; border:0; border-radius:14px; padding:15px 17px; margin-top:8px; display:flex; justify-content:space-between; color:#251008; background:var(--cream); font:800 14px Manrope,sans-serif; cursor:pointer; transition:.2s; }
button:hover { background:var(--orange); transform:translateY(-2px); }
.fineprint { margin:14px 0 0; font-size:10px; color:rgba(255,255,255,.45); text-align:center; }
.scroll-cue { grid-column:1/-1; font-size:10px; letter-spacing:.16em; text-transform:uppercase; color:rgba(255,255,255,.5); }
.scroll-cue span { display:inline-block; width:45px; height:1px; vertical-align:middle; margin-right:10px; background:var(--orange); }
.truck { position:fixed; z-index:8; display:flex; align-items:center; gap:0; filter:drop-shadow(0 8px 8px rgba(0,0,0,.38)); pointer-events:none; }
.truck.right { left:-340px; animation:drive-right var(--speed) linear forwards; }
.truck.left { right:-340px; transform:scaleX(-1); animation:drive-left var(--speed) linear forwards; }
.truck-body { width:220px; height:88px; display:grid; place-items:center; border:5px solid #e7e2db; border-radius:9px 4px 3px 3px; font:22px/1 'Russo One',sans-serif; letter-spacing:.03em; background:white; color:#d51821; }
.truck-body.red { color:white; border-color:#761118; background:#c62028; }
.truck-body.pepsi { color:white; border-color:#d9e7ff; background:linear-gradient(160deg,#0754a2 0 65%,#e61d2d 66%); }
.truck-cab { width:74px; height:70px; align-self:end; position:relative; background:#ef4b2f; clip-path:polygon(0 22%,65% 22%,100% 55%,100% 100%,0 100%); }
.wheel { position:absolute; bottom:-15px; width:28px; height:28px; border:7px solid #171717; border-radius:50%; background:#888; }
.wheel.one { left:32px; }.wheel.two { left:232px; }
.boom { position:fixed; inset:0; z-index:30; display:grid; place-content:center; text-align:center; pointer-events:none; opacity:0; background:rgba(25,8,2,.42); backdrop-filter:blur(2px); }
.boom.show { animation:boom-screen 2.6s ease both; }
.boom-ring { position:absolute; left:50%; top:50%; width:10px; height:10px; border:30px solid var(--orange); border-radius:50%; transform:translate(-50%,-50%); }
.show .boom-ring { animation:ring 1s ease-out both; }
.boom-word { position:relative; font:clamp(64px,14vw,180px)/1 'Russo One'; color:#fff3bb; -webkit-text-stroke:4px #d32914; transform:rotate(-5deg); text-shadow:8px 9px 0 #281008; }
.boom p { position:relative; font-weight:800; font-size:20px; }
#confetti { position:fixed; inset:0; z-index:31; width:100%; height:100%; pointer-events:none; }
@keyframes hero-breathe { to { transform:scale(1.025) rotate(.15deg); } }
@keyframes spin { to { transform:rotate(360deg); } }
@keyframes drive-right { to { transform:translateX(calc(100vw + 680px)); } }
@keyframes drive-left { to { transform:scaleX(-1) translateX(calc(100vw + 680px)); } }
@keyframes boom-screen { 0%{opacity:0} 9%,70%{opacity:1} 100%{opacity:0} }
@keyframes ring { to { width:150vmax; height:150vmax; border-width:2px; opacity:0; } }
@media (max-width:820px) {
  .hero { min-height:auto; grid-template-columns:1fr; padding:22px 20px 70px; background:#160b07; }
  .hero-photo { height:58svh; object-position:61% center; animation:none; }
  .shade { height:62svh; background:linear-gradient(180deg,rgba(12,5,2,.18),rgba(12,5,2,.08) 55%,#160b07 100%); }
  .topbar { align-self:start; }
  .top-actions { gap:6px; }
  .music-toggle { padding:9px 11px; font-size:0; }
  .music-toggle b { display:none; }
  .music-toggle span { font-size:15px; }
  .status { padding:9px 11px; font-size:10px; }
  .copy { margin-top:50svh; padding-top:0; }
  .eyebrow { max-width:310px; line-height:1.55; }
  h1 { font-size:clamp(43px,13.5vw,68px); line-height:.91; margin-top:18px; }
  .login-card { width:min(100%,420px); justify-self:center; margin-bottom:0; }
  .scroll-cue { display:none; }
  .truck { transform:scale(.48); transform-origin:left center; opacity:.9; }
  .truck.left { transform:scale(-.48,.48); transform-origin:right center; }
}
@media (prefers-reduced-motion:reduce) { .hero-photo,.card-icon { animation:none; } }