/* =============================================
   RankRaft — Animations & Effects
   ============================================= */

/* ─── Gradient text ─── */
.gradient-text {
  background: linear-gradient(135deg, var(--accent), var(--accent-2), var(--accent-3));
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
  background-clip: text;
  background-size: 200% auto;
  animation: gradientShift 4s linear infinite;
}
@keyframes gradientShift {
  0%   { background-position: 0% center; }
  100% { background-position: 200% center; }
}

/* ─── Glitch effect ─── */
.glitch {
  position: relative;
}
.glitch::before,
.glitch::after {
  content: attr(data-text);
  position: absolute;
  left: 0; top: 0;
  width: 100%; height: 100%;
  font-family: inherit;
  font-size: inherit;
  font-weight: inherit;
  color: inherit;
  opacity: 0;
}
.glitch:hover::before {
  animation: glitch1 0.3s steps(2) forwards;
  color: var(--accent);
  clip-path: polygon(0 15%, 100% 15%, 100% 40%, 0 40%);
}
.glitch:hover::after {
  animation: glitch2 0.3s steps(2) 0.05s forwards;
  color: var(--accent-2);
  clip-path: polygon(0 60%, 100% 60%, 100% 80%, 0 80%);
}
@keyframes glitch1 {
  0%   { opacity: 0.8; transform: translateX(-3px); }
  50%  { opacity: 0.6; transform: translateX(3px); }
  100% { opacity: 0; }
}
@keyframes glitch2 {
  0%   { opacity: 0.8; transform: translateX(3px); }
  50%  { opacity: 0.6; transform: translateX(-3px); }
  100% { opacity: 0; }
}

/* ─── Typewriter ─── */
.typewriter {
  display: inline-block;
  border-right: 3px solid var(--accent);
  white-space: nowrap;
  overflow: hidden;
  animation: typing 3s steps(30,end) forwards, blink 0.75s step-end infinite;
}
@keyframes typing {
  from { width: 0; }
  to   { width: 100%; }
}
@keyframes blink {
  50% { border-color: transparent; }
}

/* ─── Particle grid (hero bg) ─── */
.particle-canvas {
  position: absolute; inset: 0;
  pointer-events: none;
  z-index: 0;
}

/* ─── Stagger children ─── */
.stagger > * {
  opacity: 0;
  transform: translateY(20px);
  animation: staggerIn 0.5s ease forwards;
}
.stagger > *:nth-child(1) { animation-delay: 0.1s; }
.stagger > *:nth-child(2) { animation-delay: 0.2s; }
.stagger > *:nth-child(3) { animation-delay: 0.3s; }
.stagger > *:nth-child(4) { animation-delay: 0.4s; }
.stagger > *:nth-child(5) { animation-delay: 0.5s; }
.stagger > *:nth-child(6) { animation-delay: 0.6s; }
@keyframes staggerIn {
  to { opacity: 1; transform: translateY(0); }
}

/* ─── Magnetic button hover ─── */
.btn--magnetic {
  transition: transform 0.2s cubic-bezier(0.4,0,0.2,1), box-shadow 0.2s, background 0.3s;
}

/* ─── Shimmer loading ─── */
.shimmer {
  background: linear-gradient(90deg, var(--bg-card) 25%, rgba(255,255,255,0.06) 50%, var(--bg-card) 75%);
  background-size: 200% auto;
  animation: shimmer 1.5s infinite;
}
@keyframes shimmer {
  to { background-position: -200% center; }
}

/* ─── Neon glow on hover ─── */
.neon-hover {
  transition: text-shadow var(--transition), color var(--transition);
}
.neon-hover:hover {
  color: var(--accent);
  text-shadow: 0 0 10px rgba(0,229,160,0.5), 0 0 30px rgba(0,229,160,0.3);
}

/* ─── Rotating border ─── */
.rotating-border {
  position: relative;
}
.rotating-border::before {
  content: '';
  position: absolute;
  inset: -2px;
  border-radius: inherit;
  background: conic-gradient(from 0deg, var(--accent), var(--accent-2), var(--accent-3), var(--accent));
  animation: rotateBorder 3s linear infinite;
  z-index: -1;
}
.rotating-border::after {
  content: '';
  position: absolute;
  inset: 0;
  border-radius: inherit;
  background: var(--bg-card);
  z-index: -1;
}
@keyframes rotateBorder {
  to { transform: rotate(360deg); }
}

