/* Pixel2Motion Logo Animation — for 小金作战台 */

/* === Main Logo Animation === */

.p-logo {
  width: 100%;
  height: 100%;
  animation: p2m-scale-in 2000ms cubic-bezier(0.25, 0.1, 0.25, 1.0) both,
             p2m-draw-on 2000ms cubic-bezier(0.25, 0.1, 0.25, 1.0) both;
  animation-delay: 0ms, 200ms;
  /* Hover pulse */
  transition: transform 0.3s cubic-bezier(0.34, 1.56, 0.64, 1.0),
              filter 0.3s ease-out;
}

.p-logo:hover {
  transform: scale(1.04);
  filter: drop-shadow(0 2px 12px rgba(42, 66, 116, 0.3));
}

/* === Keyframes === */

@keyframes p2m-scale-in {
  0%, 10% {
    transform: scale(0.92);
    opacity: 0.3;
  }
  30% {
    transform: scale(1.0);
    opacity: 1;
  }
  70% {
    transform: scale(1.0);
  }
  85% {
    transform: scale(1.03);
  }
  100% {
    transform: scale(1.0);
  }
}

@keyframes p2m-draw-on {
  0% {
    clip-path: inset(100% 0% 0% 100% round 8px);
  }
  60% {
    clip-path: inset(20% 0% 20% 0% round 8px);
  }
  80% {
    clip-path: inset(5% 0% 5% 0% round 8px);
  }
  100% {
    clip-path: inset(0% 0% 0% 0% round 8px);
  }
}

/* === Reduced Motion === */

@media (prefers-reduced-motion: reduce) {
  .p-logo {
    animation: none !important;
    opacity: 1 !important;
    transform: scale(1) !important;
  }
  .p-logo:hover {
    filter: none !important;
  }
}