/* Aquarium Wonder website. The page is a room above the water line and an aquarium below it. */

@font-face {
  font-family: "Lilita One";
  src: url("../fonts/LilitaOne-Regular.woff") format("woff");
  font-display: swap;
}

:root {
  --wall: #17424a;
  --wall-deep: #0c2a30;
  --surface: #8fe9f6;
  --water: #3fcde9;
  --water-mid: #1b97c8;
  --water-deep: #0e5a86;
  --abyss: #082743;
  --ivory: #f3ead7;
  --ivory-edge: #e3d3b2;
  --brass: #d9a441;
  --ink: #1c3557;
  --ink-soft: #3d5677;
  --foam: #eafcff;
  --todo: #ffe27a;

  --display: "Lilita One", ui-rounded, system-ui, sans-serif;
  --text: ui-rounded, "SF Pro Rounded", system-ui, -apple-system, "Segoe UI", Roboto, sans-serif;
  --gutter: clamp(16px, 4vw, 40px);
  --measure: 66ch;
}

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

html { -webkit-text-size-adjust: 100%; }

body {
  margin: 0;
  background: var(--abyss);
  color: var(--foam);
  font: 400 1.0625rem/1.6 var(--text);
}

img { display: block; max-width: 100%; height: auto; }

a { color: inherit; }

:focus-visible {
  outline: 3px solid var(--brass);
  outline-offset: 3px;
  border-radius: 6px;
}

.visually-hidden {
  position: absolute;
  width: 1px; height: 1px;
  overflow: hidden;
  clip-path: inset(50%);
  white-space: nowrap;
}

/* A value still to be decided. Search for class="todo" to find them all. */
.todo {
  background: var(--todo);
  color: var(--ink);
  padding: 0 .2em;
  border-radius: 3px;
}

.display {
  font-family: var(--display);
  font-weight: 400;
  letter-spacing: .005em;
  line-height: 1.05;
}

/* Text on the room and the water carries the game's soft drop shadow. */
.on-scene { text-shadow: 0 .06em 0 rgba(4, 22, 34, .55), 0 .12em .4em rgba(4, 22, 34, .35); }

/* ---------- Room ---------- */

.room {
  position: relative;
  isolation: isolate;
  overflow: hidden;
  background: var(--wall) url("../img/room-900.webp") center 30% / cover no-repeat;
}

@media (min-width: 900px) {
  .room { background-image: url("../img/room-1600.webp"); }
}

.room::before {
  content: "";
  position: absolute;
  inset: 0;
  z-index: -1;
  background:
    linear-gradient(100deg, rgba(8, 32, 38, .9) 0%, rgba(8, 32, 38, .72) 42%, rgba(8, 32, 38, .2) 75%),
    linear-gradient(180deg, rgba(8, 32, 38, .35), rgba(8, 32, 38, 0) 30%);
}

.brand {
  display: inline-flex;
  align-items: center;
  gap: 12px;
  text-decoration: none;
}

.brand img { width: 44px; height: 44px; border-radius: 50%; }

.brand span { font-size: 1.375rem; }

.hero {
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  gap: clamp(36px, 6vw, 72px);
  align-items: center;
  max-width: 1180px;
  margin: 0 auto;
  padding: clamp(28px, 7vw, 88px) var(--gutter) clamp(72px, 10vw, 150px);
}

@media (min-width: 860px) {
  .hero { grid-template-columns: minmax(0, 1.15fr) minmax(0, .85fr); }
}

.hero-icon {
  width: clamp(88px, 11vw, 120px);
  height: auto;
  margin-bottom: 20px;
  border-radius: 50%;
  box-shadow: 0 10px 30px rgba(0, 0, 0, .35);
}

.hero h1 {
  margin: 0;
  font-size: clamp(3rem, 8.4vw, 5.6rem);
  color: var(--ivory);
}

.hero .tagline {
  margin: .35em 0 0;
  font-size: clamp(1.5rem, 3.4vw, 2.2rem);
  color: var(--surface);
}

.hero .pitch {
  max-width: 34rem;
  margin: 1.1rem 0 0;
  font-size: 1.125rem;
  color: rgba(234, 252, 255, .9);
}

.stores {
  display: flex;
  flex-wrap: wrap;
  gap: 12px;
  margin-top: 28px;
}

/* Apple's and Google's own badges. Google's picture has clear space around the badge (41 of its 250 px
   height on every side), so it is drawn larger and pulled in to match Apple's badge. */
.stores { align-items: center; }

.badge {
  --badge: 52px;
  display: inline-block;
  border-radius: 10px;
  line-height: 0;
}

.badge img { width: auto; height: var(--badge); }

