/* ═══════════════════════════════════════════════════════════════
   CYNO.GG — Premium Loading / Splash Screen
   ═══════════════════════════════════════════════════════════════ */

.splash-screen {
  position: fixed;
  inset: 0;
  z-index: 99999;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  background: var(--bg-0);
  overflow: hidden;
  will-change: opacity, transform;
}

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

/* Background mesh gradient — multi-point colour blobs that blend into a
   rich, premium-feeling surface.  Each radial-gradient is a "control point"
   of the mesh; their overlapping edges create the organic colour wash. */
.splash-bg {
  position: absolute;
  inset: 0;
  background:
    /* primary accent — top-left wash */
    radial-gradient(80% 70% at 8% 6%,   rgba(123, 220, 255, 0.28), transparent 55%),
    /* warm gold — top-right corner */
    radial-gradient(70% 65% at 92% 10%,  rgba(217, 183, 122, 0.22), transparent 50%),
    /* deep teal — mid-left */
    radial-gradient(60% 55% at 5% 50%,   rgba(56, 189, 195, 0.18), transparent 50%),
    /* soft violet — center-right */
    radial-gradient(65% 60% at 82% 45%,  rgba(139, 120, 220, 0.16), transparent 50%),
    /* mint — bottom-center push */
    radial-gradient(90% 70% at 45% 90%,  rgba(110, 231, 183, 0.18), transparent 55%),
    /* accent core glow — center hero area */
    radial-gradient(50% 45% at 50% 38%,  rgba(123, 220, 255, 0.16), transparent 50%),
    /* warm under-light — bottom-right */
    radial-gradient(55% 50% at 85% 80%,  rgba(230, 160, 90, 0.12), transparent 48%),
    /* deep base sweep */
    linear-gradient(168deg, var(--bg-0) 0%, var(--bg-1) 40%, #0a1628 65%, var(--bg-0) 100%);
  animation: splashMesh 16s ease-in-out infinite alternate;
  z-index: 0;
}

@keyframes splashMesh {
  0%   { transform: scale(1)    translate(0, 0);       opacity: 0.92; }
  33%  { transform: scale(1.04) translate(-0.8%, 0.6%); opacity: 1;    }
  66%  { transform: scale(1.02) translate(0.5%, -0.4%); opacity: 0.96; }
  100% { transform: scale(1.03) translate(-0.3%, 0.8%); opacity: 0.98; }
}

/* Animated cyber grid */
.splash-grid {
  position: absolute;
  inset: 0;
  background-image:
    repeating-linear-gradient(0deg, transparent, transparent 59px, rgba(123, 220, 255, 0.05) 59px, rgba(123, 220, 255, 0.05) 60px),
    repeating-linear-gradient(90deg, transparent, transparent 59px, rgba(123, 220, 255, 0.05) 59px, rgba(123, 220, 255, 0.05) 60px);
  opacity: 0.6;
  mask-image: radial-gradient(ellipse at center, transparent 15%, rgba(0, 0, 0, 0.25) 65%);
  -webkit-mask-image: radial-gradient(ellipse at center, transparent 15%, rgba(0, 0, 0, 0.25) 65%);
  z-index: 1;
  pointer-events: none;
  animation: splashGridPulse 8s ease-in-out infinite;
}

@keyframes splashGridPulse {
  0%, 100% { opacity: 0.5; }
  50%      { opacity: 0.7; }
}

/* Floating particles */
.splash-particles {
  position: absolute;
  inset: 0;
  overflow: hidden;
  z-index: 1;
  pointer-events: none;
}

.splash-particle {
  position: absolute;
  width: var(--size, 3px);
  height: var(--size, 3px);
  border-radius: 50%;
  background: radial-gradient(circle, rgba(123, 220, 255, 0.8), transparent);
  box-shadow: 0 0 8px rgba(123, 220, 255, 0.35), 0 0 16px rgba(123, 220, 255, 0.15);
  animation: splashParticleDrift var(--dur, 10s) ease-in-out infinite;
  animation-delay: var(--del, 0s);
  left: var(--x, 50%);
  top: var(--y, 50%);
}

@keyframes splashParticleDrift {
  0%   { transform: translate(0, 0) scale(1); opacity: 0; }
  15%  { opacity: 0.6; }
  85%  { opacity: 0.6; }
  100% { transform: translate(var(--dx, 30px), var(--dy, -60px)) scale(0.2); opacity: 0; }
}

/* Ambient floating orbs */
.splash-orb {
  position: absolute;
  border-radius: 50%;
  background: radial-gradient(circle, rgba(123, 220, 255, 0.15), transparent 70%);
  filter: blur(20px);
  animation: splashOrbFloat var(--dur, 15s) ease-in-out infinite;
  animation-delay: var(--del, 0s);
  left: var(--x, 50%);
  top: var(--y, 50%);
  width: var(--w, 120px);
  height: var(--h, 120px);
  pointer-events: none;
  z-index: 1;
}

@keyframes splashOrbFloat {
  0%, 100% { transform: translate(0, 0) scale(1); opacity: 0.3; }
  25%      { transform: translate(20px, -15px) scale(1.1); opacity: 0.5; }
  50%      { transform: translate(-10px, 10px) scale(0.9); opacity: 0.4; }
  75%      { transform: translate(15px, 5px) scale(1.05); opacity: 0.35; }
}

/* Centered content */
.splash-content {
  position: relative;
  z-index: 2;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 20px;
}

/* Brand text */
.splash-brand {
  font-family: var(--font-display);
  font-size: clamp(2.5rem, 8vw, 5rem);
  font-weight: 700;
  letter-spacing: 0.08em;
  color: #fff;
  margin: 0;
  padding: 16px 32px;
  display: flex;
  align-items: center;
  gap: 0;
  position: relative;
  text-shadow:
    0 0 8px rgba(123, 220, 255, 0.6),
    0 0 20px rgba(123, 220, 255, 0.4),
    0 0 40px rgba(123, 220, 255, 0.25),
    0 0 80px rgba(123, 220, 255, 0.12),
    0 0 120px rgba(123, 220, 255, 0.06);
}

/* ── Smooth Light Sweep (GPU-accelerated) ───────────────────
   Uses only transform and opacity for smooth 60fps animation.
   The sweep bar is a fixed-width element that translates across.
   ──────────────────────────────────────────────────────────── */

/* Primary sweep layer */
.splash-brand::before {
  content: "";
  position: absolute;
  top: -10%;
  left: 0;
  width: 18%;
  height: 120%;
  background: linear-gradient(
    105deg,
    transparent 0%,
    transparent 20%,
    rgba(123, 220, 255, 0.03) 30%,
    rgba(255, 255, 255, 0.2) 42%,
    rgba(255, 255, 255, 0.45) 50%,
    rgba(255, 255, 255, 0.2) 58%,
    rgba(123, 220, 255, 0.03) 70%,
    transparent 80%,
    transparent 100%
  );
  filter: blur(2px);
  pointer-events: none;
  opacity: 0;
  transform: translateX(-90%) skewX(-10deg);
  transform-origin: center center;
  will-change: transform, opacity;
}

.splash-brand.is-ready::before {
  animation: splashSmoothSweep 2.8s cubic-bezier(0.4, 0, 0.2, 1) 0.6s both;
}

/* Opacity rises smoothly as the streak enters the text, holds across the
   letters, then fades out before it exits — no off-screen pop-in. */
@keyframes splashSmoothSweep {
  0% {
    transform: translateX(-90%) skewX(-10deg);
    opacity: 0;
  }
  18% {
    opacity: 0;
  }
  35% {
    opacity: 0.85;
  }
  50% {
    opacity: 1;
  }
  68% {
    opacity: 0.45;
  }
  85% {
    opacity: 0;
  }
  100% {
    transform: translateX(380%) skewX(-10deg);
    opacity: 0;
  }
}

/* Secondary glow layer — softer, wider */
.splash-brand::after {
  content: "";
  position: absolute;
  top: -30%;
  left: 0;
  width: 25%;
  height: 160%;
  background: radial-gradient(
    ellipse at center,
    rgba(123, 220, 255, 0.12),
    rgba(141, 230, 214, 0.06) 35%,
    rgba(123, 220, 255, 0.02) 55%,
    transparent 75%
  );
  filter: blur(24px);
  pointer-events: none;
  opacity: 0;
  transform: translateX(-90%);
  will-change: transform, opacity;
}

.splash-brand.is-ready::after {
  animation: splashGlowSmoothSweep 2.8s cubic-bezier(0.4, 0, 0.2, 1) 0.6s both;
}

/* Soft glow halo, leads the streak slightly and fades earlier so it never
   lingers — peaks gently as it crosses the letters. */
@keyframes splashGlowSmoothSweep {
  0% {
    transform: translateX(-90%);
    opacity: 0;
  }
  18% {
    opacity: 0;
  }
  35% {
    opacity: 0.55;
  }
  50% {
    opacity: 0.65;
  }
  68% {
    opacity: 0.25;
  }
  85% {
    opacity: 0;
  }
  100% {
    transform: translateX(380%);
    opacity: 0;
  }
}

/* Tertiary: Micro-sparkle trail */
.splash-brand .sparkle-trail {
  position: absolute;
  top: 50%;
  left: 0;
  width: 30%;
  height: 100%;
  transform: translateY(-50%) translateX(-90%);
  pointer-events: none;
  opacity: 0;
  background:
    radial-gradient(circle 2px at 15% 40%, rgba(255, 255, 255, 0.7), transparent),
    radial-gradient(circle 1.5px at 35% 55%, rgba(123, 220, 255, 0.5), transparent),
    radial-gradient(circle 2px at 55% 35%, rgba(255, 255, 255, 0.8), transparent),
    radial-gradient(circle 1.5px at 75% 60%, rgba(141, 230, 214, 0.4), transparent),
    radial-gradient(circle 2px at 90% 45%, rgba(255, 255, 255, 0.6), transparent);
  will-change: transform, opacity;
}

.splash-brand.is-ready .sparkle-trail {
  animation: sparkleTrailSmooth 2.8s cubic-bezier(0.4, 0, 0.2, 1) 0.72s both;
}

/* Sparkles trail just behind the main streak — fade in with it, out before exit. */
@keyframes sparkleTrailSmooth {
  0%, 22% {
    opacity: 0;
    transform: translateY(-50%) translateX(-90%);
  }
  38% {
    opacity: 0.7;
  }
  52% {
    opacity: 1;
  }
  70% {
    opacity: 0.3;
  }
  85% {
    opacity: 0;
  }
  100% {
    opacity: 0;
    transform: translateY(-50%) translateX(430%);
  }
}

/* Subtitle / tagline */
.splash-tagline {
  font-family: var(--font-sans);
  font-size: clamp(0.65rem, 1.5vw, 0.85rem);
  font-weight: 400;
  letter-spacing: 0.25em;
  text-transform: uppercase;
  color: rgba(123, 220, 255, 0.5);
  opacity: 0;
  animation: splashTaglineIn 0.8s ease forwards;
  animation-delay: 1.8s;
}

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

/* Individual letters */
.splash-letter {
  display: inline-block;
  transform: scale(0.85) translateY(8px);
  animation: splashLetterIn 0.5s cubic-bezier(0.16, 1, 0.3, 1) forwards;
  will-change: opacity, transform;
}

.splash-letter:nth-child(1) { animation-delay: 0.2s; opacity: 0; }
.splash-letter:nth-child(2) { animation-delay: 0.35s; opacity: 0; }
.splash-letter:nth-child(3) { animation-delay: 0.5s; opacity: 0; }
.splash-letter:nth-child(4) { animation-delay: 0.65s; opacity: 0; }
.splash-letter:nth-child(5) { animation-delay: 0.8s; opacity: 0; }
.splash-letter:nth-child(6) { animation-delay: 0.95s; opacity: 0; }
.splash-letter:nth-child(7) { animation-delay: 1.1s; opacity: 0; }

@keyframes splashLetterIn {
  0% {
    opacity: 0;
    transform: scale(0.85) translateY(8px);
    filter: blur(4px);
  }
  60% { filter: blur(0); }
  100% {
    opacity: 1;
    transform: scale(1) translateY(0);
    filter: blur(0);
  }
}

/* Breathe animation after all letters appear */
.splash-brand.is-ready {
  animation: splashBreathe 3s ease-in-out infinite;
}

@keyframes splashBreathe {
  0%, 100% {
    opacity: 1;
    text-shadow:
      0 0 8px rgba(123, 220, 255, 0.6),
      0 0 20px rgba(123, 220, 255, 0.4),
      0 0 40px rgba(123, 220, 255, 0.25),
      0 0 80px rgba(123, 220, 255, 0.12),
      0 0 120px rgba(123, 220, 255, 0.06);
  }
  50% {
    opacity: 0.92;
    text-shadow:
      0 0 12px rgba(123, 220, 255, 0.7),
      0 0 28px rgba(123, 220, 255, 0.5),
      0 0 50px rgba(123, 220, 255, 0.3),
      0 0 100px rgba(123, 220, 255, 0.15),
      0 0 140px rgba(123, 220, 255, 0.08);
  }
}

/* Progress bar */
.splash-progress {
  position: absolute;
  bottom: 0;
  left: 0;
  right: 0;
  height: 2px;
  background: rgba(123, 220, 255, 0.08);
  z-index: 3;
  overflow: hidden;
}

.splash-progress-bar {
  height: 100%;
  width: 100%;
  transform-origin: left;
  transform: scaleX(0);
  background: linear-gradient(90deg, rgba(123, 220, 255, 0.3), var(--accent), rgba(141, 230, 214, 0.5));
  box-shadow: 0 0 12px rgba(123, 220, 255, 0.4), 0 0 24px rgba(123, 220, 255, 0.2);
  animation: splashProgressFill 2.5s cubic-bezier(0.4, 0, 0.2, 1) forwards;
  animation-delay: 0.3s;
  border-radius: 0 1px 1px 0;
  will-change: transform;
}

@keyframes splashProgressFill {
  0%   { transform: scaleX(0); }
  20%  { transform: scaleX(0.25); }
  50%  { transform: scaleX(0.6); }
  80%  { transform: scaleX(0.85); }
  100% { transform: scaleX(1); }
}

/* Mobile adjustments */
@media (max-width: 480px) {
  .splash-brand {
    font-size: clamp(2rem, 10vw, 3rem);
    padding: 12px 20px;
    letter-spacing: 0.05em;
  }

  .splash-tagline {
    font-size: 0.6rem;
    letter-spacing: 0.2em;
  }

  .splash-grid {
    background-image:
      repeating-linear-gradient(0deg, transparent, transparent 39px, rgba(123, 220, 255, 0.03) 39px, rgba(123, 220, 255, 0.03) 40px),
      repeating-linear-gradient(90deg, transparent, transparent 39px, rgba(123, 220, 255, 0.03) 39px, rgba(123, 220, 255, 0.03) 40px);
  }
}

/* Reduced motion */
@media (prefers-reduced-motion: reduce) {
  .splash-bg,
  .splash-particle,
  .splash-orb,
  .splash-progress-bar,
  .splash-grid {
    animation-duration: 0.01ms !important;
    animation-iteration-count: 1 !important;
  }

  .splash-letter {
    animation-duration: 0.01ms !important;
    opacity: 1;
    transform: scale(1) translateY(0);
    filter: blur(0);
  }

  .splash-brand.is-ready {
    animation: none !important;
  }

  .splash-brand.is-ready::before {
    animation: none !important;
    opacity: 0;
  }

  .splash-tagline {
    animation: none !important;
    opacity: 1;
  }

  .splash-progress-bar {
    width: 100%;
  }
}

/* ============================================================
   Splash perf on phones/tablets — the blurred orbs (filter:blur 20px x3)
   are the heaviest part of the intro; drop them on small screens and on
   coarse/low-power devices so the cyno.gg reveal stays smooth.
   ============================================================ */
@media (max-width: 820px) {
  .splash-orb { display: none; }
  /* Keep only the first few particles on phones. */
  .splash-particle:nth-child(n+5) { display: none; }

  /* Freeze the heavy mesh gradient animation — still looks rich, no GPU churn */
  .splash-bg {
    animation: none;
    transform: scale(1.02);
    opacity: 0.96;
  }

  /* Kill the grid pulse — static grid is fine */
  .splash-grid {
    animation: none;
    opacity: 0.55;
  }

  /* Simplify the breathe: 2 text-shadow layers instead of 5 */
  .splash-brand.is-ready {
    animation: splashBreatheLite 3s ease-in-out infinite;
  }

  /* Remove the secondary glow sweep and sparkle trail (saves 2 composited layers) */
  .splash-brand.is-ready::after,
  .splash-brand.is-ready .sparkle-trail {
    animation: none !important;
    display: none;
  }

  /* Simplify the primary sweep — shorter, less blur */
  .splash-brand::before {
    filter: none;
  }
}

@keyframes splashBreatheLite {
  0%, 100% {
    opacity: 1;
    text-shadow:
      0 0 8px rgba(123, 220, 255, 0.5),
      0 0 30px rgba(123, 220, 255, 0.2);
  }
  50% {
    opacity: 0.94;
    text-shadow:
      0 0 12px rgba(123, 220, 255, 0.6),
      0 0 40px rgba(123, 220, 255, 0.25);
  }
}

/* Touch devices of any size: lighter splash (orbs are decorative). */
@media (hover: none) {
  .splash-orb { display: none; }
}

/* Phones: letter-in blur is expensive — skip it */
@media (max-width: 820px) {
  .splash-letter {
    filter: none !important;
  }
  @keyframes splashLetterIn {
    0% {
      opacity: 0;
      transform: scale(0.85) translateY(8px);
    }
    100% {
      opacity: 1;
      transform: scale(1) translateY(0);
    }
  }
}

/* Also strip the landing background orbs/particles/mesh on mobile */
@media (max-width: 820px) {
  .landing-bg-shell .splash-orb { display: none; }
  .landing-bg-shell .splash-bg {
    animation: none;
    transform: scale(1.02);
    opacity: 0.96;
  }
  .landing-bg-shell .splash-grid {
    animation: none;
    opacity: 0.55;
  }
}

/* Make sure the splash always fills the viewport incl. mobile browser chrome. */
.splash-screen { min-height: 100vh; min-height: 100dvh; }