/* ── DCOSMOS-SCANFX: Enhanced scanner visual effects ──────────── */
/* Each effect is independently removable: yank its block + the class
   that triggers it in app.js. All are CSS-driven keyframe animations
   toggled by adding / removing a class on the viewfinder or overlay. */
/* 1. Full-viewfinder scan sweep ──────────────────────────────────
   A wide horizontal line that sweeps the entire viewfinder height while
   the camera is live. Complements the smaller reticle-confined scanline
   already present. Active only while .scanfx-scanning is on the
   viewfinder (camera mode — photo mode never adds it). */
.scanner-viewfinder.scanfx-scanning::before {
  content: "";
  position: absolute;
  left: 0;
  right: 0;
  height: 1px;
  background: linear-gradient(90deg, transparent 5%, var(--accent) 50%, transparent 95%);
  opacity: 0;
  pointer-events: none;
  z-index: 1;
  box-shadow: 0 0 12px rgba(245, 158, 11, 0.25), 0 0 4px var(--accent);
  animation: scanfxSweep 3.5s ease-in-out infinite;
}
@keyframes scanfxSweep {
  0%   { top: 2%;  opacity: 0; }
  8%   { opacity: 0.4; }
  50%  { top: 98%; opacity: 0.25; }
  92%  { opacity: 0.4; }
  100% { top: 2%;  opacity: 0; }
}
/* 2. Detection flash — brief white overlay on new datum capture ──
   Fires each time .scanfx-detected is toggled on the viewfinder (JS
   removes it after the animation so it can re-fire). Sits above the
   video but under buttons so controls stay tappable. */
.scanner-viewfinder.scanfx-detected::after {
  content: "";
  position: absolute;
  inset: 0;
  background: radial-gradient(ellipse at center,
    rgba(255, 255, 255, 0.14) 0%, rgba(245, 158, 11, 0.06) 60%, transparent 100%);
  pointer-events: none;
  z-index: 2;
  animation: scanfxFlash 0.35s ease-out forwards;
}
@keyframes scanfxFlash {
  0%   { opacity: 1; }
  100% { opacity: 0; }
}
/* 3. Lock-on pulse — pulsing inset glow around the viewfinder ────
   Added on the first detection in a session, stays until teardown.
   A slow pulse that says "locked on, still reading". */
.scanner-viewfinder.scanfx-locked {
  animation: scanfxLockPulse 1.6s ease-in-out infinite;
}
@keyframes scanfxLockPulse {
  0%, 100% { box-shadow: inset 0 0 18px rgba(245, 158, 11, 0.04); }
  50%      { box-shadow: inset 0 0 30px rgba(245, 158, 11, 0.1),
                          0 0 12px rgba(245, 158, 11, 0.06); }
}
/* 4. Success burst — radial flash on scan completion ─────────────
   A div inside the viewfinder; JS adds .active on DONE, then tears
   down the overlay after the animation. Short, bright, and radial. */
.scanfx-success-burst {
  position: absolute;
  inset: 0;
  pointer-events: none;
  z-index: 5;
  opacity: 0;
}
.scanfx-success-burst.active {
  animation: scanfxBurst 0.45s ease-out forwards;
}
@keyframes scanfxBurst {
  0% {
    opacity: 1;
    background: radial-gradient(circle at center,
      rgba(245, 158, 11, 0.3) 0%, rgba(245, 158, 11, 0.08) 40%, transparent 70%);
  }
  60% {
    opacity: 0.5;
    background: radial-gradient(circle at center,
      rgba(245, 158, 11, 0.05) 0%, transparent 80%);
  }
  100% {
    opacity: 0;
  }
}
/* ── DCOSMOS-HATCHCEREMONY: barcode detection boxes ──────────────
   Like the iOS camera's yellow barcode indicator. Each box appears
   over its detected code in the live viewfinder and persists until
   the scanner closes. */
.barcode-box-layer {
  position: absolute;
  inset: 0;
  z-index: 3;
  pointer-events: none;
  overflow: hidden;
}
.barcode-detect-box {
  position: absolute;
  border: 2px solid var(--accent);
  border-radius: 8px;
  pointer-events: none;
  box-shadow: 0 0 8px rgba(245, 158, 11, 0.25),
              inset 0 0 6px rgba(245, 158, 11, 0.08);
  transform-origin: center;
  animation: barcodeBoxIn 0.35s ease-out forwards;
  /* DCOSMOS-LIVEBOX: ease the box from one detected spot to the next so it
     follows the code smoothly instead of jumping. */
  transition: left 0.28s ease-out, top 0.28s ease-out,
              width 0.28s ease-out, height 0.28s ease-out,
              border-color 0.2s ease-out, box-shadow 0.2s ease-out;
}
.barcode-detect-box.captured {
  border-color: #34d399;
  box-shadow: 0 0 10px rgba(52, 211, 153, 0.35),
              inset 0 0 6px rgba(52, 211, 153, 0.10);
}
/* Chip-tap highlight (DESIGN_DECISIONS.md section 16a): tapping a chip
   flashes this box over its code's own detection spot in the picture, so
   the player can tell two chips apart by pointing instead of by naming. A
   one-shot flash, removed by JS once the animation finishes. */
