@import url('https://fonts.googleapis.com/css2?family=Orbitron:wght@400;700;900&display=swap');

/* MAJI-ME EFFECTS v1.0 */

/* LOADING SCREEN */
#maji-loader {
  position: fixed;
  top: 0; left: 0;
  width: 100vw; height: 100vh;
  background: #000;
  z-index: 99999;
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  transition: opacity 0.8s ease, visibility 0.8s ease;
}
#maji-loader.hide {
  opacity: 0;
  visibility: hidden;
  pointer-events: none;
}
#maji-loader .loader-logo {
  font-family: 'Orbitron', sans-serif;
  font-size: clamp(2rem, 6vw, 4rem);
  font-weight: 900;
  color: #fff;
  letter-spacing: 0.1em;
  animation: glitchText 2s infinite;
  position: relative;
}
#maji-loader .loader-logo::before,
#maji-loader .loader-logo::after {
  content: 'maji-me';
  position: absolute;
  top: 0; left: 0;
  width: 100%; height: 100%;
}
#maji-loader .loader-logo::before {
  color: #ff00de;
  animation: glitchBefore 2s infinite;
  clip-path: inset(0 0 65% 0);
}
#maji-loader .loader-logo::after {
  color: #00ffff;
  animation: glitchAfter 2s infinite;
  clip-path: inset(60% 0 0 0);
}
#maji-loader .loader-bar-container {
  width: 200px; height: 2px;
  background: rgba(255,255,255,0.1);
  margin-top: 40px;
  overflow: hidden;
}
#maji-loader .loader-bar {
  height: 100%; width: 0%;
  background: linear-gradient(90deg, #ff00de, #00ffff);
  transition: width 0.1s linear;
}
#maji-loader .loader-percent {
  font-family: 'Orbitron', sans-serif;
  color: rgba(255,255,255,0.5);
  font-size: 0.75rem;
  margin-top: 16px;
  letter-spacing: 0.3em;
}
#maji-loader .loader-tagline {
  color: rgba(255,255,255,0.3);
  font-size: 0.65rem;
  letter-spacing: 0.5em;
  text-transform: uppercase;
  margin-top: 30px;
}
@keyframes glitchText {
  0%, 100% { transform: translate(0); }
  20% { transform: translate(-2px, 2px); }
  40% { transform: translate(2px, -2px); }
  60% { transform: translate(-1px, -1px); }
  80% { transform: translate(1px, 1px); }
}
@keyframes glitchBefore {
  0%, 100% { transform: translate(0); }
  25% { transform: translate(3px, 0); }
  50% { transform: translate(-3px, 0); }
  75% { transform: translate(1px, 0); }
}
@keyframes glitchAfter {
  0%, 100% { transform: translate(0); }
  25% { transform: translate(-3px, 0); }
  50% { transform: translate(3px, 0); }
  75% { transform: translate(-1px, 0); }
}

/* CUSTOM CURSOR */
#custom-cursor {
  position: fixed;
  width: 12px; height: 12px;
  background: radial-gradient(circle, #ff0033 0%, rgba(255,0,51,0.6) 40%, transparent 70%);
  border-radius: 50%;
  pointer-events: none;
  z-index: 99998;
  mix-blend-mode: screen;
  transition: transform 0.05s ease;
  box-shadow: 0 0 15px 5px rgba(255,0,51,0.4), 0 0 30px 10px rgba(255,0,51,0.2);
}
#custom-cursor::after {
  content: '';
  position: absolute;
  top: 50%; left: 50%;
  transform: translate(-50%, -50%);
  width: 4px; height: 4px;
  background: #fff;
  border-radius: 50%;
  box-shadow: 0 0 6px 2px rgba(255,255,255,0.8);
}
.cursor-trail {
  position: fixed;
  width: 6px; height: 6px;
  background: rgba(255, 0, 51, 0.5);
  border-radius: 50%;
  pointer-events: none;
  z-index: 99997;
  mix-blend-mode: screen;
  animation: trailFade 0.6s ease forwards;
}
@keyframes trailFade {
  0% { opacity: 1; transform: scale(1); }
  100% { opacity: 0; transform: scale(0.1); }
}
body.custom-cursor-active,
body.custom-cursor-active a,
body.custom-cursor-active button,
body.custom-cursor-active input,
body.custom-cursor-active select,
body.custom-cursor-active textarea,
body.custom-cursor-active [class*="cursor"] {
  cursor: none !important;
}

/* SCROLL REVEAL */
.reveal {
  opacity: 0;
  transform: translateY(60px);
  transition: opacity 0.9s cubic-bezier(0.16, 1, 0.3, 1), transform 0.9s cubic-bezier(0.16, 1, 0.3, 1);
}
.reveal.revealed { opacity: 1; transform: translateY(0); }
.reveal-left {
  opacity: 0;
  transform: translateX(-80px);
  transition: opacity 0.9s cubic-bezier(0.16, 1, 0.3, 1), transform 0.9s cubic-bezier(0.16, 1, 0.3, 1);
}
.reveal-left.revealed { opacity: 1; transform: translateX(0); }
.reveal-right {
  opacity: 0;
  transform: translateX(80px);
  transition: opacity 0.9s cubic-bezier(0.16, 1, 0.3, 1), transform 0.9s cubic-bezier(0.16, 1, 0.3, 1);
}
.reveal-right.revealed { opacity: 1; transform: translateX(0); }
.reveal-scale {
  opacity: 0;
  transform: scale(0.85);
  transition: opacity 0.9s cubic-bezier(0.16, 1, 0.3, 1), transform 0.9s cubic-bezier(0.16, 1, 0.3, 1);
}
.reveal-scale.revealed { opacity: 1; transform: scale(1); }
.delay-1 { transition-delay: 0.1s !important; }
.delay-2 { transition-delay: 0.2s !important; }
.delay-3 { transition-delay: 0.3s !important; }
.delay-4 { transition-delay: 0.4s !important; }
.delay-5 { transition-delay: 0.5s !important; }

/* SECTION FLASH */
.section-flash { position: relative; }
.section-flash::before {
  content: '';
  position: absolute;
  top: 0; left: -100%;
  width: 100%; height: 3px;
  background: linear-gradient(90deg, transparent, #ff00de, #00ffff, transparent);
  animation: none;
}
.section-flash.flash-active::before {
  animation: sectionLineFlash 1s ease forwards;
}
@keyframes sectionLineFlash {
  0% { left: -100%; opacity: 1; }
  100% { left: 100%; opacity: 0; }
}
#home { position: relative; overflow: hidden; }
.count-up { display: inline-block; }
html { scroll-behavior: smooth; }