.canvas-wrap.is-analyzing #photo,
.canvas-wrap.is-analyzing #preview-image {
  opacity: 0.2;
  filter: brightness(0.12) saturate(1.18) contrast(1.28) hue-rotate(-8deg) blur(1.4px);
  transition: opacity 420ms ease, filter 420ms ease;
}

.canvas-wrap.is-analyzing #photo-bg {
  opacity: 0.42;
  filter: blur(34px) saturate(0.95) brightness(0.22);
  transform: scale(1.14);
  transition: opacity 420ms ease, filter 420ms ease, transform 420ms ease;
}

.analysis-hud {
  --analysis-primary: #00f5ff;
  --analysis-secondary: #ff26c6;
  --analysis-accent: #fff26d;
  --analysis-danger: #ff2c6d;
  --analysis-shadow: #7137ff;
  --analysis-primary-rgb: 0, 245, 255;
  --analysis-secondary-rgb: 255, 38, 198;
  --analysis-accent-rgb: 255, 242, 109;
  --analysis-danger-rgb: 255, 44, 109;
  --analysis-shadow-rgb: 113, 55, 255;
  position: absolute;
  inset: 0;
  z-index: 7;
  display: none;
  pointer-events: none;
  overflow: hidden;
  color: #f3efe7;
  background:
    radial-gradient(circle at 50% 34%, rgba(var(--analysis-secondary-rgb), 0.22), transparent 18%),
    radial-gradient(circle at 24% 56%, rgba(var(--analysis-primary-rgb), 0.2), transparent 24%),
    radial-gradient(circle at 78% 28%, rgba(var(--analysis-shadow-rgb), 0.2), transparent 20%),
    linear-gradient(115deg, rgba(1, 4, 9, 0.82), rgba(7, 10, 23, 0.7) 48%, rgba(4, 2, 11, 0.86));
  opacity: 0;
  animation: sourceFadeIn 520ms ease forwards;
}

.canvas-wrap.is-analyzing .analysis-hud {
  display: block;
}

.analysis-hud.is-finishing {
  animation: finishFlash 620ms ease forwards;
}

.analysis-hud::before,
.analysis-hud::after {
  content: "";
  position: absolute;
  inset: 0;
  pointer-events: none;
}

.analysis-hud::before {
  background:
    linear-gradient(rgba(var(--analysis-primary-rgb), 0.14) 1px, transparent 1px),
    linear-gradient(90deg, rgba(var(--analysis-secondary-rgb), 0.1) 1px, transparent 1px),
    repeating-linear-gradient(0deg, rgba(255, 255, 255, 0.035) 0 1px, transparent 1px 5px),
    repeating-linear-gradient(90deg, transparent 0 70px, rgba(var(--analysis-secondary-rgb), 0.08) 70px 72px, transparent 72px 148px);
  background-size: 100% 30px, 30px 100%, 100% 6px;
  opacity: 0.55;
  animation: scanGridDrift 4.8s linear infinite;
}

.analysis-hud::after {
  background:
    radial-gradient(circle at 38% 34%, rgba(var(--analysis-danger-rgb), 0.42), transparent 7%),
    radial-gradient(ellipse at 35% 65%, rgba(var(--analysis-primary-rgb), 0.3), transparent 14%),
    radial-gradient(ellipse at 62% 56%, rgba(var(--analysis-shadow-rgb), 0.28), transparent 18%),
    radial-gradient(circle at 61% 27%, rgba(var(--analysis-accent-rgb), 0.26), transparent 10%);
  filter: blur(1px);
  opacity: 0;
  animation: lightPreview 4.8s ease-in-out 900ms infinite;
}

.analysis-glitch {
  position: absolute;
  inset: 0;
  opacity: 0.72;
  mix-blend-mode: screen;
  background:
    linear-gradient(90deg, transparent 0 8%, rgba(var(--analysis-secondary-rgb), 0.18) 8.2% 8.8%, transparent 9% 46%, rgba(var(--analysis-primary-rgb), 0.15) 46.2% 47%, transparent 47.2%),
    repeating-linear-gradient(0deg, transparent 0 22px, rgba(var(--analysis-primary-rgb), 0.07) 22px 23px, transparent 23px 44px);
  clip-path: polygon(0 9%, 100% 7%, 100% 14%, 0 16%, 0 34%, 100% 32%, 100% 39%, 0 41%, 0 76%, 100% 74%, 100% 80%, 0 82%);
  animation: glitchShift 1.4s steps(2, end) infinite;
}

