/* =========================================================
   CHAWABA SPORTS SPLASH SCREEN
   FULL SCREEN BLUE → WHITE BOTTOM GRADIENT
========================================================= */


/* =========================================================
   ROOT VARIABLES
========================================================= */

:root {
  --white: #ffffff;
  --blue-dark: #140266;
  --blue-deep: #150a78;
  --blue-main: #1a1a8c;
  --blue-light: #303fc4;
  --blue-glow: #1769ff;

  --logo-svg: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 45.56 45.36' fill='%2300d98d'%3E%3Cpath d='M38.25 16.46a3.88 3.88 0 0 0 2.39 4.95l2.28.8a3.89 3.89 0 1 1-2.52 7.35l-3.4-1.2a3.88 3.88 0 0 1-2.39-4.95l2.57-7.34a.584.584 0 1 1 1.1.39zM27 6.63a3.89 3.89 0 0 0 5.36 1.22l2-1.29a3.89 3.89 0 1 1 4.17 6.56l-3.08 1.93a3.87 3.87 0 0 1-5.35-1.22L26 7.25a.6.6 0 0 1 .18-.81.58.58 0 0 1 .81.19zm-14.76 2.7a3.89 3.89 0 0 0 4.29-3.43l.27-2.41a3.89 3.89 0 1 1 7.73.83l-.41 3.61a3.89 3.89 0 0 1-4.29 3.43l-7.73-.87a.6.6 0 0 1-.52-.65.58.58 0 0 1 .65-.51zM5.16 22.52a3.87 3.87 0 0 0 0-5.49l-1.71-1.72a3.882 3.882 0 1 1 5.46-5.52l2.57 2.57a3.87 3.87 0 0 1 0 5.49L6 23.35a.59.59 0 1 1-.83-.83zm5.91 13.76a3.89 3.89 0 0 0-4.3-3.43l-2.41.27a3.882 3.882 0 1 1-.91-7.71L7.06 25a3.89 3.89 0 0 1 4.3 3.42l.87 7.73a.584.584 0 1 1-1.16.13zm14.43 3.96a3.88 3.88 0 0 0-5.35 1.22l-1.29 2a3.89 3.89 0 1 1-6.6-4.1l1.93-3.07a3.89 3.89 0 0 1 5.36-1.23l6.58 4.14a.588.588 0 1 1-.62 1zm12.1-8.82a3.88 3.88 0 0 0-2.38 4.95l.8 2.29a3.884 3.884 0 1 1-7.32 2.6l-1.2-3.43a3.88 3.88 0 0 1 2.38-4.95l7.34-2.57a.59.59 0 0 1 .39 1.11z'/%3E%3C/svg%3E");
}


/* =========================================================
   GLOBAL RESET
========================================================= */

html,
body {
  width: 100%;
  height: 100%;
  min-height: 100%;
  margin: 0;
  padding: 0;
}


*,
*::before,
*::after {
  box-sizing: border-box;
}


/* IMPORTANT:
   Background ya body iwe blue ili pembeni hakuna white */
html {
  background: #140266;
}


body {
  width: 100%;
  height: 100%;
  min-height: 100%;

  overflow: hidden;

  font-family: "Poppins", sans-serif;

  background: #140266;
  color: #ffffff;

  overscroll-behavior: none;
}


/* =========================================================
   HIDE SEO HEADING
========================================================= */

.chawaba-seo-heading {
  position: absolute;

  width: 1px;
  height: 1px;

  overflow: hidden;

  clip: rect(0 0 0 0);
  clip-path: inset(50%);

  white-space: nowrap;
}


/* =========================================================
   MAIN SPLASH SCREEN
========================================================= */

.chawaba-splash {
  position: fixed;

  top: 0;
  right: 0;
  bottom: 0;
  left: 0;

  width: 100vw;
  min-width: 100vw;

  height: 100vh;
  min-height: 100vh;

  height: 100dvh;
  min-height: 100dvh;

  display: flex;

  align-items: center;
  justify-content: center;

  overflow: hidden;

  isolation: isolate;

  font-family: "Poppins", sans-serif;


  /* =====================================================
     MAIN BACKGROUND

     BLUE JUU
     ↓
     BLUE KATIKATI
     ↓
     LIGHT BLUE
     ↓
     SOFT WHITE CHINI
  ===================================================== */

  background: linear-gradient(
    to bottom,

    #140266 0%,
    #150a78 14%,
    #1a1a8c 30%,
    #2635a5 46%,
    #4e63b3 60%,
    #7b91c9 72%,
    #acbadf 82%,
    #d8ddef 90%,
    #f2f3fa 96%,
    #ffffff 100%
  );
}


