/* tank.tektology.com - the credits at /credits/.

   Layered on app.css. A homage to the opening crawl of a certain space saga,
   done in pure CSS: a blue line, the title shrinking away into the stars, then
   yellow text sliding up a plane tilted back in 3-D.

   THE ROLL. .stage sets the perspective. .crawl is tilted with rotateX and
   then slid with translateY - in that order, so the slide runs along the tilted
   plane and the words shrink towards the horizon. It starts just below the
   stage (top: 100%) and stops with its last line (Tektology) hanging
   in the middle of the screen, so the end of the credits is something to
   look at, not an empty sky. Timings: the blue line 0-5 s, the title 5-14 s, the roll from 10 s and
   then 240 s on its own. credits.js holds the animation still and sets its
   currentTime when somebody scrolls - there are no on-screen controls.

   data-mode on #credits picks what plays:
     roll    - the animations
     stopped - none, for one frame, so JS can restart them
     plain   - an ordinary page (also what reduced motion gets)

   CSP: style-src 'self', so no style attributes; the stars are drawn on a
   canvas by credits.js. */

.credits {
  --appbar: 51px;                   /* the sticky bar's height; see app.css */
  --yellow: #ffd23d;                /* the crawl's own colour, not the UI amber */
  --intro-blue: #4bd5ee;
  position: relative;
  height: calc(100vh - var(--appbar));
  height: calc(100dvh - var(--appbar));
  min-height: 420px;
  overflow: hidden;
  /* Touch drag moves the roll (credits.js); the browser must not scroll or
     pull-to-refresh under the finger. */
  touch-action: none;
  overscroll-behavior: none;
  outline: none;
  background: #000;
  color: var(--yellow);
}

.stars {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
}

/* ------------------------------------------------------- the blue line */

.intro {
  position: absolute;
  inset: 0;
  display: grid;
  place-items: center;
  margin: 0;
  padding: 0 24px;
  text-align: center;
  font-size: clamp(1.1rem, 2.6vw, 1.7rem);
  color: var(--intro-blue);
  letter-spacing: 0.02em;
  opacity: 0;
  pointer-events: none;
}

/* ------------------------------------------------------------ the title */

.logo {
  position: absolute;
  left: 0;
  right: 0;
  top: 42%;
  text-align: center;
  font-family: "Saira Stencil One", "Michroma", sans-serif;
  font-size: clamp(5rem, 20vw, 15rem);
  line-height: 1;
  letter-spacing: 0.06em;
  color: var(--yellow);
  opacity: 0;
  pointer-events: none;
  transform-origin: 50% 50%;
}

/* --------------------------------------------------------------- the roll */

