/**
 * AgroBridge Legal Pages - Animations
 * Motion Design System
 * Version: 1.0.0
 */

/* ==========================================================================
   KEYFRAME ANIMATIONS
   ========================================================================== */
@keyframes fadeIn {
  from {
    opacity: 0;
    transform: translateY(20px);
  }
  to {
    opacity: 1;
    transform: translateY(0);
  }
}

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

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

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

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

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

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

@keyframes pulse {
  0%, 100% {
    opacity: 1;
    transform: scale(1);
  }
  50% {
    opacity: 0.5;
    transform: scale(1.05);
  }
}

@keyframes shimmer {
  0%, 100% {
    background-position: 0% 50%;
  }
  50% {
    background-position: 100% 50%;
  }
}

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

@keyframes ripple {
  0% {
    transform: scale(0);
    opacity: 1;
  }
  100% {
    transform: scale(4);
    opacity: 0;
  }
}

@keyframes checkmark {
  0% {
    stroke-dashoffset: 100;
  }
  100% {
    stroke-dashoffset: 0;
  }
}

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

/* ==========================================================================
   SCROLL-TRIGGERED ANIMATIONS
   ========================================================================== */
.animate-on-scroll {
  opacity: 0;
  transform: translateY(30px);
  transition: opacity var(--duration-slow) var(--ease-out),
              transform var(--duration-slow) var(--ease-out);
}

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

/* Stagger children */
.stagger-child {
  opacity: 0;
  transform: translateY(20px);
  transition: opacity var(--duration-normal) var(--ease-out),
              transform var(--duration-normal) var(--ease-out);
}

.animate-in .stagger-child:nth-child(1) { transition-delay: var(--stagger-fast); }
.animate-in .stagger-child:nth-child(2) { transition-delay: calc(var(--stagger-fast) * 2); }
.animate-in .stagger-child:nth-child(3) { transition-delay: calc(var(--stagger-fast) * 3); }
.animate-in .stagger-child:nth-child(4) { transition-delay: calc(var(--stagger-fast) * 4); }
.animate-in .stagger-child:nth-child(5) { transition-delay: calc(var(--stagger-fast) * 5); }
.animate-in .stagger-child:nth-child(6) { transition-delay: calc(var(--stagger-fast) * 6); }

.animate-in .stagger-child {
  opacity: 1;
  transform: translateY(0);
}

/* ==========================================================================
   BUTTON RIPPLE EFFECT
   ========================================================================== */
.btn--ripple {
  position: relative;
  overflow: hidden;
}

.btn--ripple::after {
  content: '';
  position: absolute;
  inset: 0;
  background: radial-gradient(circle, rgba(255,255,255,0.3) 0%, transparent 70%);
  opacity: 0;
  transform: scale(0);
  transition: opacity var(--duration-normal), transform var(--duration-normal);
  pointer-events: none;
}

.btn--ripple:active::after {
  opacity: 1;
  transform: scale(2);
  transition: 0ms;
}

/* ==========================================================================
   COOKIE BANNER ANIMATION
   ========================================================================== */
.cookie-banner {
  position: fixed;
  bottom: 0;
  left: 0;
  right: 0;
  background: rgba(255, 255, 255, 0.98);
  backdrop-filter: blur(20px);
  -webkit-backdrop-filter: blur(20px);
  border-top: 1px solid rgba(212, 175, 55, 0.3);
  box-shadow: 0 -10px 40px rgba(0, 0, 0, 0.1);
  z-index: var(--z-cookie-banner);
  padding: var(--space-6);
  transform: translateY(100%);
  transition: transform var(--duration-slow) var(--ease-spring);
}

.cookie-banner.visible {
  transform: translateY(0);
}

.cookie-banner__container {
  max-width: 1200px;
  margin: 0 auto;
  display: flex;
  align-items: center;
  gap: var(--space-6);
  flex-wrap: wrap;
}

