/* ==========================================================================
   Cricket effects: bowled delivery, pitch scroll-progress, reveals
   ========================================================================== */

/* Red leather ball with seam */
.fx-ball { width: 26px; height: 26px; border-radius: 50%; position: relative;
  background: radial-gradient(circle at 32% 30%, #ff6b6b 0%, #d62828 45%, #8e1414 100%);
  box-shadow: inset -3px -4px 6px rgba(0,0,0,.35), 0 4px 10px rgba(142,20,20,.35); }
.fx-ball::before, .fx-ball::after { content: ''; position: absolute; top: 3px; bottom: 3px; width: 0; border-left: 1.6px dashed rgba(255,255,255,.85); }
.fx-ball::before { left: 9px; } .fx-ball::after { right: 9px; }

/* ---------------------------------------------------------------- Bowled delivery */
.hero { position: relative; }
.delivery { position: absolute; left: 0; right: 0; bottom: 0; height: 130px; pointer-events: none; z-index: 3; overflow: hidden; }
.delivery .pitch-line { position: absolute; left: 4%; right: 6%; bottom: 22px; height: 2px; background: repeating-linear-gradient(90deg, rgba(29,78,216,.25) 0 14px, transparent 14px 24px); }
.delivery .crease { position: absolute; bottom: 14px; width: 2px; height: 18px; background: rgba(29,78,216,.35); }
.delivery .ball-x { position: absolute; left: 0; bottom: 24px; animation: ballX 1.9s linear forwards; animation-delay: .6s; opacity: 0; }
.delivery .ball-y { animation: ballY 1.9s forwards; animation-delay: .6s; }
.delivery .fx-ball { animation: ballSpin .35s linear infinite; }
@keyframes ballX {
  0% { opacity: 1; transform: translateX(-40px); }
  92% { opacity: 1; transform: translateX(calc(var(--stump-x, 85vw) - 26px)); }
  100% { opacity: 0; transform: translateX(calc(var(--stump-x, 85vw) - 10px)); }
}
@keyframes ballY {
  0%   { transform: translateY(-80px); animation-timing-function: cubic-bezier(.5,0,1,1); }
  55%  { transform: translateY(0); animation-timing-function: cubic-bezier(0,0,.5,1); }   /* pitches */
  80%  { transform: translateY(-34px); animation-timing-function: cubic-bezier(.5,0,1,1); }
  100% { transform: translateY(-10px); }
}
@keyframes ballSpin { to { rotate: 360deg; } }

.stumps { position: absolute; bottom: 22px; width: 34px; height: 64px; pointer-events: auto; cursor: pointer; left: var(--stump-x, 85vw); transform: translateX(-50%); }
.stumps .stump { position: absolute; bottom: 0; width: 5px; height: 58px; border-radius: 3px; background: linear-gradient(90deg, #f3e2b8, #d8b46a); box-shadow: inset -1px 0 0 rgba(0,0,0,.15); }
.stumps .stump:nth-child(1) { left: 3px; } .stumps .stump:nth-child(2) { left: 14.5px; } .stumps .stump:nth-child(3) { left: 26px; }
.stumps .bail { position: absolute; top: 2px; width: 13px; height: 4px; border-radius: 3px; background: #c9952f; }
.stumps .bail.l { left: 4px; } .stumps .bail.r { left: 17px; }
.delivery.play .stumps { animation: stumpShake .4s ease-out 2.35s; }
.delivery.play .bail.l { animation: bailL 1.1s cubic-bezier(.2,.7,.4,1) 2.35s forwards; }
.delivery.play .bail.r { animation: bailR 1.1s cubic-bezier(.2,.7,.4,1) 2.35s forwards; }
.delivery.play .stump:nth-child(2) { animation: stumpTilt .5s ease-out 2.35s forwards; transform-origin: bottom center; }
@keyframes stumpShake { 25% { transform: translateX(calc(-50% + 3px)); } 50% { transform: translateX(calc(-50% - 2px)); } }
@keyframes stumpTilt { to { transform: rotate(14deg); } }
@keyframes bailL { 0% { transform: none; } 40% { transform: translate(-26px, -60px) rotate(-200deg); } 100% { transform: translate(-48px, 50px) rotate(-420deg); opacity: 0; } }
@keyframes bailR { 0% { transform: none; } 40% { transform: translate(30px, -74px) rotate(220deg); } 100% { transform: translate(56px, 50px) rotate(460deg); opacity: 0; } }

.bowled-pop { position: absolute; bottom: 92px; left: var(--stump-x, 85vw); transform: translateX(-50%) scale(.4); opacity: 0;
  font-family: var(--font-head); font-weight: 800; font-size: 1.15rem; letter-spacing: .06em; color: #fff;
  background: var(--red-600, #e11d48); padding: .3rem .8rem; border-radius: 999px; box-shadow: 0 8px 20px rgba(225,29,72,.35); white-space: nowrap; }
.bowled-pop::after { content: ''; position: absolute; left: 50%; bottom: -6px; transform: translateX(-50%); border: 6px solid transparent; border-bottom: 0; border-top-color: var(--red-600, #e11d48); }
.delivery.play .bowled-pop { animation: pop 2.2s cubic-bezier(.2,1.4,.4,1) 2.45s forwards; }
@keyframes pop { 0% { opacity: 0; transform: translateX(-50%) scale(.4); } 15% { opacity: 1; transform: translateX(-50%) scale(1); } 75% { opacity: 1; transform: translateX(-50%) scale(1); } 100% { opacity: 0; transform: translateX(-50%) translateY(-10px) scale(.9); } }

/* ---------------------------------------------------------------- Scroll progress on a pitch */
.pitch-progress { position: fixed; left: 0; right: 0; top: 0; height: 4px; z-index: 1100; pointer-events: none; background: transparent; }
.pitch-progress .bar { height: 100%; width: 0; background: linear-gradient(90deg, var(--blue, #1d4ed8), var(--green-600, #f97316)); border-radius: 0 4px 4px 0; }
.pitch-progress .fx-ball { position: absolute; top: -5px; left: 0; width: 14px; height: 14px; transform: translateX(-7px); box-shadow: 0 2px 6px rgba(0,0,0,.25); }
.pitch-progress .fx-ball::before { left: 4px; top: 2px; bottom: 2px; border-left-width: 1px; }
.pitch-progress .fx-ball::after { right: 4px; top: 2px; bottom: 2px; border-left-width: 1px; }

/* ---------------------------------------------------------------- Reveal on scroll */
.reveal { opacity: 0; transform: translateY(26px); transition: opacity .7s ease, transform .7s cubic-bezier(.2,.7,.2,1); }
.reveal.in { opacity: 1; transform: none; }
.reveal-stagger > * { transition-delay: calc(var(--i, 0) * 90ms); }

/* Ball spin on CTA hover */
.btn-cta .bi { display: inline-block; transition: transform .5s ease; }
.btn-cta:hover .bi { transform: rotate(360deg); }

@media (max-width: 767.98px) {
  .delivery { height: 100px; }
  .stumps { height: 48px; width: 28px; }
  .stumps .stump { height: 44px; width: 4px; }
  .stumps .stump:nth-child(2) { left: 12px; } .stumps .stump:nth-child(3) { left: 21px; }
  .stumps .bail { width: 11px; } .stumps .bail.r { left: 14px; }
  .bowled-pop { bottom: 70px; font-size: .95rem; }
}
@media (prefers-reduced-motion: reduce) {
  .delivery { display: none; }
  .reveal { opacity: 1; transform: none; transition: none; }
  .btn-cta:hover .bi { transform: none; }
}
@media print { .delivery, .pitch-progress { display: none !important; } }