/* ==========================================================================
   RetroExim — Modern Motion & Animation Stylesheet
   Keyframes, scroll reveals, pulse effects, glassmorphic sheen, spring transitions.
   ========================================================================== */

/* ---- Keyframe Animations ---------------------------------------------- */

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

@keyframes goldShimmer {
  0% { background-position: 0% 0%; }
  100% { background-position: 250% 0%; }
}

@keyframes pulseGlow {
  0%, 100% {
    box-shadow: 0 0 0 0 rgba(37, 211, 102, 0.5), 0 8px 24px rgba(0, 0, 0, 0.4);
  }
  50% {
    box-shadow: 0 0 0 14px rgba(37, 211, 102, 0), 0 12px 32px rgba(37, 211, 102, 0.35);
  }
}

@keyframes pulseGoldDot {
  0%, 100% {
    box-shadow: 0 0 0 0 rgba(212, 175, 55, 0.5);
  }
  50% {
    box-shadow: 0 0 0 6px rgba(212, 175, 55, 0);
  }
}

@keyframes modalIn {
  0% {
    opacity: 0;
    transform: translate(-50%, -46%) scale(0.94);
  }
  100% {
    opacity: 1;
    transform: translate(-50%, -50%) scale(1);
  }
}

@keyframes toastIn {
  0% {
    opacity: 0;
    transform: translateY(20px) scale(0.92);
  }
  100% {
    opacity: 1;
    transform: translateY(0) scale(1);
  }
}

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

@keyframes wordUp {
  0% {
    opacity: 0;
    transform: translateY(28px) rotate(1.5deg);
  }
  100% {
    opacity: 1;
    transform: translateY(0) rotate(0);
  }
}

@keyframes cueDrop {
  0%   { transform: scaleY(0); transform-origin: top; opacity: 0; }
  40%  { transform: scaleY(1); transform-origin: top; opacity: 1; }
  60%  { transform: scaleY(1); transform-origin: bottom; opacity: 1; }
  100% { transform: scaleY(0); transform-origin: bottom; opacity: 0; }
}

@keyframes emberPulse {
  0%, 100% {
    transform: scale(1);
    box-shadow: 0 0 8px #FFA500, 0 0 16px #FF4500, 0 0 24px rgba(255, 69, 0, 0.7);
    filter: brightness(1.1);
  }
  50% {
    transform: scale(1.18);
    box-shadow: 0 0 14px #FFD700, 0 0 26px #FF6347, 0 0 40px rgba(255, 69, 0, 0.95);
    filter: brightness(1.35);
  }
}

@keyframes sparkRise1 {
  0%   { opacity: 0; transform: translate(0, 0) scale(0.6); }
  25%  { opacity: 1; transform: translate(-8px, -24px) scale(1); }
  75%  { opacity: 0.8; transform: translate(12px, -60px) scale(0.8); }
  100% { opacity: 0; transform: translate(-6px, -95px) scale(0.3); }
}

@keyframes sparkRise2 {
  0%   { opacity: 0; transform: translate(0, 0) scale(0.5); }
  30%  { opacity: 0.9; transform: translate(10px, -30px) scale(1); }
  70%  { opacity: 0.6; transform: translate(-10px, -70px) scale(0.6); }
  100% { opacity: 0; transform: translate(8px, -110px) scale(0.2); }
}

@keyframes smokeRibbon1 {
  0% {
    transform: translate3d(0, 0, 0) scaleX(0.8) scaleY(0.7) rotate(0deg);
    opacity: 0;
  }
  15% {
    opacity: 0.75;
  }
  45% {
    transform: translate3d(-35px, -180px, 0) scaleX(1.4) scaleY(1.2) rotate(6deg);
    opacity: 0.6;
  }
  75% {
    transform: translate3d(45px, -380px, 0) scaleX(2.2) scaleY(1.8) rotate(-8deg);
    opacity: 0.35;
  }
  100% {
    transform: translate3d(-25px, -620px, 0) scaleX(3.2) scaleY(2.6) rotate(12deg);
    opacity: 0;
  }
}

