/* ==========================================================================
   PAGE 1: SPLASH SCREEN — CLEAN CINEMATIC
   ========================================================================== */

/* ── Root wrapper ── */
.splash-layer {
  position: absolute;
  inset: 0;
  z-index: 100;
  background: #000;
  overflow: hidden;
  direction: ltr !important;
  unicode-bidi: isolate !important;
  transition: opacity 0.9s cubic-bezier(0.16, 1, 0.3, 1),
    transform 0.9s cubic-bezier(0.16, 1, 0.3, 1),
    filter 0.9s cubic-bezier(0.16, 1, 0.3, 1);
}

.splash-layer.dismissed {
  opacity: 0;
  pointer-events: none;
  transform: scale(1.08);
  filter: blur(4px);
}

/* ─────────────────────────────────────────
   BACKGROUND — black → warm golden grade
───────────────────────────────────────── */
.splash-bg {
  position: absolute;
  inset: 0;
  background: url('../assets/desert-bg.jpg') center 28% / cover no-repeat;
  z-index: 1;
  /* Opens black, grades to warm sepia */
  filter: saturate(0) brightness(0.08);
  animation:
    bgZoom 5s cubic-bezier(0.16, 1, 0.3, 1) 0s forwards,
    bgColorGrade 2.8s cubic-bezier(0.4, 0, 0.2, 1) 0.25s forwards;
}

@keyframes bgZoom {
  from {
    transform: scale(1.12);
  }

  to {
    transform: scale(1.0);
  }
}

@keyframes bgColorGrade {
  0% {
    filter: saturate(0) brightness(0.08) sepia(0);
  }

  30% {
    filter: saturate(0.25) brightness(0.40) sepia(0.18);
  }

  65% {
    filter: saturate(0.70) brightness(0.78) sepia(0.38);
  }

  100% {
    filter: saturate(1) brightness(1.0) sepia(0.28);
  }
}

/* Dark gradient overlay (top dark, mid open, bottom dark) */
.splash-bg::before {
  content: '';
  position: absolute;
  inset: 0;
  background: linear-gradient(180deg,
      rgba(0, 0, 0, 0.78) 0%,
      rgba(10, 7, 2, 0.30) 35%,
      rgba(10, 7, 2, 0.42) 60%,
      rgba(0, 0, 0, 0.88) 100%);
  z-index: 2;
}

/* Radial edge vignette */
.splash-bg::after {
  content: '';
  position: absolute;
  inset: 0;
  background: radial-gradient(ellipse 88% 78% at 50% 46%,
      transparent 30%,
      rgba(0, 0, 0, 0.52) 100%);
  z-index: 3;
}

/* ── Black curtain lifts to reveal ── */
.splash-curtain {
  position: absolute;
  inset: 0;
  background: #000;
  z-index: 9;
  pointer-events: none;
  animation: curtainLift 2.2s cubic-bezier(0.4, 0, 0.2, 1) 0.1s forwards;
}

@keyframes curtainLift {
  0% {
    opacity: 1;
  }

  100% {
    opacity: 0;
  }
}

/* ─────────────────────────────────────────
   TOP LOGO
───────────────────────────────────────── */
.splash-top-logo {
  position: absolute;
  top: 44px;
  left: 50%;
  transform: translateX(-50%) translateY(-8px);
  z-index: 10;
  pointer-events: none;
  opacity: 0;
  transition: opacity 0.8s ease, transform 0.8s ease;
}

.splash-top-logo.active {
  opacity: 0.75;
  transform: translateX(-50%) translateY(0);
}

.splash-logo-img {
  height: 36px;
  width: auto;
  object-fit: contain;
  filter: drop-shadow(0 2px 8px rgba(0, 0, 0, 0.7)) brightness(10);
}

/* ─────────────────────────────────────────
   CENTER GROUP
───────────────────────────────────────── */
.splash-center {
  position: absolute;
  left: 50%;
  top: 50%;
  transform: translate(-50%, -52%);
  z-index: 10;
  pointer-events: none;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 0;
}

/* ── Emblem Icon ── */
.emblem-icon-box {
  width: clamp(105px, 28vw, 135px);
  aspect-ratio: 108 / 124;
  margin-bottom: -15px;
  opacity: 0;
  transform: scale(0.25) rotate(-22deg);
  will-change: transform, opacity;
}

