/* =============================================================================
   File        : public/assets/css/frontend/animations.css
   Project     : GyanPeeth Academy
   Framework   : CodeIgniter 4

   Description
   -----------------------------------------------------------------------------
   Global Animation Library

   Contents

   1. Transition Helpers
   2. Fade Animations
   3. Slide Animations
   4. Zoom
   5. Rotate
   6. Floating
   7. Bounce
   8. Pulse
   9. Hover Effects

=============================================================================*/

/* =============================================================================
   GLOBAL TRANSITION
============================================================================= */

.fe-transition-fast {
  transition: 0.2s ease;
}

.fe-transition {
  transition: 0.3s ease;
}

.fe-transition-slow {
  transition: 0.6s ease;
}

/* =============================================================================
   FADE IN
============================================================================= */

.fe-fade {
  opacity: 0;

  transition: opacity 0.6s ease;
}

.fe-fade.show {
  opacity: 1;
}

/* =============================================================================
   FADE UP
============================================================================= */

.fe-fade-up {
  opacity: 0;

  transform: translateY(40px);

  transition:
    opacity 0.7s ease,
    transform 0.7s ease;
}

.fe-fade-up.show {
  opacity: 1;

  transform: none;
}

/* =============================================================================
   FADE DOWN
============================================================================= */

.fe-fade-down {
  opacity: 0;

  transform: translateY(-40px);

  transition:
    opacity 0.7s ease,
    transform 0.7s ease;
}

.fe-fade-down.show {
  opacity: 1;

  transform: none;
}

/* =============================================================================
   FADE LEFT
============================================================================= */

.fe-fade-left {
  opacity: 0;

  transform: translateX(-50px);

  transition:
    opacity 0.7s ease,
    transform 0.7s ease;
}

.fe-fade-left.show {
  opacity: 1;

  transform: none;
}

/* =============================================================================
   FADE RIGHT
============================================================================= */

.fe-fade-right {
  opacity: 0;

  transform: translateX(50px);

  transition:
    opacity 0.7s ease,
    transform 0.7s ease;
}

.fe-fade-right.show {
  opacity: 1;

  transform: none;
}

/* =============================================================================
   ZOOM
============================================================================= */

.fe-zoom {
  opacity: 0;

  transform: scale(0.9);

  transition:
    opacity 0.6s ease,
    transform 0.6s ease;
}

.fe-zoom.show {
  opacity: 1;

  transform: scale(1);
}

/* =============================================================================
   ROTATE
============================================================================= */

.fe-rotate {
  transition: transform 0.4s ease;
}

.fe-rotate:hover {
  transform: rotate(5deg);
}

/* =============================================================================
   FLOAT
============================================================================= */

.fe-float {
  animation: feFloat 4s ease-in-out infinite;
}

@keyframes feFloat {
  0% {
    transform: translateY(0);
  }

  50% {
    transform: translateY(-10px);
  }

  100% {
    transform: translateY(0);
  }
}

/* =============================================================================
   BOUNCE
============================================================================= */

.fe-bounce {
  animation: feBounce 1.8s infinite;
}

@keyframes feBounce {
  0%,
  20%,
  50%,
  80%,
  100% {
    transform: translateY(0);
  }

  40% {
    transform: translateY(-10px);
  }

  60% {
    transform: translateY(-5px);
  }
}

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

.fe-pulse {
  animation: fePulse 2s infinite;
}

@keyframes fePulse {
  0% {
    transform: scale(1);
  }

  50% {
    transform: scale(1.05);
  }

  100% {
    transform: scale(1);
  }
}

/* =============================================================================
   HOVER LIFT
============================================================================= */

.fe-hover-lift {
  transition: 0.35s ease;
}

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

/* =============================================================================
   HOVER SCALE
============================================================================= */

.fe-hover-scale {
  transition: 0.35s ease;
}

.fe-hover-scale:hover {
  transform: scale(1.04);
}
/* =============================================================================
   STAGGER ANIMATION
============================================================================= */

.fe-stagger > * {
  opacity: 0;

  transform: translateY(30px);

  animation: feStagger 0.6s forwards;
}

