/* ==========================================================================
   SpideyMC Store — Animation Library
   Scroll reveals, pulse effects, hover micro-interactions
   ========================================================================== */

/* Scroll reveal (toggled via JS IntersectionObserver, class .reveal) */
.reveal { opacity: 0; transform: translateY(24px); transition: opacity 700ms cubic-bezier(.4,0,.2,1), transform 700ms cubic-bezier(.4,0,.2,1); }
.reveal.is-visible { opacity: 1; transform: translateY(0); }
.reveal-delay-1.is-visible { transition-delay: 80ms; }
.reveal-delay-2.is-visible { transition-delay: 160ms; }
.reveal-delay-3.is-visible { transition-delay: 240ms; }
.reveal-delay-4.is-visible { transition-delay: 320ms; }

/* Gentle pulsing glow for CTA highlights */
@keyframes pulseGlow {
  0%, 100% { box-shadow: 0 0 0 0 rgba(225,29,72,0.35); }
  50% { box-shadow: 0 0 0 10px rgba(225,29,72,0); }
}
.pulse-glow { animation: pulseGlow 2.4s ease-in-out infinite; }

/* Live dot ping (player count / server status) */
@keyframes ping {
  0% { transform: scale(1); opacity: 0.9; }
  70%, 100% { transform: scale(2.2); opacity: 0; }
}
.dot-ping { position: relative; }
.dot-ping::before {
  content: ''; position: absolute; inset: 0; border-radius: 50%; background: inherit;
  animation: ping 1.8s cubic-bezier(0,0,.2,1) infinite;
}

/* Floating decorative motion for hero icons / spider crawler */
@keyframes float {
  0%, 100% { transform: translateY(0); }
  50% { transform: translateY(-10px); }
}
.float { animation: float 4s ease-in-out infinite; }

/* Card entrance stagger applied via inline style delay in JS */
@keyframes cardIn {
  from { opacity: 0; transform: translateY(16px) scale(0.98); }
  to { opacity: 1; transform: translateY(0) scale(1); }
}
.card-anim { animation: cardIn 500ms cubic-bezier(.4,0,.2,1) both; }

/* Marquee scroller (used for trust strip / server perks ticker) */
.marquee { overflow: hidden; position: relative; -webkit-mask-image: linear-gradient(90deg, transparent, #000 8%, #000 92%, transparent); mask-image: linear-gradient(90deg, transparent, #000 8%, #000 92%, transparent); }
.marquee-track { display: flex; gap: 40px; width: max-content; animation: marquee 26s linear infinite; }
@keyframes marquee { from { transform: translateX(0); } to { transform: translateX(-50%); } }
.marquee:hover .marquee-track { animation-play-state: paused; }

/* Accordion chevron rotation handled in style.css; add smooth open easing here */
.accordion-panel { transition-timing-function: cubic-bezier(.4,0,.2,1); }

/* Button ripple-esque press feedback */
.btn { will-change: transform; }

/* ---------- Trust Spider Mascot (hero corner) ---------- */
.trust-spider {
  position: absolute; top: 0; right: 64px; z-index: 3; width: 60px; height: 220px;
  pointer-events: none; display: flex; flex-direction: column; align-items: center;
}
.trust-thread { width: 1px; height: 100%; background: linear-gradient(180deg, rgba(225,29,72,0.5), rgba(225,29,72,0.1)); }
.trust-rig {
  position: absolute; top: 0; left: 50%; transform: translateX(-50%) translateY(-60px);
  display: flex; flex-direction: column; align-items: center; gap: 8px;
  animation: trustDrop 14s ease-in-out infinite;
}
.trust-spider-body { width: 34px; height: 34px; filter: drop-shadow(0 6px 10px rgba(225,29,72,0.4)); }
.trust-bubble {
  position: absolute; top: 38px; left: 50%; transform: translateX(-50%);
  background: var(--surface-1); border: 1px solid var(--border-strong); border-radius: 10px;
  padding: 8px 12px; white-space: nowrap; font-size: 0.72rem; font-weight: 600; color: var(--white);
  opacity: 0; animation: trustBubble 14s ease-in-out infinite;
}
.trust-bubble::before {
  content: ''; position: absolute; top: -6px; left: 50%; transform: translateX(-50%);
  border-left: 6px solid transparent; border-right: 6px solid transparent; border-bottom: 6px solid var(--border-strong);
}
.trust-bubble svg { width: 12px; height: 12px; color: #4ade80; vertical-align: -2px; margin-right: 3px; }

@keyframes trustDrop {
  0%   { transform: translateX(-50%) translateY(-60px); }
  12%  { transform: translateX(-50%) translateY(70px); }
  22%  { transform: translateX(-50%) translateY(64px); }
  30%  { transform: translateX(-50%) translateY(70px); }
  70%  { transform: translateX(-50%) translateY(70px); }
  85%  { transform: translateX(-50%) translateY(-60px); }
  100% { transform: translateX(-50%) translateY(-60px); }
}
@keyframes trustBubble {
  0%, 14%   { opacity: 0; transform: translateX(-50%) translateY(6px); }
  20%, 68%  { opacity: 1; transform: translateX(-50%) translateY(0); }
  78%, 100% { opacity: 0; transform: translateX(-50%) translateY(6px); }
}
@media (max-width: 860px) {
  .trust-spider { right: 20px; height: 160px; }
}
@media (prefers-reduced-motion: reduce) {
  .trust-rig { animation: none; transform: translateX(-50%) translateY(70px); }
  .trust-bubble { animation: none; opacity: 1; }
}
@keyframes drawWeb {
  from { stroke-dashoffset: 240; opacity: 0; }
  to { stroke-dashoffset: 0; opacity: 1; }
}
.card-web path, .card-web circle { stroke-dasharray: 240; animation: drawWeb 900ms ease forwards; }

/* Fade-in for page content on load */
@keyframes pageFade { from { opacity: 0; } to { opacity: 1; } }
body { animation: pageFade 400ms ease both; }

/* Toast icon wiggle */
@keyframes wiggle { 0%,100%{transform:rotate(0);} 25%{transform:rotate(-8deg);} 75%{transform:rotate(8deg);} }
.toast .toast-icon { display:inline-flex; animation: wiggle 500ms ease 1; }

@media (prefers-reduced-motion: reduce) {
  .marquee-track { animation: none; }
  .dot-ping::before { animation: none; }
  .float { animation: none; }
}