/*
 * Scouting Robotics — Sitewide Animation System
 * sr-animations.css
 *
 * Tasteful, performance-oriented animations.
 * Uses CSS custom properties and IntersectionObserver hooks.
 * All animations respect prefers-reduced-motion.
 */

/* ─── Reduced-motion override ────────────────────────────────────────────── */
@media (prefers-reduced-motion: reduce) {
  .sr-anim,
  .sr-anim-fade,
  .sr-anim-up,
  .sr-anim-scale,
  .sr-anim-slide-l,
  .sr-anim-slide-r {
    opacity: 1 !important;
    transform: none !important;
    transition: none !important;
    animation: none !important;
  }
  .sr-glow-pulse,
  .sr-float,
  .sr-spin-slow { animation: none !important; }
}

/* ─── Base animation class — all start invisible ────────────────────────── */
.sr-anim          { opacity: 0; transition: opacity 0.6s ease, transform 0.6s cubic-bezier(.22,1,.36,1); }
.sr-anim-fade     { opacity: 0; transition: opacity 0.7s ease; }
.sr-anim-up       { opacity: 0; transform: translateY(40px);   transition: opacity 0.65s ease, transform 0.65s cubic-bezier(.22,1,.36,1); }
.sr-anim-scale    { opacity: 0; transform: scale(0.9);          transition: opacity 0.55s ease, transform 0.55s cubic-bezier(.34,1.56,.64,1); }
.sr-anim-slide-l  { opacity: 0; transform: translateX(-40px);  transition: opacity 0.6s ease, transform 0.6s cubic-bezier(.22,1,.36,1); }
.sr-anim-slide-r  { opacity: 0; transform: translateX(40px);   transition: opacity 0.6s ease, transform 0.6s cubic-bezier(.22,1,.36,1); }

/* Triggered state */
.sr-anim.is-visible,
.sr-anim-fade.is-visible,
.sr-anim-up.is-visible,
.sr-anim-scale.is-visible,
.sr-anim-slide-l.is-visible,
.sr-anim-slide-r.is-visible {
  opacity: 1;
  transform: none;
}

/* Stagger helpers via delay classes */
.sr-delay-1  { transition-delay: 0.08s !important; }
.sr-delay-2  { transition-delay: 0.16s !important; }
.sr-delay-3  { transition-delay: 0.24s !important; }
.sr-delay-4  { transition-delay: 0.32s !important; }
.sr-delay-5  { transition-delay: 0.40s !important; }
.sr-delay-6  { transition-delay: 0.50s !important; }

/* ─── Hover microinteractions ────────────────────────────────────────────── */

/* Cards: lift on hover */
.sr-crest-card,
.sr-crest-card--mini,
.sr-req-group,
.sr-pgp-pillar {
  transition: transform 0.2s ease, box-shadow 0.2s ease, border-color 0.2s ease !important;
}
.sr-crest-card:hover,
.sr-crest-card--mini:hover {
  transform: translateY(-4px) !important;
  box-shadow: 0 12px 32px -8px rgba(15,20,25,0.22) !important;
}

/* Buttons: consistent lift */
.sr-btn { transition: transform 0.18s ease, background 0.18s ease, color 0.18s ease, border-color 0.18s ease, box-shadow 0.18s ease !important; }
.sr-btn:hover  { transform: translateY(-2px) !important; }
.sr-btn:active { transform: translateY(0) !important; }

/* Chips: subtle scale */
.sr-chip { transition: transform 0.15s ease, background 0.15s ease, border-color 0.15s ease !important; }
.sr-chip:hover { transform: scale(1.04) !important; }

/* ─── Glow effects ───────────────────────────────────────────────────────── */

/* Teal glow on active/focus elements */
.sr-glow-teal {
  box-shadow: 0 0 0 0 rgba(1,143,166,0);
  transition: box-shadow 0.3s ease !important;
}
.sr-glow-teal:hover,
.sr-glow-teal:focus {
  box-shadow: 0 0 0 3px rgba(1,143,166,0.35) !important;
}

/* Progress fill glow */
.sr-progress__fill {
  box-shadow: 0 0 12px rgba(1,143,166,0.5);
  transition: width 0.6s cubic-bezier(.22,1,.36,1) !important;
}