.fe-stagger > *:nth-child(1) {
  animation-delay: 0.05s;
}
.fe-stagger > *:nth-child(2) {
  animation-delay: 0.1s;
}
.fe-stagger > *:nth-child(3) {
  animation-delay: 0.15s;
}
.fe-stagger > *:nth-child(4) {
  animation-delay: 0.2s;
}
.fe-stagger > *:nth-child(5) {
  animation-delay: 0.25s;
}
.fe-stagger > *:nth-child(6) {
  animation-delay: 0.3s;
}
.fe-stagger > *:nth-child(7) {
  animation-delay: 0.35s;
}
.fe-stagger > *:nth-child(8) {
  animation-delay: 0.4s;
}

@keyframes feStagger {
  to {
    opacity: 1;

    transform: none;
  }
}

/* =============================================================================
   SHIMMER EFFECT
============================================================================= */

.fe-shimmer {
  position: relative;

  overflow: hidden;
}

.fe-shimmer::before {
  content: "";

  position: absolute;

  inset: 0;

  transform: translateX(-100%);

  background: linear-gradient(
    90deg,
    transparent,
    rgba(255, 255, 255, 0.35),
    transparent
  );

  animation: feShimmer 2.2s infinite;
}

@keyframes feShimmer {
  100% {
    transform: translateX(100%);
  }
}

/* =============================================================================
   SKELETON LOADER
============================================================================= */

.fe-skeleton {
  position: relative;

  overflow: hidden;

  border-radius: 12px;

  background: #e5e7eb;
}

.fe-skeleton::after {
  content: "";

  position: absolute;

  inset: 0;

  transform: translateX(-100%);

  background: linear-gradient(
    90deg,
    transparent,
    rgba(255, 255, 255, 0.6),
    transparent
  );

  animation: feSkeleton 1.5s infinite;
}

@keyframes feSkeleton {
  100% {
    transform: translateX(100%);
  }
}

/* =============================================================================
   GRADIENT ANIMATION
============================================================================= */

.fe-gradient-animation {
  background-size: 300% 300%;

  animation: feGradient 8s ease infinite;
}

@keyframes feGradient {
  0% {
    background-position: 0 50%;
  }

  50% {
    background-position: 100% 50%;
  }

  100% {
    background-position: 0 50%;
  }
}

/* =============================================================================
   GLOW HOVER
============================================================================= */

.fe-glow {
  transition: 0.35s ease;
}

.fe-glow:hover {
  box-shadow: 0 0 30px rgba(37, 99, 235, 0.3);
}

/* =============================================================================
   GLASS HOVER
============================================================================= */

.fe-glass-hover {
  transition: 0.35s ease;
}

.fe-glass-hover:hover {
  backdrop-filter: blur(20px);

  -webkit-backdrop-filter: blur(20px);

  transform: translateY(-6px);
}

/* =============================================================================
   IMAGE ZOOM
============================================================================= */

.fe-img-hover {
  overflow: hidden;
}

.fe-img-hover img {
  transition: transform 0.6s ease;
}

.fe-img-hover:hover img {
  transform: scale(1.08);
}

/* =============================================================================
   ICON ROTATE
============================================================================= */

.fe-icon-rotate i {
  transition: 0.35s ease;
}

.fe-icon-rotate:hover i {
  transform: rotate(12deg);
}

/* =============================================================================
   UNDERLINE HOVER
============================================================================= */

.fe-link-underline {
  position: relative;
}

.fe-link-underline::after {
  content: "";

  position: absolute;

  left: 0;

  bottom: -3px;

  width: 0;

  height: 2px;

  background: currentColor;

  transition: 0.3s ease;
}

.fe-link-underline:hover::after {
  width: 100%;
}

/* =============================================================================
   CARD HOVER
============================================================================= */

.fe-card-hover {
  transition: 0.35s ease;
}

.fe-card-hover:hover {
  transform: translateY(-10px);

  box-shadow: 0 24px 60px rgba(15, 23, 42, 0.12);
}

/* =============================================================================
   BADGE POP
============================================================================= */

.fe-badge-pop {
  transition: 0.3s ease;
}

.fe-badge-pop:hover {
  transform: scale(1.08);
}