/* Omega Airsoft: motion nos tres cards de categorias.
   Inspiracao: 21st.dev Collection Surfer / Marquee (conceitos visuais; implementacao propria).
   Sem dependencia React/Motion. Escopo: #arsenal .kits. */

#arsenal.omega21-motion .kit__media {
  isolation: isolate;
  transform: perspective(1100px) rotateX(var(--omega21-rotate-x, 0deg)) rotateY(var(--omega21-rotate-y, 0deg));
  transform-style: preserve-3d;
  transition: transform 400ms cubic-bezier(.22,1,.36,1);
}
#arsenal.omega21-motion .kit__media img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  backface-visibility: hidden;
  transform: translate3d(-1.3%, -1%, 0) scale(1.09);
  animation: omega21-photo-drift 18s ease-in-out infinite;
  will-change: transform;
}
#arsenal.omega21-motion .kit:nth-child(2) .kit__media img {
  animation-duration: 21s;
  animation-delay: -7s;
}
#arsenal.omega21-motion .kit:nth-child(3) .kit__media img {
  animation-duration: 19s;
  animation-delay: -12s;
}
/* A imagem se move dentro do card: sem duplicar fotos nem mexer no catalogo. */
@keyframes omega21-photo-drift {
  0%, 100% { transform: translate3d(-1.3%, -1%, 0) scale(1.09); }
  33% { transform: translate3d(1.4%, -.35%, 0) scale(1.145); }
  68% { transform: translate3d(-.4%, 1.1%, 0) scale(1.11); }
}
/* Um reflexo leve percorre a imagem, mas o filtro e CTAs continuam clicaveis. */
#arsenal.omega21-motion .kit__media::before {
  content: '';
  position: absolute;
  inset: -50%;
  z-index: 1;
  pointer-events: none;
  background: linear-gradient(104deg, transparent 43%, rgba(255,255,255,.075) 49%, transparent 56%);
  transform: translate3d(-45%,0,0) rotate(-9deg);
  animation: omega21-sheen 13s ease-in-out infinite;
}
#arsenal.omega21-motion .kit:nth-child(2) .kit__media::before { animation-delay: -5s; }
#arsenal.omega21-motion .kit:nth-child(3) .kit__media::before { animation-delay: -9s; }
@keyframes omega21-sheen {
  0%, 14% { transform: translate3d(-45%,0,0) rotate(-9deg); }
  45%, 100% { transform: translate3d(45%,0,0) rotate(-9deg); }
}
#arsenal.omega21-motion .kit__media::after { z-index: 2; pointer-events: none; }
#arsenal.omega21-motion .kit__body { z-index: 3; }
/* Hover reforca profundidade, sem interromper o movimento natural. */
@media (hover: hover) and (pointer: fine) {
  #arsenal.omega21-motion .kit:hover .kit__media img { filter: saturate(1.12) contrast(1.04); }
}
#arsenal.omega21-motion .omega21-motion-controls {
  display: flex;
  justify-content: flex-end;
  margin: 0 0 14px;
}
#arsenal.omega21-motion .omega21-motion-toggle {
  display: inline-flex;
  align-items: center;
  gap: 9px;
  border: 1px solid rgba(255,255,255,.28);
  background: rgba(0,0,0,.42);
  border-radius: 999px;
  color: #f7f7f7;
  font: 600 12px/1.1 var(--font-body, system-ui, sans-serif);
  letter-spacing: .04em;
  padding: 10px 16px;
  cursor: pointer;
  transition: border-color .2s ease, background .2s ease;
}
#arsenal.omega21-motion .omega21-motion-toggle:hover,
#arsenal.omega21-motion .omega21-motion-toggle:focus-visible {
  border-color: #eb353b;
  background: rgba(192,32,37,.18);
}
#arsenal.omega21-motion .omega21-motion-toggle:focus-visible { outline: 2px solid white; outline-offset: 3px; }
#arsenal.omega21-motion .omega21-motion-toggle::before {
  content: '';
  width: 9px;
  height: 9px;
  border-radius: 100%;
  background: #ed353d;
  box-shadow: 0 0 0 3px rgba(237,53,61,.13);
}
#arsenal.omega21-motion.omega21-paused .kit__media img,
#arsenal.omega21-motion.omega21-paused .kit__media::before,
#arsenal.omega21-motion.omega21-offscreen .kit__media img,
#arsenal.omega21-motion.omega21-offscreen .kit__media::before {
  animation-play-state: paused;
}
@media (prefers-reduced-motion: reduce) {
  #arsenal.omega21-motion .kit__media { transform: none !important; transition: none !important; }
  #arsenal.omega21-motion .kit__media img { animation: none !important; transform: none !important; will-change: auto; }
  #arsenal.omega21-motion .kit__media::before { display: none !important; }
  #arsenal.omega21-motion .omega21-motion-controls { display: none; }
}