/* ============================================
   IN-CONTRO - NEO-BRUTALIST ANIMATIONS
   "Bold. Human. Unforgettable."

   Punchy, intentional animations
   with full accessibility support
   ============================================ */

/* ============================================
   SCROLL-TRIGGERED ANIMATIONS
   ============================================ */

/* Base state for animated elements */
.animate-fade-up,
.animate-fade-down,
.animate-fade-left,
.animate-fade-right,
.animate-scale,
.animate-rotate {
  opacity: 0;
  transition:
    opacity var(--duration-slow) var(--ease-out),
    transform var(--duration-slow) var(--ease-out);
}

.animate-fade-up {
  transform: translateY(50px);
}

.animate-fade-down {
  transform: translateY(-50px);
}

.animate-fade-left {
  transform: translateX(50px);
}

.animate-fade-right {
  transform: translateX(-50px);
}

.animate-scale {
  transform: scale(0.9);
}

.animate-rotate {
  transform: rotate(-5deg) translateY(30px);
}

/* Animated state - triggered by JS IntersectionObserver */
.animate-fade-up.is-visible,
.animate-fade-down.is-visible,
.animate-fade-left.is-visible,
.animate-fade-right.is-visible,
.animate-scale.is-visible,
.animate-rotate.is-visible {
  opacity: 1;
  transform: translate(0, 0) scale(1) rotate(0deg);
}

/* Animation Delays */
.animate-delay-100 { transition-delay: 100ms; }
.animate-delay-200 { transition-delay: 200ms; }
.animate-delay-300 { transition-delay: 300ms; }
.animate-delay-400 { transition-delay: 400ms; }
.animate-delay-500 { transition-delay: 500ms; }
.animate-delay-600 { transition-delay: 600ms; }

/* Staggered children animations */
.animate-stagger > * {
  opacity: 0;
  transform: translateY(30px);
  transition:
    opacity var(--duration-normal) var(--ease-out),
    transform var(--duration-normal) var(--ease-out);
}

.animate-stagger.is-visible > *:nth-child(1) { transition-delay: 0ms; }
.animate-stagger.is-visible > *:nth-child(2) { transition-delay: 100ms; }
.animate-stagger.is-visible > *:nth-child(3) { transition-delay: 200ms; }
.animate-stagger.is-visible > *:nth-child(4) { transition-delay: 300ms; }
.animate-stagger.is-visible > *:nth-child(5) { transition-delay: 400ms; }
.animate-stagger.is-visible > *:nth-child(6) { transition-delay: 500ms; }
.animate-stagger.is-visible > *:nth-child(7) { transition-delay: 600ms; }
.animate-stagger.is-visible > *:nth-child(8) { transition-delay: 700ms; }

.animate-stagger.is-visible > * {
  opacity: 1;
  transform: translateY(0);
}

/* ============================================
   HOVER ANIMATIONS
   ============================================ */

/* Tilt on hover */
.hover-tilt {
  transition: transform var(--duration-fast) var(--ease-out);
}

.hover-tilt:hover {
  transform: rotate(-2deg) scale(1.02);
}

/* Lift with shadow */
.hover-lift {
  transition:
    transform var(--duration-fast) var(--ease-out),
    box-shadow var(--duration-fast) var(--ease-out);
}

.hover-lift:hover {
  transform: translate(-4px, -4px);
  box-shadow: var(--shadow-brutal-lg);
}

/* Scale */
.hover-scale {
  transition: transform var(--duration-fast) var(--ease-out);
}

.hover-scale:hover {
  transform: scale(1.05);
}

/* Shake on hover */
.hover-shake:hover {
  animation: shake 0.5s ease-in-out;
}

@keyframes shake {
  0%, 100% { transform: translateX(0); }
  20% { transform: translateX(-5px) rotate(-2deg); }
  40% { transform: translateX(5px) rotate(2deg); }
  60% { transform: translateX(-5px) rotate(-1deg); }
  80% { transform: translateX(5px) rotate(1deg); }
}

/* Wiggle on hover */
.hover-wiggle:hover {
  animation: wiggle 0.4s ease-in-out;
}

