Models 44

MiMo-V2.6-Pro

by Xiaomireasoning defaultClean
Open in new window

Running live in a sandboxed frame. Click inside it before using the keyboard.

How it went

Total time
3 min 22 s
Cost
$0.010
Output tokens
15,255
Spent thinking
0 tokens
Speed
76.5 tok/s
Console errors
0
First token after
2.5 s
First visible text after
2.5 s
Prompt tokens
367
Code size
43.0 KB
Finish reason
stop
Served by
GMICloud
Model id
xiaomi/mimo-v2.6-pro
Reasoning sent
model default
Max output
131,072 tokens
Generated
Nov 13, 2026

What it was asked

The prompt
“i'm opening a korean taco food truck called "Kimchi Loco", make me a website that makes people really want to come”
System prompt, sent with every prompt
You are generating a self-contained web demo. It will be rendered automatically in a sandboxed iframe and compared side by side with the output of other AI models given the exact same task.

Output rules:
- Reply with exactly ONE fenced code block containing the complete file: ```html (or ```svg when the task asks for an SVG). No text before or after the code block.
- Everything must be inline: CSS in <style>, JavaScript in <script>. No external files, images, fonts or network requests, except the CDN URLs explicitly allowed by the task.
- Do not use localStorage, sessionStorage, cookies, IndexedDB, alert(), confirm(), prompt() or window.open(): they are blocked in the sandbox and will throw.
- The page must look right in a 1280×800 viewport and adapt gracefully down to 375px wide. No horizontal scrollbar.
- Something meaningful must be visible on first paint: a screenshot is taken automatically about 3 seconds after load, without any interaction.
- Everything that makes the demo interesting must be visible within the first seconds: nothing hidden behind a high score, a later level or a long play session.
- Games must start in a self-playing demo mode (a simple AI plays) behind a "Click or press a key to start" message, so the game can be judged in action without playing.
- The iframe only receives keyboard events after the user clicks it: if the demo uses the keyboard, display a clear "Click or press a key to start" message.
- The code must run with zero errors in the console of the latest Chrome.

Code run-1.html · 900 lines

<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Kimchi Loco — Korean Tacos That Hit Different</title>
<meta name="description" content="Kimchi Loco is Seoul street food gone wild — Korean tacos, bulgogi burritos, and gochujang-glazed everything on wheels. Find the truck.">
<link rel="preconnect" href="https://fonts.googleapis.com">
<link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
<link href="https://fonts.googleapis.com/css2?family=Anton&family=Space+Grotesk:wght@400;500;700&display=swap" rel="stylesheet">
<style>
:root{
  --ink:#151210;
  --paper:#FFF3E2;
  --cream:#FFE8CC;
  --red:#FF3B1F;
  --red-deep:#E22B12;
  --yellow:#FFC220;
  --green:#2FBF71;
  --pink:#FF8FB1;
  --purple:#2A1E5C;
  --shadow:6px 6px 0 var(--ink);
}
*{margin:0;padding:0;box-sizing:border-box}
html{scroll-behavior:smooth}
body{
  background:var(--paper);
  color:var(--ink);
  font-family:'Space Grotesk',system-ui,sans-serif;
  overflow-x:hidden;
  -webkit-font-smoothing:antialiased;
}
h1,h2,h3,.display{font-family:'Anton',Impact,sans-serif;font-weight:400;letter-spacing:.5px;text-transform:uppercase;line-height:.92}
a{color:inherit}
img,svg{display:block;max-width:100%}
.wrap{width:min(1180px,calc(100% - 40px));margin-inline:auto}

/* ---------- grain / texture ---------- */
body::before{
  content:"";position:fixed;inset:0;pointer-events:none;z-index:9999;opacity:.055;
  background-image:url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='160' height='160'><filter id='n'><feTurbulence type='fractalNoise' baseFrequency='.85' numOctaves='3'/></filter><rect width='160' height='160' filter='url(%23n)'/></svg>");
  mix-blend-mode:multiply;
}

/* ---------- ticker ---------- */
.ticker{
  background:var(--ink);color:var(--paper);overflow:hidden;white-space:nowrap;
  border-bottom:3px solid var(--ink);position:relative;z-index:5;
}
.ticker-track{display:inline-flex;gap:0;animation:slide 26s linear infinite;will-change:transform}
.ticker-track span{
  font-family:'Anton',sans-serif;font-size:clamp(13px,1.5vw,17px);letter-spacing:1.6px;
  padding:11px 22px;text-transform:uppercase;display:inline-flex;align-items:center;gap:22px;
}
.ticker-track span i{width:9px;height:9px;background:var(--yellow);border-radius:50%;display:inline-block}
@keyframes slide{from{transform:translateX(0)}to{transform:translateX(-50%)}}

