/* Section "notify": the call to action next to the playable pinball table (pinball-game.js). */

.notify { background: var(--color-paper-2); }
.notify__inner { display: grid; grid-template-columns: minmax(0, 6fr) minmax(0, 6fr); gap: var(--gap-columns); align-items: center; padding-block: var(--section-gap-s); }
.notify__copy { display: flex; flex-direction: column; align-items: flex-start; gap: var(--space-lg); }
.notify__head { font-size: var(--type-headline); line-height: 1; color: var(--color-ink); max-width: 12ch; }
.notify__text { max-width: 46ch; color: var(--color-ink-2); }
.notify__table { position: relative; }
.kv--flippers { width: 100%; height: auto; overflow: visible; }
.f-wave { opacity: 0; transform-box: fill-box; transform-origin: center; pointer-events: none; }

/* ---------- the cabinet's flipper buttons, below the table ---------- */
/* two columns, each button centred in its half: that puts it roughly under its flipper */
.notify__controls { display: grid; grid-template-columns: 1fr 1fr; justify-items: center; margin-top: var(--space-md); }
/* A round button drawn like the table's flippers and bumpers: a flat red cap, a solid
   darker-red edge below it and a solid offset shadow, no gradients or blur. Pressing pushes the
   cap down onto its edge. */
.notify__flip {
  --edge: 6px;
  display: grid; place-items: center;
  width: var(--flip-btn); height: var(--flip-btn); padding: 0;
  color: var(--color-accent-ink); background: var(--color-accent);
  border: 0; border-radius: 50%; cursor: pointer;
  box-shadow: 0 var(--edge) 0 var(--kv-red-2), 6px calc(var(--edge) + 8px) 0 var(--kv-shadow);
  transition: translate var(--dur-micro) var(--ease-out), box-shadow var(--dur-micro) var(--ease-out), background-color var(--dur-micro) var(--ease-out);
  /* a held button on a phone must not select text, zoom or open a context menu */
  touch-action: manipulation; user-select: none; -webkit-user-select: none; -webkit-touch-callout: none;
  -webkit-tap-highlight-color: transparent;
}
.notify__flip svg { width: 44%; height: 44%; fill: none; stroke: currentColor; stroke-width: 3; stroke-linecap: round; stroke-linejoin: round; }
.notify__flip:enabled:hover { background: var(--kv-red-hi); }
.notify__flip.is-held { translate: 0 calc(var(--edge) - 1px); --edge: 1px; }
.notify__flip:focus-visible { outline: 2px solid var(--color-ink); outline-offset: 8px; }
/* between games: the same button, dimmed and switched off */
.notify__flip:disabled {
  cursor: default; color: var(--color-muted); background: var(--color-paper-3);
  box-shadow: 0 var(--edge) 0 var(--kv-dark), 6px calc(var(--edge) + 8px) 0 var(--kv-shadow);
}
/* hovering a button lights its flipper on the table */
.notify__art:has(.notify__flip--l:enabled:hover) .flip--l .k-red,
.notify__art:has(.notify__flip--r:enabled:hover) .flip--r .k-red { fill: var(--kv-red-hi); }

.notify__start {
  /* the site's red .btn (layout.css), centred on the table. Centred with the translate property,
     not transform, so the breathing scale below grows from the middle of the button. */
  position: absolute; z-index: 1; left: 50%; top: 56%; translate: -50% -50%;
}
/* hit counter: just the number, between the two upper bumpers like a score display */
.notify__hits {
  position: absolute; left: 50%; top: 20%; translate: -50% -50%;
  margin: 0; pointer-events: none;
  font-family: var(--font-display); font-size: var(--type-title); line-height: 1;
  color: var(--color-ochre); font-variant-numeric: tabular-nums;
}
.notify__hint { margin-top: var(--space-lg); text-align: center; font-size: var(--type-small); color: var(--color-muted); }

/* without JavaScript there is no game: no disabled buttons and no hint about how to play */
html:not(.js) .notify__controls, html:not(.js) .notify__hint { display: none; }
@media (max-width: 48rem) {
  /* the hint under the game needs clear air before the heading starts */
  .notify__inner { grid-template-columns: minmax(0, 1fr); row-gap: var(--space-2xl); }
  /* stacked above the text, the table is narrower than the column: centre it like the text below */
  .notify__art { order: -1; width: 100%; max-width: var(--table-max-w); justify-self: center; }
  /* stacked under the table, the heading, text and button sit centred */
  .notify__copy { align-items: center; text-align: center; }
}
@media (prefers-reduced-motion: no-preference) {
  .f-wave.is-hit { animation: wave 700ms var(--ease-out); }
  /* every hit: the number jumps up and flashes cream, then settles back to ochre */
  .notify__hits.is-counting { animation: notify-count 420ms var(--ease-out); }
  .notify__start { animation: notify-breathe 2400ms var(--ease-in-out) infinite; }
  .notify__start:hover, .is-offscreen .notify__start { animation-play-state: paused; }
}
@keyframes notify-breathe { 50% { scale: 1.05; } }
@keyframes notify-count { 0% { scale: 1; } 25% { scale: 1.45; color: var(--color-cream); } 100% { scale: 1; } }