/* ==========================================================================
   PSC Co., Ltd. — Premium Corporate Website
   animations.css — Keyframes & Motion Definitions
   ========================================================================== */

/* --------------------------------------------------------------------------
   Keyframes
   -------------------------------------------------------------------------- */

/* Floating shape animation (hero background) */
@keyframes floatShape {
  0%, 100% { transform: translate(0, 0) scale(1); }
  33%      { transform: translate(30px, -40px) scale(1.05); }
  66%      { transform: translate(-20px, 30px) scale(0.97); }
}

/* Gentle vertical float for cards */
@keyframes floatY {
  0%, 100% { transform: translateY(0); }
  50%      { transform: translateY(-14px); }
}

.hero-card-main { animation: floatYMain 6s ease-in-out infinite; }
@keyframes floatYMain {
  0%, 100% { transform: translate(-50%, -50%); }
  50%      { transform: translate(-50%, -54%); }
}

/* Scroll mouse wheel indicator */
@keyframes scrollWheel {
  0%   { opacity: 0; transform: translate(-50%, 0); }
  40%  { opacity: 1; }
  100% { opacity: 0; transform: translate(-50%, 14px); }
}

/* Marquee infinite scroll */
@keyframes marquee {
  0%   { transform: translateX(0); }
  100% { transform: translateX(-50%); }
}

/* Subtle pulse glow */
@keyframes pulseGlow {
  0%, 100% { box-shadow: 0 0 0 0 rgba(56, 189, 248, 0.4); }
  50%      { box-shadow: 0 0 0 12px rgba(56, 189, 248, 0); }
}

/* Slow rotation for decorative rings */
@keyframes spinSlow {
  from { transform: rotate(0deg); }
  to   { transform: rotate(360deg); }
}

/* Shimmer for skeletons / accents */
@keyframes shimmer {
  0%   { background-position: -200% 0; }
  100% { background-position: 200% 0; }
}

/* Fade in up (used for non-IO elements like lightbox) */
@keyframes fadeInUp {
  from { opacity: 0; transform: translateY(24px); }
  to   { opacity: 1; transform: translateY(0); }
}

/* Bounce in */
@keyframes bounceIn {
  0%   { opacity: 0; transform: scale(0.3); }
  50%  { opacity: 1; transform: scale(1.05); }
  70%  { transform: scale(0.98); }
  100% { transform: scale(1); }
}

/* Wiggle for icons on hover */
@keyframes wiggle {
  0%, 100% { transform: rotate(0); }
  25%      { transform: rotate(-8deg); }
  75%      { transform: rotate(8deg); }
}

/* --------------------------------------------------------------------------
   Animation Utility Classes
   -------------------------------------------------------------------------- */
.animate-float { animation: floatY 5s ease-in-out infinite; }
.animate-pulse-glow { animation: pulseGlow 2.5s ease-in-out infinite; }
.animate-spin-slow { animation: spinSlow 22s linear infinite; }
.animate-fade-up { animation: fadeInUp 0.7s var(--ease) both; }
.animate-bounce-in { animation: bounceIn 0.6s var(--ease) both; }

/* Hero title word-by-word reveal */
.hero-title .word {
  display: inline-block;
  opacity: 0;
  transform: translateY(30px);
  animation: fadeInUp 0.7s var(--ease) forwards;
}

/* --------------------------------------------------------------------------
   Hover-driven micro animations
   -------------------------------------------------------------------------- */

/* Service icon wiggle on card hover */
.service-card:hover .service-icon i {
  animation: wiggle 0.6s ease-in-out;
}

/* Link arrow nudge */
.link-arrow i,
.service-link i {
  transition: transform var(--t-base);
}

/* Image zoom container */
.zoom-wrap { overflow: hidden; }
.zoom-wrap img { transition: transform 0.8s var(--ease); }
.zoom-wrap:hover img { transform: scale(1.08); }

/* --------------------------------------------------------------------------
   Reduced Motion — Accessibility
   -------------------------------------------------------------------------- */
@media (prefers-reduced-motion: reduce) {
  *,
  *::before,
  *::after {
    animation-duration: 0.001ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.001ms !important;
    scroll-behavior: auto !important;
  }

  [data-reveal] {
    opacity: 1 !important;
    transform: none !important;
  }
}