/**
 * Motto Burger & Steak — Animations
 * Keyframes, utility classes, reduced motion
 * @version 2.0.0
 */

/* ═══════════════════════════════════════
   KEYFRAMES
   ═══════════════════════════════════════ */

@keyframes motto-fadeUp {
  from {
    opacity: 0;
    transform: translateY(40px);
  }
  to {
    opacity: 1;
    transform: translateY(0);
  }
}

@keyframes motto-fadeDown {
  from {
    opacity: 0;
    transform: translateY(-40px);
  }
  to {
    opacity: 1;
    transform: translateY(0);
  }
}

@keyframes motto-fadeIn {
  from {
    opacity: 0;
  }
  to {
    opacity: 1;
  }
}

@keyframes motto-fadeOut {
  from {
    opacity: 1;
  }
  to {
    opacity: 0;
  }
}

@keyframes motto-revealText {
  from {
    opacity: 0;
    transform: translateY(110%);
  }
  to {
    opacity: 1;
    transform: translateY(0);
  }
}

@keyframes motto-revealTextMask {
  from {
    clip-path: inset(0 0 100% 0);
  }
  to {
    clip-path: inset(0 0 0 0);
  }
}

@keyframes motto-smoke {
  0% {
    opacity: 0;
    transform: translateY(0) scale(0.5);
  }
  20% {
    opacity: 0.6;
  }
  100% {
    opacity: 0;
    transform: translateY(-120px) scale(2);
  }
}

@keyframes motto-flame {
  0%, 100% {
    transform: scaleY(1) scaleX(1);
    opacity: 0.8;
  }
  25% {
    transform: scaleY(1.1) scaleX(0.95);
    opacity: 1;
  }
  50% {
    transform: scaleY(0.9) scaleX(1.05);
    opacity: 0.7;
  }
  75% {
    transform: scaleY(1.05) scaleX(0.98);
    opacity: 0.9;
  }
}

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

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

@keyframes motto-float-rotate {
  0%, 100% {
    transform: translateY(0) rotate(0deg);
  }
  33% {
    transform: translateY(-8px) rotate(1deg);
  }
  66% {
    transform: translateY(-4px) rotate(-1deg);
  }
}

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

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

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

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

@keyframes motto-ripple {
  to {
    transform: scale(4);
    opacity: 0;
  }
}

@keyframes motto-pulse {
  0%, 100% {
    opacity: 1;
    transform: scale(1);
  }
  50% {
    opacity: 0.6;
    transform: scale(0.92);
  }
}

@keyframes motto-pulse-gold {
  0%, 100% {
    box-shadow: 0 0 0 0 rgba(255, 196, 0, 0.4);
  }
  50% {
    box-shadow: 0 0 0 12px rgba(255, 196, 0, 0);
  }
}

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

@keyframes motto-bounce {
  0%, 100% {
    transform: translateY(0);
    animation-timing-function: cubic-bezier(0.8, 0, 1, 1);
  }
  50% {
    transform: translateY(-20%);
    animation-timing-function: cubic-bezier(0, 0, 0.2, 1);
  }
}

@keyframes motto-marquee {
  from {
    transform: translateX(0);
  }
  to {
    transform: translateX(-50%);
  }
}

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

@keyframes motto-drawLine {
  from {
    stroke-dashoffset: 1000;
  }
  to {
    stroke-dashoffset: 0;
  }
}

@keyframes motto-glow {
  0%, 100% {
    opacity: 0.5;
    filter: blur(20px);
  }
  50% {
    opacity: 1;
    filter: blur(30px);
  }
}

@keyframes motto-borderGlow {
  0%, 100% {
    border-color: rgba(255, 196, 0, 0.2);
  }
  50% {
    border-color: rgba(255, 196, 0, 0.6);
  }
}

/* ═══════════════════════════════════════
   ANIMATION UTILITY CLASSES
   ═══════════════════════════════════════ */

.motto-animate-fadeUp {
  animation: motto-fadeUp var(--motto-duration-slow) var(--motto-ease-expo-out) both;
}

.motto-animate-fadeDown {
  animation: motto-fadeDown var(--motto-duration-slow) var(--motto-ease-expo-out) both;
}

.motto-animate-fadeIn {
  animation: motto-fadeIn var(--motto-duration-normal) var(--motto-ease-out) both;
}

.motto-animate-revealText {
  animation: motto-revealText var(--motto-duration-slow) var(--motto-ease-expo-out) both;
}

.motto-animate-smoke {
  animation: motto-smoke 4s ease-out infinite;
}

.motto-animate-flame {
  animation: motto-flame 0.8s ease-in-out infinite;
  transform-origin: bottom center;
}

.motto-animate-shimmer {
  background: linear-gradient(
    90deg,
    transparent 0%,
    rgba(255, 213, 79, 0.15) 50%,
    transparent 100%
  );
  background-size: 200% 100%;
  animation: motto-shimmer 3s ease-in-out infinite;
}

