/* ============================================================
   ANPR — dual-camera journey (front plate first, rear as backup)
   Uses zvenue.css + vd.css (stage, .zc console, wide layout).
   State from js/zvenue.js: [data-step], .r0..r4, .is-a..is-c.
   ============================================================ */
.zv--wide.an .zv__steps { grid-template-columns: repeat(5, minmax(0, 1fr)); }
.an-intro { max-inline-size: 48rem; }

/* ---------- monitor console ---------- */
.an .zc { background: #0b1226; color: #e9eef8; }
.an .zc__body { gap: .55rem; }
.an-tiles { display: grid; grid-template-columns: 1fr 1fr; gap: .45rem; }
.an-tile { border-radius: .55rem; overflow: hidden; background: #111c38; border: 1px solid rgba(255,255,255,.08); transition: border-color .3s; }
.an-tile__h { display: flex; justify-content: space-between; align-items: center; padding: .35rem .45rem; font-weight: 800; font-size: .58rem; text-transform: uppercase; letter-spacing: .05em; color: #8a96ad; }
.an-tile__h i { inline-size: .45rem; block-size: .45rem; border-radius: 50%; background: #3a4458; transition: background-color .3s; }
.an-view { position: relative; block-size: 5.6rem; background: radial-gradient(120% 120% at 50% 0%, #2a3550, #0c1324); display: grid; place-items: center; overflow: hidden; }
.an-crop { opacity: 0; transform: scale(.9); transition: opacity .4s, transform .4s; }
.an-plate { display: inline-flex; align-items: center; gap: .35rem; padding: .35rem .6rem; border-radius: .3rem; background: #f6f7f9; border: 2px solid #1b2232; color: #0d1424; font: 800 .95rem/1 var(--font-mono); letter-spacing: .04em; }
.an-plate--dirty { position: relative; color: transparent; text-shadow: 0 0 6px rgba(13,20,36,.5); }
.an-plate--dirty::after { content: ""; position: absolute; inset: -2px; border-radius: .3rem; background: radial-gradient(40% 60% at 30% 40%, rgba(110,80,50,.95), transparent 70%), radial-gradient(45% 70% at 70% 60%, rgba(95,70,45,.9), transparent 70%), rgba(120,95,60,.35); }
.an-scan { position: absolute; inset-inline: 10%; block-size: 2px; inset-block-start: 20%; background: #2fd27a; box-shadow: 0 0 10px #2fd27a; opacity: 0; }
.an-tile__s { padding: .35rem .45rem; font-size: .6rem; font-weight: 700; color: #8a96ad; min-block-size: 1.7rem; }
.an-tile__s > span { display: none; }
.an-res { display: grid; gap: .3rem; }
.an-res div { display: flex; justify-content: space-between; align-items: center; padding: .4rem .55rem; border-radius: .45rem; background: rgba(255,255,255,.05); font-size: .64rem; color: #8a96ad; font-weight: 600; }
.an-res b { color: #fff; font-size: .7rem; }
.an-res b > span { display: none; }
.an-res b .v0 { display: inline; }
.an-log { margin-block-start: auto; padding: .45rem .55rem; border-radius: .45rem; background: rgba(47,107,255,.2); color: #fff; font: 600 .6rem/1.3 var(--font-mono); opacity: 0; transform: translateY(6px); transition: opacity .4s, transform .4s; }

/* front tile states: standby → armed → reading → no read */
.an[data-step="0"]:not(.is-a) .ft .an-tile__s .s0,
.an[data-step="0"].is-a .ft .an-tile__s .s1,
.an[data-step="1"]:not(.is-b) .ft .an-tile__s .s2,
.an[data-step="1"].is-b .ft .an-tile__s .s3, .an.r2 .ft .an-tile__s .s3 { display: inline; }
.an[data-step="1"].is-a .ft .an-crop, .an.r2 .ft .an-crop { opacity: 1; transform: none; }
.an[data-step="1"].is-a:not(.is-b) .ft .an-scan { opacity: 1; animation: zv-scan .8s ease-in-out infinite alternate; }
.an[data-step="0"].is-a .an-tile__h i, .an.r1 .an-tile__h i { background: #4f8bff; }
.an[data-step="1"].is-b .ft, .an.r2 .ft { border-color: rgba(255,90,90,.6); }
.an[data-step="1"].is-b .ft .an-tile__h i, .an.r2 .ft .an-tile__h i { background: #ff5a5a; }
.an[data-step="1"].is-b .ft .an-tile__s, .an.r2 .ft .an-tile__s { color: #ff8a8a; }
/* rear tile: standby → armed → reading → read */
.an[data-step="0"]:not(.is-a) .rt .an-tile__s .s0,
.an[data-step="0"].is-a .rt .an-tile__s .s1, .an[data-step="1"] .rt .an-tile__s .s1,
.an[data-step="2"]:not(.is-b) .rt .an-tile__s .s2,
.an[data-step="2"].is-b .rt .an-tile__s .s3, .an.r3 .rt .an-tile__s .s3 { display: inline; }
.an[data-step="2"].is-a .rt .an-crop, .an.r3 .rt .an-crop { opacity: 1; transform: none; }
.an[data-step="2"].is-a:not(.is-b) .rt .an-scan { opacity: 1; animation: zv-scan .8s ease-in-out infinite alternate; }
.an[data-step="2"].is-b .rt, .an.r3 .rt { border-color: rgba(47,210,122,.6); }
.an[data-step="2"].is-b .rt .an-tile__h i, .an.r3 .rt .an-tile__h i { background: #2fd27a; }
.an[data-step="2"].is-b .rt .an-tile__s, .an.r3 .rt .an-tile__s { color: #2fd27a; }
/* results */
.an[data-step="2"].is-b .an-res .p .v0, .an.r3 .an-res .p .v0,
.an[data-step="2"].is-b .an-res .src .v0, .an.r3 .an-res .src .v0,
.an[data-step="3"].is-a .an-res .acc .v0, .an.r4 .an-res .acc .v0 { display: none; }
.an[data-step="2"].is-b .an-res .p .v1, .an.r3 .an-res .p .v1,
.an[data-step="2"].is-b .an-res .src .v1, .an.r3 .an-res .src .v1,
.an[data-step="3"].is-a .an-res .acc .v1, .an.r4 .an-res .acc .v1 { display: inline; }
.an[data-step="3"].is-a .an-res .acc, .an.r4 .an-res .acc { background: rgba(31,157,85,.25); }
.an[data-step="3"].is-a .an-res .acc b, .an.r4 .an-res .acc b { color: #2fd27a; }
.an[data-step="4"].is-c .an-log { opacity: 1; transform: none; }

/* ---------- lane (top-down) ---------- */
.an-lane { display: flex; flex-direction: column; gap: var(--sp-2); justify-content: center; }
.an-svg { display: block; inline-size: 100%; max-inline-size: 46rem; margin-inline: auto; border-radius: 18px; }
.an .car { transform-box: view-box; transform-origin: 0 0; transform: translate(-90px, 170px); }
.an[data-step="0"] .car { animation: an-in 2.8s cubic-bezier(.25,.6,.3,1) .3s both; }
.an.r1:not([data-step="4"]) .car, .an[data-step="4"] .car { transform: translate(330px, 170px); }
.an[data-step="4"].is-b .car { animation: an-out 2.4s ease-in both; }
@keyframes an-in { from { transform: translate(-90px, 170px); } to { transform: translate(330px, 170px); } }
@keyframes an-out { from { transform: translate(330px, 170px); } to { transform: translate(680px, 170px); } }
.an .loop { stroke: rgba(255,255,255,.25); transition: stroke .3s, fill .3s; fill: transparent; }
.an[data-step="0"].is-a .loop, .an.r1:not([data-step="4"]) .loop { stroke: #e0a43a; fill: rgba(224,164,58,.08); }
.an .cone { opacity: .08; transition: opacity .3s, fill .3s; }
.an .cone-f { fill: #4f8bff; }
.an .cone-r { fill: #4f8bff; }
.an[data-step="0"].is-a .cone, .an.r1 .cone { opacity: .16; }
.an[data-step="1"].is-a:not(.is-b) .cone-f, .an[data-step="2"].is-a:not(.is-b) .cone-r { opacity: .4; animation: zv-blink .5s steps(2) infinite; }
.an[data-step="1"].is-b .cone-f, .an.r2 .cone-f { fill: #ff5a5a; opacity: .22; }
.an[data-step="2"].is-b .cone-r, .an.r3 .cone-r { fill: #2fd27a; opacity: .3; }
.an .x-front { opacity: 0; transition: opacity .3s; }
.an[data-step="1"].is-b .x-front, .an.r2:not([data-step="4"]) .x-front { opacity: 1; }
.an .ok-rear { opacity: 0; transition: opacity .3s; }
.an[data-step="2"].is-b .ok-rear, .an.r3:not([data-step="4"]) .ok-rear { opacity: 1; }
.an .arm { transform-box: fill-box; transform-origin: 50% 0%; transition: transform .7s var(--ease); }
.an[data-step="4"].is-a .arm { transform: rotate(-82deg); }
.an .ledb { fill: #ff5a5a; transition: fill .3s; }
.an[data-step="3"].is-a .ledb, .an.r4 .ledb { fill: #2fd27a; }
.an-msg { align-self: center; display: inline-flex; padding: .55rem 1rem; border-radius: 999px; font-weight: 800; font-size: var(--fs-sm); background: rgba(255,255,255,.08); border: 1px solid rgba(255,255,255,.14); color: #fff; transition: background-color .3s; }
.an-msg > span { display: none; }
.an[data-step="0"] .an-msg .m0, .an[data-step="1"]:not(.is-b) .an-msg .m1, .an[data-step="1"].is-b .an-msg .m1b,
.an[data-step="2"]:not(.is-b) .an-msg .m2, .an[data-step="2"].is-b .an-msg .m2b, .an[data-step="3"] .an-msg .m3, .an[data-step="4"] .an-msg .m4 { display: inline; }
.an[data-step="1"].is-b .an-msg { background: #d64545; border-color: #d64545; }
.an[data-step="2"].is-b .an-msg, .an[data-step="3"].is-a .an-msg, .an[data-step="4"] .an-msg { background: #1f9d55; border-color: #1f9d55; }

@media (max-width: 1099px) {
  .zv--wide.an .zv__steps { display: flex; }
}
@media (max-width: 760px) {
  .an.zv--wide .zv__scenes { min-block-size: 15rem; }
}
@media (prefers-reduced-motion: reduce) {
  .an .car { animation: none !important; }
}

/* camera-view callouts under each camera */
.an .call { opacity: 0; transform: translateY(6px); transition: opacity .35s, transform .35s; transform-box: fill-box; }
.an[data-step="1"].is-b .call-f, .an.r2:not([data-step="4"]) .call-f,
.an[data-step="2"].is-b .call-r, .an.r3:not([data-step="4"]) .call-r { opacity: 1; transform: none; }

/* ---------- hero: looping dual-camera entry lane (10 s) ---------- */
.anh { position: relative; }
.anh__svg { display: block; inline-size: min(100%, 34rem); block-size: auto; filter: drop-shadow(0 24px 40px rgba(4, 10, 24, .5)); }
.anh__car { animation: anh-car 10s cubic-bezier(.4,0,.3,1) infinite; }
@keyframes anh-car { 0% { transform: translateX(-480px); } 16%, 66% { transform: translateX(-50px); } 84%, 100% { transform: translateX(620px); } }
.anh__loop { stroke: rgba(255,255,255,.25); animation: anh-loop 10s linear infinite; }
@keyframes anh-loop { 0%, 15% { stroke: rgba(255,255,255,.25); } 16%, 66% { stroke: #e0a43a; } 67%, 100% { stroke: rgba(255,255,255,.25); } }
.anh__beam { opacity: 0; }
.anh__beam-f { fill: #ff5a5a; animation: anh-bf 10s linear infinite; }
.anh__beam-r { fill: #2fd27a; animation: anh-br 10s linear infinite; }
@keyframes anh-bf { 0%, 18% { opacity: 0; fill: #4f8bff; } 20%, 24%, 28% { opacity: .55; fill: #4f8bff; } 22%, 26% { opacity: .15; fill: #4f8bff; } 30%, 64% { opacity: .28; fill: #ff5a5a; } 68%, 100% { opacity: 0; } }
@keyframes anh-br { 0%, 34% { opacity: 0; fill: #4f8bff; } 36%, 40% { opacity: .55; fill: #4f8bff; } 38%, 42% { opacity: .15; fill: #4f8bff; } 44%, 64% { opacity: .3; fill: #2fd27a; } 68%, 100% { opacity: 0; } }
.anh__pop { opacity: 0; }
.anh__pop-f { animation: anh-pf 10s ease infinite; }
.anh__pop-r { animation: anh-pr 10s ease infinite; }
@keyframes anh-pf { 0%, 28% { opacity: 0; transform: translateY(8px); } 31%, 66% { opacity: 1; transform: none; } 70%, 100% { opacity: 0; } }
@keyframes anh-pr { 0%, 42% { opacity: 0; transform: translateY(8px); } 45%, 66% { opacity: 1; transform: none; } 70%, 100% { opacity: 0; } }
.anh__res { opacity: 0; animation: anh-res 10s ease infinite; }
@keyframes anh-res { 0%, 50% { opacity: 0; transform: translateY(-6px); } 53%, 74% { opacity: 1; transform: none; } 78%, 100% { opacity: 0; } }
.anh__arm { transform-box: view-box; transform-origin: 542px 305px; animation: anh-arm 10s ease-in-out infinite; }
@keyframes anh-arm { 0%, 56% { transform: rotate(0); } 62%, 82% { transform: rotate(-80deg); } 90%, 100% { transform: rotate(0); } }
.anh__led { fill: #ff5a5a; animation: anh-led 10s linear infinite; }
@keyframes anh-led { 0%, 52% { fill: #ff5a5a; } 53%, 84% { fill: #2fd27a; } 85%, 100% { fill: #ff5a5a; } }
@media (max-width: 56rem) { .anh__svg { inline-size: min(90vw, 26rem); } }
@media (prefers-reduced-motion: reduce) {
  .anh * { animation: none !important; }
  .anh__pop, .anh__res, .anh__beam-r { opacity: 1; }
  .anh__beam-r { opacity: .3; }
}

/* Kuwaiti plate crops in the monitor tiles */
.an-crop { display: block; }
.an-kwp { display: block; inline-size: 8.6rem; block-size: auto; filter: drop-shadow(0 4px 8px rgba(0,0,0,.45)); }

/* brand card logo */
.brand-logo { display: block; inline-size: 7.5rem; block-size: auto; margin-block-end: .6rem; }

/* overview photo — full colour */
.an-photo { margin: 0; align-self: start; border-radius: var(--radius-lg); overflow: hidden; background: var(--surface); border: 1px solid var(--line); box-shadow: var(--shadow-2); }
.an-photo img { display: block; inline-size: 100%; block-size: auto; }
.an-photo figcaption { padding: var(--sp-2) var(--sp-3) var(--sp-3); color: var(--text-muted); font-size: var(--fs-sm); }
.an-ov { grid-template-columns: minmax(0, 1fr) minmax(0, 1.35fr); align-items: start; }
@media (max-width: 899px) { .an-ov { grid-template-columns: 1fr; } }