/* ========================================
   GALLERY — pictures scattered across a starfield
   ======================================== */

/* PixelWarden is drawn on a 16-pixel grid, so it is sharpest at font sizes
   that are multiples of 16px (1rem, 2rem, 3rem, 4rem). */
@font-face {
  font-family: "PixelWarden";
  src: url("/fonts/PixelWarden.ttf") format("truetype");
  font-weight: normal;
  font-style: normal;
  font-display: swap;
}

*, *::before, *::after {
  box-sizing: border-box;
  margin: 0;
  padding: 0;
}

/* The animated star tile repeats across the whole page and scrolls with it */
body {
  min-height: 100vh;
  background: #000 url("/img/gallery-stars.gif") repeat;
  color: var(--text-small);
  font-family: "PixelWarden", "Courier New", monospace;
}

/* People who ask their device for less motion get a still frame of the same stars */
@media (prefers-reduced-motion: reduce) {
  body { background-image: url("/img/gallery-stars-still.png"); }
}

/* --- Back button (placeholder) --- */
.gallery-back {
  position: fixed;
  top: 1.5rem;
  left: 2rem;
  z-index: 10;
  font-size: 1rem;
  color: hotpink;
  text-decoration: none;
}
.gallery-back:hover { color: #fff; }

/* --- Note in the top right corner, level with the back link; it scrolls away with the page --- */
.gallery-note {
  position: absolute;
  top: 1.5rem;
  right: 2rem;
  left: 7rem;
  font-size: 1rem;
  line-height: 1.2;
  text-align: right;
  color: #ff3b3b;
}

/* --- Page --- */
.gallery {
  max-width: 1500px;
  margin: 0 auto;
  padding: 4.5rem 4vw 10rem;
}

/* The purple glow, used behind the heading and around the pictures */
:root {
  --glow-near: rgba(110, 90, 255, 0.75);
  --glow-far: rgba(74, 0, 214, 0.45);
  /* Text colours: the big heading is almost white, everything smaller is a light pink */
  --text-big: #fff3f8;
  --text-small: #f3bcd3;
}

/* Wavy lettering: each letter is nudged up or down by a whole number of font-pixels
   (PixelWarden's pixel is 1/16 of the font size), so the letters stay sharp. */
.wavy-word {
  display: inline-block;
  white-space: nowrap;
}
.wavy-word > span {
  display: inline-block;
  transform: translateY(calc(var(--y) * 0.0625em));
}

.gallery h1 {
  margin-bottom: 1.25rem;
  font-size: 4rem;
  font-weight: normal;
  line-height: 1.2;
  text-align: center;
  color: var(--text-big);
  /* one font-pixel of solid violet (taken from the star gif), then the glow */
  text-shadow: 4px 4px 0 #4a00d6, 0 0 22px var(--glow-near), 0 0 60px var(--glow-far);
}

/* The two smaller lines sit in a box over on the left, exactly as wide as the first of them */
.gallery-intro {
  width: fit-content;
  max-width: 52%;   /* keeps clear of a picture raised up into the top right corner */
  margin: 0 0 1.25rem 3%;
}

/* Second line, a size down */
.gallery-sub {
  margin: 0 0 0.75rem;
  font-size: 3rem;
  line-height: 1.2;
  text-align: left;
  text-shadow: 3px 3px 0 #4a00d6;
}

/* Little note under that, pushed to the right so it ends a bit past the line above.
   (The -1.5em is how far past; make it bigger to push it further.) */
.gallery-hint {
  margin: 0 -1.5em 0 0;
  font-size: 2rem;
  line-height: 1.2;
  text-align: right;
  text-shadow: 2px 2px 0 #4a00d6;   /* the same violet as the line above, one font-pixel deep */
}

/* --- Scatter --- */
/* _data/gallery.js works out a spot for every picture (left, top, width) and
   how tall the whole area is. Everything is a percentage, so the arrangement
   keeps its shape as the window changes size. */
.scatter {
  position: relative;
  aspect-ratio: var(--ratio-wide);
}

.piece {
  position: absolute;
  left: var(--l-wide);
  top: var(--t-wide);
  width: var(--w-wide);
  transform: rotate(var(--tilt));
  color: inherit;
  text-decoration: none;
}

/* A caption written in a ring round its picture (captionShape: "circle").
   .piece-orbit is a square holding the picture in the middle; the lettering is
   an SVG laid over the whole square. */
.piece-orbit {
  display: block;
  position: relative;
}
.orbit-text {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  overflow: visible;
  pointer-events: none;
}
.orbit-text text {
  fill: var(--text-small);
  font-family: inherit;
}

/* Optional caption (the caption: "..." bit in _data/gallery.js) */
.piece-caption {
  display: block;
  position: relative;   /* keeps the words on top of the picture's glow */
  margin-top: 0.5rem;
  font-size: 1rem;
  line-height: 1.2;
  text-align: center;
}

/* Big wobbly caption (captionStyle: "wavy"). Twice the normal size here, normal size on phones;
   the "wavy" numbers in _includes/gallery-layout.js must say the same. */
.piece-caption--wavy {
  margin-top: 0.75rem;
  font-size: 2rem;
}

/* A group: pictures side by side, bottoms lined up, each one its own link */
.piece-main.piece-row {
  display: flex;
  justify-content: space-between;
  align-items: flex-end;
}
.piece-link {
  display: block;
  color: inherit;
}
.piece-link:focus-visible {
  outline: 2px dashed #fff;
  outline-offset: 6px;
}

/* The picture's own box (frame and ring caption included). An "aside" is placed against it. */
.piece-main {
  display: block;
  position: relative;
}

/* Aside: a pixel arrow leading to a second, smaller picture with a few words under it */
.aside-arrow,
.aside-pic,
.aside-text {
  position: absolute;
}
.aside-arrow {
  height: auto;
  fill: var(--text-small);
  shape-rendering: crispEdges;
}
.aside-pic {
  height: auto;
  filter: drop-shadow(0 0 6px var(--glow-near)) drop-shadow(0 0 18px var(--glow-far));
}
.aside-text {
  font-size: 1rem;
  line-height: 1.2;
  text-align: center;
}

.piece-art {
  display: block;
  position: relative;   /* frame pieces (the googly eyes) are placed against this box */
}

.piece-pic {
  display: block;
  width: 100%;
  height: auto;
}

/* The default frame: a purple halo, as if lit from behind.
   A picture gets this unless its line in _data/galleryPictures.js names another frame. */
.piece--glow .piece-pic {
  box-shadow:
    0 0 26px 7px var(--glow-near),
    0 0 70px 18px var(--glow-far);
}

/* Other glow colours (glow: "white", glow: "black" or a colour code on a picture's line).
   They just swap the two glow colours, so they work with the cut-out glow below as well. */
.glow-white {
  --glow-near: rgba(255, 255, 255, 0.7);
  --glow-far: rgba(255, 255, 255, 0.3);
}
/* any other colour: the picture's line sets --glow, and the two strengths are mixed from it */
.glow-custom {
  --glow-near: color-mix(in srgb, var(--glow) 80%, transparent);
  --glow-far: color-mix(in srgb, var(--glow) 40%, transparent);
}
.glow-black {
  --glow-near: rgba(0, 0, 0, 0.95);
  --glow-far: rgba(0, 0, 0, 0.8);
}

/* For cut-out pictures (see-through background): the same glow, but hugging the shape */
.piece--cutout .piece-pic {
  filter:
    drop-shadow(0 0 7px var(--glow-near))
    drop-shadow(0 0 20px var(--glow-near))
    drop-shadow(0 0 46px var(--glow-far));
}

/* One googly eye in a frame: _data/gallery.js sets where it sits, its size and its turn */
.eye {
  position: absolute;
  height: auto;
  aspect-ratio: 1;
}

.piece:focus-visible {
  outline: 2px dashed #fff;
  outline-offset: 6px;
}

/* --- Tablets: the two-column arrangement --- */
@media (max-width: 1000px) {
  .gallery h1 {
    font-size: 3rem;
    text-shadow: 3px 3px 0 #4a00d6, 0 0 18px var(--glow-near), 0 0 48px var(--glow-far);
  }
  .gallery-intro { max-width: 100%; }
  .gallery-sub {
    font-size: 2rem;
    text-shadow: 2px 2px 0 #4a00d6;
  }
  .gallery-hint {
    font-size: 1rem;
    text-shadow: 1px 1px 0 #4a00d6;
  }
  .scatter { aspect-ratio: var(--ratio-mid); }
  .piece {
    left: var(--l-mid);
    top: var(--t-mid);
    width: var(--w-mid);
  }
}

/* --- Phones: one column, pictures zigzag down the screen --- */
@media (max-width: 600px) {
  .gallery-back {
    top: 0.75rem;
    left: 1rem;
  }
  .gallery {
    padding: 3.5rem 6vw 7rem;
  }
  .gallery h1 { margin-bottom: 1rem; }
  .gallery-note {   /* no room beside the back link on a phone: it goes above the heading instead */
    position: static;
    margin: 0 0 1rem;
  }
  .gallery-hint { margin-right: 0; }   /* no room to poke out on a phone */
  .piece-caption--wavy { font-size: 1rem; }
  .scatter { aspect-ratio: var(--ratio-narrow); }
  .piece {
    left: var(--l-narrow);
    top: var(--t-narrow);
    width: var(--w-narrow);
  }
}