.badge.google img {
  height: calc(var(--badge) * 250 / 168);
  margin: calc(var(--badge) * -41 / 168);
}


/* ---------- The board from the game ---------- */

.hero-shot {
  justify-self: center;
  width: min(100%, 320px);
  margin: 0;
}

@media (min-width: 860px) {
  .hero-shot { width: min(100%, 400px); }
}

.hero-shot img {
  width: 100%;
  border-radius: 28px;
  border: 3px solid rgba(243, 234, 215, .9);
  box-shadow: 0 30px 60px rgba(2, 16, 22, .55);
}

/* ---------- Under the water ---------- */

.sea {
  position: relative;
  margin-top: -1px;
  background:
    radial-gradient(70% 380px at 50% 0, rgba(143, 233, 246, .35), transparent 70%),
    linear-gradient(180deg, var(--water-mid) 0, var(--water-deep) 520px, var(--abyss) 1100px);
}

.surface {
  position: absolute;
  bottom: 100%;
  left: 0;
  width: 100%;
  height: clamp(36px, 6vw, 72px);
  color: var(--water-mid);
}

.surface path:first-child { color: var(--surface); }

/* The row runs edge to edge. Its first picture lines up with the text column, and the sides fade out
   where more pictures are hidden (--fade-left and --fade-right, set by assets/js/shots.js). */
