/*
 * Flareo Studio – Animation Library
 * All keyframes, animation utilities, and motion classes
 */

/* ============================================================
   KEYFRAMES
   ============================================================ */
@keyframes flr-float-slow {
  0%, 100% { transform: translateY(0) translateX(0); }
  50%       { transform: translateY(-20px) translateX(10px); }
}

@keyframes flr-pulse-glow {
  0%, 100% { opacity: 0.5; transform: scale(1); }
  50%       { opacity: 1;   transform: scale(1.05); }
}

@keyframes flr-marquee {
  from { transform: translateX(0); }
  to   { transform: translateX(-50%); }
}

@keyframes flr-orb {
  0%, 100% { transform: translate(0, 0) scale(1); }
  33%       { transform: translate(30px, -40px) scale(1.1); }
  66%       { transform: translate(-20px, 30px) scale(0.95); }
}

@keyframes flr-fade-up {
  from { opacity: 0; transform: translateY(30px); }
  to   { opacity: 1; transform: translateY(0); }
}

@keyframes flr-ping {
  0%       { transform: scale(1); opacity: 0.75; }
  75%, 100%{ transform: scale(2); opacity: 0; }
}

@keyframes flr-float-y1 {
  0%, 100% { transform: translateY(0); }
  50%       { transform: translateY(-12px); }
}

@keyframes flr-float-y2 {
  0%, 100% { transform: translateY(0); }
  50%       { transform: translateY(14px); }
}

@keyframes flr-float-particle {
  from { transform: translateY(0); opacity: 0; }
  10%  { opacity: 1; }
  90%  { opacity: 1; }
  to   { transform: translateY(-100vh); opacity: 0; }
}

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

@keyframes flr-spin {
  from { transform: rotate(0deg); }
  to   { transform: rotate(360deg); }
}

@keyframes flr-scale-in {
  from { opacity: 0; transform: scale(0.95); }
  to   { opacity: 1; transform: scale(1); }
}

@keyframes flr-slide-down {
  from { opacity: 0; transform: translateY(-10px); }
  to   { opacity: 1; transform: translateY(0); }
}

/* ============================================================
   ANIMATION UTILITY CLASSES
   ============================================================ */
.flr-animate-float      { animation: flr-float-slow 8s ease-in-out infinite; }
.flr-animate-pulse-glow { animation: flr-pulse-glow 3s ease-in-out infinite; }
.flr-animate-marquee    { animation: flr-marquee 40s linear infinite; }
.flr-animate-orb        { animation: flr-orb 20s ease-in-out infinite; }
.flr-animate-ping       { animation: flr-ping 2s cubic-bezier(0,0,0.2,1) infinite; }
.flr-animate-floaty1    { animation: flr-float-y1 5s ease-in-out infinite; }
.flr-animate-floaty2    { animation: flr-float-y2 6s ease-in-out infinite 1s; }
.flr-animate-fade-up    { animation: flr-fade-up 0.7s cubic-bezier(0.22,1,0.36,1) both; }
.flr-animate-scale-in   { animation: flr-scale-in 0.4s cubic-bezier(0.22,1,0.36,1) both; }
.flr-animate-slide-down { animation: flr-slide-down 0.3s ease both; }

/* Page enter animation on main content */
.flr-page-enter {
  animation: flr-fade-up 0.7s cubic-bezier(0.22,1,0.36,1) both;
}

/* Shimmer skeleton loading */
.flr-skeleton {
  background: linear-gradient(
    90deg,
    oklch(1 0 0 / 0.04) 25%,
    oklch(1 0 0 / 0.1) 50%,
    oklch(1 0 0 / 0.04) 75%
  );
  background-size: 200% auto;
  animation: flr-shimmer 1.5s linear infinite;
  border-radius: var(--flr-radius-md);
}

/* ============================================================
   TEXT GLOW
   ============================================================ */
.flr-text-glow {
  text-shadow: 0 0 30px oklch(0.62 0.27 305 / 0.6);
}

/* ============================================================
   REDUCED MOTION
   ============================================================ */
@media (prefers-reduced-motion: reduce) {
  *,
  *::before,
  *::after {
    animation-duration: 0.01ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.01ms !important;
    scroll-behavior: auto !important;
  }
}