.barcode-detect-box.chip-tap-highlight {
  border-color: #fff5da;
  box-shadow: 0 0 16px rgba(255, 212, 121, 0.7),
              inset 0 0 10px rgba(255, 212, 121, 0.4);
  animation: chipTapFlash 0.9s ease-out forwards;
}
@keyframes chipTapFlash {
  0%   { opacity: 0; transform: scale(1.2); }
  15%  { opacity: 1; transform: scale(1); }
  75%  { opacity: 1; }
  100% { opacity: 0; }
}
@keyframes barcodeBoxIn {
  0%   { opacity: 0; transform: scale(0.8); }
  100% { opacity: 1; transform: scale(1); }
}
/* ── DCOSMOS-HATCHCEREMONY: stardust flare per detection ─────────
   A small radial glow + 6 particle dots that radiate outward from
   the detection point. Spawned by JS, auto-removed after animation. */
.stardust-flare {
  position: absolute;
  width: 0;
  height: 0;
  pointer-events: none;
  z-index: 4;
}
.stardust-flare::before {
  content: "";
  position: absolute;
  width: 50px;
  height: 50px;
  border-radius: 50%;
  transform: translate(-50%, -50%);
  background: radial-gradient(circle,
    rgba(245, 210, 100, 0.55) 0%,
    rgba(245, 158, 11, 0.15) 45%,
    transparent 70%);
  animation: stardustGlow 0.6s ease-out forwards;
}
@keyframes stardustGlow {
  0%   { opacity: 1; transform: translate(-50%, -50%) scale(0.2); }
  40%  { opacity: 0.9; transform: translate(-50%, -50%) scale(1.1); }
  100% { opacity: 0; transform: translate(-50%, -50%) scale(1.4); }
}
.stardust-particle {
  position: absolute;
  width: 3px;
  height: 3px;
  border-radius: 50%;
  background: rgba(245, 220, 130, 0.9);
  box-shadow: 0 0 3px rgba(245, 158, 11, 0.5);
  animation: stardustDot 0.55s ease-out forwards;
}
@keyframes stardustDot {
  0%   { opacity: 1; transform: translate(0, 0) scale(1); }
  100% { opacity: 0; transform: translate(var(--dx), var(--dy)) scale(0.2); }
}
/* ── DCOSMOS-HATCHCEREMONY: hatch counter overlay ───────────────
   "2 of 4" indicator on the reveal view during a multi-code hatch
   ceremony. Top-left, semi-transparent, unobtrusive. */
.hatch-counter {
  position: absolute;
  /* SC-HEADER-CLEARANCE: sits below the galaxy button's bottom half, which
     hangs --nav-hang past the divider line this view starts at. */
  top: calc(var(--nav-hang, 42px) + 10px);
  left: 10px;
  z-index: 10;
  padding: 4px 12px;
  background: rgba(8, 14, 26, 0.6);
  border: 1px solid var(--border);
  border-radius: 4px;
  color: var(--text-dim);
  font-size: 12px;
  letter-spacing: 1.5px;
  pointer-events: none;
  animation: hatchCounterIn 0.3s ease-out;
}
@keyframes hatchCounterIn {
  0%   { opacity: 0; transform: translateY(-8px); }
  100% { opacity: 1; transform: translateY(0); }
}
/* ── DCOSMOS-PAUSEKEY: paused chip ──────────────────────────────
   Same quiet corner chip shape as .hatch-counter above, set lower so the
   two never overlap on the rare frame both would show at once. Sits under
   every canvas control (skip, info, scan, probe all live on the right or
   bottom-right), so it never covers anything to tap. */
.paused-chip {
  position: absolute;
  /* Same clearance base as .hatch-counter above, one row further down. */
  top: calc(var(--nav-hang, 42px) + 48px);
  left: 10px;
  z-index: 10;
  padding: 4px 12px;
  background: rgba(8, 14, 26, 0.6);
  border: 1px solid var(--border);
  border-radius: 4px;
  color: var(--text-dim);
  font-size: 12px;
  letter-spacing: 1.5px;
  pointer-events: none;
}
.paused-chip[hidden] { display: none; }
/* Scanner mobile overrides. These must stay AFTER the base scanner rules:
   equal-specificity rules are resolved by file order, so an earlier media
   block would lose to the base rules. */
@media (max-width: 768px) {
  .scanner-reticle { width: min(320px, 85vw); height: 190px; }
  .scanner-scanline { width: min(280px, 76vw); }
}