/* ============================================
   LOYALTY CFW - Animations
   ============================================ */

/* ---- Scroll Reveal ---- */
.reveal {
  opacity: 0;
  transform: translateY(30px);
  transition: opacity 0.7s ease, transform 0.7s ease;
}

.reveal.revealed {
  opacity: 1;
  transform: translateY(0);
}

.reveal-left {
  opacity: 0;
  transform: translateX(-30px);
  transition: opacity 0.7s ease, transform 0.7s ease;
}

.reveal-left.revealed {
  opacity: 1;
  transform: translateX(0);
}

.reveal-right {
  opacity: 0;
  transform: translateX(30px);
  transition: opacity 0.7s ease, transform 0.7s ease;
}

.reveal-right.revealed {
  opacity: 1;
  transform: translateX(0);
}

.reveal-scale {
  opacity: 0;
  transform: scale(0.9);
  transition: opacity 0.7s ease, transform 0.7s ease;
}

.reveal-scale.revealed {
  opacity: 1;
  transform: scale(1);
}

/* Stagger children */
.stagger-children > * {
  opacity: 0;
  transform: translateY(20px);
}

.stagger-children.revealed > *:nth-child(1) { animation: fadeUp 0.5s ease forwards 0.05s; }
.stagger-children.revealed > *:nth-child(2) { animation: fadeUp 0.5s ease forwards 0.15s; }
.stagger-children.revealed > *:nth-child(3) { animation: fadeUp 0.5s ease forwards 0.25s; }
.stagger-children.revealed > *:nth-child(4) { animation: fadeUp 0.5s ease forwards 0.35s; }
.stagger-children.revealed > *:nth-child(5) { animation: fadeUp 0.5s ease forwards 0.45s; }
.stagger-children.revealed > *:nth-child(6) { animation: fadeUp 0.5s ease forwards 0.55s; }
.stagger-children.revealed > *:nth-child(n+7) { animation: fadeUp 0.5s ease forwards 0.65s; }

@keyframes fadeUp {
  from { opacity: 0; transform: translateY(20px); }
  to { opacity: 1; transform: translateY(0); }
}

/* ---- Nav hover underline slide ---- */
@keyframes navSlide {
  from { transform: translateX(-50%) scaleX(0); }
  to { transform: translateX(-50%) scaleX(1); }
}

/* ---- Pulse ring ---- */
.pulse-ring {
  position: relative;
}

.pulse-ring::before {
  content: '';
  position: absolute;
  inset: -4px;
  border-radius: inherit;
  border: 2px solid var(--brand-primary);
  opacity: 0;
  animation: pulseRing 2s ease infinite;
}

@keyframes pulseRing {
  0% { opacity: 0.6; transform: scale(1); }
  100% { opacity: 0; transform: scale(1.15); }
}

/* ---- Shimmer loading ---- */
.shimmer {
  background: linear-gradient(90deg,
    var(--bg-elevated) 25%,
    var(--bg-card-hover) 50%,
    var(--bg-elevated) 75%
  );
  background-size: 200% 100%;
  animation: shimmer 1.5s infinite;
}

@keyframes shimmer {
  0% { background-position: 200% 0; }
  100% { background-position: -200% 0; }
}

/* ---- Glitch text effect ---- */
.glitch {
  position: relative;
}

.glitch::before,
.glitch::after {
  content: attr(data-text);
  position: absolute;
  inset: 0;
  background: inherit;
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
  background-clip: text;
}

.glitch::before {
  animation: glitch1 3s infinite;
  clip-path: polygon(0 0, 100% 0, 100% 35%, 0 35%);
}

.glitch::after {
  animation: glitch2 3s infinite;
  clip-path: polygon(0 65%, 100% 65%, 100% 100%, 0 100%);
}

@keyframes glitch1 {
  0%, 90%, 100% { transform: translateX(0); opacity: 1; }
  92% { transform: translateX(-3px); opacity: 0.8; }
  94% { transform: translateX(3px); opacity: 0.9; }
  96% { transform: translateX(-1px); opacity: 1; }
}

@keyframes glitch2 {
  0%, 90%, 100% { transform: translateX(0); opacity: 1; }
  93% { transform: translateX(3px); opacity: 0.8; }
  95% { transform: translateX(-3px); opacity: 0.9; }
  97% { transform: translateX(1px); opacity: 1; }
}

