/* ========================================
   LOADING SCREEN
   ======================================== */
.loading-screen {
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  height: 100vh;
  background-color: #000000;
  z-index: 99999;
  display: flex;
  align-items: center;
  justify-content: center;
  opacity: 1;
}

.loading-screen.grunge-transition {
  animation: grungeErosionDissolve 1.2s linear forwards;
  -webkit-animation: grungeErosionDissolve 1.2s linear forwards;
}

.loading-screen.fade-out {
  opacity: 0;
  pointer-events: none;
}

.loading-screen.hidden {
  display: none;
}

.loading-content {
  display: flex;
  flex-direction: column;
  gap: 40px;
  align-items: center;
  transition: opacity 0.3s ease-out;
}

.loading-content.fade-out {
  opacity: 0;
}

/* Loading Line Container */
.loading-line {
  position: relative;
  display: flex;
  align-items: center;
  justify-content: center;
  overflow: hidden;
}

/* Loading Band (White Background Strip) */
.loading-band {
  position: absolute;
  top: 0;
  left: -100%;
  width: 100%;
  height: 100%;
  background-color: #ffffff;
  z-index: 1;
  opacity: 0;
}

.loading-line.animate-band .loading-band {
  animation: band-slide 0.6s cubic-bezier(0.33, 1, 0.68, 1) forwards;
}

/* Loading Text */
.loading-text {
  font-family: "Noto Sans JP", sans-serif;
  font-size: 100px;
  font-weight: 900;
  line-height: 0.8;
  color: #000000;
  white-space: nowrap;
  padding: 30px 80px;
  background-color: #ffffff;
  position: relative;
  z-index: 2;
  opacity: 0;
}

.loading-line.animate-text .loading-text {
  animation: text-reveal 0.5s cubic-bezier(0.33, 1, 0.68, 1) 0.3s forwards;
}

/* Static Overlay for Transition */
.loading-static-overlay {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background-image: url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" width="300" height="300" viewBox="0 0 300 300"><defs><filter id="staticNoise"><feTurbulence type="fractalNoise" baseFrequency="3.8" numOctaves="6" seed="2"/><feColorMatrix type="saturate" values="0"/></filter></defs><rect width="100%" height="100%" filter="url(%23staticNoise)" opacity="1"/></svg>');
  background-size: 200px 200px;
  mix-blend-mode: overlay;
  opacity: 0;
  pointer-events: none;
  z-index: 10000;
}

.loading-static-overlay.active {
  animation: static-transition 0.8s steps(12) forwards;
}

/* Grunge Noise Overlay - Follows loading screen mask */
.sand-particles-container {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  pointer-events: none;
  z-index: 1;
  background-image: url("data:image/svg+xml,%3Csvg viewBox='0 0 200 200' xmlns='http://www.w3.org/2000/svg'%3E%3Cfilter id='noiseFilter'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.9' numOctaves='4' /%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23noiseFilter)' /%3E%3C/svg%3E");
  background-size: 200px 200px;
  mix-blend-mode: overlay;
  opacity: 0;
}

.sand-particles-container.active {
  opacity: 0.8;
  animation: noise-flicker-loading 1.2s steps(8), noise-grain-move-loading 0.5s steps(4) infinite;
  -webkit-animation: noise-flicker-loading 1.2s steps(8), noise-grain-move-loading 0.5s steps(4) infinite;
}

/* Grunge Erosion Animation - Loading screen dissolves from center outward */
@keyframes grungeErosionDissolve {
  0% {
    -webkit-mask-image: radial-gradient(
      circle at center,
      black 0%,
      black 100%
    );
    mask-image: radial-gradient(
      circle at center,
      black 0%,
      black 100%
    );
    -webkit-mask-size: 100% 100%;
    mask-size: 100% 100%;
    -webkit-mask-position: center;
    mask-position: center;
  }

  20% {
    -webkit-mask-image: radial-gradient(
      circle at center,
      transparent 0%,
      transparent 8%,
      black 10%,
      black 100%
    );
    mask-image: radial-gradient(
      circle at center,
      transparent 0%,
      transparent 8%,
      black 10%,
      black 100%
    );
  }

  40% {
    -webkit-mask-image: radial-gradient(
      circle at center,
      transparent 0%,
      transparent 25%,
      black 30%,
      black 100%
    );
    mask-image: radial-gradient(
      circle at center,
      transparent 0%,
      transparent 25%,
      black 30%,
      black 100%
    );
  }

  65% {
    -webkit-mask-image: radial-gradient(
      circle at center,
      transparent 0%,
      transparent 48%,
      black 55%,
      black 100%
    );
    mask-image: radial-gradient(
      circle at center,
      transparent 0%,
      transparent 48%,
      black 55%,
      black 100%
    );
  }

  85% {
    -webkit-mask-image: radial-gradient(
      circle at center,
      transparent 0%,
      transparent 72%,
      black 80%
    );
    mask-image: radial-gradient(
      circle at center,
      transparent 0%,
      transparent 72%,
      black 80%
    );
  }

  100% {
    -webkit-mask-image: radial-gradient(
      circle at center,
      transparent 0%,
      transparent 100%
    );
    mask-image: radial-gradient(
      circle at center,
      transparent 0%,
      transparent 100%
    );
    opacity: 0;
  }
}

