/* ═══════════════════════════════════════════════
   Moirans Exploreur – Effets (voir js/exploreur-fx.js)
   Chargé par exploreur.html et admin.html (aperçu du viseur).
   ═══════════════════════════════════════════════ */

/* ─── VISEUR (superposé à la vidéo de la caméra) ─── */

.xfx-viseur {
  --xfx-coin: rgba(255, 255, 255, .95);
  --xfx-ok: #4ade80;
  position: absolute;
  inset: 0;
  pointer-events: none;
  overflow: hidden;
  border-radius: inherit;
}

/* Zone visée : carré central à 14 % des bords */
.xfx-coin {
  position: absolute;
  width: 26%;
  height: 26%;
  border: 0 solid var(--xfx-coin);
  filter: drop-shadow(0 0 4px rgba(0, 0, 0, .45));
  transition: all .25s cubic-bezier(.3, 1.6, .5, 1);
}
.xfx-coin-hg { top: 14%;    left: 14%;  border-top-width: 4px;    border-left-width: 4px;  border-top-left-radius: 14px; }
.xfx-coin-hd { top: 14%;    right: 14%; border-top-width: 4px;    border-right-width: 4px; border-top-right-radius: 14px; }
.xfx-coin-bg { bottom: 14%; left: 14%;  border-bottom-width: 4px; border-left-width: 4px;  border-bottom-left-radius: 14px; }
.xfx-coin-bd { bottom: 14%; right: 14%; border-bottom-width: 4px; border-right-width: 4px; border-bottom-right-radius: 14px; }

/* 1. Laser : une ligne lumineuse balaie la zone de haut en bas */
.xfx-laser {
  position: absolute;
  left: 16%;
  right: 16%;
  top: 16%;
  height: 3px;
  border-radius: 3px;
  background: linear-gradient(90deg, transparent, var(--xfx-ok) 20%, #d9ffe6 50%, var(--xfx-ok) 80%, transparent);
  box-shadow: 0 0 12px 3px rgba(74, 222, 128, .65);
  animation: xfx-laser 2s ease-in-out infinite alternate;
}
@keyframes xfx-laser {
  from { top: 16%; }
  to   { top: calc(84% - 3px); }
}

/* 2. Pulse : les coins "respirent" */
.xfx-anim-pulse .xfx-coin { animation: xfx-respire 1.4s ease-in-out infinite; }
.xfx-anim-pulse .xfx-coin-hg { transform-origin: 100% 100%; }
.xfx-anim-pulse .xfx-coin-hd { transform-origin: 0 100%; }
.xfx-anim-pulse .xfx-coin-bg { transform-origin: 100% 0; }
.xfx-anim-pulse .xfx-coin-bd { transform-origin: 0 0; }
@keyframes xfx-respire {
  0%, 100% { transform: scale(1);    opacity: .75; }
  50%      { transform: scale(.82);  opacity: 1; }
}

/* 3. Radar : balayage circulaire façon boussole */
.xfx-radar {
  position: absolute;
  inset: 10%;
  border-radius: 50%;
  border: 2px solid rgba(74, 222, 128, .45);
  background:
    radial-gradient(circle, transparent 0 32%, rgba(74, 222, 128, .28) 32.5% 33.5%, transparent 34% 65%, rgba(74, 222, 128, .28) 65.5% 66.5%, transparent 67%),
    linear-gradient(transparent calc(50% - 1px), rgba(74, 222, 128, .25) 0 calc(50% + 1px), transparent 0),
    linear-gradient(90deg, transparent calc(50% - 1px), rgba(74, 222, 128, .25) 0 calc(50% + 1px), transparent 0);
}
.xfx-radar-balai {
  position: absolute;
  inset: 0;
  border-radius: 50%;
  background: conic-gradient(from 0deg, rgba(74, 222, 128, .55), rgba(74, 222, 128, .12) 55deg, transparent 90deg);
  animation: xfx-radar 2.2s linear infinite;
}
@keyframes xfx-radar {
  to { transform: rotate(360deg); }
}
.xfx-anim-radar .xfx-coin { --xfx-coin: rgba(255, 255, 255, .7); }

/* QR repéré : coins resserrés et verts, éclair blanc */
.xfx-flash {
  position: absolute;
  inset: 0;
  background: #fff;
  opacity: 0;
}
.xfx-verrouille .xfx-coin {
  --xfx-coin: var(--xfx-ok);
  animation: none;
  width: 22%;
  height: 22%;
}
.xfx-verrouille .xfx-coin-hg { top: 20%;    left: 20%; }
.xfx-verrouille .xfx-coin-hd { top: 20%;    right: 20%; }
.xfx-verrouille .xfx-coin-bg { bottom: 20%; left: 20%; }
.xfx-verrouille .xfx-coin-bd { bottom: 20%; right: 20%; }
.xfx-verrouille .xfx-laser,
.xfx-verrouille .xfx-radar { opacity: 0; transition: opacity .2s; }
.xfx-verrouille .xfx-flash { animation: xfx-flash .35s ease-out; }
@keyframes xfx-flash {
  0%   { opacity: .55; }
  100% { opacity: 0; }
}


/* ─── CONFETTIS ─── */

.xfx-confettis {
  position: fixed;
  inset: 0;
  width: 100vw;
  height: 100vh;
  pointer-events: none;
  z-index: 9999;
}


/* ─── POP / SECOUSSE ─── */

.xfx-pop {
  animation: xfx-pop .6s cubic-bezier(.25, 1.7, .5, 1) both;
}
@keyframes xfx-pop {
  0%   { transform: scale(0) rotate(-20deg); opacity: 0; }
  60%  { transform: scale(1.25) rotate(6deg); opacity: 1; }
  100% { transform: scale(1) rotate(0); }
}

.xfx-secousse {
  animation: xfx-secousse .5s cubic-bezier(.36, .07, .19, .97) both;
}
@keyframes xfx-secousse {
  10%, 90%      { transform: translateX(-2px) rotate(-2deg); }
  20%, 80%      { transform: translateX(4px)  rotate(3deg); }
  30%, 50%, 70% { transform: translateX(-7px) rotate(-5deg); }
  40%, 60%      { transform: translateX(7px)  rotate(5deg); }
}


/* ─── ACCESSIBILITÉ : mouvements réduits ─── */

@media (prefers-reduced-motion: reduce) {
  .xfx-laser,
  .xfx-radar-balai,
  .xfx-anim-pulse .xfx-coin,
  .xfx-pop,
  .xfx-secousse { animation: none !important; }
  .xfx-laser { top: 50%; }
}