:root {
  color-scheme: dark;
  background: #000;
  --ribbit-green: #00ff10;
  --banner-row-height: clamp(34px, 4vw, 52px);
  --banner-height: calc(var(--banner-row-height) * 2);
  --brand-height: calc(var(--banner-row-height) - 10px);
  --brand-gap: clamp(20px, 2vw, 30px);
}

* {
  box-sizing: border-box;
}

html,
body {
  width: 100%;
  height: 100%;
  margin: 0;
  overflow: hidden;
  background: #000;
}

body {
  position: fixed;
  inset: 0;
}

.ribbit-banner {
  position: absolute;
  inset: 0 0 auto;
  height: var(--banner-height);
  display: block;
  overflow: hidden;
  background: #000;
  user-select: none;
}

.banner-row {
  height: var(--banner-row-height);
  display: flex;
  align-items: center;
  overflow: hidden;
}

.banner-row--top {
  background: var(--ribbit-green);
}

.banner-row--bottom {
  background: #000;
  border-bottom: 1px solid var(--ribbit-green);
}

.banner-track {
  display: flex;
  width: max-content;
  flex: none;
  animation: banner-scroll 28s linear infinite;
  will-change: transform;
}

.banner-row--bottom .banner-track {
  animation-direction: reverse;
}

.banner-group {
  display: flex;
  flex: none;
  align-items: center;
  justify-content: space-around;
  min-width: 100vw;
  gap: var(--brand-gap);
  padding-right: var(--brand-gap);
}

.brand-mark {
  position: relative;
  display: block;
  flex: none;
  height: var(--brand-height);
  aspect-ratio: 510 / 154;
  overflow: hidden;
  background: var(--ribbit-green);
  isolation: isolate;
}

/* Isolate the original wordmark; the source photograph and its lettering stay intact. */
.brand-mark img {
  position: absolute;
  width: 250.980392%;
  height: auto;
  max-width: none;
  left: -50.980392%;
  top: -97.402597%;
  filter: grayscale(1);
  mix-blend-mode: multiply;
  -webkit-user-drag: none;
}

.banner-row--top .brand-mark img {
  filter: grayscale(1) invert(1);
}

@keyframes banner-scroll {
  to { transform: translateX(-50%); }
}

.loading-label {
  position: fixed;
  bottom: calc(clamp(32px, 7vh, 72px) + env(safe-area-inset-bottom, 0px));
  left: 50%;
  transform: translateX(-50%);
  z-index: 3;
  display: flex;
  align-items: center;
  gap: 0.6em;
  margin: 0;
  color: #fff;
  font: 500 clamp(20px, 2vw, 28px) / 1.4 ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;
  text-shadow: 0 2px 8px #000;
  pointer-events: none;
  user-select: none;
}

.terminal-command {
  display: inline-block;
  flex: none;
  width: 12ch;
  white-space: nowrap;
}

.terminal-cursor {
  animation: terminal-blink 1s steps(1, end) infinite;
}

@keyframes terminal-blink {
  50% { opacity: 0; }
}

.loading-frogs {
  display: inline-flex;
  align-items: center;
  gap: 9px;
}

.loading-frog {
  display: block;
  width: 36px;
  height: auto;
  aspect-ratio: 36 / 31;
  image-rendering: pixelated;
  transform-origin: 50% 100%;
  animation: loading-frog-hop 1.4s ease-in-out infinite;
}

.loading-frog--black {
  filter: drop-shadow(0.6px 0 0 #999) drop-shadow(-0.6px 0 0 #999)
    drop-shadow(0 0.6px 0 #999) drop-shadow(0 -0.6px 0 #999);
}

.loading-frog:nth-child(2) { animation-delay: 0.18s; }
.loading-frog:nth-child(3) { animation-delay: 0.36s; }
.loading-frog:nth-child(4) { animation-delay: 0.54s; }

@keyframes loading-frog-hop {
  0%, 65%, 100% { transform: translateY(0) scale(1); }
  12% { transform: translateY(0) scale(1.08, 0.88); }
  30% { transform: translateY(-9px) scale(0.97, 1.06); }
  48% { transform: translateY(0) scale(1.07, 0.9); }
}

#stage {
  position: absolute;
  top: var(--banner-height);
  bottom: 0;
  width: 100%;
  overflow: hidden;
  background: #000;
  isolation: isolate;
}

#frog {
  position: absolute;
  top: 0;
  left: 0;
  width: min(18vw, 235px, 34vh);
  aspect-ratio: 941 / 851;
  transform: translate3d(-100vw, -100vh, 0);
  transform-origin: 50% 100%;
  will-change: transform;
  pointer-events: none;
  user-select: none;
  contain: layout paint style;
  z-index: 1;
}

.water-layer {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  pointer-events: none;
  image-rendering: pixelated;
}

#splashes {
  z-index: 2;
}

#frog canvas {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: contain;
  image-rendering: pixelated;
  -webkit-user-drag: none;
}

@media (max-width: 560px) {
  #frog {
    width: min(33vw, 31vh);
  }
}

@media (max-width: 360px) {
  .loading-label {
    flex-direction: column;
    gap: 18px;
  }
}

@media (prefers-reduced-motion: reduce) {
  .loading-frog,
  .terminal-cursor {
    animation: none;
  }

  .banner-track {
    animation: none;
    will-change: auto;
  }

  #frog {
    will-change: auto;
  }
}