:root {
  --blue: #1B5E7E;
  --blue-soft: rgba(27, 94, 126, 0.34);
  --ink: #0d1b22;
  --muted: #5b6b73;
  color-scheme: light;
}

* { box-sizing: border-box; }

html, body { height: 100%; }

body {
  margin: 0;
  min-height: 100vh;
  min-height: 100dvh;
  display: flex;
  flex-direction: column;
  background: #fff;
  color: var(--ink);
  font-family: "Avenir Next", Avenir, "Century Gothic", "Segoe UI", system-ui, -apple-system, Roboto, Helvetica, Arial, sans-serif;
  -webkit-font-smoothing: antialiased;
  overflow: hidden;
  position: relative;
}

main {
  flex: 1;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  text-align: center;
  padding: 48px 24px 24px;
  position: relative;
  z-index: 1;
}

.logo {
  width: min(380px, 72vw);
  height: auto;
  display: block;
}

h1 {
  margin: 40px 0 0;
  font-size: clamp(26px, 4.6vw, 44px);
  font-weight: 600;
  line-height: 1.15;
  letter-spacing: -0.01em;
  text-wrap: balance;
}

footer {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 12px;
  flex-wrap: wrap;
  padding: 20px 24px 28px;
  font-size: 13px;
  color: var(--muted);
  position: relative;
  z-index: 1;
}

/* The blue dot, dropping into still water */
.water {
  position: absolute;
  left: 50%;
  bottom: -6vmin;
  width: 0;
  height: 0;
  pointer-events: none;
}

.water .ring,
.tap {
  position: absolute;
  left: 0;
  top: 0;
  border-radius: 50%;
  transform: translate(-50%, -50%);
}

.water .ring,
.tap {
  width: 120vmax;
  height: 120vmax;
  border: 1.5px solid var(--blue-soft);
  transform: translate(-50%, -50%) scale(0.02);
  opacity: 0;
  animation: ripple 9s cubic-bezier(0.2, 0.6, 0.3, 1) infinite;
}

.water .ring:nth-child(2) { animation-delay: 3s; }
.water .ring:nth-child(3) { animation-delay: 6s; }

/* ripples made by a click or tap */
.tap {
  position: fixed;
  pointer-events: none;
  width: 60vmax;
  height: 60vmax;
  animation: ripple 2.4s cubic-bezier(0.2, 0.6, 0.3, 1) 1 forwards;
}

@keyframes ripple {
  0%   { transform: translate(-50%, -50%) scale(0.02); opacity: 0; }
  8%   { opacity: 1; }
  60%  { opacity: 0.7; }
  100% { transform: translate(-50%, -50%) scale(1); opacity: 0; }
}

@media (prefers-reduced-motion: reduce) {
  .water .ring {
    animation: none;
    opacity: 1;
  }
  .water .ring:nth-child(1) { transform: translate(-50%, -50%) scale(0.35); }
  .water .ring:nth-child(2) { transform: translate(-50%, -50%) scale(0.6); }
  .water .ring:nth-child(3) { transform: translate(-50%, -50%) scale(0.85); }
}