/* ---- Nav link animated underline ---- */
@keyframes slideIn {
  from { transform: translateX(-50%) scaleX(0); }
  to { transform: translateX(-50%) scaleX(1); }
}

/* ---- Card hover lift ---- */
.hover-lift {
  transition: transform 0.3s cubic-bezier(0.4, 0, 0.2, 1),
              box-shadow 0.3s cubic-bezier(0.4, 0, 0.2, 1);
}

.hover-lift:hover {
  transform: translateY(-6px);
  box-shadow: 0 12px 40px rgba(232, 24, 90, 0.2), 0 4px 20px rgba(0,0,0,0.5);
}

/* ---- Spinning border ---- */
.spin-border {
  position: relative;
}

.spin-border::after {
  content: '';
  position: absolute;
  inset: -2px;
  border-radius: inherit;
  background: conic-gradient(var(--brand-primary), transparent, var(--brand-secondary), transparent, var(--brand-primary));
  z-index: -1;
  animation: spinBorder 4s linear infinite;
}

@keyframes spinBorder {
  to { transform: rotate(360deg); }
}

/* ---- Logo float ---- */
@keyframes float {
  0%, 100% { transform: translateY(0); }
  50% { transform: translateY(-12px); }
}

.float {
  animation: float 4s ease-in-out infinite;
}

/* ---- Typewriter cursor ---- */
.cursor-blink::after {
  content: '|';
  animation: blink 1s step-end infinite;
  color: var(--brand-primary);
}

@keyframes blink {
  0%, 50% { opacity: 1; }
  51%, 100% { opacity: 0; }
}

/* ---- Button ripple ---- */
.btn-ripple {
  position: relative;
  overflow: hidden;
}

.btn-ripple .ripple {
  position: absolute;
  border-radius: 50%;
  background: rgba(255, 255, 255, 0.3);
  transform: scale(0);
  animation: rippleEffect 0.6s linear;
  pointer-events: none;
}

@keyframes rippleEffect {
  to { transform: scale(4); opacity: 0; }
}

/* ---- Page transition ---- */
.page-transition {
  animation: pageIn 0.4s ease;
}

@keyframes pageIn {
  from { opacity: 0; transform: translateY(10px); }
  to { opacity: 1; transform: translateY(0); }
}

/* ---- Scanline effect for hero ---- */
.scanline {
  position: absolute;
  top: -100%;
  left: 0;
  right: 0;
  height: 2px;
  background: linear-gradient(90deg, transparent, rgba(232, 24, 90, 0.6), transparent);
  animation: scan 4s linear infinite;
}

@keyframes scan {
  to { top: 110%; }
}

/* ---- Number count up ---- */
.count-up {
  display: inline-block;
}

/* ---- Background grid ---- */
.bg-grid {
  background-image:
    linear-gradient(rgba(232, 24, 90, 0.04) 1px, transparent 1px),
    linear-gradient(90deg, rgba(232, 24, 90, 0.04) 1px, transparent 1px);
  background-size: 40px 40px;
}

/* ---- Animated gradient border ---- */
.gradient-border {
  position: relative;
  background: var(--bg-card);
  border-radius: var(--radius-md);
  padding: 1px;
}

.gradient-border::before {
  content: '';
  position: absolute;
  inset: 0;
  border-radius: inherit;
  padding: 1px;
  background: linear-gradient(135deg, var(--brand-primary), transparent, var(--brand-secondary));
  -webkit-mask: linear-gradient(#fff 0 0) content-box, linear-gradient(#fff 0 0);
  mask: linear-gradient(#fff 0 0) content-box, linear-gradient(#fff 0 0);
  -webkit-mask-composite: xor;
  mask-composite: exclude;
  pointer-events: none;
}

/* ---- Status dot pulse ---- */
.status-dot {
  width: 8px;
  height: 8px;
  border-radius: 50%;
  display: inline-block;
}

.status-dot.online {
  background: #00c864;
  box-shadow: 0 0 6px #00c864;
  animation: dotPulse 2s ease infinite;
}

.status-dot.offline {
  background: #ff3c3c;
}

@keyframes dotPulse {
  0%, 100% { transform: scale(1); opacity: 1; }
  50% { transform: scale(1.3); opacity: 0.7; }
}