/* ─── Persistent animations ──────────────────────────────────────────────── */

/* Float */
.sr-float {
  animation: sr-float-anim 5s ease-in-out infinite;
}
@keyframes sr-float-anim {
  0%, 100% { transform: translateY(0); }
  50%       { transform: translateY(-10px); }
}

/* Glow pulse */
.sr-glow-pulse {
  animation: sr-glow-pulse-anim 2.5s ease-in-out infinite;
}
@keyframes sr-glow-pulse-anim {
  0%, 100% { box-shadow: 0 0 0 0 rgba(1,143,166,0.4); }
  50%       { box-shadow: 0 0 0 8px rgba(1,143,166,0); }
}

/* Slow spin (for decorative gears/icons) */
.sr-spin-slow {
  animation: sr-spin 18s linear infinite;
}
@keyframes sr-spin {
  to { transform: rotate(360deg); }
}

/* Counter spin */
.sr-spin-slow-reverse {
  animation: sr-spin 18s linear infinite reverse;
}

/* ─── Progress bar animation ─────────────────────────────────────────────── */
.sr-progress__fill {
  transition: width 0.7s cubic-bezier(.22,1,.36,1) !important;
}

/* ─── Section transition: colored top border accent ─────────────────────── */
.sr-section-accent {
  position: relative;
}
.sr-section-accent::before {
  content: '';
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  height: 3px;
  background: linear-gradient(90deg, var(--sr-teal), var(--sr-yellow), var(--sr-teal));
  background-size: 200% 100%;
  animation: sr-border-shimmer 4s linear infinite;
}
@keyframes sr-border-shimmer {
  0%   { background-position: 0% 0; }
  100% { background-position: 200% 0; }
}

/* ─── Hero text: gradient shimmer on headings ────────────────────────────── */
.sr-text-shimmer {
  background: linear-gradient(
    90deg,
    var(--sr-teal) 0%,
    var(--sr-yellow) 50%,
    var(--sr-teal) 100%
  );
  background-size: 200%;
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
  background-clip: text;
  animation: sr-shimmer 5s linear infinite;
}
@keyframes sr-shimmer {
  0%   { background-position: 0% center; }
  100% { background-position: 200% center; }
}

/* ─── Rank requirement checklist: check animation ───────────────────────── */
.sr-req-check {
  transition: background 0.2s ease, border-color 0.2s ease, transform 0.15s cubic-bezier(.34,1.56,.64,1) !important;
}
.sr-req-item.is-done .sr-req-check {
  animation: sr-check-pop 0.35s cubic-bezier(.34,1.56,.64,1) forwards;
}
@keyframes sr-check-pop {
  0%   { transform: scale(0.7) rotate(-15deg); }
  60%  { transform: scale(1.15) rotate(3deg); }
  100% { transform: scale(1) rotate(0deg); }
}

/* ─── Marquee (partners strip) ───────────────────────────────────────────── */
.sr-marquee {
  overflow: hidden;
  white-space: nowrap;
}
.sr-marquee__inner {
  display: inline-flex;
  gap: 40px;
  animation: sr-marquee 30s linear infinite;
}
.sr-marquee:hover .sr-marquee__inner {
  animation-play-state: paused;
}
@keyframes sr-marquee {
  from { transform: translateX(0); }
  to   { transform: translateX(-50%); }
}

/* ─── Loading skeleton shimmer ───────────────────────────────────────────── */
.sr-skeleton {
  background: linear-gradient(90deg, var(--sr-rule) 25%, var(--sr-mist) 50%, var(--sr-rule) 75%);
  background-size: 200% 100%;
  animation: sr-skeleton 1.4s ease infinite;
  border-radius: var(--sr-r-sm);
}
@keyframes sr-skeleton {
  0%   { background-position: 200% 0; }
  100% { background-position: -200% 0; }
}

/* ─── Mobile: reduce elaborate animations ────────────────────────────────── */
@media (max-width: 760px) {
  .sr-anim-slide-l,
  .sr-anim-slide-r { transform: translateY(24px) !important; }
  .sr-delay-3,
  .sr-delay-4,
  .sr-delay-5,
  .sr-delay-6 { transition-delay: 0.1s !important; }
}