/* jjscoolwebsite.com — a page that isn't built yet.

   Everything the taped-off holding pages need, and nothing else. Used by
   construction.njk (which is also where Caddy sends a dead link) and by
   games.njk, through partials/holding.njk — one sheet for both, because the
   two were byte-identical copies of each other for a while.

   The tape lives here rather than in styles.css because it is the one piece
   of the design that means "this bit is roadworks": once a page is real, it
   loses the tape and this sheet with it.

   --px (tape) and --badge-px (centre tile) are pixel-art scale factors: keep
   them whole numbers so every source pixel maps to an exact square of screen
   pixels. */

:root {
  --px: 2;
  --badge-px: 3;

  /* Tape frames are 256x32, stacked 16-deep in the vertical sheet. */
  --tape-w: calc(256px * var(--px));
  --tape-h: calc(32px * var(--px));
  --tape-frames: 16;
}

/* The tape stays at 2x everywhere — 1x is too small to read the lettering.
   Only the centre tile steps down on narrow screens. */
@media (max-width: 560px) {
  :root { --badge-px: 2; }
}

body {
  text-align: center;
}

/* The tape and the message move as one block rather than three things each
   pinned to a different edge. margin-block: auto rather than main's own
   justify-content: an auto margin on the item is the safe way to centre
   something in a scroll container — justify-content: center on the
   container clips the overflow asymmetrically (Chrome and Firefox both let
   you scroll past the bottom of centred content but not the top), which
   would strand the top of the tape off-screen on a short viewport. An auto
   margin just collapses to 0 once there's no leftover space to share, so a
   page tall enough to need scrolling gets the old flush-to-top behaviour
   back rather than that bug. Needs main's own display: flex to work at all
   — see styles.css. */
.holding {
  margin-block: auto;
}

/* --- construction tape ------------------------------------------------- */

.tape {
  height: var(--tape-h);
  background-repeat: repeat-x;
  background-size: var(--tape-w) calc(var(--tape-h) * var(--tape-frames));
  background-position: 0 0;
  image-rendering: crisp-edges;
  image-rendering: pixelated;
  animation: tape-frames 1.6s steps(16) infinite;
}

.tape--top {
  background-image: url("assets/web/pages/construction/tape_top_sheet.png");
}

.tape--bottom {
  background-image: url("assets/web/pages/construction/tape_bottom_sheet.png");
}

/* Walks the vertical sprite sheet one frame at a time. */
@keyframes tape-frames {
  from { background-position: 0 0; }
  to   { background-position: 0 calc(var(--tape-h) * var(--tape-frames) * -1); }
}

/* --- message ----------------------------------------------------------- */

.marquee {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 0.75rem;
  padding: 2rem 1.25rem;
  line-height: 1.5;
}

/* The favicon sprite (64x64), blown up as the centrepiece. */
.marquee__badge {
  width: calc(64px * var(--badge-px));
  height: calc(64px * var(--badge-px));
  margin: 0.5rem 0;
  image-rendering: crisp-edges;
  image-rendering: pixelated;
}

.marquee__site,
.marquee__line {
  margin: 0;
}

.marquee__site {
  font-size: clamp(1.6rem, 5vw, 2.75rem);
  font-weight: 600;
  letter-spacing: -0.01em;
  word-break: break-word;
}

.marquee__line {
  font-size: clamp(1rem, 2.4vw, 1.25rem);
  font-weight: 400;
  color: var(--yellow-dark);
}

.marquee__line--sub {
  font-size: clamp(0.875rem, 2vw, 1rem);
  color: var(--muted);
}

.marquee__line--signature {
  font-size: clamp(0.6rem, 2vw, 1rem);
  color: var(--green);
}

/* Back to somewhere real, for anyone who landed here from a dead link. */
.marquee__back {
  margin-top: 0.5rem;
  font-size: clamp(0.875rem, 2vw, 1rem);
}

.marquee__back a {
  color: var(--yellow);
  text-underline-offset: 4px;
}

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