/* ============================================================
   PUW v2 — line-art infographics + agent use-case grid
   Loaded AFTER main.css, only by index-v2.html.
   All strokes ride currentColor → both themes for free.
   Accent = the machine's voice, same contract as main.css.
   ============================================================ */

/* ---------- infographic containers ---------- */

.ig {
  color: var(--muted);
  pointer-events: none;
  user-select: none;
}
.ig svg { display: block; width: 100%; height: auto; overflow: visible; }

.ig-label {
  font-family: var(--font-mono);
  font-size: 9px;
  font-weight: 700;
  letter-spacing: .22em;
  fill: var(--faint);
  stroke: none;
}

.ig-acc { fill: var(--accent); stroke: none; }
.ig-accs { stroke: var(--accent); }

/* placements — decorative side pieces, desktop only */
.hero, .hardware { position: relative; }

.ig-ask {
  position: absolute;
  right: 7vw;
  top: 50%;
  transform: translateY(-50%);
  width: clamp(130px, 12vw, 190px);
}
.ig-told {
  position: absolute;
  right: 8vw;
  top: 50%;
  transform: translateY(-54%);
  width: clamp(140px, 13vw, 200px);
}
.ig-hw {
  position: absolute;
  right: var(--pad-x);
  top: 50%;
  transform: translateY(-50%);
  width: clamp(210px, 20vw, 300px);
}
.ig-final { width: 110px; margin: 0 auto 2.4rem; }

@media (max-width: 1100px) {
  .ig-ask, .ig-told, .ig-hw { display: none; }
}

/* ---------- the eye (hero) ----------
   A lens in the shape of an eye; its pupil is a camera's picture. For each
   hero question (main.js) it sweeps every camera, then locks on the one with
   the answer. Lines are Puw at rest (muted); green is the machine finding.
   It sits beside the text under the title: its top runs behind the title's
   last line, the pupil starts where the title ends, in every language. */

.hero-lower {
  --eye-w: min(46vw, 720px);
  position: relative;
  min-height: calc(.7 * var(--eye-w));
}
.hero-title { position: relative; z-index: 2; }
.hero-lower > :not(.eye) { position: relative; z-index: 1; }
.eye {
  position: absolute;
  z-index: 0;
  right: -2vw;
  top: calc(-.3 * var(--eye-w));
  width: var(--eye-w);
  color: var(--muted);
  pointer-events: none;
  user-select: none;
  --aim: 45deg;
}
[dir="rtl"] .eye { right: auto; left: -2vw; }
.eye svg { display: block; width: 100%; height: auto; overflow: visible; }

.eye-faint, .eye-ticks, .eye-lids { stroke: var(--faint); }
.eye-ticks { stroke-linecap: butt; }
.eye-solid { fill: var(--bg); }
.eye-rim { stroke: var(--muted); stroke-width: 1.5; }

/* the lids open once (main.js adds .open; no JS: open) */
.eye-lid { transform-origin: 300px 300px; transition: transform 1.5s cubic-bezier(.7, 0, .2, 1); }
html.js .eye:not(.open) .eye-lid { transform: scaleY(.015); }

/* it watches you: the iris and pupil lean toward the pointer (main.js) */
.eye-look {
  transform: translate(var(--look-x, 0px), var(--look-y, 0px));
  transition: transform .9s cubic-bezier(.2, .8, .2, 1);
}

/* the iris turns slowly, always */
@keyframes eye-turn { to { transform: rotate(360deg); } }
.eye-iris { transform-origin: 300px 300px; animation: eye-turn 140s linear infinite; }

/* cameras around the lens; the one being looked through is green */
.eye-ch circle { fill: var(--faint); stroke: none; transition: fill .3s; }
.eye-ch text {
  font-family: var(--font-mono);
  font-size: 10px;
  letter-spacing: .08em;
  fill: var(--faint);
  stroke: none;
  text-anchor: middle;
  dominant-baseline: central;
  transition: fill .3s;
}
.eye[data-scene="entry"] .eye-ch[data-for="entry"] :is(circle, text),
.eye[data-scene="till"] .eye-ch[data-for="till"] :is(circle, text),
.eye[data-scene="door"] .eye-ch[data-for="door"] :is(circle, text) { fill: var(--accent); }

/* the aim: an arc on the camera, the gaze running from it into the pupil */
.eye[data-scene="till"] { --aim: 135deg; }
.eye[data-scene="door"] { --aim: 0deg; }
.eye-aim {
  transform-origin: 300px 300px;
  transform: rotate(var(--aim));
  transition: transform 1.1s cubic-bezier(.65, 0, .35, 1);
}
.eye-arc { stroke: var(--accent); stroke-width: 2; }
@keyframes eye-march { to { stroke-dashoffset: -18; } }
.eye-gaze { stroke: var(--accent); opacity: .55; stroke-dasharray: 3 6; animation: eye-march 1s linear infinite; }

