/* animate.css — scroll reveal + card polish for LabelSets */

/* ── Scroll reveal — initial state always applied ── */
.reveal {
  opacity: 0;
  transform: translateY(20px);
  transition: opacity 0.55s cubic-bezier(.22,.68,0,1.2), transform 0.55s cubic-bezier(.22,.68,0,1.2);
}
.reveal.visible {
  opacity: 1;
  transform: translateY(0);
}

/* Stagger grid children */
.reveal-stagger > * {
  opacity: 0;
  transform: translateY(16px);
  transition: opacity 0.45s cubic-bezier(.22,.68,0,1.2), transform 0.45s cubic-bezier(.22,.68,0,1.2);
}
.reveal-stagger.visible > *:nth-child(1)    { opacity:1; transform:none; transition-delay:.04s }
.reveal-stagger.visible > *:nth-child(2)    { opacity:1; transform:none; transition-delay:.10s }
.reveal-stagger.visible > *:nth-child(3)    { opacity:1; transform:none; transition-delay:.16s }
.reveal-stagger.visible > *:nth-child(4)    { opacity:1; transform:none; transition-delay:.22s }
.reveal-stagger.visible > *:nth-child(5)    { opacity:1; transform:none; transition-delay:.28s }
.reveal-stagger.visible > *:nth-child(6)    { opacity:1; transform:none; transition-delay:.34s }
.reveal-stagger.visible > *:nth-child(7)    { opacity:1; transform:none; transition-delay:.40s }
.reveal-stagger.visible > *:nth-child(8)    { opacity:1; transform:none; transition-delay:.46s }
.reveal-stagger.visible > *:nth-child(n+9)  { opacity:1; transform:none; transition-delay:.50s }

/* Faster variant */
.reveal-fast {
  opacity: 0;
  transform: translateY(12px);
  transition: opacity 0.35s ease, transform 0.35s ease;
}
.reveal-fast.visible {
  opacity: 1;
  transform: translateY(0);
}

/* Honour prefers-reduced-motion — skip animation but always show content */
@media (prefers-reduced-motion: reduce) {
  .reveal, .reveal-fast, .reveal-stagger > * {
    opacity: 1 !important;
    transform: none !important;
    transition: none !important;
  }
}

/* ── Animated hero glow (CSS-only, no JS) ── */
@keyframes heroGlow {
  0%   { opacity: .6;  transform: translateX(-50%) scale(1);    }
  50%  { opacity: 1;   transform: translateX(-50%) scale(1.1);  }
  100% { opacity: .6;  transform: translateX(-50%) scale(1);    }
}
.hero-glow {
  position: absolute;
  top: 0; left: 50%;
  transform: translateX(-50%);
  width: 700px; height: 420px;
  background: radial-gradient(ellipse at 45% 55%,
    rgba(124,58,237,.08) 0%,
    rgba(0,200,5,.06) 50%,
    transparent 75%);
  filter: blur(70px);
  z-index: 0;
  pointer-events: none;
  animation: heroGlow 7s ease-in-out infinite;
}
@media (prefers-reduced-motion: reduce) {
  .hero-glow { animation: none; }
}