/* ============================================================
   MARSA ALEKHWA — Splash / Welcome Screen
   Oil-themed intro overlay with geolocation language detection
   ============================================================ */

@layer components {

  /* ── Splash Overlay ────────────────────────────── */
  .splash {
    position: fixed;
    inset: 0;
    z-index: 9999;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    background: var(--color-navy-950);
    overflow: hidden;
    transition: opacity 0.8s var(--ease-out), visibility 0.8s;
  }

  .splash.is-hidden {
    opacity: 0;
    visibility: hidden;
    pointer-events: none;
  }

  /* ── Oil Pipeline Background ───────────────────── */
  .splash__bg {
    position: absolute;
    inset: 0;
    overflow: hidden;
  }

  /* Animated horizontal pipeline lines */
  .splash__pipeline {
    position: absolute;
    block-size: 1px;
    inline-size: 100%;
    background: linear-gradient(90deg, transparent 0%, rgba(212,175,55,0.08) 20%, rgba(212,175,55,0.15) 50%, rgba(212,175,55,0.08) 80%, transparent 100%);
  }

  .splash__pipeline:nth-child(1) { inset-block-start: 15%; }
  .splash__pipeline:nth-child(2) { inset-block-start: 30%; }
  .splash__pipeline:nth-child(3) { inset-block-start: 50%; }
  .splash__pipeline:nth-child(4) { inset-block-start: 70%; }
  .splash__pipeline:nth-child(5) { inset-block-start: 85%; }

  /* Oil flow particles along pipelines */
  .splash__flow {
    position: absolute;
    inline-size: 3rem;
    block-size: 3px;
    border-radius: 2px;
    background: linear-gradient(90deg, transparent, var(--color-gold-400), transparent);
    animation: oilFlow 3s linear infinite;
    opacity: 0.4;
  }

  .splash__flow:nth-child(1) { inset-block-start: 15%; animation-delay: 0s; animation-duration: 2.5s; }
  .splash__flow:nth-child(2) { inset-block-start: 30%; animation-delay: 0.8s; animation-duration: 3.2s; }
  .splash__flow:nth-child(3) { inset-block-start: 50%; animation-delay: 0.3s; animation-duration: 2.8s; }
  .splash__flow:nth-child(4) { inset-block-start: 70%; animation-delay: 1.2s; animation-duration: 3.5s; }
  .splash__flow:nth-child(5) { inset-block-start: 85%; animation-delay: 0.6s; animation-duration: 2.2s; }

  @keyframes oilFlow {
    0%   { inset-inline-start: -5%; opacity: 0; }
    10%  { opacity: 0.6; }
    90%  { opacity: 0.6; }
    100% { inset-inline-start: 105%; opacity: 0; }
  }

  [dir="rtl"] .splash__flow {
    animation-name: oilFlowRtl;
  }

  @keyframes oilFlowRtl {
    0%   { inset-inline-end: -5%; opacity: 0; }
    10%  { opacity: 0.6; }
    90%  { opacity: 0.6; }
    100% { inset-inline-end: 105%; opacity: 0; }
  }

  /* Radial golden glow behind logo */
  .splash__glow {
    position: absolute;
    inset-block-start: 50%;
    inset-inline-start: 50%;
    transform: translate(-50%, -50%);
    inline-size: 28rem;
    block-size: 28rem;
    border-radius: 50%;
    background: radial-gradient(circle, rgba(212,175,55,0.06) 0%, rgba(212,175,55,0.02) 40%, transparent 70%);
    animation: pulseGlowSplash 4s ease-in-out infinite;
  }

  @keyframes pulseGlowSplash {
    0%, 100% { transform: translate(-50%, -50%) scale(1); opacity: 0.6; }
    50%      { transform: translate(-50%, -50%) scale(1.15); opacity: 1; }
  }

  /* ── Splash Content ────────────────────────────── */
  .splash__content {
    position: relative;
    z-index: 2;
    display: flex;
    flex-direction: column;
    align-items: center;
    text-align: center;
    padding: var(--space-8);
    animation: splashReveal 1s var(--ease-out) 0.3s both;
  }

  @keyframes splashReveal {
    from {
      opacity: 0;
      transform: translateY(2rem) scale(0.95);
    }
    to {
      opacity: 1;
      transform: translateY(0) scale(1);
    }
  }

  /* Logo */
  .splash__logo {
    inline-size: clamp(7rem, 15vw, 12rem);
    block-size: auto;
    margin-block-end: var(--space-8);
    filter: drop-shadow(0 0 40px rgba(212,175,55,0.2));
    animation: logoBreatheSplash 3s ease-in-out infinite;
  }

  @keyframes logoBreatheSplash {
    0%, 100% { filter: drop-shadow(0 0 30px rgba(212,175,55,0.15)); }
    50%      { filter: drop-shadow(0 0 60px rgba(212,175,55,0.3)); }
  }

  /* Welcome text */
  .splash__welcome {
    font-family: var(--font-heading);
    font-size: var(--text-3xl);
    font-weight: 700;
    color: var(--color-accent);
    margin-block-end: var(--space-3);
    opacity: 0;
    animation: splashTextIn 0.6s var(--ease-out) 0.8s both;
  }

  [dir="rtl"] .splash__welcome {
    font-family: var(--font-arabic-heading);
  }

  .splash__company {
    font-family: var(--font-heading);
    font-size: var(--text-5xl);
    font-weight: 800;
    color: var(--color-text-heading);
    margin-block-end: var(--space-4);
    opacity: 0;
    animation: splashTextIn 0.6s var(--ease-out) 1.1s both;
  }

  [dir="rtl"] .splash__company {
    font-family: var(--font-arabic-heading);
  }

  .splash__tagline {
    font-size: var(--text-lg);
    color: var(--color-text-secondary);
    max-inline-size: 36rem;
    margin-block-end: var(--space-10);
    opacity: 0;
    animation: splashTextIn 0.6s var(--ease-out) 1.4s both;
    line-height: 1.7;
  }

  @keyframes splashTextIn {
    from {
      opacity: 0;
      transform: translateY(1rem);
    }
    to {
      opacity: 1;
      transform: translateY(0);
    }
  }

  /* Enter button */
  .splash__enter {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: var(--space-3);
    padding: var(--space-4) var(--space-10);
    font-size: var(--text-base);
    font-weight: 700;
    color: var(--color-navy-950);
    background: var(--gradient-gold);
    border: none;
    border-radius: 3rem;
    cursor: pointer;
    opacity: 0;
    animation: splashTextIn 0.6s var(--ease-out) 1.7s both;
    transition: transform var(--duration-base) var(--ease-spring),
                box-shadow var(--duration-base) var(--ease-out);
    box-shadow: 0 4px 20px rgba(212,175,55,0.25);
    letter-spacing: 0.02em;
    font-family: var(--font-body);
  }

  [dir="rtl"] .splash__enter {
    font-family: var(--font-arabic);
  }

  .splash__enter:hover {
    transform: translateY(-3px) scale(1.03);
    box-shadow: 0 8px 40px rgba(212,175,55,0.4);
  }

  .splash__enter:active {
    transform: translateY(-1px) scale(0.98);
  }

  .splash__enter-arrow {
    display: inline-block;
    transition: transform var(--duration-base) var(--ease-out);
    font-size: 1.2em;
  }

  .splash__enter:hover .splash__enter-arrow {
    transform: translateX(4px);
  }

  [dir="rtl"] .splash__enter:hover .splash__enter-arrow {
    transform: translateX(-4px);
  }

  /* SOMO Badge in splash */
  .splash__somo {
    display: inline-flex;
    align-items: center;
    gap: var(--space-2);
    margin-block-start: var(--space-8);
    padding: var(--space-2) var(--space-5);
    background: rgba(212,175,55,0.06);
    border: 1px solid rgba(212,175,55,0.15);
    border-radius: 2rem;
    font-size: var(--text-xs);
    color: var(--color-text-secondary);
    opacity: 0;
    animation: splashTextIn 0.6s var(--ease-out) 2s both;
  }

  .splash__somo-icon {
    color: var(--color-accent);
  }

  /* Oil drip decoration at bottom */
  .splash__drip {
    position: absolute;
    inset-block-end: 0;
    inset-inline-start: 0;
    inset-inline-end: 0;
    block-size: 6rem;
    background: linear-gradient(to top, rgba(212,175,55,0.03), transparent);
    pointer-events: none;
  }

  /* ── Reduced Motion ────────────────────────────── */
  @media (prefers-reduced-motion: reduce) {
    .splash__flow,
    .splash__glow {
      animation: none;
    }

    .splash__logo {
      animation: none;
      filter: drop-shadow(0 0 30px rgba(212,175,55,0.2));
    }

    .splash__content,
    .splash__welcome,
    .splash__company,
    .splash__tagline,
    .splash__enter,
    .splash__somo {
      animation: none;
      opacity: 1;
      transform: none;
    }
  }

  /* ── Splash Mobile: ≤768px ──────────────────────── */
  @media (max-width: 768px) {
    .splash__logo {
      inline-size: clamp(5rem, 12vw, 8rem);
      margin-block-end: var(--space-6);
    }

    .splash__welcome {
      font-size: var(--text-2xl);
    }

    .splash__company {
      font-size: var(--text-3xl);
    }

    .splash__tagline {
      font-size: var(--text-base);
      max-inline-size: 28rem;
      margin-block-end: var(--space-8);
    }

    .splash__enter {
      padding: var(--space-4) var(--space-8);
      min-block-size: 3rem;
    }

    .splash__glow {
      inline-size: 18rem;
      block-size: 18rem;
    }
  }

  /* ── Splash Mobile: ≤480px ──────────────────────── */
  @media (max-width: 480px) {
    .splash__content {
      padding: var(--space-5);
    }

    .splash__logo {
      inline-size: clamp(4rem, 10vw, 6rem);
      margin-block-end: var(--space-4);
    }

    .splash__welcome {
      font-size: var(--text-xl);
    }

    .splash__company {
      font-size: var(--text-2xl);
    }

    .splash__tagline {
      font-size: var(--text-sm);
      margin-block-end: var(--space-6);
    }

    .splash__enter {
      padding: var(--space-3) var(--space-6);
      font-size: var(--text-sm);
    }

    .splash__somo {
      font-size: 0.65rem;
      padding: var(--space-1) var(--space-3);
    }

    .splash__glow {
      inline-size: 14rem;
      block-size: 14rem;
    }
  }

  /* ── Splash Mobile: ≤375px ──────────────────────── */
  @media (max-width: 375px) {
    .splash__company {
      font-size: var(--text-xl);
    }

    .splash__tagline {
      font-size: var(--text-xs);
    }
  }
}