/* motion.css — Restrained brand motion for Bluebird.
   Three principles:
   1. One arrival, then stillness. Long, slow continuous animations only.
   2. Quick easings on interaction; soft easings on ambient motion.
   3. Reduced-motion users see no movement at all. */

@keyframes bb-arrive {
  0%   { transform: translateY(-44px) scale(0.97); }
  55%  { transform: translateY(6px)   scale(1.00); }
  78%  { transform: translateY(-2px)  scale(1.00); }
  100% { transform: translateY(0)     scale(1.00); }
}

@keyframes bb-breathe {
  0%, 100% { transform: translateY(0); }
  50%      { transform: translateY(-1.5px); }
}

@keyframes bb-fade-up {
  0%   { transform: translateY(16px); }
  100% { transform: translateY(0); }
}

/* Arrival — runs once on mount. Animates POSITION only (never opacity) so the
   element is always visible even if the animation clock is frozen or disabled. */
.bb-arrive {
  animation: bb-arrive 1.05s cubic-bezier(.2,.72,.28,1) forwards;
  transform-origin: 50% 60%;
  will-change: transform;
}

/* Ambient breath — kicks in AFTER arrival completes. Tiny, slow, infinite.
   Combine with .bb-arrive on the same element. */
.bb-breathe {
  animation:
    bb-arrive 1.05s cubic-bezier(.2,.72,.28,1) forwards,
    bb-breathe 5.8s ease-in-out 1.1s infinite;
  transform-origin: 50% 60%;
  will-change: transform;
}

/* Standalone breath (no arrival) — for birds that aren't the hero element. */
.bb-breathe-only {
  animation: bb-breathe 5.8s ease-in-out infinite;
  transform-origin: 50% 60%;
  will-change: transform;
}

/* Head-tilt on hover — tasteful overshoot, snaps back.
   Combines with breathe via composite transform — but to avoid fighting,
   use a wrapper element OR a separate hover state. Easiest: tilt elements
   should NOT also breathe. Reserve tilt for elements that get hovered. */
.bb-tilt {
  transition: transform .42s cubic-bezier(.34,1.4,.64,1);
  cursor: default;
}
.bb-tilt:hover {
  transform: rotate(-2.5deg) translateY(-1px);
}

/* Hero tagline stagger — applied with --d on each line. Position only. */
.bb-stagger {
  animation: bb-fade-up .9s cubic-bezier(.2,.72,.28,1) forwards;
  animation-delay: var(--d, 0s);
  will-change: transform;
}

/* Drawn-in link underlines.
   Use on anchors with `bb-link` class. The underline animates from 0 → 100%. */
.bb-link {
  position: relative;
  text-decoration: none;
  background-image: linear-gradient(currentColor, currentColor);
  background-size: 0% 1px;
  background-repeat: no-repeat;
  background-position: 0 100%;
  transition: background-size .42s cubic-bezier(.2,.72,.28,1);
}
.bb-link:hover {
  background-size: 100% 1px;
}

/* CTA button — subtle lift on hover. */
.bb-cta {
  transition: transform .28s cubic-bezier(.2,.72,.28,1), box-shadow .28s ease;
}
.bb-cta:hover {
  transform: translateY(-2px);
  box-shadow: 0 8px 22px -8px rgba(14,22,56,0.35);
}

/* Reduced-motion override — full kill switch. */
@media (prefers-reduced-motion: reduce) {
  .bb-arrive,
  .bb-breathe,
  .bb-breathe-only,
  .bb-stagger {
    animation: none !important;
  }
  .bb-tilt:hover {
    transform: none !important;
  }
  .bb-link {
    background-size: 100% 1px !important;
    transition: none !important;
  }
}