/* ============================================
   PAC-MAN P2E — Main Stylesheet
   ============================================ */

/* ----- Base ----- */
body {
    background-image: url('assets/image/bg-1.png');
    background-size: cover;         
    background-position: center;    
    background-attachment: fixed;   
    background-repeat: no-repeat;
}

/* ----- Pixel Border ----- */
.pixel-border {
  box-shadow:
    0 -4px 0 0 #4d4732,
    0  4px 0 0 #4d4732,
   -4px 0 0 0 #4d4732,
    4px 0 0 0 #4d4732;
}

/* ----- Glow Effects ----- */
.glow-primary {
  text-shadow: 0 0 10px rgba(255, 215, 0, 0.7);
}

.glow-card {
  box-shadow: 0 0 20px rgba(255, 215, 0, 0.1);
  border: 1px solid rgba(255, 215, 0, 0.2);
}

/* ----- Glass Console ----- */
.glass-console {
  background: rgba(8, 11, 20, 0.85);
  backdrop-filter: blur(12px);
  border: 1px solid rgba(255, 255, 255, 0.1);
}

/* ----- Pixel Notch (corner accent) ----- */
.pixel-notch::before {
  content: '';
  position: absolute;
  top: 0;
  left: 0;
  width: 12px;
  height: 12px;
  background: #ffd700;
  clip-path: polygon(0 0, 100% 0, 0 100%);
}

/* ----- Ghost Pulse Animation ----- */
.ghost-pulse {
  animation: ghostPulse 2s cubic-bezier(0.4, 0, 0.6, 1) infinite;
}

@keyframes ghostPulse {
  0%,  100% { opacity: 1;  transform: scale(1);    }
  50%        { opacity: .7; transform: scale(1.05); }
}

/* ----- Maze / Grid Background ----- */
.maze-scroll {
  background-image:
    linear-gradient(rgba(255, 215, 0, 0.05) 1px, transparent 1px),
    linear-gradient(90deg, rgba(255, 215, 0, 0.05) 1px, transparent 1px);
  background-size: 40px 40px;
}

/* ----- Scroll Reveal ----- */
.reveal {
  opacity: 0;
  transform: translateY(30px);
  transition: opacity 0.8s ease-out, transform 0.8s ease-out;
}

.reveal.active {
  opacity: 1;
  transform: translateY(0);
}

/* ----- Loading Screen ----- */
#loader {
  background-color: #050505;
  transition: opacity 0.8s ease-out;
}

/* ----- Pac-Man Loader (bouncing character) ----- */
.pacmon-loader {
  width: 50px;
  height: 50px;
  background: #ffd90000;
  border-radius: 50%;
  position: absolute;
  animation: movePacman 4s linear infinite;
}

@keyframes movePacman {
  0%   { left: -100px; }
  100% { left: 110%;   }
}

/* ----- WebGL / Shader Canvas ----- */
#shader-canvas-hero,
#shader-canvas-vision {
  display: block;
  width: 100%;
  height: 100%;
}