/* =========================================================
   CENTER BLUE ATMOSPHERIC LIGHT
========================================================= */

.chawaba-splash::before {
  content: "";

  position: absolute;

  width: min(900px, 140vw);
  height: min(900px, 140vw);

  left: 50%;
  top: 42%;

  transform: translate(-50%, -50%);

  border-radius: 50%;

  background: radial-gradient(
    circle,

    rgba(56, 91, 255, 0.30) 0%,
    rgba(43, 66, 165, 0.20) 35%,
    rgba(90, 110, 190, 0.08) 55%,
    rgba(255, 255, 255, 0) 75%
  );

  filter: blur(55px);

  pointer-events: none;

  z-index: 0;
}


/* =========================================================
   BOTTOM WHITE / BLUE ATMOSPHERE

   Hii inasaidia transition ya chini
========================================================= */

.chawaba-splash::after {
  content: "";

  position: absolute;

  left: 50%;
  bottom: -200px;

  width: min(1000px, 160vw);
  height: 550px;

  transform: translateX(-50%);

  border-radius: 50%;

  background: radial-gradient(
    ellipse at center,

    rgba(255, 255, 255, 0.22) 0%,
    rgba(220, 229, 255, 0.12) 35%,
    rgba(120, 150, 220, 0.05) 55%,
    rgba(255, 255, 255, 0) 75%
  );

  filter: blur(55px);

  pointer-events: none;

  z-index: 1;
}


/* =========================================================
   BLUE GLOW ELEMENTS
========================================================= */

.chawaba-glow {
  position: absolute;

  border-radius: 50%;

  pointer-events: none;

  z-index: 0;

  filter: blur(100px);
}


/* =========================================================
   TOP LEFT GLOW
========================================================= */

.chawaba-glow-one {
  width: 500px;
  height: 500px;

  left: -280px;
  top: -150px;

  background: rgba(70, 80, 255, 0.32);
}


/* =========================================================
   BOTTOM RIGHT GLOW
========================================================= */

.chawaba-glow-two {
  width: 500px;
  height: 500px;

  right: -280px;
  bottom: -180px;

  background: rgba(23, 105, 255, 0.14);
}


/* =========================================================
   CONTENT CONTAINER
========================================================= */

.chawaba-stack {
  position: relative;

  z-index: 10;

  width: 100%;
  max-width: 700px;

  display: flex;

  flex-direction: column;

  align-items: center;
  justify-content: center;

  text-align: center;

  padding:
    calc(25px + env(safe-area-inset-top))
    25px
    calc(25px + env(safe-area-inset-bottom));
}


/* =========================================================
   SLOGAN
========================================================= */

.chawaba-slogan {
  display: flex;

  flex-direction: column;

  align-items: center;

  margin-bottom: 28px;

  color: #ffffff;

  text-shadow:
    0 4px 20px rgba(0, 0, 0, 0.45);

  animation:
    slogan-in 1s ease both;
}


.chawaba-slogan span {
  font-size: clamp(12px, 2vw, 17px);

  font-weight: 600;

  letter-spacing: 0.24em;

  line-height: 1.5;

  opacity: 0.95;

  color: #ffffff;
}


.chawaba-slogan strong {
  margin-top: 2px;

  font-size: clamp(32px, 7vw, 66px);

  line-height: 0.95;

  font-weight: 800;

  font-style: italic;

  letter-spacing: 0.015em;

  color: #ffffff;

  text-shadow:
    0 0 20px rgba(80, 130, 255, 0.30),
    0 6px 20px rgba(0, 0, 0, 0.55);
}


/* =========================================================
   SLOGAN ANIMATION
========================================================= */

@keyframes slogan-in {

  from {
    opacity: 0;
    transform: translateY(-20px);
  }

  to {
    opacity: 1;
    transform: translateY(0);
  }

}


/* =========================================================
   3D LOGO CONTAINER
========================================================= */

.chawaba-logo-3d {
  position: relative;

  width: 190px;
  height: 190px;

  margin: 0 auto;

  perspective: 700px;

  transform-style: preserve-3d;
}