.cookie-banner__icon {
  width: 48px;
  height: 48px;
  flex-shrink: 0;
  background: linear-gradient(135deg, var(--color-gold-500), var(--color-gold-600));
  border-radius: var(--radius-lg);
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 1.5rem;
  box-shadow: var(--shadow-gold);
  animation: pulse 2s infinite;
}

.cookie-banner__content {
  flex: 1;
  min-width: 280px;
}

.cookie-banner__title {
  font-family: var(--font-display);
  font-size: var(--text-lg);
  font-weight: var(--weight-semibold);
  color: var(--color-gray-900);
  margin-bottom: var(--space-1);
}

.cookie-banner__text {
  font-size: var(--text-sm);
  color: var(--color-gray-600);
  line-height: var(--leading-relaxed);
}

.cookie-banner__actions {
  display: flex;
  gap: var(--space-3);
  flex-wrap: wrap;
}

/* Mobile Optimization */
@media (max-width: 768px) {
  .cookie-banner {
    padding: var(--space-4);
  }
  
  .cookie-banner__container {
    flex-direction: column;
    text-align: center;
  }
  
  .cookie-banner__actions {
    width: 100%;
    justify-content: center;
  }
  
  .cookie-banner__actions .btn {
    flex: 1;
    min-width: 140px;
  }
}

/* ==========================================================================
   FOCUS ANIMATIONS
   ========================================================================== */
@keyframes focusPulse {
  0%, 100% {
    box-shadow: 0 0 0 3px rgba(212, 175, 55, 0.5);
  }
  50% {
    box-shadow: 0 0 0 6px rgba(212, 175, 55, 0.3);
  }
}

.focus-animate:focus-visible {
  animation: focusPulse 1s ease-in-out;
}

/* ==========================================================================
   TAB SWITCHING ANIMATION
   ========================================================================== */
.tab-panel {
  opacity: 0;
  transform: translateX(20px);
  transition: opacity var(--duration-normal) var(--ease-out),
              transform var(--duration-normal) var(--ease-out);
  display: none;
}

.tab-panel.active {
  display: block;
  opacity: 1;
  transform: translateX(0);
}

.tab-panel.exiting {
  opacity: 0;
  transform: translateX(-20px);
}

/* ==========================================================================
   CARD HOVER EFFECTS
   ========================================================================== */
.card--hover-lift {
  transition: transform var(--duration-normal) var(--ease-out),
              box-shadow var(--duration-normal) var(--ease-out);
}

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

/* ==========================================================================
   LOADING SKELETON
   ========================================================================== */
@keyframes skeletonLoading {
  0% {
    background-position: -200% 0;
  }
  100% {
    background-position: 200% 0;
  }
}

.skeleton {
  background: linear-gradient(
    90deg,
    var(--color-gray-100) 25%,
    var(--color-gray-200) 50%,
    var(--color-gray-100) 75%
  );
  background-size: 200% 100%;
  animation: skeletonLoading 1.5s infinite;
  border-radius: var(--radius-md);
}

/* ==========================================================================
   SUCCESS CHECKMARK
   ========================================================================== */
.checkmark {
  width: 40px;
  height: 40px;
  border-radius: 50%;
  display: block;
  stroke-width: 2;
  stroke: var(--color-white);
  stroke-miterlimit: 10;
  box-shadow: inset 0px 0px 0px var(--color-success);
  animation: scaleIn 0.3s ease-in-out both;
}

.checkmark__circle {
  stroke-dasharray: 166;
  stroke-dashoffset: 166;
  stroke-width: 2;
  stroke-miterlimit: 10;
  stroke: var(--color-success);
  fill: none;
  animation: checkmark 0.6s ease-in-out forwards;
}

.checkmark__check {
  transform-origin: 50% 50%;
  stroke-dasharray: 48;
  stroke-dashoffset: 48;
  animation: checkmark 0.3s ease-in-out 0.3s forwards;
}

