/* pathfinderthegame.com: the game's water, dimmed, with only the name and the contact addresses. */
@font-face {
  font-family: "Bebas Neue";
  src: url("/fonts/bebas-neue.woff2") format("woff2");
  font-display: swap;
}

@font-face {
  font-family: "Fredoka";
  src: url("/fonts/fredoka.woff2") format("woff2");
  font-display: swap;
}

:root {
  --water: #0dbe6a;
  --deep: #04170f;
  --text: #ffffff;
  --text-dim: rgba(214, 244, 232, 0.6);
  --glow: rgba(120, 255, 190, 0.35);
}

* {
  box-sizing: border-box;
}

html {
  height: 100%;
  /* on the page itself, under the water and dim layers (a body background would cover them) */
  background: var(--water);
}

body {
  margin: 0;
  min-height: 100%;
  display: grid;
  place-items: center;
  padding: 40px 16px;
  overflow-x: hidden;
  font-family: "Fredoka", "Segoe UI", system-ui, sans-serif;
  color: var(--text);
}

/* The game's water, drawn the way the game draws it (Rhythm: src/ui/Water.cpp), with the same textures.
   The game's screen is 1080 units tall, so one unit is 1/1080 of the window's height and the 512-texel
   textures tile every 512 units. The grey water texture is tinted with the water colour (multiplied), and
   two layers of glints are added on top as light: the second drawn 1.37x bigger, each drifting its own way
   and twinkling out of step. */
.water {
  --unit: calc(100vh / 1080);
  --tile: calc(512 * var(--unit));
  --tile-big: calc(1.37 * var(--tile));
  position: fixed;
  inset: 0;
  z-index: -2;
  pointer-events: none;
  isolation: isolate;
  background: url("/textures/water.png") center / var(--tile) var(--water);
  background-blend-mode: multiply;
}

.glints {
  position: absolute;
  inset: 0;
  background-image: url("/textures/water_glints.png");
  mix-blend-mode: screen; /* (for browsers without the next one) */
  mix-blend-mode: plus-lighter; /* added as light, as in the game */
}

/* Layer one drifts 9 units/s right-to-left and 4 up the screen, and its brightness is
   0.75 + 0.25 sin(1.7 t). After 1024 s it has moved a whole number of tiles, so the loop is seamless. */
.glints.one {
  background-size: var(--tile);
  opacity: 0.75;
  animation:
    drift-one 1024s linear infinite,
    twinkle-one 1.848s cubic-bezier(0.37, 0, 0.63, 1) -0.924s infinite alternate;
}

/* Layer two: 1.37x bigger, offset by (211, 137) texels, drifting 7 right and 5 down, brightness
   0.55 + 0.3 sin(1.3 t + 2). It loops after 1024 x 1.37 s (14 by 10 of its tiles). */
.glints.two {
  background-size: var(--tile-big);
  opacity: 0.55;
  animation:
    drift-two 1402.88s linear infinite,
    twinkle-two 2.417s cubic-bezier(0.37, 0, 0.63, 1) -2.747s infinite alternate;
}

@keyframes drift-one {
  from {
    background-position: 0 0;
  }
  to {
    background-position: calc(-18 * var(--tile)) calc(-8 * var(--tile));
  }
}

@keyframes drift-two {
  from {
    background-position: calc(-211 / 512 * var(--tile-big)) calc(-137 / 512 * var(--tile-big));
  }
  to {
    background-position: calc((14 - 211 / 512) * var(--tile-big)) calc((10 - 137 / 512) * var(--tile-big));
  }
}

@keyframes twinkle-one {
  from {
    opacity: 0.5;
  }
  to {
    opacity: 1;
  }
}

@keyframes twinkle-two {
  from {
    opacity: 0.25;
  }
  to {
    opacity: 0.85;
  }
}

/* Dimmed, like the game's darkening: only the middle is lit, and it breathes slowly. */
.dim {
  position: fixed;
  inset: 0;
  z-index: -1;
  pointer-events: none;
  background: radial-gradient(ellipse 70% 60% at 50% 50%, rgba(4, 23, 15, 0.55) 0%, rgba(4, 23, 15, 0.82) 55%, rgba(4, 23, 15, 0.97) 100%);
  animation: breathe 8s ease-in-out infinite;
}

@keyframes breathe {
  0%,
  100% {
    opacity: 1;
  }
  50% {
    opacity: 0.9;
  }
}

.lone {
  text-align: center;
  animation: reveal 2.4s ease-out both;
}

@keyframes reveal {
  from {
    opacity: 0;
    filter: blur(8px);
    transform: translateY(6px);
  }
  to {
    opacity: 1;
    filter: blur(0);
    transform: none;
  }
}

.title {
  margin: 0;
  font-family: "Bebas Neue", "Impact", sans-serif;
  font-weight: 400;
  font-size: clamp(64px, 18vw, 168px);
  line-height: 0.9;
  letter-spacing: 0.08em;
  /* (the letter spacing would push it off centre: pull the last letter's spacing back) */
  margin-right: -0.08em;
  text-shadow: 0 0 28px var(--glow), 0 0 2px rgba(255, 255, 255, 0.5);
}

.title.small {
  font-size: clamp(48px, 12vw, 96px);
}

.code {
  margin: 0 0 6px;
  font-family: "Bebas Neue", "Impact", sans-serif;
  font-size: 22px;
  letter-spacing: 0.5em;
  margin-right: -0.5em;
  color: var(--text-dim);
}

/* The addresses, each under its person's role: quiet, brightening when pointed at. */
.mail {
  margin-top: 28px;
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: 18px 40px;
}

.person {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 2px;
}

.role {
  margin: 0;
  font-family: "Bebas Neue", "Impact", sans-serif;
  font-size: 15px;
  letter-spacing: 0.22em;
  margin-right: -0.22em;
  color: rgba(214, 244, 232, 0.42);
}

.mail a {
  font-size: 17px;
  letter-spacing: 0.04em;
  color: var(--text-dim);
  text-decoration: none;
  padding: 4px 2px;
  border-bottom: 1px solid transparent;
  transition: color 0.3s, border-color 0.3s, text-shadow 0.3s;
}

.mail a:hover,
.mail a:focus-visible {
  color: var(--text);
  border-bottom-color: rgba(255, 255, 255, 0.5);
  text-shadow: 0 0 12px var(--glow);
}

.mail a:focus-visible {
  outline: 2px solid rgba(255, 255, 255, 0.7);
  outline-offset: 4px;
  border-radius: 2px;
}

@media (max-width: 480px) {
  .mail {
    flex-direction: column;
    align-items: center;
    gap: 16px;
  }
  .mail a {
    font-size: 15.5px;
  }
}

@media (prefers-reduced-motion: reduce) {
  *,
  *::before,
  *::after {
    animation: none !important;
    transition: none !important;
  }
}