/**
 * Loading Screen - Rivett
 * Inspired by nosigner.com intro animation
 * Gradient blob + brand reveal + character stagger
 */

/* ============================================ */
/* Loading Screen Overlay                       */
/* ============================================ */
.loading-screen {
  position: fixed;
  inset: 0;
  z-index: 9999;
  background-color: #000;
  display: flex;
  align-items: center;
  justify-content: center;
  flex-direction: column;
  overflow: hidden;
  transition: opacity 0.8s cubic-bezier(0.4, 0, 0.2, 1),
              visibility 0.8s cubic-bezier(0.4, 0, 0.2, 1);
}

.loading-screen--hidden {
  opacity: 0;
  visibility: hidden;
  pointer-events: none;
}

/* Prevent scroll while loading */
body.is-loading {
  overflow: hidden;
}

/* ============================================ */
/* Film Grain / Noise Texture                   */
/* ============================================ */
.loading-screen::before {
  content: '';
  position: absolute;
  inset: -50%;
  width: 200%;
  height: 200%;
  background-image: url("data:image/svg+xml,%3Csvg viewBox='0 0 256 256' xmlns='http://www.w3.org/2000/svg'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.85' numOctaves='4' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)' opacity='0.04'/%3E%3C/svg%3E");
  background-size: 256px 256px;
  opacity: 0.5;
  pointer-events: none;
  z-index: 1;
  animation: grain 0.5s steps(1) infinite;
}

@keyframes grain {
  0%, 100% { transform: translate(0, 0); }
  10% { transform: translate(-5%, -10%); }
  20% { transform: translate(-15%, 5%); }
  30% { transform: translate(7%, -25%); }
  40% { transform: translate(-5%, 25%); }
  50% { transform: translate(-15%, 10%); }
  60% { transform: translate(15%, 0%); }
  70% { transform: translate(0%, 15%); }
  80% { transform: translate(3%, 35%); }
  90% { transform: translate(-10%, 10%); }
}

/* ============================================ */
/* Animated Morphing Gradient Background        */
/* Boom from center → radiate light waves       */
/* ============================================ */
.loading-screen__blob {
  position: absolute;
  inset: 0;
  z-index: 0;
  overflow: hidden;
}

/* Container: starts at center, booms outward */
.loading-screen__blob-inner {
  position: absolute;
  inset: -20%;
  filter: blur(100px);
  opacity: 0;
  transform: scale(0.3);
  transform-style: preserve-3d;
  perspective: 800px;
  animation:
    boomOut 0.6s cubic-bezier(0.16, 1, 0.3, 1) 0.1s forwards,
    wavePulse 2.5s ease-in-out 0.7s infinite;
}

.loading-screen__blob-inner::before,
.loading-screen__blob-inner::after {
  content: '';
  position: absolute;
  border-radius: 50%;
}

/* Orb 1: Deep blue — radiates from center, pushed forward in Z */
.loading-screen__blob-inner::before {
  width: 55vmax;
  height: 55vmax;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%) translateZ(40px);
  background: radial-gradient(circle, #0055FF 0%, rgba(0, 85, 255, 0) 70%);
  animation: orbRadiate1 2.5s ease-in-out 0.7s infinite;
}

/* Orb 2: Hot pink — counter-radiate, recessed in Z for depth */
.loading-screen__blob-inner::after {
  width: 50vmax;
  height: 50vmax;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%) translateZ(-30px);
  background: radial-gradient(circle, #FF3388 0%, rgba(255, 51, 136, 0) 70%);
  animation: orbRadiate2 2s ease-in-out 0.7s infinite;
}