/* ==========================================================================
   ENCRYPTION VISUAL ENHANCED
   ========================================================================== */
.encryption-visual {
  animation: float 6s ease-in-out infinite;
}

.encryption-ring {
  animation: rotate 20s linear infinite;
}

.encryption-ring.ring-1 {
  animation-duration: 15s;
}

.encryption-ring.ring-2 {
  animation-duration: 20s;
  animation-direction: reverse;
}

.encryption-ring.ring-3 {
  animation-duration: 25s;
}

.encryption-core {
  animation: pulse 3s ease-in-out infinite;
}

/* ==========================================================================
   PROGRESSIVE DISCLOSURE ENHANCED
   ========================================================================== */
.legal-section__content {
  display: grid;
  grid-template-rows: 0fr;
  transition: grid-template-rows var(--duration-slow) var(--ease-out);
}

.legal-section.expanded .legal-section__content {
  grid-template-rows: 1fr;
}

.legal-section__inner {
  overflow: hidden;
  opacity: 0;
  transform: translateY(-10px);
  transition: opacity var(--duration-slow) var(--ease-out),
              transform var(--duration-slow) var(--ease-out);
}

.legal-section.expanded .legal-section__inner {
  opacity: 1;
  transform: translateY(0);
}

/* Chevron rotation */
.legal-section__toggle-icon {
  transition: transform var(--duration-normal) var(--ease-spring);
}

.legal-section.expanded .legal-section__toggle-icon {
  transform: rotate(-135deg);
}

/* ==========================================================================
   COOKIE TOGGLE ANIMATION
   ========================================================================== */
.cookie-toggle__slider {
  transition: background-color var(--duration-normal) var(--ease-spring);
}

.cookie-toggle__slider::after {
  transition: transform var(--duration-normal) var(--ease-spring);
}

.cookie-toggle__input:checked + .cookie-toggle__slider {
  animation: pulse 0.3s ease-in-out;
}

/* ==========================================================================
   TIMELINE STEP ANIMATION
   ========================================================================== */
.timeline-step {
  transition: transform var(--duration-fast) var(--ease-out);
}

.timeline-step:hover {
  transform: translateY(-4px);
}

.timeline-step__icon {
  transition: all var(--duration-fast) var(--ease-out);
}

.timeline-step:hover .timeline-step__icon {
  animation: pulse 0.5s ease-in-out;
}

/* ==========================================================================
   NOTIFICATION TOAST
   ========================================================================== */
.toast {
  position: fixed;
  bottom: var(--space-6);
  right: var(--space-6);
  background: var(--color-white);
  border-radius: var(--radius-xl);
  box-shadow: var(--shadow-2xl);
  padding: var(--space-4) var(--space-6);
  display: flex;
  align-items: center;
  gap: var(--space-3);
  transform: translateX(150%);
  transition: transform var(--duration-normal) var(--ease-spring);
  z-index: var(--z-toast);
  max-width: 400px;
}

.toast.visible {
  transform: translateX(0);
}

.toast__icon {
  width: 24px;
  height: 24px;
  flex-shrink: 0;
}

.toast__content {
  flex: 1;
}

.toast__title {
  font-weight: var(--weight-semibold);
  font-size: var(--text-sm);
  margin-bottom: var(--space-1);
}

.toast__message {
  font-size: var(--text-xs);
  color: var(--color-gray-600);
}

/* ==========================================================================
   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;
  }
  
  .animate-on-scroll {
    opacity: 1;
    transform: none;
  }
  
  .stagger-child {
    opacity: 1;
    transform: none;
  }
  
  .encryption-visual,
  .encryption-ring,
  .encryption-core {
    animation: none !important;
  }
  
  .cookie-banner {
    transition: none;
  }
  
  .skeleton {
    animation: none;
    background: var(--color-gray-200);
  }
}