/* jjscoolwebsite.com — holding page
   Colours are lifted from the construction tape sprite so the page and the
   art share one palette. The pixel art carries the retro note; the type is
   deliberately plain so it stays easy to read against 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;

  --bg: #222034;
  --yellow: #fbf254;
  --yellow-dark: #e9b61d;
  --muted: #7d78ad;
  --greyed: #707070;

  /* 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; }
}

* {
  box-sizing: border-box;
}

body {
  margin: 0;
  min-height: 100vh;
  min-height: 100dvh;
  display: grid;
  grid-template-rows: auto 1fr auto;
  background: var(--bg);
  color: var(--yellow);
  font-family: system-ui, -apple-system, "Segoe UI", Roboto, Helvetica, Arial, sans-serif;
  text-align: center;
  overflow-x: hidden;
}

/* --- 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/tape_top_sheet.png");
}

.tape--bottom {
  background-image: url("assets/web/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(--greyed)
}

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