/* Axia motion layer (hero films, AI cards). See motion.js. */
.hero .slide video.film { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; opacity: 0; transition: opacity 600ms ease; }
.hero .slide video.film.playing { opacity: 1; }
.aicard video.seq { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; z-index: -2; filter: saturate(.9) brightness(.82); opacity: 0; transition: opacity 500ms ease; }
.aicard.playing video.seq { opacity: 1; }
.aicard h3::before { color: var(--cyan) !important; }
[data-seq] [data-at] { opacity: 0; transform: translateY(10px) scale(.98); transition: opacity 450ms var(--ease), transform 450ms var(--ease); }
[data-seq] [data-at].in { opacity: 1; transform: none; }
.aicard .ui-search[data-at] { transform: translateX(-50%) translateY(10px); } .aicard .ui-search[data-at].in { transform: translateX(-50%); }
.aicard .bbox[data-frames] { opacity: 0; transition: opacity 120ms ease; }
.aicard .bbox[data-frames].in { opacity: 1; }
.aicard .row[data-at] { transform: translateX(-6px); } .aicard .row[data-at].in { transform: none; }
.aicard .btns span.go[data-at].in { animation: go-pulse 1.4s ease 2; }
@keyframes go-pulse { 50% { box-shadow: 0 0 0 6px rgba(0,226,237,.35); } }
.aicard .flash { position: absolute; inset: 0; z-index: -1; pointer-events: none; background: radial-gradient(60% 60% at 70% 30%, rgba(255,255,255,.55), rgba(80,140,255,.25) 50%, transparent 75%); opacity: 0; mix-blend-mode: screen; }
.aicard .flash.in { animation: strobe 1s steps(2) 1; }
@keyframes strobe { 0%, 100% { opacity: 0; } 25%, 75% { opacity: 1; } 50% { opacity: .2; } }
.aicard .illus { position: absolute; right: 18px; top: 16px; font: 500 11px var(--mono); letter-spacing: .08em; color: rgba(255,255,255,.65); background: rgba(4,21,43,.45); border: 1px solid rgba(255,255,255,.14); border-radius: 999px; padding: 4px 10px; }
[dir="rtl"] .aicard .illus { right: auto; left: 18px; }
[data-seq].static [data-at] { opacity: 1; transform: none; }
.aicard.static .ui-search[data-at] { transform: translateX(-50%); }
.aicard.static .bbox[data-frames] { opacity: 1; }
@media (prefers-reduced-motion: reduce) { .hero .slide video.film, .aicard video.seq { display: none; } }
/* .vbox reproduces object-fit: cover for a 3:2 video inside any card shape, so the AI boxes
   (positioned in % of the video frame) stay on the person whatever the crop. */
.aicard[data-seq] { container-type: size; }
.aicard .vbox { position: absolute; left: 50%; top: 50%; width: max(100cqw, 150cqh); aspect-ratio: 3 / 2; transform: translate(-50%, -50%); z-index: -2; }
.aicard .vbox > img, .aicard .vbox > video.seq { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; filter: saturate(.9) brightness(.8); z-index: 0; }
.aicard .vbox > video.seq { z-index: 1; }
.aicard .vbox .bbox { z-index: 2; }
.aicard .bbox span { white-space: nowrap; }
.aicard .ui-bubble span[lang] { min-height: 1.3em; display: block; }

/* SaaS mock-ups: rows and steps arrive one by one; a checkpoint turns done */
.dx [data-at], .px [data-at] { transform: translateY(6px); }
.px-cps div.tick[data-at].in { border-color: #2E7D4F; box-shadow: none; }
.px-cps div.tick[data-at].in i { background: #2E7D4F; border-color: #2E7D4F; color: #fff; }
.px-cps div.tick[data-at].in i::after { content: "✓"; }
.px-cps div.tick[data-at] { opacity: 1; transform: none; }
/* phones: 4:5 cards. Overlay panels dock above the caption, label moves to the bottom corner. */
@media (max-width: 700px) {
  .aicard .illus { top: auto; bottom: 10px; right: 12px; font-size: 10px; }
  [dir="rtl"] .aicard .illus { right: auto; left: 12px; }
  .aicard p.cap { bottom: 38px !important; font-size: 14px; }
  .aicard[data-seq] .ui-card { left: 16px !important; right: 16px !important; top: auto !important; bottom: 116px !important; width: auto !important; transform: none !important; }
  .aicard[data-seq] .ui-card .thumb { display: none; }
  .aicard[data-seq] .ui-bubble { left: 16px !important; right: 16px !important; top: auto !important; bottom: 116px; max-width: none; }
  .aicard[data-seq] .ui-search { top: 34% !important; max-width: 86%; font-size: 14px; }
}