@keyframes wiggle {
  0%, 100% { transform: rotate(0deg); }
  25% { transform: rotate(-5deg); }
  75% { transform: rotate(5deg); }
}

/* Pop on hover */
.hover-pop {
  transition: transform var(--duration-fast) var(--ease-bounce);
}

.hover-pop:hover {
  transform: scale(1.1);
}

/* ============================================
   BUTTON ANIMATIONS
   ============================================ */

/* Button press */
.btn:active {
  transform: translate(4px, 4px);
  transition-duration: 50ms;
}

/* Button hover icon slide */
.btn:hover .btn__icon {
  transform: translateX(4px);
}

/* ============================================
   MICRO-INTERACTIONS
   ============================================ */

/* Link underline grow */
.link-grow {
  position: relative;
  display: inline-block;
}

.link-grow::after {
  content: '';
  position: absolute;
  bottom: -2px;
  left: 0;
  width: 0;
  height: 3px;
  background: var(--color-primary);
  transition: width var(--duration-normal) var(--ease-out);
}

.link-grow:hover::after {
  width: 100%;
}

/* Icon spin */
.icon-spin {
  transition: transform var(--duration-normal) var(--ease-out);
}

.icon-spin:hover {
  transform: rotate(180deg);
}

/* Icon bounce */
.icon-bounce:hover {
  animation: icon-bounce 0.5s ease-in-out;
}

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

/* ============================================
   LOADING STATES
   ============================================ */

/* Spinner */
.animate-spin {
  animation: spin 0.75s linear infinite;
}

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

/* Pulse */
.animate-pulse {
  animation: pulse 2s ease-in-out infinite;
}

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

/* Bounce */
.animate-bounce {
  animation: bounce 1.5s ease-in-out infinite;
}

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

/* Skeleton shimmer */
.skeleton {
  position: relative;
  background: var(--color-sand);
  overflow: hidden;
}

.skeleton::after {
  content: '';
  position: absolute;
  inset: 0;
  background: linear-gradient(
    90deg,
    transparent 0%,
    var(--color-white) 50%,
    transparent 100%
  );
  animation: skeleton-shimmer 1.5s ease-in-out infinite;
}

@keyframes skeleton-shimmer {
  0% { transform: translateX(-100%); }
  100% { transform: translateX(100%); }
}

/* ============================================
   PAGE TRANSITIONS
   ============================================ */

/* Page fade in */
.page-wrapper {
  animation: page-enter var(--duration-slow) var(--ease-out);
}

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

/* ============================================
   FORM ANIMATIONS
   ============================================ */

/* Input focus */
.form-input:focus,
.form-textarea:focus,
.form-select:focus {
  animation: input-focus 0.3s ease-out;
}

@keyframes input-focus {
  0% { transform: scale(1); }
  50% { transform: scale(1.01); }
  100% { transform: scale(1); }
}

/* Form error shake */
.form-shake {
  animation: form-shake 0.5s ease-in-out;
}

@keyframes form-shake {
  0%, 100% { transform: translateX(0); }
  20%, 60% { transform: translateX(-8px); }
  40%, 80% { transform: translateX(8px); }
}

/* Alert slide in */
.alert-enter {
  animation: alert-enter var(--duration-normal) var(--ease-bounce);
}

@keyframes alert-enter {
  from {
    opacity: 0;
    transform: translateY(-20px) scale(0.95);
  }
  to {
    opacity: 1;
    transform: translateY(0) scale(1);
  }
}

/* ============================================
   MENU ANIMATIONS
   ============================================ */

/* Hamburger transform */
.header__toggle-icon line {
  transition: all var(--duration-normal) var(--ease-out);
  transform-origin: center;
}

.header__toggle[aria-expanded="true"] .header__toggle-icon line:nth-child(1) {
  transform: translateY(6px) rotate(45deg);
}

.header__toggle[aria-expanded="true"] .header__toggle-icon line:nth-child(2) {
  opacity: 0;
  transform: scaleX(0);
}

.header__toggle[aria-expanded="true"] .header__toggle-icon line:nth-child(3) {
  transform: translateY(-6px) rotate(-45deg);
}

