/* ==========================================================================
   MARK INTERNATIONAL ADVISERS — ANIMATION ENGINE
   Sophisticated, Cinematic, High-Performance Scroll & Micro-Interactions
   ========================================================================== */

/* --- CORE KEYFRAME DEFINITIONS --- */

/* Ken Burns Subtle Slow Zoom for Hero Media */
@keyframes heroKenBurns {
  0% {
    transform: scale(1.02) translate(0, 0);
  }
  50% {
    transform: scale(1.09) translate(-1%, -1%);
  }
  100% {
    transform: scale(1.05) translate(1%, 0.5%);
  }
}

/* Floating Physics for 3D Badges & Visuals */
@keyframes floatSlow {
  0% {
    transform: translateY(0px) rotate(0deg);
  }
  50% {
    transform: translateY(-12px) rotate(1deg);
  }
  100% {
    transform: translateY(0px) rotate(0deg);
  }
}

@keyframes floatMedium {
  0% {
    transform: translateY(0px) rotate(0deg);
  }
  50% {
    transform: translateY(-18px) rotate(-1.5deg);
  }
  100% {
    transform: translateY(0px) rotate(0deg);
  }
}

@keyframes floatCounter {
  0% {
    transform: translateY(-8px) rotate(0.5deg);
  }
  50% {
    transform: translateY(6px) rotate(-0.5deg);
  }
  100% {
    transform: translateY(-8px) rotate(0.5deg);
  }
}

/* Radiant Gold Shimmer Pulse */
@keyframes goldShimmer {
  0% {
    background-position: -200% center;
  }
  100% {
    background-position: 200% center;
  }
}

/* Subtle Glowing Ring on Callouts */
@keyframes pulseGlow {
  0% {
    box-shadow: 0 0 0 0 rgba(200, 157, 60, 0.45);
  }
  70% {
    box-shadow: 0 0 0 16px rgba(200, 157, 60, 0);
  }
  100% {
    box-shadow: 0 0 0 0 rgba(200, 157, 60, 0);
  }
}

@keyframes pulseGlowPrimary {
  0% {
    box-shadow: 0 0 0 0 rgba(78, 18, 32, 0.5);
  }
  70% {
    box-shadow: 0 0 0 18px rgba(78, 18, 32, 0);
  }
  100% {
    box-shadow: 0 0 0 0 rgba(78, 18, 32, 0);
  }
}

/* Flight Path Gentle Motion */
@keyframes airplaneGlide {
  0% {
    transform: translate(0, 0) rotate(0deg);
  }
  25% {
    transform: translate(3px, -3px) rotate(2deg);
  }
  50% {
    transform: translate(6px, -1px) rotate(0deg);
  }
  75% {
    transform: translate(3px, 2px) rotate(-1deg);
  }
  100% {
    transform: translate(0, 0) rotate(0deg);
  }
}

/* Spin Slow for Background Compass / Globe Accents */
@keyframes spinSlow {
  from {
    transform: rotate(0deg);
  }
  to {
    transform: rotate(360deg);
  }
}

/* --- SCROLL REVEAL UTILITY CLASSES --- */
/* Elements start hidden and transition smoothly when '.is-revealed' is added by IntersectionObserver */

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

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

.reveal-left {
  opacity: 0;
  transform: translateX(-50px);
  transition: opacity 0.9s cubic-bezier(0.16, 1, 0.3, 1),
              transform 0.9s cubic-bezier(0.16, 1, 0.3, 1);
  will-change: opacity, transform;
}

.reveal-right {
  opacity: 0;
  transform: translateX(50px);
  transition: opacity 0.9s cubic-bezier(0.16, 1, 0.3, 1),
              transform 0.9s cubic-bezier(0.16, 1, 0.3, 1);
  will-change: opacity, transform;
}

.reveal-scale {
  opacity: 0;
  transform: scale(0.92);
  transition: opacity 0.85s cubic-bezier(0.16, 1, 0.3, 1),
              transform 0.85s cubic-bezier(0.16, 1, 0.3, 1);
  will-change: opacity, transform;
}

/* Revealed State Trigger */
.reveal-up.is-revealed,
.reveal-down.is-revealed,
.reveal-left.is-revealed,
.reveal-right.is-revealed {
  opacity: 1;
  transform: translate(0, 0);
}

.reveal-scale.is-revealed {
  opacity: 1;
  transform: scale(1);
}

