/* =============================================================================
   1891 Arena — Sport icon library
   =============================================================================
   Replaces emoji decorations site-wide. Each icon is a self-contained inline
   SVG, ~60–72px square, with breathing + hover animation that doesn't break
   `prefers-reduced-motion`.

   Usage in HTML:
     <span class="sport-icon sport-icon--pickleball" aria-hidden="true">
       <!-- inline <svg>...</svg> from sport-icons-svg.html (or hand-pasted) -->
     </span>

   The icon's <svg> uses CSS variables so it can theme per sport.
   ============================================================================= */

.sport-icon {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 72px;
  height: 72px;
  border-radius: 12px;
  background: var(--sport-icon-bg, #fdf6e9);
  position: relative;
  flex-shrink: 0;
  transition: transform 240ms cubic-bezier(0.34, 1.56, 0.64, 1),
              box-shadow 240ms ease;
  overflow: visible;
}

.sport-icon svg {
  width: 100%;
  height: 100%;
}

/* The breathing pulse — applies to inner illustration groups marked
   .sport-icon__breathe. Slows on hover; speeds on focus. */
.sport-icon__breathe {
  transform-origin: 50% 50%;
  transform-box: fill-box;
  animation: sportIconBreathe 4.2s ease-in-out infinite;
}
.sport-icon__breathe--lag {
  animation-delay: -1.4s;
}
.sport-icon__breathe--lag2 {
  animation-delay: -2.6s;
}

@keyframes sportIconBreathe {
  0%, 100% { transform: scale(1)   translate(0, 0); }
  50%      { transform: scale(1.035) translate(0, -0.5px); }
}

/* Card-level hover that any parent can opt into — when the parent has
   .sport-icon-host the icon does a subtle tilt + glow. */
.sport-icon-host:hover .sport-icon,
.sport-icon-host:focus-visible .sport-icon {
  transform: translateY(-2px) rotate(-2deg);
  box-shadow: 0 8px 24px -8px rgba(0,0,0,0.18),
              0 2px 6px rgba(0,0,0,0.06);
}
.sport-icon-host:hover .sport-icon__breathe,
.sport-icon-host:focus-visible .sport-icon__breathe {
  animation-duration: 1.8s;
}

/* Slightly larger variant for hero blocks */
.sport-icon--lg {
  width: 96px;
  height: 96px;
  border-radius: 16px;
}
.sport-icon--xl {
  width: 140px;
  height: 140px;
  border-radius: 20px;
}

/* Per-sport background tints (matches the hub-hero gradients) */
.sport-icon--pickleball  { --sport-icon-bg: #d6f3f0; }
.sport-icon--bowling     { --sport-icon-bg: #fbe7c8; }
.sport-icon--volleyball  { --sport-icon-bg: #ffd6ec; }
.sport-icon--basketball  { --sport-icon-bg: #ffe0c8; }
.sport-icon--soccer      { --sport-icon-bg: #d6f0dc; }
.sport-icon--football    { --sport-icon-bg: #ffd6cc; }
.sport-icon--cross-country { --sport-icon-bg: #e6e6f9; }
.sport-icon--cheer       { --sport-icon-bg: #f5d6ff; }
.sport-icon--cornhole    { --sport-icon-bg: #fbe7c8; }
.sport-icon--darts       { --sport-icon-bg: #f7d3cc; }
.sport-icon--disc-golf   { --sport-icon-bg: #d6ecd6; }
.sport-icon--fishing     { --sport-icon-bg: #cfe3f3; }
.sport-icon--golf        { --sport-icon-bg: #d6ecd6; }

@media (prefers-reduced-motion: reduce) {
  .sport-icon__breathe { animation: none; }
  .sport-icon-host:hover .sport-icon,
  .sport-icon-host:focus-visible .sport-icon { transform: none; }
}

/* =============================================================================
   Living / breathing hover library — opt-in classes for site-wide use
   ============================================================================= */

/* Standard hover lift used on cards (sport-card, step, sibling-card,
   format-card, etc). Drop the `lift-on-hover` class on a card to enable. */
.lift-on-hover {
  transition: transform 280ms cubic-bezier(0.34, 1.56, 0.64, 1),
              box-shadow 280ms ease,
              border-color 220ms ease;
  will-change: transform;
}
.lift-on-hover:hover,
.lift-on-hover:focus-visible {
  transform: translateY(-4px);
  box-shadow: 0 14px 36px -12px rgba(0,0,0,0.18),
              0 2px 6px rgba(0,0,0,0.06);
}

/* .breathe is defined in flagship.css (animates SVG illustrations); leave
   that one as the source of truth so dual loads don't fight. */

/* Faster pulse for live counters / "live" pills */
.live-pulse::before {
  content: "";
  display: inline-block;
  width: 8px; height: 8px;
  border-radius: 50%;
  background: #1abc54;
  margin-right: 6px;
  animation: livePulse 1.4s ease-in-out infinite;
  vertical-align: 1px;
}
@keyframes livePulse {
  0%, 100% { box-shadow: 0 0 0 0   rgba(26,188,84,0.6); }
  70%      { box-shadow: 0 0 0 8px rgba(26,188,84,0); }
}

/* Subtle slide-in for chevrons on hover */
.chevron-slide {
  display: inline-block;
  transition: transform 220ms cubic-bezier(0.34, 1.56, 0.64, 1);
}
.chevron-host:hover .chevron-slide,
.chevron-host:focus-visible .chevron-slide {
  transform: translateX(4px);
}

@media (prefers-reduced-motion: reduce) {
  .lift-on-hover:hover { transform: none; box-shadow: none; }
  .breathe { animation: none; }
  .live-pulse::before { animation: none; }
  .chevron-host:hover .chevron-slide { transform: none; }
}