/* ==================================================
   MAJI PC REPAIR — ANIMATED TECH BACKGROUND
   ================================================== */

html,
body {
  margin: 0;
  padding: 0;
  min-height: 100%;
}

body {
  position: relative;
  min-height: 100vh;
  overflow-x: hidden;
  background: #081120;
  color: #ffffff;
}

/* Keep all page content above the animation */
body > *:not(.animated-bg) {
  position: relative;
  z-index: 2;
}

/* Full-screen background container */
.animated-bg {
  position: fixed;
  inset: 0;
  z-index: 0;
  overflow: hidden;
  pointer-events: none;
  background:
    linear-gradient(
      135deg,
      #07101e 0%,
      #0b192a 45%,
      #10182b 100%
    );
}

/* Moving colored glow */
.gradient-layer {
  position: absolute;
  inset: -25%;
  background:
    radial-gradient(
      circle at 20% 20%,
      rgba(0, 255, 200, 0.15),
      transparent 30%
    ),
    radial-gradient(
      circle at 80% 30%,
      rgba(0, 140, 255, 0.17),
      transparent 30%
    ),
    radial-gradient(
      circle at 50% 80%,
      rgba(140, 40, 255, 0.12),
      transparent 35%
    );
  filter: blur(35px);
  animation: majiGradientMove 18s ease-in-out infinite alternate;
}

/* Subtle scrolling computer grid */
.grid-layer {
  position: absolute;
  inset: -40px 0 0 0;
  background-image:
    linear-gradient(
      rgba(255, 255, 255, 0.045) 1px,
      transparent 1px
    ),
    linear-gradient(
      90deg,
      rgba(255, 255, 255, 0.045) 1px,
      transparent 1px
    );
  background-size: 40px 40px;
  opacity: 0.38;
  animation: majiGridMove 12s linear infinite;
  -webkit-mask-image:
    linear-gradient(
      to bottom,
      rgba(0, 0, 0, 0.95),
      rgba(0, 0, 0, 0.25)
    );
  mask-image:
    linear-gradient(
      to bottom,
      rgba(0, 0, 0, 0.95),
      rgba(0, 0, 0, 0.25)
    );
}

/* Floating glowing objects */
.orb {
  position: absolute;
  border-radius: 50%;
  filter: blur(24px);
  opacity: 0.48;
  will-change: transform;
}

.orb1 {
  width: 240px;
  height: 240px;
  top: 8%;
  left: 6%;
  background: rgba(0, 255, 200, 0.27);
  animation: majiOrbOne 16s ease-in-out infinite;
}

.orb2 {
  width: 320px;
  height: 320px;
  top: 52%;
  right: 7%;
  background: rgba(0, 140, 255, 0.24);
  animation: majiOrbTwo 20s ease-in-out infinite;
}

.orb3 {
  width: 190px;
  height: 190px;
  bottom: 7%;
  left: 35%;
  background: rgba(145, 45, 255, 0.21);
  animation: majiOrbThree 14s ease-in-out infinite;
}

/* Optional glass effect for common site sections */
.hero,
.card,
.service-card,
.services,
.contact,
.about,
section {
  position: relative;
  z-index: 2;
}

/* Background animations */
@keyframes majiGradientMove {
  0% {
    transform: translate3d(0, 0, 0) scale(1);
  }

  100% {
    transform: translate3d(-3%, 2%, 0) scale(1.08);
  }
}

@keyframes majiGridMove {
  0% {
    transform: translateY(0);
  }

  100% {
    transform: translateY(40px);
  }
}

@keyframes majiOrbOne {
  0%,
  100% {
    transform: translate3d(0, 0, 0);
  }

  50% {
    transform: translate3d(65px, 45px, 0);
  }
}

@keyframes majiOrbTwo {
  0%,
  100% {
    transform: translate3d(0, 0, 0);
  }

  50% {
    transform: translate3d(-75px, -45px, 0);
  }
}

@keyframes majiOrbThree {
  0%,
  100% {
    transform: translate3d(0, 0, 0);
  }

  50% {
    transform: translate3d(45px, -65px, 0);
  }
}

