/* ═══════════════════════════════════════════════════════════════
   Sport-themed hero banner — one file, all sports.
   Keyframes are namespaced `sh*` so they can't collide with
   existing sports-detail.css animations.
   ═══════════════════════════════════════════════════════════════ */

.sport-hero{
  position:relative;
  width:100%;
  min-height:130px;
  border-radius:10px;
  overflow:hidden;
  margin:0 0 12px;
  background:linear-gradient(135deg,#0a0e1c 0%,#111830 50%,#0a0e1c 100%);
  border:1px solid rgba(255,255,255,.06);
  box-shadow:0 10px 30px rgba(0,0,0,.35);
  --sport-accent:#d4a84b;
}
.sport-hero::before{
  content:'';
  position:absolute;inset:0;
  background:
    radial-gradient(circle at 20% 30%,color-mix(in srgb,var(--sport-accent) 20%,transparent),transparent 60%),
    radial-gradient(circle at 80% 70%,color-mix(in srgb,var(--sport-accent) 15%,transparent),transparent 55%);
  opacity:.9;
  z-index:1;
}
.sport-hero::after{
  content:'';position:absolute;inset:0;
  background:linear-gradient(180deg,transparent 0%,transparent 55%,rgba(0,0,0,.45) 100%);
  z-index:3;
}

.sport-hero .sh-scene{
  position:absolute;inset:0;
  z-index:2;
  pointer-events:none;
  overflow:hidden;
}
.sport-hero .sh-fg{
  position:relative;z-index:4;
  padding:16px 20px;
  height:100%;
  display:flex;flex-direction:column;justify-content:flex-end;
}
.sport-hero .sh-tag{
  display:inline-flex;align-items:center;gap:6px;
  padding:4px 10px;border-radius:999px;
  background:rgba(0,0,0,.4);backdrop-filter:blur(6px);
  border:1px solid color-mix(in srgb,var(--sport-accent) 35%,transparent);
  font-family:'Oxanium','Inter',sans-serif;font-size:10px;font-weight:800;
  color:var(--sport-accent);text-transform:uppercase;letter-spacing:.8px;
  align-self:flex-start;margin-bottom:8px;
}
.sport-hero .sh-tag i{font-size:11px;}
.sport-hero .sh-live{
  margin-left:6px;padding:2px 7px;border-radius:3px;
  background:rgba(34,197,94,.2);color:#22c55e;
  font-size:8px;font-weight:900;letter-spacing:.5px;
  display:inline-flex;align-items:center;gap:4px;
  border:1px solid rgba(34,197,94,.4);
}
.sport-hero .sh-live-dot{
  width:5px;height:5px;border-radius:50%;background:#22c55e;
  box-shadow:0 0 6px #22c55e;
  animation:shLivePulse 1.3s ease-in-out infinite;
}
@keyframes shLivePulse{0%,100%{opacity:1;}50%{opacity:.35;}}
.sport-hero .sh-title{
  font-family:'Plus Jakarta Sans','Inter',sans-serif;
  font-size:20px;font-weight:900;color:#fff;
  text-shadow:0 2px 10px rgba(0,0,0,.6);
  line-height:1.15;margin-bottom:4px;
}
.sport-hero .sh-comp{
  font-size:11px;color:rgba(255,255,255,.72);font-weight:600;
  letter-spacing:.2px;
}
.sport-hero .sh-date{
  font-size:10px;color:rgba(255,255,255,.55);font-weight:500;
  margin-top:3px;
}
.sport-hero .sh-date i{margin-right:4px;}

@media(max-width:600px){
  .sport-hero{min-height:100px;margin-bottom:8px;border-radius:8px;}
  .sport-hero .sh-fg{padding:12px 14px;}
  .sport-hero .sh-title{font-size:15px;}
  .sport-hero .sh-comp{font-size:10px;}
}

/* ════════════════════════════════════════════════
   CRICKET — bouncing ball + pitch sweep
   ════════════════════════════════════════════════ */
.sh-pitch{
  position:absolute;left:0;right:0;bottom:0;height:44%;
  background:linear-gradient(180deg,rgba(34,197,94,.1) 0%,rgba(34,197,94,.18) 100%);
  transform:perspective(220px) rotateX(38deg);
  transform-origin:bottom;
}
.sh-pitch::before{
  content:'';position:absolute;left:45%;right:45%;top:0;bottom:0;
  background:repeating-linear-gradient(90deg,rgba(255,255,255,.12) 0 1px,transparent 1px 16px);
}
.sh-ball-cricket{
  position:absolute;width:14px;height:14px;border-radius:50%;
  background:radial-gradient(circle at 30% 30%,#ef4444,#991b1b);
  box-shadow:0 0 10px rgba(239,68,68,.55),inset -2px -2px 3px rgba(0,0,0,.4);
  top:42%;left:14%;
  animation:shCricketBall 2.4s ease-in-out infinite;
}
.sh-ball-cricket::after{
  content:'';position:absolute;inset:0;border-radius:50%;
  border-top:1px solid rgba(255,255,255,.45);
}
@keyframes shCricketBall{
  0%   {left:12%; top:42%;}
  45%  {left:78%; top:64%;}
  55%  {left:80%; top:24%;}
  100% {left:12%; top:42%;}
}
.sh-stump{
  position:absolute;bottom:10%;width:2px;height:24px;
  background:linear-gradient(180deg,#e2e8f0,#94a3b8);
  box-shadow:0 0 6px rgba(255,255,255,.3);
}
.sh-stump-l{right:18%;}
.sh-stump-r{right:14%;}

/* ════════════════════════════════════════════════
   FOOTBALL — spinning ball + goal
   ════════════════════════════════════════════════ */
.sh-field{
  position:absolute;left:0;right:0;bottom:0;height:50%;
  background:
    linear-gradient(180deg,rgba(59,130,246,.08),rgba(59,130,246,.18)),
    repeating-linear-gradient(90deg,rgba(255,255,255,.04) 0 30px,transparent 30px 60px);
  transform:perspective(200px) rotateX(35deg);
  transform-origin:bottom;
}
.sh-ball-football{
  position:absolute;width:18px;height:18px;border-radius:50%;
  background:
    radial-gradient(circle at 30% 30%,#fff,#e2e8f0 55%,#1a1a1a 56%,#1a1a1a 60%,#e2e8f0 61%);
  box-shadow:0 3px 8px rgba(0,0,0,.5);
  top:45%;left:12%;
  animation:shFootballRoll 3s linear infinite;
}
@keyframes shFootballRoll{
  0%   {left:10%; transform:rotate(0deg);}
  100% {left:92%; transform:rotate(720deg);}
}
.sh-goal{
  position:absolute;right:3%;bottom:12%;
  width:42px;height:26px;
  border:2px solid rgba(255,255,255,.35);
  border-bottom:none;
  background:
    repeating-linear-gradient(0deg,transparent 0 4px,rgba(255,255,255,.12) 4px 5px),
    repeating-linear-gradient(90deg,transparent 0 4px,rgba(255,255,255,.12) 4px 5px);
}

/* ════════════════════════════════════════════════
   TENNIS — rally ball + net
   ════════════════════════════════════════════════ */
.sh-court{
  position:absolute;left:0;right:0;bottom:0;height:45%;
  background:linear-gradient(180deg,rgba(234,179,8,.08),rgba(234,179,8,.18));
  transform:perspective(220px) rotateX(38deg);
  transform-origin:bottom;
}
.sh-court::before,.sh-court::after{
  content:'';position:absolute;left:0;right:0;height:1px;background:rgba(255,255,255,.18);
}
.sh-court::before{top:40%;} .sh-court::after{top:70%;}
.sh-ball-tennis{
  position:absolute;width:12px;height:12px;border-radius:50%;
  background:radial-gradient(circle at 30% 30%,#fef08a,#ca8a04);
  box-shadow:0 0 8px rgba(234,179,8,.6);
  top:40%;left:10%;
  animation:shTennisRally 1.8s ease-in-out infinite;
}
.sh-ball-tennis::before{
  content:'';position:absolute;inset:0;border-radius:50%;
  border-top:1px solid rgba(255,255,255,.5);
  transform:rotate(45deg);
}
@keyframes shTennisRally{
  0%   {left:8%;  top:40%;}
  50%  {left:88%; top:25%;}
  100% {left:8%;  top:40%;}
}
.sh-net{
  position:absolute;left:50%;bottom:12%;width:2px;height:28px;
  background:linear-gradient(180deg,rgba(255,255,255,.5),rgba(255,255,255,.15));
  transform:translateX(-50%);
}

/* ════════════════════════════════════════════════
   HORSE RACING — galloping horses + finish line
   ════════════════════════════════════════════════ */
.sh-track{
  position:absolute;left:0;right:0;bottom:0;height:55%;
  background:
    linear-gradient(180deg,rgba(245,158,11,.08),rgba(245,158,11,.2)),
    repeating-linear-gradient(90deg,rgba(255,255,255,.03) 0 40px,transparent 40px 80px);
  transform:perspective(200px) rotateX(35deg);
  transform-origin:bottom;
  border-top:1px solid rgba(245,158,11,.25);
}
.sh-horse{
  position:absolute;font-size:18px;color:rgba(245,158,11,.85);
  filter:drop-shadow(0 2px 4px rgba(0,0,0,.6));
  animation:shHorseGallop 3.2s linear infinite;
}
.sh-horse-1{top:54%;left:-10%;animation-delay:0s;font-size:20px;color:#f59e0b;}
.sh-horse-2{top:66%;left:-10%;animation-delay:.5s;font-size:16px;opacity:.85;}
.sh-horse-3{top:76%;left:-10%;animation-delay:1s;font-size:14px;opacity:.7;}
@keyframes shHorseGallop{
  0%   {left:-12%; transform:translateY(0);}
  50%  {transform:translateY(-2px);}
  100% {left:110%; transform:translateY(0);}
}
.sh-finish{
  position:absolute;right:8%;bottom:8%;width:4px;height:60%;
  background:repeating-linear-gradient(0deg,#fff 0 5px,#1a1a1a 5px 10px);
  box-shadow:0 0 8px rgba(255,255,255,.3);
}

/* ════════════════════════════════════════════════
   GREYHOUND RACING — running dogs + track rail
   ════════════════════════════════════════════════ */
.sh-track-dog{
  background:
    linear-gradient(180deg,rgba(168,85,247,.08),rgba(168,85,247,.2)),
    repeating-linear-gradient(90deg,rgba(255,255,255,.03) 0 30px,transparent 30px 60px);
  border-top:1px solid rgba(168,85,247,.25);
}
.sh-dog{
  position:absolute;font-size:15px;color:rgba(168,85,247,.9);
  filter:drop-shadow(0 2px 4px rgba(0,0,0,.6));
  animation:shDogRun 2.6s linear infinite;
}
.sh-dog-1{top:55%;left:-10%;animation-delay:0s;font-size:17px;color:#a855f7;}
.sh-dog-2{top:68%;left:-10%;animation-delay:.35s;opacity:.85;}
.sh-dog-3{top:78%;left:-10%;animation-delay:.7s;font-size:13px;opacity:.7;}
@keyframes shDogRun{
  0%   {left:-10%;}
  100% {left:112%;}
}

/* ════════════════════════════════════════════════
   KABADDI — mat grid + two players clashing
   ════════════════════════════════════════════════ */
.sh-mat{
  position:absolute;left:0;right:0;bottom:0;height:55%;
  background:
    linear-gradient(180deg,rgba(239,68,68,.08),rgba(239,68,68,.22)),
    repeating-linear-gradient(0deg,transparent 0 14px,rgba(255,255,255,.05) 14px 15px),
    repeating-linear-gradient(90deg,transparent 0 14px,rgba(255,255,255,.05) 14px 15px);
  transform:perspective(200px) rotateX(38deg);
  transform-origin:bottom;
  border-top:1px solid rgba(239,68,68,.28);
}
.sh-mat-line{
  position:absolute;left:50%;bottom:8%;width:2px;height:40%;
  background:linear-gradient(180deg,rgba(239,68,68,.6),rgba(239,68,68,.15));
  transform:translateX(-50%);
  box-shadow:0 0 8px rgba(239,68,68,.35);
}
.sh-kab{
  position:absolute;font-size:28px;color:rgba(239,68,68,.9);
  filter:drop-shadow(0 3px 6px rgba(0,0,0,.6));
  bottom:18%;
}
.sh-kab-l{left:16%;animation:shKabLeft 1.8s ease-in-out infinite;}
.sh-kab-r{right:16%;animation:shKabRight 1.8s ease-in-out infinite;color:rgba(59,130,246,.95);}
@keyframes shKabLeft{
  0%,100% {transform:translateX(0) rotate(-3deg);}
  50%     {transform:translateX(18px) rotate(3deg);}
}
@keyframes shKabRight{
  0%,100% {transform:translateX(0) rotate(3deg) scaleX(-1);}
  50%     {transform:translateX(-18px) rotate(-3deg) scaleX(-1);}
}