.hero-system--ar {
  isolation: isolate;
  background: #0b0c10;
}

.hero-system--ar > img {
  position: absolute;
  z-index: 0;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: center;
  animation: ar-hero-breathe 9s ease-in-out infinite alternate;
}

.hero-system--ar::before {
  z-index: 1;
  opacity: 1;
  background: linear-gradient(180deg, rgba(5,6,9,.5), transparent 24%, transparent 68%, rgba(5,6,9,.8)), linear-gradient(90deg, rgba(5,6,9,.16), transparent 48%, rgba(5,6,9,.12));
}

.hero-system--ar .system-label,
.physical-label,
.ar-status,
.ar-sequence { z-index: 4; }

.hero-system--ar .system-label {
  top: 28px;
  padding: 9px 12px;
  color: #e8e8eb;
  border: 1px solid rgba(255,255,255,.18);
  border-radius: 999px;
  background: rgba(7,7,10,.56);
  backdrop-filter: blur(12px);
}

.physical-label {
  position: absolute;
  top: 77px;
  left: 34px;
  color: rgba(255,255,255,.58);
  font-size: .47rem;
  font-weight: 800;
  letter-spacing: .16em;
}

.ar-scan-window {
  position: absolute;
  z-index: 2;
  top: 8.5%;
  left: 22.5%;
  width: 55%;
  height: 77%;
  overflow: hidden;
  border-radius: 16% 16% 17% 17%;
  pointer-events: none;
}

.ar-scan-window::after {
  position: absolute;
  inset: 0;
  content: "";
  opacity: .24;
  background-image: linear-gradient(rgba(103,220,233,.16) 1px, transparent 1px), linear-gradient(90deg, rgba(103,220,233,.16) 1px, transparent 1px);
  background-size: 34px 34px;
  mask-image: linear-gradient(transparent 5%, #000 30%, #000 85%, transparent);
}

.ar-scan-line {
  position: absolute;
  z-index: 2;
  top: 7%;
  right: 5%;
  left: 5%;
  height: 2px;
  background: linear-gradient(90deg, transparent, var(--cyan), #fff, var(--cyan), transparent);
  box-shadow: 0 0 18px var(--cyan);
  animation: ar-scan 4.8s cubic-bezier(.45,0,.55,1) infinite;
}

.ar-track {
  position: absolute;
  z-index: 3;
  width: 7px;
  aspect-ratio: 1;
  border: 1px solid #fff;
  border-radius: 50%;
  background: var(--cyan);
  box-shadow: 0 0 14px var(--cyan);
  animation: ar-track-pulse 2.2s ease-in-out infinite;
}

.ar-track--one { top: 36%; left: 23%; }
.ar-track--two { top: 48%; right: 19%; animation-delay: .7s; }
.ar-track--three { right: 30%; bottom: 21%; animation-delay: 1.4s; }

.ar-anchor {
  position: absolute;
  z-index: 3;
  bottom: 18%;
  left: 50%;
  width: 150px;
  aspect-ratio: 1;
  pointer-events: none;
  transform: translateX(-50%);
}

.ar-anchor i {
  position: absolute;
  inset: 0;
  border: 1px solid rgba(103,220,233,.8);
  border-radius: 50%;
  box-shadow: 0 0 24px rgba(103,220,233,.2);
  animation: ar-anchor-pulse 3s ease-out infinite;
}

.ar-anchor i:nth-child(2) { animation-delay: 1s; }
.ar-anchor i:nth-child(3) { animation-delay: 2s; }

.ar-status {
  position: absolute;
  right: 27px;
  bottom: 76px;
  display: grid;
  grid-template-columns: auto 1fr;
  gap: 3px 9px;
  padding: 13px 15px;
  border: 1px solid rgba(255,255,255,.25);
  border-radius: 14px;
  background: rgba(7,7,10,.68);
  backdrop-filter: blur(14px);
  animation: ar-status-reveal 4.8s ease-in-out infinite;
}

.ar-status i {
  grid-row: 1 / 3;
  width: 9px;
  aspect-ratio: 1;
  align-self: center;
  border-radius: 50%;
  background: var(--cyan);
  box-shadow: 0 0 15px var(--cyan);
}

.ar-status span { font-size: .58rem; font-weight: 850; letter-spacing: .12em; }
.ar-status small { color: #a9abb5; font-size: .4rem; letter-spacing: .1em; }

.ar-sequence {
  position: absolute;
  right: 25px;
  bottom: 24px;
  left: 25px;
  display: grid;
  grid-template-columns: auto 1fr auto 1fr auto;
  gap: 10px;
  align-items: center;
  padding: 10px 13px;
  border-radius: 999px;
  background: rgba(7,7,10,.68);
  font-size: .42rem;
  font-weight: 800;
  letter-spacing: .12em;
  backdrop-filter: blur(10px);
}

.ar-sequence i { height: 1px; background: linear-gradient(90deg, rgba(255,255,255,.22), var(--cyan)); }
.ar-sequence strong { color: var(--cyan); }

@keyframes ar-scan {
  0%, 12% { top: 8%; opacity: 0; }
  20% { opacity: 1; }
  68% { top: 84%; opacity: 1; }
  80%, 100% { top: 84%; opacity: 0; }
}

@keyframes ar-anchor-pulse {
  0% { opacity: 0; transform: scale(.28); }
  30% { opacity: .85; }
  100% { opacity: 0; transform: scale(1.18); }
}

@keyframes ar-track-pulse {
  0%, 100% { opacity: .25; transform: scale(.72); }
  50% { opacity: 1; transform: scale(1.25); }
}

@keyframes ar-status-reveal {
  0%, 48% { opacity: .38; transform: translateY(8px); }
  62%, 92% { opacity: 1; transform: translateY(0); }
  100% { opacity: .38; transform: translateY(8px); }
}

@keyframes ar-hero-breathe {
  from { transform: scale(1.015); }
  to { transform: scale(1.045); }
}

@media (max-width: 620px) {
  .physical-label { top: 69px; left: 20px; }
  .ar-scan-window { left: 21%; width: 58%; }
  .ar-anchor { bottom: 19%; width: 108px; }
  .ar-status { right: 16px; bottom: 67px; }
  .ar-sequence { right: 14px; bottom: 14px; left: 14px; }
  .hero-system--ar .system-label { left: 18px; }
}

@media (prefers-reduced-motion: reduce) {
  .hero-system--ar > img,
  .ar-scan-line,
  .ar-track,
  .ar-anchor i,
  .ar-status { animation: none; }
  .ar-scan-line { top: 62%; opacity: .8; }
  .ar-anchor i { opacity: .42; transform: scale(.82); }
}