:root {
  --accent-main: #333333; 
  --accent-light: #f8f4f2;
  --accent-text: #475569;
  --accent-secondary: #888;
  --special-accent: #bd5d3f;
  --text-dark: #1e293b;
  --background-color: #f5f6f6;
  --secondary-background: #f5f6f6;
  --dark-background-color: #161616;
  --font-primary: "Outfit", sans-serif;
  --line-height-hero: 1.15;
}

#loading-screen {
  position: fixed;
  top: 0;
  left: 0;
  width: 100vw;
  height: 100vh;
  height: 100lvh;
  background-color: var(--background-color);
  display: flex;
  justify-content: center;
  align-items: center;
  z-index: 9999;
  opacity: 1;
  
  /* 1. Moved the transition parameters here to keep it clean */
  transition: opacity 0.5s cubic-bezier(0.16, 1, 0.3, 1);
}

#loading-screen.fade-out {
  opacity: 0;
  
  /* CRITICAL: Drop mouse interactions instantly so hero elements */
  /* under the dissolving layer are immediately hoverable/interactive. */
  pointer-events: none; 
  
  /* THE SECRET SAUCE: Delays the background fade until the dots */
  /* are roughly 80% done with their exit stagger. */
  transition-delay: 200ms; 
}

.loader-matrix-container {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 16px;
  height: 100px;
  /* overflow: hidden; */
  padding: 0 10px;
}

.matrix-dot {
  width: 12px;
  height: 12px;
  background-color: var(--accent-main);
  border-radius: 50%;
  will-change: transform, opacity; /* Removed border-radius from will-change to optimize mobile GPU footprint */
  animation: matrixShift 2s infinite cubic-bezier(0.25, 1, 0.5, 1);
}

.matrix-dot:nth-child(1) { animation-delay: 0s; }
.matrix-dot:nth-child(2) { animation-delay: 0.15s; }
.matrix-dot:nth-child(4) { animation-delay: 0.45s; }

.matrix-dot.matrix-hero {
  background-color: var(--special-accent);
  animation: heroShift 2s infinite cubic-bezier(0.25, 1, 0.5, 1);
  animation-delay: 0.3s;
}

/* --- THE INVISIBLE LINE EXIT (Targeted by .elements-out) --- */
#loading-screen.elements-out .matrix-dot {
  animation: exitUp 1s forwards cubic-bezier(0.16, 1, 0.3, 1);
}

/* 3. FIXED SPECIFICITY: Prepend #loading-screen.elements-out to ensure */
/* these exit delays instantly smash the infinite loop delays on mobile. */
#loading-screen.elements-out .matrix-dot:nth-child(1) { animation-delay: 0s; }
#loading-screen.elements-out .matrix-dot:nth-child(2) { animation-delay: 0.07s; }
#loading-screen.elements-out .matrix-dot.matrix-hero { animation-delay: 0.14s; }
#loading-screen.elements-out .matrix-dot:nth-child(4) { animation-delay: 0.21s; }

@keyframes exitUp {
  to {
    transform: translateY(-60px);
    opacity: 0;
  }
}

/* --- THE REMASTERED MATRIX SHIFT --- */
@keyframes matrixShift {
  0%, 100% { transform: scale(1); opacity: 1; border-radius: 50%; }
  25% { transform: scaleX(1.8) scaleY(0.75); opacity: 0.9; }
  50% { transform: scale(0.55); border-radius: 2px; opacity: 0.6; }
  75% { transform: scale(1.15); border-radius: 50%; opacity: 1; }
}

@keyframes heroShift {
  0%, 100% { transform: scale(1) rotate(0deg); border-radius: 50%; opacity: 1; }
  25% { transform: scale(1.3) rotate(45deg); border-radius: 4px; opacity: 1; }
  50% { transform: scale(0.65) rotate(90deg); border-radius: 2px; opacity: 0.8; }
  75% { transform: scale(1.15) rotate(135deg); border-radius: 50%; opacity: 1; }
}