/* ============================================================
   motion.css — keyframes + scroll-driven animations (Ford-style richness)
   ============================================================ */

/* ---------- Keyframes ---------- */

@keyframes fade-up {
  from { opacity: 0; transform: translate3d(0, 24px, 0); }
  to   { opacity: 1; transform: translate3d(0, 0, 0); }
}

@keyframes fade-in {
  from { opacity: 0; }
  to   { opacity: 1; }
}

@keyframes fade-down {
  from { opacity: 0; transform: translate3d(0, -16px, 0); }
  to   { opacity: 1; transform: translate3d(0, 0, 0); }
}

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

@keyframes float-y-rotate {
  0%, 100% { transform: translateY(0) rotate(-1deg); }
  50%      { transform: translateY(-12px) rotate(1deg); }
}

@keyframes bounce-soft {
  0%   { transform: translateY(40px); opacity: 0; }
  60%  { transform: translateY(-6px); opacity: 1; }
  100% { transform: translateY(0); opacity: 1; }
}

@keyframes pulse {
  0%   { box-shadow: 0 0 0 0 rgba(28,105,212,0.45); }
  70%  { box-shadow: 0 0 0 16px rgba(28,105,212,0); }
  100% { box-shadow: 0 0 0 0 rgba(28,105,212,0); }
}

@keyframes pulse-coral {
  0%   { box-shadow: 0 0 0 0 rgba(255,107,91,0.5); }
  70%  { box-shadow: 0 0 0 16px rgba(255,107,91,0); }
  100% { box-shadow: 0 0 0 0 rgba(255,107,91,0); }
}

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

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

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

@keyframes orbit {
  from { transform: rotate(0deg) translateX(40px) rotate(0deg); }
  to   { transform: rotate(360deg) translateX(40px) rotate(-360deg); }
}

@keyframes wiggle {
  0%, 100% { transform: rotate(-2deg); }
  50%      { transform: rotate(2deg); }
}

/* ---------- Reveal utilities ---------- */

.reveal-up { animation: fade-up var(--dur-editorial) var(--ease-out) both; }
.reveal-down { animation: fade-down var(--dur-editorial) var(--ease-out) both; }
.reveal-in { animation: fade-in var(--dur-editorial) var(--ease-out) both; }
.reveal-bounce { animation: bounce-soft 700ms var(--ease-spring) both; }

/* ---------- Split-text (set by JS) ---------- */

.split-text {
  display: inline-block;
  overflow: hidden;
  vertical-align: bottom;
}

.split-text__word {
  display: inline-block;
  overflow: hidden;
  vertical-align: bottom;
  margin-right: 0.18em;
}

.split-text__word > span {
  display: inline-block;
  transform: translateY(110%);
  transition: transform 700ms var(--ease-out);
}

.split-text.is-visible .split-text__word > span {
  transform: translateY(0);
}

.split-text.is-visible .split-text__word:nth-child(1) > span { transition-delay: 0ms; }
.split-text.is-visible .split-text__word:nth-child(2) > span { transition-delay: 50ms; }
.split-text.is-visible .split-text__word:nth-child(3) > span { transition-delay: 100ms; }
.split-text.is-visible .split-text__word:nth-child(4) > span { transition-delay: 150ms; }
.split-text.is-visible .split-text__word:nth-child(5) > span { transition-delay: 200ms; }
.split-text.is-visible .split-text__word:nth-child(6) > span { transition-delay: 250ms; }
.split-text.is-visible .split-text__word:nth-child(7) > span { transition-delay: 300ms; }
.split-text.is-visible .split-text__word:nth-child(8) > span { transition-delay: 350ms; }
.split-text.is-visible .split-text__word:nth-child(9) > span { transition-delay: 400ms; }
.split-text.is-visible .split-text__word:nth-child(10) > span { transition-delay: 450ms; }
.split-text.is-visible .split-text__word:nth-child(11) > span { transition-delay: 500ms; }
.split-text.is-visible .split-text__word:nth-child(12) > span { transition-delay: 550ms; }
.split-text.is-visible .split-text__word:nth-child(13) > span { transition-delay: 600ms; }
.split-text.is-visible .split-text__word:nth-child(14) > span { transition-delay: 650ms; }

