/* =========================================
   TELUM TARGET — ANIMATIONS
========================================= */

/* =========================================
   MOTION TOKENS
========================================= */

:root {

  /* Easing */

  --ease-premium: cubic-bezier(.19,1,.22,1);
  --ease-breathing: cubic-bezier(.37,0,.63,1);
  --ease-smooth: cubic-bezier(.25,.46,.45,.94);
  --ease-snappy: cubic-bezier(.34,1.56,.64,1);

  /* Durations */
  --duration-fast: 250ms;
  --duration-medium: 400ms;
  --duration-slow: 800ms;
  --duration-reveal: 1200ms;
  --duration-pulse: 800ms;
  --duration-loader-fade: 500ms;
  --duration-glow: 4200ms;

  /* Delays */
  --delay-pulse-start: 1250ms;
  --delay-loader-hide: 2400ms;
}

/* =========================================
   HERO REVEAL
========================================= */

@keyframes heroReveal {

  from {
    opacity: 0;
    transform: translateY(40px);
  }

  to {
    opacity: 1;
    transform:translateY(0px);
  }
}

/* =========================================
   SPLASH REVEAL
========================================= */

@keyframes splashReveal {

  0% {
    opacity: 0;
    transform:
      scale(0.12)
      rotate(-10deg);
    filter:blur(14px);
  }

  8% {
    opacity: 0.15;
    transform:
      scale(0.18)
      rotate(-8deg);
    filter: blur(10px);
  }

  16% {
    opacity: 0.35;
    transform:
      scale(0.32)
      rotate(-5deg);

    filter: blur(6px);
  }

  24% {
    opacity: 0.55;
    transform:
      scale(0.52)
      rotate(-2deg);
    filter: blur(3px);
  }

  34% {
    opacity: 0.82;
    transform:
      scale(0.82)
      rotate(0deg);
    filter: blur(1px);
  }

  44% {
    opacity: 1;
    transform:
      scale(1.18)
      rotate(1deg);
    filter: blur(0px);
  }

  54% {
    transform:
      scale(1.28)
      rotate(0deg);
  }

  64% {transform: scale(1.08);}
  72% {transform: scale(0.94);}
  80% {transform: scale(1.03);}
  88% {transform: scale(0.985);}
  94% {transform: scale(1.01);}

  100% {
    opacity: 1;
    transform:
      scale(1)
      rotate(0deg);
    filter: blur(0px);
  }
}

/* =========================================
   LOGO PULSE
========================================= */

@keyframes pulse {
  0% { transform: scale(1);}
  12% {transform: scale(1.008);}
  24% {transform: scale(1.024);}
  36% {transform: scale(1.044);}
  48% {transform:scale(1.056);}
  60% {transform: scale(1.048);}
  72% {transform:scale(1.030);}
  84% {transform:scale(1.012);}
  100% {transform: scale(1);}
}

/* =========================================
   GLOW PULSE
========================================= */

@keyframes glowPulse {
  0% {
    opacity: 0.42;
    transform:scale(1.22);
  }

  12% {
    opacity: 0.48;
    transform:scale(1.28);
  }

  24% {
    opacity: 0.62;
    transform:scale(1.36);
  }

  38% {
    opacity: 0.82;
    transform:scale(1.45);
  }

  50% {
    opacity: 1;
    transform: scale(1.52);
  }

  62% {
    opacity: 0.92;
    transform:scale(1.48);
  }

  74% {
    opacity: 0.78;
    transform:scale(1.41);
  }

  86% {
    opacity: 0.58;
    transform:scale(1.32);
  }

  100% {
    opacity: 0.42;
    transform:scale(1.22);
  }
}

/* =========================================
   BLINK
========================================= */
@keyframes blink {
  0% {opacity: 0.3;}
  50% {opacity: 1;}
  100% {opacity: 0.3;}
}

/* =========================================
   FADE IN
========================================= */
@keyframes fadeIn {
  from {opacity: 0;}
  to {opacity: 1;}
}

/* =========================================
   FADE UP
========================================= */
@keyframes fadeUp {
  from {
    opacity: 0;
    transform:translateY(24px);
  }
  to {
    opacity: 1;
    transform:translateY(0px);
  }
}

/* =========================================
   FLOAT
========================================= */
@keyframes float {
  0% {transform: translateY(0px);}
  50% {transform:translateY(-8px);}
  100% {transform:translateY(0px);}
}

/* =========================================
   SHIMMER
========================================= */
@keyframes shimmer {
  0% {transform: translateX(-120%);}
  100% {transform:translateX(120%);}
}

/* =========================================
   ROTATE SLOW
========================================= */
@keyframes rotateSlow {
  from {transform:rotate(0deg);}
  to {transform:rotate(360deg);}
}

/* =========================================
   SCALE IN
========================================= */
@keyframes scaleIn {
  from {
    opacity: 0;
    transform:scale(0.92);
  }
  to {
    opacity: 1;
    transform:scale(1);
  }
}

/* =========================================
   HOVER UTILITIES
========================================= */
.hover-lift {
  transition:
    transform var(--duration-medium)
    var(--ease-premium),
    box-shadow var(--duration-medium)
    var(--ease-premium);
}

.hover-lift:hover {
  transform:translateY(-8px);
}

/* =========================================
   FADE UTILITIES
========================================= */
.fade-in {
  animation:
    fadeIn var(--duration-slow)
    var(--ease-smooth)
    forwards;
}

.fade-up {
  animation:
    fadeUp var(--duration-slow)
    var(--ease-premium)
    forwards;
}

.scale-in {
  animation:
    scaleIn var(--duration-medium)
    var(--ease-premium)
    forwards;
}

/* =========================================
   PERFORMANCE HELPERS
========================================= */

.will-transform {
  will-change: transform;
}

.will-opacity {
  will-change:opacity;
}

.gpu-layer {
  transform:translateZ(0);
  backface-visibility:hidden;
}