.analysis-scanline {
  position: absolute;
  left: -12%;
  right: -12%;
  top: -14%;
  height: 16%;
  background:
    linear-gradient(to bottom, transparent, rgba(var(--analysis-secondary-rgb), 0.16), rgba(var(--analysis-primary-rgb), 0.7), rgba(var(--analysis-accent-rgb), 0.32), transparent);
  box-shadow: 0 0 38px rgba(var(--analysis-primary-rgb), 0.42), 0 0 96px rgba(var(--analysis-secondary-rgb), 0.26);
  animation: scanSweep 2.9s cubic-bezier(0.45, 0, 0.2, 1) infinite;
}

.analysis-corners {
  position: absolute;
  inset: 6.5%;
  border: 1px solid rgba(var(--analysis-primary-rgb), 0.22);
  background:
    linear-gradient(var(--analysis-primary), var(--analysis-primary)) left top / 76px 2px no-repeat,
    linear-gradient(var(--analysis-secondary), var(--analysis-secondary)) left top / 2px 76px no-repeat,
    linear-gradient(var(--analysis-primary), var(--analysis-primary)) right top / 76px 2px no-repeat,
    linear-gradient(var(--analysis-secondary), var(--analysis-secondary)) right top / 2px 76px no-repeat,
    linear-gradient(var(--analysis-secondary), var(--analysis-secondary)) left bottom / 76px 2px no-repeat,
    linear-gradient(var(--analysis-primary), var(--analysis-primary)) left bottom / 2px 76px no-repeat,
    linear-gradient(var(--analysis-secondary), var(--analysis-secondary)) right bottom / 76px 2px no-repeat,
    linear-gradient(var(--analysis-primary), var(--analysis-primary)) right bottom / 2px 76px no-repeat;
  opacity: 0.82;
  animation: cornerFlicker 1.4s steps(2, end) infinite;
}

.analysis-contours {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  opacity: 0;
  filter: drop-shadow(0 0 8px rgba(var(--analysis-primary-rgb), 0.42)) drop-shadow(6px 0 0 rgba(var(--analysis-secondary-rgb), 0.1));
  animation: contourReveal 4.2s ease-in-out 420ms infinite;
}

.analysis-contours path,
.analysis-contours ellipse {
  fill: none;
  stroke-linecap: round;
  stroke-linejoin: round;
  vector-effect: non-scaling-stroke;
}

.analysis-focal {
  position: absolute;
  left: 50%;
  top: 34%;
  width: min(28vw, 310px);
  aspect-ratio: 1;
  transform: translate(-50%, -50%);
  border-radius: 50%;
  background: radial-gradient(circle, rgba(var(--analysis-secondary-rgb), 0.48), rgba(var(--analysis-danger-rgb), 0.2) 42%, transparent 68%);
  box-shadow: 0 0 68px rgba(var(--analysis-secondary-rgb), 0.34), 0 0 96px rgba(var(--analysis-primary-rgb), 0.12);
  opacity: 0;
  animation: focalPulse 2.8s ease-in-out 760ms infinite;
}

.analysis-reticle {
  position: absolute;
  left: 50%;
  top: 48%;
  width: min(38vw, 430px);
  aspect-ratio: 1;
  transform: translate(-50%, -50%);
  border: 1px solid rgba(var(--analysis-primary-rgb), 0.36);
  border-radius: 50%;
  box-shadow:
    0 0 0 28px rgba(var(--analysis-secondary-rgb), 0.04),
    inset 0 0 52px rgba(var(--analysis-primary-rgb), 0.12),
    0 0 90px rgba(var(--analysis-secondary-rgb), 0.14);
  animation: reticleBreath 1.9s ease-in-out infinite;
}

