/* ===========================================
   INTERACTIVE GRID - SHARED COMPONENT
   Subtle membrane effect with mouse interaction
   =========================================== */

/* Grid Container Base */
.interactive-grid-container {
  position: absolute;
  inset: 0;
  overflow: hidden;
  pointer-events: auto;
  z-index: 1;

  /* 3D context for child tiles */
  perspective: 1000px;
  transform-style: preserve-3d;

  /* Smooth fade-out at edges - no color, just transparency */
  -webkit-mask-image:
    linear-gradient(to bottom,
      black 0%,
      black 60%,
      transparent 100%);
  mask-image:
    linear-gradient(to bottom,
      black 0%,
      black 60%,
      transparent 100%);
}

/* Subtle static grid pattern - very faint */
.interactive-grid-container::before {
  content: '';
  position: absolute;
  inset: -20%;
  background-image:
    linear-gradient(rgba(139, 92, 246, 0.05) 1px, transparent 1px),
    linear-gradient(90deg, rgba(139, 92, 246, 0.05) 1px, transparent 1px);
  background-size: 80px 80px;
  background-position: center top;
  opacity: 0.6;
  pointer-events: none;
  /* Inherits the mask from parent - fades with the container */
}

/* Active grid area where tiles are rendered */
.interactive-grid-area {
  position: absolute;
  inset: -120px;
  pointer-events: auto;
}

/* Individual Grid Tile - Subtle Membrane Effect */
.grid-tile {
  position: absolute;
  border: 1px solid rgba(139, 92, 246, 0.09);
  background: rgba(139, 92, 246, 0.03);
  border-radius: 2px;
  opacity: 1;
  transform: translateY(0) scale(1);
  /* Smooth, graceful transition */
  transition:
    transform 0.5s cubic-bezier(0.23, 1, 0.32, 1),
    opacity 0.5s cubic-bezier(0.23, 1, 0.32, 1),
    background 0.5s ease,
    border-color 0.5s ease;
  will-change: transform, opacity;
  pointer-events: none;
}

@keyframes grid-intro-wave {
  0% {
    transform: translateY(0) scale(1);
    opacity: 1;
  }
  40% {
    transform: translateY(var(--intro-pull, 14px)) scale(var(--intro-scale, 0.92));
    opacity: var(--intro-opacity, 0.7);
  }
  100% {
    transform: translateY(0) scale(1);
    opacity: 1;
  }
}

.grid-tile.intro-pulse {
  animation: grid-intro-wave var(--intro-duration, 1100ms) cubic-bezier(0.22, 0.61, 0.36, 1) both;
  animation-delay: var(--intro-delay, 0ms);
}

/* Tile active/hover state - subtle glow */
.grid-tile.active {
  background: rgba(139, 92, 246, 0.08);
  border-color: rgba(139, 92, 246, 0.15);
}

/* Disable grid interaction when reduced motion is preferred */
@media (prefers-reduced-motion: reduce) {
  .grid-tile {
    transition: none !important;
  }

  .interactive-grid-container {
    display: none;
  }
}

/* Hide on mobile for performance */
@media (max-width: 768px) {
  .interactive-grid-container {
    display: none;
  }
}