/* ==========================================================================
   CRICKET PREMIER LEAGUE — ANIMATED INTRO SPLASH SCREEN
   Pure White Background (#ffffff) — Zero Color Wash
   Layout: Full Player Action Artwork on top (uncovered), Words in lower portion
   Responsive across Mobile (< 1024px) & Desktop (>= 1024px)
   Features:
   - 100% Pure White Background (no gradients/wash)
   - Sharp Cricket Action Hero Artwork (Players fully visible, not covered)
   - Top Brand Pill: ONLINE (Black Bold) CRICKETS (Green Bold) .IN (Red Badge) PRESENTS
   - Bouncing C (Black), P (Green), L (Red) with Realistic Tennis Ball Drop into bend of 'L'
   - Cricket Premier League Subtitle & PLAY • ORGANIZE • ENJOY Motto
   ========================================================================== */

#intro-loading-screen {
  position: fixed;
  inset: 0;
  z-index: 999999;
  background: #ffffff !important;
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  overflow: hidden;
  user-select: none;
  opacity: 1;
  transition: opacity 0.45s cubic-bezier(0.4, 0, 0.2, 1), visibility 0.45s ease;
  cursor: pointer;
  padding: clamp(10px, 2vh, 24px) 16px;
}

#intro-loading-screen.fade-out {
  opacity: 0;
  visibility: hidden;
  pointer-events: none;
}

/* Stage Container: Vertically stacked layout (Hero on top, Words on lower portion) */
.intro-stage-container {
  width: 100%;
  max-width: 600px;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  text-align: center;
  z-index: 10;
}

/* =========================================================================
   UPPER AREA: HERO ACTION IMAGE (100% Visible, Completely Clear of Text)
   ========================================================================= */
.intro-hero-visual {
  width: 100%;
  max-width: min(88vw, 420px);
  height: clamp(190px, 42vh, 340px);
  display: flex;
  align-items: center;
  justify-content: center;
  margin-bottom: clamp(6px, 1.2vh, 12px);
  animation: introHeroFadeIn 0.6s ease-out forwards;
}

.intro-hero-visual img {
  max-width: 100%;
  max-height: 100%;
  object-fit: contain;
  display: block;
  background: transparent !important;
  filter: none !important;
  image-rendering: auto;
}

@keyframes introHeroFadeIn {
  0% { opacity: 0; transform: translateY(-8px) scale(0.97); }
  100% { opacity: 1; transform: translateY(0) scale(1); }
}

/* =========================================================================
   LOWER PORTION: BRAND PILL, C P L LETTERS & TITLES (Never Covers Face)
   ========================================================================= */
.intro-lower-content {
  display: flex;
  flex-direction: column;
  align-items: center;
  text-align: center;
  width: 100%;
}

/* Top Brand Tag: ONLINE CRICKETS .IN PRESENTS */
.intro-presents-pill {
  display: inline-flex;
  align-items: center;
  gap: clamp(6px, 1.4vw, 10px);
  background: #ffffff;
  border: 1.5px solid #e2e8f0;
  border-radius: 9999px;
  padding: clamp(3px, 0.6vw, 5px) clamp(10px, 2.2vw, 18px);
  box-shadow: 0 4px 16px -2px rgba(15, 23, 42, 0.06);
  margin-bottom: clamp(4px, 0.8vh, 8px);
  opacity: 0;
  transform: translateY(8px);
  animation: introFadeUp 0.5s 0.15s ease-out forwards;
}

.intro-brand-lockup {
  display: inline-flex;
  align-items: center;
  gap: clamp(3px, 0.8vw, 6px);
  line-height: 1;
}

/* Online: Black Bold */
.intro-brand-online {
  font-family: 'Plus Jakarta Sans', sans-serif;
  font-weight: 900;
  font-size: clamp(12px, 3vw, 16px);
  color: #0b132b;
  letter-spacing: -0.2px;
}

/* Crickets: Green Bold */
.intro-brand-crickets {
  font-family: 'Plus Jakarta Sans', sans-serif;
  font-weight: 900;
  font-size: clamp(12px, 3vw, 16px);
  color: #16a34a;
  letter-spacing: -0.2px;
}

