/* ═══════════════════════════════════════════
   ANIMATIONS — Cursor mira, keyframes
   TFAR Web · tfarafaela.ar
═══════════════════════════════════════════ */

/* ── CURSOR MIRA ── */
.mira {
  position: fixed; pointer-events: none; z-index: 9999;
  transform: translate(-50%, -50%);
}
.mira svg { width: 40px; height: 40px; transition: width .2s, height .2s; }
.mira .re { stroke: var(--azul); stroke-width: 1.2; fill: none; opacity: .6; }
.mira .ri { stroke: var(--oro); stroke-width: .8; fill: none; opacity: .7; }
.mira .pt { fill: var(--oro); }
.mira .lh, .mira .lv { stroke: var(--azul); stroke-width: .9; opacity: .55; }

.mira-lag {
  position: fixed; pointer-events: none; z-index: 9998;
  width: 5px; height: 5px; border-radius: 50%;
  background: var(--oro); opacity: .5;
  transform: translate(-50%, -50%);
  transition: left .2s ease-out, top .2s ease-out;
}

body.hov .mira svg { width: 54px; height: 54px; }
body.hov .mira .pt { fill: transparent; }
body.hov .mira .re { opacity: .9; stroke: var(--oro); }
body.hov .mira .ri { opacity: .4; }

/* ── KEYFRAMES ── */
@keyframes fup   { from { opacity: 0; transform: translateY(18px); } to { opacity: 1; transform: translateY(0); } }
@keyframes fleft { from { opacity: 0; transform: translateX(18px); } to { opacity: 1; transform: translateX(0); } }
@keyframes spin  { to { transform: translateY(-50%) rotate(360deg); } }
@keyframes mp    {
  0%   { transform: translate(-50%,-50%) scale(.4); opacity: 1; }
  100% { transform: translate(-50%,-50%) scale(2);  opacity: 0; }
}

/* ── TOUCH: ocultar cursor custom ── */
@media (hover: none) {
  .mira, .mira-lag { display: none; }
  body { cursor: auto; }
  a, button { cursor: pointer; }
}