.motto-animate-float {
  animation: motto-float 6s ease-in-out infinite;
}

.motto-animate-float-slow {
  animation: motto-float 10s ease-in-out infinite;
}

.motto-animate-scaleIn {
  animation: motto-scaleIn var(--motto-duration-slow) var(--motto-ease-expo-out) both;
}

.motto-animate-slideLeft {
  animation: motto-slideInLeft var(--motto-duration-slow) var(--motto-ease-expo-out) both;
}

.motto-animate-slideRight {
  animation: motto-slideInRight var(--motto-duration-slow) var(--motto-ease-expo-out) both;
}

.motto-animate-pulse {
  animation: motto-pulse 2s ease-in-out infinite;
}

.motto-animate-pulse-gold {
  animation: motto-pulse-gold 2s ease-in-out infinite;
}

.motto-animate-spin {
  animation: motto-spin 1s linear infinite;
}

.motto-animate-bounce {
  animation: motto-bounce 1.5s ease-in-out infinite;
}

.motto-animate-glow {
  animation: motto-glow 3s ease-in-out infinite;
}

.motto-animate-borderGlow {
  animation: motto-borderGlow 2s ease-in-out infinite;
}

/* ═══════════════════════════════════════
   ANIMATION DELAYS
   ═══════════════════════════════════════ */

.motto-delay-100 { animation-delay: 100ms; }
.motto-delay-200 { animation-delay: 200ms; }
.motto-delay-300 { animation-delay: 300ms; }
.motto-delay-400 { animation-delay: 400ms; }
.motto-delay-500 { animation-delay: 500ms; }
.motto-delay-600 { animation-delay: 600ms; }
.motto-delay-700 { animation-delay: 700ms; }
.motto-delay-800 { animation-delay: 800ms; }
.motto-delay-1000 { animation-delay: 1000ms; }
.motto-delay-1200 { animation-delay: 1200ms; }
.motto-delay-1500 { animation-delay: 1500ms; }

/* ═══════════════════════════════════════
   ANIMATION DURATIONS
   ═══════════════════════════════════════ */

.motto-duration-fast { animation-duration: var(--motto-duration-fast); }
.motto-duration-normal { animation-duration: var(--motto-duration-normal); }
.motto-duration-slow { animation-duration: var(--motto-duration-slow); }
.motto-duration-slower { animation-duration: var(--motto-duration-slower); }
.motto-duration-slowest { animation-duration: var(--motto-duration-slowest); }

/* ═══════════════════════════════════════
   SCROLL-TRIGGERED REVEAL
   (JS adds .is-visible via IntersectionObserver)
   ═══════════════════════════════════════ */

.motto-reveal {
  opacity: 0;
  transform: translateY(40px);
  transition:
    opacity var(--motto-duration-slow) var(--motto-ease-expo-out),
    transform var(--motto-duration-slow) var(--motto-ease-expo-out);
}

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

.motto-reveal--left {
  transform: translateX(-40px);
}

.motto-reveal--left.is-visible {
  transform: translateX(0);
}

.motto-reveal--right {
  transform: translateX(40px);
}

.motto-reveal--right.is-visible {
  transform: translateX(0);
}

.motto-reveal--scale {
  transform: scale(0.92);
}

.motto-reveal--scale.is-visible {
  transform: scale(1);
}

.motto-reveal--fade {
  transform: none;
}

.motto-reveal--fade.is-visible {
  transform: none;
}

/* Stagger children */
.motto-stagger > * {
  opacity: 0;
  transform: translateY(30px);
  transition:
    opacity var(--motto-duration-slow) var(--motto-ease-expo-out),
    transform var(--motto-duration-slow) var(--motto-ease-expo-out);
}

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

/* ═══════════════════════════════════════
   TEXT SPLIT REVEAL (for GSAP fallback)
   ═══════════════════════════════════════ */

.motto-split-text {
  overflow: hidden;
  display: inline-block;
}

.motto-split-text__line {
  display: block;
  overflow: hidden;
}

.motto-split-text__word {
  display: inline-block;
  transform: translateY(110%);
  opacity: 0;
}

.motto-split-text.is-animated .motto-split-text__word {
  animation: motto-revealText 0.8s var(--motto-ease-expo-out) forwards;
}

/* ═══════════════════════════════════════
   LOADING STATES
   ═══════════════════════════════════════ */

.motto-skeleton {
  background: linear-gradient(
    90deg,
    var(--motto-dark) 0%,
    rgba(255, 255, 255, 0.06) 50%,
    var(--motto-dark) 100%
  );
  background-size: 200% 100%;
  animation: motto-shimmer 1.5s ease-in-out infinite;
  border-radius: var(--motto-radius-md);
}

.motto-loader {
  display: inline-block;
  width: 40px;
  height: 40px;
  border: 3px solid var(--motto-color-border);
  border-top-color: var(--motto-gold);
  border-radius: 50%;
  animation: motto-spin 0.8s linear infinite;
}

