/* TideQuest site. Shared by the home, Discord and 404 pages. */

/* Lilita One by Juan Montoreano (SIL OFL 1.1), unmodified. */
@font-face {
  font-family: "Lilita One";
  src: url("fonts/lilita-one.woff") format("woff");
  font-display: swap;
}

:root {
  /* The game's Quit Modal DimOverlay: Color(0.139, 0.053, 0.15, 0.863). */
  --dim: rgb(35 13 38 / 0.863);
  --night: #230d26;
  --blurple: #5865f2;
}

html { background-color: var(--night); }

body {
  margin: 0;
  min-height: 100vh;
  min-height: 100svh;
  display: grid;
  grid-template-rows: 1fr auto;
  place-items: center;
  background-color: var(--night);
  color: #fff;
  font-family: "Lilita One", "Segoe UI", system-ui, -apple-system, Roboto, Helvetica, Arial, sans-serif;
}

.shot {
  position: fixed;
  inset: 0;
  background: url("island.webp") center / cover no-repeat;
  pointer-events: none;
}

.shot::after {
  content: "";
  position: absolute;
  inset: 0;
  background: var(--dim);
}

/* Interactive sea (sea.js). Without it, the screenshot stays as the background. */
.sea {
  position: fixed;
  inset: 0;
  overflow: hidden;
  touch-action: none;
  -webkit-user-select: none;
  user-select: none;
}

.sea canvas {
  display: block;
  image-rendering: pixelated;
}

.sea-live .shot { background-image: none; }

/* Lighter dim over the live sea. */
.sea-live .shot::after { background: rgb(35 13 38 / 0.35); }

/* Added to the top of the footer by sea.js. */
.sea-hint {
  margin: 0 16px 12px;
  padding: 4px 12px;
  border-radius: 8px;
  background: rgb(35 13 38 / 0.75);
  font-size: clamp(14px, 1.6vw, 18px);
  text-align: center;
  pointer-events: none;
  transition: opacity 0.6s;
}

.sea-hint.is-done { opacity: 0; }

main {
  position: relative;
  padding: 24px 16px;
}

/* Set by parallax.js: oversize the background so its drift never exposes an edge. */
.parallax .shot { inset: -24px; }

.parallax .shot,
.parallax main { will-change: transform; }

.invite {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: clamp(20px, 4vw, 48px);
  color: #fff;
  text-decoration: none;
}

.invite:focus-visible {
  outline: 4px solid #fff;
  outline-offset: 12px;
  border-radius: 12px;
}

.title {
  display: grid;
  justify-items: center;
  gap: clamp(8px, 1.4vw, 16px);
}

.title h1 { margin: 0; }

.logo {
  display: block;
  width: clamp(280px, 48vw, 600px);
  height: auto;
  /* Contrast over pale shallows. */
  filter: drop-shadow(0 1px 3px rgb(35 13 38 / 0.7)) drop-shadow(0 0 12px rgb(35 13 38 / 0.45));
}

.cta {
  margin: 0;
  font-size: clamp(28px, 4.5vw, 54px);
  line-height: 1;
  letter-spacing: 0.01em;
}

/* 404 only: the home labels' transparent fill would show this shadow. */
.invite .cta { text-shadow: 0 1px 3px rgb(35 13 38 / 0.7), 0 0 12px rgb(35 13 38 / 0.45); }

/* Home: logo, tagline and the link icons. */
.home {
  display: grid;
  justify-items: center;
  gap: clamp(12px, 2vw, 24px);
}

.home h1 { margin: 0; }

.tagline {
  margin: -0.35em 0 0.2em;
  font-size: clamp(20px, 2.6vw, 32px);
  line-height: 1.1;
  letter-spacing: 0.04em;
  /* Contrast over pale shallows. */
  text-shadow: 0 1px 3px rgb(35 13 38 / 0.7), 0 0 12px rgb(35 13 38 / 0.45);
}

.links {
  display: flex;
  justify-content: center;
  gap: 0.6em;
  padding-bottom: 1.6em; /* room for the label */
  font-size: clamp(22px, 3vw, 38px);
}

.social {
  position: relative;
  display: block;
  border-radius: 24%;
  color: #fff;
  text-decoration: none;
}

.social:focus-visible {
  outline: 4px solid #fff;
  outline-offset: 6px;
}

.badge {
  display: grid;
  place-items: center;
  width: 1.9em;
  aspect-ratio: 1;
  border-radius: 24%;
  transition: transform 0.3s cubic-bezier(0.3, 0.7, 0.4, 1);
}

.social:hover .badge,
.social:focus-visible .badge { transform: translateY(-3px); }

