/* Open-now sign: a sign hanging from a nail that reads OPEN or CLOSED from a plain hours list and the clock.
   Measured from Cabalar Meat Co.'s home page (teardown 10-01): their sign is a 2.6 s one-shot video (500x568, 30 fps)
   picked by comparing Sanity opening hours to "now" in America/New_York. The art here is our own: a paper board on
   two strings, swinging on its nail. The swing angles are the ones measured off their video frame by frame. */
.ons {
  --ons-w: 15rem;                 /* board width */
  --ons-open: #1f7a4d;            /* OPEN face accent */
  --ons-closed: #b23a2e;          /* CLOSED face accent */
  --ons-paper: #fbf6ea;           /* board */
  --ons-ink: #1c1a17;             /* outline, nail */
  --ons-string: #7a6a55;
  --ons-border: 3px;
  --ons-radius: 12px;
  --ons-drop: 2.6rem;             /* string length: nail to board top */
  --ons-shadow: 0 10px 18px -10px rgba(0, 0, 0, .45);
  --ons-font: inherit;
  --ons-rest: -4deg;              /* resting tilt (part.js sets it to the last swing angle) */
  display: inline-block; width: var(--ons-w); max-width: 100%;
  font-family: var(--ons-font); color: var(--ons-ink);
  -webkit-user-select: none; user-select: none;
}
.ons__nail {
  display: block; width: 12px; height: 12px; margin: 0 auto; position: relative; z-index: 2;
  border-radius: 50%; background: var(--ons-ink);
  box-shadow: inset -2px -2px 0 rgba(255, 255, 255, .25), 0 2px 3px rgba(0, 0, 0, .3);
}
/* everything below the nail swings as one piece, pivoting on the nail's centre */
.ons__hang {
  position: relative; margin-top: -6px; padding-top: var(--ons-drop);
  transform-origin: 50% 0; transform: rotate(var(--ons-rest));
  will-change: transform;
}
.ons__strings { position: absolute; left: 0; top: 0; width: 100%; height: calc(var(--ons-drop) + 8px); overflow: visible; pointer-events: none; }
.ons__strings path { fill: none; stroke: var(--ons-string); stroke-width: 2; stroke-linecap: round; vector-effect: non-scaling-stroke; }
.ons__board {
  position: relative; display: grid; border: var(--ons-border) solid var(--ons-ink); border-radius: var(--ons-radius);
  background: var(--ons-paper); box-shadow: var(--ons-shadow);
}
/* two eyelets where the strings tie on */
.ons__board::before, .ons__board::after {
  content: ""; position: absolute; top: 7px; width: 7px; height: 7px; border-radius: 50%;
  background: var(--ons-paper); border: 2px solid var(--ons-ink);
}
.ons__board::before { left: 13%; } .ons__board::after { right: 13%; }
/* both faces share one grid cell, so the board is sized by the longer word and never jumps on a swap */
.ons__face {
  grid-area: 1 / 1; display: flex; flex-direction: column; align-items: center; justify-content: center;
  gap: .1em; padding: 1.35em 1em 1em; text-align: center; visibility: hidden;
}
.ons__small { font-size: calc(var(--ons-w) * .07); font-style: italic; font-weight: 600; letter-spacing: .02em; opacity: .75; line-height: 1.1; }
.ons__word {
  font-size: calc(var(--ons-w) * .2); font-weight: 900; line-height: .9; letter-spacing: .02em; text-transform: uppercase;
  color: var(--ons-accent);
}
.ons__face--open { --ons-accent: var(--ons-open); }
.ons__face--closed { --ons-accent: var(--ons-closed); }
.ons[data-state="open"] .ons__face--open,
.ons[data-state="closed"] .ons__face--closed { visibility: visible; }
/* before the first clock check (or without JS) the board stays out of sight */
.ons:not([data-state]) .ons__hang { visibility: hidden; }

@media (prefers-reduced-motion: reduce) { .ons__hang { will-change: auto; } }
@media (forced-colors: active) { .ons__board { border-color: CanvasText; } }