/* ---------- Parallax (set by JS) ---------- */

.parallax-y {
  --parallax-speed: 0.2;
  transform: translate3d(0, calc(var(--scroll-y, 0px) * var(--parallax-speed)), 0);
  will-change: transform;
}

/* ---------- Mascot floats ---------- */

.mascot-float--panda { top: 8%; left: 4%; width: 96px; }
.mascot-float--fox { bottom: 12%; right: 4%; width: 84px; animation-delay: 0.4s; }
.mascot-float--rabbit { top: 20%; right: 8%; width: 76px; animation-delay: 0.8s; }
.mascot-float--otter { bottom: 4%; left: 8%; width: 90px; animation-delay: 1.2s; }
.mascot-float--penguin { top: 6%; right: 24%; width: 72px; animation-delay: 0.6s; }
.mascot-float--deer { top: 50%; left: 2%; width: 88px; animation-delay: 0.3s; }
.mascot-float--cat { bottom: 24%; left: 14%; width: 80px; animation-delay: 1s; }
.mascot-float--whale { bottom: 6%; right: 12%; width: 96px; animation-delay: 1.4s; }

@media (max-width: 767px) {
  .mascot-float { display: none; }
}

/* ---------- Hero gradient overlay (animated) ---------- */

.hero-gradient {
  position: absolute;
  inset: 0;
  z-index: -1;
  background: linear-gradient(135deg,
    var(--color-ink) 0%,
    #16161e 35%,
    var(--color-blue-900) 100%);
  background-size: 200% 200%;
  animation: gradient-shift 18s var(--ease-in-out) infinite;
  opacity: 0.95;
}

/* ---------- Marquee track ---------- */

.marquee__track {
  animation: marquee-left 38s linear infinite;
}

.marquee--right .marquee__track {
  animation-name: marquee-right;
}

.marquee:hover .marquee__track {
  animation-play-state: paused;
}

/* ---------- Counter ----- */

.counter-value {
  font-variant-numeric: tabular-nums;
}

/* ---------- Pulse for live indicator ----- */

.badge--live {
  animation: pulse 2s var(--ease-in-out) infinite;
}

/* ---------- Wiggling mascot accent ----- */

.wiggle-on-hover:hover img {
  animation: wiggle 0.6s ease-in-out;
}

/* ---------- Hero illustration accent ----- */

.orb {
  position: absolute;
  border-radius: 50%;
  filter: blur(80px);
  pointer-events: none;
  opacity: 0.5;
  z-index: -1;
}

.orb--blue { background: var(--color-blue); }
.orb--coral { background: var(--color-coral); }
.orb--gold { background: var(--color-gold); }
.orb--teal { background: var(--color-teal); }

/* ---------- Image sequence (services) ---------- */

.step-bar {
  display: flex;
  gap: var(--space-2);
  margin-top: var(--space-6);
}

.step-bar__dot {
  width: 12px;
  height: 12px;
  border-radius: var(--radius-pill);
  background: var(--color-line);
  border: 2px solid var(--color-bone);
  transition: background var(--dur-micro) var(--ease-out);
}

.step-bar__dot.is-active { background: var(--color-bone); }

/* ---------- Page transition ----- */

body {
  animation: fade-in 600ms var(--ease-out) both;
}

/* ---------- "Live" mascot decoration for legal ----- */

.mascot-mini {
  display: inline-block;
  vertical-align: middle;
  width: 32px; height: 32px;
  animation: float-y 3.6s var(--ease-in-out) infinite;
}

/* ---------- Tooltip ----- */

.has-tip {
  position: relative;
  border-bottom: 1px dashed currentColor;
  cursor: help;
}