/* ==========================================================================
   OORKANAKU Village Governance ERP - Animations
   Keyframes, Hover Effects, Transitions, Scroll Animations
   ========================================================================== */

/* ========================================================================
   KEYFRAMES - FADE
   ======================================================================== */

@keyframes okFadeIn {
  from { opacity: 0; }
  to   { opacity: 1; }
}

@keyframes okFadeOut {
  from { opacity: 1; }
  to   { opacity: 0; }
}

@keyframes okFadeInUp {
  from {
    opacity: 0;
    transform: translateY(20px);
  }
  to {
    opacity: 1;
    transform: translateY(0);
  }
}

@keyframes okFadeInDown {
  from {
    opacity: 0;
    transform: translateY(-20px);
  }
  to {
    opacity: 1;
    transform: translateY(0);
  }
}

@keyframes okFadeInLeft {
  from {
    opacity: 0;
    transform: translateX(-20px);
  }
  to {
    opacity: 1;
    transform: translateX(0);
  }
}

@keyframes okFadeInRight {
  from {
    opacity: 0;
    transform: translateX(20px);
  }
  to {
    opacity: 1;
    transform: translateX(0);
  }
}

/* ========================================================================
   KEYFRAMES - SLIDE
   ======================================================================== */

@keyframes okSlideInLeft {
  from { transform: translateX(-100%); }
  to   { transform: translateX(0); }
}

@keyframes okSlideInRight {
  from { transform: translateX(100%); }
  to   { transform: translateX(0); }
}

@keyframes okSlideInTop {
  from { transform: translateY(-100%); }
  to   { transform: translateY(0); }
}

@keyframes okSlideInBottom {
  from { transform: translateY(100%); }
  to   { transform: translateY(0); }
}

@keyframes okSlideOutLeft {
  from { transform: translateX(0); }
  to   { transform: translateX(-100%); }
}

@keyframes okSlideOutRight {
  from { transform: translateX(0); }
  to   { transform: translateX(100%); }
}

/* ========================================================================
   KEYFRAMES - SCALE
   ======================================================================== */

@keyframes okScaleIn {
  from {
    opacity: 0;
    transform: scale(0.9);
  }
  to {
    opacity: 1;
    transform: scale(1);
  }
}

@keyframes okScaleOut {
  from {
    opacity: 1;
    transform: scale(1);
  }
  to {
    opacity: 0;
    transform: scale(0.9);
  }
}

@keyframes okZoomIn {
  from { transform: scale(0); }
  to   { transform: scale(1); }
}

@keyframes okZoomOut {
  from { transform: scale(1); }
  to   { transform: scale(0); }
}

/* ========================================================================
   KEYFRAMES - EFFECTS
   ======================================================================== */

@keyframes okSpin {
  from { transform: rotate(0deg); }
  to   { transform: rotate(360deg); }
}

@keyframes okPulse {
  0%, 100% { opacity: 1; }
  50%      { opacity: 0.5; }
}

@keyframes okBounce {
  0%, 100% {
    transform: translateY(0);
  }
  50% {
    transform: translateY(-8px);
  }
}

@keyframes okShake {
  0%, 100% { transform: translateX(0); }
  10%, 30%, 50%, 70%, 90% { transform: translateX(-4px); }
  20%, 40%, 60%, 80% { transform: translateX(4px); }
}

@keyframes okShimmer {
  0%   { background-position: -200% 0; }
  100% { background-position: 200% 0; }
}

@keyframes okFloat {
  0%, 100% { transform: translateY(0); }
  50%      { transform: translateY(-10px); }
}

@keyframes okGlow {
  0%, 100% { box-shadow: 0 0 5px rgba(255, 107, 0, 0.2); }
  50%      { box-shadow: 0 0 20px rgba(255, 107, 0, 0.4); }
}

/* ========================================================================
   KEYFRAMES - PAGE TRANSITIONS
   ======================================================================== */

@keyframes okPageEnter {
  from {
    opacity: 0;
    transform: translateY(12px);
  }
  to {
    opacity: 1;
    transform: translateY(0);
  }
}

@keyframes okPageExit {
  from {
    opacity: 1;
    transform: translateY(0);
  }
  to {
    opacity: 0;
    transform: translateY(-12px);
  }
}

/* ========================================================================
   KEYFRAMES - STAGGER LIST
   ======================================================================== */

@keyframes okStaggerIn {
  from {
    opacity: 0;
    transform: translateY(16px);
  }
  to {
    opacity: 1;
    transform: translateY(0);
  }
}

/* ========================================================================
   KEYFRAMES - TOAST NOTIFICATIONS
   ======================================================================== */

@keyframes okToastSlideIn {
  from {
    opacity: 0;
    transform: translateX(100%);
  }
  to {
    opacity: 1;
    transform: translateX(0);
  }
}

@keyframes okToastSlideOut {
  from {
    opacity: 1;
    transform: translateX(0);
  }
  to {
    opacity: 0;
    transform: translateX(100%);
  }
}

@keyframes okToastProgress {
  from { width: 100%; }
  to   { width: 0; }
}

/* ========================================================================
   SCROLL / AOS-LIKE ANIMATIONS
   ======================================================================== */

.ok-animate-on-scroll {
  opacity: 0;
  transform: translateY(30px);
  transition: opacity 0.6s ease, transform 0.6s ease;
}