.badge svg {
  width: 62%;
  height: auto;
  fill: #fff;
}

.badge-discord { background: var(--blurple); }

/* X: white on black, with a faint ring for dark backgrounds. */
.badge-x {
  background: #000;
  box-shadow: inset 0 0 0 1px rgb(255 255 255 / 0.2);
}

.badge-x svg { width: 50%; }

/* Link label under its icon, washed in from the left by a wave on hover or focus.
   The text and its foam are 300%-wide tiles moved together: 100% hidden, 20% shown. */
.social .cta {
  position: absolute;
  top: calc(100% + 0.3em);
  left: 50%;
  translate: -50% 0;
  font-size: 1em;
  white-space: nowrap;
  pointer-events: none;
  color: transparent;
  -webkit-text-fill-color: transparent;
  line-height: 1.2;
  background: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 300 100' preserveAspectRatio='none'%3E%3Cpath d='M0 0H150C150.8 1.8 154.8 7.5 155 11C155.2 14.5 150.5 17.3 151 21C151.5 24.7 157.8 28.8 158 33C158.2 37.2 152.3 41.8 152 46C151.7 50.2 156.5 54 156 58C155.5 62 149.2 65.7 149 70C148.8 74.3 154.7 79 155 84C155.3 89 151.7 97.3 151 100H0Z' fill='%23fff'/%3E%3Cpath d='M0 0H154C154.8 1.8 158.8 7.5 159 11C159.2 14.5 154.5 17.3 155 21C155.5 24.7 161.8 28.8 162 33C162.2 37.2 156.3 41.8 156 46C155.7 50.2 160.5 54 160 58C159.5 62 153.2 65.7 153 70C152.8 74.3 158.7 79 159 84C159.3 89 155.7 97.3 155 100H0ZM0 0H150C150.8 1.8 154.8 7.5 155 11C155.2 14.5 150.5 17.3 151 21C151.5 24.7 157.8 28.8 158 33C158.2 37.2 152.3 41.8 152 46C151.7 50.2 156.5 54 156 58C155.5 62 149.2 65.7 149 70C148.8 74.3 154.7 79 155 84C155.3 89 151.7 97.3 151 100H0Z' fill='%23bfe9ff' fill-rule='evenodd'/%3E%3C/svg%3E") 100% 0 / 300% 100% no-repeat;
  -webkit-background-clip: text;
  background-clip: text;
  /* drop-shadow, so the shadow only follows the revealed fill */
  filter: blur(2px) drop-shadow(0 1px 2px rgb(35 13 38 / 0.7));
  transition:
    background-position-x 0.4s cubic-bezier(0.5, 0, 0.75, 0),
    filter 0.4s ease-in;
}

.social:hover .cta,
.social:focus-visible .cta {
  background-position-x: 20%;
  filter: blur(0) drop-shadow(0 1px 2px rgb(35 13 38 / 0.7));
  transition:
    background-position-x 1.1s cubic-bezier(0.15, 0.6, 0.3, 1),
    filter 0.9s ease-out;
}