/* Base layers: deep indigo + navy-violet for 3D depth */
.loading-screen__blob-inner {
  background:
    radial-gradient(circle 30vmax at 50% 50%, #1a0060 0%, transparent 70%),
    radial-gradient(circle 25vmax at 50% 50%, #002280 0%, transparent 65%),
    radial-gradient(circle 20vmax at 60% 55%, rgba(180, 0, 100, 0.4) 0%, transparent 60%);
}

/* Phase 1: Boom — scale from 0.3 to 1, fade in */
@keyframes boomOut {
  0%   { opacity: 0; transform: scale(0.3); }
  60%  { opacity: 0.9; transform: scale(1.1); }
  100% { opacity: 0.8; transform: scale(1); }
}

/* Phase 2: Wave pulse — breathe in/out like light swell */
@keyframes wavePulse {
  0%   { transform: scale(1) rotate(0deg); }
  20%  { transform: scale(1.08) rotate(2deg); }
  40%  { transform: scale(0.94) rotate(-1deg); }
  60%  { transform: scale(1.06) rotate(1.5deg); }
  80%  { transform: scale(0.96) rotate(-0.5deg); }
  100% { transform: scale(1) rotate(0deg); }
}

/* Orb 1 (blue): wave + Z-axis depth shift */
@keyframes orbRadiate1 {
  0%   { transform: translate(-50%, -50%) translateZ(40px) scale(1); }
  15%  { transform: translate(-40%, -55%) translateZ(60px) scale(1.2); }
  35%  { transform: translate(-55%, -45%) translateZ(20px) scale(0.85); }
  55%  { transform: translate(-45%, -52%) translateZ(55px) scale(1.15); }
  75%  { transform: translate(-52%, -48%) translateZ(25px) scale(0.9); }
  100% { transform: translate(-50%, -50%) translateZ(40px) scale(1); }
}

/* Orb 2 (pink): counter-wave + opposite Z shift */
@keyframes orbRadiate2 {
  0%   { transform: translate(-50%, -50%) translateZ(-30px) scale(1); }
  20%  { transform: translate(-58%, -42%) translateZ(-50px) scale(1.25); }
  45%  { transform: translate(-42%, -56%) translateZ(-10px) scale(0.8); }
  70%  { transform: translate(-54%, -46%) translateZ(-45px) scale(1.18); }
  90%  { transform: translate(-48%, -52%) translateZ(-15px) scale(0.88); }
  100% { transform: translate(-50%, -50%) translateZ(-30px) scale(1); }
}

/* ============================================ */
/* Brand Text                                   */
/* ============================================ */
.loading-screen__content {
  position: relative;
  z-index: 2;
  text-align: center;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 20px;
}

.loading-screen__logo {
  width: clamp(120px, 18vw, 220px);
  height: auto;
  opacity: 0;
  transform: translateY(8px);
  animation: fadeInUp 0.8s cubic-bezier(0.16, 1, 0.3, 1) 0.3s forwards;
}

.loading-screen__tagline {
  font-family: 'Inter', sans-serif;
  font-size: clamp(0.625rem, 1.2vw, 0.8rem);
  font-weight: 400;
  letter-spacing: 0.25em;
  color: #fff;
  text-transform: uppercase;
  display: flex;
  justify-content: center;
  overflow: hidden;
}

/* Individual character spans for stagger */
.loading-screen__char {
  opacity: 0;
  display: inline-block;
  animation: charReveal 0.4s cubic-bezier(0.16, 1, 0.3, 1) forwards;
}

/* Space character */
.loading-screen__char--space {
  width: 0.35em;
}

/* ============================================ */
/* Animations                                   */
/* ============================================ */
@keyframes fadeInUp {
  from {
    opacity: 0;
    transform: translateY(8px);
  }
  to {
    opacity: 1;
    transform: translateY(0);
  }
}

@keyframes charReveal {
  from {
    opacity: 0;
    transform: translateY(4px);
  }
  to {
    opacity: 1;
    transform: translateY(0);
  }
}

/* Fade-out for brand text (applied via JS) */
.loading-screen__content--fade-out {
  animation: fadeOutContent 0.6s cubic-bezier(0.4, 0, 1, 1) forwards;
}

@keyframes fadeOutContent {
  from {
    opacity: 1;
    transform: scale(1);
  }
  to {
    opacity: 0;
    transform: scale(0.98);
  }
}

/* Blob dissolve (applied via JS) */
.loading-screen__blob--dissolve {
  animation: blobDissolve 1s cubic-bezier(0.4, 0, 0.2, 1) forwards;
}

@keyframes blobDissolve {
  to {
    opacity: 0;
    transform: scale(1.15);
  }
}

/* ============================================ */
/* Reduced Motion                               */
/* ============================================ */
@media (prefers-reduced-motion: reduce) {
  .loading-screen__logo {
    animation-duration: 0.01ms;
  }

  .loading-screen__char {
    animation-duration: 0.01ms;
  }

  .loading-screen::before {
    animation: none;
  }

  .loading-screen__blob-inner {
    animation: none;
  }

  .loading-screen__blob-inner::before,
  .loading-screen__blob-inner::after {
    animation: none;
  }
}