/* Mobile menu slide */
.nav {
  transition:
    transform var(--duration-slow) var(--ease-out),
    opacity var(--duration-slow) var(--ease-out),
    visibility var(--duration-slow);
}

/* ============================================
   DECORATIVE ANIMATIONS
   ============================================ */

/* Floating */
.animate-float {
  animation: float 6s ease-in-out infinite;
}

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

/* Rotate slow */
.animate-rotate-slow {
  animation: rotate-slow 20s linear infinite;
}

@keyframes rotate-slow {
  to { transform: rotate(360deg); }
}

/* Marquee scroll */
.marquee {
  animation: marquee 30s linear infinite;
}

@keyframes marquee {
  0% { transform: translateX(0); }
  100% { transform: translateX(-50%); }
}

/* Glitch effect */
.glitch {
  position: relative;
}

.glitch::before,
.glitch::after {
  content: attr(data-text);
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
}

.glitch::before {
  animation: glitch-1 0.5s infinite;
  color: var(--color-primary);
  z-index: -1;
}

.glitch::after {
  animation: glitch-2 0.5s infinite;
  color: var(--color-accent);
  z-index: -2;
}

@keyframes glitch-1 {
  0%, 100% { clip-path: inset(0 0 0 0); transform: translate(0); }
  20% { clip-path: inset(20% 0 60% 0); transform: translate(-3px, 2px); }
  40% { clip-path: inset(40% 0 40% 0); transform: translate(3px, -2px); }
  60% { clip-path: inset(60% 0 20% 0); transform: translate(-2px, 1px); }
  80% { clip-path: inset(80% 0 0 0); transform: translate(2px, -1px); }
}

@keyframes glitch-2 {
  0%, 100% { clip-path: inset(0 0 0 0); transform: translate(0); }
  20% { clip-path: inset(60% 0 20% 0); transform: translate(3px, -2px); }
  40% { clip-path: inset(20% 0 60% 0); transform: translate(-3px, 2px); }
  60% { clip-path: inset(40% 0 40% 0); transform: translate(2px, -1px); }
  80% { clip-path: inset(0 0 80% 0); transform: translate(-2px, 1px); }
}

/* ============================================
   COUNTER ANIMATION
   ============================================ */

.counter {
  font-variant-numeric: tabular-nums;
}

/* ============================================
   SCROLL PROGRESS
   ============================================ */

.scroll-indicator {
  transition: transform 50ms linear;
}

/* ============================================
   REDUCED MOTION - CRITICAL ACCESSIBILITY
   ============================================ */

@media (prefers-reduced-motion: reduce) {
  *,
  *::before,
  *::after {
    animation-duration: 0.01ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.01ms !important;
    animation-delay: 0ms !important;
  }

  /* Ensure animated elements are visible */
  .animate-fade-up,
  .animate-fade-down,
  .animate-fade-left,
  .animate-fade-right,
  .animate-scale,
  .animate-rotate,
  .animate-stagger > * {
    opacity: 1;
    transform: none;
    transition: none;
  }

  /* Disable hover animations */
  .hover-tilt:hover,
  .hover-lift:hover,
  .hover-scale:hover,
  .hover-pop:hover {
    transform: none;
  }

  /* Disable decorative animations */
  .animate-float,
  .animate-rotate-slow,
  .marquee {
    animation: none;
  }

  /* Disable loading animations */
  .skeleton::after {
    animation: none;
  }

  .animate-spin,
  .animate-pulse,
  .animate-bounce {
    animation: none;
  }

  /* Keep functionality but instant */
  .page-wrapper {
    animation: none;
  }

  .scroll-indicator {
    transition: none;
  }
}

/* ============================================
   PRINT STYLES
   ============================================ */

@media print {
  * {
    animation: none !important;
    transition: none !important;
  }

  .animate-fade-up,
  .animate-fade-down,
  .animate-fade-left,
  .animate-fade-right,
  .animate-scale,
  .animate-rotate {
    opacity: 1 !important;
    transform: none !important;
  }

  .scroll-indicator {
    display: none !important;
  }
}