.stage {
  position: absolute;
  inset: 0;
  perspective: 380px;
  perspective-origin: 50% 30%;
  overflow: hidden;
  /* Words fade out as they reach the horizon at the top. */
  -webkit-mask-image: linear-gradient(180deg, transparent 0, #000 34%);
          mask-image: linear-gradient(180deg, transparent 0, #000 34%);
}

.crawl {
  position: absolute;
  top: 100%;
  left: 50%;
  width: min(92vw, 760px);
  margin-left: calc(min(92vw, 760px) / -2);
  padding-bottom: 8vh;
  transform-origin: 50% 0;
  transform: rotateX(26deg);
  text-align: center;
  font-family: "Michroma", system-ui, sans-serif;
  font-size: clamp(1.15rem, 3.2vw, 2rem);
  line-height: 1.55;
  letter-spacing: 0.03em;
  color: var(--yellow);
}

.crawl a {
  color: inherit;
  text-decoration: none;
}
.crawl a:hover, .crawl a:focus-visible { text-decoration: underline; }

.crawl p, .crawl h1, .crawl h2, .crawl h3 { margin: 0; font-weight: 400; }

/* The opening: TEKTOLOGY at the top of the list, as asked. */
.c-open { margin-bottom: 2.6em; }
.c-pre {
  font-size: 1.9em;
  letter-spacing: 0.3em;
  text-transform: uppercase;
}
.c-pre-sub {
  margin: 0.3em 0 0.9em;
  font-size: 0.7em;
  letter-spacing: 0.4em;
  text-transform: uppercase;
  opacity: 0.85;
}
.c-title {
  font-family: "Saira Stencil One", "Michroma", sans-serif;
  font-size: 4.6em;
  line-height: 1;
  letter-spacing: 0.08em;
  text-transform: uppercase;
}


.c-lede {
  margin: 0 0 1.2em;
  font-size: 0.86em;
  text-transform: uppercase;
  letter-spacing: 0.06em;
}

.c-block { margin: 3.4em 0 0; }
.c-block h3 {
  margin-bottom: 0.9em;
  font-size: 0.72em;
  letter-spacing: 0.4em;
  text-transform: uppercase;
  opacity: 0.8;
}
.c-big {
  font-family: "Saira Stencil One", "Michroma", sans-serif;
  font-size: 2.1em;
  line-height: 1.15;
  letter-spacing: 0.06em;
  text-transform: uppercase;
}
.c-big--2 { margin-top: 1.1em; }
.c-big--hero { font-size: 3.6em; letter-spacing: 0.12em; }
.c-block--first { margin-top: 1.4em; }
.c-lede--dedic { margin-top: 1.6em; }
.c-small {
  margin-top: 0.45em;
  font-size: 0.66em;
  letter-spacing: 0.08em;
}

.c-close { margin-top: 5em; }
.c-thanks {
  font-family: "Saira Stencil One", "Michroma", sans-serif;
  font-size: 2.4em;
  line-height: 1.2;
  letter-spacing: 0.06em;
  text-transform: uppercase;
}
.c-mark {
  margin-top: 4em;
  font-size: 1.2em;
  letter-spacing: 0.5em;
  text-transform: uppercase;
}

/* ------------------------------------------------------------- animations */

.credits[data-mode="roll"] .intro {
  animation: intro 5s ease-in-out 0.3s both;
}
.credits[data-mode="roll"] .logo {
  animation: logo 9s cubic-bezier(0.3, 0, 0.7, 1) 5s both;
}
.credits[data-mode="roll"] .crawl {
  animation: roll 240s linear 10s both;
}

@keyframes intro {
  0%   { opacity: 0; }
  20%  { opacity: 1; }
  80%  { opacity: 1; }
  100% { opacity: 0; }
}

@keyframes logo {
  0%   { opacity: 1; transform: scale(1); }
  40%  { opacity: 1; }
  100% { opacity: 0; transform: scale(0.04); }
}

@keyframes roll {
  from { transform: rotateX(26deg) translateY(0); }
  to   { transform: rotateX(26deg) translateY(calc(-100% - 45vh)); }
}

/* -------------------------------------------------------------- plain mode */

.credits[data-mode="plain"] {
  touch-action: auto;
  height: auto;
  min-height: calc(100vh - var(--appbar));
  overflow: visible;
  padding: 40px 16px 80px;
}
.credits[data-mode="plain"] .intro,
.credits[data-mode="plain"] .logo { display: none; }
.credits[data-mode="plain"] .stars { position: fixed; }
.credits[data-mode="plain"] .stage {
  position: relative;
  perspective: none;
  overflow: visible;
  -webkit-mask-image: none;
          mask-image: none;
}
.credits[data-mode="plain"] .crawl {
  position: relative;
  top: auto;
  left: auto;
  margin: 0 auto;
  padding: 0;
  transform: none;
  font-size: 1.05rem;
}

/* stopped: nothing plays, nothing shows, for the one frame before a replay */
.credits[data-mode="stopped"] .intro,
.credits[data-mode="stopped"] .logo { opacity: 0; }

@media (max-width: 620px) {
  .credits { --appbar: 53px; }
}