/* ============================================================
   Paul Jepsen — Final Shift Countdown.  Claycomo F-150 assembly line.
   Steel · hazard stripes · Ford blue · safety yellow · amber LED.
   ============================================================ */
:root{
  --steel0:#0a0f18; --steel1:#131b27; --steel2:#1e2937;
  --steel2b:#252f3e; --steel3:#36435a;
  --ford:#1c3f94; --ford2:#2e6fd6; --ink:#eef3fa; --muted:#9aabc4;
  --yellow:#ffd400; --black:#0b0d11; --spark:#ff7a18; --led:#ffb000; --green:#46ff7a;
  --rivet:#46556b; --red:#e23b2e;
  --maxw:1080px;
  --hazard: repeating-linear-gradient(45deg, var(--yellow) 0 22px, #15171c 22px 44px);
}
*{box-sizing:border-box}
html,body{margin:0;padding:0}
body{
  font-family:'Oswald',system-ui,sans-serif; color:var(--ink);
  background:
    radial-gradient(1100px 700px at 10% -10%, rgba(46,111,214,.18), transparent 60%),
    radial-gradient(900px 700px at 100% 0%, rgba(255,122,24,.10), transparent 55%),
    linear-gradient(170deg, var(--steel0), var(--steel1) 55%, #0c121c),
    repeating-linear-gradient(135deg, rgba(255,255,255,.018) 0 2px, transparent 2px 7px);
  background-attachment:fixed; min-height:100dvh; overflow-x:hidden; -webkit-font-smoothing:antialiased;
}
canvas#bg,canvas#fx{position:fixed; inset:0; width:100vw; height:100dvh; z-index:0; pointer-events:none}
canvas#fx{z-index:60}
main{position:relative; z-index:10; max-width:var(--maxw); margin:0 auto; padding:0 18px 90px}

/* hazard stripes */
.hazard{position:fixed; left:0; right:0; height:14px; z-index:40; background:var(--hazard);
  box-shadow:0 0 18px rgba(0,0,0,.6)}
.hazard-top{top:0} .hazard-bottom{bottom:0}

/* top bar */
.topbar{position:relative; z-index:20; max-width:var(--maxw); margin:0 auto;
  display:flex; align-items:center; justify-content:space-between; padding:26px 18px 0; gap:10px}
.brand{font-weight:700; letter-spacing:.18em; font-size:.72rem; color:var(--muted); text-transform:uppercase}
.brand .bolt{color:var(--yellow)}
.controls{display:flex; gap:8px; flex:0 0 auto}
.chip{font-family:'Oswald',sans-serif; font-weight:600; font-size:.74rem; letter-spacing:.05em; color:var(--ink);
  background:var(--steel2); border:1px solid var(--steel3); border-radius:6px; padding:8px 12px; cursor:pointer; transition:.2s}
.chip:hover{border-color:var(--yellow); box-shadow:0 0 14px rgba(255,212,0,.3)}
.chip[aria-pressed="true"]{border-color:var(--green); color:var(--green)}

/* ---------- HERO + BADGE ---------- */
.hero{text-align:center; padding:30px 0 6px}
.eyebrow{display:inline-block; font-weight:700; letter-spacing:.25em; font-size:.85rem; color:var(--black);
  background:var(--yellow); padding:7px 18px; border-radius:4px; text-transform:uppercase;
  box-shadow:0 0 24px rgba(255,212,0,.4); animation:flash 2.4s ease infinite}
@keyframes flash{50%{filter:brightness(.78)}}

.badge{max-width:660px; margin:26px auto 0; text-align:left;
  background:linear-gradient(160deg, var(--steel2b), var(--steel1)); border:2px solid var(--steel3);
  border-radius:12px; overflow:hidden; position:relative;
  box-shadow:0 26px 60px rgba(0,0,0,.55), inset 0 1px 0 rgba(255,255,255,.06)}
.badge::before,.badge::after{content:""; position:absolute; width:9px; height:9px; border-radius:50%;
  background:radial-gradient(circle at 35% 30%, #8595ad, var(--rivet)); box-shadow:0 1px 2px rgba(0,0,0,.6)}
.badge::before{top:10px; left:10px} .badge::after{top:10px; right:10px}
.badge-head{display:flex; align-items:center; gap:12px; padding:12px 18px;
  background:linear-gradient(180deg,var(--ford2),var(--ford)); border-bottom:3px solid var(--yellow)}
.ford{font-family:'Anton',sans-serif; font-style:italic; font-size:1.5rem; color:#fff; letter-spacing:.02em;
  text-shadow:0 1px 0 rgba(0,0,0,.4)}
.plant{font-size:.66rem; letter-spacing:.16em; color:#dbe6ff; font-weight:600}
.badge-body{display:flex; gap:18px; padding:18px}
.photo-frame{position:relative; flex:0 0 auto; width:168px; border:3px solid var(--steel3); border-radius:8px;
  overflow:hidden; background:#000; box-shadow:0 0 0 2px var(--yellow), 0 10px 24px rgba(0,0,0,.5)}
.photo-frame img{display:block; width:168px; height:210px; object-fit:cover; object-position:50% 22%; filter:contrast(1.05) saturate(1.05)}
.photo-scan{position:absolute; inset:0; background:linear-gradient(180deg, transparent, rgba(70,255,122,.16), transparent);
  height:36px; animation:scan 3.2s linear infinite}
@keyframes scan{0%{transform:translateY(-40px)}100%{transform:translateY(230px)}}
.badge-info{flex:1; min-width:0}
.bi-name{font-family:'Anton',sans-serif; font-size:clamp(1.8rem,6vw,2.6rem); line-height:1; letter-spacing:.01em; color:#fff}
.bi-role{color:var(--yellow); font-weight:700; letter-spacing:.12em; font-size:.8rem; margin:4px 0 12px; text-transform:uppercase}
.bi-fields{margin:0; display:grid; gap:7px}
.bi-fields>div{display:flex; gap:8px; align-items:baseline; border-bottom:1px dashed var(--steel3); padding-bottom:5px}
.bi-fields dt{font-family:'Share Tech Mono',monospace; font-size:.64rem; letter-spacing:.1em; color:var(--muted); width:64px; flex:0 0 auto}
.bi-fields dd{margin:0; font-weight:600; font-size:.84rem; color:var(--ink)}
.bi-fields dd.free{color:var(--green); text-shadow:0 0 10px rgba(70,255,122,.5)}
.badge-foot{display:flex; align-items:center; justify-content:space-between; padding:10px 18px;
  background:var(--black); border-top:1px solid var(--steel3)}
.barcode{height:26px; flex:1; margin-right:14px;
  background:repeating-linear-gradient(90deg,#cfd8e6 0 2px, transparent 2px 4px, #cfd8e6 4px 5px, transparent 5px 9px)}
.badge-id{font-family:'Share Tech Mono',monospace; font-size:.7rem; color:var(--muted); white-space:nowrap}

.title{font-family:'Anton',sans-serif; line-height:.84; margin:30px 0 0; letter-spacing:.01em;
  font-size:clamp(3.4rem,16vw,9rem); text-transform:uppercase}
.title .line1{display:block; color:#fff; text-shadow:0 4px 0 #0a0d13, 0 0 40px rgba(46,111,214,.5)}
.title .line2{display:block; color:var(--yellow);
  -webkit-text-stroke:2px #0a0d13; text-shadow:0 0 40px rgba(255,212,0,.55)}
.subtitle{font-size:clamp(1.1rem,4vw,1.6rem); color:var(--muted); margin:.3em 0 0; letter-spacing:.2em; text-transform:uppercase; font-weight:500}

/* ---------- LED PRODUCTION COUNTER ---------- */
.counter-wrap{margin:38px auto 0; max-width:760px; text-align:center}
.counter-label{font-family:'Share Tech Mono',monospace; letter-spacing:.18em; font-size:.82rem; color:var(--yellow);
  margin-bottom:14px; text-shadow:0 0 12px rgba(255,212,0,.4)}
.counter{display:flex; gap:clamp(8px,2vw,18px); justify-content:center}
.unit{flex:1 1 0; max-width:180px; text-align:center}
.led{font-family:'Share Tech Mono',monospace; font-weight:400; font-variant-numeric:tabular-nums;
  font-size:clamp(2.4rem,10vw,5.6rem); line-height:1; color:var(--led); padding:14px 6px; border-radius:10px;
  background:linear-gradient(180deg,#05070a,#0c1118); border:2px solid #2a3340;
  box-shadow:inset 0 0 26px rgba(255,176,0,.18), inset 0 2px 8px rgba(0,0,0,.8), 0 8px 24px rgba(0,0,0,.5);
  text-shadow:0 0 8px rgba(255,176,0,.85), 0 0 22px rgba(255,122,24,.5)}
.lab{margin-top:9px; font-family:'Share Tech Mono',monospace; font-size:.66rem; letter-spacing:.22em;
  text-transform:uppercase; color:var(--muted)}
.led.tick{animation:flip .45s ease}
@keyframes flip{0%{transform:translateY(-5px) scaleY(1.08); color:#fff; text-shadow:0 0 18px #fff}100%{transform:none}}

.cta-row{margin:26px 0 0}
.btn-whistle{font-family:'Anton',sans-serif; letter-spacing:.04em; font-size:1.15rem; color:var(--black);
  background:linear-gradient(180deg,#ffe24d,var(--yellow)); border:0; border-bottom:4px solid #b89400; border-radius:10px;
  padding:15px 30px; cursor:pointer; text-transform:uppercase; box-shadow:0 0 28px rgba(255,212,0,.45); transition:.12s}
.btn-whistle:hover{transform:translateY(-2px)} .btn-whistle:active{transform:translateY(2px); border-bottom-width:1px}

/* ---------- ASSEMBLY LINE conveyor ---------- */
.line-wrap{margin:42px 0 0; position:relative; height:108px; overflow:hidden;
  background:linear-gradient(180deg,#0b1019,#0e151f); border-radius:10px; border:1px solid var(--steel3)}
.line-rail{position:absolute; left:0; right:0; height:8px; background:var(--hazard); opacity:.85; z-index:3}
.line-rail:first-child{top:0} .line-rail:last-child{bottom:0}
/* the steel belt the trucks ride on */
.conveyor{position:absolute; left:0; right:0; top:12px; bottom:20px;
  background:linear-gradient(180deg,#1a2330,#0e141d 70%); border-top:2px solid #2b3442; border-bottom:2px solid #313c4e}
/* roller cylinders under the belt, scrolling = the line is running */
.conveyor::after{content:""; position:absolute; left:0; right:0; bottom:-18px; height:18px; z-index:2;
  background:radial-gradient(circle at 12px 7px, #4a586e 0 5px, #222c3a 6px 11px, transparent 12px);
  background-size:24px 18px; animation:belt 1.1s linear infinite}
@keyframes belt{from{background-position:0 0}to{background-position:24px 0}}
.truck{position:absolute; bottom:6px; left:-14%; z-index:2;
  filter:drop-shadow(0 5px 5px rgba(0,0,0,.55)); will-change:left;
  animation-name:roll; animation-timing-function:linear; animation-iteration-count:infinite}
@keyframes roll{from{left:-14%}to{left:114%}}

/* ---------- PROGRESS ---------- */
.progress-wrap{max-width:760px; margin:40px auto 0}
.progress-head{display:flex; justify-content:space-between; font-family:'Share Tech Mono',monospace;
  font-size:.78rem; letter-spacing:.14em; color:var(--muted); margin-bottom:10px}
.progress-head span:last-child{color:var(--yellow)}
.progress-track{position:relative; height:24px; border-radius:6px; background:#0c1119; border:1px solid var(--steel3); overflow:visible}
.progress-fill{height:100%; width:0%; border-radius:5px;
  background:repeating-linear-gradient(45deg,var(--ford2) 0 14px,var(--ford) 14px 28px);
  box-shadow:0 0 16px rgba(46,111,214,.6); transition:width 1.2s cubic-bezier(.2,.8,.2,1)}
.progress-truck{position:absolute; top:50%; left:0; transform:translate(-50%,-58%); line-height:0;
  transition:left 1.2s cubic-bezier(.2,.8,.2,1); filter:drop-shadow(0 3px 4px rgba(0,0,0,.6))}
.ptruck{width:40px; height:auto; display:block}

/* ---------- STATS ---------- */
.stats{display:grid; grid-template-columns:repeat(auto-fit,minmax(150px,1fr)); gap:13px; margin:46px auto; max-width:940px}
.stat{background:linear-gradient(160deg,var(--steel2),var(--steel1)); border:1px solid var(--steel3); border-radius:10px;
  padding:18px 14px; text-align:center; position:relative; overflow:hidden; transition:.2s}
.stat::before{content:""; position:absolute; top:0; left:0; right:0; height:3px; background:var(--hazard); opacity:.7}
.stat:hover{transform:translateY(-3px); border-color:var(--yellow)}
.stat .emoji{font-size:1.7rem}
.stat .big{font-family:'Anton',sans-serif; font-size:2rem; color:var(--yellow); margin:.06em 0; font-variant-numeric:tabular-nums;
  text-shadow:0 0 16px rgba(255,212,0,.35)}
.stat .cap{font-size:.78rem; color:var(--muted); line-height:1.3; text-transform:uppercase; letter-spacing:.04em}

/* ---------- TIME CARD guestbook ---------- */
.wishes{max-width:760px; margin:60px auto 0}
.wishes-title{font-family:'Anton',sans-serif; font-size:clamp(1.7rem,6vw,2.6rem); text-align:center; margin:0; text-transform:uppercase; color:#fff}
.wishes-sub{text-align:center; color:var(--muted); margin:.4em 0 1.3em; letter-spacing:.04em}
.wishes-sub span{color:var(--green)}
.wish-form{background:linear-gradient(160deg,var(--steel2),var(--steel1)); border:1px solid var(--steel3); border-radius:10px; padding:18px}
.wish-name,.wish-msg{width:100%; font-family:'Oswald',sans-serif; color:var(--ink); background:#0b1019;
  border:1px solid var(--steel3); border-radius:7px; padding:11px 13px; font-size:1rem; margin-bottom:10px; resize:vertical}
.wish-name:focus,.wish-msg:focus{outline:none; border-color:var(--yellow); box-shadow:0 0 0 3px rgba(255,212,0,.18)}
.wish-msg{min-height:80px}
.wish-actions{display:flex; align-items:center; justify-content:space-between}
.wish-counter{font-family:'Share Tech Mono',monospace; font-size:.74rem; color:var(--muted)}
.btn-post{font-family:'Anton',sans-serif; letter-spacing:.04em; color:var(--black); background:var(--yellow);
  border:0; border-bottom:3px solid #b89400; border-radius:8px; padding:11px 22px; cursor:pointer; text-transform:uppercase}
.btn-post:hover{filter:brightness(1.05)} .btn-post:disabled{opacity:.5; cursor:default}
.wish-status{font-family:'Share Tech Mono',monospace; font-size:.8rem; margin-top:8px; min-height:1.1em; color:var(--green)}
.wish-status.err{color:var(--spark)}
.wish-wall{margin-top:22px; columns:2; column-gap:14px}
@media (max-width:560px){.wish-wall{columns:1}}
.wish-card{break-inside:avoid; margin:0 0 14px; padding:14px 16px; border-radius:10px; animation:rise .5s ease both;
  background:linear-gradient(160deg,#1b2433,#141b27); border:1px solid var(--steel3); border-left:4px solid var(--yellow)}
@keyframes rise{from{opacity:0; transform:translateY(12px)}to{opacity:1; transform:none}}
.wish-card .msg{font-size:1rem; line-height:1.45}
.wish-card .who{margin-top:8px; font-size:.82rem; color:var(--yellow); font-weight:700; text-transform:uppercase; letter-spacing:.04em}
.wish-card .when{color:var(--muted); font-weight:400; text-transform:none; letter-spacing:0; font-family:'Share Tech Mono',monospace}

.foot{text-align:center; color:var(--muted); margin-top:56px; font-size:.85rem; letter-spacing:.06em}

/* ---------- CLOCKED OUT finale ---------- */
.retired-overlay{position:fixed; inset:0; z-index:80; display:grid; place-items:center;
  background:radial-gradient(closest-side, rgba(10,16,26,.55), rgba(8,11,17,.95))}
.retired-overlay[hidden]{display:none}
.retired-card{text-align:center; padding:28px}
.stamp{font-family:'Anton',sans-serif; font-size:clamp(3rem,15vw,8.5rem); color:var(--red); text-transform:uppercase;
  border:.18em solid var(--red); border-radius:14px; padding:.1em .25em; transform:rotate(-9deg); display:inline-block;
  text-shadow:0 0 30px rgba(226,59,46,.5); box-shadow:0 0 40px rgba(226,59,46,.35); letter-spacing:.02em}
.retired-sub{font-size:1.25rem; color:var(--ink); margin:1em 0 1.1em; letter-spacing:.06em}

@media (prefers-reduced-motion:reduce){ *{animation:none !important; transition:none !important} }