/* --- STAGGERED REVEAL DELAYS --- */
.delay-100 { transition-delay: 0.1s; }
.delay-200 { transition-delay: 0.2s; }
.delay-300 { transition-delay: 0.3s; }
.delay-400 { transition-delay: 0.4s; }
.delay-500 { transition-delay: 0.5s; }
.delay-600 { transition-delay: 0.6s; }
.delay-700 { transition-delay: 0.7s; }
.delay-800 { transition-delay: 0.8s; }

/* Stagger Children Container */
.stagger-parent > * {
  opacity: 0;
  transform: translateY(30px);
  transition: opacity 0.75s cubic-bezier(0.16, 1, 0.3, 1),
              transform 0.75s cubic-bezier(0.16, 1, 0.3, 1);
}

.stagger-parent.is-revealed > *:nth-child(1) { transition-delay: 0.08s; opacity: 1; transform: translateY(0); }
.stagger-parent.is-revealed > *:nth-child(2) { transition-delay: 0.18s; opacity: 1; transform: translateY(0); }
.stagger-parent.is-revealed > *:nth-child(3) { transition-delay: 0.28s; opacity: 1; transform: translateY(0); }
.stagger-parent.is-revealed > *:nth-child(4) { transition-delay: 0.38s; opacity: 1; transform: translateY(0); }
.stagger-parent.is-revealed > *:nth-child(5) { transition-delay: 0.48s; opacity: 1; transform: translateY(0); }
.stagger-parent.is-revealed > *:nth-child(6) { transition-delay: 0.58s; opacity: 1; transform: translateY(0); }

/* --- IMAGE CURTAIN REVEAL --- */
.image-reveal-wrapper {
  position: relative;
  overflow: hidden;
}

.image-reveal-wrapper::after {
  content: '';
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background: var(--gradient-primary);
  transform: scaleX(1);
  transform-origin: left;
  transition: transform 1.1s cubic-bezier(0.77, 0, 0.175, 1);
  z-index: 2;
}

.image-reveal-wrapper.is-revealed::after {
  transform: scaleX(0);
  transform-origin: right;
}

.image-reveal-wrapper img {
  transform: scale(1.15);
  transition: transform 1.3s cubic-bezier(0.16, 1, 0.3, 1);
}

.image-reveal-wrapper.is-revealed img {
  transform: scale(1);
}

/* --- HERO ENTRANCE ON LOAD --- */
.hero-entrance-badge {
  opacity: 0;
  transform: translateY(-20px);
  animation: heroIn 0.8s cubic-bezier(0.16, 1, 0.3, 1) 0.2s forwards;
}

.hero-entrance-title {
  opacity: 0;
  transform: translateY(30px);
  animation: heroIn 0.9s cubic-bezier(0.16, 1, 0.3, 1) 0.35s forwards;
}

.hero-entrance-desc {
  opacity: 0;
  transform: translateY(25px);
  animation: heroIn 0.85s cubic-bezier(0.16, 1, 0.3, 1) 0.5s forwards;
}

.hero-entrance-callout {
  opacity: 0;
  transform: translateY(25px);
  animation: heroIn 0.85s cubic-bezier(0.16, 1, 0.3, 1) 0.65s forwards;
}

.hero-entrance-btns {
  opacity: 0;
  transform: translateY(20px);
  animation: heroIn 0.85s cubic-bezier(0.16, 1, 0.3, 1) 0.8s forwards;
}

.hero-entrance-trust {
  opacity: 0;
  transform: translateY(20px);
  animation: heroIn 0.85s cubic-bezier(0.16, 1, 0.3, 1) 0.95s forwards;
}

.hero-entrance-card {
  opacity: 0;
  transform: scale(0.92) translateY(30px);
  animation: heroCardIn 1.1s cubic-bezier(0.16, 1, 0.3, 1) 0.4s forwards;
}

@keyframes heroIn {
  to {
    opacity: 1;
    transform: translate(0, 0);
  }
}

@keyframes heroCardIn {
  to {
    opacity: 1;
    transform: scale(1) translateY(0);
  }
}

/* --- DYNAMIC MICRO-INTERACTIONS --- */

/* Hover 3D Tilt Card effect container */
.tilt-card {
  transition: transform 0.25s cubic-bezier(0.16, 1, 0.3, 1), box-shadow 0.25s ease;
  transform-style: preserve-3d;
}

/* Button Shimmer Accent */
.shimmer-text {
  background: linear-gradient(
    90deg,
    #c89d3c 0%,
    #fff 50%,
    #c89d3c 100%
  );
  background-size: 200% auto;
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
  animation: goldShimmer 4s linear infinite;
}

/* Icon Ripple Effect */
.ripple-pulse {
  position: relative;
}

