/* ============================================================
   The homepage hero, framed and scanning (28 Oct 2026, Jared's pick of
   DeckIQ/mockups/tool-night-20261027/hero-scan.html). Loads after home-night.css
   on index.html only.
   - The yard picture sits in a lit frame on the right (above the copy on phones),
     in both light and dark mode. Light mode turns the rest of the hero white.
   - Every 16 s a cyan beam sweeps the frame: the night picture turns into the light
     blueprint (home/yard-lite-*.webp, its own file, no live filter), holds, sweeps back.
   - Cheap: the wipe is two nested layers sliding opposite ways (transform only, so the
     graphics card moves them without repainting); index.html adds .off to pause it while
     the hero is off screen; "reduce motion" keeps the night picture still.
   ============================================================ */

/* ---------- the frame (both modes) ---------- */
@media (min-width:901px){
  .n-hero .n-bg{inset:7% 3% 7% max(50%,calc(var(--heroL) + 640px));border-radius:22px;overflow:hidden;-webkit-mask-image:none;mask-image:none;
    box-shadow:0 0 0 1px rgba(59,232,255,.3),0 40px 90px -40px #000,0 0 60px -24px rgba(59,232,255,.6)}
  .n-hero .n-legend{right:5%;bottom:11%}
}
@media (max-width:900px){
  .n-hero .n-bg{margin:16px;border-radius:18px;overflow:hidden;-webkit-mask-image:none;mask-image:none;box-shadow:0 0 0 1px rgba(59,232,255,.3),0 0 40px -14px rgba(59,232,255,.6)}
}
.n-hero .n-img::after{background:none}
/* the legend and the tags read on both pictures */
.n-hero .n-legend{background:rgba(4,10,20,.86)}
.n-hero .n-tag rect{fill:rgba(4,10,20,.86)}

/* ---------- the scan ---------- */
.n-hero{--cyc:16s}
.n-wipe,.n-wipeIn,.n-scanW{position:absolute;inset:0;will-change:transform}
.n-wipe{overflow:hidden;z-index:1;animation:nWipeO var(--cyc) cubic-bezier(.65,0,.35,1) infinite}
.n-wipeIn{animation:nWipeI var(--cyc) cubic-bezier(.65,0,.35,1) infinite}
.n-hero .n-img.lite{background-image:url(home/yard-lite-2400.webp);background-color:#F4F8FC}
@media (max-width:1400px){.n-hero .n-img.lite{background-image:url(home/yard-lite-1400.webp)}}
.n-scanW{z-index:2;pointer-events:none;animation:nWipeO var(--cyc) cubic-bezier(.65,0,.35,1) infinite}
/* the beam rides the wipe's edge: a bright line with a soft trail */
.n-scan{position:absolute;top:0;bottom:0;right:-2px;width:4px;background:#BFF6FF;
  box-shadow:0 0 10px 2px #3BE8FF,0 0 34px 8px rgba(59,232,255,.55);opacity:0;animation:nBeam var(--cyc) linear infinite}
.n-scan::before{content:'';position:absolute;top:0;bottom:0;right:4px;width:90px;background:linear-gradient(90deg,transparent,rgba(59,232,255,.22))}
.n-hero .n-trace{z-index:3}
/* 0–38% night holds, 38–50% sweep in, 50–88% light holds, 88–100% sweep back */
@keyframes nWipeO{0%,38%{transform:translateX(-100%)}50%,88%{transform:translateX(0)}100%{transform:translateX(-100%)}}
@keyframes nWipeI{0%,38%{transform:translateX(100%)}50%,88%{transform:translateX(0)}100%{transform:translateX(100%)}}
@keyframes nBeam{0%,37%{opacity:0}39%,49%{opacity:1}51%,87%{opacity:0}89%,99%{opacity:1}100%{opacity:0}}
.n-hero.off :is(.n-wipe,.n-wipeIn,.n-scanW,.n-scan,.n-img){animation-play-state:paused}
@media (prefers-reduced-motion:reduce){.n-wipe,.n-wipeIn,.n-scanW,.n-scan{animation:none}.n-wipe{transform:translateX(-100%)}}

/* ---------- light mode: the hero turns white on the blueprint grid ---------- */
html[data-mode="light"] body.night .n-hero{background:transparent;color:#0B1324;
  --n-ink:#0B1324;--n-mut:#55647D;--n-c:#0AA5C8;--n-cT:#07809E;--n-line:rgba(10,165,200,.24)}
html[data-mode="light"] body.night .n-hero .n-bg{box-shadow:0 0 0 1px rgba(10,165,200,.35),0 40px 90px -40px rgba(10,60,110,.65),0 0 60px -20px rgba(59,232,255,.6)}
html[data-mode="light"] body.night .n-hero h1{color:#0B1324;text-shadow:0 0 30px rgba(59,232,255,.2)}
html[data-mode="light"] body.night .n-hero h1 em{background:linear-gradient(90deg,#0AA5C8,#2F6BFF 60%,#7C4DDB);-webkit-background-clip:text;background-clip:text}
html[data-mode="light"] body.night .n-hero .n-lead{color:#24324B}
html[data-mode="light"] body.night .n-hero .n-eyebrow{color:#07809E}
html[data-mode="light"] body.night .n-tabs button{color:#55647D}
html[data-mode="light"] body.night .n-tabs button[aria-selected="true"]{color:#07809E;background:rgba(10,165,200,.08);box-shadow:inset 0 0 0 1px rgba(10,165,200,.45)}
html[data-mode="light"] body.night .heroAddr{background:#fff;border-color:rgba(10,165,200,.35);box-shadow:0 0 0 1px rgba(59,232,255,.2),0 22px 50px -24px rgba(10,150,200,.5),0 0 36px -14px rgba(59,232,255,.55)}
html[data-mode="light"] body.night .heroAddr>svg{color:#0AA5C8}
html[data-mode="light"] body.night .heroAddr input{color:#0B1324}
html[data-mode="light"] body.night .heroAddr input::placeholder{color:#7A889E}
html[data-mode="light"] body.night .heroAc{background:#fff;border-color:rgba(10,165,200,.3);box-shadow:0 20px 50px -20px rgba(10,150,200,.45)}
html[data-mode="light"] body.night .heroAcRow{color:#0B1324}
html[data-mode="light"] body.night .heroAcRow i{color:#55647D}
html[data-mode="light"] body.night .heroAcRow.on,html[data-mode="light"] body.night .heroAcRow:hover{background:rgba(10,165,200,.09)}
html[data-mode="light"] body.night .n-hint{color:#55647D}
html[data-mode="light"] body.night .n-stats b{color:#0B1324}
html[data-mode="light"] body.night .n-stats span,html[data-mode="light"] body.night .n-livenote{color:#55647D}

/* 20261102s: the Design tab's designers under the address box (Jared: hero A) */
.n-dz{display:flex;gap:8px;flex-wrap:wrap;margin-top:12px}
.n-dzc{font:500 13px Inter,sans-serif;padding:7px 12px;border-radius:999px;color:#9DB0CE;border:1px solid rgba(157,176,206,.28);background:rgba(10,18,34,.5);display:inline-flex;gap:6px;align-items:center}
.n-dzc b{font:700 10px 'JetBrains Mono',monospace;letter-spacing:.06em;color:#FFB547}
button.n-dzc{cursor:pointer;color:#EAF2FF}
button.n-dzc[aria-pressed="true"]{border-color:rgba(59,232,255,.7);box-shadow:0 0 0 1px rgba(59,232,255,.35);background:rgba(59,232,255,.1)}
button.n-dzc:focus-visible{outline:2px solid #3BE8FF;outline-offset:2px}
html[data-mode="light"] body.night .n-dzc{color:#55647D;background:#fff;border-color:#CFDCEB}
html[data-mode="light"] body.night button.n-dzc{color:#0B1424}
html[data-mode="light"] body.night button.n-dzc[aria-pressed="true"]{border-color:rgba(10,165,200,.6);background:rgba(10,165,200,.08)}
html[data-mode="light"] body.night .n-dzc b{color:#B46E00}