/*
  button-clock — the night clock. A dark capsule with a live clock dial docked on its left end:
  the sky runs dusk to night to dawn, the sun sets and rises behind a little house whose window is
  lit through the night, and the hands sweep the evening round to the next morning while a time
  line rolls along with them. An amber puck on the right end, a tilt toward the pointer, and one
  pass of light across the capsule when morning comes.

  Pair with button-clock.js, which is optional: everything in this file works without it. The
  script adds the go state's travel, a seamless reset and the host's "hold still" hook. See
  README.md for the markup contract, the states and the traps.

  THEMING. The names in the first block are the only things this component borrows from its host.
  They are declared at zero specificity, so a page (or any ancestor, or the element itself) that
  declares them wins without !important, and a page that declares nothing still renders.

  --button-clock-paint-* is a different tier: written by this file's own rules (the tilt) or by the
  script. Setting one by hand does nothing useful.

  Copyright JESKEL Group. Reusable across JESKEL projects.
*/
:where(:root) {
  /* the capsule */
  --button-clock-face-top: #1C2846;
  --button-clock-face: #111A31;
  --button-clock-face-bottom: #0C1428;
  --button-clock-text: #FFFFFF;          /* the label */
  --button-clock-muted: #FFFFFFB3;       /* the line above it, after the time */
  --button-clock-amber: #F5A83C;         /* rim, dial bezel, ping, centre pin, slash, the puck's body */
  --button-clock-amber-hot: #FFC46B;     /* the time, the rim on hover, sun, lit window, dawn glow */
  --button-clock-puck-hi: #FFD58A;       /* the puck's highlight */
  --button-clock-puck-lo: #E08A1E;       /* the puck's edge */
  --button-clock-ink: #10192E;           /* the puck's arrow, the bezel's outer ring, the shadows */
  --button-clock-ring: #10192E;          /* the keyboard focus ring. Make it light on a dark page. */
  /* the colour each hour spills into the capsule */
  --button-clock-dusk: #F2662B;
  --button-clock-night: #466ED2;
  --button-clock-dawn: #F6B9A6;
  /* the dial: three skies, the hill and house, the hands */
  --button-clock-sky-dusk: linear-gradient(180deg, #3A2A6A 0%, #B9437A 40%, #F2662B 62%, #FFB35C 100%);
  --button-clock-sky-night: radial-gradient(80% 70% at 50% 85%, #2A3B68, #0B1430 70%);
  --button-clock-sky-dawn: linear-gradient(180deg, #7FB1E0 0%, #C9C3E4 34%, #F7B9A2 54%, #FFD58A 74%);
  --button-clock-land: #0A1226;
  --button-clock-hand: #FFFFFF;
  --button-clock-hand-minute: #FFE3B0;
  --button-clock-keyline: #0B1430;       /* the thin dark edge on the hands and the pin */
  /* type. --button-clock-font is the label's face; left as it is, the button uses the host's own
     text face. (As a custom property, inherit at the root resolves to nothing, and the rule that
     reads it falls back to inherit.) A host must hand the kicker its mono face. */
  --button-clock-font: inherit;
  --button-clock-font-mono: ui-monospace, "Cascadia Mono", Consolas, monospace;
  /* time */
  --button-clock-loop: 10s;              /* one dusk-to-dawn loop */
  --button-clock-go-time: 900ms;         /* the go state's race to morning */
  --button-clock-from: 6;                /* the hour on the dial when the loop starts (6 = six o'clock) */
  --button-clock-hours: 14;              /* how many hours the hands sweep: 6 PM + 14 = 8 AM */
}

/* ---------- the element: an <a> or a <button> ----------
   Everything a host's button or link styles might put on it is taken off here, so the element can
   also carry a host layout class (the page this came from kept its own class on it for placement).
   Margin and alignment are deliberately left alone: where the button sits is the host's call.
   This needs to load AFTER any host stylesheet whose rules land on the same element. */
.button-clock {
  --button-clock-paint-rx: 0deg;
  --button-clock-paint-ry: 0deg;
  position: relative;
  display: inline-flex; align-items: center;
  /* fit-content, not auto: a grid cell or a flex column STRETCHES an auto-width item, and the
     capsule does not grow with it, so the element (and the tilt zones and click target on top of
     it) ran hundreds of pixels past the capsule's right end. Found in this component's own demo. */
  width: fit-content; max-width: 100%;
  padding: 0; border: 0; border-radius: 999px; background: none; box-shadow: none;
  /* the original reset these two as well; a host button class with a taller min-height would
     otherwise put the click target and tilt zones above and below the capsule */
  min-height: 0; gap: 0;
  perspective: 700px;
  color: var(--button-clock-text);
  font-family: var(--button-clock-font, inherit);
  font-size: 15px; font-weight: 600; line-height: 1.2;
  letter-spacing: normal; text-align: left; text-decoration: none; text-transform: none;
  cursor: pointer;
  -webkit-appearance: none; appearance: none;
  -webkit-tap-highlight-color: transparent;
}
/* the sizes below are border-box sizes. The page this came from set border-box on everything, and
   without it the capsule grows 2px, the ping ring 4px, and the dial stops lining up with the ring. */
.button-clock, .button-clock *, .button-clock *::before, .button-clock *::after { box-sizing: border-box; }

.button-clock .button-clock-face {
  position: relative; display: inline-flex; align-items: center; gap: 12px;
  min-width: 0;
  height: 46px; margin: 4px 0 4px 3px; padding: 0 5px 0 64px; border-radius: 999px; isolation: isolate;
  background: linear-gradient(180deg, var(--button-clock-face-top) 0%, var(--button-clock-face) 55%, var(--button-clock-face-bottom) 100%);
  /* the alpha percentages are the source's 8-bit alphas (59, 70% and so on in hex) written out, so
     the default paints exactly what the original painted */
  border: 1px solid color-mix(in srgb, var(--button-clock-amber) 34.902%, transparent);
  box-shadow:
    inset 0 1px 0 #FFFFFF26, inset 0 -1px 0 #00000040,
    0 16px 28px -16px color-mix(in srgb, var(--button-clock-ink) 70.196%, transparent),
    0 3px 6px -3px color-mix(in srgb, var(--button-clock-ink) 40%, transparent);
  transform: translateY(0) rotateX(var(--button-clock-paint-rx)) rotateY(var(--button-clock-paint-ry));
  transition: transform .45s cubic-bezier(.2, .8, .2, 1);
  will-change: transform;
}
/* the rim light on hover and keyboard focus. It sits BEHIND the dial (z-index 1, the dial is 2), so the
   clock stays clean and the light runs out from under its bezel. At 5, over everything, it drew an amber
   ring and glow across the dial's face, ticks and hands. Over the ping still (same layer, later in the
   markup); under the sheen, which now passes over it (it can only go under the dial by going under the
   sheen, which crosses the dial). */
.button-clock .button-clock-face::after {
  content: ""; position: absolute; inset: 0; border-radius: inherit; pointer-events: none; z-index: 1;
  box-shadow: inset 0 0 0 1.5px var(--button-clock-amber-hot), inset 0 0 18px -6px var(--button-clock-amber-hot);
  opacity: 0; transition: opacity .3s;
}
.button-clock:hover .button-clock-face, .button-clock:focus-visible .button-clock-face { transform: translateY(-2px) rotateX(var(--button-clock-paint-rx)) rotateY(var(--button-clock-paint-ry)); }
.button-clock:hover .button-clock-face::after, .button-clock:focus-visible .button-clock-face::after { opacity: .85; }
.button-clock:active .button-clock-face { transform: translateY(0) scale(.98) rotateX(var(--button-clock-paint-rx)) rotateY(var(--button-clock-paint-ry)); transition-duration: .12s; }
/* the ring goes on the capsule, not the element: the element is a little wider than the capsule
   (the dial sticks out on the left), so an outline on it would sit off-centre. Like the rim light it
   passes behind the dial: a box's own outline paints before its children that carry a z-index. */
.button-clock:focus-visible { outline: none; }
.button-clock:focus-visible .button-clock-face { outline: 3px solid var(--button-clock-ring); outline-offset: 3px; }

/* tilt toward the pointer: ten invisible zones over the capsule, CSS only. They sit on top of
   everything, so they are what the pointer is over; a click on one is a click on the element. */
.button-clock .button-clock-zones { position: absolute; inset: 0; z-index: 6; display: grid; grid-template-columns: repeat(5, 1fr); grid-template-rows: 1fr 1fr; border-radius: 999px; }
.button-clock .button-clock-zones i { display: block; }
.button-clock:has(.button-clock-zones i:nth-child(1):hover) { --button-clock-paint-ry: -7deg; --button-clock-paint-rx: 9deg; }
.button-clock:has(.button-clock-zones i:nth-child(2):hover) { --button-clock-paint-ry: -3.5deg; --button-clock-paint-rx: 9deg; }
.button-clock:has(.button-clock-zones i:nth-child(3):hover) { --button-clock-paint-ry: 0deg; --button-clock-paint-rx: 9deg; }
.button-clock:has(.button-clock-zones i:nth-child(4):hover) { --button-clock-paint-ry: 3.5deg; --button-clock-paint-rx: 9deg; }
.button-clock:has(.button-clock-zones i:nth-child(5):hover) { --button-clock-paint-ry: 7deg; --button-clock-paint-rx: 9deg; }
.button-clock:has(.button-clock-zones i:nth-child(6):hover) { --button-clock-paint-ry: -7deg; --button-clock-paint-rx: -9deg; }
.button-clock:has(.button-clock-zones i:nth-child(7):hover) { --button-clock-paint-ry: -3.5deg; --button-clock-paint-rx: -9deg; }
.button-clock:has(.button-clock-zones i:nth-child(8):hover) { --button-clock-paint-ry: 0deg; --button-clock-paint-rx: -9deg; }
.button-clock:has(.button-clock-zones i:nth-child(9):hover) { --button-clock-paint-ry: 3.5deg; --button-clock-paint-rx: -9deg; }
.button-clock:has(.button-clock-zones i:nth-child(10):hover) { --button-clock-paint-ry: 7deg; --button-clock-paint-rx: -9deg; }

/* the sky colour spills into the capsule */
.button-clock .button-clock-glow { position: absolute; inset: 0; z-index: -1; border-radius: inherit; overflow: hidden; }
.button-clock .button-clock-glow i { position: absolute; inset: 0; display: block; }
.button-clock .button-clock-glow-dusk { background: radial-gradient(58% 150% at 6% 50%, color-mix(in srgb, var(--button-clock-dusk) 43.922%, transparent), transparent 72%); animation: button-clock-dusk var(--button-clock-loop) linear infinite; }
.button-clock .button-clock-glow-night { opacity: 0; animation: button-clock-night var(--button-clock-loop) linear infinite; background: radial-gradient(64% 170% at 6% 50%, color-mix(in srgb, var(--button-clock-night) 34.902%, transparent), transparent 72%); }
.button-clock .button-clock-glow-dawn { background: radial-gradient(70% 170% at 6% 50%, color-mix(in srgb, var(--button-clock-amber-hot) 36.078%, transparent), transparent 70%), radial-gradient(40% 120% at 30% 120%, color-mix(in srgb, var(--button-clock-dawn) 20%, transparent), transparent 70%); opacity: 0; animation: button-clock-dawn var(--button-clock-loop) linear infinite; }

/* a ring pings out from the dial when morning comes */
.button-clock .button-clock-ping { position: absolute; left: -3px; top: 50%; width: 54px; height: 54px; margin-top: -27px; border-radius: 50%; z-index: 1; border: 2px solid var(--button-clock-amber); opacity: 0; transform: scale(1); animation: button-clock-ping var(--button-clock-loop) linear infinite; pointer-events: none; }
/* the dial: a watch face docked on the left end of the capsule, a little taller than it */
.button-clock .button-clock-dial { position: absolute; left: -3px; top: 50%; width: 54px; height: 54px; margin-top: -27px; border-radius: 50%; overflow: hidden; z-index: 2; box-shadow: 0 0 0 2px var(--button-clock-amber), 0 0 0 4px var(--button-clock-ink), 0 10px 18px -8px color-mix(in srgb, var(--button-clock-ink) 70.196%, transparent); }
.button-clock .button-clock-dial i { position: absolute; display: block; }
.button-clock .button-clock-sky { inset: 0; }
.button-clock .button-clock-sky-night { background: var(--button-clock-sky-night); }
.button-clock .button-clock-sky-dusk { background: var(--button-clock-sky-dusk); animation: button-clock-dusk var(--button-clock-loop) linear infinite; }
.button-clock .button-clock-sky-dawn { background: var(--button-clock-sky-dawn); opacity: 0; animation: button-clock-dawn var(--button-clock-loop) linear infinite; }
.button-clock .button-clock-stars {
  inset: 0; opacity: .4;
  background:
    radial-gradient(1.4px 1.4px at 24% 26%, #fff 98%, transparent),
    radial-gradient(1.1px 1.1px at 70% 22%, #fff 98%, transparent),
    radial-gradient(1.1px 1.1px at 42% 14%, #FFE3B0 98%, transparent),
    radial-gradient(1.4px 1.4px at 80% 42%, #fff 98%, transparent),
    radial-gradient(1.1px 1.1px at 15% 46%, #fff 98%, transparent),
    radial-gradient(1px 1px at 58% 34%, #fff 98%, transparent);
  animation: button-clock-stars var(--button-clock-loop) linear infinite;
}
.button-clock .button-clock-sun { left: 17%; top: 53%; width: 12px; height: 12px; border-radius: 50%; background: radial-gradient(circle at 40% 38%, #FFF6DE, var(--button-clock-amber-hot) 58%, var(--button-clock-amber)); transform: translate(0, 3px); animation: button-clock-sun var(--button-clock-loop) linear infinite; }
.button-clock .button-clock-land { left: -20%; right: -20%; top: 65%; bottom: -10%; background: var(--button-clock-land); border-radius: 50% 50% 0 0 / 24% 24% 0 0; }
.button-clock .button-clock-home { left: 58%; top: 50%; width: 14px; height: 12px; background: var(--button-clock-land); clip-path: polygon(50% 0, 100% 46%, 100% 100%, 0 100%, 0 46%); }
.button-clock .button-clock-window { left: 5px; top: 6.5px; width: 4px; height: 3.4px; background: var(--button-clock-amber-hot); animation: button-clock-window var(--button-clock-loop) linear infinite; }
.button-clock .button-clock-ticks {
  inset: 2.5px; border-radius: 50%;
  background: repeating-conic-gradient(from -1.5deg, #FFFFFFC0 0 3deg, transparent 3deg 30deg);
  -webkit-mask: radial-gradient(closest-side, transparent 82%, #000 84%); mask: radial-gradient(closest-side, transparent 82%, #000 84%);
}
/* each hand rides a wrapper that spins only while the button is hovered or focused: the clock
   races. The hands' own loop goes on underneath it. */
.button-clock .button-clock-race { inset: 0; animation: button-clock-spin 4.8s linear infinite paused; }
.button-clock .button-clock-race-minute { animation-duration: .4s; }
.button-clock:hover .button-clock-race, .button-clock:focus-visible .button-clock-race { animation-play-state: running; }
.button-clock .button-clock-hand { left: 50%; bottom: 50%; transform-origin: 50% 100%; border-radius: 2px; }
/* at rest (and as the still frame) the hands read ten past the first hour: 6:10 by default */
.button-clock .button-clock-hand-hour { width: 3.4px; height: 13px; margin-left: -1.7px; background: var(--button-clock-hand); box-shadow: 0 0 0 .7px color-mix(in srgb, var(--button-clock-keyline) 60%, transparent); transform: rotate(calc(var(--button-clock-from) * 30deg + 5deg)); animation: button-clock-hour var(--button-clock-loop) infinite; }
.button-clock .button-clock-hand-minute { width: 2px; height: 20px; margin-left: -1px; background: var(--button-clock-hand-minute); box-shadow: 0 0 0 .7px color-mix(in srgb, var(--button-clock-keyline) 60%, transparent); transform: rotate(60deg); animation: button-clock-minute var(--button-clock-loop) infinite; }
.button-clock .button-clock-pin { left: 50%; top: 50%; width: 6px; height: 6px; margin: -3px 0 0 -3px; border-radius: 50%; background: var(--button-clock-amber); box-shadow: 0 0 0 1.2px var(--button-clock-keyline); }

/* ---------- words ---------- */
.button-clock .button-clock-words { display: grid; row-gap: 3px; min-width: 0; text-align: left; }
.button-clock .button-clock-kicker { display: flex; align-items: center; gap: .55em; height: 12px; font-family: var(--button-clock-font-mono); font-size: 10.5px; line-height: 12px; letter-spacing: .14em; text-transform: uppercase; color: var(--button-clock-muted); white-space: nowrap; }
.button-clock .button-clock-slash { font-weight: 400; color: var(--button-clock-amber); }
/* the time window: one line tall, as wide as the longest time in the list. The list stands in
   normal flow, bottom-aligned, and overflows UPWARD out of the window (flex-end), so its width
   sizes the window and nothing hangs below the capsule. */
.button-clock .button-clock-roll { position: relative; display: flex; flex-direction: column; justify-content: flex-end; flex: none; height: 12px; overflow: hidden; color: var(--button-clock-amber-hot); font-weight: 500; }
/* written in time order; column-reverse stacks the first time at the bottom, where the window is.
   The roll moves it down one 12px line per stop. The keyframe set is picked by how many times
   there are, 2 to 8; one time does not roll. */
/* margin-right, measured rather than guessed: the original sized this window as calc(8ch + 1.12em),
   62.1563px, and max-content of the same eight letters is 62.1719px, because a length rounds to the
   nearest 1/64px and max-content rounds UP. That 1/64px moved everything after it across a sub-pixel
   boundary and repainted the last letter of the line. It comes off the last letter's trailing
   letter-spacing, which is blank, so the window still fits every time and paints what the original did. */
.button-clock .button-clock-times { display: flex; flex-direction: column-reverse; flex: none; margin-right: -.015625px; animation: none var(--button-clock-loop) ease infinite; }
.button-clock .button-clock-times i { display: block; height: 12px; font-style: normal; }
.button-clock .button-clock-times:has(> :nth-child(2):last-child) { animation-name: button-clock-roll-2; }
.button-clock .button-clock-times:has(> :nth-child(3):last-child) { animation-name: button-clock-roll-3; }
.button-clock .button-clock-times:has(> :nth-child(4):last-child) { animation-name: button-clock-roll-4; }
.button-clock .button-clock-times:has(> :nth-child(5):last-child) { animation-name: button-clock-roll-5; }
.button-clock .button-clock-times:has(> :nth-child(6):last-child) { animation-name: button-clock-roll-6; }
.button-clock .button-clock-times:has(> :nth-child(7):last-child) { animation-name: button-clock-roll-7; }
.button-clock .button-clock-times:has(> :nth-child(8):last-child) { animation-name: button-clock-roll-8; }
.button-clock .button-clock-label { font-weight: 600; font-size: 15px; line-height: 1.15; color: var(--button-clock-text); white-space: nowrap; }

/* ---------- the go puck ---------- */
.button-clock .button-clock-puck { flex: none; display: grid; place-items: center; width: 36px; height: 36px; margin-left: 4px; border-radius: 50%; color: var(--button-clock-ink); background: radial-gradient(circle at 35% 30%, var(--button-clock-puck-hi), var(--button-clock-amber) 62%, var(--button-clock-puck-lo)); box-shadow: inset 0 1px 0 #FFFFFF80, 0 4px 10px -4px color-mix(in srgb, var(--button-clock-dusk) 60%, transparent); overflow: hidden; }
/* a right arrow turned to point down. The turn lives in every transform below, including the
   still frame's: the page this came from turned it with a rule of its own, and without that the
   still frame's arrow pointed right. */
.button-clock .button-clock-arrow { flex: none; width: 17px; height: 17px; fill: none; stroke: currentColor; stroke-width: 1.8; stroke-linecap: round; stroke-linejoin: round; color: var(--button-clock-ink); transform: rotate(90deg); animation: button-clock-bob 2s cubic-bezier(.5, 0, .5, 1) infinite; }
.button-clock:hover .button-clock-arrow, .button-clock:focus-visible .button-clock-arrow { animation: button-clock-drop .7s cubic-bezier(.6, 0, .4, 1) infinite; }

/* the sheen: one pass of light as the dial reaches morning */
.button-clock .button-clock-sheen { position: absolute; inset: 0; z-index: 4; pointer-events: none; border-radius: inherit; overflow: hidden; }
.button-clock .button-clock-sheen i { position: absolute; top: 0; bottom: 0; left: 0; width: 34%; display: block; background: linear-gradient(90deg, transparent, #FFFFFF14 30%, #FFF3D647 50%, #FFFFFF14 70%, transparent); transform: translateX(-160%) skewX(-22deg); animation: button-clock-sheen var(--button-clock-loop) linear infinite; }

/* ---------- the loop ----------
   One loop of --button-clock-loop. The hands sweep the first hour round to the last by 72%, hold
   there until 88%, then rewind; dawn breaks at 58%. button-clock.js resumes a reset at 88%, so
   the hold must stay where it is. */
@keyframes button-clock-hour {
  0% { transform: rotate(calc(var(--button-clock-from) * 30deg)); animation-timing-function: cubic-bezier(.42, 0, .3, 1); }
  72% { transform: rotate(calc((var(--button-clock-from) + var(--button-clock-hours)) * 30deg)); }
  88% { transform: rotate(calc((var(--button-clock-from) + var(--button-clock-hours)) * 30deg)); animation-timing-function: cubic-bezier(.6, 0, .3, 1); }
  100% { transform: rotate(calc(var(--button-clock-from) * 30deg)); }
}
@keyframes button-clock-minute {
  0% { transform: rotate(0deg); animation-timing-function: cubic-bezier(.42, 0, .3, 1); }
  72% { transform: rotate(calc(var(--button-clock-hours) * 360deg)); }
  88% { transform: rotate(calc(var(--button-clock-hours) * 360deg)); animation-timing-function: cubic-bezier(.6, 0, .3, 1); }
  100% { transform: rotate(0deg); }
}
@keyframes button-clock-night { 0% { opacity: 0; } 18% { opacity: 1; } 46% { opacity: 1; } 56% { opacity: 0; } 100% { opacity: 0; } }
@keyframes button-clock-ping {
  0%, 57% { opacity: 0; transform: scale(1); }
  58% { opacity: .9; transform: scale(1); animation-timing-function: cubic-bezier(.1, .6, .3, 1); }
  72%, 100% { opacity: 0; transform: scale(1.32); }
}
@keyframes button-clock-spin { to { transform: rotate(360deg); } }
@keyframes button-clock-dusk { 0% { opacity: 1; } 20% { opacity: 0; } 89% { opacity: 0; } 100% { opacity: 1; } }
@keyframes button-clock-dawn { 0%, 40% { opacity: 0; } 58% { opacity: 1; } 89% { opacity: 1; } 98%, 100% { opacity: 0; } }
@keyframes button-clock-stars { 0% { opacity: .4; } 16% { opacity: 1; } 50% { opacity: 1; } 62% { opacity: 0; } 90% { opacity: 0; } 100% { opacity: .4; } }
@keyframes button-clock-window { 0% { opacity: 1; } 54% { opacity: 1; } 58% { opacity: 0; } 90% { opacity: 0; } 100% { opacity: 1; } }
@keyframes button-clock-sun {
  0% { transform: translate(0, 3px); }
  16% { transform: translate(0, 14px); }
  17% { transform: translate(20px, 14px); }
  44% { transform: translate(20px, 14px); animation-timing-function: cubic-bezier(.2, .7, .3, 1); }
  64% { transform: translate(20px, -4px); }
  88% { transform: translate(20px, -4px); }
  93% { transform: translate(20px, 14px); }
  94% { transform: translate(0, 14px); }
  100% { transform: translate(0, 3px); }
}
@keyframes button-clock-sheen {
  0%, 58% { transform: translateX(-160%) skewX(-22deg); animation-timing-function: cubic-bezier(.5, 0, .3, 1); }
  72%, 100% { transform: translateX(330%) skewX(-22deg); }
}
@keyframes button-clock-bob {
  0%, 100% { transform: translateY(-2px) rotate(90deg); }
  50% { transform: translateY(2.5px) rotate(90deg); }
}
@keyframes button-clock-drop {
  0% { transform: translateY(-15px) rotate(90deg); opacity: 0; }
  35%, 65% { transform: translateY(0) rotate(90deg); opacity: 1; }
  100% { transform: translateY(15px) rotate(90deg); opacity: 0; }
}
/* the time line: one set per count of times. Six is the original's own timing; the others spread
   the same 2% slides evenly between 18% and 56%, and every set holds the last time to 90%. */
@keyframes button-clock-roll-2 {
  0%, 54% { transform: translateY(0); }
  56%, 90% { transform: translateY(12px); animation-timing-function: cubic-bezier(.6, 0, .3, 1); }
  97%, 100% { transform: translateY(0); }
}
@keyframes button-clock-roll-3 {
  0%, 16% { transform: translateY(0); }
  18%, 54% { transform: translateY(12px); }
  56%, 90% { transform: translateY(24px); animation-timing-function: cubic-bezier(.6, 0, .3, 1); }
  97%, 100% { transform: translateY(0); }
}
@keyframes button-clock-roll-4 {
  0%, 16% { transform: translateY(0); }
  18%, 35% { transform: translateY(12px); }
  37%, 54% { transform: translateY(24px); }
  56%, 90% { transform: translateY(36px); animation-timing-function: cubic-bezier(.6, 0, .3, 1); }
  97%, 100% { transform: translateY(0); }
}
@keyframes button-clock-roll-5 {
  0%, 16% { transform: translateY(0); }
  18%, 28.67% { transform: translateY(12px); }
  30.67%, 41.33% { transform: translateY(24px); }
  43.33%, 54% { transform: translateY(36px); }
  56%, 90% { transform: translateY(48px); animation-timing-function: cubic-bezier(.6, 0, .3, 1); }
  97%, 100% { transform: translateY(0); }
}
@keyframes button-clock-roll-6 {
  0%, 16% { transform: translateY(0); }
  18%, 23% { transform: translateY(12px); }
  25%, 30% { transform: translateY(24px); }
  32%, 41% { transform: translateY(36px); }
  43%, 54% { transform: translateY(48px); }
  56%, 90% { transform: translateY(60px); animation-timing-function: cubic-bezier(.6, 0, .3, 1); }
  97%, 100% { transform: translateY(0); }
}
@keyframes button-clock-roll-7 {
  0%, 16% { transform: translateY(0); }
  18%, 23.6% { transform: translateY(12px); }
  25.6%, 31.2% { transform: translateY(24px); }
  33.2%, 38.8% { transform: translateY(36px); }
  40.8%, 46.4% { transform: translateY(48px); }
  48.4%, 54% { transform: translateY(60px); }
  56%, 90% { transform: translateY(72px); animation-timing-function: cubic-bezier(.6, 0, .3, 1); }
  97%, 100% { transform: translateY(0); }
}
@keyframes button-clock-roll-8 {
  0%, 16% { transform: translateY(0); }
  18%, 22.33% { transform: translateY(12px); }
  24.33%, 28.67% { transform: translateY(24px); }
  30.67%, 35% { transform: translateY(36px); }
  37%, 41.33% { transform: translateY(48px); }
  43.33%, 47.67% { transform: translateY(60px); }
  49.67%, 54% { transform: translateY(72px); }
  56%, 90% { transform: translateY(84px); animation-timing-function: cubic-bezier(.6, 0, .3, 1); }
  97%, 100% { transform: translateY(0); }
}

/* ---------- go: morning, and hold it ----------
   The host sets data-button-clock-go on the element. The frame below is the loop's own dawn hold
   (its 72% to 88% frame), so it is also where button-clock.js resumes the loop when the attribute
   comes off. With the script loaded the frame waits for data-button-clock-paint-go instead,
   because the script must read where the hands ARE before this frame replaces them; without the
   script the frame applies at once and the hands jump instead of racing. */
:is(.button-clock[data-button-clock-go]:not([data-button-clock-paint-js]), .button-clock[data-button-clock-paint-go]) .button-clock-glow-dusk,
:is(.button-clock[data-button-clock-go]:not([data-button-clock-paint-js]), .button-clock[data-button-clock-paint-go]) .button-clock-glow-night,
:is(.button-clock[data-button-clock-go]:not([data-button-clock-paint-js]), .button-clock[data-button-clock-paint-go]) .button-clock-sky-dusk,
:is(.button-clock[data-button-clock-go]:not([data-button-clock-paint-js]), .button-clock[data-button-clock-paint-go]) .button-clock-stars,
:is(.button-clock[data-button-clock-go]:not([data-button-clock-paint-js]), .button-clock[data-button-clock-paint-go]) .button-clock-window { opacity: 0; animation: none; }
:is(.button-clock[data-button-clock-go]:not([data-button-clock-paint-js]), .button-clock[data-button-clock-paint-go]) .button-clock-glow-dawn,
:is(.button-clock[data-button-clock-go]:not([data-button-clock-paint-js]), .button-clock[data-button-clock-paint-go]) .button-clock-sky-dawn { opacity: 1; animation: none; }
:is(.button-clock[data-button-clock-go]:not([data-button-clock-paint-js]), .button-clock[data-button-clock-paint-go]) .button-clock-sun { transform: translate(20px, -4px); animation: none; }
:is(.button-clock[data-button-clock-go]:not([data-button-clock-paint-js]), .button-clock[data-button-clock-paint-go]) .button-clock-race { animation: none; }
:is(.button-clock[data-button-clock-go]:not([data-button-clock-paint-js]), .button-clock[data-button-clock-paint-go]) .button-clock-hand-hour { transform: rotate(calc((var(--button-clock-from) + var(--button-clock-hours)) * 30deg)); animation: none; }
:is(.button-clock[data-button-clock-go]:not([data-button-clock-paint-js]), .button-clock[data-button-clock-paint-go]) .button-clock-hand-minute { transform: rotate(calc(var(--button-clock-hours) * 360deg)); animation: none; }
/* the last time in the list, for any count: one 12px line short of the list's full height */
:is(.button-clock[data-button-clock-go]:not([data-button-clock-paint-js]), .button-clock[data-button-clock-paint-go]) .button-clock-times { transform: translateY(calc(100% - 12px)); animation: none; }
/* one-shots: the arrow drops out and comes back to rest, then the ring pings and the light passes
   as dawn lands. They run once and leave nothing behind, so the held frame is still. */
:is(.button-clock[data-button-clock-go]:not([data-button-clock-paint-js]), .button-clock[data-button-clock-paint-go]) .button-clock-arrow { animation: button-clock-go-drop var(--button-clock-go-time) cubic-bezier(.6, 0, .4, 1) 1; }
:is(.button-clock[data-button-clock-go]:not([data-button-clock-paint-js]), .button-clock[data-button-clock-paint-go]) .button-clock-ping { animation: button-clock-go-ping 1.4s cubic-bezier(.1, .6, .3, 1) calc(var(--button-clock-go-time) * .6) 1; }
:is(.button-clock[data-button-clock-go]:not([data-button-clock-paint-js]), .button-clock[data-button-clock-paint-go]) .button-clock-sheen i { animation: button-clock-go-sheen 1.4s cubic-bezier(.5, 0, .3, 1) calc(var(--button-clock-go-time) * .55) 1; }
@keyframes button-clock-go-drop {
  0% { transform: translateY(0) rotate(90deg); opacity: 1; }
  40% { transform: translateY(15px) rotate(90deg); opacity: 0; }
  41% { transform: translateY(-15px) rotate(90deg); opacity: 0; }
  80%, 100% { transform: translateY(0) rotate(90deg); opacity: 1; }
}
@keyframes button-clock-go-ping { 0% { opacity: .9; transform: scale(1); } 100% { opacity: 0; transform: scale(1.32); } }
@keyframes button-clock-go-sheen { 0% { transform: translateX(-160%) skewX(-22deg); } 100% { transform: translateX(330%) skewX(-22deg); } }

/* ---------- phone: the label wraps to two lines, the time line steps aside ----------
   data-button-clock-compact asks for the same layout at any width, for a narrow column. */
@media (max-width: 560px) {
  .button-clock .button-clock-face { gap: 10px; }
  .button-clock .button-clock-kicker { display: none; }
  /* 124px is everything in the button except the label, so the button keeps at least 22px clear
     of each edge of the screen even when its container runs edge to edge. In a container that is
     narrower than that, max-width: 100% on the element takes over and the label wraps tighter. */
  .button-clock .button-clock-label { white-space: normal; font-size: 14px; max-width: min(15.5em, calc(100vw - 168px)); text-wrap: balance; }
}
.button-clock[data-button-clock-compact] .button-clock-face { gap: 10px; }
.button-clock[data-button-clock-compact] .button-clock-kicker { display: none; }
/* the same viewport cap as the phone rule above: this rule outranks it (one more attribute), so a
   plain 15.5em here undid the cap, and a compact button in a full-width row on a 320px phone ran
   edge to edge, dial and puck touching the glass */
.button-clock[data-button-clock-compact] .button-clock-label { white-space: normal; font-size: 14px; max-width: min(15.5em, calc(100vw - 168px)); text-wrap: balance; }

/* ---------- motion off: a finished frame ----------
   Ten past the first hour, dusk, the window lit. In the go state, the dawn frame above instead.
   data-button-clock-paint-still is written by button-clock.js from the host's hold-still class
   and from pause(); prefers-reduced-motion needs no script. */
.button-clock[data-button-clock-paint-still] *, .button-clock[data-button-clock-paint-still] *::after { animation: none !important; }
.button-clock[data-button-clock-paint-still] .button-clock-face, .button-clock[data-button-clock-paint-still]:hover .button-clock-face, .button-clock[data-button-clock-paint-still]:focus-visible .button-clock-face, .button-clock[data-button-clock-paint-still]:active .button-clock-face { transition: none; transform: none; }
@media (prefers-reduced-motion: reduce) {
  .button-clock *, .button-clock *::after { animation: none !important; }
  .button-clock .button-clock-face, .button-clock:hover .button-clock-face, .button-clock:focus-visible .button-clock-face, .button-clock:active .button-clock-face { transition: none; transform: none; }
}

/* ---------- forced colours ----------
   The system takes the colours of the capsule and its words. The dial and the puck are pictures
   (aria-hidden), so they keep theirs; the glow and sheen go, since they only make sense on the
   dark capsule. */
@media (forced-colors: active) {
  .button-clock .button-clock-face { background: ButtonFace; border-color: ButtonText; }
  .button-clock .button-clock-glow, .button-clock .button-clock-sheen { display: none; }
  .button-clock .button-clock-dial, .button-clock .button-clock-puck { forced-color-adjust: none; }
  .button-clock:focus-visible .button-clock-face { outline-color: Highlight; }
}