/* INFI-BOARD Keyframe Animations */

@keyframes classSplashLogoZoom {
  0% { transform: translateY(7px) scale(0.88); }
  50% { transform: translateY(-5px) scale(1.06); }
  100% { transform: translateY(0) scale(1); }
}

@keyframes classSplashRingPulse {
  0%, 100% { opacity: 0.58; transform: scale(0.97); }
  50% { opacity: 0.96; transform: scale(1.03); }
}

@keyframes classSplashRingRotate {
  to { rotate: 360deg; }
}

@keyframes classSplashAura {
  0%, 100% { opacity: 0.58; transform: scale(0.95); }
  50% { opacity: 1; transform: scale(1.08); }
}

@keyframes classSplashTextPulse {
  0% { opacity: 0; transform: translateY(8px); }
  24%, 100% { opacity: 0.88; transform: translateY(0); }
  50% { opacity: 1; }
}

@keyframes creatorGlow {
      0%, 100% {
        opacity: 0.82;
        text-shadow:
          0 0 7px rgba(56, 189, 248, 0.78),
          0 0 16px rgba(37, 99, 235, 0.55),
          0 0 26px rgba(14, 165, 233, 0.28);
      }
      50% {
        opacity: 1;
        text-shadow:
          0 0 10px rgba(56, 189, 248, 1),
          0 0 24px rgba(37, 99, 235, 0.84),
          0 0 42px rgba(14, 165, 233, 0.48);
      }
    }

@keyframes draw-over-pulse {
      0%, 100% { opacity: 1; transform: scale(1); }
      50% { opacity: 0.6; transform: scale(0.8); }
    }

@keyframes orbFloat1 {
      0% { transform: translate(0, 0) scale(1); }
      100% { transform: translate(60px, 40px) scale(1.08); }
    }

@keyframes orbFloat2 {
      0% { transform: translate(0, 0) scale(1); }
      100% { transform: translate(-50px, -60px) scale(1.1); }
    }

@keyframes orbFloat3 {
      0% { transform: translate(0, 0) scale(1); }
      100% { transform: translate(40px, -30px) scale(0.95); }
    }

@keyframes slide3dZoomTransition {
      0% {
        opacity: 0.3;
        transform: scale(0.91) translateZ(-80px) rotateY(-3deg);
        filter: blur(5px);
      }
      50% {
        opacity: 0.88;
        transform: scale(1.02) translateZ(15px) rotateY(1deg);
        filter: blur(0px);
      }
      100% {
        opacity: 1;
        transform: scale(1) translateZ(0) rotateY(0deg);
        filter: blur(0px);
      }
    }

@keyframes historyPanelIn {
      from { opacity: 0; transform: translateY(12px) scale(0.96); }
      to   { opacity: 1; transform: translateY(0) scale(1); }
    }

@keyframes pulseSaving {
      0%, 100% { opacity: 0.5; }
      50% { opacity: 1; }
    }

@keyframes panelFloatIn {
      from {
        opacity: 0;
        transform: translate3d(0, 6px, 0) scale(0.99);
      }
      to {
        opacity: 1;
        transform: translate3d(0, 0, 0) scale(1);
      }
    }

@keyframes panelCenterFloatIn {
      from {
        opacity: 0;
        transform: translate3d(-50%, calc(-50% + 6px), 0) scale(0.99);
      }
      to {
        opacity: 1;
        transform: translate3d(-50%, -50%, 0) scale(1);
      }
    }

@keyframes spin {
      to { transform: rotate(360deg); }
    }

@keyframes nu-spin {
      0% { transform: rotate(0deg); }
      100% { transform: rotate(360deg); }
    }

@keyframes nu-wave {
      30% { opacity: 1; transform: translateY(4px) translateX(0) rotate(0); }
      50% { opacity: 1; transform: translateY(-3px) translateX(0) rotate(0); color: var(--primary); }
      100% { opacity: 1; transform: translateY(0) translateX(0) rotate(0); }
    }