/* .in: Red Background Rounded Badge with White Text */
.intro-brand-in {
  font-family: 'Plus Jakarta Sans', sans-serif;
  font-weight: 900;
  font-size: clamp(10px, 2.4vw, 13px);
  background: linear-gradient(135deg, #ef4444 0%, #dc2626 100%);
  color: #ffffff;
  padding: 2px 6px;
  border-radius: 5px;
  line-height: 1.1;
  box-shadow: 0 2px 6px rgba(220, 38, 38, 0.35);
  letter-spacing: 0.5px;
  display: inline-block;
}

.intro-presents-dot {
  width: 4px;
  height: 4px;
  border-radius: 50%;
  background: #cbd5e1;
}

.intro-presents-tag {
  font-family: 'Plus Jakarta Sans', sans-serif;
  font-weight: 800;
  font-size: clamp(10px, 2.2vw, 12px);
  letter-spacing: 2px;
  text-transform: uppercase;
  color: #64748b;
}

/* =========================================================================
   C P L BOUNCING LETTERS: Black (C), Green (P), Red (L)
   ========================================================================= */
.intro-cpl-row {
  display: flex;
  align-items: flex-end;
  justify-content: center;
  gap: 2px;
  line-height: 1;
  margin-bottom: clamp(4px, 0.8vh, 8px);
}

.intro-cpl-c,
.intro-cpl-p,
.intro-cpl-l {
  font-family: 'Plus Jakarta Sans', sans-serif;
  font-weight: 900;
  font-size: clamp(52px, 13vw, 84px);
  line-height: 0.85;
  opacity: 0;
  display: inline-block;
  filter: drop-shadow(0 2px 8px rgba(0, 0, 0, 0.08));
}

/* C: Black Bold */
.intro-cpl-c {
  background: linear-gradient(135deg, #0b132b 0%, #1e293b 100%);
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
  background-clip: text;
  animation: introLetterIn 0.5s 0.25s cubic-bezier(0.34, 1.56, 0.64, 1) forwards;
}

/* P: Green Bold */
.intro-cpl-p {
  background: linear-gradient(135deg, #15803d 0%, #16a34a 100%);
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
  background-clip: text;
  animation: introLetterIn 0.5s 0.38s cubic-bezier(0.34, 1.56, 0.64, 1) forwards;
}

/* L: Red Bold */
.intro-cpl-l {
  background: linear-gradient(135deg, #dc2626 0%, #ef4444 100%);
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
  background-clip: text;
  animation: introLetterIn 0.5s 0.50s cubic-bezier(0.34, 1.56, 0.64, 1) forwards;
}

@keyframes introLetterIn {
  0% { opacity: 0; transform: translateY(28px) scale(0.75); }
  100% { opacity: 1; transform: translateY(0) scale(1); }
}

.intro-cpl-l-wrap {
  position: relative;
  display: inline-flex;
  align-items: flex-end;
}

/* =========================================================================
   CRICKET TENNIS BALL: HEAD TOUCH -> SLOW DROP -> SETTLE IN BEND OF 'L'
   ========================================================================= */
.intro-ball {
  position: absolute;
  top: -2px;
  left: 28%;
  margin-left: -10px;
  margin-top: -20px;
  width: clamp(20px, 4.2vw, 26px);
  height: clamp(20px, 4.2vw, 26px);
  opacity: 0;
  pointer-events: none;
  z-index: 20;
  will-change: transform, opacity;
  transform: translate3d(0, 0, 0);
  backface-visibility: hidden;
  animation: ballHeadToBendDrop 1.8s 0.85s forwards;
}

.intro-ball-spin {
  width: 100%;
  height: 100%;
  display: block;
  will-change: transform;
  transform: translate3d(0, 0, 0);
  backface-visibility: hidden;
  filter: drop-shadow(0 2px 5px rgba(0, 0, 0, 0.25));
  animation: ballHeadToBendSpin 1.8s 0.85s forwards;
}

@keyframes ballHeadToBendDrop {
  0% {
    opacity: 0;
    transform: translate3d(0, 0, 0) scale(0.65);
  }
  12% {
    opacity: 1;
    transform: translate3d(0, 0, 0) scale(1.05);
  }
  22% {
    opacity: 1;
    transform: translate3d(0, 0, 0) scale(1);
  }
  32% {
    transform: translate3d(0, 0, 0);
    animation-timing-function: cubic-bezier(0.55, 0.055, 0.675, 0.19);
  }
  48% {
    transform: translate3d(3px, clamp(10px, 2.2vw, 16px), 0);
    animation-timing-function: cubic-bezier(0.25, 0.1, 0.25, 1);
  }
  75% {
    transform: translate3d(5px, clamp(34px, 8.4vw, 54px), 0);
    animation-timing-function: cubic-bezier(0.215, 0.61, 0.355, 1);
  }
  86% {
    transform: translate3d(5px, clamp(30px, 7.5vw, 48px), 0);
    animation-timing-function: cubic-bezier(0.55, 0.055, 0.675, 0.19);
  }
  93% {
    transform: translate3d(5px, clamp(34px, 8.4vw, 54px), 0);
  }
  100% {
    opacity: 1;
    transform: translate3d(5px, clamp(34px, 8.4vw, 54px), 0);
  }
}

@keyframes ballHeadToBendSpin {
  0%   { transform: rotate(0deg); }
  32%  { transform: rotate(0deg); }
  48%  { transform: rotate(60deg); }
  75%  { transform: rotate(260deg); }
  86%  { transform: rotate(300deg); }
  100% { transform: rotate(315deg); }
}

/* =========================================================================
   SUBTITLES: CRICKET PREMIER LEAGUE & MOTTO TAG
   ========================================================================= */
.intro-full-name {
  font-family: 'Plus Jakarta Sans', sans-serif;
  font-size: clamp(12px, 2.8vw, 16px);
  font-weight: 800;
  letter-spacing: clamp(1.5px, 0.6vw, 3.5px);
  color: #1e293b;
  text-transform: uppercase;
  opacity: 0;
  transform: translateY(8px);
  animation: introFadeUp 0.5s 2.0s ease-out forwards;
}

.intro-motto-tag {
  font-family: 'Plus Jakarta Sans', sans-serif;
  font-size: clamp(9px, 2vw, 12px);
  font-weight: 800;
  letter-spacing: clamp(2px, 0.8vw, 4px);
  color: #64748b;
  text-transform: uppercase;
  margin-top: 3px;
  opacity: 0;
  transform: translateY(6px);
  animation: introFadeUp 0.5s 2.3s ease-out forwards;
}

@keyframes introFadeUp {
  0%   { opacity: 0; transform: translateY(10px); }
  100% { opacity: 1; transform: translateY(0); }
}