/* ===========================================================================
   transition.css — the block-drop ("Tetris") page transition

   Driven by js/transition.js. Three phases, in order:

     fill   blocks rain down and fill the screen, leaving one empty column
     piece  a single tall bar drops into that column, completing the wall
            ...browser navigates to the new page...
     clear  every row flashes and collapses, revealing the new page

   The animation names are the originals (np = Nonprofit) so the timings
   below can be compared against the version this site was ported from.
   =========================================================================== */


/* --- Keyframes ---------------------------------------------------------- */

/* A single block dropping into place during `fill`. */
@keyframes npDrop {
  from { transform: translateY(-150%); opacity: 0; }
  to   { transform: translateY(0);     opacity: 1; }
}

/* The tall bar falling from above the viewport into the gap column. */
@keyframes npPiece {
  from { transform: translateY(-118vh); }
  to   { transform: translateY(0); }
}

/* A completed row flashing white and collapsing. */
@keyframes npClear {
  0%   { opacity: 1; transform: scaleY(1); filter: brightness(1); }
  25%  {                                   filter: brightness(2.4); }
  100% { opacity: 0; transform: scaleY(0); filter: brightness(2.4); }
}

/* The flat backdrop behind the blocks, fading in and back out. */
@keyframes npScrim { from { opacity: 0; } to { opacity: 1; } }
@keyframes npFade  { from { opacity: 1; } to { opacity: 0; } }


/* --- Overlay ------------------------------------------------------------ */

/* Covers the viewport and swallows clicks so nothing can be triggered
   mid-transition. */
.tetris-overlay {
  position: fixed;
  inset: 0;
  z-index: 50;
  overflow: hidden;
  pointer-events: all;
}

.tetris-scrim {
  position: absolute;
  inset: 0;
  background: var(--bg);
}

/* One grid square. Position and size are set inline by the script, since
   they depend on the measured row/column count. */
.tetris-cell {
  position: absolute;
  padding: 2px;
}

.tetris-cell > i {
  display: block;
  width: 100%;
  height: 100%;
  border-radius: 4px;
  background: var(--block-color);
  box-shadow:
    inset 0  3px 0 rgba(255, 255, 255, .32),
    inset 0 -3px 0 rgba(0, 0, 0, .16);
}

/* The tall bar that completes the wall. Brighter, with a glow. */
.tetris-piece {
  position: absolute;
  top: 0;
  height: 100%;
}

.tetris-piece > .tetris-cell {
  left: 0;
  width: 100%;
}

.tetris-piece > .tetris-cell > i {
  box-shadow:
    inset 0  3px 0 rgba(255, 255, 255, .34),
    inset 0 -3px 0 rgba(0, 0, 0, .18),
    0 0 30px rgba(255, 255, 255, .35);
}


/* --- Reduced motion ------------------------------------------------------
   Readers who ask for less motion get a plain cross-page load: the script
   checks this same query and skips the animation entirely, but hide the
   overlay here too in case one was already on screen.
-------------------------------------------------------------------------- */

@media (prefers-reduced-motion: reduce) {
  .tetris-overlay {
    display: none;
  }
}