/* === Flashy Animation Pack v2 (One-Time Animations) === */

/* Rainbow gradient background animation - runs once */
body {
  background: linear-gradient(270deg, #ff4081, #7c4dff, #40c4ff, #69f0ae);
  background-size: 800% 800%;
  animation: rainbowBG 6s ease 1 forwards;
  font-family: "Poppins", sans-serif;
  color: #fff;
}

/* Spinning logo/header - spins once */
.header .logo, .site-title {
  display: inline-block;
  animation: spin 2s linear 1 forwards;
}

/* Wavy text animation for headings - plays once */
h1, h2, h3 {
  display: inline-block;
  animation: wave 1.5s ease-in-out 1 forwards;
}

/* Flip cards on hover (plays once per hover) */
.article-card, .topic-card, .support-card {
  perspective: 1000px;
  transition: transform 0.8s;
  transform-style: preserve-3d;
}
.article-card:hover, .topic-card:hover, .support-card:hover {
  transform: rotateY(180deg);
}

/* Floating effect for buttons - only on hover */
button, .btn, .button {
  background: linear-gradient(45deg, #ff4081, #7c4dff);
  border: none;
  border-radius: 25px;
  color: #fff;
  padding: 12px 30px;
  font-weight: bold;
  cursor: pointer;
  box-shadow: 0 0 20px rgba(255,255,255,0.4);
  transition: transform 0.4s ease, box-shadow 0.4s ease;
}
button:hover, .btn:hover, .button:hover {
  transform: scale(1.1) rotate(5deg);
  animation: float 1.5s ease 1 forwards;
}

/* Links shimmer once per hover */
a {
  color: #fff;
  position: relative;
  text-decoration: none;
  overflow: hidden;
}
a::after {
  content: "";
  position: absolute;
  top: 0; left: -100%;
  width: 100%; height: 100%;
  background: linear-gradient(120deg, transparent, rgba(255,255,255,0.7), transparent);
}
a:hover::after {
  animation: shimmer 1.2s ease 1 forwards;
}

/* Footer glow once */
.footer {
  text-align: center;
  padding: 20px;
  animation: pulseGlow 2s ease 1 forwards;
}

/* === Keyframes === */

@keyframes rainbowBG {
  0% { background-position: 0% 50%; }
  100% { background-position: 100% 50%; }
}

@keyframes spin {
  from { transform: rotate(0deg); }
  to { transform: rotate(360deg); }
}

@keyframes wave {
  0%, 100% { transform: translateY(0); }
  50% { transform: translateY(-10px); }
}

@keyframes float {
  0% { transform: translateY(0); }
  50% { transform: translateY(-8px); }
  100% { transform: translateY(0); }
}

@keyframes shimmer {
  from { left: -100%; }
  to { left: 100%; }
}

@keyframes pulseGlow {
  0% { text-shadow: 0 0 5px #fff, 0 0 10px #ff4081; }
  100% { text-shadow: 0 0 25px #7c4dff, 0 0 40px #40c4ff; }
}