/* ============================================================
   Drive · Arunachalam Kasi — interactive driving portfolio
   Warm beige world, terracotta car, editorial HUD.
   ============================================================ */
*, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; }
:root {
  --bg:#ECE1CF; --paper:#FAF5EB; --cream:#F2E9DA;
  --ink:#221D16; --ink-2:#4B4338; --muted:#6B5F49;
  --line:#D9CBB2; --accent:#B8492A; --accent-d:#9A3A1F; --accent-soft:#EAD2BE; --olive:#6F6A41;
  --serif:"Fraunces",serif; --sans:"Hanken Grotesk",system-ui,sans-serif; --mono:"JetBrains Mono",monospace;
  --ease:cubic-bezier(.22,1,.36,1);
}
/* registered so the speedometer arc can actually animate between frames */
@property --p { syntax:"<number>"; inherits:false; initial-value:0; }

html,body { height:100%; }
body {
  font-family:var(--sans); background:var(--bg); color:var(--ink);
  overflow:hidden; position:fixed; inset:0; -webkit-font-smoothing:antialiased;
  touch-action:none; overscroll-behavior:none;
}
canvas#game { position:fixed; inset:0; width:100%; height:100%; display:block; cursor:grab; touch-action:none; }
@media (prefers-reduced-motion: reduce) {
  .nudge { animation:none !important; }
  .panel, .toast, .icon-btn, .p-close, .link-cta, .btn-start { transition:none !important; }
}

/* atmosphere overlays */
.vignette { position:fixed; inset:0; pointer-events:none; z-index:5;
  background:radial-gradient(120% 100% at 50% 38%, transparent 52%, rgba(34,29,22,.22) 100%); }
