/* ============================================================================
   FSIA — INTERACTIVE GRID  (transparent surface · visible grid lines ·
   colored cell-blocks on hover-trail and click)
   ----------------------------------------------------------------------------
   Load AFTER dark-theme.css:
     <link rel="stylesheet" href="assets-new/css/grid-fx.css">
   And add the script before </body>:
     <script src="assets-new/js/grid-fx.js" defer></script>

   grid-fx.js auto-attaches to:  .form-card, .form-container, .form-side, <form>
   Add  data-grid-fx  to ANY other element to give it the same effect.
   ============================================================================ */

.grid-fx {
  --grid-size: 50px;
  /* cell size */
  --grid-line: rgba(150, 150, 150, .35);
  /* grid-line color (works on light or dark) */
  position: relative;
  isolation: isolate;
  overflow: hidden;
  /* keeps blocks inside rounded corners */
}

/* Transparent surface + visible grid lines.
   Doubled class (.grid-fx.grid-fx) outranks dark-theme.css's
   `background: var(--surface) !important`, so the fill becomes transparent. */
.grid-fx.grid-fx {
  background-color: transparent !important;
  background-image:
    linear-gradient(var(--grid-line) 1px, transparent 1px),
    linear-gradient(90deg, var(--grid-line) 1px, transparent 1px) !important;
  background-size: var(--grid-size) var(--grid-size) !important;
}

/* Real form content stays above the colored blocks */
.grid-fx>* {
  position: relative;
  z-index: 2;
}

/* Hover trail block — short-lived colored cell (color + position set inline by JS) */
.grid-fx .grid-trail {
  position: absolute;
  z-index: 0;
  pointer-events: none;
  opacity: .8;
  animation: gridTrailOut .65s ease-out forwards;
}

@keyframes gridTrailOut {
  from {
    opacity: .8;
  }

  to {
    opacity: 0;
  }
}

/* Clicked block — persistent colored cell (click again to clear) */
.grid-fx .grid-block {
  position: absolute;
  z-index: 1;
  pointer-events: none;
  opacity: .85;
  animation: gridBlockIn .2s ease-out;
}

@keyframes gridBlockIn {
  from {
    opacity: 0;
    transform: scale(.6);
  }

  to {
    opacity: .85;
    transform: none;
  }
}

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

  .grid-fx .grid-block {
    animation: none;
  }
}