/* =============================================
   NIKOLAS QUIZ — nik-animations.css
   Animations & Transitions
   ============================================= */

/* ---- KEYFRAMES ---- */
@keyframes nikFadeInUp {
  from { opacity: 0; transform: translateY(30px); }
  to   { opacity: 1; transform: translateY(0); }
}
@keyframes nikFadeIn {
  from { opacity: 0; }
  to   { opacity: 1; }
}
@keyframes nikSlideInLeft {
  from { opacity: 0; transform: translateX(-40px); }
  to   { opacity: 1; transform: translateX(0); }
}
@keyframes nikSlideInRight {
  from { opacity: 0; transform: translateX(40px); }
  to   { opacity: 1; transform: translateX(0); }
}
@keyframes nikScaleIn {
  from { opacity: 0; transform: scale(0.88); }
  to   { opacity: 1; transform: scale(1); }
}
@keyframes nikFloat {
  0%, 100% { transform: translateY(0px); }
  50%       { transform: translateY(-12px); }
}
@keyframes nikPulse {
  0%, 100% { box-shadow: 0 0 0 0 rgba(232,160,32,0.4); }
  50%       { box-shadow: 0 0 0 14px rgba(232,160,32,0); }
}
@keyframes nikShapeRotate {
  from { transform: rotate(0deg); }
  to   { transform: rotate(360deg); }
}
@keyframes nikTypewriter {
  from { width: 0; }
  to   { width: 100%; }
}
@keyframes nikBlink {
  50% { opacity: 0; }
}
@keyframes nikCountUp {
  from { opacity: 0; transform: translateY(12px); }
  to   { opacity: 1; transform: translateY(0); }
}
@keyframes nikShimmer {
  0%   { background-position: -200% 0; }
  100% { background-position: 200% 0; }
}
@keyframes nikBounce {
  0%, 100% { transform: translateY(0); }
  50%       { transform: translateY(-6px); }
}
@keyframes nikGlow {
  0%, 100% { opacity: 0.5; }
  50%       { opacity: 1; }
}

/* ---- ANIMATION CLASSES ---- */
.nik-anim-fade-up {
  opacity: 0;
  transform: translateY(30px);
  transition: opacity 0.7s ease, transform 0.7s ease;
}
.nik-anim-fade-up.nik-visible {
  opacity: 1;
  transform: translateY(0);
}
.nik-anim-fade-in {
  opacity: 0;
  transition: opacity 0.7s ease;
}
.nik-anim-fade-in.nik-visible { opacity: 1; }

.nik-anim-slide-left {
  opacity: 0;
  transform: translateX(-40px);
  transition: opacity 0.7s ease, transform 0.7s ease;
}
.nik-anim-slide-left.nik-visible { opacity: 1; transform: translateX(0); }

.nik-anim-slide-right {
  opacity: 0;
  transform: translateX(40px);
  transition: opacity 0.7s ease, transform 0.7s ease;
}
.nik-anim-slide-right.nik-visible { opacity: 1; transform: translateX(0); }

.nik-anim-scale {
  opacity: 0;
  transform: scale(0.9);
  transition: opacity 0.6s ease, transform 0.6s ease;
}
.nik-anim-scale.nik-visible { opacity: 1; transform: scale(1); }

/* Stagger delays */
.nik-delay-1 { transition-delay: 0.1s !important; }
.nik-delay-2 { transition-delay: 0.2s !important; }
.nik-delay-3 { transition-delay: 0.3s !important; }
.nik-delay-4 { transition-delay: 0.4s !important; }
.nik-delay-5 { transition-delay: 0.5s !important; }
.nik-delay-6 { transition-delay: 0.6s !important; }

/* ---- FLOATING ANIMATION ---- */
.nik-float { animation: nikFloat 5s ease-in-out infinite; }
.nik-float-slow { animation: nikFloat 8s ease-in-out infinite; }
.nik-float-fast { animation: nikFloat 3s ease-in-out infinite; }

/* ---- HERO ANIMATIONS ---- */
.nik-hero-animate-1 { animation: nikFadeInUp 0.8s ease forwards; animation-delay: 0.1s; opacity: 0; }
.nik-hero-animate-2 { animation: nikFadeInUp 0.8s ease forwards; animation-delay: 0.3s; opacity: 0; }
.nik-hero-animate-3 { animation: nikFadeInUp 0.8s ease forwards; animation-delay: 0.5s; opacity: 0; }
.nik-hero-animate-4 { animation: nikFadeInUp 0.8s ease forwards; animation-delay: 0.7s; opacity: 0; }
.nik-hero-animate-5 { animation: nikSlideInRight 0.9s ease forwards; animation-delay: 0.5s; opacity: 0; }

/* ---- BACKGROUND SHAPE ANIMATIONS ---- */
.nik-hero-bg-shape-1 { animation: nikShapeRotate 40s linear infinite; }
.nik-hero-bg-shape-2 { animation: nikFloat 10s ease-in-out infinite; }

/* ---- QUIZ ANSWER ANIMATIONS ---- */
.nik-quiz-option {
  animation-duration: 0.3s;
  animation-fill-mode: both;
}
.nik-quiz-option.correct {
  animation-name: nikScaleIn;
}
.nik-quiz-option.incorrect {
  animation-name: nikPulse;
}

/* ---- CARD HOVER ---- */
.nik-quiz-card,
.nik-article-card,
.nik-team-card,
.nik-category-card {
  will-change: transform;
}

/* ---- SHIMMER LOADING ---- */
.nik-skeleton {
  background: linear-gradient(90deg, #f0f0f0 25%, #e0e0e0 50%, #f0f0f0 75%);
  background-size: 200% 100%;
  animation: nikShimmer 1.5s infinite;
  border-radius: 6px;
}

/* ---- STAT COUNTER ---- */
.nik-stat-number { animation: nikCountUp 0.8s ease forwards; }

/* ---- PAGE TRANSITION ---- */
.nik-page-enter {
  animation: nikFadeIn 0.5s ease forwards;
}

/* ---- QUIZ PROGRESS ---- */
.nik-quiz-progress-bar {
  animation: none;
}

/* ---- SCROLL REVEAL DECORATOR ---- */
.nik-section-label {
  animation: nikFadeIn 0.6s ease forwards;
}

/* ---- BUTTON RIPPLE ---- */
.nik-btn { position: relative; overflow: hidden; }
.nik-btn::before {
  content: '';
  position: absolute;
  top: 50%;
  left: 50%;
  width: 0;
  height: 0;
  background: rgba(255,255,255,0.2);
  border-radius: 50%;
  transform: translate(-50%, -50%);
  transition: width 0.5s ease, height 0.5s ease;
}
.nik-btn:active::before { width: 200px; height: 200px; }

/* ---- ICON BOUNCE ---- */
.nik-category-card:hover .nik-category-icon {
  animation: nikBounce 0.5s ease;
}

/* ---- TESTIMONIAL SLIDE ---- */
.nik-reviews-inner {
  will-change: transform;
}

/* ---- PULSING DOT ---- */
.nik-live-dot {
  display: inline-block;
  width: 8px;
  height: 8px;
  background: var(--nik-teal);
  border-radius: 50%;
  animation: nikPulse 1.5s infinite;
}