/* Accessibility and lower-power devices */
@media (prefers-reduced-motion: reduce) {
  .gradient-layer,
  .grid-layer,
  .orb {
    animation: none;
  }
}

/* Mobile optimization */
@media (max-width: 768px) {
  .grid-layer {
    background-size: 32px 32px;
  }

  .orb1 {
    width: 170px;
    height: 170px;
  }

  .orb2 {
    width: 220px;
    height: 220px;
  }

  .orb3 {
    width: 135px;
    height: 135px;
  }
}


/* ==================================================
   MAJI PC REPAIR — ASCII KALI TOOL BACKGROUND
   ================================================== */

body {
  position: relative;
  min-height: 100vh;
  overflow-x: hidden;
  background:
    radial-gradient(circle at top, #10283a 0%, #07121d 45%, #03070d 100%);
}

/* Keep normal website content above the ASCII layer */
body > *:not(.ascii-cyber-bg):not(.animated-bg) {
  position: relative;
  z-index: 5;
}

.ascii-cyber-bg {
  position: fixed;
  inset: 0;
  z-index: 1;
  overflow: hidden;
  pointer-events: none;
  user-select: none;
  opacity: 0.52;
  perspective: 900px;
}

.ascii-logo {
  position: absolute;
  margin: 0;
  white-space: pre;
  font-family:
    "Courier New",
    "Lucida Console",
    monospace;
  font-weight: 700;
  line-height: 1.02;
  letter-spacing: 0.04em;
  color: rgba(76, 255, 220, 0.72);
  text-shadow:
    0 0 4px rgba(0, 255, 214, 0.9),
    0 0 10px rgba(0, 255, 214, 0.65),
    0 0 24px rgba(0, 150, 255, 0.5);
  filter: drop-shadow(0 0 8px rgba(0, 255, 214, 0.35));
  mix-blend-mode: screen;
  animation:
    asciiFloat var(--float-time) ease-in-out infinite alternate,
    asciiFlicker var(--flicker-time) steps(2, end) infinite;
  transform-origin: center;
  will-change: transform, opacity, filter;
}

.ascii-logo::before,
.ascii-logo::after {
  content: attr(data-text);
  position: absolute;
  inset: 0;
  white-space: pre;
  overflow: hidden;
  pointer-events: none;
}

.ascii-logo::before {
  color: rgba(0, 170, 255, 0.55);
  text-shadow:
    -2px 0 7px rgba(0, 170, 255, 0.85);
  transform: translateX(-2px);
  clip-path: inset(0 0 58% 0);
  animation: asciiGlitchTop 3.2s steps(2, end) infinite;
}

.ascii-logo::after {
  color: rgba(186, 70, 255, 0.45);
  text-shadow:
    2px 0 7px rgba(186, 70, 255, 0.85);
  transform: translateX(2px);
  clip-path: inset(56% 0 0 0);
  animation: asciiGlitchBottom 2.7s steps(2, end) infinite;
}

.ascii-logo:nth-child(3n) {
  color: rgba(62, 174, 255, 0.72);
  text-shadow:
    0 0 5px rgba(62, 174, 255, 1),
    0 0 14px rgba(62, 174, 255, 0.75),
    0 0 30px rgba(110, 40, 255, 0.45);
}

.ascii-logo:nth-child(4n) {
  color: rgba(181, 85, 255, 0.62);
  text-shadow:
    0 0 5px rgba(181, 85, 255, 0.95),
    0 0 14px rgba(181, 85, 255, 0.7),
    0 0 28px rgba(0, 180, 255, 0.4);
}

.ascii-scanline {
  position: fixed;
  inset: 0;
  z-index: 2;
  pointer-events: none;
  background:
    repeating-linear-gradient(
      to bottom,
      rgba(255,255,255,0.018) 0,
      rgba(255,255,255,0.018) 1px,
      transparent 1px,
      transparent 4px
    );
  animation: scanlineDrift 9s linear infinite;
}

.ascii-noise {
  position: fixed;
  inset: 0;
  z-index: 2;
  pointer-events: none;
  opacity: 0.08;
  background-image:
    radial-gradient(circle, rgba(255,255,255,0.8) 0.6px, transparent 0.8px);
  background-size: 8px 8px;
  animation: noiseShift 0.35s steps(2, end) infinite;
}

@keyframes asciiFloat {
  0% {
    transform:
      translate3d(0, 0, 0)
      rotate(var(--rotate-start))
      scale(var(--scale));
  }

  50% {
    transform:
      translate3d(var(--drift-x), var(--drift-y), 0)
      rotate(0deg)
      scale(calc(var(--scale) * 1.04));
  }

  100% {
    transform:
      translate3d(
        calc(var(--drift-x) * -0.6),
        calc(var(--drift-y) * -0.7),
        0
      )
      rotate(var(--rotate-end))
      scale(var(--scale));
  }
}

@keyframes asciiFlicker {
  0%, 14%, 18%, 22%, 56%, 100% {
    opacity: var(--base-opacity);
    filter:
      brightness(1)
      contrast(1.08)
      drop-shadow(0 0 8px rgba(0, 255, 214, 0.35));
  }

  15%, 21%, 57% {
    opacity: calc(var(--base-opacity) * 0.35);
    filter:
      brightness(1.8)
      contrast(1.5)
      blur(0.4px);
  }
}

@keyframes asciiGlitchTop {
  0%, 89%, 100% {
    transform: translateX(-2px);
    opacity: 0.25;
  }

  90% {
    transform: translateX(-7px);
    opacity: 0.75;
  }

  92% {
    transform: translateX(5px);
    opacity: 0.15;
  }

  94% {
    transform: translateX(-3px);
    opacity: 0.55;
  }
}

@keyframes asciiGlitchBottom {
  0%, 86%, 100% {
    transform: translateX(2px);
    opacity: 0.2;
  }

  87% {
    transform: translateX(8px);
    opacity: 0.65;
  }

  89% {
    transform: translateX(-5px);
    opacity: 0.2;
  }

  92% {
    transform: translateX(3px);
    opacity: 0.55;
  }
}

@keyframes scanlineDrift {
  from {
    transform: translateY(-20px);
  }

  to {
    transform: translateY(20px);
  }
}

@keyframes noiseShift {
  0% {
    transform: translate(0, 0);
  }

  25% {
    transform: translate(2px, -1px);
  }

  50% {
    transform: translate(-1px, 2px);
  }

  75% {
    transform: translate(1px, 1px);
  }

  100% {
    transform: translate(0, 0);
  }
}

@media (max-width: 768px) {
  .ascii-cyber-bg {
    opacity: 0.38;
  }

  .ascii-logo {
    font-size: 7px !important;
  }

  .ascii-logo:nth-child(n+7) {
    display: none;
  }
}

@media (prefers-reduced-motion: reduce) {
  .ascii-logo,
  .ascii-logo::before,
  .ascii-logo::after,
  .ascii-scanline,
  .ascii-noise {
    animation: none !important;
  }
}


/* FORCE ASCII BACKGROUND VISIBLE */

.animated-bg {
  opacity: 0.2 !important;
  z-index: 0 !important;
}

.ascii-cyber-bg {
  position: fixed !important;
  inset: 0 !important;
  z-index: 1 !important;
  display: block !important;
  visibility: visible !important;
  opacity: 0.9 !important;
  overflow: hidden !important;
  pointer-events: none !important;
  background: transparent !important;
}

.ascii-logo {
  position: absolute !important;
  display: block !important;
  visibility: visible !important;
  opacity: 0.72 !important;
  color: #00ffd5 !important;
  font-family: monospace !important;
  font-weight: 700 !important;
  white-space: pre !important;
  line-height: 1 !important;
  text-shadow:
    0 0 4px #00ffd5,
    0 0 10px #00ffd5,
    0 0 22px #008cff !important;
  z-index: 1 !important;
}

body > *:not(.ascii-cyber-bg):not(.animated-bg):not(.ascii-scanline):not(.ascii-noise) {
  position: relative;
  z-index: 5;
}

.ascii-scanline,
.ascii-noise {
  z-index: 2 !important;
}