/* Woken Beasts: a roadside marquee sign under a summer sky. The sign is the one loud thing; the rest stays quiet. */
:root {
  --sky: #8fc6e8;          /* midwest summer, 3pm */
  --sky-low: #cfe6f2;
  --field: #b9a35a;        /* August hay */
  --panel: #fdfcf6;        /* backlit sign plastic */
  --letter: #000;          /* changeable sign letters */
  --frame: #c4202e;        /* old glory red */
  --bulb: #ffc94a;
  --ink: #102a3a;          /* body text on sky: deep denim */
  --muted: #3c5a6b;
  --olive: #4b5320;        /* drab, for the go button */
  --post: #5b6066;
  --focus: #ffb000;
  --sign-font: "Big Shoulders Display", "Arial Narrow", sans-serif;
  --ui-font: "Archivo", system-ui, sans-serif;
}

* { box-sizing: border-box; }
[hidden] { display: none !important; }
html { background: var(--sky); }
body {
  margin: 0; color: var(--ink); font-family: var(--ui-font); font-size: 1.0625rem; line-height: 1.5;
  background: linear-gradient(var(--sky) 0 46%, var(--sky-low) 72%, var(--field) 72.2% 100%);
  background-attachment: fixed; min-height: 100vh;
}
main { max-width: 46rem; margin: 0 auto; padding: 0 1rem 4rem; }

/* ------------------------------------------------------------ banner: the hero */
.banner { margin: 0; }
.banner img { display: block; width: 100%; height: clamp(14rem, 52vw, 34rem); object-fit: cover; object-position: 50% 42%; }
a { color: var(--ink); }
:focus-visible { outline: 3px solid var(--focus); outline-offset: 3px; }

/* ------------------------------------------------------------ the sign */
.roadside { display: grid; justify-items: center; margin-top: -2.2rem; position: relative; }
.roadside .sign { max-width: 32rem; }
.sign {
  position: relative; width: 100%; background: var(--frame); padding: 1.1rem; border-radius: 6px;
  box-shadow: 0 1.2rem 1.8rem -1rem rgba(16, 42, 58, .45);
}
.bulbs {
  position: absolute; inset: .35rem; border-radius: 4px; pointer-events: none;
  background:
    radial-gradient(circle, var(--bulb) 0 .2rem, transparent .23rem) 0 0 / 1.35rem .7rem repeat-x,
    radial-gradient(circle, var(--bulb) 0 .2rem, transparent .23rem) 0 100% / 1.35rem .7rem repeat-x;
}
.panel {
  background: var(--panel); padding: 1rem .75rem 1.1rem; border-radius: 2px;
  /* the grooves the letters slide into */
  background-image: repeating-linear-gradient(transparent 0 calc(3.6rem - 2px), rgba(0, 0, 0, .07) calc(3.6rem - 2px) 3.6rem);
  box-shadow: inset 0 0 2rem rgba(255, 220, 140, .35);
}
.row { margin: 0; display: flex; flex-wrap: wrap; justify-content: center; gap: .12em .38em; min-height: 3.6rem; align-items: center;
  font: 900 clamp(1.3rem, 5vw, 2.3rem)/1 var(--sign-font); color: var(--letter); }
.row .word { display: inline-flex; gap: .1em; white-space: nowrap; }
.row .tile {
  display: inline-block; min-width: .62em; text-align: center; padding: .05em .03em 0;
  background: #fff; box-shadow: 0 1px 0 rgba(0, 0, 0, .18); transform-origin: 50% 0;
}
.row-price, .row-count { font-weight: 700; }
.posts { display: flex; justify-content: space-between; width: 46%; max-width: 15rem; height: 2.4rem; }
.posts span { width: .7rem; background: var(--post); }

