/* ============================================
   TURFBOOK - Page Loader (Real Cricket Ball SVG)
   ============================================ */
#page-loader {
  position: fixed;
  inset: 0;
  z-index: 99999;
  background: linear-gradient(160deg, #1a5c1e 0%, #2E7D32 50%, #1b4d1e 100%);
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  transition: opacity 0.6s ease, visibility 0.6s ease;
}
#page-loader.hide {
  opacity: 0;
  visibility: hidden;
  pointer-events: none;
}

/* grass stripe */
#page-loader::before {
  content: '';
  position: absolute;
  inset: 0;
  background: repeating-linear-gradient(
    180deg,
    rgba(0,0,0,0.06) 0px, rgba(0,0,0,0.06) 40px,
    rgba(255,255,255,0.02) 40px, rgba(255,255,255,0.02) 80px
  );
  pointer-events: none;
}

.loader-logo {
  position: relative;
  font-family: 'Rajdhani', sans-serif;
  font-size: 2rem;
  font-weight: 700;
  color: #fff;
  letter-spacing: 4px;
  margin-bottom: 1.5rem;
  opacity: 0;
  animation: ldFadeDown 0.5s ease 0.15s forwards;
}
.loader-logo span { color: #a5d6a7; }

/* ---- Ball scene ---- */
.loader-ball-wrap {
  position: relative;
  width: 130px;
  height: 210px;
}

/* Real cricket ball SVG */
.ld-cricket-ball {
  position: absolute;
  left: 50%;
  width: 90px;
  height: 90px;
  transform-origin: center center;
  animation: ldBallBounce 0.92s infinite;
}

@keyframes ldBallBounce {
  /* TOP — ball is high up, slightly smaller (perspective), slow */
  0% {
    top: 0px;
    transform: translateX(-50%) scale(0.82) rotate(0deg);
    filter: drop-shadow(0 2px 4px rgba(0,0,0,0.3));
    animation-timing-function: cubic-bezier(0.55, 0.055, 0.675, 0.19); /* ease-in (gravity) */
  }

  /* FALLING FAST — mid air */
  40% {
    top: 96px;
    transform: translateX(-50%) scale(1) rotate(108deg);
    filter: drop-shadow(0 12px 20px rgba(0,0,0,0.5));
    animation-timing-function: cubic-bezier(0.55, 0.055, 0.675, 0.19);
  }

  /* JUST BEFORE IMPACT */
  48% {
    top: 112px;
    transform: translateX(-50%) scale(1.02) rotate(126deg);
    filter: drop-shadow(0 4px 8px rgba(0,0,0,0.6));
  }

  /* IMPACT — squish flat */
  52% {
    top: 118px;
    transform: translateX(-50%) scaleX(1.28) scaleY(0.72) rotate(132deg);
    filter: drop-shadow(0 2px 6px rgba(0,0,0,0.7));
    animation-timing-function: cubic-bezier(0.215, 0.61, 0.355, 1); /* ease-out (bounce up) */
  }

  /* JUST AFTER IMPACT — overshoot restore */
  60% {
    top: 100px;
    transform: translateX(-50%) scaleX(0.95) scaleY(1.05) rotate(148deg);
    filter: drop-shadow(0 10px 18px rgba(0,0,0,0.45));
    animation-timing-function: cubic-bezier(0.55, 0.055, 0.675, 0.19);
  }

  /* TOP — completes full spin, back to small */
  100% {
    top: 0px;
    transform: translateX(-50%) scale(0.82) rotate(360deg);
    filter: drop-shadow(0 2px 4px rgba(0,0,0,0.3));
    animation-timing-function: cubic-bezier(0.55, 0.055, 0.675, 0.19);
  }
}

/* ground shadow — grows when ball is near, shrinks when far */
.ld-ground-shadow {
  position: absolute;
  bottom: 22px;
  left: 50%;
  width: 70px;
  height: 12px;
  border-radius: 50%;
  background: rgba(0,0,0,0.5);
  filter: blur(6px);
  transform: translateX(-50%) scaleX(0.2);
  opacity: 0.1;
  animation: ldShadow 0.92s ease infinite;
}
@keyframes ldShadow {
  0%, 100% { transform: translateX(-50%) scaleX(0.2);  opacity: 0.08; }
  48%       { transform: translateX(-50%) scaleX(1.1);  opacity: 0.55; }
  52%       { transform: translateX(-50%) scaleX(1.35); opacity: 0.65; }
  60%       { transform: translateX(-50%) scaleX(0.9);  opacity: 0.4;  }
}

/* ---- loading text ---- */
.loader-text {
  position: relative;
  margin-top: 1.5rem;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 0.7rem;
  opacity: 0;
  animation: ldFadeUp 0.4s ease 0.4s forwards;
}
.loader-text p {
  font-family: 'Inter', sans-serif;
  font-size: 0.78rem;
  color: rgba(255,255,255,0.7);
  letter-spacing: 3px;
  text-transform: uppercase;
  font-weight: 500;
}
.loader-dots { display: flex; gap: 6px; }
.loader-dots span {
  width: 7px; height: 7px;
  background: rgba(255,255,255,0.4);
  border-radius: 50%;
  animation: ldDot 1.2s ease infinite;
}
.loader-dots span:nth-child(1) { animation-delay: 0s; }
.loader-dots span:nth-child(2) { animation-delay: 0.2s; }
.loader-dots span:nth-child(3) { animation-delay: 0.4s; }
@keyframes ldDot {
  0%,80%,100% { transform: scale(0.7); background: rgba(255,255,255,0.3); }
  40%         { transform: scale(1.3); background: rgba(255,255,255,0.9); }
}

/* progress bar */
.loader-progress {
  position: absolute; bottom: 0; left: 0; right: 0;
  height: 3px; background: rgba(255,255,255,0.1); z-index: 2;
}
.loader-progress-bar {
  height: 100%;
  background: linear-gradient(90deg, #81c784, #fff);
  border-radius: 2px; width: 0%;
  animation: ldProg 1.6s ease-out forwards;
}
@keyframes ldProg    { 0%{width:0%} 40%{width:55%} 70%{width:78%} 100%{width:100%} }
@keyframes ldFadeDown { from{opacity:0;transform:translateY(-20px)} to{opacity:1;transform:translateY(0)} }
@keyframes ldFadeUp   { from{opacity:0;transform:translateY(14px)}  to{opacity:1;transform:translateY(0)} }