/* ==========================================================================
   SEEYOUSOON — MOTION SYSTEM
   Source: design-ui/00-DESIGN-SYSTEM/signature-layer.md + motion-keyframes.json
   ========================================================================== */

/* === Motion tokens (custom properties) === */
:root {
  --ease-glide: cubic-bezier(0.32, 0.72, 0, 1);
  --ease-rise: cubic-bezier(0.16, 1, 0.3, 1);
  --dur-glide: 380ms;
  --dur-rise: 500ms;
  --dur-press: 160ms;
  --dur-pop: 260ms;
  --dur-pulse: 2.4s;
  --dur-draw: 1.2s;
  --dur-shimmer: 1.4s;
  --dur-aurora: 12s;
  --dur-hold: 1.2s;
  --dur-hold-emergency: 2s;
  --stagger: 40ms;
}

/* All motion is opt-in: only runs when user hasn't reduced motion */
@media (prefers-reduced-motion: no-preference) {

  /* ── Signature Token Animations ── */

  /* glide: sheets and drawers */
  .anim-glide { animation: glide var(--dur-glide) var(--ease-glide) both; }
  @keyframes glide {
    from { transform: translateY(100%); }
    to   { transform: translateY(0); }
  }

  /* rise: entrance fadeInUp with stagger */
  .anim-rise { animation: riseUp var(--dur-rise) var(--ease-rise) both; }
  @keyframes riseUp {
    from { opacity: 0; transform: translateY(24px); }
    to   { opacity: 1; transform: translateY(0); }
  }

  /* press: button press feedback */
  .anim-press:active { transform: scale(0.95); transition: transform var(--dur-press) ease; }

  /* pop: success checks and badges */
  .anim-pop { animation: popScale var(--dur-pop) var(--ease-rise) both; }
  @keyframes popScale {
    0%   { transform: scale(0.6); opacity: 0; }
    70%  { transform: scale(1.08); }
    100% { transform: scale(1); opacity: 1; }
  }

  /* pulse: live indicators */
  .anim-pulse { animation: pulseGlow var(--dur-pulse) ease-in-out infinite; }

  /* draw: routes and checkmarks via stroke-dashoffset */
  .anim-draw { animation: strokeDraw var(--dur-draw) var(--ease-rise) both; }
  @keyframes strokeDraw {
    from { stroke-dashoffset: var(--path-length, 1000); }
    to   { stroke-dashoffset: 0; }
  }

  /* shimmer: skeleton loaders (never spinners) */
  .anim-shimmer { animation: shimmerSweep var(--dur-shimmer) ease infinite; }

  /* aurora: ambient background drift */
  .anim-aurora { animation: auroraDrift var(--dur-aurora) ease infinite alternate; }

  /* hold: hold-to-confirm ring fill */
  .anim-hold { animation: holdFill var(--dur-hold) linear both; }

  /* ── Screen-specific Keyframes ── */

  @keyframes aurora {
    0%   { background-position: 0% 50%; }
    100% { background-position: 100% 50%; }
  }
  @keyframes secondaryAurora {
    0%   { opacity: 0.05; transform: translate(10%, 5%); }
    100% { opacity: 0.12; transform: translate(-10%, -5%); }
  }
  @keyframes starTwinkle {
    0%, 100% { opacity: 0.3; }
    50%      { opacity: 1; }
  }
  @keyframes skylineGlowPulse {
    0%, 100% { filter: brightness(1) drop-shadow(0 0 6px rgba(139,92,246,0.3)); }
    50%      { filter: brightness(1.15) drop-shadow(0 0 12px rgba(139,92,246,0.5)); }
  }
  @keyframes entranceFadeUp {
    from { opacity: 0; transform: translateY(20px); }
    to   { opacity: 1; transform: translateY(0); }
  }
  @keyframes pulseGlowGBG {
    0%, 100% { opacity: 0.6; }
    50%      { opacity: 1; }
  }
  @keyframes auroraSlow {
    0%   { background-position: 0% 50%; }
    100% { background-position: 100% 50%; }
  }
  @keyframes auroraSecond {
    0%   { transform: translate(-5%, 10%) scale(1); opacity: 0.06; }
    100% { transform: translate(5%, -10%) scale(1.05); opacity: 0.12; }
  }
  @keyframes orbitRotate { to { transform: rotate(360deg); } }
  @keyframes counterRotate { to { transform: rotate(-360deg); } }
  @keyframes beaconPulse {
    0%, 100% { transform: scale(1); opacity: 0.7; }
    50%      { transform: scale(1.4); opacity: 0; }
  }
  @keyframes rippleExpand {
    0%   { transform: scale(0.8); opacity: 0.5; }
    100% { transform: scale(2); opacity: 0; }
  }
  @keyframes pulse-subtle {
    0%, 100% { opacity: 0.8; }
    50%      { opacity: 1; }
  }
  @keyframes orbit-drift { to { transform: rotate(360deg); } }
  @keyframes reverse-orbit { to { transform: rotate(-360deg); } }
  @keyframes aura-float {
    0%, 100% { transform: translateY(0); opacity: 0.5; }
    50%      { transform: translateY(-8px); opacity: 0.8; }
  }
  @keyframes radarScan {
    0%   { transform: rotate(0deg); }
    100% { transform: rotate(360deg); }
  }
  @keyframes pulseGlow {
    0%, 100% { box-shadow: 0 0 8px rgba(139,92,246,0.3); }
    50%      { box-shadow: 0 0 20px rgba(139,92,246,0.6); }
  }
  @keyframes dotBlink {
    0%, 100% { opacity: 1; }
    50%      { opacity: 0.3; }
  }
  @keyframes cursorPulse {
    0%, 100% { opacity: 1; }
    50%      { opacity: 0; }
  }
  @keyframes ripple {
    0%   { transform: scale(0.5); opacity: 0.6; }
    100% { transform: scale(2.5); opacity: 0; }
  }
  @keyframes pinDrop {
    0%   { transform: translateY(-20px) scale(0.8); opacity: 0; }
    60%  { transform: translateY(2px) scale(1.05); }
    100% { transform: translateY(0) scale(1); opacity: 1; }
  }
  @keyframes pulseRing {
    0%   { transform: scale(1); opacity: 0.6; }
    100% { transform: scale(1.8); opacity: 0; }
  }
  @keyframes radarPulse {
    0%   { transform: scale(1); opacity: 0.5; }
    100% { transform: scale(2.5); opacity: 0; }
  }
  @keyframes carDrift {
    0%, 100% { transform: translateX(0) rotate(0deg); }
    25%      { transform: translateX(3px) rotate(0.5deg); }
    75%      { transform: translateX(-3px) rotate(-0.5deg); }
  }
  @keyframes capsulePulse {
    0%, 100% { transform: scale(1); }
    50%      { transform: scale(1.02); }
  }
  @keyframes auroraDrift {
    0%   { background-position: 0% 50%; opacity: 0.1; }
    50%  { background-position: 100% 50%; opacity: 0.14; }
    100% { background-position: 0% 50%; opacity: 0.1; }
  }
  @keyframes sheetEntrance {
    from { transform: translateY(40px); opacity: 0; }
    to   { transform: translateY(0); opacity: 1; }
  }
  @keyframes drawerSlideIn {
    from { transform: translateX(-100%); }
    to   { transform: translateX(0); }
  }
  @keyframes fadeInUp {
    from { opacity: 0; transform: translateY(16px); }
    to   { opacity: 1; transform: translateY(0); }
  }
  @keyframes liveBreath {
    0%, 100% { opacity: 0.7; transform: scale(1); }
    50%      { opacity: 1; transform: scale(1.05); }
  }
  @keyframes cursorBlink {
    0%, 100% { opacity: 1; }
    50%      { opacity: 0; }
  }
  @keyframes liveDot {
    0%, 100% { transform: scale(1); opacity: 1; }
    50%      { transform: scale(1.5); opacity: 0.5; }
  }
  @keyframes pulse-beacon {
    0%, 100% { box-shadow: 0 0 0 0 rgba(139,92,246,0.4); }
    50%      { box-shadow: 0 0 0 8px rgba(139,92,246,0); }
  }
  @keyframes rotate-gradient { to { transform: rotate(360deg); } }
  @keyframes ambient-aurora {
    0%   { background-position: 0% 0%; }
    100% { background-position: 100% 100%; }
  }
  @keyframes storyProgress { from { width: 0; } to { width: 100%; } }
  @keyframes slideUpCta {
    from { transform: translateY(20px); opacity: 0; }
    to   { transform: translateY(0); opacity: 1; }
  }
  @keyframes pulseChevron {
    0%, 100% { transform: translateY(0); opacity: 0.7; }
    50%      { transform: translateY(4px); opacity: 1; }
  }
  @keyframes violetGlow {
    0%, 100% { box-shadow: 0 0 12px rgba(139,92,246,0.3); }
    50%      { box-shadow: 0 0 24px rgba(139,92,246,0.6); }
  }
  @keyframes fadeInUpStagger {
    from { opacity: 0; transform: translateY(12px); }
    to   { opacity: 1; transform: translateY(0); }
  }
  @keyframes driveCar {
    0%   { transform: translateX(-10px); }
    100% { transform: translateX(10px); }
  }
  @keyframes barGlow {
    0%, 100% { opacity: 0.8; }
    50%      { opacity: 1; }
  }
  @keyframes shimmerAnim {
    0%   { background-position: -200% 0; }
    100% { background-position: 200% 0; }
  }
  @keyframes pulse-dot {
    0%, 100% { transform: scale(1); opacity: 1; }
    50%      { transform: scale(1.3); opacity: 0.6; }
  }
  @keyframes subtle-drift {
    0%, 100% { transform: translate(0, 0); }
    50%      { transform: translate(2px, -2px); }
  }
  @keyframes pulse-halo {
    0%   { transform: scale(1); opacity: 0.4; }
    100% { transform: scale(2); opacity: 0; }
  }
  @keyframes auroraBreath {
    0%, 100% { opacity: 0.08; }
    50%      { opacity: 0.14; }
  }
  @keyframes drawRoute {
    from { stroke-dashoffset: var(--path-length, 1000); }
    to   { stroke-dashoffset: 0; }
  }
  @keyframes ripplePin {
    0%   { transform: scale(1); opacity: 0.6; }
    100% { transform: scale(3); opacity: 0; }
  }
  @keyframes shimmerSweep {
    0%   { background-position: -200% 0; }
    100% { background-position: 200% 0; }
  }
  @keyframes shimmer {
    0%   { background-position: -200% 0; }
    100% { background-position: 200% 0; }
  }
  @keyframes routeDash {
    to { stroke-dashoffset: -20; }
  }
  @keyframes pulseSoft {
    0%, 100% { opacity: 0.7; }
    50%      { opacity: 1; }
  }
  @keyframes radarPing {
    0%   { transform: scale(0.8); opacity: 0.5; }
    100% { transform: scale(2); opacity: 0; }
  }
  @keyframes dotsBlink {
    0%, 100% { opacity: 1; }
    50%      { opacity: 0.2; }
  }
  @keyframes indeterminate {
    0%   { transform: translateX(-100%); }
    100% { transform: translateX(200%); }
  }
  @keyframes checkPop {
    0%   { transform: scale(0); }
    70%  { transform: scale(1.15); }
    100% { transform: scale(1); }
  }
  @keyframes routeDraw {
    from { stroke-dashoffset: var(--path-length, 800); }
    to   { stroke-dashoffset: 0; }
  }
  @keyframes beaconGlow {
    0%, 100% { box-shadow: 0 0 8px rgba(16,185,129,0.3); }
    50%      { box-shadow: 0 0 20px rgba(16,185,129,0.6); }
  }
  @keyframes carGlide {
    0%, 100% { transform: translateX(0); }
    50%      { transform: translateX(6px); }
  }
  @keyframes pulseBeacon {
    0%, 100% { transform: scale(1); opacity: 0.8; }
    50%      { transform: scale(1.15); opacity: 1; }
  }
  @keyframes countdownFlip {
    0%   { transform: rotateX(0); }
    50%  { transform: rotateX(-90deg); }
    100% { transform: rotateX(0); }
  }
  @keyframes digitRise {
    from { transform: translateY(100%); opacity: 0; }
    to   { transform: translateY(0); opacity: 1; }
  }
  @keyframes countdownTick {
    0%, 100% { transform: scale(1); }
    50%      { transform: scale(1.1); }
  }
  @keyframes dashFlow {
    to { stroke-dashoffset: -40; }
  }
  @keyframes carRipple {
    0%   { transform: scale(1); opacity: 0.4; }
    100% { transform: scale(2); opacity: 0; }
  }
  @keyframes eqWave {
    0%, 100% { height: 30%; }
    50%      { height: 80%; }
  }
  @keyframes radarWave {
    0%   { transform: scale(0.5); opacity: 0.5; }
    100% { transform: scale(2); opacity: 0; }
  }
  @keyframes popIn {
    0%   { transform: scale(0.5); opacity: 0; }
    100% { transform: scale(1); opacity: 1; }
  }
  @keyframes leafFloat {
    0%, 100% { transform: translateY(0) rotate(0deg); }
    50%      { transform: translateY(-6px) rotate(5deg); }
  }
  @keyframes printPaper {
    from { transform: translateY(-100%); }
    to   { transform: translateY(0); }
  }
  @keyframes auroraBreathe {
    0%, 100% { opacity: 0.06; transform: scale(1); }
    50%      { opacity: 0.12; transform: scale(1.02); }
  }
  @keyframes lockClose {
    0%   { transform: rotate(-15deg); }
    100% { transform: rotate(0deg); }
  }
  @keyframes slowAurora {
    0%   { background-position: 0% 50%; }
    100% { background-position: 100% 50%; }
  }
  @keyframes unfoldLetter {
    0%   { transform: scaleY(0); transform-origin: top; opacity: 0; }
    100% { transform: scaleY(1); transform-origin: top; opacity: 1; }
  }
  @keyframes barGrowViolet { from { width: 0; } to { width: var(--bar-w, 60%); } }
  @keyframes barGrowSlate  { from { width: 0; } to { width: var(--bar-w, 25%); } }
  @keyframes barGrowMoms   { from { width: 0; } to { width: var(--bar-w, 15%); } }
  @keyframes badgePop {
    0%   { transform: scale(0) rotate(-10deg); }
    70%  { transform: scale(1.1) rotate(3deg); }
    100% { transform: scale(1) rotate(0deg); }
  }
  @keyframes pulseEmerald {
    0%, 100% { box-shadow: 0 0 8px rgba(16,185,129,0.3); }
    50%      { box-shadow: 0 0 18px rgba(16,185,129,0.5); }
  }
  @keyframes breathingZone {
    0%, 100% { opacity: 0.5; transform: scale(1); }
    50%      { opacity: 0.8; transform: scale(1.03); }
  }
  @keyframes thumbGlow {
    0%, 100% { filter: brightness(1); }
    50%      { filter: brightness(1.1); }
  }
  @keyframes pulse-ring {
    0%   { transform: scale(1); opacity: 0.6; }
    100% { transform: scale(2); opacity: 0; }
  }
  @keyframes aurora-float {
    0%, 100% { transform: translate(0, 0); opacity: 0.08; }
    50%      { transform: translate(10px, -5px); opacity: 0.14; }
  }
  @keyframes car-pulse {
    0%, 100% { transform: scale(1); }
    50%      { transform: scale(1.06); }
  }
  @keyframes route-flow { to { stroke-dashoffset: -30; } }
  @keyframes carPulse {
    0%, 100% { transform: scale(1); }
    50%      { transform: scale(1.04); }
  }
  @keyframes liveBeacon {
    0%, 100% { box-shadow: 0 0 6px rgba(139,92,246,0.2); }
    50%      { box-shadow: 0 0 16px rgba(139,92,246,0.5); }
  }
  @keyframes bannerSlideIn {
    from { transform: translateY(-100%); opacity: 0; }
    to   { transform: translateY(0); opacity: 1; }
  }
  @keyframes slideTip {
    from { transform: translateY(10px); opacity: 0; }
    to   { transform: translateY(0); opacity: 1; }
  }
}