.flip-stack {
    position: absolute;
    inset: 0;
    transform: scaleX(-1);
    transform-origin: center center;
    z-index: 1;
  }
  
  #preview {
    width: 100%;
    height: 100%;
    object-fit: cover;
  }

  .face-scan-mesh {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    z-index: 2;
    pointer-events: none;
    opacity: 0;
    transition: opacity 0.35s ease;
  }

  .face-scan-mesh:not(.hidden) {
    /* Normal (source-over) compositing: low-alpha lines paint directly onto
       the skin like Shen.AI — screen blend made it read as a mirror/hologram
       sheet floating above the face. */
    opacity: 1;
  }

  .face-scan-mesh.is-fading-out {
    opacity: 0;
  }

  .face-scan-fx {
    position: absolute;
    inset: 0;
    z-index: 2;
    pointer-events: none;
    opacity: 0;
    transition: opacity 0.35s ease;
  }
  
  .face-scan-fx:not(.hidden) {
    opacity: 1;
  }
  
  .face-scan-fx--paused .face-scan-fx-wave {
    animation-play-state: paused;
    opacity: 0.28;
  }
  
  .face-scan-fx--paused .face-scan-fx-tint {
    opacity: 0.32;
  }

  .face-scan-fx-clip {
    position: absolute;
    inset: 0;
    display: flex;
    align-items: center;
    justify-content: center;
    clip-path: inset(0);
    filter: saturate(1.04) contrast(1.02);
    transition: clip-path 0.08s linear;
  }
  
  .face-scan-fx-tint {
    position: absolute;
    inset: 0;
    background: linear-gradient(
      155deg,
      rgba(76, 160, 240, 0.12) 0%,
      rgba(140, 200, 255, 0.16) 45%,
      rgba(61, 156, 245, 0.1) 100%
    );
    mix-blend-mode: soft-light;
    opacity: 0.18;
    transition: opacity 0.3s ease;
  }
  
  .face-scan-fx-wave {
    /* Directional movement now belongs to the triangular face mesh itself.
       Suppress the legacy full-frame beam so it cannot be mistaken for the
       requested face-net animation while landmarks are warming up. */
    display: none;
  }

  /* When mesh is active, kill CSS beam/tint so only canvas overlay shows. */
  .flip-stack:has(.face-scan-mesh:not(.hidden)) .face-scan-fx-wave,
  .flip-stack:has(.face-scan-mesh:not(.hidden)) .face-scan-fx-tint {
    opacity: 0 !important;
    animation: none !important;
  }

  @media (prefers-reduced-motion: reduce) {
    .face-scan-fx-wave {
      animation: none !important;
      transform: translateY(8%);
      opacity: 0.55;
    }
  }