.ok-animate-on-scroll.animated {
  opacity: 1;
  transform: translateY(0);
}

.ok-animate-on-scroll.from-left {
  transform: translateX(-30px);
}

.ok-animate-on-scroll.from-left.animated {
  transform: translateX(0);
}

.ok-animate-on-scroll.from-right {
  transform: translateX(30px);
}

.ok-animate-on-scroll.from-right.animated {
  transform: translateX(0);
}

.ok-animate-on-scroll.zoom-in {
  transform: scale(0.9);
}

.ok-animate-on-scroll.zoom-in.animated {
  transform: scale(1);
}

/* Stagger Delays for Lists */
.ok-stagger > * {
  opacity: 0;
  transform: translateY(16px);
  animation: okStaggerIn 0.4s ease forwards;
}

.ok-stagger > *:nth-child(1)  { animation-delay: 0ms; }
.ok-stagger > *:nth-child(2)  { animation-delay: 50ms; }
.ok-stagger > *:nth-child(3)  { animation-delay: 100ms; }
.ok-stagger > *:nth-child(4)  { animation-delay: 150ms; }
.ok-stagger > *:nth-child(5)  { animation-delay: 200ms; }
.ok-stagger > *:nth-child(6)  { animation-delay: 250ms; }
.ok-stagger > *:nth-child(7)  { animation-delay: 300ms; }
.ok-stagger > *:nth-child(8)  { animation-delay: 350ms; }
.ok-stagger > *:nth-child(9)  { animation-delay: 400ms; }
.ok-stagger > *:nth-child(10) { animation-delay: 450ms; }
.ok-stagger > *:nth-child(11) { animation-delay: 500ms; }
.ok-stagger > *:nth-child(12) { animation-delay: 550ms; }

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

/* Lift on hover */
.ok-hover-lift {
  transition: transform var(--ok-transition-base), box-shadow var(--ok-transition-base);
}

.ok-hover-lift:hover {
  transform: translateY(-4px);
  box-shadow: var(--ok-shadow-card-hover);
}

/* Glow on hover */
.ok-hover-glow {
  transition: box-shadow var(--ok-transition-base);
}

.ok-hover-glow:hover {
  box-shadow: var(--ok-shadow-glow);
}

/* Scale on hover */
.ok-hover-scale {
  transition: transform var(--ok-transition-fast);
}

.ok-hover-scale:hover {
  transform: scale(1.03);
}

/* Underline on hover */
.ok-hover-underline {
  position: relative;
}

.ok-hover-underline::after {
  content: '';
  position: absolute;
  bottom: -2px;
  left: 0;
  width: 0;
  height: 2px;
  background: var(--ok-saffron);
  transition: width var(--ok-transition-base);
}

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

/* Color shift on hover */
.ok-hover-color {
  transition: color var(--ok-transition-fast);
}

.ok-hover-color:hover {
  color: var(--ok-saffron);
}

/* Background shift on hover */
.ok-hover-bg {
  transition: background-color var(--ok-transition-fast), color var(--ok-transition-fast);
}

.ok-hover-bg:hover {
  background: var(--ok-saffron);
  color: var(--ok-white);
}

/* Rotate on hover */
.ok-hover-rotate {
  transition: transform var(--ok-transition-base);
}

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

/* Border glow on hover */
.ok-hover-border-glow {
  transition: border-color var(--ok-transition-fast), box-shadow var(--ok-transition-fast);
}

.ok-hover-border-glow:hover {
  border-color: var(--ok-saffron);
  box-shadow: 0 0 0 3px var(--ok-saffron-light);
}

.dark-mode .ok-hover-border-glow:hover {
  box-shadow: 0 0 0 3px rgba(255, 107, 0, 0.2);
}

/* ========================================================================
   PAGE TRANSITION CLASSES
   ======================================================================== */

.ok-page-enter {
  animation: okPageEnter 0.3s ease both;
}

.ok-page-exit {
  animation: okPageExit 0.3s ease both;
}

/* ========================================================================
   LOADING SHIMMER
   ======================================================================== */

.ok-shimmer {
  position: relative;
  overflow: hidden;
}

.ok-shimmer::after {
  content: '';
  position: absolute;
  inset: 0;
  background: linear-gradient(
    90deg,
    transparent 0%,
    rgba(255, 255, 255, 0.4) 50%,
    transparent 100%
  );
  animation: okShimmer 1.5s infinite;
  transform: translateX(-100%);
}

.dark-mode .ok-shimmer::after {
  background: linear-gradient(
    90deg,
    transparent 0%,
    rgba(255, 255, 255, 0.08) 50%,
    transparent 100%
  );
}

/* ========================================================================
   TOAST NOTIFICATION ANIMATIONS
   ======================================================================== */

.ok-toast {
  animation: okToastSlideIn 0.3s ease both;
}

.ok-toast.removing {
  animation: okToastSlideOut 0.3s ease both;
}

.ok-toast-progress {
  position: absolute;
  bottom: 0;
  left: 0;
  height: 3px;
  background: var(--ok-saffron);
  border-radius: 0 0 var(--ok-radius-xl) var(--ok-radius-xl);
  animation: okToastProgress linear forwards;
}

/* ========================================================================
   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;
  }

  .ok-animate-on-scroll {
    opacity: 1;
    transform: none;
  }

  .ok-stagger > * {
    opacity: 1;
    transform: none;
    animation: none;
  }
}