/* ==========================================================================
   CAPA ANIMADA (AVANÇADO) — tablet e rádio na mesa, em primeiro plano: tela
   do tablet "ligada" pulsando, luz de status piscando no rádio e ondas de
   transmissão saindo da antena.
   O JS (capa-animada.js) cria a camada .qs-fx exatamente sobre a foto
   (mesmo enquadramento do object-fit: cover), então as posições abaixo são
   % da foto original (1672×941) e os tamanhos usam cqw (largura da camada).
   Para desfazer: remova o <link> e o <script>.
   ========================================================================== */
.qs-fx {
  position: absolute;
  container-type: size;
  pointer-events: none;
  overflow: visible;
}
.qs-fx > i {
  position: absolute;
  display: block;
  border-radius: 50%;
  will-change: transform, opacity;
}

/* retângulo da tela do tablet — recorta o brilho e a varredura por dentro */
.qs-fx-tablet {
  border-radius: 4%;
  overflow: hidden;
  transform: rotate(-4deg);
}
.qs-fx-tablet-glow {
  position: absolute;
  inset: 0;
  background: radial-gradient(ellipse at 50% 40%, rgba(90, 170, 255, .55) 0%, rgba(50, 110, 220, .28) 55%, transparent 85%);
  mix-blend-mode: screen;
  animation: qsFxTabletGlow 2.6s ease-in-out infinite alternate;
}
@keyframes qsFxTabletGlow {
  0%   { opacity: .55; }
  100% { opacity: 1; }
}
.qs-fx-tablet-scan {
  position: absolute;
  left: 0; right: 0;
  height: 22%;
  background: linear-gradient(180deg, transparent 0%, rgba(160, 210, 255, .45) 50%, transparent 100%);
  animation: qsFxTabletScan 3.2s ease-in-out infinite;
}
@keyframes qsFxTabletScan {
  0%   { top: -25%; opacity: 0; }
  10%  { opacity: .9; }
  90%  { opacity: .9; }
  100% { top: 100%; opacity: 0; }
}

/* luz de status piscando no corpo do rádio */
.qs-fx-led {
  width: .5cqw; height: .5cqw;
  margin: -.25cqw 0 0 -.25cqw;
  background: #ff5a4d;
  box-shadow: 0 0 6px 2px rgba(255, 90, 77, .9);
  opacity: 0;
  animation: qsFxLed 1.3s ease-in-out infinite;
}
@keyframes qsFxLed {
  0%, 100% { opacity: 0; }
  50%      { opacity: 1; }
}

/* ondas de transmissão saindo da ponta da antena do rádio */
.qs-fx-ring {
  width: 1.2cqw; height: 1.2cqw;
  margin: -.6cqw 0 0 -.6cqw;
  border: 1.5px solid rgba(255, 255, 255, .6);
  opacity: 0;
  animation: qsFxRingPulse 2.2s ease-out var(--dl, 0s) infinite;
}
@keyframes qsFxRingPulse {
  0%   { opacity: 0;  transform: scale(.3); }
  18%  { opacity: .8; }
  100% { opacity: 0;  transform: scale(6); }
}

/* pulso de localização (ping) no ponto do mapa de papel onde a caneta aponta */
.qs-fx-pin-dot {
  width: 1cqw; height: 1cqw;
  margin: -.5cqw 0 0 -.5cqw;
  background: radial-gradient(circle at 35% 30%, #fff 0%, #F4D242 45%, #D4B020 100%);
  box-shadow: 0 0 10px 3px rgba(244, 210, 66, .75);
  animation: qsFxPinDot 1.6s ease-in-out infinite;
}
@keyframes qsFxPinDot {
  0%, 100% { transform: scale(.85); }
  50%      { transform: scale(1.15); }
}
.qs-fx-pin-ring {
  width: 1cqw; height: 1cqw;
  margin: -.5cqw 0 0 -.5cqw;
  border: 2px solid rgba(244, 210, 66, .55);
  opacity: 0;
  animation: qsFxPinRing 1.8s ease-out var(--dl, 0s) infinite;
}
@keyframes qsFxPinRing {
  0%   { opacity: 0;  transform: scale(.4); }
  20%  { opacity: .8; }
  100% { opacity: 0;  transform: scale(4.5); }
}

@media (prefers-reduced-motion: reduce) {
  .qs-fx > i, .qs-fx-tablet-scan, .qs-fx-tablet-glow { animation: none !important; }
  .qs-fx-tablet-scan, .qs-fx-led, .qs-fx-ring, .qs-fx-pin-ring { display: none; }
  .qs-fx-tablet-glow { opacity: .55; }
}