/* Homepage hero, variation A ("scan line triggers detections"), Claude Design zip 45. Loaded on the homepage only.
   JetBrains Mono is not part of the site's fonts, so it is loaded here. */
@import url('https://fonts.googleapis.com/css2?family=JetBrains+Mono:wght@500;700&display=swap');
/* Keats — Hero image "A": scan line triggers detections
   Self-contained. Requires: JetBrains Mono (already in global tokens). */
.kh-scan{--kh-gold:#F5C451;--kh-navy:#1A2744;--kh-ink:#0D1530;--kh-muted:#4A5568;--kh-dur:4s;
  position:relative;width:auto;max-width:1056px;margin:20px 12px;font-family:"JetBrains Mono",ui-monospace,Menlo,monospace}
.kh-scan__card{position:relative;aspect-ratio:1042/646;border-radius:20px;overflow:hidden;
  box-shadow:0 1px 2px rgba(13,21,48,.05),0 4px 10px rgba(13,21,48,.06),0 18px 32px rgba(13,21,48,.1),0 40px 80px rgba(13,21,48,.18)}
.kh-scan__card img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;display:block}
.kh-scan__card::after{content:"";position:absolute;inset:0;pointer-events:none;background:radial-gradient(ellipse at center,transparent 55%,rgba(13,21,48,.45))}
.kh-scan__grid{position:absolute;inset:0;pointer-events:none;background-image:linear-gradient(rgba(255,255,255,.07) 1px,transparent 1px),linear-gradient(90deg,rgba(255,255,255,.07) 1px,transparent 1px);background-size:28px 28px}
.kh-scan__line{position:absolute;left:0;right:0;height:20%;top:-20%;z-index:2;pointer-events:none;
  background:linear-gradient(180deg,transparent,rgba(245,196,81,.28) 85%,rgba(245,196,81,.9));animation:kh-scanY var(--kh-dur) linear infinite}
@keyframes kh-scanY{0%{top:-20%}80%,100%{top:100%}}
/* Detection boxes: position with --x --y --w --h (% of image). Delay = --y × 0.8 × --kh-dur so it pops as the line passes. */
.kh-scan__box{position:absolute;left:var(--x);top:var(--y);width:var(--w);height:var(--h);z-index:3;
  border:1.5px solid var(--kh-gold);border-radius:4px;box-shadow:0 0 0 1px rgba(13,21,48,.25),0 0 18px rgba(245,196,81,.35);
  opacity:0;animation:kh-pop var(--kh-dur) infinite;animation-delay:calc(var(--y-n) * 0.8 * var(--kh-dur))}
.kh-scan__box--light{border-color:#fff;box-shadow:0 0 18px rgba(255,255,255,.4)}
@keyframes kh-pop{0%{opacity:0;transform:scale(1.25)}5%{opacity:1;transform:scale(1)}85%{opacity:1}95%,100%{opacity:0}}
.kh-scan__tag{position:absolute;bottom:calc(100% + 3px);left:-1.5px;white-space:nowrap;background:var(--kh-gold);color:var(--kh-ink);
  font-size:9.5px;font-weight:700;line-height:1;letter-spacing:.08em;padding:5px 6px;border-radius:3px 3px 3px 0}
.kh-scan__box--light .kh-scan__tag{background:#fff}
.kh-scan__tag--right{left:auto;right:-1.5px;border-radius:3px 3px 0 3px}
.kh-scan__br{position:absolute;width:26px;height:26px;border:2px solid var(--kh-gold);pointer-events:none}
.kh-scan__br--tl{top:-12px;left:-12px;border-right:0;border-bottom:0}
.kh-scan__br--tr{top:-12px;right:-12px;border-left:0;border-bottom:0}
.kh-scan__br--bl{bottom:-12px;left:-12px;border-right:0;border-top:0}
.kh-scan__br--br{bottom:-12px;right:-12px;border-left:0;border-top:0}
@media (max-width:639px){
  .kh-scan__card{border-radius:14px}
  .kh-scan__tag{font-size:8px;padding:4px 5px}
  .kh-scan__box:not(.kh-scan__box--light) .kh-scan__tag{display:none} /* keep only the KEATS tag on small screens */
  .kh-scan__br{width:18px;height:18px;border-width:1.5px}
  .kh-scan__br--tl,.kh-scan__br--tr{top:-8px}.kh-scan__br--bl,.kh-scan__br--br{bottom:-8px}
  .kh-scan__br--tl,.kh-scan__br--bl{left:-8px}.kh-scan__br--tr,.kh-scan__br--br{right:-8px}
}
/* Keats change (Sam, 7 Nov 2026): the scan and the boxes keep running under Reduce Motion (Sam's Mac has it on and saw a
   still photo). The LIVE / coordinates labels are removed, so their CSS is gone and the margin only clears the brackets. */