@keyframes nu-slideDown {
      0% { opacity: 0; transform: translateY(-10px) translateX(3px) rotate(-45deg); color: var(--primary); }
      30% { opacity: 1; transform: translateY(3px) translateX(0) rotate(0); }
      50% { opacity: 1; transform: translateY(-3px) translateX(0) rotate(0); }
      100% { opacity: 1; transform: translateY(0) translateX(0) rotate(0); }
    }

@keyframes nu-disapear {
      from { opacity: 1; }
      to { opacity: 0; transform: translateX(4px) translateY(12px); color: var(--primary); }
    }

@keyframes nu-takeOff {
      0% { opacity: 1; }
      60% { opacity: 1; transform: translateX(60px) rotate(45deg) scale(1.7); }
      100% { opacity: 0; transform: translateX(140px) rotate(45deg) scale(0); }
    }

@keyframes nu-land {
      0% { transform: translateX(-28px) translateY(14px) rotate(-35deg) scale(1.4); opacity: 0; }
      100% { transform: translateX(0) translateY(0) rotate(0); opacity: 1; }
    }

@keyframes nu-contrail {
      0% { width: 0; opacity: 1; }
      8% { width: 15px; }
      60% { opacity: 0.7; width: 80px; }
      100% { opacity: 0; width: 160px; }
    }

@keyframes nu-appear {
      0% { opacity: 0; transform: scale(1.8) rotate(-25deg); color: var(--primary); }
      30% { opacity: 1; transform: scale(0.8); }
      50% { opacity: 1; transform: scale(1.08); }
      100% { opacity: 1; transform: scale(1); }
    }

@keyframes nu-has-saved-line-top {
      33.333% { transform: rotate(0deg) translate(1px, 2px) scale(var(--zoom-from)); d: path("M 3 5 L 3 8 L 3 8"); }
      66.666% { transform: rotate(20deg) translate(2px, -2px) scale(var(--zoom-via)); }
      99.999% { transform: rotate(0deg) translate(0px, 0px) scale(var(--zoom-to)); }
    }

@keyframes nu-has-saved-line-bottom {
      33.333% { transform: rotate(0deg) translate(1px, 2px) scale(var(--zoom-from)); d: path("M 17 20 L 17 13 L 7 13 L 7 20"); }
      66.666% { transform: rotate(20deg) translate(2px, -2px) scale(var(--zoom-via)); }
      99.999% { transform: rotate(0deg) translate(0px, 0px) scale(var(--zoom-to)); d: path("M 17 21 L 17 21 L 7 21 L 7 21"); }
    }

@keyframes nu-has-saved-line-bottom-2 {
      from { d: path("M 17 21 L 17 21 L 7 21 L 7 21"); }
      to { transform: rotate(0deg) translate(0px, 0px) scale(var(--zoom-to)); d: path("M 17 20 L 17 13 L 7 13 L 7 20"); fill: white; }
    }

@keyframes nu-has-saved {
      33.333% { transform: rotate(0deg) translate(1px, 2px) scale(var(--zoom-from)); }
      66.666% { transform: rotate(20deg) translate(2px, -2px) scale(var(--zoom-via)); }
      99.999% { transform: rotate(0deg) translate(0px, 0px) scale(var(--zoom-to)); }
    }

@keyframes nu-cloud-rotation {
      0% { transform: rotate(0deg); }
      50% { transform: rotate(180deg); }
      100% { transform: rotate(360deg); }
    }

@keyframes nu-cloud-lines {
      0% { transform: translateY(-10px); }
      100% { transform: translateY(8px); }
    }

@keyframes nu-cloud-move {
      0% { cx: 20; cy: 60; r: 15; }
      50% { cx: 50; cy: 45; r: 20; }
      100% { cx: 80; cy: 60; r: 15; }
    }

@keyframes widgetPopIn {
  0% { opacity: 0; transform: scale(0.92) translateY(12px); }
  70% { transform: scale(1.02) translateY(-2px); }
  100% { opacity: 1; transform: scale(1) translateY(0); }
}

@keyframes pulseGlow {
  0% { box-shadow: 0 0 0 0 rgba(56, 189, 248, 0.4); }
  70% { box-shadow: 0 0 0 10px rgba(56, 189, 248, 0); }
  100% { box-shadow: 0 0 0 0 rgba(56, 189, 248, 0); }
}