/*
  ZEPRA MARKETING MOTION & TIMING SYSTEM
  Subtle, purpose-driven animations and reduced-motion overrides
*/

/* 1. KEYFRAMES */
@keyframes mkt-float-a {
  0%, 100% {
    transform: translate3d(0, 0, 140px);
  }
  50% {
    transform: translate3d(0, -10px, 140px);
  }
}

@keyframes mkt-float-b {
  0%, 100% {
    transform: translate3d(0, 0, 160px);
  }
  50% {
    transform: translate3d(0, -12px, 160px);
  }
}

@keyframes mkt-float-c {
  0%, 100% {
    transform: translate3d(0, 0, 180px);
  }
  50% {
    transform: translate3d(0, -8px, 180px);
  }
}

@keyframes mkt-reveal-up {
  from {
    opacity: 0;
    transform: translateY(28px);
  }
  to {
    opacity: 1;
    transform: translateY(0);
  }
}

@keyframes mkt-reveal-scale {
  from {
    opacity: 0;
    transform: scale(0.95);
  }
  to {
    opacity: 1;
    transform: scale(1);
  }
}

@keyframes mkt-pulse-glow {
  0%, 100% {
    opacity: 0.6;
    transform: scale(1);
  }
  50% {
    opacity: 0.9;
    transform: scale(1.05);
  }
}

@keyframes mkt-pulse-badge {
  0%, 100% {
    transform: scale(1);
  }
  50% {
    transform: scale(1.04);
  }
}

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

/* 2. REVEAL & STAGGER CLASSES */
.mkt-reveal {
  opacity: 1;
  transform: none;
  transition: opacity 0.65s cubic-bezier(0.16, 1, 0.3, 1), transform 0.65s cubic-bezier(0.16, 1, 0.3, 1);
  will-change: opacity, transform;
}

html.mkt-reveal-enhanced .mkt-reveal:not(.is-visible) {
  opacity: 0;
  transform: translateY(24px);
}

.mkt-reveal.is-visible {
  opacity: 1;
  transform: translateY(0);
}

.mkt-reveal-delay-1 {
  transition-delay: 0.12s;
}

.mkt-reveal-delay-2 {
  transition-delay: 0.24s;
}

.mkt-reveal-delay-3 {
  transition-delay: 0.36s;
}

.mkt-reveal-delay-4 {
  transition-delay: 0.48s;
}

/* 3. CONTINUOUS FLOAT HELPERS */
.mkt-float-a {
  animation: mkt-float-a 6s ease-in-out infinite;
}

.mkt-float-b {
  animation: mkt-float-b 7s ease-in-out infinite 0.5s;
}

.mkt-float-c {
  animation: mkt-float-c 8s ease-in-out infinite 1s;
}

.mkt-glow-pulse {
  animation: mkt-pulse-glow 5s ease-in-out infinite;
}

/* 4. CHAOS -> ZEPRA ASSEMBLE TRANSITIONS */
.mkt-chaos-card {
  transition: transform 0.6s cubic-bezier(0.34, 1.56, 0.64, 1), opacity 0.5s ease;
}

.mkt-chaos-card--1 { transform: rotate(-6deg) translate(-12px, 8px); }
.mkt-chaos-card--2 { transform: rotate(5deg) translate(14px, -10px); }
.mkt-chaos-card--3 { transform: rotate(-4deg) translate(8px, 14px); }
.mkt-chaos-card--4 { transform: rotate(7deg) translate(-10px, -6px); }

.mkt-chaos-mode-clean .mkt-chaos-card {
  transform: rotate(0) translate(0, 0) !important;
}

/* 5. HERO ENTRANCE CASCADE (CSS-Only Fallback) */
.mkt-hero-badge { animation: mkt-reveal-up 0.5s cubic-bezier(0.16, 1, 0.3, 1) 0.05s both; }
.mkt-hero-h1 { animation: mkt-reveal-up 0.6s cubic-bezier(0.16, 1, 0.3, 1) 0.15s both; }
.mkt-hero-sub { animation: mkt-reveal-up 0.6s cubic-bezier(0.16, 1, 0.3, 1) 0.25s both; }
.mkt-hero-cta { animation: mkt-reveal-up 0.6s cubic-bezier(0.16, 1, 0.3, 1) 0.35s both; }
.mkt-hero-trust { animation: mkt-reveal-up 0.6s cubic-bezier(0.16, 1, 0.3, 1) 0.45s both; }
.mkt-hero-scene { animation: mkt-reveal-scale 0.8s cubic-bezier(0.16, 1, 0.3, 1) 0.2s both; }

/* 6. REDUCED MOTION ACCESSIBILITY (MANDATORY) */
@media (prefers-reduced-motion: reduce) {
  *,
  *::before,
  *::after {
    animation-duration: 0.001ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.001ms !important;
    scroll-behavior: auto !important;
  }

  .mkt-reveal {
    opacity: 1 !important;
    transform: none !important;
  }

  .mkt-scene__main,
  .mkt-scene__phone,
  .mkt-scene__float-1,
  .mkt-scene__float-2,
  .mkt-scene__float-3 {
    transform: none !important;
    animation: none !important;
  }
}