/* ==========================================================
   animations.css — all project keyframe animations
   ========================================================== */

/* ----------------------------------------------------------
   Attract: phase 1 — glow fades in smoothly (warm colors)
   ---------------------------------------------------------- */
@keyframes attractGlowWarm {
  0%   { filter: brightness(1) drop-shadow(0 0 0px rgba(238, 164, 0, 0)); }
  100% { filter: brightness(1.2) drop-shadow(0 0 7px rgba(238, 164, 0, 0.25)); }
}

/* ----------------------------------------------------------
   Attract: phase 1 — glow fades in smoothly (cool colors)
   ---------------------------------------------------------- */
@keyframes attractGlowCool {
  0%   { filter: brightness(1) drop-shadow(0 0 0px rgba(124, 151, 169, 0)); }
  100% { filter: brightness(1.25) drop-shadow(0 0 7px rgba(124, 151, 169, 0.25)); }
}

/* ----------------------------------------------------------
   Attract: phase 1 — glow fades in smoothly (dark colors)
   ---------------------------------------------------------- */
@keyframes attractGlowDark {
  0%   { filter: brightness(1) drop-shadow(0 0 0px rgba(78, 91, 54, 0)); }
  100% { filter: brightness(1.15) drop-shadow(0 0 6px rgba(78, 91, 54, 0.15)); }
}

/* ----------------------------------------------------------
   Attract: phase 2 — symbol shake (like a wrist motion left to right)
   Symmetrical: deviation to both sides, moderate amplitude
   ---------------------------------------------------------- */
@keyframes attractShake {
  0%   { transform: rotate(0deg); }
  14%  { transform: rotate(-4deg); }
  30%  { transform: rotate(4deg); }
  46%  { transform: rotate(-3.2deg); }
  62%  { transform: rotate(3.2deg); }
  76%  { transform: rotate(-1.8deg); }
  88%  { transform: rotate(1.8deg); }
  96%  { transform: rotate(-0.8deg); }
  100% { transform: rotate(0deg); }
}

/* ----------------------------------------------------------
   Attract: phase 3 — glow fades out smoothly (warm)
   ---------------------------------------------------------- */
@keyframes attractGlowWarmOut {
  0%   { filter: brightness(1.2) drop-shadow(0 0 7px rgba(238, 164, 0, 0.25)); }
  100% { filter: brightness(1) drop-shadow(0 0 0px rgba(238, 164, 0, 0)); }
}

/* ----------------------------------------------------------
   Attract: phase 3 — glow fades out smoothly (cool)
   ---------------------------------------------------------- */
@keyframes attractGlowCoolOut {
  0%   { filter: brightness(1.25) drop-shadow(0 0 7px rgba(124, 151, 169, 0.25)); }
  100% { filter: brightness(1) drop-shadow(0 0 0px rgba(124, 151, 169, 0)); }
}

/* ----------------------------------------------------------
   Attract: phase 3 — glow fades out smoothly (dark)
   ---------------------------------------------------------- */
@keyframes attractGlowDarkOut {
  0%   { filter: brightness(1.15) drop-shadow(0 0 6px rgba(78, 91, 54, 0.15)); }
  100% { filter: brightness(1) drop-shadow(0 0 0px rgba(78, 91, 54, 0)); }
}

/* ----------------------------------------------------------
   Text reveal in the panel on open
   ---------------------------------------------------------- */
@keyframes textReveal {
  from {
    opacity: 0;
    transform: translateY(6px);
  }
  to {
    opacity: 1;
    transform: translateY(0);
  }
}

/* ----------------------------------------------------------
   Applying panel text animations
   ---------------------------------------------------------- */
.panel-text {
  animation: textReveal 0.45s 0.1s ease both;
}

.panel-title {
  animation: textReveal 0.35s 0.05s ease both;
}