/* the pupil: one camera's picture at a time */
.eye-feed { color: var(--text); }
.eye-scene { opacity: 0; transition: opacity .35s; }
.eye-scene path, .eye-scene rect, .eye-scene circle { stroke: color-mix(in srgb, var(--text) 70%, transparent); }
.eye-scene .eye-dim { stroke: color-mix(in srgb, var(--text) 26%, transparent); }
.eye-glow { fill: var(--text); opacity: .07; stroke: none !important; }
.eye[data-scene="entry"] [data-scene="entry"],
.eye[data-scene="till"] [data-scene="till"],
.eye[data-scene="door"] [data-scene="door"] { opacity: 1; }

.eye-hud text, .eye-lock text {
  font-family: var(--font-mono);
  font-size: 10px;
  letter-spacing: .06em;
  stroke: none;
}
.eye-hud text { fill: var(--muted); }
.eye-scene .eye-rec { fill: var(--accent); stroke: none; animation: ig-blink 2.6s infinite; }

/* the find: brackets close in on it */
.eye-lock {
  opacity: 0;
  transform: scale(1.35);
  transform-box: fill-box;
  transform-origin: center;
  transition: opacity .25s, transform .55s cubic-bezier(.2, .8, .2, 1);
}
.eye-scene .eye-lock path { stroke: var(--accent); stroke-width: 1.8; }
.eye-lock text { fill: var(--accent); }
.eye.locked .eye-lock { opacity: 1; transform: none; }

/* looking: a scan runs down the pupil twice */
@keyframes eye-scan {
  from { transform: translateY(160px); opacity: 1; }
  to { transform: translateY(442px); opacity: 1; }
}
.eye-scan { opacity: 0; }
.eye.seeking .eye-scan { animation: eye-scan .55s linear 2; }

@media (max-width: 1100px) {
  .hero-lower { min-height: 0; }
  .eye {
    position: relative;
    right: auto;
    top: auto;
    width: min(86vw, 460px);
    margin: 2.6rem auto 0;
  }
  [dir="rtl"] .eye { left: auto; }
}

/* ---------- ambient motion (killed globally by reduced-motion) ---------- */

/* status LED blink */
@keyframes ig-blink {
  0%, 58%, 100% { opacity: 1; }
  66%, 90% { opacity: .15; }
}
.ig-led { animation: ig-blink 2.6s infinite; }

/* the camera is typing… */
@keyframes ig-type {
  0%, 60%, 100% { opacity: .2; }
  15%, 35% { opacity: 1; }
}
.ig-dot { animation: ig-type 1.5s infinite; }
.ig-dot.d2 { animation-delay: .22s; }
.ig-dot.d3 { animation-delay: .44s; }

/* data marching along dashed lines */
@keyframes ig-march { to { stroke-dashoffset: -20; } }
.ig-flow {
  stroke-dasharray: 4 6;
  animation: ig-march 1.5s linear infinite;
}

/* notification radar ping */
@keyframes ig-ping {
  0% { transform: scale(.35); opacity: .85; }
  75%, 100% { transform: scale(3.1); opacity: 0; }
}
.ig-ping circle {
  transform-box: fill-box;
  transform-origin: center;
  opacity: 0;
  animation: ig-ping 3s cubic-bezier(.2, .6, .3, 1) infinite;
}
.ig-ping circle:nth-child(2) { animation-delay: 1s; }
.ig-ping circle:nth-child(3) { animation-delay: 2s; }

/* ---------- agents-on-watch use cases ---------- */

.usecases .kicker { max-width: 52ch; }

.uc-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 20px;
  margin-top: 3.2rem;
  max-width: 1240px;
}
.uc {
  border-top: 1px solid var(--hairline);
  padding: 1.3rem 0 .4rem;
  display: flex;
  flex-direction: column;
  gap: .8rem;
  transition: border-color .5s var(--ease);
}
.uc-label {
  font-family: var(--font-mono);
  font-size: .72rem;
  font-weight: 700;
  letter-spacing: .18em;
  text-transform: uppercase;
  color: var(--muted);
  margin: 0;
  display: inline-flex;
  align-items: center;
  gap: .7em;
}
.uc-label::before {
  content: "";
  width: .55em;
  height: .55em;
  border-radius: 50%;
  background: var(--accent);
  flex: none;
}
.uc-rule {
  font-style: italic;
  font-weight: 800;
  font-size: clamp(1.05rem, 1.5vw, 1.35rem);
  line-height: 1.25;
  letter-spacing: -.01em;
  margin: 0;
  color: var(--text);
}
.uc-note {
  font-size: .88rem;
  color: var(--muted);
  margin: 0;
}

@media (max-width: 980px) { .uc-grid { grid-template-columns: repeat(2, 1fr); } }
@media (max-width: 640px) { .uc-grid { grid-template-columns: 1fr; } }