/* Foam line across the whole label. */
.social .cta::before {
  content: "";
  position: absolute;
  inset: -0.1em 0;
  background: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 300 100' preserveAspectRatio='none'%3E%3Cdefs%3E%3Cfilter id='f' x='-20%25' y='-20%25' width='140%25' height='140%25'%3E%3CfeGaussianBlur stdDeviation='1.6 2.5'/%3E%3C/filter%3E%3C/defs%3E%3Cg filter='url%28%23f%29' fill='%23fff'%3E%3Cpath d='M0 0H150C150.8 1.8 154.8 7.5 155 11C155.2 14.5 150.5 17.3 151 21C151.5 24.7 157.8 28.8 158 33C158.2 37.2 152.3 41.8 152 46C151.7 50.2 156.5 54 156 58C155.5 62 149.2 65.7 149 70C148.8 74.3 154.7 79 155 84C155.3 89 151.7 97.3 151 100H0ZM0 0H128C128.8 1.8 132.8 7.5 133 11C133.2 14.5 128.5 17.3 129 21C129.5 24.7 135.8 28.8 136 33C136.2 37.2 130.3 41.8 130 46C129.7 50.2 134.5 54 134 58C133.5 62 127.2 65.7 127 70C126.8 74.3 132.7 79 133 84C133.3 89 129.7 97.3 129 100H0Z' fill-opacity='.18' fill-rule='evenodd'/%3E%3Cpath d='M0 0H156C156.8 1.8 160.8 7.5 161 11C161.2 14.5 156.5 17.3 157 21C157.5 24.7 163.8 28.8 164 33C164.2 37.2 158.3 41.8 158 46C157.7 50.2 162.5 54 162 58C161.5 62 155.2 65.7 155 70C154.8 74.3 160.7 79 161 84C161.3 89 157.7 97.3 157 100H0ZM0 0H149C149.8 1.8 153.8 7.5 154 11C154.2 14.5 149.5 17.3 150 21C150.5 24.7 156.8 28.8 157 33C157.2 37.2 151.3 41.8 151 46C150.7 50.2 155.5 54 155 58C154.5 62 148.2 65.7 148 70C147.8 74.3 153.7 79 154 84C154.3 89 150.7 97.3 150 100H0Z' fill-opacity='.85' fill-rule='evenodd'/%3E%3C/g%3E%3Cg fill='%23fff' fill-opacity='.7'%3E%3Cellipse cx='151' cy='8' rx='0.55' ry='3'/%3E%3Cellipse cx='144' cy='27' rx='0.45' ry='2.5'/%3E%3Cellipse cx='149' cy='41' rx='0.36' ry='2'/%3E%3Cellipse cx='142' cy='50' rx='0.55' ry='3'/%3E%3Cellipse cx='144' cy='66' rx='0.45' ry='2.5'/%3E%3Cellipse cx='143' cy='79' rx='0.36' ry='2'/%3E%3Cellipse cx='149' cy='92' rx='0.55' ry='3'/%3E%3Cellipse cx='136' cy='18' rx='0.36' ry='2'/%3E%3Cellipse cx='139' cy='60' rx='0.45' ry='2.5'/%3E%3Cellipse cx='149' cy='36' rx='0.33' ry='1.8'/%3E%3C/g%3E%3C/svg%3E") 100% 0 / 300% 100% no-repeat;
  opacity: 0;
  /* Fades out before the box edges. */
  -webkit-mask:
    linear-gradient(to right, #0000, #000 8%, #000 62%, #0000 92%),
    linear-gradient(#0000, #000 18%, #000 82%, #0000);
  -webkit-mask-composite: source-in;
  mask:
    linear-gradient(to right, #0000, #000 8%, #000 62%, #0000 92%),
    linear-gradient(#0000, #000 18%, #000 82%, #0000);
  mask-composite: intersect;
}

.social:hover .cta::before,
.social:focus-visible .cta::before {
  animation:
    swash-run 1.1s cubic-bezier(0.15, 0.6, 0.3, 1) both,
    swash-fade 1.1s linear both;
}

@keyframes swash-run {
  from { background-position-x: 100%; }
  to { background-position-x: 20%; }
}

@keyframes swash-fade {
  0%, 45% { opacity: 1; }
  100% { opacity: 0; }
}

@media (prefers-reduced-motion: reduce) {
  .badge { transition: none; }

  .social:hover .badge,
  .social:focus-visible .badge { transform: none; }

  .social .cta::before { display: none; }

  .social .cta {
    background: none;
    color: #fff;
    -webkit-text-fill-color: currentColor;
    filter: none;
    text-shadow: 0 1px 2px rgb(35 13 38 / 0.7);
    animation: none;
    opacity: 0;
    transition: opacity 0.3s;
  }

  .social:hover .cta,
  .social:focus-visible .cta { opacity: 1; }
}

/* High-contrast modes drop background images. */
@media (forced-colors: active) {
  .social .cta::before { display: none; }

  .social .cta {
    background: none;
    color: CanvasText;
    -webkit-text-fill-color: currentColor;
    filter: none;
    visibility: hidden;
  }

  .social:hover .cta,
  .social:focus-visible .cta { visibility: visible; }
}

/* Footer: copyright and legal links. */
.site-footer {
  position: relative;
  justify-self: stretch;
  display: grid;
  justify-items: center;
}

.footer-bar {
  box-sizing: border-box;
  width: 100%;
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  align-items: center;
  gap: 6px 20px;
  margin: 0;
  padding: 10px 16px max(10px, env(safe-area-inset-bottom));
  background: rgb(35 13 38 / 0.85);
  font-family: "Segoe UI", system-ui, -apple-system, Roboto, Helvetica, Arial, sans-serif;
  font-size: 14px;
  line-height: 1.5;
}

.footer-bar p { margin: 0; }

.footer-bar a,
.footer-bar button {
  padding: 0;
  border: 0;
  background: none;
  color: #fff;
  font: inherit;
  text-decoration: underline;
  text-underline-offset: 3px;
  cursor: pointer;
}

.footer-bar a:hover,
.footer-bar button:hover { text-decoration-thickness: 2px; }

.footer-bar a:focus-visible,
.footer-bar button:focus-visible {
  outline: 3px solid #fff;
  outline-offset: 3px;
  border-radius: 2px;
}

/* Pause, mute and (touch) build/wash icons (sea.js): on the hint's row at the right. */
.has-controls {
  grid-template-areas: "top" "bar";
}

.has-controls .sea-hint {
  grid-area: top;
  align-self: end;
}

.has-controls .footer-bar { grid-area: bar; }

.sea-controls {
  grid-area: top;
  justify-self: end;
  align-self: end;
  display: flex;
  gap: 2px;
  margin: 0 max(20px, env(safe-area-inset-right)) 4px 0;
}

.sea-control {
  display: grid;
  place-items: center;
  width: 44px;
  height: 44px;
  padding: 0;
  border: 0;
  border-radius: 8px;
  background: none;
  color: #fff;
  cursor: pointer;
  filter: drop-shadow(0 1px 2px rgb(0 0 0 / 0.55));
  opacity: 0.85;
  transition: opacity 0.2s;
}

.sea-control[hidden] { display: none; }

.sea-control:hover { opacity: 1; }

.sea-control:focus-visible {
  outline: 3px solid #fff;
  outline-offset: 2px;
  opacity: 1;
}

/* Phones: a column at the right edge, floating just above the footer. */
@media (max-width: 640px) {
  .sea-controls {
    position: absolute;
    right: max(12px, env(safe-area-inset-right));
    bottom: calc(100% + 4px);
    flex-direction: column;
    margin: 0;
  }
}

.sea-control svg {
  width: 26px;
  height: 26px;
}

.footer-bar nav {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: 6px 20px;
}

/* Privacy and accessibility dialogs (legal.js). */
.legal {
  box-sizing: border-box;
  width: min(46rem, calc(100vw - 32px));
  max-height: min(85vh, calc(100svh - 32px));
  padding: 0;
  border: 0;
  border-radius: 12px;
  overflow: hidden; /* .legal-body scrolls instead */
  background: var(--night);
  color: #fff;
  box-shadow: 0 24px 64px rgb(0 0 0 / 0.5);
}

.legal[open] {
  display: flex;
  flex-direction: column;
}

.legal::backdrop { background: rgb(35 13 38 / 0.75); }

/* The dialog itself takes focus when opened. */
.legal:focus { outline: none; }

/* Without JavaScript, #privacy and #accessibility still open via :target. */
:root:not(.legal-js) .legal:target {
  display: flex;
  flex-direction: column;
  position: fixed;
  inset: 0;
  margin: auto;
  z-index: 1;
}

.legal-body {
  overflow-y: auto;
  overscroll-behavior: contain;
  padding: 28px clamp(16px, 4vw, 40px) 32px;
  /* Chrome, Edge, Firefox */
  scrollbar-width: thin;
  scrollbar-color: rgb(255 255 255 / 0.3) transparent;
  font-family: "Segoe UI", system-ui, -apple-system, Roboto, Helvetica, Arial, sans-serif;
  font-size: 17px;
  line-height: 1.6;
}

.legal h2,
.legal h3 {
  font-family: "Lilita One", "Segoe UI", system-ui, sans-serif;
  font-weight: normal;
  line-height: 1.2;
  letter-spacing: 0.01em;
}

.legal h2 { margin: 0 48px 8px 0; font-size: clamp(28px, 5vw, 40px); }
.legal h3 { margin: 28px 0 6px; font-size: 24px; }
.legal a { color: #fff; text-underline-offset: 3px; overflow-wrap: anywhere; }
.legal ul { padding-left: 1.25em; }
.legal li + li { margin-top: 4px; }
.legal .updated { margin-top: 0; color: rgb(255 255 255 / 0.8); }

/* Safari */
.legal-body::-webkit-scrollbar { width: 10px; }
.legal-body::-webkit-scrollbar-track { background: transparent; }

.legal-body::-webkit-scrollbar-thumb {
  border: 3px solid transparent;
  border-radius: 999px;
  background: rgb(255 255 255 / 0.3) padding-box;
}

.legal-body::-webkit-scrollbar-thumb:hover { background-color: rgb(255 255 255 / 0.5); }

/* Stays put while the text scrolls. */
.legal-close {
  position: sticky;
  top: 0;
  z-index: 1;
  float: right;
  width: 44px;
  height: 44px;
  margin: -12px -12px 0 0;
  padding: 0;
  border: 0;
  border-radius: 8px;
  background: rgb(68 46 72); /* opaque over scrolling text */
  color: #fff;
  font-size: 28px;
  line-height: 1;
  cursor: pointer;
}

.legal-close:hover { background: rgb(96 74 100); }

.legal a:focus-visible,
.legal-close:focus-visible {
  outline: 3px solid #fff;
  outline-offset: 3px;
}