/* one orchestrated moment: the letters get hung on the sign at page load */
@media (prefers-reduced-motion: no-preference) {
  .row .tile.hang { animation: hang .5s cubic-bezier(.3, 1.6, .5, 1) both; animation-delay: calc(var(--i) * 28ms); }
  @keyframes hang { from { transform: rotate(-14deg) translateY(-.4em); opacity: 0; } }
  .row-count .tile.flip { animation: flip .35s ease-out; }
  @keyframes flip { 50% { transform: scaleY(.1); } }
}

/* ------------------------------------------------------------ the counter */
.counter { margin-top: .5rem; text-align: center; }
h1 { font: 800 clamp(1.45rem, 4.4vw, 2rem)/1.15 var(--ui-font); font-stretch: 112%; margin: 0 0 .4rem; letter-spacing: -.01em; }
.phase { margin: 0 0 1.4rem; color: var(--muted); }

.qty { display: inline-flex; align-items: center; gap: .6rem; margin-bottom: 1rem; }
.qty button {
  width: 2.75rem; height: 2.75rem; border-radius: 50%; border: 2px solid var(--ink); background: var(--panel);
  font: 700 1.4rem/1 var(--ui-font); color: var(--ink); cursor: pointer;
}
.qty button:disabled { opacity: .35; cursor: default; }
.qty output { min-width: 2.5ch; font: 900 2.2rem/1 var(--sign-font); }
.total { font-weight: 600; min-width: 9ch; text-align: left; }

.go {
  display: block; width: min(100%, 22rem); margin: 0 auto; padding: 1rem 1.25rem; border: 0; border-radius: 999px;
  background: var(--olive); color: #fff; font: 700 1.15rem/1.2 var(--ui-font); font-stretch: 108%; cursor: pointer;
  box-shadow: 0 .3rem 0 #2c3112;
}
.go:active { transform: translateY(.2rem); box-shadow: 0 .1rem 0 #2c3112; }
.go:disabled { background: var(--post); box-shadow: none; cursor: default; }
.note { min-height: 1.5rem; margin: .8rem auto 0; max-width: 34rem; }
.note.bad { color: #8f1420; font-weight: 600; }
.note.good { color: #1f4d17; font-weight: 600; }

.wallets { margin: 1rem auto 0; max-width: 22rem; background: var(--panel); border-radius: 12px; padding: .75rem; text-align: left; }
.wallets p { margin: 0 0 .5rem; font-weight: 600; }
.wallets ul { list-style: none; margin: 0; padding: 0; display: grid; gap: .4rem; }
.wallets button, .wallets a {
  display: flex; align-items: center; gap: .6rem; width: 100%; padding: .6rem .7rem; border: 1px solid rgba(16, 42, 58, .2);
  border-radius: 8px; background: #fff; font: 600 1rem var(--ui-font); color: var(--ink); cursor: pointer; text-decoration: none;
}
.wallets img { width: 1.5rem; height: 1.5rem; }

.reveal {
  margin: 1.5rem auto 0; display: block; padding: .8rem 1.2rem; border: 2px dashed var(--frame); border-radius: 10px;
  background: var(--panel); color: var(--frame); font: 800 1.05rem var(--ui-font); cursor: pointer;
}

/* ------------------------------------------------------------ how it works */
.how { margin-top: 3rem; background: rgba(253, 252, 246, .86); border-radius: 14px; padding: 1.25rem 1.4rem; }
h2 { font: 800 1.25rem/1.2 var(--ui-font); margin: 0 0 .6rem; }
.how ol { margin: 0; padding-left: 1.3rem; max-width: 38rem; }
.how li { margin-bottom: .45rem; }
.fine { margin: .8rem 0 0; color: var(--muted); font-size: .95rem; max-width: 38rem; }

@media (max-width: 30rem) {
  .roadside { margin-top: -1.4rem; }
  .sign { padding: .8rem; }
  .row { min-height: 2.8rem; }
  .panel { background-image: repeating-linear-gradient(transparent 0 calc(2.8rem - 2px), rgba(0, 0, 0, .07) calc(2.8rem - 2px) 2.8rem); }
}