/* SUPER Ascii Cam — DOM effects layer: sparkles, rings, flying text, the photo card, the power-on line. */
.fx-layer { position: fixed; inset: 0; z-index: 7; overflow: hidden; contain: strict; }

.spark {
  position: absolute; left: 0; top: 0; border-radius: 50%;
  box-shadow: 0 0 10px currentColor, 0 0 3px #fff;
  will-change: transform, opacity;
}
.spark--star {
  border-radius: 0; box-shadow: none;
  clip-path: polygon(50% 0, 61% 39%, 100% 50%, 61% 61%, 50% 100%, 39% 61%, 0 50%, 39% 39%);
  filter: drop-shadow(0 0 4px currentColor) brightness(1.25);
}
.fx-ring {
  position: absolute; border-radius: 50%; border: 3px solid currentColor;
  box-shadow: 0 0 18px currentColor, inset 0 0 14px currentColor;
  will-change: transform, opacity;
}
.fly-text {
  position: absolute; font-family: var(--font-ui); font-weight: 700; letter-spacing: .05em; white-space: nowrap;
  text-shadow: 0 0 18px currentColor, 0 0 4px currentColor, 0 2px 10px rgba(0,0,0,.85);
}
.fly-card {
  position: absolute; overflow: hidden; background: #000;
  transform-origin: 50% 50%; will-change: transform;
}
.fly-card > img, .fly-card > canvas { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; display: block; }
.fly-card__flash { position: absolute; inset: 0; background: #fff; pointer-events: none; }
.power-line {
  position: absolute; left: 50%; top: 50%; width: 100vw; height: 26px;
  background:
    linear-gradient(180deg, transparent 44%, #fff 47%, #fff 53%, transparent 56%),
    radial-gradient(50% 50% at 50% 50%, color-mix(in srgb, var(--accent) 85%, #fff) 0, color-mix(in srgb, var(--accent) 40%, transparent) 45%, transparent 100%);
  -webkit-mask: linear-gradient(90deg, transparent, #000 10%, #000 90%, transparent);
  mask: linear-gradient(90deg, transparent, #000 10%, #000 90%, transparent);
  mix-blend-mode: screen;
}