/* ─── Counter animation ─── */
.count-up {
  display: inline-block;
  transition: transform 0.1s;
}

/* ─── Scroll progress bar ─── */
#scrollProgress {
  position: fixed;
  top: 0; left: 0;
  height: 2px;
  background: linear-gradient(90deg, var(--accent), var(--accent-2));
  z-index: 1000;
  width: 0%;
  transition: width 0.1s linear;
}

/* ─── Toast notifications ─── */
#toastContainer {
  position: fixed;
  bottom: 32px; right: 32px;
  z-index: 9000;
  display: flex; flex-direction: column; gap: 12px;
}
.toast {
  background: var(--bg-card);
  border: 1px solid var(--border);
  border-radius: var(--radius-md);
  padding: 16px 20px;
  display: flex; align-items: center; gap: 12px;
  min-width: 280px;
  box-shadow: var(--shadow-card);
  animation: toastIn 0.4s cubic-bezier(0.4,0,0.2,1);
  backdrop-filter: blur(16px);
}
.toast.removing { animation: toastOut 0.3s ease forwards; }
.toast--success { border-left: 3px solid var(--accent); }
.toast--error   { border-left: 3px solid var(--accent-3); }
.toast--info    { border-left: 3px solid var(--accent-2); }
.toast-icon { font-size: 1.2rem; }
.toast-msg  { font-size: 0.88rem; flex: 1; }
.toast-close { background: none; border: none; color: var(--text-dim); cursor: pointer; font-size: 1rem; }
@keyframes toastIn {
  from { opacity: 0; transform: translateX(40px); }
  to   { opacity: 1; transform: translateX(0); }
}
@keyframes toastOut {
  to { opacity: 0; transform: translateX(60px); }
}

/* ─── Loading spinner ─── */
.spinner {
  width: 20px; height: 20px;
  border: 2px solid rgba(0,229,160,0.2);
  border-top-color: var(--accent);
  border-radius: 50%;
  animation: spin 0.7s linear infinite;
  display: inline-block;
}
@keyframes spin { to { transform: rotate(360deg); } }

/* ─── Tilt card (3D on hover) ─── */
.tilt-card {
  transform-style: preserve-3d;
  transition: transform 0.2s ease;
  will-change: transform;
}

/* ─── Marquee ─── */
.marquee-wrapper {
  overflow: hidden;
  mask-image: linear-gradient(90deg, transparent, #000 10%, #000 90%, transparent);
  -webkit-mask-image: linear-gradient(90deg, transparent, #000 10%, #000 90%, transparent);
}
.marquee-track {
  display: flex; gap: 32px;
  animation: marquee 20s linear infinite;
  width: max-content;
}
.marquee-track--reverse { animation-direction: reverse; }
.marquee-item {
  display: flex; align-items: center; gap: 12px;
  padding: 10px 20px;
  background: var(--bg-card);
  border: 1px solid var(--border);
  border-radius: var(--radius-xl);
  font-size: 0.85rem;
  color: var(--text-muted);
  white-space: nowrap;
  flex-shrink: 0;
}
.marquee-item i { color: var(--accent); }
@keyframes marquee {
  to { transform: translateX(-50%); }
}

/* ─── Backdrop blur sections ─── */
.glass-section {
  background: var(--bg-glass);
  backdrop-filter: blur(20px);
  border: 1px solid var(--border);
}

/* ─── Page transitions ─── */
.page-enter {
  animation: pageEnter 0.5s ease forwards;
}
@keyframes pageEnter {
  from { opacity: 0; transform: translateY(10px); }
  to   { opacity: 1; transform: translateY(0); }
}

/* ─── Star rating ─── */
.stars { color: #ffd166; letter-spacing: 2px; }

/* ─── Tag chips ─── */
.tag {
  display: inline-block;
  padding: 4px 12px;
  border-radius: var(--radius-xl);
  font-size: 0.75rem;
  font-weight: 600;
  background: rgba(0,229,160,0.1);
  color: var(--accent);
  border: 1px solid rgba(0,229,160,0.2);
}
.tag--purple { background: rgba(108,99,255,0.1); color: var(--accent-2); border-color: rgba(108,99,255,0.2); }
.tag--red    { background: rgba(255,95,126,0.1); color: var(--accent-3); border-color: rgba(255,95,126,0.2); }