.analysis-reticle::before,
.analysis-reticle::after {
  content: "";
  position: absolute;
  border-radius: 50%;
}

.analysis-reticle::before {
  inset: 14%;
  border: 2px dashed rgba(var(--analysis-primary-rgb), 0.58);
  animation: reticleSpin 8s linear infinite;
}

.analysis-reticle::after {
  inset: 28%;
  border-top: 3px solid var(--analysis-secondary);
  border-right: 3px solid rgba(var(--analysis-primary-rgb), 0.16);
  border-bottom: 3px solid rgba(var(--analysis-primary-rgb), 0.54);
  border-left: 3px solid rgba(var(--analysis-secondary-rgb), 0.16);
  animation: reticleSpin 2.5s linear infinite reverse;
}

.analysis-neural {
  position: absolute;
  inset: 0;
}

.analysis-neural i,
.analysis-marker {
  position: absolute;
  width: 9px;
  height: 9px;
  border-radius: 50%;
  background: rgba(0, 216, 255, 0.92);
  box-shadow: 0 0 16px currentColor;
  opacity: 0;
  animation: markerPop 3.4s ease-in-out infinite;
}

.analysis-neural i::after {
  content: "";
  position: absolute;
  left: 8px;
  top: 4px;
  width: 112px;
  height: 1px;
  background: linear-gradient(90deg, currentColor, transparent);
  transform-origin: left center;
  transform: rotate(var(--angle, 0deg));
  opacity: 0.46;
}

.analysis-neural i:nth-child(1) { left: 21%; top: 34%; color: var(--analysis-primary); --angle: 18deg; animation-delay: 0.2s; }
.analysis-neural i:nth-child(2) { left: 37%; top: 24%; color: var(--analysis-secondary); --angle: 125deg; animation-delay: 0.55s; }
.analysis-neural i:nth-child(3) { left: 58%; top: 36%; color: var(--analysis-danger); --angle: 204deg; animation-delay: 0.9s; }
.analysis-neural i:nth-child(4) { left: 67%; top: 62%; color: var(--analysis-shadow); --angle: 156deg; animation-delay: 1.25s; }
.analysis-neural i:nth-child(5) { left: 33%; top: 72%; color: var(--analysis-primary); --angle: -24deg; animation-delay: 1.6s; }
.analysis-neural i:nth-child(6) { left: 76%; top: 28%; color: var(--analysis-secondary); --angle: 180deg; animation-delay: 1.95s; }

.analysis-marker {
  border: 1px solid rgba(255, 255, 255, 0.5);
}

.analysis-marker.red { left: 47%; top: 35%; color: var(--analysis-danger); background: var(--analysis-danger); animation-delay: 0.8s; }
.analysis-marker.blue { left: 35%; top: 61%; color: var(--analysis-primary); background: var(--analysis-primary); animation-delay: 1.15s; }
.analysis-marker.purple { left: 61%; top: 58%; color: var(--analysis-shadow); background: var(--analysis-shadow); animation-delay: 1.5s; }
.analysis-marker.yellow { left: 52%; top: 24%; color: var(--analysis-accent); background: var(--analysis-accent); animation-delay: 1.85s; }

.analysis-palette {
  position: absolute;
  left: 50%;
  bottom: 34px;
  display: flex;
  gap: 8px;
  transform: translateX(-50%);
  padding: 10px 12px;
  border: 1px solid rgba(var(--analysis-primary-rgb), 0.24);
  border-radius: 5px;
  background: linear-gradient(90deg, rgba(3, 9, 18, 0.8), rgba(var(--analysis-secondary-rgb), 0.14));
  box-shadow: 0 18px 52px rgba(0, 0, 0, 0.36), inset 0 0 24px rgba(var(--analysis-secondary-rgb), 0.08);
  z-index: 2;
}

.analysis-palette i {
  width: 24px;
  height: 24px;
  border-radius: 3px;
  border: 1px solid rgba(255, 255, 255, 0.18);
  background: var(--c);
  opacity: 0;
  transform: translateY(10px);
  animation: paletteChip 2.8s ease-in-out infinite;
  animation-delay: var(--d);
}