@keyframes smokeRibbon2 {
  0% {
    transform: translate3d(0, 0, 0) scaleX(0.7) scaleY(0.6) rotate(0deg);
    opacity: 0;
  }
  20% {
    opacity: 0.7;
  }
  50% {
    transform: translate3d(40px, -220px, 0) scaleX(1.6) scaleY(1.3) rotate(-9deg);
    opacity: 0.5;
  }
  80% {
    transform: translate3d(-40px, -440px, 0) scaleX(2.5) scaleY(2) rotate(10deg);
    opacity: 0.25;
  }
  100% {
    transform: translate3d(30px, -700px, 0) scaleX(3.8) scaleY(2.8) rotate(-14deg);
    opacity: 0;
  }
}

@keyframes smokeRibbon3 {
  0% {
    transform: translate3d(0, 0, 0) scaleX(0.9) scaleY(0.8) rotate(0deg);
    opacity: 0;
  }
  18% {
    opacity: 0.65;
  }
  55% {
    transform: translate3d(-20px, -260px, 0) scaleX(1.8) scaleY(1.5) rotate(7deg);
    opacity: 0.45;
  }
  100% {
    transform: translate3d(50px, -680px, 0) scaleX(3.5) scaleY(2.7) rotate(-10deg);
    opacity: 0;
  }
}

@keyframes heroFadeUp {
  0% {
    opacity: 0;
    transform: translateY(30px);
  }
  100% {
    opacity: 1;
    transform: translateY(0);
  }
}

/* ---- Scroll Reveal (Intersection Observer) --------------------------- */

.reveal {
  opacity: 0;
  transform: translateY(32px);
  transition:
    opacity 0.85s cubic-bezier(0.16, 1, 0.3, 1),
    transform 0.85s cubic-bezier(0.16, 1, 0.3, 1);
  transition-delay: var(--delay, 0ms);
  will-change: opacity, transform;
}

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

.reveal--left  { transform: translateX(-36px); }
.reveal--right { transform: translateX(36px); }
.reveal--scale { transform: scale(0.94); }

.reveal--left.is-visible,
.reveal--right.is-visible,
.reveal--scale.is-visible {
  transform: none;
}

/* ---- Interactive Micro-Transitions ----------------------------------- */

.tile {
  transition:
    transform 0.45s cubic-bezier(0.16, 1, 0.3, 1),
    box-shadow 0.45s cubic-bezier(0.16, 1, 0.3, 1),
    border-color 0.35s ease;
}

.tile:hover {
  transform: translateY(-8px) scale(1.008);
  box-shadow: 0 20px 45px -10px rgba(60, 45, 25, 0.15), 0 0 20px rgba(184, 134, 11, 0.12);
  border-color: var(--line-gold);
}

.stat-card {
  transition:
    transform 0.45s cubic-bezier(0.16, 1, 0.3, 1),
    box-shadow 0.45s cubic-bezier(0.16, 1, 0.3, 1),
    border-color 0.35s ease;
}
.stat-card:hover {
  transform: translateY(-6px);
  box-shadow: 0 16px 36px -8px rgba(60, 45, 25, 0.12), 0 0 20px rgba(184, 134, 11, 0.15);
  border-color: var(--line-gold);
}

.trust-item {
  transition:
    transform 0.35s cubic-bezier(0.16, 1, 0.3, 1),
    box-shadow 0.35s cubic-bezier(0.16, 1, 0.3, 1),
    background 0.3s ease;
}
.trust-item:hover {
  transform: translateY(-4px);
}
.trust-item:hover .trust-item__icon {
  transform: scale(1.1);
  color: var(--gold);
}
.trust-item__icon {
  transition: transform 0.35s cubic-bezier(0.34, 1.56, 0.64, 1), color 0.3s ease;
}

.corridor-card {
  transition:
    transform 0.45s cubic-bezier(0.16, 1, 0.3, 1),
    box-shadow 0.45s cubic-bezier(0.16, 1, 0.3, 1),
    border-color 0.35s ease;
}
.corridor-card:hover {
  transform: translateY(-6px);
  box-shadow: 0 16px 36px -8px rgba(60, 45, 25, 0.12);
  border-color: var(--line-gold);
}

.oem-step {
  transition:
    transform 0.45s cubic-bezier(0.16, 1, 0.3, 1),
    box-shadow 0.45s cubic-bezier(0.16, 1, 0.3, 1),
    border-color 0.35s ease;
}
.oem-step:hover {
  transform: translateY(-6px);
  box-shadow: 0 16px 36px -8px rgba(60, 45, 25, 0.12);
  border-color: var(--line-gold);
}
.oem-step:hover .oem-step__num {
  background: var(--emerald);
  color: #FAF6EE;
  transform: scale(1.08);
}
.oem-step__num {
  transition: all 0.35s cubic-bezier(0.34, 1.56, 0.64, 1);
}