.grain { position:fixed; inset:0; pointer-events:none; z-index:6; opacity:.4; mix-blend-mode:multiply;
  background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='180' height='180'%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='.5'/%3E%3C/svg%3E"); }

::selection { background:var(--accent); color:var(--cream); }
a { color:inherit; text-decoration:none; }
button { font:inherit; color:inherit; background:none; border:none; cursor:pointer; }

/* ---------------- HUD ---------------- */
.hud { position:fixed; z-index:10; }
.chip {
  background:color-mix(in srgb, var(--paper) 80%, transparent);
  backdrop-filter:blur(10px) saturate(1.2); -webkit-backdrop-filter:blur(10px) saturate(1.2);
  border:1px solid var(--line); border-radius:100px;
  box-shadow:0 12px 30px -22px rgba(34,29,22,.7);
}
.mono { font-family:var(--mono); }

/* top bar */
.hud-top { top:16px; left:16px; right:16px; display:flex; justify-content:space-between; align-items:flex-start; gap:12px; pointer-events:none; }
.hud-top > * { pointer-events:auto; }
.brand { display:flex; align-items:center; gap:10px; padding:8px 8px 8px 8px; }
.brand .badge { width:34px; height:34px; display:grid; place-items:center; border:1.5px solid var(--ink); border-radius:9px;
  font-family:var(--serif); font-weight:700; font-size:.9rem; }
.brand .who { line-height:1.05; padding-right:8px; }
.brand .who b { font-family:var(--serif); font-weight:600; font-size:.98rem; display:block; }
.brand .who span { font-family:var(--mono); font-size:.58rem; letter-spacing:.14em; text-transform:uppercase; color:var(--muted); }
.top-right { display:flex; gap:10px; align-items:center; }
.pill { display:inline-flex; align-items:center; gap:.6em; padding:.62em 1em; font-family:var(--mono);
  font-size:.68rem; letter-spacing:.1em; text-transform:uppercase; color:var(--ink-2); }
.pill b { color:var(--accent-d); font-size:.82rem; }
.icon-btn { width:42px; height:42px; border-radius:50%; display:grid; place-items:center; font-size:1rem; transition:transform .3s var(--ease), background .3s, color .3s; }
.icon-btn:hover { transform:translateY(-2px); background:var(--ink); color:var(--cream); }
.icon-btn.off { color:var(--muted); }
.link-cta { padding:.62em 1.05em; font-family:var(--mono); font-size:.66rem; letter-spacing:.12em; text-transform:uppercase;
  border:1.5px solid var(--ink); border-radius:100px; transition:background .3s var(--ease), color .3s, transform .3s; }
.link-cta:hover { background:var(--accent); border-color:var(--accent); color:var(--cream); transform:translateY(-2px); }

/* bottom bar */
.hud-bottom { left:16px; right:16px; bottom:16px; display:flex; justify-content:space-between; align-items:flex-end; gap:12px; pointer-events:none; }
.hud-bottom > * { pointer-events:auto; }
.minimap-wrap { padding:8px; border-radius:18px; }
#minimap { display:block; border-radius:10px; }
.minimap-wrap .cap { font-family:var(--mono); font-size:.54rem; letter-spacing:.16em; text-transform:uppercase; color:var(--muted); text-align:center; margin-top:5px; }

.hint { padding:.7em 1.2em; font-family:var(--mono); font-size:.66rem; letter-spacing:.06em; color:var(--ink-2);
  text-align:center; max-width:min(46ch,80vw); transition:opacity .5s; }
.hint .k { display:inline-block; min-width:1.5em; text-align:center; padding:.1em .45em; margin:0 .1em; border:1px solid var(--line);
  border-bottom-width:2px; border-radius:5px; background:var(--cream); color:var(--ink); font-size:.62rem; }
.hint b { color:var(--accent); }

/* speedometer */
.speedo { width:104px; height:104px; border-radius:50%; display:grid; place-items:center; position:relative; }
.speedo .ring { position:absolute; inset:0; border-radius:50%;
  background:conic-gradient(var(--accent) calc(var(--p,0)*1%), transparent 0);
  -webkit-mask:radial-gradient(closest-side, transparent 72%, #000 73%);
  mask:radial-gradient(closest-side, transparent 72%, #000 73%); transition:--p .15s linear; }
.speedo .num { font-family:var(--serif); font-weight:600; font-size:1.7rem; line-height:1; }
.speedo .unit { font-family:var(--mono); font-size:.5rem; letter-spacing:.18em; color:var(--muted); margin-top:2px; }
.speedo .gear { position:absolute; bottom:14px; font-family:var(--mono); font-size:.55rem; color:var(--accent); letter-spacing:.1em; }

/* ---------------- station panel ---------------- */
.panel {
  position:fixed; z-index:20; top:0; right:0; height:100%;
  width:min(440px, 92vw); background:var(--paper);
  border-left:1px solid var(--line); box-shadow:-30px 0 60px -40px rgba(34,29,22,.7);
  transform:translateX(102%); transition:transform .55s var(--ease);
  display:flex; flex-direction:column; padding:clamp(22px,4vw,40px); overflow-y:auto;
}
.panel.open { transform:translateX(0); }
/* backdrop: click / tap anywhere outside the panel to close */
.backdrop { position:fixed; inset:0; z-index:19; background:rgba(34,29,22,.12); opacity:0; visibility:hidden;
  transition:opacity .45s var(--ease), visibility .45s; }
.backdrop.show { opacity:1; visibility:visible; }
.panel .p-kind { font-family:var(--mono); font-size:.66rem; letter-spacing:.2em; text-transform:uppercase; color:var(--accent);
  display:flex; align-items:center; gap:.7em; }
.panel .p-kind::before { content:""; width:24px; height:1px; background:var(--accent); }
.panel h2 { font-family:var(--serif); font-weight:400; font-size:clamp(2rem,5vw,2.9rem); line-height:.98; letter-spacing:-.02em; margin:.7rem 0 1.4rem; }
.panel h2 em { font-style:italic; color:var(--accent); }
.panel .p-body { font-size:1rem; color:var(--ink-2); line-height:1.6; }
.panel .p-body p { margin-bottom:1rem; }
.panel .p-body b { color:var(--ink); font-weight:600; }
.p-close { position:absolute; top:18px; right:18px; width:40px; height:40px; border-radius:50%; border:1px solid var(--line);
  display:grid; place-items:center; font-size:1.1rem; background:var(--paper); transition:background .3s, color .3s, transform .3s; }
.p-close:hover { background:var(--ink); color:var(--cream); transform:rotate(90deg); }

/* timeline rows in panel */
.row { padding:.95rem 0; border-top:1px solid var(--line); }
.row:first-of-type { border-top:none; }
.row .r-top { display:flex; justify-content:space-between; gap:1rem; align-items:baseline; }
.row .r-title { font-family:var(--serif); font-weight:500; font-size:1.15rem; line-height:1.1; }
.row .r-title .org { color:var(--accent); }
.row .r-when { font-family:var(--mono); font-size:.66rem; color:var(--muted); white-space:nowrap; }
.row p { font-size:.9rem; color:var(--ink-2); margin:.35rem 0 0; }
.proj { display:flex; flex-direction:column; gap:.2rem; padding:.85rem 0; border-top:1px solid var(--line); transition:padding-left .3s var(--ease); }
.proj:first-of-type { border-top:none; }
.proj:hover { padding-left:.5rem; }
.proj .pj-head { display:flex; align-items:center; justify-content:space-between; gap:.6rem; }
.proj .pj-name { font-family:var(--serif); font-weight:500; font-size:1.18rem; }
.proj .pj-name .tag { font-family:var(--mono); font-size:.52rem; letter-spacing:.1em; color:var(--ink-2);
  background:var(--accent-soft); padding:.15em .5em; border-radius:100px; margin-left:.4em; vertical-align:middle; }
.proj .pj-arrow { color:var(--accent); }
.proj p { font-size:.88rem; color:var(--ink-2); }
.proj .pj-langs { font-family:var(--mono); font-size:.6rem; letter-spacing:.06em; color:var(--muted); margin-top:.2rem; }
.chips { display:flex; flex-wrap:wrap; gap:.4rem; }
.chips span { font-family:var(--mono); font-size:.62rem; letter-spacing:.04em; color:var(--ink-2);
  border:1px solid var(--line); border-radius:100px; padding:.28em .8em; }
.skill-group { margin-bottom:1.2rem; }
.skill-group h4 { font-family:var(--mono); font-size:.62rem; letter-spacing:.16em; text-transform:uppercase; color:var(--accent); margin-bottom:.5rem; }
.contact-list { display:flex; flex-direction:column; gap:.2rem; }
.contact-list a { display:flex; justify-content:space-between; gap:1rem; align-items:baseline; padding:.85rem 0; border-top:1px solid var(--line); transition:padding-left .3s var(--ease); }
.contact-list a:hover { padding-left:.5rem; }
.contact-list .k { font-family:var(--mono); font-size:.62rem; letter-spacing:.14em; text-transform:uppercase; color:var(--muted); }
.contact-list .v { font-size:1rem; color:var(--ink); }
.panel .p-foot { margin-top:auto; padding-top:1.6rem; font-family:var(--mono); font-size:.62rem; letter-spacing:.06em; color:var(--muted); }

/* ---------------- mobile touch controls ---------------- */
.touch { position:fixed; inset:0; z-index:15; pointer-events:none; display:none; }
.touch .pad { position:absolute; bottom:108px; width:84px; height:84px; border-radius:50%;
  display:grid; place-items:center; font-size:1.7rem; color:var(--ink);
  background:color-mix(in srgb,var(--paper) 78%,transparent); border:1px solid var(--line);
  backdrop-filter:blur(8px); -webkit-backdrop-filter:blur(8px); pointer-events:auto; user-select:none;
  box-shadow:0 14px 30px -20px rgba(34,29,22,.7); transition:transform .12s, background .12s; touch-action:none; }
.touch .pad:active, .touch .pad.on { transform:scale(.92); background:var(--accent); color:var(--cream); }
.touch .steer-l { left:20px; }
.touch .steer-r { left:118px; }
.touch .gas { right:20px; bottom:150px; background:color-mix(in srgb,var(--accent) 86%,transparent); color:var(--cream); }
.touch .brake { right:20px; bottom:54px; }
body.is-touch .touch { display:block; }
/* keyboard vs touch copy swaps (body.is-touch is set before the intro renders) */
.hint-touch, .foot-touch, .touch-legend { display:none; }
body.is-touch .hint-kbd, body.is-touch .foot-kbd, body.is-touch .kbd-legend { display:none; }
body.is-touch .hint-touch, body.is-touch .foot-touch { display:inline; }
body.is-touch .touch-legend { display:flex; }

/* ---------------- intro ---------------- */
.intro { position:fixed; inset:0; z-index:40; background:var(--bg);
  display:flex; flex-direction:column; justify-content:center; align-items:flex-start;
  padding:clamp(28px,7vw,90px); transition:opacity .7s var(--ease), visibility .7s; }
.intro.hide { opacity:0; visibility:hidden; pointer-events:none; }
.intro .eyebrow { font-family:var(--mono); font-size:.72rem; letter-spacing:.26em; text-transform:uppercase; color:var(--accent);
  display:inline-flex; align-items:center; gap:.7em; }
.intro .eyebrow::before { content:""; width:28px; height:1px; background:var(--accent); }
.intro h1 { font-family:var(--serif); font-weight:400; font-size:clamp(2.8rem,9vw,7rem); line-height:.92; letter-spacing:-.03em; margin:1.2rem 0 .4rem; max-width:16ch; }
.intro h1 em { font-style:italic; color:var(--accent); }
.intro .sub { font-size:clamp(1rem,2vw,1.25rem); color:var(--ink-2); max-width:48ch; margin-bottom:2rem; }
.intro .legend { display:flex; gap:1.6rem; flex-wrap:wrap; margin-bottom:2.4rem; }
.intro .legend div { font-family:var(--mono); font-size:.72rem; color:var(--ink-2); display:flex; align-items:center; gap:.6em; }
.kbd { display:inline-grid; gap:3px; }
.kbd .r2 { display:flex; gap:3px; justify-content:center; }
.key { min-width:26px; height:26px; padding:0 6px; display:grid; place-items:center; border:1px solid var(--line);
  border-bottom-width:2.5px; border-radius:6px; background:var(--cream); font-family:var(--mono); font-size:.72rem; color:var(--ink); }
.intro .actions { display:flex; gap:1rem; align-items:center; flex-wrap:wrap; }
.btn-start { background:var(--ink); color:var(--cream); font-family:var(--mono); font-size:.8rem; letter-spacing:.12em; text-transform:uppercase;
  padding:1.05em 1.9em; border-radius:100px; display:inline-flex; align-items:center; gap:.7em;
  box-shadow:0 16px 34px -16px rgba(34,29,22,.7); transition:transform .35s var(--ease), background .35s; }
.btn-start:hover { background:var(--accent); transform:translateY(-3px); }
.btn-start .nudge { display:inline-block; animation:nudge 1.4s var(--ease) infinite; }
@keyframes nudge { 0%,100%{ transform:translateX(0);} 50%{ transform:translateX(5px);} }
.intro .classic { font-family:var(--mono); font-size:.72rem; letter-spacing:.06em; color:var(--ink-2); border-bottom:1px solid var(--line); padding-bottom:2px; }
.intro .classic:hover { color:var(--accent); border-color:var(--accent); }
.intro-glow { position:fixed; right:-10vw; top:-10vh; width:60vw; height:60vw; max-width:760px; max-height:760px; z-index:-1;
  background:radial-gradient(circle, rgba(184,73,42,.16), transparent 62%); filter:blur(20px); pointer-events:none; }

/* arrival toast */
.toast { position:fixed; z-index:18; left:50%; top:84px; transform:translate(-50%,-16px); opacity:0;
  pointer-events:none; transition:opacity .35s, transform .35s var(--ease);
  font-family:var(--mono); font-size:.7rem; letter-spacing:.12em; text-transform:uppercase; color:var(--cream);
  background:var(--ink); padding:.7em 1.2em; border-radius:100px; white-space:nowrap; }
.toast.show { opacity:1; transform:translate(-50%,0); }
.toast b { color:var(--accent-soft); }

@media (max-width:760px){
  .brand .who { display:none; }
  .hud-top { top:12px; left:12px; right:12px; }
  .hud-bottom { left:12px; right:12px; bottom:12px; }
  .minimap-wrap .cap { display:none; }
  .speedo { width:84px; height:84px; }
  .speedo .num { font-size:1.3rem; }
  .pill.progress { display:none; }
}
@media (max-width:420px){ #minimap { width:104px; height:78px; } }