.analysis-status {
  position: absolute;
  left: max(28px, 16vw);
  bottom: 94px;
  min-width: min(540px, 74vw);
  border: 1px solid rgba(var(--analysis-primary-rgb), 0.34);
  border-radius: 5px;
  padding: 13px 15px;
  background: linear-gradient(90deg, rgba(3, 9, 18, 0.9), rgba(var(--analysis-secondary-rgb), 0.16));
  box-shadow: 0 18px 52px rgba(0, 0, 0, 0.38), inset 0 0 0 1px rgba(var(--analysis-secondary-rgb), 0.12), 0 0 34px rgba(var(--analysis-primary-rgb), 0.1);
  color: #f3efe7;
  font: 700 12px/1.35 "JetBrains Mono", monospace;
  text-transform: uppercase;
  letter-spacing: 0.06em;
  z-index: 2;
}

.analysis-status strong {
  color: var(--analysis-primary);
  text-shadow: 0 0 14px rgba(var(--analysis-primary-rgb), 0.46);
}

.analysis-stage-text::after {
  content: "";
  animation: analyzingDots 1.2s steps(4, end) infinite;
}

@keyframes sourceFadeIn {
  from { opacity: 0; backdrop-filter: blur(0); }
  to { opacity: 1; backdrop-filter: blur(1px); }
}

@keyframes finishFlash {
  0% { opacity: 1; filter: brightness(1); }
  45% { opacity: 1; filter: brightness(1.85) saturate(1.3); }
  100% { opacity: 0; filter: brightness(1); }
}

@keyframes scanGridDrift {
  from { background-position: 0 0, 0 0, 0 0; }
  to { background-position: 0 60px, 60px 0, 0 30px; }
}

@keyframes scanSweep {
  0% { transform: translateY(0); opacity: 0; }
  10% { opacity: 1; }
  82% { opacity: 0.95; }
  100% { transform: translateY(820%); opacity: 0; }
}

@keyframes glitchShift {
  0%, 100% { transform: translate3d(0, 0, 0); opacity: 0.35; }
  18% { transform: translate3d(12px, -2px, 0); opacity: 0.76; }
  20% { transform: translate3d(-8px, 3px, 0); opacity: 0.4; }
  58% { transform: translate3d(5px, 0, 0); opacity: 0.62; }
  60% { transform: translate3d(-14px, 1px, 0); opacity: 0.32; }
}

@keyframes contourReveal {
  0%, 18% { opacity: 0; stroke-dashoffset: 120; }
  42%, 78% { opacity: 0.82; stroke-dashoffset: 0; }
  100% { opacity: 0.22; stroke-dashoffset: -80; }
}

@keyframes focalPulse {
  0%, 100% { opacity: 0.1; transform: translate(-50%, -50%) scale(0.86); }
  45% { opacity: 0.86; transform: translate(-50%, -50%) scale(1.08); }
}

@keyframes lightPreview {
  0%, 18% { opacity: 0; }
  46%, 76% { opacity: 1; }
  100% { opacity: 0.34; }
}

@keyframes reticleBreath {
  0%, 100% { opacity: 0.64; transform: translate(-50%, -50%) scale(0.98); }
  50% { opacity: 1; transform: translate(-50%, -50%) scale(1.035); }
}

@keyframes reticleSpin {
  to { transform: rotate(360deg); }
}

@keyframes markerPop {
  0%, 16% { opacity: 0; transform: scale(0.4); }
  30%, 74% { opacity: 1; transform: scale(1); }
  100% { opacity: 0.18; transform: scale(1.75); }
}

@keyframes paletteChip {
  0%, 18% { opacity: 0; transform: translateY(10px); }
  38%, 82% { opacity: 1; transform: translateY(0); }
  100% { opacity: 0.38; transform: translateY(0); }
}

@keyframes cornerFlicker {
  0%, 100% { opacity: 0.62; }
  50% { opacity: 0.96; }
}

@keyframes analyzingDots {
  0% { content: ""; }
  25% { content: "."; }
  50% { content: ".."; }
  75%, 100% { content: "..."; }
}