/* Splash Screen Styles using website's exact color scheme */
.splash-screen {
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background: radial-gradient(circle at top left, #1a1a1a, #000);
  background-attachment: fixed;
  background-size: cover;
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  z-index: 9999;
  transition: all var(--transition-2);
  overflow: hidden;
}

/* Animated Background Particles using website's exact colors */
.splash-screen::before {
  content: '';
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background: radial-gradient(circle farthest-corner at 40% 40%, rgba(255,255,255,0.05), transparent 70%);
  animation: backgroundShift 8s ease-in-out infinite;
  z-index: 1;
}

.splash-content {
  position: relative;
  z-index: 2;
  text-align: center;
  animation: slideUp 1s ease-out 0.5s both;
  max-width: 100%;
  padding: var(--space-lg);
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
}

.splash-logo {
  width: 180px;
  height: 180px;
  margin-bottom: var(--space-4xl);
  border-radius: 50%;
  box-shadow: 
    0 0 30px hsl(45, 100%, 72%),
    0 0 60px hsl(45, 54%, 58%),
    -4px 8px 24px hsla(0, 0%, 0%, 0.25);
  animation: logoGlow 3s ease-in-out infinite, logoFloat 4s ease-in-out infinite;
  transition: all var(--transition-1);
}

.splash-title {
  font-family: var(--ff-poppins);
  font-size: var(--fs-1);
  font-weight: var(--fw-600);
  color: hsl(0, 0%, 100%);
  margin-bottom: var(--space-sm);
  background: linear-gradient(to right, hsl(45, 100%, 72%), hsl(35, 100%, 68%));
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
  background-clip: text;
  animation: titleGlow 2s ease-in-out infinite alternate;
  letter-spacing: 2px;
  text-transform: uppercase;
}

.splash-subtitle {
  font-size: var(--fs-4);
  color: hsla(0, 0%, 84%, 0.7);
  margin-bottom: var(--space-5xl);
  font-weight: var(--fw-300);
  letter-spacing: 1px;
}

.splash-loading {
  width: 85%;
  max-width: 400px;
  height: 6px;
  background: hsl(240, 2%, 13%);
  border-radius: 6px;
  overflow: hidden;
  position: relative;
  box-shadow: inset 0 2px 4px hsl(0, 0%, 7%);
  border: 1px solid hsl(0, 0%, 22%);
}

.splash-loading-bar {
  position: absolute;
  left: 0;
  top: 0;
  height: 100%;
  width: 0%;
  background: linear-gradient(to right, hsl(45, 100%, 72%), hsl(35, 100%, 68%));
  border-radius: 6px;
  animation: loading 3s forwards, shimmer 2s ease-in-out infinite;
  box-shadow: 0 0 15px hsl(45, 100%, 72%);
}

.loading-text {
  margin-top: var(--space-xl);
  color: hsla(0, 0%, 84%, 0.7);
  font-size: var(--fs-6);
  font-weight: var(--fw-300);
  animation: fadeInOut 1.5s ease-in-out infinite;
}

/* Enhanced Animations */
@keyframes backgroundShift {
  0%, 100% { transform: translateX(0) translateY(0); }
  25% { transform: translateX(-10px) translateY(-5px); }
  50% { transform: translateX(5px) translateY(-10px); }
  75% { transform: translateX(-5px) translateY(5px); }
}

@keyframes logoGlow {
  0%, 100% { 
    box-shadow: 
      0 0 30px hsl(45, 100%, 72%),
      0 0 60px hsl(45, 54%, 58%),
      -4px 8px 24px hsla(0, 0%, 0%, 0.25);
  }
  50% { 
    box-shadow: 
      0 0 40px hsl(45, 100%, 72%),
      0 0 80px hsl(45, 54%, 58%),
      0 16px 40px hsla(0, 0%, 0%, 0.25);
  }
}

@keyframes logoFloat {
  0%, 100% { transform: translateY(0px) rotate(0deg); }
  50% { transform: translateY(-10px) rotate(2deg); }
}

@keyframes titleGlow {
  0% { 
    filter: drop-shadow(0 0 10px hsl(45, 100%, 72%));
  }
  100% { 
    filter: drop-shadow(0 0 20px hsl(45, 100%, 72%));
  }
}

@keyframes loading {
  0% { width: 0%; }
  100% { width: 100%; }
}

@keyframes shimmer {
  0% { background-position: -200% 0; }
  100% { background-position: 200% 0; }
}

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

@keyframes fadeInOut {
  0%, 100% { opacity: 0.7; }
  50% { opacity: 1; }
}

/* Enhanced Responsive Design */

/* Large Desktop (1200px+) */
@media (min-width: 1200px) {
  .splash-logo {
    width: 220px;
    height: 220px;
    margin-bottom: var(--space-5xl);
  }
  
  .splash-title {
    font-size: 3.5rem;
    letter-spacing: 4px;
    margin-bottom: var(--space-lg);
  }
  
  .splash-subtitle {
    font-size: 1.4rem;
    margin-bottom: 60px;
  }
  
  .splash-loading {
    max-width: 500px;
    height: 8px;
  }
  
  .loading-text {
    font-size: var(--fs-5);
    margin-top: var(--space-2xl);
  }
}

/* Desktop (1024px - 1199px) */
@media (min-width: 1024px) and (max-width: 1199px) {
  .splash-logo {
    width: 200px;
    height: 200px;
    margin-bottom: var(--space-4xl);
  }
  
  .splash-title {
    font-size: 3rem;
    letter-spacing: 3px;
  }
  
  .splash-subtitle {
    font-size: 1.2rem;
    margin-bottom: 50px;
  }
  
  .splash-loading {
    max-width: 450px;
    height: 7px;
  }
}

/* Tablet Landscape (768px - 1023px) */
@media (min-width: 768px) and (max-width: 1023px) {
  .splash-logo {
    width: 170px;
    height: 170px;
    margin-bottom: var(--space-3xl);
  }
  
  .splash-title {
    font-size: 2.5rem;
    letter-spacing: 2px;
  }
  
  .splash-subtitle {
    font-size: 1.1rem;
    margin-bottom: 45px;
  }
  
  .splash-loading {
    max-width: 400px;
    height: 6px;
  }
  
  .loading-text {
    font-size: var(--fs-5);
  }
}

/* Tablet Portrait (481px - 767px) */
@media (min-width: 481px) and (max-width: 767px) {
  .splash-logo {
    width: 150px;
    height: 150px;
    margin-bottom: var(--space-2xl);
  }
  
  .splash-title {
    font-size: 2rem;
    letter-spacing: 1.5px;
  }
  
  .splash-subtitle {
    font-size: var(--fs-4);
    margin-bottom: 40px;
  }
  
  .splash-loading {
    width: 90%;
    max-width: 350px;
    height: 6px;
  }
  
  .loading-text {
    font-size: var(--fs-6);
    margin-top: var(--space-lg);
  }
}

/* Mobile Landscape (480px - 767px) */
@media (max-width: 767px) and (orientation: landscape) {
  .splash-content {
    flex-direction: row;
    align-items: center;
    gap: var(--space-2xl);
    text-align: left;
  }
  
  .splash-logo {
    width: 100px;
    height: 100px;
    margin-bottom: 0;
    flex-shrink: 0;
  }
  
  .splash-title {
    font-size: 1.8rem;
    letter-spacing: 1px;
    margin-bottom: var(--space-xs);
  }
  
  .splash-subtitle {
    font-size: var(--fs-6);
    margin-bottom: var(--space-lg);
  }
  
  .splash-loading {
    width: 100%;
    max-width: 250px;
    height: 5px;
  }
  
  .loading-text {
    font-size: var(--fs-7);
    margin-top: var(--space-sm);
  }
}

/* Mobile Portrait (320px - 480px) */
@media (max-width: 480px) {
  .splash-logo {
    width: 120px;
    height: 120px;
    margin-bottom: var(--space-xl);
  }
  
  .splash-title {
    font-size: 1.6rem;
    letter-spacing: 1px;
    margin-bottom: var(--space-xs);
  }
  
  .splash-subtitle {
    font-size: var(--fs-6);
    margin-bottom: var(--space-2xl);
    padding: 0 var(--space-md);
    line-height: 1.4;
  }
  
  .splash-loading {
    width: 90%;
    max-width: 300px;
    height: 5px;
  }
  
  .loading-text {
    font-size: var(--fs-7);
    margin-top: var(--space-md);
    padding: 0 var(--space-sm);
  }
}

/* Very Small Mobile (320px and below) */
@media (max-width: 320px) {
  .splash-logo {
    width: 100px;
    height: 100px;
    margin-bottom: var(--space-lg);
  }
  
  .splash-title {
    font-size: 1.4rem;
    letter-spacing: 0.5px;
  }
  
  .splash-subtitle {
    font-size: var(--fs-7);
    margin-bottom: var(--space-xl);
  }
  
  .splash-loading {
    width: 95%;
    height: 4px;
  }
  
  .loading-text {
    font-size: var(--fs-8);
  }
}

/* Touch Device Optimizations */
@media (hover: none) and (pointer: coarse) {
  .splash-logo {
    animation-duration: 4s;
  }
  
  .splash-title {
    animation-duration: 3s;
  }
}

/* High DPI Displays */
@media (-webkit-min-device-pixel-ratio: 2), (min-resolution: 192dpi) {
  .splash-logo {
    image-rendering: -webkit-optimize-contrast;
    image-rendering: crisp-edges;
  }
}

/* Performance Optimizations */
.splash-screen {
  will-change: opacity;
  transform: translateZ(0);
  backface-visibility: hidden;
}

.splash-logo {
  will-change: transform, box-shadow;
  transform: translateZ(0);
}

.splash-loading-bar {
  will-change: width, background-position;
}

/* Smooth scrolling for mobile */
.splash-screen {
  -webkit-overflow-scrolling: touch;
  overscroll-behavior: contain;
}

/* Prevent zoom on mobile */
@media (max-width: 768px) {
  .splash-screen {
    touch-action: manipulation;
  }
}

/* Better text rendering */
.splash-title,
.splash-subtitle,
.loading-text {
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  text-rendering: optimizeLegibility;
}

/* High contrast mode support */
@media (prefers-contrast: high) {
  .splash-screen {
    background: hsl(240, 2%, 12%);
  }
  
  .splash-title {
    color: hsl(0, 0%, 100%);
    text-shadow: 2px 2px 4px hsl(0, 0%, 7%);
  }
  
  .splash-loading {
    border: 2px solid hsl(45, 100%, 72%);
  }
}

/* Reduced motion support */
@media (prefers-reduced-motion: reduce) {
  .splash-logo,
  .splash-title,
  .splash-loading-bar,
  .loading-text {
    animation: none;
  }
  
  .splash-content {
    animation: slideUp 0.5s ease-out both;
  }
  
  .splash-screen::before {
    animation: none;
  }
}