.btn {
  transition:
    color 0.35s cubic-bezier(0.16, 1, 0.3, 1),
    background 0.35s cubic-bezier(0.16, 1, 0.3, 1),
    border-color 0.35s cubic-bezier(0.16, 1, 0.3, 1),
    transform 0.3s cubic-bezier(0.16, 1, 0.3, 1),
    box-shadow 0.35s cubic-bezier(0.16, 1, 0.3, 1);
}
.btn:hover {
  transform: translateY(-3px);
}
.btn:active {
  transform: translateY(0);
}

/* ---- Luxury Hero & Carousel Motion ---------------------------------- */

@keyframes kenBurnsZoom {
  0% {
    transform: scale(1) translate3d(0, 0, 0);
  }
  100% {
    transform: scale(1.08) translate3d(-1%, -1%, 0);
  }
}

@keyframes heroSlideContentIn {
  0% {
    opacity: 0;
    transform: translateY(32px);
    filter: blur(4px);
  }
  100% {
    opacity: 1;
    transform: translateY(0);
    filter: blur(0);
  }
}

@keyframes progressTimer {
  0% { width: 0%; }
  100% { width: 100%; }
}

@keyframes goldGlowSlow {
  0%, 100% {
    box-shadow: 0 0 15px rgba(212, 175, 55, 0.2), 0 0 30px rgba(10, 82, 64, 0.15);
  }
  50% {
    box-shadow: 0 0 25px rgba(212, 175, 55, 0.45), 0 0 45px rgba(10, 82, 64, 0.3);
  }
}

/* ---- Scroll Reveal (Intersection Observer) --------------------------- */

.reveal {
  opacity: 0;
  transform: translateY(30px);
  transition:
    opacity 0.85s cubic-bezier(0.16, 1, 0.3, 1),
    transform 0.85s cubic-bezier(0.16, 1, 0.3, 1);
  transition-delay: var(--delay, 0ms);
  will-change: opacity, transform;
}

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

.reveal--left  { transform: translateX(-40px); }
.reveal--right { transform: translateX(40px); }
.reveal--scale { transform: scale(0.92); }

.reveal--left.is-visible,
.reveal--right.is-visible,
.reveal--scale.is-visible {
  transform: none;
}

/* ---- Word-by-Word Hero Stagger --------------------------------------- */

.hero h1 .word {
  display: inline-block;
  overflow: hidden;
  vertical-align: bottom;
}

.hero h1 .word > span {
  display: inline-block;
  transform: translateY(115%);
  animation: wordUp 0.85s var(--ease-out) forwards;
  animation-delay: calc(var(--i, 0) * 85ms + 250ms);
}

/* ---- Micro Transitions ----------------------------------------------- */

.tile {
  transition:
    transform 0.45s cubic-bezier(0.16, 1, 0.3, 1),
    box-shadow 0.45s cubic-bezier(0.16, 1, 0.3, 1),
    border-color 0.4s var(--ease);
}

.tile:hover {
  transform: translateY(-8px);
  box-shadow: 0 20px 40px -10px rgba(28, 20, 15, 0.16), 0 0 24px rgba(184, 134, 11, 0.15);
  border-color: var(--line-gold);
}

.btn {
  transition:
    color 0.35s cubic-bezier(0.16, 1, 0.3, 1),
    background 0.35s cubic-bezier(0.16, 1, 0.3, 1),
    border-color 0.35s cubic-bezier(0.16, 1, 0.3, 1),
    transform 0.3s cubic-bezier(0.16, 1, 0.3, 1),
    box-shadow 0.35s cubic-bezier(0.16, 1, 0.3, 1);
}
.btn:hover {
  transform: translateY(-2px);
}
.btn:active {
  transform: translateY(0);
}

/* ---- Reduced Motion Safety ------------------------------------------- */

@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }

  *, *::before, *::after {
    animation-duration: 0.001ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.001ms !important;
  }

  .reveal { opacity: 1 !important; transform: none !important; }
  .hero h1 .word > span { transform: none !important; }
  .scroll-cue i { display: none; }
  .emerald-text, .gold-text { animation: none; background-position: 0 0; }
  .wa-widget__pulse { display: none; }
}