.shots {
  --edge: max(var(--gutter), calc((100% - 1180px) / 2 + var(--gutter)));
  --fade-left: 0px;
  --fade-right: 56px;
  display: flex;
  gap: clamp(14px, 2.2vw, 24px);
  margin: 0;
  padding: 24px var(--edge) 40px;
  overflow-x: auto;
  overscroll-behavior-x: contain;
  scroll-padding-inline: var(--edge);
  list-style: none;
  scrollbar-width: none;
  user-select: none;
  -webkit-user-select: none;
  -webkit-mask-image: linear-gradient(90deg, transparent, #000 var(--fade-left), #000 calc(100% - var(--fade-right)), transparent);
  mask-image: linear-gradient(90deg, transparent, #000 var(--fade-left), #000 calc(100% - var(--fade-right)), transparent);
}

.shots::-webkit-scrollbar { display: none; }

/* Fingers swipe the row natively and land on a picture. */
@media (pointer: coarse) {
  .shots { scroll-snap-type: x mandatory; }
}

/* A mouse grabs the row and swipes it. */
@media (hover: hover) and (pointer: fine) {
  .shots { cursor: grab; }
}

.shots.is-dragging { cursor: grabbing; }

.shots li { flex: 0 0 auto; scroll-snap-align: start; }

.shots img {
  width: clamp(200px, 22vw, 260px);
  height: auto;
  aspect-ratio: 1320 / 2868;
  border-radius: 22px;
  border: 3px solid rgba(243, 234, 215, .9);
  background: var(--water-deep);
  box-shadow: 0 18px 40px rgba(2, 20, 40, .45);
  -webkit-user-drag: none;
}

.facts {
  max-width: 1180px;
  margin: 0 auto;
  padding: clamp(32px, 6vw, 72px) var(--gutter) clamp(48px, 8vw, 96px);
  display: grid;
  gap: clamp(28px, 4vw, 48px);
}

@media (min-width: 860px) {
  .facts { grid-template-columns: minmax(0, .9fr) minmax(0, 1.1fr); align-items: start; }
}

.facts h2 {
  margin: 0;
  font-size: clamp(2rem, 4.6vw, 3.2rem);
  color: var(--ivory);
}

.facts ul {
  margin: 0;
  padding: 0;
  list-style: none;
  display: grid;
  gap: 18px;
}

.facts li {
  position: relative;
  padding-left: 46px;
  font-size: 1.1875rem;
  line-height: 1.45;
  max-width: 34rem;
}

/* A bubble for each point. */
.facts li::before {
  content: "";
  position: absolute;
  left: 4px;
  top: .1em;
  width: 24px;
  height: 24px;
  border-radius: 50%;
  border: 2px solid rgba(234, 252, 255, .8);
  background: radial-gradient(circle at 32% 30%, rgba(255, 255, 255, .9) 0 3px, rgba(143, 233, 246, .25) 4px);
}

.facts li:nth-child(even)::before { left: 10px; width: 16px; height: 16px; top: .35em; }

.again {
  display: grid;
  justify-items: center;
  gap: 6px;
  padding: 0 var(--gutter) clamp(56px, 8vw, 96px);
  text-align: center;
}

.again > img { width: 76px; height: 76px; border-radius: 50%; }
.again h2 { margin: 10px 0 0; font-size: clamp(1.75rem, 4vw, 2.4rem); color: var(--ivory); }
.again .stores { justify-content: center; margin-top: 18px; }

/* ---------- Footer ---------- */

.footer {
  border-top: 1px solid rgba(234, 252, 255, .12);
  padding: 28px var(--gutter) 40px;
  font-size: .9375rem;
  color: rgba(234, 252, 255, .78);
}

.footer-inner {
  max-width: 1180px;
  margin: 0 auto;
  display: flex;
  flex-wrap: wrap;
  gap: 14px 28px;
  justify-content: space-between;
  align-items: center;
}

.footer nav ul {
  display: flex;
  flex-wrap: wrap;
  gap: 8px 24px;
  margin: 0;
  padding: 0;
  list-style: none;
}

.footer a { text-underline-offset: 3px; }
.footer p { margin: 0; }

.footer .legal { flex-basis: 100%; font-size: .8125rem; color: rgba(234, 252, 255, .55); }

/* ---------- Text pages: support, privacy, terms ---------- */

.room.slim .bar {
  max-width: 900px;
  margin: 0 auto;
  padding: 22px var(--gutter) 92px;
}

.sheet {
  position: relative;
  max-width: 860px;
  margin: -64px auto 0;
  padding: clamp(28px, 5vw, 56px) clamp(20px, 5vw, 64px) clamp(36px, 5vw, 64px);
  border: 3px solid var(--ivory-edge);
  border-radius: 28px;
  background: var(--ivory);
  color: var(--ink);
  box-shadow: 0 0 0 6px rgba(217, 164, 65, .55), 0 30px 60px rgba(2, 20, 40, .35);
}

.page {
  padding: 0 var(--gutter) clamp(48px, 8vw, 96px);
}

.sheet > * { max-width: var(--measure); }

.sheet h1 {
  margin: 0;
  font-size: clamp(2.2rem, 6vw, 3.2rem);
  color: var(--ink);
}

.sheet .lead { margin-top: .75rem; font-size: 1.1875rem; color: var(--ink-soft); }

.sheet h2 {
  margin: 2.2em 0 .5em;
  font: 400 1.6rem/1.15 var(--display);
  color: var(--ink);
}

.sheet h3 { margin: 1.6em 0 .3em; font-size: 1.125rem; }

.sheet p, .sheet li { color: #253f62; }
.sheet ul { padding-left: 1.25em; }
.sheet li + li { margin-top: .35em; }
.sheet a { color: #0d5e8f; text-underline-offset: 3px; }

.meta { font-size: .9375rem; color: var(--ink-soft); }

.table-wrap { margin: 1em 0 .5em; overflow-x: auto; }

.sheet table {
  width: 100%;
  border-collapse: collapse;
  font-size: .9375rem;
  line-height: 1.45;
  color: #253f62;
}

.sheet th, .sheet td {
  padding: 10px 12px 10px 0;
  border-bottom: 2px solid var(--ivory-edge);
  text-align: left;
  vertical-align: top;
}

.sheet th { color: var(--ink); font-weight: 700; }

.faq details {
  border-bottom: 2px solid var(--ivory-edge);
  padding: 4px 0;
}

.faq summary {
  cursor: pointer;
  list-style: none;
  display: flex;
  justify-content: space-between;
  gap: 16px;
  padding: 14px 0;
  font: 400 1.3rem/1.2 var(--display);
  color: var(--ink);
}

.faq summary::-webkit-details-marker { display: none; }

.faq summary::after {
  content: "+";
  flex: none;
  width: 30px;
  height: 30px;
  display: grid;
  place-items: center;
  border-radius: 50%;
  background: #2f9fd0;
  color: #fff;
  font-size: 1.3rem;
  line-height: 1;
  transition: rotate .2s ease;
}

.faq details[open] summary::after { rotate: 45deg; }

.faq details > :not(summary) { margin-top: 0; }

.contact {
  margin-top: 2.4em;
  padding: 20px 24px;
  border-radius: 18px;
  background: #e1f4f8;
}

.contact h2 { margin-top: 0; }

.button {
  display: inline-block;
  padding: 12px 26px;
  border: 3px solid #fffaf0;
  border-radius: 999px;
  background: linear-gradient(#5fd06e, #2fa84a);
  box-shadow: 0 4px 0 #1f7a35;
  color: #fff;
  font: 400 1.25rem/1.1 var(--display);
  text-decoration: none;
  text-shadow: 0 2px 0 rgba(10, 60, 30, .45);
}

.sheet a.button { color: #fff; }

@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after {
    animation-duration: .01ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: .01ms !important;
  }
}