/* ========================================
   ADFLOW SKIN - animations.css
   스크롤 애니메이션 & 호버 이펙트
   ======================================== */

/* Base animation state */
.anim {
  opacity: 0;
  transform: translateY(30px);
  transition: opacity var(--anim-speed, 0.6s) ease,
              transform var(--anim-speed, 0.6s) ease;
}

/* fadeUp (default) */
.anim.fadeUp.visible {
  opacity: 1;
  transform: translateY(0);
}

/* fadeIn */
.anim.fadeIn {
  transform: none;
}
.anim.fadeIn.visible {
  opacity: 1;
}

/* slideLeft */
.anim.slideLeft {
  transform: translateX(-40px);
}
.anim.slideLeft.visible {
  opacity: 1;
  transform: translateX(0);
}

/* slideRight */
.anim.slideRight {
  transform: translateX(40px);
}
.anim.slideRight.visible {
  opacity: 1;
  transform: translateX(0);
}

/* zoomIn */
.anim.zoomIn {
  transform: scale(0.85);
}
.anim.zoomIn.visible {
  opacity: 1;
  transform: scale(1);
}

/* flipIn */
.anim.flipIn {
  transform: rotateX(20deg);
  perspective: 600px;
}
.anim.flipIn.visible {
  opacity: 1;
  transform: rotateX(0);
}

/* === HOVER EFFECTS === */

/* lift */
.hover-lift .hoverable:hover {
  transform: translateY(-6px);
  box-shadow: 0 12px 24px color-mix(in srgb, var(--pc) 13%, transparent);
}

/* glow */
.hover-glow .hoverable:hover {
  box-shadow: 0 0 20px color-mix(in srgb, var(--pc) 27%, transparent);
}

/* scale */
.hover-scale .hoverable:hover {
  transform: scale(1.04);
}

/* tilt */
.hover-tilt .hoverable:hover {
  transform: perspective(500px) rotateY(3deg) rotateX(2deg);
}

/* none */
.hover-none .hoverable:hover {
  /* no effect */
}

/* === REDUCED MOTION === */
@media (prefers-reduced-motion: reduce) {
  .anim {
    opacity: 1 !important;
    transform: none !important;
    transition: none !important;
  }
  .hoverable { transition: none !important; }
}