/* Noise grain movement animation */
@keyframes noise-grain-move-loading {
  0% {
    background-position: 0 0;
  }
  25% {
    background-position: 50px 50px;
  }
  50% {
    background-position: 100px 0;
  }
  75% {
    background-position: 50px -50px;
  }
  100% {
    background-position: 0 0;
  }
}

/* Noise flicker animation */
@keyframes noise-flicker-loading {
  0%,
  100% {
    opacity: 0.8;
  }
  25% {
    opacity: 0.6;
  }
  50% {
    opacity: 1;
  }
  75% {
    opacity: 0.7;
  }
}

/* Animations */
@keyframes band-slide {
  0% {
    left: -100%;
    opacity: 1;
  }
  100% {
    left: 0;
    opacity: 1;
  }
}

@keyframes text-reveal {
  0% {
    opacity: 0;
  }
  100% {
    opacity: 1;
  }
}

@keyframes static-transition {
  0% {
    opacity: 0;
  }
  10% {
    opacity: 0.4;
  }
  20% {
    opacity: 0.7;
  }
  30% {
    opacity: 0.5;
  }
  40% {
    opacity: 0.9;
  }
  50% {
    opacity: 0.6;
  }
  60% {
    opacity: 1;
  }
  70% {
    opacity: 0.8;
  }
  80% {
    opacity: 1;
  }
  90% {
    opacity: 0.9;
  }
  100% {
    opacity: 1;
  }
}

/* Responsive */
@media (max-width: 1440px) {
  .loading-text {
    font-size: 110px;
    padding: 25px 70px;
  }
}

@media (max-width: 1024px) {
  .loading-text {
    font-size: 80px;
    padding: 20px 50px;
  }

  .loading-content {
    gap: 30px;
  }
}

@media (max-width: 768px) {
  .loading-text {
    font-size: 60px;
    padding: 15px 40px;
  }

  .loading-content {
    gap: 24px;
  }
}

@media (max-width: 480px) {
  .loading-text {
    font-size: 44px;
    padding: 12px 0px;
  }

  .loading-content {
    gap: 20px;
  }
}

/* Pause all animations while loading screen is active */
body.loading-active * {
  animation-play-state: paused !important;
  -webkit-animation-play-state: paused !important;
}

/* Keep loading screen animations running */
body.loading-active .loading-screen,
body.loading-active .loading-screen * {
  animation-play-state: running !important;
  -webkit-animation-play-state: running !important;
}

/* Hide hero Japanese text during loading */
body.loading-active .hero-japanese-text {
  opacity: 0 !important;
  visibility: hidden !important;
  pointer-events: none !important;
}

/* Freeze line-parts in initial state during loading */
body.loading-active .hero-japanese-text .line-parts {
  transform: scaleX(0) !important;
  transition: none !important;
  animation: none !important;
}

body.loading-active .hero-japanese-text .line-parts::before {
  transform: translateX(-100%) !important;
  transition: none !important;
  animation: none !important;
}

body.loading-active .hero-japanese-text .line-parts::after {
  transform: translateX(0) !important;
  transition: none !important;
  animation: none !important;
}

body.loading-active .hero-japanese-text .line-parts.is-active {
  transform: scaleX(0) !important;
}

body.loading-active .hero-japanese-text .line-parts.is-active::before {
  transform: translateX(-100%) !important;
}

body.loading-active .hero-japanese-text .line-parts.is-active::after {
  transform: translateX(0) !important;
}

/* Hide ELECS text during loading (extra safeguard) */
body.loading-active .elecs-char {
  opacity: 0 !important;
  transform: translateY(20px) !important;
  transition: none !important;
}