.motto-loader--sm {
  width: 24px;
  height: 24px;
  border-width: 2px;
}

.motto-loader--lg {
  width: 56px;
  height: 56px;
  border-width: 4px;
}

/* Page transition overlay */
.motto-transition {
  position: fixed;
  inset: 0;
  z-index: 9998;
  background: var(--motto-black);
  opacity: 0;
  pointer-events: none;
}

.motto-transition.is-active {
  pointer-events: auto;
}

.motto-page-transition {
  position: fixed;
  inset: 0;
  z-index: 9999;
  background: var(--motto-black);
  transform: scaleY(0);
  transform-origin: bottom;
  transition: transform var(--motto-duration-slow) var(--motto-ease-expo-in-out);
  pointer-events: none;
}

.motto-page-transition.is-active {
  transform: scaleY(1);
  transform-origin: top;
  pointer-events: all;
}

/* ═══════════════════════════════════════
   HOVER MICRO-INTERACTIONS
   ═══════════════════════════════════════ */

.motto-hover-lift {
  transition: transform var(--motto-transition-normal);
}

.motto-hover-lift:hover {
  transform: translateY(-4px);
}

.motto-hover-glow {
  transition: box-shadow var(--motto-transition-normal);
}

.motto-hover-glow:hover {
  box-shadow: var(--motto-shadow-gold);
}

.motto-hover-scale {
  transition: transform var(--motto-transition-normal);
}

.motto-hover-scale:hover {
  transform: scale(1.03);
}

.motto-hover-underline {
  position: relative;
}

.motto-hover-underline::after {
  content: '';
  position: absolute;
  bottom: -2px;
  left: 0;
  width: 0;
  height: 2px;
  background: var(--motto-gold);
  transition: width var(--motto-transition-normal);
}

.motto-hover-underline:hover::after {
  width: 100%;
}

/* ═══════════════════════════════════════
   MARQUEE / INFINITE SCROLL
   ═══════════════════════════════════════ */

.motto-marquee {
  display: flex;
  overflow: hidden;
  user-select: none;
}

.motto-marquee__track {
  display: flex;
  gap: var(--motto-space-8);
  animation: motto-marquee 30s linear infinite;
  flex-shrink: 0;
}

.motto-marquee__item {
  flex-shrink: 0;
  font-family: var(--motto-font-display);
  font-size: var(--motto-text-4xl);
  letter-spacing: var(--motto-tracking-wide);
  color: rgba(255, 196, 0, 0.15);
  white-space: nowrap;
}

/* ═══════════════════════════════════════
   PARALLAX HELPERS
   ═══════════════════════════════════════ */

.motto-parallax {
  will-change: transform;
}

.motto-parallax-slow {
  will-change: transform;
}

.motto-parallax-fast {
  will-change: transform;
}

/* ═══════════════════════════════════════
   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;
  }

  .motto-reveal,
  .motto-reveal--left,
  .motto-reveal--right,
  .motto-reveal--scale,
  .motto-reveal--fade,
  .motto-stagger > * {
    opacity: 1 !important;
    transform: none !important;
    transition: none !important;
  }

  .motto-hero__burger,
  .motto-hero__smoke-particle,
  .motto-hero__scroll,
  .motto-animate-float,
  .motto-animate-float-slow,
  .motto-animate-smoke,
  .motto-animate-flame,
  .motto-animate-shimmer,
  .motto-animate-pulse,
  .motto-animate-bounce,
  .motto-animate-glow,
  .motto-marquee__track,
  .page-404__burger {
    animation: none !important;
  }

  .motto-hero__burger,
  .motto-hero__eyebrow,
  .motto-hero__title-line,
  .motto-hero__subtitle,
  .motto-hero__actions {
    opacity: 1 !important;
    transform: none !important;
    animation: none !important;
  }

  .motto-menu-item__expand {
    max-height: none !important;
    opacity: 1 !important;
  }

  .motto-menu-item:hover {
    transform: none !important;
  }

  .motto-cursor,
  .motto-cursor__ring {
    display: none !important;
  }

  body.has-custom-cursor {
    cursor: auto !important;
  }

  body.has-custom-cursor a,
  body.has-custom-cursor button {
    cursor: pointer !important;
  }

  .motto-page-transition {
    display: none !important;
  }

  .motto-skeleton {
    animation: none !important;
    background: var(--motto-dark) !important;
  }
}

/* ═══════════════════════════════════════
   WILL-CHANGE OPTIMIZATION
   Remove after animation completes (JS)
   ═══════════════════════════════════════ */

.motto-will-animate {
  will-change: transform, opacity;
}

.motto-will-animate.is-done {
  will-change: auto;
}

/* ═══════════════════════════════════════
   GSAP SCROLLTRIGGER PIN SPACER FIX
   ═══════════════════════════════════════ */

.pin-spacer {
  pointer-events: none;
}

.pin-spacer > * {
  pointer-events: auto;
}