/* =========================================================
   3D SPINNER
========================================================= */

.chawaba-logo-spinner {
  position: relative;

  width: 100%;
  height: 100%;

  transform-style: preserve-3d;

  animation:
    chawaba-spin-y 2.8s linear infinite;
}


@keyframes chawaba-spin-y {

  from {
    transform: rotateY(0deg);
  }

  to {
    transform: rotateY(360deg);
  }

}


/* =========================================================
   LOGO LAYERS
========================================================= */

.chawaba-logo-layer {
  position: absolute;

  inset: 0;

  -webkit-mask-image: var(--logo-svg);
  mask-image: var(--logo-svg);

  -webkit-mask-size: contain;
  mask-size: contain;

  -webkit-mask-repeat: no-repeat;
  mask-repeat: no-repeat;

  -webkit-mask-position: center;
  mask-position: center;

  background: #bfc9d8;

  filter:
    drop-shadow(0 5px 8px rgba(0, 0, 0, 0.5));
}


.chawaba-logo-layer:first-child,
.chawaba-logo-layer:last-child {

  background:
    linear-gradient(
      145deg,
      #62a0ff,
      #1769ff 55%,
      #063ca8
    );
}


.chawaba-logo-layer:nth-child(2),
.chawaba-logo-layer:nth-child(6) {

  background: #0d51c9;
}


.chawaba-logo-layer:nth-child(4) {

  background: #151b28;
}


/* =========================================================
   3D DEPTH
========================================================= */

.chawaba-logo-layer:nth-child(1) {
  transform: translateZ(12px);
}

.chawaba-logo-layer:nth-child(2) {
  transform: translateZ(8px);
}

.chawaba-logo-layer:nth-child(3) {
  transform: translateZ(4px);
}

.chawaba-logo-layer:nth-child(4) {
  transform: translateZ(0);
}

.chawaba-logo-layer:nth-child(5) {
  transform: translateZ(-4px);
}

.chawaba-logo-layer:nth-child(6) {
  transform: translateZ(-8px);
}

.chawaba-logo-layer:nth-child(7) {
  transform: translateZ(-12px);
}


/* =========================================================
   CENTER BADGE
========================================================= */

.chawaba-badge {
  position: absolute;

  left: 50%;
  top: 50%;

  width: 62%;
  height: 62%;

  transform:
    translate(-50%, -50%);

  object-fit: cover;

  border-radius: 50%;

  box-shadow:
    0 8px 25px rgba(0, 0, 0, 0.45),
    0 0 0 3px rgba(255, 255, 255, 0.95),
    0 0 0 6px rgba(23, 105, 255, 0.65);

  animation:
    badge-in
    0.9s
    cubic-bezier(0.2, 0.8, 0.2, 1)
    both;
}


/* =========================================================
   BADGE ANIMATION
========================================================= */

@keyframes badge-in {

  from {

    opacity: 0;

    transform:
      translate(-50%, -50%)
      scale(0.65);
  }

  to {

    opacity: 1;

    transform:
      translate(-50%, -50%)
      scale(1);
  }

}


/* =========================================================
   MOBILE
========================================================= */

@media (max-width: 600px) {

  .chawaba-stack {
    padding-left: 20px;
    padding-right: 20px;
  }

  .chawaba-slogan {
    margin-bottom: 20px;
  }

  .chawaba-slogan span {
    font-size: 10px;
    letter-spacing: 0.18em;
  }

  .chawaba-slogan strong {
    font-size: 38px;
  }

  .chawaba-logo-3d {
    width: 155px;
    height: 155px;
  }

}


/* =========================================================
   VERY SMALL PHONES
========================================================= */

@media (max-height: 650px) {

  .chawaba-slogan {
    margin-bottom: 12px;
  }

  .chawaba-logo-3d {
    width: 135px;
    height: 135px;
  }

}


/* =========================================================
   LANDSCAPE
========================================================= */

@media (orientation: landscape)
and (max-height: 600px) {

  .chawaba-logo-3d {
    width: 125px;
    height: 125px;
  }

  .chawaba-slogan {
    margin-bottom: 12px;
  }

}


/* =========================================================
   REDUCED MOTION
========================================================= */

@media (prefers-reduced-motion: reduce) {

  .chawaba-logo-spinner,
  .chawaba-slogan,
  .chawaba-badge {
    animation: none;
  }

}