/* ---------- header ---------- */
header{
  position:sticky;top:0;z-index:100;background:var(--paper);
  border-bottom:3px solid var(--ink);
}
.nav{display:flex;align-items:center;justify-content:space-between;gap:18px;padding:13px 0}
.logo{display:flex;align-items:center;gap:11px;text-decoration:none}
.logo-mark{
  width:44px;height:44px;border:3px solid var(--ink);border-radius:50%;
  background:var(--red);display:grid;place-items:center;flex:none;
  box-shadow:3px 3px 0 var(--ink);transform:rotate(-6deg);
}
.logo-txt{line-height:.85}
.logo-txt b{font-family:'Anton',sans-serif;font-size:22px;letter-spacing:.6px;display:block}
.logo-txt small{font-size:9.5px;letter-spacing:3.2px;font-weight:700;text-transform:uppercase;opacity:.72}
.nav-links{display:flex;align-items:center;gap:26px}
.nav-links a{
  text-decoration:none;font-size:12.5px;font-weight:700;letter-spacing:1.7px;text-transform:uppercase;
  position:relative;padding:4px 0;
}
.nav-links a::after{
  content:"";position:absolute;left:0;bottom:0;height:3px;width:0;background:var(--red);transition:width .28s ease
}
.nav-links a:hover::after{width:100%}
.btn{
  display:inline-flex;align-items:center;justify-content:center;gap:10px;
  font-family:'Anton',sans-serif;font-size:15px;letter-spacing:1.3px;text-transform:uppercase;
  padding:13px 22px;border:3px solid var(--ink);background:var(--yellow);color:var(--ink);
  text-decoration:none;cursor:pointer;border-radius:999px;
  box-shadow:5px 5px 0 var(--ink);transition:transform .16s ease,box-shadow .16s ease,background .2s;
}
.btn:hover{transform:translate(-2px,-2px);box-shadow:8px 8px 0 var(--ink)}
.btn:active{transform:translate(3px,3px);box-shadow:1px 1px 0 var(--ink)}
.btn-red{background:var(--red);color:#fff}
.btn-sm{padding:10px 18px;font-size:13px;box-shadow:4px 4px 0 var(--ink)}
.menu-toggle{display:none;background:var(--ink);border:3px solid var(--ink);color:var(--paper);
  border-radius:999px;padding:10px 15px;font-family:'Anton',sans-serif;letter-spacing:1.2px;cursor:pointer}

/* ---------- hero ---------- */
.hero{
  position:relative;overflow:hidden;
  background:
    radial-gradient(circle at 82% 22%, rgba(255,194,32,.32), transparent 42%),
    radial-gradient(circle at 12% 82%, rgba(255,59,31,.18), transparent 45%),
    var(--paper);
  border-bottom:4px solid var(--ink);
}
.hero-grid{
  display:grid;grid-template-columns:1.06fr .94fr;gap:38px;align-items:center;
  padding:56px 0 66px;
}
.eyebrow{
  display:inline-flex;align-items:center;gap:9px;background:var(--ink);color:var(--paper);
  padding:8px 15px;border-radius:999px;font-size:11px;font-weight:700;letter-spacing:2.4px;text-transform:uppercase;
  margin-bottom:20px;
}
.eyebrow .dot{width:8px;height:8px;border-radius:50%;background:var(--green);animation:pulse 1.5s infinite}
@keyframes pulse{0%,100%{opacity:1;transform:scale(1)}50%{opacity:.35;transform:scale(.7)}}
.hero h1{font-size:clamp(52px,8.4vw,116px);line-height:.86}
.hero h1 .out{
  -webkit-text-stroke:3px var(--ink);color:transparent;display:block;
}
.hero h1 .hl{
  display:inline-block;background:var(--red);color:#fff;padding:2px 14px 8px;
  transform:rotate(-1.6deg);box-shadow:8px 8px 0 var(--ink);margin:8px 0;
}
.hero p.lede{
  font-size:clamp(16px,1.7vw,20px);line-height:1.55;max-width:520px;margin:26px 0 10px;font-weight:500;
}
.hero p.lede b{background:var(--yellow);padding:1px 6px;border-radius:4px}
.hero-cta{display:flex;flex-wrap:wrap;gap:14px;margin-top:26px}
.hero-stats{display:flex;flex-wrap:wrap;gap:26px;margin-top:34px}
.stat b{font-family:'Anton',sans-serif;font-size:31px;display:block;line-height:1}
.stat span{font-size:11px;letter-spacing:1.9px;text-transform:uppercase;font-weight:700;opacity:.66}

/* hero art */
.hero-art{position:relative;display:grid;place-items:center;min-height:420px}
.blob{
  position:absolute;width:min(430px,84%);aspect-ratio:1;background:var(--red);
  border:4px solid var(--ink);border-radius:42% 58% 55% 45%/48% 42% 58% 52%;
  animation:morph 12s ease-in-out infinite;box-shadow:12px 12px 0 var(--ink);
}
@keyframes morph{
  0%,100%{border-radius:42% 58% 55% 45%/48% 42% 58% 52%;transform:rotate(0deg)}
  50%{border-radius:58% 42% 45% 55%/55% 58% 42% 45%;transform:rotate(6deg)}
}
.taco{position:relative;z-index:2;width:min(400px,80%);filter:drop-shadow(14px 18px 0 rgba(21,18,16,.22))}
.badge{
  position:absolute;z-index:4;width:112px;height:112px;border-radius:50%;
  border:3px solid var(--ink);background:var(--yellow);display:grid;place-items:center;
  text-align:center;font-family:'Anton',sans-serif;font-size:14px;line-height:1.05;letter-spacing:.8px;
  box-shadow:5px 5px 0 var(--ink);
}
.badge.b1{top:2%;right:4%;transform:rotate(11deg);animation:float 5s ease-in-out infinite}
.badge.b2{bottom:4%;left:1%;background:var(--green);transform:rotate(-9deg);animation:float 6.4s ease-in-out infinite reverse}
@keyframes float{0%,100%{translate:0 0}50%{translate:0 -13px}}
.spark{position:absolute;z-index:3;opacity:.9}
.spark.s1{top:12%;left:8%;animation:spin 16s linear infinite}
.spark.s2{bottom:16%;right:6%;animation:spin 22s linear infinite reverse}
@keyframes spin{to{transform:rotate(360deg)}}

/* ---------- marquee band ---------- */
.band{
  background:var(--red);border-bottom:4px solid var(--ink);color:#fff;overflow:hidden;white-space:nowrap;
  padding:14px 0;
}
.band-track{display:inline-flex;animation:slide 30s linear infinite}
.band-track h3{font-size:clamp(22px,3.4vw,38px);padding:0 26px;display:inline-flex;align-items:center;gap:26px}
.band-track h3 em{font-style:normal;-webkit-text-stroke:2px #fff;color:transparent}

/* ---------- sections ---------- */
section{position:relative}
.sec{padding:86px 0}
.sec-head{max-width:720px;margin-bottom:44px}
.kicker{
  display:inline-block;font-size:11.5px;font-weight:700;letter-spacing:3px;text-transform:uppercase;
  color:var(--red);margin-bottom:14px;
}
.sec-head h2{font-size:clamp(38px,5.6vw,68px)}
.sec-head h2 .mark{background:var(--yellow);padding:0 10px;box-decoration-break:clone;-webkit-box-decoration-break:clone}
.sec-head p{margin-top:18px;font-size:17px;line-height:1.65;opacity:.82;max-width:600px}

/* menu */
#menu{background:var(--cream);border-top:4px solid var(--ink);border-bottom:4px solid var(--ink)}
.menu-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:22px}
.card{
  background:var(--paper);border:3px solid var(--ink);border-radius:22px;overflow:hidden;
  box-shadow:var(--shadow);display:flex;flex-direction:column;transition:transform .22s ease,box-shadow .22s ease;
}
.card:hover{transform:translate(-4px,-6px) rotate(-.7deg);box-shadow:12px 14px 0 var(--ink)}
.card-top{position:relative;aspect-ratio:16/10;display:grid;place-items:center;overflow:hidden;border-bottom:3px solid var(--ink)}
.card-top svg{width:78%}
.tag{
  position:absolute;top:12px;left:12px;background:var(--ink);color:var(--paper);
  font-size:10px;font-weight:700;letter-spacing:1.8px;text-transform:uppercase;padding:6px 11px;border-radius:999px;z-index:2;
}
.tag.hot{background:var(--red);color:#fff}
.card-body{padding:20px;display:flex;flex-direction:column;gap:11px;flex:1}
.card-body h3{font-size:25px}
.card-body p{font-size:14.5px;line-height:1.55;opacity:.8}
.card-foot{display:flex;align-items:center;justify-content:space-between;margin-top:auto;padding-top:8px}
.price{font-family:'Anton',sans-serif;font-size:26px;color:var(--red)}
.heat{display:flex;gap:4px}
.heat i{width:13px;height:13px;background:var(--red);border:2px solid var(--ink);border-radius:50% 50% 50% 0;transform:rotate(45deg)}
.heat i.off{background:transparent;opacity:.32}

/* specials strip */
.specials{display:grid;grid-template-columns:repeat(4,1fr);gap:18px;margin-top:28px}
.sp{
  border:3px solid var(--ink);border-radius:18px;padding:20px 18px;background:var(--paper);
  box-shadow:5px 5px 0 var(--ink);
}
.sp b{font-family:'Anton',sans-serif;font-size:19px;display:block;margin-bottom:7px}
.sp p{font-size:13.5px;line-height:1.5;opacity:.78}

/* story */
#story{background:var(--purple);color:var(--paper);border-bottom:4px solid var(--ink);overflow:hidden}
.story-grid{display:grid;grid-template-columns:1fr 1fr;gap:56px;align-items:center}
.story-grid .kicker{color:var(--yellow)}
.story-grid h2{font-size:clamp(38px,5.2vw,64px)}
.story-grid h2 em{font-style:normal;color:var(--yellow)}
.story-grid p{font-size:17px;line-height:1.75;opacity:.9;margin-top:20px}
.story-list{margin-top:28px;display:flex;flex-direction:column;gap:14px}
.story-list li{list-style:none;display:flex;gap:13px;align-items:flex-start;font-size:15.5px;line-height:1.5}
.chk{
  flex:none;width:26px;height:26px;border-radius:50%;background:var(--green);color:var(--ink);
  display:grid;place-items:center;font-size:14px;font-weight:700;border:2px solid var(--ink);
}
.poster-wrap{position:relative;display:grid;place-items:center}
.poster{
  width:min(360px,88%);aspect-ratio:3/4;background:var(--yellow);color:var(--ink);
  border:4px solid var(--ink);border-radius:10px;box-shadow:16px 16px 0 rgba(255,255,255,.14);
  padding:28px 24px;transform:rotate(3deg);position:relative;overflow:hidden;
}
.poster .stamp{
  position:absolute;bottom:18px;right:18px;width:96px;height:96px;border:3px dashed var(--ink);
  border-radius:50%;display:grid;place-items:center;text-align:center;font-family:'Anton',sans-serif;
  font-size:12px;line-height:1.15;transform:rotate(-14deg);opacity:.75;
}
.poster h3{font-size:clamp(32px,4.4vw,50px);line-height:.88}
.poster .tiny{font-size:11px;letter-spacing:2.6px;font-weight:700;text-transform:uppercase;margin-top:12px}
.poster .divider{height:3px;background:var(--ink);margin:18px 0}
.poster .list{font-family:'Anton',sans-serif;font-size:17px;line-height:1.45;letter-spacing:.6px}

/* find us */
#find{background:var(--paper)}
.find-grid{display:grid;grid-template-columns:1.05fr .95fr;gap:32px;align-items:stretch}
.map{
  border:3px solid var(--ink);border-radius:22px;overflow:hidden;position:relative;
  box-shadow:var(--shadow);background:#DFF3E4;min-height:380px;
}
.map-inner{position:absolute;inset:0}
.map svg{width:100%;height:100%}
.map-pin{
  position:absolute;left:44%;top:47%;transform:translate(-50%,-100%);z-index:3;
}
.pin-drop{
  width:52px;height:52px;background:var(--red);border:3px solid var(--ink);border-radius:50% 50% 50% 0;
  transform:rotate(-45deg);display:grid;place-items:center;box-shadow:4px 5px 0 rgba(21,18,16,.28);
  animation:bob 2.6s ease-in-out infinite;
}
.pin-drop span{transform:rotate(45deg);color:#fff;font-family:'Anton',sans-serif;font-size:15px}
@keyframes bob{0%,100%{translate:0 0}50%{translate:0 -11px}}
.map-card{
  position:absolute;left:18px;bottom:18px;right:18px;background:var(--paper);border:3px solid var(--ink);
  border-radius:16px;padding:16px 18px;z-index:4;box-shadow:5px 5px 0 var(--ink);
}
.map-card b{font-family:'Anton',sans-serif;font-size:19px;display:block;margin-bottom:5px}
.map-card p{font-size:13.5px;line-height:1.45;opacity:.82}
.sched{display:flex;flex-direction:column;gap:12px}
.stop{
  border:3px solid var(--ink);border-radius:16px;padding:16px 18px;background:#fff;
  display:flex;align-items:center;gap:16px;box-shadow:4px 4px 0 var(--ink);
  transition:transform .18s ease,background .18s ease;
}
.stop:hover{transform:translateX(5px);background:var(--yellow)}
.stop.today{background:var(--red);color:#fff}
.stop .day{
  font-family:'Anton',sans-serif;font-size:16px;letter-spacing:1px;min-width:74px;text-transform:uppercase
}
.stop .where{font-weight:700;font-size:15px}
.stop .where small{display:block;font-weight:500;font-size:12.5px;opacity:.75;margin-top:3px;letter-spacing:.3px}
.stop .time{margin-left:auto;font-family:'Anton',sans-serif;font-size:15px;white-space:nowrap}
.note{
  margin-top:6px;font-size:12.5px;letter-spacing:.6px;opacity:.72;display:flex;gap:9px;align-items:center
}
.note b{background:var(--green);color:var(--ink);padding:3px 9px;border-radius:999px;font-size:10.5px;letter-spacing:1.4px}

/* catering */
#catering{background:var(--yellow);border-top:4px solid var(--ink);border-bottom:4px solid var(--ink);overflow:hidden}
.cater-grid{display:grid;grid-template-columns:1.1fr .9fr;gap:48px;align-items:center}
.cater-grid h2{font-size:clamp(40px,5.6vw,70px)}
.cater-grid h2 .stroke{-webkit-text-stroke:3px var(--ink);color:transparent}
.cater-grid p{font-size:17px;line-height:1.65;margin-top:18px;max-width:520px}
.chips{display:flex;flex-wrap:wrap;gap:10px;margin-top:24px}
.chip{
  background:var(--paper);border:3px solid var(--ink);border-radius:999px;padding:9px 16px;
  font-size:12px;font-weight:700;letter-spacing:1.4px;text-transform:uppercase;box-shadow:3px 3px 0 var(--ink)
}
.quote-\boxed{
  background:var(--ink);color:var(--paper);border-radius:22px;padding:32px;box-shadow:12px 12px 0 rgba(255,59,31,.85);
  transform:rotate(-1.4deg);
}
.quote-box .stars{color:var(--yellow);font-size:19px;letter-spacing:5px}
.quote-box blockquote{font-family:'Anton',sans-serif;font-size:clamp(21px,2.4vw,29px);line-height:1.22;margin:16px 0 18px}
.quote-box cite{font-style:normal;font-size:12.5px;letter-spacing:2.2px;text-transform:uppercase;opacity:.72}
.quote-more{margin-top:18px;display:flex;flex-direction:column;gap:12px}
.qm{border-top:1px solid rgba(255,255,255,.2);padding-top:12px;font-size:13.5px;line-height:1.5;opacity:.86}
.qm b{display:block;font-size:11px;letter-spacing:1.8px;text-transform:uppercase;color:var(--yellow);margin-bottom:5px}

/* signup / footer */
.signup{background:var(--red);color:#fff;padding:70px 0;border-bottom:4px solid var(--ink);text-align:center}
.signup h2{font-size:clamp(36px,5.4vw,66px)}
.signup p{max-width:520px;margin:16px auto 26px;font-size:17px;line-height:1.6;opacity:.94}
.form{display:flex;gap:12px;justify-content:center;flex-wrap:wrap;max-width:560px;margin-inline:auto}
.form input{
  flex:1;min-width:230px;padding:15px 18px;border:3px solid var(--ink);border-radius:999px;
  font-family:'Space Grotesk',sans-serif;font-size:15px;background:var(--paper);color:var(--ink)
}
.form input:focus{outline:4px solid var(--yellow)}
.form .btn{background:var(--ink);color:#fff;border-color:var(--ink);box-shadow:5px 5px 0 rgba(255,255,255,.35)}
.form-msg{margin-top:16px;font-size:14px;font-weight:700;letter-spacing:.6px;min-height:20px}

footer{background:var(--ink);color:var(--paper);padding:56px 0 30px}
.foot-grid{display:grid;grid-template-columns:1.4fr 1fr 1fr 1fr;gap:32px}
.foot-grid h4{font-family:'Anton',sans-serif;font-size:14px;letter-spacing:2.4px;text-transform:uppercase;margin-bottom:16px;color:var(--yellow)}
.foot-grid a,.foot-grid p{display:block;font-size:14px;line-height:1.9;opacity:.82;text-decoration:none}
.foot-grid a:hover{opacity:1;color:var(--yellow)}
.foot-logo b{font-family:'Anton',sans-serif;font-size:30px;display:block;letter-spacing:.8px}
.foot-logo small{font-size:11px;letter-spacing:3px;opacity:.66;text-transform:uppercase}
.foot-bottom{
  margin-top:40px;padding-top:20px;border-top:1px solid rgba(255,255,255,.18);
  display:flex;justify-content:space-between;gap:16px;flex-wrap:wrap;font-size:11.5px;letter-spacing:1.4px;opacity:.6;text-transform:uppercase
}

/* reveal */
.reveal{opacity:0;transform:translateY(28px);transition:opacity .7s ease,transform .7s cubic-bezier(.2,.8,.2,1)}
.reveal.in{opacity:1;transform:none}

/* ---------- responsive ---------- */
@media(max-width:1000px){
  .hero-grid{grid-template-columns:1fr;gap:10px;padding:42px 0 50px}
  .hero-art{min-height:340px;order:-1}
  .menu-grid{grid-template-columns:repeat(2,1fr)}
  .specials{grid-template-columns:repeat(2,1fr)}
  .story-grid,.find-grid,.cater-grid{grid-template-columns:1fr;gap:38px}
  .foot-grid{grid-template-columns:1fr 1fr}
}
@media(max-width:760px){
  .nav-links{
    position:absolute;top:100%;left:0;right:0;background:var(--paper);border-bottom:3px solid var(--ink);
    flex-direction:column;align-items:stretch;gap:0;padding:8px 20px 18px;display:none;
  }
  .nav-links.open{display:flex}
  .nav-links a{padding:13px 0;border-bottom:1px solid rgba(21,18,16,.12);font-size:14px}
  .nav-links .btn{margin-top:14px;width:100%}
  .menu-toggle{display:inline-block}
  .nav .btn.desk{display:none}
  .hero h1 .hl{box-shadow:5px 5px 0 var(--ink)}
  .hero-stats{gap:18px}
  .stat b{font-size:25px}
  .sec{padding:64px 0}
  .menu-grid{grid-template-columns:1fr}
  .specials{grid-template-columns:1fr}
  .badge{width:86px;height:86px;font-size:11px}
  .foot-grid{grid-template-columns:1fr}
}
@media(prefers-reduced-motion:reduce){
  *{animation-duration:.001ms !important;animation-iteration-count:1 !important;transition-duration:.001ms !important}
  .reveal{opacity:1;transform:none}
}
</style>
</head>
<body>

<!-- ============ TICKER ============ -->
<div class="ticker" aria-hidden="true">
  <div class="ticker-track" id="tickerTrack">
    <span>Seoul flavor, street speed <i></i> Bulgogi tacos from $4 <i></i> Now rolling through your neighborhood <i></i> Free kimchi on first order <i></i> Gochujang glaze on everything <i></i></span>
    <span>Seoul flavor, street speed <i></i> Bulgogi tacos from $4 <i></i> Now rolling through your neighborhood <i></i> Free kimchi on first order <i></i> Gochujang glaze on everything <i></i></span>
  </div>
</div>

<!-- ============ HEADER ============ -->
<header>
  <div class="wrap nav">
    <a class="logo" href="#top" aria-label="Kimchi Loco home">
      <div class="logo-mark">
        <svg width="26" height="26" viewBox="0 0 24 24" fill="none" aria-hidden="true">
          <path d="M3 15a9 9 0 0 1 18 0z" fill="#FFC220" stroke="#151210" stroke-width="2" stroke-linejoin="round"/>
          <path d="M3 15h18" stroke="#151210" stroke-width="2" stroke-linecap="round"/>
          <circle cx="9" cy="11" r="1.3" fill="#151210"/><circle cx="14.5" cy="10" r="1.3" fill="#151210"/>
        </svg>
      </div>
      <div class="logo-txt"><b>KIMCHI LOCO</b><small>Korean Tacos · On Wheels</small></div>
    </a>
    <nav class="nav-links" id="navLinks">
      <a href="#menu">Menu</a>
      <a href="#story">Our Story</a>
      <a href="#find">Find The Truck</a>
      <a href="#catering">Catering</a>
      <a href="#find" class="btn btn-red btn-sm">Get Directions</a>
    </nav>
    <a href="#find" class="btn btn-red btn-sm desk">📍 Find The Truck</a>
    <button class="menu-toggle" id="menuToggle" aria-label="Toggle menu">MENU</button>
  </div>
</header>

<!-- ============ HERO ============ -->
<section class="hero" id="top">
  <div class="wrap hero-grid">
    <div class="hero-copy">
      <div class="eyebrow"><span class="dot"></span> Open today · 11am – 9pm · Lot 22</div>
      <h1>
        <span class="out">Seoul</span>
        <span class="hl">Meets</span>
        <span class="out">The Street</span>
      </h1>
      <p class="lede">
        Crispy-edged <b>bulgogi</b>, fiery house kimchi and creamy gochujang crema, piled into warm corn tortillas.
        Korean taco chaos, rolled up and served hot — right from our little red truck.
      </p>
      <div class="hero-cta">
        <a href="#menu" class="btn btn-red">See The Menu</a>
        <a href="#find" class="btn">Where We're Parked →</a>
      </div>
      <div class="hero-stats">
        <div class="stat"><b>4.9★</b><span>From 2,300+ fans</span></div>
        <div class="stat"><b>7 MIN</b><span>Average wait</span></div>
        <div class="stat"><b>100%</b><span>House-made kimchi</span></div>
        <div class="stat"><b>6</b><span>Nights a week</span></div>
      </div>
    </div>

    <div class="hero-art">
      <div class="blob"></div>

      <svg class="spark s1" width="72" height="72" viewBox="0 0 24 24" fill="none" aria-hidden="true">
        <path d="M12 2l2.2 7.8L22 12l-7.8 2.2L12 22l-2.2-7.8L2 12l7.8-2.2z" fill="#FFC220" stroke="#151210" stroke-width="1.4"/>
      </svg>
      <svg class="spark s2" width="58" height="58" viewBox="0 0 24 24" fill="none" aria-hidden="true">
        <path d="M12 2l2.2 7.8L22 12l-7.8 2.2L12 22l-2.2-7.8L2 12l7.8-2.2z" fill="#2FBF71" stroke="#151210" stroke-width="1.4"/>
      </svg>

      <!-- hand-drawn taco -->
      <svg class="taco" viewBox="0 0 400 330" fill="none" aria-label="Illustration of a Korean taco">
        <ellipse cx="200" cy="292" rx="150" ry="18" fill="#151210" opacity=".16"/>
        <!-- shell -->
        <path d="M56 214c0-72 58-128 144-128s144 56 144 128c0 34-26 52-58 52H114c-32 0-58-18-58-52z" fill="#FFC220" stroke="#151210" stroke-width="9" stroke-linejoin="round"/>
        <!-- filling -->
        <path d="M78 190c10-46 52-76 122-76s112 30 122 76c-14 12-34 18-60 18H138c-26 0-46-6-60-18z" fill="#FF8FB1" stroke="#151210" stroke-width="8" stroke-linejoin="round"/>
        <!-- meat -->
        <path d="M96 186c14-34 48-56 104-56s90 22 104 56c-22 14-52 21-104 21s-82-7-104-21z" fill="#8B4A2B" stroke="#151210" stroke-width="8" stroke-linejoin="round"/>
        <!-- kimchi curls -->
        <path d="M132 142c10-16 28-14 32 2M186 128c12-14 30-10 32 6M242 136c10-16 28-12 30 4" stroke="#E22B12" stroke-width="10" stroke-linecap="round"/>
        <!-- scallions -->
        <path d="M110 168l24-12M158 152l22-10M212 148l24-10M258 162l22-12" stroke="#2FBF71" stroke-width="9" stroke-linecap="round"/>
        <!-- sesame -->
        <circle cx="140" cy="176" r="4.5" fill="#FFF3E2" stroke="#151210" stroke-width="2.6"/>
        <circle cx="196" cy="182" r="4.5" fill="#FFF3E2" stroke="#151210" stroke-width="2.6"/>
        <circle cx="252" cy="176" r="4.5" fill="#FFF3E2" stroke="#151210" stroke-width="2.6"/>
        <!-- shell speckles -->
        <path d="M110 244h30M170 252h44M238 240h30" stroke="#E2A312" stroke-width="7" stroke-linecap="round" opacity=".85"/>
      </svg>

      <div class="badge b1">KIMCHI<br>FERMENTED<br>IN-HOUSE</div>
      <div class="badge b2">EAT<br>WITH<br>YOUR HANDS</div>
    </div>
  </div>
</section>

<!-- ============ BAND ============ -->
<div class="band" aria-hidden="true">
  <div class="band-track">
    <h3>Korean Tacos <em>✦</em> Bulgogi Burritos <em>✦</em> Gochujang Fries <em>✦</em> Kimchi Quesadillas <em>✦</em> Korean Tacos <em>✦</em> Bulgogi Burritos <em>✦</em> Gochujang Fries <em>✦</em> Kimchi Quesadillas <em>✦</em></h3>
  </div>
</div>

<!-- ============ MENU ============ -->
<section class="sec" id="menu">
  <div class="wrap">
    <div class="sec-head reveal">
      <div class="kicker">The Goods</div>
      <h2>Small Menu.<br><span class="mark">Big Personality.</span></h2>
      <p>Everything is made to order and finished with our house-fermented kimchi. Mix, match, and don't be shy with the sauce.</p>
    </div>

    <div class="menu-grid">
      <!-- card 1 -->
      <article class="card reveal">
        <div class="card-top" style="background:#FFD9E4">
          <div class="tag hot">🔥 Best Seller</div>
          <svg viewBox="0 0 220 140" fill="none" aria-hidden="true">
            <path d="M34 96c0-34 34-58 76-58s76 24 76 58c0 16-14 26-32 26H66c-18 0-32-10-32-26z" fill="#FFC220" stroke="#151210" stroke-width="6"/>
            <path d="M46 88c8-22 30-34 64-34s56 12 64 34c-12 8-32 12-64 12s-52-4-64-12z" fill="#8B4A2B" stroke="#151210" stroke-width="5"/>
            <path d="M70 62c8-10 18-8 20 2M108 52c8-9 18-6 20 4M144 62c8-10 18-8 20 2" stroke="#E22B12" stroke-width="7" stroke-linecap="round"/>
            <path d="M58 76l16-8M92 66l16-8M130 64l16-8" stroke="#2FBF71" stroke-width="6" stroke-linecap="round"/>
          </svg>
        </div>
        <div class="card-body">
          <h3>Bulgogi Street Taco</h3>
          <p>24-hour marinated ribeye, griddled to crispy edges. Topped with napa kimchi, sesame crema, scallion.</p>
          <div class="card-foot">
            <div class="price">$4.75</div>
            <div class="heat"><i></i><i class="off"></i><i class="off"></i></div>
          </div>
        </div>
      </article>

      <!-- card 2 -->
      <article class="card reveal">
        <div class="card-top" style="background:#FFE6A8">
          <div class="tag">Fan Favorite</div>
          <svg viewBox="0 0 220 140" fill="none" aria-hidden="true">
            <rect x="26" y="44" width="168" height="58" rx="29" fill="#FFC220" stroke="#151210" stroke-width="6"/>
            <path d="M42 72c22-16 44 16 66 0s44 16 66 0" stroke="#8B4A2B" stroke-width="10" stroke-linecap="round"/>
            <path d="M56 60c10-8 18-6 22 2M112 56c10-8 18-6 22 2M158 62c8-8 16-6 20 2" stroke="#E22B12" stroke-width="6" stroke-linecap="round"/>
            <path d="M50 88h22M92 90h30M142 88h24" stroke="#2FBF71" stroke-width="6" stroke-linecap="round"/>
          </svg>
        </div>
        <div class="card-body">
          <h3>Gochujang Glaze Taco</h3>
          <p>Slow-braised pork shoulder lacquered in sweet-heat gochujang, pickled daikon, crispy shallot.</p>
          <div class="card-foot">
            <div class="price">$4.95</div>
            <div class="heat"><i></i><i></i><i></i></div>
          </div>
        </div>
      </article>

      <!-- card 3 -->
      <article class="card reveal">
        <div class="card-top" style="background:#CDEFD8">
          <div class="tag">Veggie Hero</div>
          <svg viewBox="0 0 220 140" fill="none" aria-hidden="true">
            <path d="M34 96c0-34 34-58 76-58s76 24 76 58c0 16-14 26-32 26H66c-18 0-32-10-32-26z" fill="#FFC220" stroke="#151210" stroke-width="6"/>
            <path d="M46 88c8-22 30-34 64-34s56 12 64 34c-12 8-32 12-64 12s-52-4-64-12z" fill="#2FBF71" stroke="#151210" stroke-width="5"/>
            <circle cx="76" cy="74" r="9" fill="#FF3B1F" stroke="#151210" stroke-width="4"/>
            <circle cx="112" cy="68" r="9" fill="#FF3B1F" stroke="#151210" stroke-width="4"/>
            <circle cx="146" cy="76" r="9" fill="#FF3B1F" stroke="#151210" stroke-width="4"/>
            <path d="M62 92l22-8M102 92l24-8M144 92l20-8" stroke="#151210" stroke-width="4" stroke-linecap="round" opacity=".55"/>
          </svg>
        </div>
        <div class="card-body">
          <h3>Crispy Tofu Kimchi Taco</h3>
          <p>Golden sesame-crusted tofu, spicy vegan kimchi, avocado-lime crema, toasted pepitas.</p>
          <div class="card-foot">
            <div class="price">$4.50</div>
            <div class="heat"><i></i><i></i><i class="off"></i></div>
          </div>
        </div>
      </article>

      <!-- card 4 -->
      <article class="card reveal">
        <div class="card-top" style="background:#FFD2C6">
          <div class="tag">Loaded</div>
          <svg viewBox="0 0 220 140" fill="none" aria-hidden="true">
            <rect x="42" y="38" width="136" height="66" rx="33" fill="#FFF3E2" stroke="#151210" stroke-width="6"/>
            <path d="M60 66c18-12 36 12 54 0s36 12 54 0" stroke="#8B4A2B" stroke-width="9" stroke-linecap="round"/>
            <path d="M72 88h76" stroke="#FFC220" stroke-width="9" stroke-linecap="round"/>
            <path d="M84 48c8-6 14-4 18 2M126 48c8-6 14-4 18 2" stroke="#2FBF71" stroke-width="6" stroke-linecap="round"/>
            <circle cx="104" cy="78" r="6" fill="#FF3B1F" stroke="#151210" stroke-width="3.5"/>
          </svg>
        </div>
        <div class="card-body">
          <h3>Kimchi Quesadilla</h3>
          <p>Oaxaca cheese, caramelized kimchi, bulgogi or mushrooms, griddled crisp. Comes with gochujang ranch.</p>
          <div class="card-foot">
            <div class="price">$9.50</div>
            <div class="heat"><i></i><i class="off"></i><i class="off"></i></div>
          </div>
        </div>
      </article>

      <!-- card 5 -->
      <article class="card reveal">
        <div class="card-top" style="background:#FFEFD1">
          <div class="tag">Shareable</div>
          <svg viewBox="0 0 220 140" fill="none" aria-hidden="true">
            <path d="M40 96h140c-6-30-30-52-70-52s-64 22-70 52z" fill="#FF3B1F" stroke="#151210" stroke-width="6" stroke-linejoin="round"/>
            <path d="M66 52l10-22M110 44l4-26M154 52l14-20" stroke="#2FBF71" stroke-width="8" stroke-linecap="round"/>
            <path d="M64 78l16-8M104 70l16-8M144 78l16-8" stroke="#FFF3E2" stroke-width="5" stroke-linecap="round"/>
            <path d="M28 104h164" stroke="#151210" stroke-width="6" stroke-linecap="round"/>
          </svg>
        </div>
        <div class="card-body">
          <h3>Loco Fries</h3>
          <p>Crispy smashed fries, bulgogi, kimchi, molten cheese sauce, spicy mayo, sesame, scallion confetti.</p>
          <div class="card-foot">
            <div class="price">$11.00</div>
            <div class="heat"><i></i><i></i><i></i></div>
          </div>
        </div>
      </article>

      <!-- card 6 -->
      <article class="card reveal">
        <div class="card-top" style="background:#E4D9FF">
          <div class="tag">Sip</div>
          <svg viewBox="0 0 220 140" fill="none" aria-hidden="true">
            <path d="M74 38h72l-10 70H84z" fill="#FF8FB1" stroke="#151210" stroke-width="6" stroke-linejoin="round"/>
            <path d="M78 58h64" stroke="#151210" stroke-width="5" stroke-linecap="round"/>
            <path d="M118 38V16h26" stroke="#151210" stroke-width="6" stroke-linecap="round" stroke-linejoin="round"/>
            <circle cx="98" cy="80" r="7" fill="#FFF3E2" stroke="#151210" stroke-width="4"/>
            <circle cx="124" cy="88" r="7" fill="#FFF3E2" stroke="#151210" stroke-width="4"/>
          </svg>
        </div>
        <div class="card-body">
          <h3>Yuzu Lime Agua Fresca</h3>
          <p>Bright, icy, tart-sweet. The perfect fire extinguisher for a gochujang-glazed afternoon.</p>
          <div class="card-foot">
            <div class="price">$5.00</div>
            <div class="heat"><i class="off"></i><i class="off"></i><i class="off"></i></div>
          </div>
        </div>
      </article>
    </div>

    <div class="specials">
      <div class="sp reveal"><b>🌮 Taco Tuesday</b><p>Any 3 tacos + a drink for $13. Every Tuesday, all day.</p></div>
      <div class="sp reveal"><b>🌶️ Loco Challenge</b><p>Finish the 4-chili taco in 5 minutes. It's free. You'll cry.</p></div>
      <div class="sp reveal"><b>🧀 Kimchi Cheese Dip</b><p>Free with any burrito, 5–7pm. Gooey, funky, unreal.</p></div>
      <div class="sp reveal"><b>🥑 Plant-Based</b><p>Vegan kimchi and tofu options on every single day's menu.</p></div>
    </div>
  </div>
</section>

<!-- ============ STORY ============ -->
<section class="sec" id="story">
  <div class="wrap story-grid">
    <div class="reveal">
      <div class="kicker">Our Story</div>
      <h2>Grandma's Recipe.<br><em>Street Food Nerve.</em></h2>
      <p>
        Kimchi Loco started with a jar of my grandmother's kimchi riding shotgun in a beat-up step van.
        We took the flavors of a Seoul night market and dropped them into a taco — because some rules
        are worth breaking, especially the ones about what goes in a tortilla.
      </p>
      <ul class="story-list">
        <li><span class="chk">✓</span><span><b>Kimchi fermented fresh every week</b> in our commissary kitchen — never from a jar.</span></li>
        <li><span class="chk">✓</span><span><b>Marinated overnight</b> in pear, soy, garlic and toasted sesame. No shortcuts.</span></li>
        <li><span class="chk">✓</span><span><b>Local produce, small farms,</b> real people behind every ingredient we can get.</span></li>
        <li><span class="chk">✓</span><span><b>Served in compostable everything</b> because the planet eats here too.</span></li>
      </ul>
    </div>

    <div class="poster-wrap reveal">
      <div class="poster">
        <div class="tiny">Est. 2024 · Los Angeles</div>
        <h3>Kimchi<br>Loco<br>Taco Co.</h3>
        <div class="divider"></div>
        <div class="list">
          BULGOGI<br>
          GOCHUJANG<br>
          KIMCHI<br>
          SESAME<br>
          CHAOS
        </div>
        <div class="stamp">MADE<br>WITH<br>SEOUL</div>
      </div>
    </div>
  </div>
</section>

<!-- ============ FIND US ============ -->
<section class="sec" id="find">
  <div class="wrap">
    <div class="sec-head reveal">
      <div class="kicker">Find The Truck</div>
      <h2>We're <span class="mark">Somewhere</span> Nearby.</h2>
      <p>Follow the smell of toasted sesame. Here's where the little red truck parks this week — rain or shine.</p>
    </div>

    <div class="find-grid">
      <div class="map reveal">
        <div class="map-inner">
          <svg viewBox="0 0 600 420" preserveAspectRatio="xMidYMid slice" aria-hidden="true">
            <rect width="600" height="420" fill="#E6F4E9"/>
            <path d="M0 90h600M0 210h600M0 330h600" stroke="#CBDFD0" stroke-width="26"/>
            <path d="M120 0v420M300 0v420M470 0v420" stroke="#CBDFD0" stroke-width="26"/>
            <path d="M0 150c90 0 130 40 220 40s150-50 240-50 140 40 140 40" stroke="#A8D8E8" stroke-width="22" fill="none"/>
            <rect x="150" y="240" width="110" height="70" rx="8" fill="#CFE7D4" stroke="#B4D5BC" stroke-width="3"/>
            <rect x="330" y="40" width="110" height="90" rx="8" fill="#CFE7D4" stroke="#B4D5BC" stroke-width="3"/>
            <rect x="380" y="250" width="140" height="90" rx="8" fill="#CFE7D4" stroke="#B4D5BC" stroke-width="3"/>
            <circle cx="500" cy="130" r="38" fill="#BFE3C8" stroke="#A5CFAF" stroke-width="3"/>
            <path d="M40 380h520" stroke="#CBDFD0" stroke-width="14"/>
            <text x="160" y="120" font-family="Space Grotesk" font-size="14" fill="#7C9A85" letter-spacing="2">GRAND AVE</text>
            <text x="330" y="380" font-family="Space Grotesk" font-size="14" fill="#7C9A85" letter-spacing="2">8TH STREET</text>
          </svg>
        </div>
        <div class="map-pin">
          <div class="pin-drop"><span>KL</span></div>
        </div>
        <div class="map-card">
          <b>📍 LOT 22 · Grand Ave &amp; 8th</b>
          <p>Parked by the old mural wall, right next to the bike shop. Look for the red awning and the line of happy people.</p>
        </div>
      </div>

      <div class="sched">
        <div class="stop today">
          <div class="day">Mon</div>
          <div class="where">Lot 22 · Grand Ave<small>Arts District · Lunch + Dinner</small></div>
          <div class="time">11–9</div>
        </div>
        <div class="stop">
          <div class="day">Tue</div>
          <div class="where">Echo Park Night Market<small>Taco Tuesday takeover</small></div>
          <div class="time">4–10</div>
        </div>
        <div class="stop">
          <div class="day">Wed</div>
          <div class="where">Silver Lake Reservoir<small>By the north gate</small></div>
          <div class="time">11–8</div>
        </div>
        <div class="stop">
          <div class="day">Thu</div>
          <div class="where">DTLA · 7th &amp; Flower<small>Office lunch rush</small></div>
          <div class="time">11–3</div>
        </div>
        <div class="stop">
          <div class="day">Fri</div>
          <div class="where">Highland Park Brewery Row<small>Late night, cold drinks</small></div>
          <div class="time">5–11</div>
        </div>
        <div class="stop">
          <div class="day">Sat</div>
          <div class="where">Smorgasburg LA<small>Row D, Booth 12</small></div>
          <div class="time">10–6</div>
        </div>
        <div class="note"><b>Live updates</b> Schedule shifts with the weather — check our Instagram stories for same-day moves.</div>
      </div>
    </div>
  </div>
</section>

<!-- ============ CATERING ============ -->
<section class="sec" id="catering">
  <div class="wrap cater-grid">
    <div class="reveal">
      <div class="kicker" style="color:var(--red)">Feed A Crowd</div>
      <h2>Book The Truck.<br><span class="stroke">Bribe Your Friends.</span></h2>
      <p>
        Weddings, office parties, birthdays, block parties, film sets, questionable life decisions —
        we roll up, set up, and serve a taco line so good your guests will forget to leave.
      </p>
      <div class="chips">
        <div class="chip">Weddings</div>
        <div class="chip">Office Lunches</div>
        <div class="chip">Birthdays</div>
        <div class="chip">Film Sets</div>
        <div class="chip">Block Parties</div>
        <div class="chip">25–500 Guests</div>
      </div>
      <div class="hero-cta">
        <a href="#signup" class="btn btn-red">Request A Quote</a>
        <a href="#menu" class="btn" style="background:var(--paper)">Download Menu PDF</a>
      </div>
    </div>

    <div class="reveal">
      <div class="quote-box">
        <div class="stars">★★★★★</div>
        <blockquote>"We hired Kimchi Loco for our wedding and honestly, people talked about the tacos more than the vows."</blockquote>
        <cite>— Priya &amp; Dan, Silver Lake</cite>
        <div class="quote-more">
          <div class="qm"><b>Marcus T. · Yelp</b>"That gochujang glaze should be illegal. I've been back four times this month."</div>
          <div class="qm"><b>Jenna R. · Google</b>"Fastest food truck line I've ever been in, and the kimchi quesadilla is worth the drive."</div>
        </div>
      </div>
    </div>
  </div>
</section>

<!-- ============ SIGNUP ============ -->
<section class="signup" id="signup">
  <div class="wrap">
    <h2 class="reveal">Get The Loco List</h2>
    <p class="reveal">Drop your email and we'll tell you where the truck lands next, plus secret menu drops and free-taco alerts.</p>
    <form class="form reveal" id="signupForm" novalidate>
      <input type="email" id="emailInput" placeholder="you@example.com" aria-label="Email address" required>
      <button type="submit" class="btn">Sign Me Up</button>
    </form>
    <div class="form-msg" id="formMsg" role="status" aria-live="polite"></div>
  </div>
</section>

<!-- ============ FOOTER ============ -->
<footer>
  <div class="wrap">
    <div class="foot-grid">
      <div class="foot-logo">
        <b>KIMCHI LOCO</b>
        <small>Korean Tacos · On Wheels</small>
        <p style="margin-top:16px;max-width:260px">Seoul flavor, street speed. Serving Los Angeles one glorious mess at a time.</p>
      </div>
      <div>
        <h4>Explore</h4>
        <a href="#menu">Menu</a>
        <a href="#story">Our Story</a>
        <a href="#find">Find The Truck</a>
        <a href="#catering">Catering</a>
      </div>
      <div>
        <h4>Say Hi</h4>
        <a href="#signup">Instagram</a>
        <a href="#signup">TikTok</a>
        <a href="#signup">hello@kimchilocotruck.com</a>
        <a href="#signup">(213) 555-0187</a>
      </div>
      <div>
        <h4>Hours</h4>
        <p>Mon – Thu · 11am – 9pm</p>
        <p>Fri – Sat · 11am – 11pm</p>
        <p>Sun · 11am – 7pm</p>
        <p style="margin-top:10px;opacity:.6">Closed on rainy Tuesdays.</p>
      </div>
    </div>
    <div class="foot-bottom">
      <span>© 2024 Kimchi Loco Taco Co. All rights reserved.</span>
      <span>Made with gochujang in Los Angeles, CA</span>
    </div>
  </div>
</footer>

<script>
(function(){
  "use strict";

  /* ---- mobile menu ---- */
  var toggle = document.getElementById('menuToggle');
  var navLinks = document.getElementById('navLinks');
  if (toggle && navLinks) {
    toggle.addEventListener('click', function(){
      navLinks.classList.toggle('open');
      toggle.textContent = navLinks.classList.contains('open') ? 'CLOSE' : 'MENU';
    });
    navLinks.addEventListener('click', function(e){
      if (e.target.tagName === 'A') {
        navLinks.classList.remove('open');
        toggle.textContent = 'MENU';
      }
    });
  }

  /* ---- scroll reveal ---- */
  var revealEls = document.querySelectorAll('.reveal');
  if ('IntersectionObserver' in window) {
    var io = new IntersectionObserver(function(entries){
      entries.forEach(function(entry, i){
        if (entry.isIntersecting) {
          var el = entry.target;
          setTimeout(function(){ el.classList.add('in'); }, Math.min(i * 90, 320));
          io.unobserve(el);
        }
      });
    }, { threshold: 0.12, rootMargin: '0px 0px -60px 0px' });
    revealEls.forEach(function(el){ io.observe(el); });
  } else {
    revealEls.forEach(function(el){ el.classList.add('in'); });
  }

  /* ---- signup form (no network) ---- */
  var form = document.getElementById('signupForm');
  var input = document.getElementById('emailInput');
  var msg = document.getElementById('formMsg');
  if (form && input && msg) {
    form.addEventListener('submit', function(e){
      e.preventDefault();
      var val = (input.value || '').trim();
      var ok = /^[^\s@]+@[^\s@]+\.[^\s@]+$/.test(val);
      if (!ok) {
        msg.textContent = 'Hmm, that email looks a little spicy. Try again?';
        msg.style.color = '#FFF3E2';
        input.focus();
        return;
      }
      msg.textContent = "You're on the list! 🌮 Watch your inbox for taco intel.";
      msg.style.color = '#FFC220';
      form.reset();
    });
  }

  /* ---- subtle hero parallax (pointer only, no scroll jank) ---- */
  var art = document.querySelector('.hero-art');
  if (art && window.matchMedia('(pointer:fine)').matches) {
    var hero = document.querySelector('.hero');
    hero.addEventListener('mousemove', function(e){
      var r = hero.getBoundingClientRect();
      var x = (e.clientX - r.left) / r.width - 0.5;
      var y = (e.clientY - r.top) / r.height - 0.5;
      art.style.transform = 'translate(' + (x * 14).toFixed(2) + 'px,' + (y * 12).toFixed(2) + 'px)';
    });
    hero.addEventListener('mouseleave', function(){
      art.style.transform = 'translate(0,0)';
    });
    art.style.transition = 'transform .35s cubic-bezier(.2,.8,.2,1)';
  }
})();
</script>
</body>
</html>