/* ==========================================================================
   Desi Astronaut — Keyframe Animations
   Vanilla CSS equivalents of the motion/react + Tailwind animations used in
   the original React application.
   ========================================================================== */

/* Hero float loops will now be handled by Framer Motion in JS */

/* --------------------------------------------------------------------------
   Helmet lens flares (AstronautHelmet.tsx)
   -------------------------------------------------------------------------- */

@keyframes da-flare-cyan {
  0%, 100% { opacity: 0.3; transform: scale(0.98); }
  50%      { opacity: 0.6; transform: scale(1.02); }
}

@keyframes da-flare-white {
  0%, 100% { opacity: 0.4; }
  50%      { opacity: 0.8; }
}

.da-helmet {
  position: relative;
  width: 100%;
  height: 100%;
  display: flex;
  align-items: center;
  justify-content: center;
  user-select: none;
}

/* <picture> is an inline box by default, so as the flex item it would shrink to
   its content and leave the image's percentage height nothing definite to
   resolve against. Giving it the box the <img> used to occupy directly keeps
   the artwork sized and centred exactly as it was before the WebP sources were
   added. The drop-shadow stays on the image alone so it is not painted twice. */
.da-helmet picture {
  display: block;
  width: 100%;
  height: 100%;
}

.da-helmet img,
.da-helmet svg {
  width: 100%;
  height: 100%;
  object-fit: contain;
  filter: drop-shadow(0 25px 35px rgba(0, 0, 0, 0.18));
}

.da-helmet__flare {
  position: absolute;
  pointer-events: none;
  border-radius: 9999px;
}

.da-helmet__flare--cyan {
  top: 20%;
  left: 32%;
  width: 4rem;
  height: 4rem;
  background: rgba(34, 211, 238, 0.2);
  filter: blur(16px);
  animation: da-flare-cyan 4s ease-in-out infinite;
}

.da-helmet__flare--white {
  top: 18%;
  left: 28%;
  width: 2rem;
  height: 2rem;
  background: rgba(255, 255, 255, 0.4);
  filter: blur(8px);
  animation: da-flare-white 3s ease-in-out 1s infinite;
}

/* --------------------------------------------------------------------------
   Tailwind-equivalent utility animations
   -------------------------------------------------------------------------- */

/* animate-ping — live status dots */
@keyframes da-ping {
  75%, 100% {
    transform: scale(2);
    opacity: 0;
  }
}

/* animate-pulse — countdown seconds, badges */
@keyframes da-pulse {
  0%, 100% { opacity: 1; }
  50%      { opacity: 0.5; }
}

/* animate-bounce — rocket icon, sparkles */
@keyframes da-bounce {
  0%, 100% {
    transform: translateY(-25%);
    animation-timing-function: cubic-bezier(0.8, 0, 1, 1);
  }
  50% {
    transform: none;
    animation-timing-function: cubic-bezier(0, 0, 0.2, 1);
  }
}

/* animate-spin — loading indicators */
@keyframes da-spin {
  to { transform: rotate(360deg); }
}

/* Slow orbital spin (index.css animate-spin-slow) */
@keyframes da-spin-slow {
  to { transform: rotate(360deg); }
}

.da-anim-ping   { animation: da-ping 1.5s cubic-bezier(0, 0, 0.2, 1) infinite; }
.da-anim-pulse  { animation: da-pulse 2s cubic-bezier(0.4, 0, 0.6, 1) infinite; }
.da-anim-bounce { animation: da-bounce 1s infinite; }
.da-anim-spin   { animation: da-spin 1s linear infinite; }
.da-anim-spin-slow { animation: da-spin-slow 30s linear infinite; }

/* --------------------------------------------------------------------------
   Enter transitions (tailwindcss-animate `animate-in` equivalents)
   -------------------------------------------------------------------------- */

/* fade-in + slide-in-from-top-2 — mobile nav panel */
@keyframes da-fade-slide-down {
  from { opacity: 0; transform: translateY(-0.5rem); }
  to   { opacity: 1; transform: translateY(0); }
}

/* fade-in + slide-in-from-bottom-4 — toast */
@keyframes da-toast-in {
  from { opacity: 0; transform: translateY(1rem); }
  to   { opacity: 1; transform: translateY(0); }
}

@keyframes da-toast-out {
  from { opacity: 1; transform: translateY(0) scale(1); }
  to   { opacity: 0; transform: translateY(0.5rem) scale(0.96); }
}

/* Nudge an existing toast instead of stacking a duplicate */
@keyframes da-toast-bump {
  0%   { transform: scale(1); }
  35%  { transform: scale(1.04); }
  100% { transform: scale(1); }
}

/* Button busy state while an add-to-cart request is in flight */
@keyframes da-btn-spin {
  to { transform: rotate(360deg); }
}

/* zoom-in-95 — quick view modal */
@keyframes da-zoom-in {
  from { opacity: 0; transform: scale(0.95); }
  to   { opacity: 1; transform: scale(1); }
}

/* slide-in-from-right — filter drawer */
@keyframes da-slide-in-right {
  from { transform: translateX(100%); }
  to   { transform: translateX(0); }
}

/* spring pop (LaunchSuccessPage rocket badge) */
@keyframes da-pop-in {
  0%   { opacity: 0; transform: scale(0.5) translateY(20px); }
  70%  { opacity: 1; transform: scale(1.05) translateY(-4px); }
  100% { opacity: 1; transform: scale(1) translateY(0); }
}

/* Confetti burst on the launch-success page */
@keyframes da-confetti-fall {
  0%   { transform: translateY(-20px) rotate(0deg); opacity: 1; }
  100% { transform: translateY(320px) rotate(720deg); opacity: 0; }
}

/* Scroll reveal logic moved to Framer Motion in animations.js */

/* --------------------------------------------------------------------------
   Ping dot composition (a solid core with an expanding ring)
   -------------------------------------------------------------------------- */

.da-ping {
  position: relative;
  display: inline-flex;
  width: 0.625rem;
  height: 0.625rem;
  flex-shrink: 0;
}

.da-ping__ring {
  position: absolute;
  inset: 0;
  border-radius: 9999px;
  background: currentColor;
  opacity: 0.75;
  animation: da-ping 1.5s cubic-bezier(0, 0, 0.2, 1) infinite;
}

.da-ping__core {
  position: relative;
  width: 100%;
  height: 100%;
  border-radius: 9999px;
  background: currentColor;
}

/* --------------------------------------------------------------------------
   Loading skeleton (product grids while AJAX search resolves)
   -------------------------------------------------------------------------- */

@keyframes da-shimmer {
  from { background-position: -400px 0; }
  to   { background-position: 400px 0; }
}

.da-skeleton {
  background: linear-gradient(
    90deg,
    #f3f4f6 25%,
    #e5e7eb 50%,
    #f3f4f6 75%
  );
  background-size: 800px 100%;
  animation: da-shimmer 1.4s linear infinite;
  border-radius: 0.75rem;
}

/* --------------------------------------------------------------------------
   Motion preferences
   -------------------------------------------------------------------------- */

@media (prefers-reduced-motion: reduce) {
  .da-hero__helmet,
  .da-hero__float,
  .da-helmet__flare,
  .da-anim-ping,
  .da-anim-pulse,
  .da-anim-bounce,
  .da-ping__ring,
  .da-skeleton {
    animation: none !important;
  }

  .da-skeleton {
    animation: none !important;
  }
}