/*
  Reusable Dock logo animations.

  Usage:
  <img class="logo-animate-focus" src="/assets/dock_logo_horizontal.svg" alt="Dock Operations">
  <img class="logo-animate-rotate3d" src="/assets/dock_logo.svg" alt="Dock Operations">
  <img class="logo-animate-drop" src="/assets/dock_logo.svg" alt="Dock Operations">

  Add logo-animate-loop only in previews or loading states that should repeat.
*/

.logo-animate-focus,
.logo-animate-drop,
.logo-animate-rotate3d {
  transform-origin: 50% 50%;
  will-change: transform, opacity, filter;
}

.logo-animate-focus {
  animation: dockLogoFocus 1.4s ease-out both;
}

.logo-animate-drop {
  animation: dockLogoDrop 1.2s cubic-bezier(.22, 1, .36, 1) both;
}

.logo-animate-loop.logo-animate-focus {
  animation-duration: 2.8s;
  animation-iteration-count: infinite;
}

.logo-animate-loop.logo-animate-drop {
  animation-duration: 2.2s;
  animation-iteration-count: infinite;
}

.logo-animate-rotate3d {
  animation: dockLogoRotate3D 3s linear both;
}

.logo-animate-loop.logo-animate-rotate3d {
  animation-iteration-count: infinite;
}

.logo-animate-rotate3d.logo-animate-slow {
  animation-duration: 12s;
}

.logo-animate-color-morph {
  animation: dockLogoColorMorph 3s ease-in-out infinite;
}

@keyframes dockLogoColorMorph {
  0%, 100% { filter: hue-rotate(0deg); }
  33%      { filter: hue-rotate(90deg); }
  66%      { filter: hue-rotate(220deg); }
}

.logo-animate-pulse-slow {
  animation: dockLogoPulse 3s ease-in-out infinite;
}

@keyframes dockLogoPulse {
  0%, 100% { transform: scale(1); }
  50%      { transform: scale(1.15); }
}

.logo-animate-shadow-floor {
  position: absolute;
  left: 50%;
  bottom: 30px;
  width: 92px;
  height: 10px;
  border-radius: 50%;
  background: rgba(26,49,72,.14);
  transform: translateX(-50%);
  filter: blur(3px);
  animation: dockLogoFloorPulse 1.2s ease-out both;
  z-index: -1;
}

.logo-animate-loop ~ .logo-animate-shadow-floor,
.logo-animate-shadow-floor.logo-animate-loop {
  animation-duration: 2.4s;
  animation-iteration-count: infinite;
}

.logo-animate-dock-line {
  position: absolute;
  inset: auto 26px 42px;
  height: 2px;
  background: linear-gradient(90deg, transparent, rgba(163,29,43,.78), transparent);
  animation: dockLogoLine 1.1s ease-out both;
}

.logo-animate-dock-line.logo-animate-loop {
  animation-duration: 2s;
  animation-iteration-count: infinite;
}

@keyframes dockLogoFocus {
  0% {
    transform: scale(1.12);
    opacity: 0;
    filter: blur(14px);
  }

  45% {
    transform: scale(1);
    opacity: 1;
    filter: blur(0);
  }

  100% {
    transform: scale(1);
    opacity: 1;
    filter: blur(0);
  }
}

@keyframes dockLogoDrop {
  0% {
    transform: translateY(-38px) scale(.96);
    opacity: 0;
  }

  34% {
    transform: translateY(7px) scale(1.02);
    opacity: 1;
  }

  50%,
  100% {
    transform: translateY(0) scale(1);
    opacity: 1;
  }
}

@keyframes dockLogoFloorPulse {
  0% {
    transform: translateX(-50%) scale(.78);
    opacity: .08;
  }

  45%,
  100% {
    transform: translateX(-50%) scale(1.18);
    opacity: .22;
  }
}

@keyframes dockLogoLine {
  0% {
    transform: scaleX(.18);
    opacity: 0;
  }

  45%,
  100% {
    transform: scaleX(1);
    opacity: 1;
  }
}

@keyframes dockLogoRotate3D {
  0% {
    transform: perspective(600px) rotateY(0deg);
  }

  100% {
    transform: perspective(600px) rotateY(360deg);
  }
}

@media (prefers-reduced-motion: reduce) {
  .logo-animate-focus,
  .logo-animate-drop,
  .logo-animate-rotate3d,
  .logo-animate-shadow-floor,
  .logo-animate-dock-line {
    animation-duration: .001ms !important;
    animation-iteration-count: 1 !important;
  }
}