/* Visual effects — grid, canvas, scanline */

.hero-canvas {
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  pointer-events: none;
  z-index: 0;
  opacity: 0.28;
}

.page-home .hero-canvas {
  opacity: 0.38;
}

body:not(.page-home) .hero-canvas {
  opacity: 0.14;
  height: 40vh;
}

.hero-grid {
  position: absolute;
  inset: 0;
  background-image:
    linear-gradient(rgba(201, 168, 108, 0.035) 1px, transparent 1px),
    linear-gradient(90deg, rgba(201, 168, 108, 0.035) 1px, transparent 1px);
  background-size: 48px 48px;
  transform: perspective(500px) rotateX(60deg) scale(2);
  transform-origin: center top;
  mask-image: linear-gradient(to bottom, black 0%, transparent 70%);
  animation: gridDrift 24s linear infinite;
}

@keyframes gridDrift {
  0% { background-position: 0 0; }
  100% { background-position: 0 48px; }
}

.scanline {
  position: fixed;
  inset: 0;
  pointer-events: none;
  z-index: 9999;
  background: repeating-linear-gradient(
    0deg,
    transparent,
    transparent 3px,
    rgba(20, 17, 16, 0.025) 3px,
    rgba(20, 17, 16, 0.025) 5px
  );
  opacity: 0.18;
}

@media (prefers-reduced-motion: reduce) {
  .hero-grid {
    animation: none;
  }

  .scanline {
    display: none;
  }

  .hero-canvas {
    display: none;
  }
}