.ripple-pulse::before {
  content: '';
  position: absolute;
  top: 50%;
  left: 50%;
  width: 100%;
  height: 100%;
  transform: translate(-50%, -50%);
  border-radius: inherit;
  border: 1.5px solid var(--gold);
  animation: pulseGlow 2.8s infinite;
  pointer-events: none;
}

/* Airplane Motion Accent */
.airplane-accent {
  display: inline-block;
  animation: airplaneGlide 6s ease-in-out infinite;
}

/* Progress Step Dynamic Fill */
.process-step.active .step-number-wrap {
  border-color: var(--gold-light);
  box-shadow: 0 0 30px rgba(200, 157, 60, 0.6);
}

/* Page Transition Overlay */
/* --- SIMPLE INTRO: logo + plane name (smooth, once per session) --- */
html.mia-booting,
html.mia-booting body {
  background: #0a0406 !important;
  overflow: hidden !important;
}

html.mia-booting body > *:not(.mia-simple-intro) {
  opacity: 0 !important;
  visibility: hidden !important;
  pointer-events: none !important;
}

.mia-simple-intro {
  position: fixed;
  inset: 0;
  z-index: 100000;
  background: #0a0406;
  display: flex;
  align-items: center;
  justify-content: center;
  pointer-events: all;
  opacity: 1;
  transition: none;
}

.mia-simple-intro.is-out {
  opacity: 0;
  transition: opacity 0.6s ease;
  pointer-events: none;
}

.msi-inner {
  display: flex;
  flex-direction: column;
  align-items: center;
  text-align: center;
  padding: 1.5rem;
  max-width: 94vw;
}

.msi-logo {
  width: 80px;
  height: 80px;
  object-fit: contain;
  background: #fff;
  border-radius: 16px;
  padding: 6px;
  border: 1.5px solid rgba(200, 157, 60, 0.5);
  box-shadow: 0 12px 32px rgba(0, 0, 0, 0.4);
  opacity: 0;
  transform: translateY(10px) scale(0.92);
}

.mia-simple-intro.is-on .msi-logo {
  animation: msiLogoIn 0.85s cubic-bezier(0.22, 1, 0.36, 1) 0.1s forwards;
}

.msi-name-row {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 0.55rem;
  margin-top: 1.25rem;
  max-width: 100%;
}

.msi-plane {
  color: #e6b84d;
  flex-shrink: 0;
  opacity: 0;
  display: flex;
  line-height: 0;
  filter: drop-shadow(0 4px 10px rgba(200, 157, 60, 0.4));
}

.mia-simple-intro.is-on .msi-plane {
  animation: msiPlaneDrag 1.15s cubic-bezier(0.22, 1, 0.36, 1) 0.55s forwards;
}

.msi-name {
  font-family: var(--font-heading);
  font-size: clamp(0.95rem, 3.5vw, 1.3rem);
  font-weight: 800;
  color: #fff;
  letter-spacing: 0.05em;
  text-transform: uppercase;
  white-space: nowrap;
  opacity: 0;
  transform: translateX(-28px);
}

.mia-simple-intro.is-on .msi-name {
  animation: msiNameIn 1.1s cubic-bezier(0.22, 1, 0.36, 1) 0.65s forwards;
}

.msi-motto {
  margin: 0.8rem 0 0;
  font-size: 0.78rem;
  font-weight: 700;
  color: #e6b84d;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  opacity: 0;
}

.mia-simple-intro.is-on .msi-motto {
  animation: msiMottoIn 0.7s ease 1.5s forwards;
}

@keyframes msiLogoIn {
  to {
    opacity: 1;
    transform: translateY(0) scale(1);
  }
}

@keyframes msiPlaneDrag {
  0% {
    opacity: 0;
    transform: translateX(-64px);
  }
  100% {
    opacity: 1;
    transform: translateX(0);
  }
}

@keyframes msiNameIn {
  0% {
    opacity: 0;
    transform: translateX(-28px);
  }
  100% {
    opacity: 1;
    transform: translateX(0);
  }
}

@keyframes msiMottoIn {
  to { opacity: 1; }
}

@media (max-width: 400px) {
  .msi-logo { width: 64px; height: 64px; }
  .msi-name { font-size: 0.85rem; letter-spacing: 0.03em; }
}

/* --- ACCESSIBILITY / PREFERS-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;
  }
  
  .reveal-up,
  .reveal-down,
  .reveal-left,
  .reveal-right,
  .reveal-scale,
  .stagger-parent > * {
    opacity: 1 !important;
    transform: none !important;
  }
  
  .hero-bg-media img {
    animation: none !important;
  }
}