/* ============================================================
   TETRA CON — Animations
   ============================================================ */

@keyframes fadeUp {
  from { opacity: 0; transform: translateY(16px); }
  to { opacity: 1; transform: translateY(0); }
}

@keyframes floatY {
  0%, 100% { transform: translateY(0) rotate(0deg); }
  50% { transform: translateY(-18px) rotate(4deg); }
}

@keyframes floatX {
  0%, 100% { transform: translateX(0); }
  50% { transform: translateX(14px); }
}

@keyframes pulseRing {
  0% { transform: scale(0.9); opacity: 0.7; }
  70% { transform: scale(1.4); opacity: 0; }
  100% { opacity: 0; }
}

@keyframes rotateSlow {
  from { transform: rotate(0deg); }
  to { transform: rotate(360deg); }
}

@keyframes gradientShift {
  0%, 100% { background-position: 0% 50%; }
  50% { background-position: 100% 50%; }
}

@keyframes typing {
  from { width: 0; }
  to { width: 100%; }
}

@keyframes blink {
  50% { opacity: 0; }
}

@keyframes shimmer {
  0% { background-position: -200% 0; }
  100% { background-position: 200% 0; }
}

.hero-shape { animation: floatY 8s ease-in-out infinite; }
.hero-shape.slow { animation-duration: 13s; }
.hero-shape.reverse { animation-direction: reverse; }

.anim-rotate-slow { animation: rotateSlow 26s linear infinite; }

.pulse-dot { position: relative; }
.pulse-dot::after {
  content: "";
  position: absolute; inset: -6px;
  border-radius: 50%;
  border: 1px solid var(--cyan-400);
  animation: pulseRing 2.4s ease-out infinite;
}

/* Button ripple */
.btn { position: relative; overflow: hidden; }
.ripple {
  position: absolute;
  border-radius: 50%;
  background: rgba(255,255,255,0.5);
  transform: scale(0);
  animation: rippleAnim 650ms var(--ease-out);
  pointer-events: none;
}
@keyframes rippleAnim {
  to { transform: scale(3); opacity: 0; }
}

/* Cursor follower (desktop only) */
.cursor-dot {
  position: fixed;
  width: 10px; height: 10px;
  border-radius: 50%;
  background: var(--cyan-400);
  pointer-events: none;
  z-index: 999;
  transform: translate(-50%, -50%);
  transition: opacity 200ms ease, transform 120ms ease-out;
  mix-blend-mode: difference;
  opacity: 0;
}
.cursor-ring {
  position: fixed;
  width: 34px; height: 34px;
  border-radius: 50%;
  border: 1px solid var(--cyan-300);
  pointer-events: none;
  z-index: 999;
  transform: translate(-50%, -50%);
  transition: opacity 200ms ease, width 200ms ease, height 200ms ease, transform 260ms cubic-bezier(0.16,1,0.3,1);
  opacity: 0;
}
.cursor-active .cursor-dot, .cursor-active .cursor-ring { opacity: 1; }
.cursor-ring.is-hovering { width: 54px; height: 54px; border-color: var(--cyan-400); }