/* Strike: a rendered matchbook you can strike with a finger. */

@font-face {
  font-family: "Libre Baskerville"; font-style: italic; font-weight: 400; font-display: swap;
  src: url("../assets/fonts/libre-baskerville-italic.woff2") format("woff2");
}

:root {
  --ink: #0b0a09;
  --cream: #e9ddcf;
}

* { box-sizing: border-box; margin: 0; }
html, body { height: 100%; background: var(--ink); overflow: hidden; }
body {
  color: var(--cream);
  touch-action: none;
  user-select: none; -webkit-user-select: none; -webkit-touch-callout: none;
  -webkit-tap-highlight-color: transparent;
}

/* The still shows at once; the canvas takes over when WebGL is ready. */
.still, .layer { position: fixed; inset: 0; width: 100%; height: 100%; display: block; }
.still { object-fit: cover; }
.layer { pointer-events: none; }
[data-gl] { opacity: 0; transition: opacity .4s ease; }
body.is-ready [data-gl] { opacity: 1; }

/* The hint: a hairline ring breathing at the start of the striker, a glint sliding the way
   to strike, and two words. Positioned over the striker by script. */
.hint { position: fixed; inset: 0; pointer-events: none; transition: opacity .5s ease; }
.hint.is-hidden { opacity: 0; transition-duration: .2s; }
.hint__strip { position: absolute; left: 0; top: 0; transform-origin: 0 50%; }
.hint__ring {
  position: absolute; left: 0; top: 0; width: 44px; height: 44px; margin: -22px 0 0 -22px;
  border: 1px solid var(--cream); border-radius: 50%;
  /* a dark hairline either side, so the cream holds where it spills onto the pale marble */
  box-shadow: 0 0 0 .5px rgba(60, 34, 20, .45), inset 0 0 0 .5px rgba(60, 34, 20, .45);
  opacity: 0; animation: ring 2.6s cubic-bezier(.2, .6, .3, 1) infinite;
}
.hint__ring--late { animation-delay: .32s; }
.hint__dot {
  position: absolute; left: 0; top: 0; width: 6px; height: 6px; margin: -3px 0 0 -3px;
  border-radius: 50%; background: var(--cream); opacity: .8; box-shadow: 0 0 0 .5px rgba(60, 34, 20, .5);
}
.hint__glide {
  position: absolute; left: 0; top: 0; width: 28px; height: 2px; margin: -1px 0 0 0;
  border-radius: 2px; background: linear-gradient(90deg, rgba(233,221,207,0), rgba(233,221,207,.75));
  opacity: 0; animation: glide 2.6s cubic-bezier(.5, 0, .2, 1) infinite;
}
.hint__label {
  position: absolute; left: 0; top: 0; transform: translate(-50%, 0);
  font: italic 15px/1 "Libre Baskerville", Georgia, serif; letter-spacing: .02em;
  color: var(--cream); opacity: .9; white-space: nowrap;
  padding: 4px 10px;
  text-shadow: 0 1px 2px rgba(0, 0, 0, .85), 0 0 14px rgba(0, 0, 0, .75), 0 0 28px rgba(0, 0, 0, .5);
}
.hint__label i { font-style: normal; margin: 0 .55em; opacity: .7; }
/* With a loose match to take first (js/strike.js), the words follow the step. */
.hint[data-phase="take"] .hint__strike, .hint[data-phase="strike"] .hint__take { display: none; }
.hint:not([data-phase]) .hint__take, .hint[data-phase="take"] :is(.hint__glide, .hint__dot) { display: none; }
.hint[data-phase="done"] { display: none; }
/* On the bar the loose match lies on pale marble: the rings come out of its head in the
   striker's brown, a little heavier, so they read against the veining. */
.hint[data-phase="take"] .hint__ring { border: 1.5px solid #4e2c1a; box-shadow: none; animation-name: ring-dark; }

@keyframes ring {
  0% { transform: scale(.45); opacity: 0; }
  12% { opacity: .55; }
  70%, 100% { transform: scale(1.35); opacity: 0; }
}
@keyframes ring-dark {
  0% { transform: scale(.35); opacity: 0; }
  12% { opacity: .9; }
  70%, 100% { transform: scale(1.35); opacity: 0; }
}
@keyframes glide {
  0%, 28% { transform: translateX(0); opacity: 0; }
  36% { opacity: .9; }
  70% { opacity: .9; }
  80%, 100% { transform: translateX(var(--run, 160px)); opacity: 0; }
}

@media (prefers-reduced-motion: reduce) {
  .hint__ring, .hint[data-phase="take"] .hint__ring { animation: none; opacity: .4; transform: scale(1); }
  .hint__glide { display: none; }
}

/* Sound: a quiet word in the corner. iOS only starts sound from a tap, so it asks once. */
.sound {
  position: fixed; top: max(14px, env(safe-area-inset-top)); right: 14px; z-index: 2;
  padding: 9px 12px; background: none; border: 0; cursor: pointer;
  font: italic 13px/1 "Libre Baskerville", Georgia, serif; color: var(--cream); opacity: .62;
  text-shadow: 0 1px 8px rgba(0, 0, 0, .6); transition: opacity .3s ease;
}
.sound[data-state="locked"] { opacity: .85; }
.sound:focus-visible { outline: 1px solid var(--cream); outline-offset: 2px; }

.sr {
  position: fixed; left: 50%; bottom: 12px; transform: translateX(-50%);
  width: 1px; height: 1px; overflow: hidden; clip-path: inset(50%); white-space: nowrap;
  background: none; border: 0; color: inherit;
}
.sr:focus-visible {
  width: auto; height: auto; clip-path: none; padding: 10px 16px;
  font: italic 14px "Libre Baskerville", Georgia, serif;
  border: 1px solid var(--cream); border-radius: 2px;
}