/* The landing page: a day on the lawn, morning to night as you scroll (day.js sets the colour). Each scene
   sets a working piece of Benji on the grass. Without a script everything is shown at once and in its end state. */
:root {
  --field: #2d7148;
  --ink: #1d1d1f;
  --app: #5e5ce6;
  --ok: oklch(0.62 0.15 150);
  --sys: -apple-system, BlinkMacSystemFont, "Helvetica Neue", sans-serif;
}
/* The lawn is the page's own background, not a fixed layer: iOS Safari draws the page behind its status bar and
   toolbar but clips fixed layers short of them, and fills the bars with a flat colour when a fixed layer covers the
   screen. So the field, its stripes and grain are here, and the sky above them only holds the light. */
html {
  overflow-x: clip;
  background:
    url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='180' height='180'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.85' numOctaves='2'/%3E%3CfeColorMatrix values='0 0 0 0 1 0 0 0 0 1 0 0 0 0 1 0 0 0 .07 0'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E"),
    repeating-linear-gradient(90deg, rgb(255 255 255 / 0.035) 0 7rem, transparent 7rem 14rem), var(--field);
}
body {
  display: block;
  background: none;
}
a:hover {
  color: var(--ball);
}
.sky {
  position: fixed;
  inset: 0;
  overflow: hidden;
  pointer-events: none;
  background: radial-gradient(ellipse at 50% 42%, transparent 35%, rgb(5 14 9 / 0.55) 130%);
  /* Fades out before the bars, where the lawn below shows without it. */
  mask-image: linear-gradient(transparent, #000 12%, #000 88%, transparent);
}
.sun,
.moon {
  position: absolute;
  left: -10vmax;
  top: -30vmax;
  width: 70vmax;
  height: 70vmax;
  border-radius: 50%;
  background: radial-gradient(circle, rgb(255 236 190 / 0.32), transparent 62%);
}
.moon {
  opacity: 0;
  background: radial-gradient(circle, rgb(190 210 255 / 0.2), transparent 60%);
}
.flies {
  position: absolute;
  inset: 0;
  opacity: 0;
}
.flies i {
  position: absolute;
  width: 4px;
  height: 4px;
  border-radius: 50%;
  background: #e8f7a0;
  box-shadow: 0 0 10px 3px rgb(220 242 62 / 0.55);
}
.prints {
  z-index: 3;
}
.prints svg {
  transition: fill 1s;
}
/* The header stays at the top of the page rather than over the scenes, where it would sit on their words. */
header {
  position: absolute;
  inset: 0 0 auto;
  z-index: 4;
  padding: max(1.5rem, env(safe-area-inset-top)) max(1.25rem, 4vw, env(safe-area-inset-right)) 1.5rem
    max(1.25rem, 4vw, env(safe-area-inset-left));
}
main {
  display: block;
  position: relative;
  overflow-x: clip;
  padding: 0;
}
.tag {
  color: rgb(246 239 220 / 0.75);
}

.hero {
  display: grid;
  place-content: center;
  justify-items: center;
  min-height: 100svh;
  padding: 6rem 1.25rem 4rem;
}
.stay {
  font-size: clamp(6rem, 27vw, 19rem);
}
.ball {
  z-index: 5;
}
.line {
  max-width: 26ch;
  font-size: clamp(1.25rem, 2.6vw, 1.75rem);
}
.fetched {
  display: flex;
  align-items: center;
  gap: 0.75rem;
  max-width: 100%;
  margin-top: 1.5rem;
  padding: 0.75rem 1rem 0.75rem 0.75rem;
  border-radius: 22px;
  background: rgb(255 255 255 / 0.94);
  color: var(--ink);
  font: 600 15px / 1.3 var(--sys);
  text-align: left;
  box-shadow: 0 24px 50px rgb(0 0 0 / 0.3);
  opacity: 0;
  transform: translateY(14px) scale(0.9);
}
.fetched.on {
  opacity: 1;
  transform: none;
}
.fetched b {
  display: block;
  font-size: 11px;
  letter-spacing: 0.04em;
  text-transform: uppercase;
  color: var(--app);
}
.pup {
  flex: none;
  width: 24px;
  height: 24px;
  padding: 4px;
  border-radius: 50%;
  background: var(--ball);
  fill: #123c26;
}
.ok {
  width: 22px;
  height: 22px;
  fill: var(--ok);
}
.ribbon {
  display: flex;
  overflow: hidden;
  margin: 0 -5vw;
  padding: 0.9rem 0;
  rotate: -3deg;
  background: var(--ball);
  color: #123c26;
  font:
    500 1.05rem / 1 "DM Mono",
    monospace;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  white-space: nowrap;
  box-shadow: 0 18px 40px rgb(0 0 0 / 0.25);
}
.ribbon p {
  flex: none;
  padding-right: 0.6em;
}

.promises {
  display: flex;
  flex-wrap: wrap;
  gap: 16px;
  max-width: 1220px;
  margin: 0 auto;
  padding: 6vh max(1.25rem, 5vw) 10vh;
  text-align: left;
}
/* Two pairs, so the cards read four across, two by two or one column, never three and one. */
.promises > div {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(min(100%, 240px), 1fr));
  flex: 1 1 520px;
  gap: 16px;
}
.promises article {
  padding: 22px;
  border-radius: 24px;
  background: rgb(5 14 9 / 0.32);
  box-shadow: inset 0 0 0 1px rgb(246 239 220 / 0.14);
  color: rgb(246 239 220 / 0.75);
  rotate: -1deg;
}
.promises article:nth-child(2) {
  rotate: 1.5deg;
}
.promises svg {
  width: 26px;
  height: 26px;
  fill: var(--ball);
}
.cut {
  fill: none;
  stroke: #123c26;
  stroke-width: 2.2;
  stroke-linecap: round;
  stroke-linejoin: round;
}
.ok .cut {
  stroke: #fff;
}
.promises h3 {
  margin: 12px 0 8px;
  color: var(--cream);
  font: italic 560 1.5rem / 1.15 var(--serif);
}
footer {
  display: block;
  padding: 8vh max(1.25rem, env(safe-area-inset-right)) calc(7vh + env(safe-area-inset-bottom))
    max(1.25rem, env(safe-area-inset-left));
  text-align: center;
}
.soon {
  font: italic 560 clamp(3rem, 10vw, 7rem) / 0.9 var(--serif);
  letter-spacing: -0.04em;
}
.soon i {
  color: var(--ball);
}
footer .tag {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: 10px 28px;
  margin-top: 28px;
}
footer a {
  display: inline-block;
  padding: 0.6rem 0;
}
@media (max-width: 40rem) {
  header .tag {
    display: none;
  }
}

/* Motion, only for those who have not asked for less. */
@media (prefers-reduced-motion: no-preference) {
  .fetched {
    transition:
      opacity 0.35s,
      transform 0.55s cubic-bezier(0.2, 0.9, 0.3, 1.3);
  }
  .ribbon p {
    animation: ribbon 38s linear infinite;
  }
  .night .flies i {
    animation: firefly 6s ease-in-out infinite;
  }
}
@keyframes ribbon {
  to {
    transform: translateX(-100%);
  }
}
@keyframes firefly {
  50% {
    transform: translate(18px, -26px);
    opacity: 0.4;
  }
  25%,
  75% {
    opacity: 1;
  }
}