.ar-tryon-visual {
  isolation: isolate;
  background: #0a0a0d;
}

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

.ar-tryon-visual::after {
  position: absolute;
  z-index: 1;
  inset: 0;
  content: "";
  pointer-events: none;
  background: linear-gradient(180deg, rgba(5,6,9,.54), transparent 24%, transparent 70%, rgba(5,6,9,.72));
}

.ar-tryon-label,
.ar-face-track,
.ar-frame-switch,
.ar-tryon-status { z-index: 3; }

.ar-tryon-label {
  position: absolute;
  top: 27px;
  left: 28px;
  padding: 9px 12px;
  color: #ececf0;
  border: 1px solid rgba(255,255,255,.2);
  border-radius: 999px;
  background: rgba(7,7,10,.58);
  font-size: .48rem;
  font-weight: 850;
  letter-spacing: .15em;
  backdrop-filter: blur(12px);
}

.ar-face-track {
  position: absolute;
  top: 18%;
  left: 9%;
  width: 50%;
  height: 55%;
  pointer-events: none;
}

.ar-face-track i {
  position: absolute;
  width: 34px;
  height: 34px;
  border-color: var(--cyan);
  filter: drop-shadow(0 0 7px rgba(103,220,233,.7));
  animation: tryon-corners 3.8s ease-in-out infinite;
}

.ar-face-track i:nth-child(1) { top: 0; left: 0; border-top: 2px solid; border-left: 2px solid; }
.ar-face-track i:nth-child(2) { top: 0; right: 0; border-top: 2px solid; border-right: 2px solid; }
.ar-face-track i:nth-child(3) { bottom: 0; left: 0; border-bottom: 2px solid; border-left: 2px solid; }
.ar-face-track i:nth-child(4) { right: 0; bottom: 0; border-right: 2px solid; border-bottom: 2px solid; }

.ar-face-track b {
  position: absolute;
  top: 10%;
  right: 7%;
  left: 7%;
  height: 1px;
  background: linear-gradient(90deg, transparent, var(--cyan), #fff, var(--cyan), transparent);
  box-shadow: 0 0 16px var(--cyan);
  animation: tryon-face-scan 3.8s cubic-bezier(.45,0,.55,1) infinite;
}

.ar-frame-switch {
  position: absolute;
  bottom: 104px;
  left: 28px;
  display: flex;
  gap: 6px;
  padding: 7px;
  border: 1px solid rgba(255,255,255,.22);
  border-radius: 999px;
  background: rgba(7,7,10,.66);
  backdrop-filter: blur(12px);
}

.ar-frame-switch span {
  display: grid;
  width: 30px;
  aspect-ratio: 1;
  place-items: center;
  color: #9698a2;
  border-radius: 50%;
  font-size: .42rem;
  font-weight: 850;
  animation: tryon-option 6s ease-in-out infinite;
}

.ar-frame-switch span:nth-child(2) { animation-delay: 2s; }
.ar-frame-switch span:nth-child(3) { animation-delay: 4s; }

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

.ar-tryon-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-tryon-status span { font-size: .56rem; font-weight: 850; letter-spacing: .12em; }
.ar-tryon-status small { color: #a9abb5; font-size: .4rem; letter-spacing: .1em; }

@keyframes tryon-scene-breathe {
  from { transform: scale(1.01); }
  to { transform: scale(1.045); }
}

@keyframes tryon-face-scan {
  0%, 12% { top: 8%; opacity: 0; }
  20% { opacity: 1; }
  72% { top: 88%; opacity: 1; }
  84%, 100% { top: 88%; opacity: 0; }
}

@keyframes tryon-corners {
  0%, 100% { opacity: .48; transform: scale(.94); }
  45%, 75% { opacity: 1; transform: scale(1); }
}

@keyframes tryon-option {
  0%, 22%, 100% { color: #9698a2; background: transparent; box-shadow: none; }
  7%, 15% { color: #071015; background: var(--cyan); box-shadow: 0 0 16px rgba(103,220,233,.65); }
}

@keyframes tryon-status {
  0%, 34% { opacity: .42; transform: translateY(7px); }
  48%, 88% { opacity: 1; transform: translateY(0); }
  100% { opacity: .42; transform: translateY(7px); }
}

@media (max-width: 620px) {
  .ar-tryon-label { top: 18px; left: 18px; }
  .ar-face-track { top: 20%; left: 8%; width: 53%; height: 52%; }
  .ar-frame-switch { bottom: 89px; left: 16px; }
  .ar-tryon-status { right: 16px; bottom: 16px; }
}

@media (prefers-reduced-motion: reduce) {
  .ar-tryon-visual > img,
  .ar-face-track i,
  .ar-face-track b,
  .ar-frame-switch span,
  .ar-tryon-status { animation: none; }
  .ar-face-track b { top: 53%; opacity: .8; }
  .ar-frame-switch span:first-child { color: #071015; background: var(--cyan); }
}