/* bolr.ca: one page, read on a phone in a dark room. */

:root {
  --bg: #0b0b0d;
  --text: #f5f5f2;
  --muted: #9a9aa2;
  --line: #2c2c33;
  --red: #ea0201;
  --facebook: #1877f2;
}

* { box-sizing: border-box; }

html { height: 100%; background: var(--bg); }

body {
  margin: 0;
  min-height: 100%;
  background: var(--bg);
  color: var(--text);
  font: 600 1.25rem/1.2 system-ui, -apple-system, "Segoe UI", Roboto, sans-serif;
  -webkit-text-size-adjust: 100%;
}

/*
  Fog: three sheets of tiling noise (purple, blue, violet) drifting behind the
  logo. Each sheet is one tile larger than the screen and slides by exactly one
  tile, so the loop has no seam. Only transforms animate, which a phone does
  cheaply. Speed: the three durations. Strength: .fog's opacity. Shape: --shape, five
  overlapping soft blobs of different sizes around the logo, so the fog thins
  out unevenly like smoke instead of filling one neat ellipse.
*/
.fog {
  position: fixed;
  inset: 0;
  overflow: hidden;
  pointer-events: none;
  opacity: 0.4;
  --shape:
    radial-gradient(ellipse 26rem 14rem at calc(50% + -10rem) calc(50% - 3.25rem + -5rem), #000 0%, rgb(0 0 0 / 0.3) 45%, transparent 100%),
    radial-gradient(ellipse 24rem 16rem at calc(50% + 12rem) calc(50% - 3.25rem + 1rem), #000 0%, rgb(0 0 0 / 0.3) 45%, transparent 100%),
    radial-gradient(ellipse 22rem 13rem at calc(50% + -5rem) calc(50% - 3.25rem + 6rem), #000 0%, rgb(0 0 0 / 0.3) 45%, transparent 100%),
    radial-gradient(ellipse 18rem 11rem at calc(50% + 4rem) calc(50% - 3.25rem + -10rem), #000 0%, rgb(0 0 0 / 0.3) 45%, transparent 100%),
    radial-gradient(ellipse 15rem 9rem at calc(50% + -17rem) calc(50% - 3.25rem + 3rem), #000 0%, rgb(0 0 0 / 0.3) 45%, transparent 100%);
  -webkit-mask-image: var(--shape);
  mask-image: var(--shape);
}

.fog i {
  position: absolute;
  mix-blend-mode: screen;
  will-change: transform;
}

.fog i:nth-child(1) {
  inset: 0 -900px 0 0;
  background: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='512' height='512'%3E%3Cfilter id='n' x='0' y='0' width='100%' height='100%'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.006 0.010' numOctaves='4' seed='3' stitchTiles='stitch'/%3E%3CfeColorMatrix values='0 0 0 0 0.22  0 0 0 0 0  0 0 0 0 0.52  3.2 0 0 0 -1.42'/%3E%3C/filter%3E%3Crect width='100%' height='100%' filter='url(%23n)'/%3E%3C/svg%3E") 0 0 / 900px 900px;
  animation: fog-left 22s linear infinite;
}

.fog i:nth-child(2) {
  inset: 0 0 -1300px -1300px;
  background: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='512' height='512'%3E%3Cfilter id='n' x='0' y='0' width='100%' height='100%'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.004 0.007' numOctaves='4' seed='11' stitchTiles='stitch'/%3E%3CfeColorMatrix values='0 0 0 0 0.02  0 0 0 0 0.02  0 0 0 0 0.46  3.2 0 0 0 -1.42'/%3E%3C/filter%3E%3Crect width='100%' height='100%' filter='url(%23n)'/%3E%3C/svg%3E") 0 0 / 1300px 1300px;
  animation: fog-rise 34s linear infinite;
}

.fog i:nth-child(3) {
  inset: -1100px -1100px 0 0;
  background: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='512' height='512'%3E%3Cfilter id='n' x='0' y='0' width='100%' height='100%'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.005 0.008' numOctaves='4' seed='23' stitchTiles='stitch'/%3E%3CfeColorMatrix values='0 0 0 0 0.28  0 0 0 0 0  0 0 0 0 0.40  3.2 0 0 0 -1.42'/%3E%3C/filter%3E%3Crect width='100%' height='100%' filter='url(%23n)'/%3E%3C/svg%3E") 0 0 / 1100px 1100px;
  animation: fog-fall 28s linear infinite;
}

@keyframes fog-left { to { transform: translate3d(-900px, 0, 0); } }

@keyframes fog-rise { to { transform: translate3d(1300px, -1300px, 0); } }

@keyframes fog-fall { to { transform: translate3d(-1100px, 1100px, 0); } }

main {
  position: relative;
  min-height: 100vh;
  min-height: 100dvh;
  max-width: 30rem;
  margin: 0 auto;
  padding: max(1.5rem, env(safe-area-inset-top)) 1.25rem max(1.5rem, env(safe-area-inset-bottom));
  display: flex;
  flex-direction: column;
  justify-content: center;
  gap: 2rem;
}

.logo { margin: 0; }

.logo img {
  display: block;
  width: 100%;
  height: auto;
  max-height: 34vh;
  object-fit: contain;
}

.buttons {
  display: flex;
  flex-direction: column;
  gap: 1rem;
}

.btn {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 0.75rem;
  min-height: 4.5rem;
  padding: 1rem 1.25rem;
  border: 2px solid transparent;
  border-radius: 1rem;
  color: #fff;
  text-align: center;
  text-decoration: none;
  -webkit-tap-highlight-color: transparent;
  transition: transform 80ms ease-out, filter 80ms ease-out;
}

.btn .icon { width: 1.75rem; height: 1.75rem; flex: none; }

.btn:active { transform: scale(0.98); filter: brightness(1.15); }

.btn:focus-visible { outline: 3px solid #fff; outline-offset: 3px; }

.btn.facebook { background: var(--facebook); }

.btn.tip { background: var(--red); }

.btn.request { border-color: var(--text); color: var(--text); }

/* Coming soon: present, plainly not tappable. */
.btn.soon {
  background: none;
  border-color: var(--line);
  color: var(--muted);
  pointer-events: none;
  flex-direction: column;
  gap: 0.25rem;
}

.btn.soon::after {
  content: "coming soon";
  font-size: 0.75rem;
  font-weight: 500;
  letter-spacing: 0.12em;
  text-transform: uppercase;
}

@media (prefers-reduced-motion: reduce) {
  .btn { transition: none; }
  .fog i { animation: none; }
}