/* ============================================
   MEKA MODELS — ANIMATION SYSTEM
   Editorial-grade, GPU-composited only.
   ============================================ */

/* --- ACCESSIBILITY: Respect user preference --- */
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after {
    animation-duration: 0.01ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.01ms !important;
  }
  .reveal-up, .reveal-fade, .reveal-left, .reveal-right {
    opacity: 1 !important;
    transform: none !important;
  }
}

/* --- CUSTOM EASING --- */
:root {
  --ease-out-expo: cubic-bezier(0.22, 1, 0.36, 1);
  --ease-out-quart: cubic-bezier(0.25, 1, 0.5, 1);
  --duration-reveal: 800ms;
  --duration-micro: 250ms;
}

/* ============================================
   REVEAL SYSTEM
   Elements start hidden, animate in when
   .in-view is added by IntersectionObserver.
   ============================================ */

/* Fade up (default — most editorial) */
.reveal-up {
  opacity: 0;
  transform: translateY(20px);
  transition: opacity var(--duration-reveal) var(--ease-out-expo),
              transform var(--duration-reveal) var(--ease-out-expo);
  will-change: transform, opacity;
}
.reveal-up.in-view {
  opacity: 1;
  transform: translateY(0);
}

/* Fade in (no movement — for images) */
.reveal-fade {
  opacity: 0;
  transition: opacity var(--duration-reveal) var(--ease-out-expo);
  will-change: opacity;
}
.reveal-fade.in-view {
  opacity: 1;
}

/* Slide from left */
.reveal-left {
  opacity: 0;
  transform: translateX(-15px);
  transition: opacity var(--duration-reveal) var(--ease-out-expo),
              transform var(--duration-reveal) var(--ease-out-expo);
  will-change: transform, opacity;
}
.reveal-left.in-view {
  opacity: 1;
  transform: translateX(0);
}

/* Slide from right */
.reveal-right {
  opacity: 0;
  transform: translateX(15px);
  transition: opacity var(--duration-reveal) var(--ease-out-expo),
              transform var(--duration-reveal) var(--ease-out-expo);
  will-change: transform, opacity;
}
.reveal-right.in-view {
  opacity: 1;
  transform: translateX(0);
}

/* --- STAGGER DELAYS (max 5 levels) --- */
.reveal-stagger-1 { transition-delay: 0ms; }
.reveal-stagger-2 { transition-delay: 80ms; }
.reveal-stagger-3 { transition-delay: 160ms; }
.reveal-stagger-4 { transition-delay: 240ms; }
.reveal-stagger-5 { transition-delay: 320ms; }

/* ============================================
   MODEL CARD HOVER ENHANCEMENTS
   ============================================ */

/* Subtle zoom on the image inside card */
.model-card .image-3 {
  transition: transform 500ms var(--ease-out-expo);
  will-change: transform;
}
.model-card:hover .image-3 {
  transform: scale(1.03);
}

/* Name reveal: slide up from below */
.model-card .model-comp-name {
  transition: opacity 300ms var(--ease-out-expo),
              transform 300ms var(--ease-out-expo) !important;
}
.model-card:hover .model-comp-name,
.model-card .model-comp-name.show {
  opacity: 1 !important;
  transform: translateY(-5px) !important;
}

/* ============================================
   PAGE TRANSITION (fade in on load)
   ============================================ */
@keyframes page-enter {
  from { opacity: 0; }
  to   { opacity: 1; }
}

body {
  animation: page-enter 250ms var(--ease-out-expo) both;
}

/* ============================================
   MOBILE ADJUSTMENTS
   ============================================ */
@media (max-width: 767px) {
  .reveal-up {
    transform: translateY(12px);
  }
  .reveal-left {
    transform: translateX(-8px);
  }
  .reveal-right {
    transform: translateX(8px);
  }
  /* Disable hover effects on touch */
  .model-card:hover .image-3 {
    transform: none;
  }
}