@keyframes emblemRotateZoom {
  0% {
    opacity: 0;
    transform: scale(0.22) rotate(-25deg) translateY(-10px);
  }

  65% {
    opacity: 1;
    transform: scale(1.07) rotate(4deg) translateY(0);
  }

  82% {
    transform: scale(0.97) rotate(-1.5deg);
  }

  100% {
    opacity: 1;
    transform: scale(1) rotate(0deg);
  }
}

.emblem-icon-box.active {
  animation: emblemRotateZoom 1s cubic-bezier(0.16, 1, 0.3, 1) forwards;
}

.emblem-icon-img {
  width: 80%;
  height: 80%;
  object-fit: contain;
  filter:
    drop-shadow(0 8px 28px rgba(0, 0, 0, 0.85)) drop-shadow(0 0 18px rgba(212, 180, 100, 0.35));
}

/* ── Shabab Text ── */
.shabab-text-element {
  display: flex;
  flex-direction: row !important;
  direction: ltr !important;
  unicode-bidi: isolate !important;
  justify-content: center;
  align-items: baseline;
  font-family: 'Poppins', sans-serif;
  font-weight: 800;
  font-size: clamp(52px, 14vw, 68px);
  color: #FFFFFF;
  letter-spacing: -1px;
  line-height: 0.85;
  position: relative;
}

/* Letter-by-letter reveal */
.shabab-text-element .char {
  display: inline-block;
  opacity: 0;
  transform: translateY(22px) scale(0.82);
  transition:
    opacity 0.42s cubic-bezier(0.16, 1, 0.3, 1),
    transform 0.42s cubic-bezier(0.16, 1, 0.3, 1);
  text-shadow:
    0 2px 0 rgba(0, 0, 0, 0.4),
    0 4px 22px rgba(0, 0, 0, 0.75);
  will-change: transform, opacity;
}

.shabab-text-element .char.visible {
  opacity: 1;
  transform: translateY(0) scale(1);
}

/* Gold shimmer sweep after reveal */
.shabab-text-element::after {
  content: 'Shabab';
  position: absolute;
  inset: 0;
  font-family: 'Poppins', sans-serif;
  font-weight: 800;
  font-size: clamp(52px, 14vw, 68px);
  letter-spacing: -1px;
  color: transparent;
  background: linear-gradient(105deg,
      transparent 28%,
      rgba(255, 220, 130, 0.60) 46%,
      rgba(255, 255, 255, 0.82) 52%,
      transparent 72%);
  background-size: 260% 100%;
  -webkit-background-clip: text;
  background-clip: text;
  opacity: 0;
  animation: shimmerSweep 1.4s cubic-bezier(0.16, 1, 0.3, 1) 2.1s forwards;
  pointer-events: none;
}

@keyframes shimmerSweep {
  0% {
    opacity: 0;
    background-position: 155% center;
  }

  15% {
    opacity: 1;
  }

  85% {
    opacity: 1;
  }

  100% {
    opacity: 0;
    background-position: -65% center;
  }
}

/* ── Underline vector ── */
.underline-vector-box {
  width: clamp(155px, 46vw, 230px);
  height: auto;
  aspect-ratio: 196 / 24;
  margin-top: 10px;
  transform: rotate(-1deg);
  transform: rotate(-1deg);
  opacity: 0;
  clip-path: inset(0 100% 0 0);
  transition:
    opacity 0.3s ease,
    clip-path 1s cubic-bezier(0.16, 1, 0.3, 1);
}

.underline-vector-box.active {
  opacity: 1;
}

.underline-vector-box.draw {
  clip-path: inset(0 0% 0 0);
}

.underline-img,
.underline-svg {
  width: 100%;
  height: 100%;
  display: block;
  object-fit: contain;
}

/* ─────────────────────────────────────────
   768PX & HIGHER (TABLET & DESKTOP SCREEN ADJUSTMENTS)
───────────────────────────────────────── */
@media (min-width: 768px) {
  .splash-bg {
    background-position: center 30%;
  }

  .splash-top-logo {
    top: 56px;
  }

  .splash-logo-img {
    height: 44px;
  }

  .emblem-icon-box {
    width: clamp(140px, 16vw, 190px);
    margin-bottom: -18px;
  }

  .shabab-text-element {
    font-size: clamp(72px, 9.5vw, 110px);
    letter-spacing: -1.5px;
  }

  .shabab-text-element::after {
    font-size: clamp(72px, 9.5vw, 110px);
    letter-spacing: -1.5px;
  }

  .underline-vector-box {
    width: clamp(240px, 32vw, 380px);
    margin-top: 14px;
  }
}