/* ============================================
   FKSB - Animations & Keyframes
   ============================================ */

/* === Keyframes === */
@keyframes fadeUp {
  from { opacity: 0; transform: translateY(24px); }
  to { opacity: 1; transform: translateY(0); }
}
@keyframes fadeIn {
  from { opacity: 0; }
  to { opacity: 1; }
}
@keyframes fadeDown {
  from { opacity: 0; transform: translateY(-16px); }
  to { opacity: 1; transform: translateY(0); }
}
@keyframes scaleIn {
  from { opacity: 0; transform: scale(0.92); }
  to { opacity: 1; transform: scale(1); }
}
@keyframes slideInRight {
  from { opacity: 0; transform: translateX(40px); }
  to { opacity: 1; transform: translateX(0); }
}
@keyframes slideInLeft {
  from { opacity: 0; transform: translateX(-40px); }
  to { opacity: 1; transform: translateX(0); }
}
[dir="rtl"] @keyframes slideInRight { from { transform: translateX(-40px); } to { transform: translateX(0); } }
[dir="rtl"] @keyframes slideInLeft { from { transform: translateX(40px); } to { transform: translateX(0); } }

@keyframes pulse {
  0%, 100% { opacity: 1; transform: scale(1); }
  50% { opacity: 0.5; transform: scale(1.1); }
}
@keyframes morph {
  0%   { border-radius: 50% 40% 60% 50% / 60% 50% 40% 50%; transform: rotate(0deg) scale(1); }
  33%  { border-radius: 40% 50% 50% 60% / 50% 60% 40% 50%; transform: rotate(8deg) scale(1.02); }
  66%  { border-radius: 60% 40% 50% 50% / 50% 40% 60% 50%; transform: rotate(-6deg) scale(0.99); }
  100% { border-radius: 50% 60% 40% 50% / 40% 50% 60% 50%; transform: rotate(0deg) scale(1); }
}
@keyframes float {
  0%, 100% { transform: translateY(0); }
  50% { transform: translateY(-12px); }
}
@keyframes heroMesh {
  0%   { transform: translate(0, 0) scale(1); }
  100% { transform: translate(2%, -2%) scale(1.05); }
}
@keyframes accentIn {
  from { transform: scaleX(0); transform-origin: left; }
  to { transform: scaleX(1); transform-origin: left; }
}
[dir="rtl"] @keyframes accentIn { from { transform: scaleX(0); transform-origin: right; } to { transform: scaleX(1); transform-origin: right; } }

@keyframes marquee {
  from { transform: translateX(0); }
  to { transform: translateX(calc(-100% / 3)); }
}
@keyframes pageBlurOut {
  from { opacity: 1; filter: blur(0); transform: translateY(0) scale(1); }
  to { opacity: 0; filter: blur(18px); transform: translateY(14px) scale(0.985); }
}
@keyframes pageBlurIn {
  from { opacity: 0; filter: blur(18px); transform: translateY(-10px) scale(1.015); }
  to { opacity: 1; filter: blur(0); transform: translateY(0) scale(1); }
}
@keyframes navMarkerIn {
  from { transform: scaleX(0); opacity: 0; }
  to { transform: scaleX(1); opacity: 1; }
}
@keyframes leafSpin {
  from { transform: rotate(0deg) scale(1); }
  to { transform: rotate(360deg) scale(1); }
}
@keyframes spin {
  from { transform: rotate(0deg); }
  to { transform: rotate(360deg); }
}
@keyframes shimmer {
  0%   { background-position: -200% 0; }
  100% { background-position: 200% 0; }
}
@keyframes bounceIn {
  0%   { opacity: 0; transform: scale(0.3); }
  50%  { opacity: 1; transform: scale(1.05); }
  70%  { transform: scale(0.95); }
  100% { transform: scale(1); }
}
@keyframes drawLine {
  from { stroke-dashoffset: 1000; }
  to { stroke-dashoffset: 0; }
}

/* === Reveal on scroll === */
.reveal {
  opacity: 0;
  transform: translateY(30px);
  transition: opacity 1s var(--ease-out), transform 1s var(--ease-out);
  will-change: opacity, transform;
}
.reveal.is-visible {
  opacity: 1;
  transform: none;
}

.reveal-fade { transform: none; }
.reveal-left { transform: translateX(40px); }
.reveal-right { transform: translateX(-40px); }
.reveal-left.is-visible, .reveal-right.is-visible { transform: translateX(0); }

.reveal-stagger > * {
  opacity: 0;
  transform: translateY(20px);
  transition: opacity 0.8s var(--ease-out), transform 0.8s var(--ease-out);
}
.reveal-stagger.is-visible > * { opacity: 1; transform: none; }
.reveal-stagger.is-visible > *:nth-child(1) { transition-delay: 0.05s; }
.reveal-stagger.is-visible > *:nth-child(2) { transition-delay: 0.12s; }
.reveal-stagger.is-visible > *:nth-child(3) { transition-delay: 0.19s; }
.reveal-stagger.is-visible > *:nth-child(4) { transition-delay: 0.26s; }
.reveal-stagger.is-visible > *:nth-child(5) { transition-delay: 0.33s; }
.reveal-stagger.is-visible > *:nth-child(6) { transition-delay: 0.4s; }
.reveal-stagger.is-visible > *:nth-child(7) { transition-delay: 0.47s; }
.reveal-stagger.is-visible > *:nth-child(8) { transition-delay: 0.54s; }
.reveal-stagger.is-visible > *:nth-child(9) { transition-delay: 0.61s; }
.reveal-stagger.is-visible > *:nth-child(10) { transition-delay: 0.68s; }
.reveal-stagger.is-visible > *:nth-child(11) { transition-delay: 0.75s; }
.reveal-stagger.is-visible > *:nth-child(12) { transition-delay: 0.82s; }

/* === Hover micro-interactions === */
.hover-lift { transition: transform var(--duration-base) var(--ease-out), box-shadow var(--duration-base) var(--ease-out); }
.hover-lift:hover { transform: translateY(-4px); box-shadow: var(--shadow-lg); }

.hover-tilt { transition: transform 0.4s var(--ease-out); }
.hover-tilt:hover { transform: perspective(1000px) rotateY(-3deg) rotateX(2deg) scale(1.02); }

.hover-glow { position: relative; transition: all var(--duration-base) var(--ease-smooth); }
.hover-glow::before {
  content: '';
  position: absolute;
  inset: -2px;
  background: var(--grad-leaf);
  border-radius: inherit;
  opacity: 0;
  z-index: -1;
  filter: blur(20px);
  transition: opacity var(--duration-base) var(--ease-smooth);
}
.hover-glow:hover::before { opacity: 0.4; }

/* === Loading skeleton === */
.skeleton {
  background: linear-gradient(90deg, var(--surface-2) 0%, var(--surface-3) 50%, var(--surface-2) 100%);
  background-size: 200% 100%;
  animation: shimmer 1.5s infinite;
  border-radius: var(--radius-md);
}

/* === 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;
  }
  .reveal, .reveal-stagger > * { opacity: 1; transform: none; }
  body.is-transitioning main,
  body.page-entering main { filter: none !important; opacity: 1 !important; transform: none !important; }
}