/* Hovers: hover.js sets the --hv-* settings and the pointer origin (--hx, --hy, --hreach); no script runs while it plays.
   Blocks (.hv): two gold chequer layers in growing circles, the second trailing by --hv-beat. Text links (.hv-t): line, patch or ink, by class on <html>. */
@property --hr1 { syntax: '<length>'; inherits: false; initial-value: 0px; }
@property --hr2 { syntax: '<length>'; inherits: false; initial-value: 0px; }
:root { --hv-sq: 12px; --hv-dur: .5s; --hv-beat: .12s; --hv-ease: cubic-bezier(.16, 1, .3, 1); --hv-ink-delay: .12s;
        --hv-t-sq: 3px; --hv-t-pad: 6px; --hv-t-dur: .45s; }

.hv, .hv-t { --hx: 0px; --hy: 0px; --hreach: 0px; }
.hv { isolation: isolate; }
.hv:not(.cell) { position: relative; }
.hv::before, .hv::after, .hv-t-patch .hv-t::before, .hv-t-patch .hv-t::after {
  content: ""; position: absolute; inset: 0; z-index: -1; pointer-events: none; background: var(--gold-cell);
  -webkit-mask-image: conic-gradient(#000 25%, #0000 0 50%, #000 0 75%, #0000 0), radial-gradient(circle at var(--hx) var(--hy), #000 var(--hr1), #0000 0);
          mask-image: conic-gradient(#000 25%, #0000 0 50%, #000 0 75%, #0000 0), radial-gradient(circle at var(--hx) var(--hy), #000 var(--hr1), #0000 0);
  -webkit-mask-size: calc(var(--hv-sq) * 2) calc(var(--hv-sq) * 2), 100% 100%;
          mask-size: calc(var(--hv-sq) * 2) calc(var(--hv-sq) * 2), 100% 100%;
  -webkit-mask-repeat: repeat, no-repeat; mask-repeat: repeat, no-repeat;
  -webkit-mask-composite: source-in; mask-composite: intersect;
  transition: --hr1 var(--hv-dur) var(--hv-ease) var(--hv-beat), --hr2 var(--hv-dur) var(--hv-ease) var(--hv-beat); }
.hv::after, .hv-t-patch .hv-t::after {
  -webkit-mask-image: conic-gradient(#000 25%, #0000 0 50%, #000 0 75%, #0000 0), radial-gradient(circle at var(--hx) var(--hy), #000 var(--hr2), #0000 0);
          mask-image: conic-gradient(#000 25%, #0000 0 50%, #000 0 75%, #0000 0), radial-gradient(circle at var(--hx) var(--hy), #000 var(--hr2), #0000 0);
  -webkit-mask-position: var(--hv-sq) 0, 0 0; mask-position: var(--hv-sq) 0, 0 0;
  transition: --hr1 var(--hv-dur) var(--hv-ease), --hr2 var(--hv-dur) var(--hv-ease); }
.hv:is(:hover, :focus-visible, .hv-hold)::before, .hv-t-patch .hv-t:is(:hover, :focus-visible)::before { --hr1: var(--hreach); transition-delay: 0s; }
.hv:is(:hover, :focus-visible, .hv-hold)::after, .hv-t-patch .hv-t:is(:hover, :focus-visible)::after { --hr2: var(--hreach); transition-delay: var(--hv-beat); }

/* sweep: the front is a straight line falling from the top edge (tilted by --hang when staggered) */
.hv-shape-sweep :is(.hv, .hv-t-patch .hv-t)::before { -webkit-mask-image: conic-gradient(#000 25%, #0000 0 50%, #000 0 75%, #0000 0), linear-gradient(var(--hang, 180deg), #000 var(--hr1), #0000 0);
                                      mask-image: conic-gradient(#000 25%, #0000 0 50%, #000 0 75%, #0000 0), linear-gradient(var(--hang, 180deg), #000 var(--hr1), #0000 0); }
.hv-shape-sweep :is(.hv, .hv-t-patch .hv-t)::after { -webkit-mask-image: conic-gradient(#000 25%, #0000 0 50%, #000 0 75%, #0000 0), linear-gradient(var(--hang, 180deg), #000 var(--hr2), #0000 0);
                                     mask-image: conic-gradient(#000 25%, #0000 0 50%, #000 0 75%, #0000 0), linear-gradient(var(--hang, 180deg), #000 var(--hr2), #0000 0); }

/* blocks sit over their own and the neighbours' rules, and above neighbours until the gold has gone */
.cell.hv::before, .cell.hv::after { inset: 0 -1px -1px 0; }
.cell.hv.edge-r::before, .cell.hv.edge-r::after { right: 0; }   /* at the page's edge: nothing past it (phones scrolled 1px sideways) */
.cell.hv { overflow-clip-margin: 1px; transition: z-index 0s linear calc(var(--hv-dur) + var(--hv-beat)); }
.cell.hv:is(:hover, :focus-visible, .hv-hold, .cx-on) { z-index: 3; transition-delay: 0s; }

.ready .hv, .ready .hv-t-patch .hv-t { transition: color .2s ease, background-color .45s ease, z-index 0s linear calc(var(--hv-dur) + var(--hv-beat)); }
:root:not(.hv-chess) .hv:is(:hover, :focus-visible, .hv-hold), .hv.cx-on, .hv-t-patch .hv-t:is(:hover, :focus-visible) { color: var(--on-gold) !important; transition: color .35s var(--ease) var(--hv-ink-delay) !important; }
:is(:root:not(.hv-chess) .hv:is(:hover, :focus-visible, .hv-hold), .hv.cx-on) :is(.go, .t-p, .dim, .mono, .label, .muted) { color: var(--on-gold) !important; opacity: 1; }
:is(:root:not(.hv-chess) .hv:is(:hover, :focus-visible, .hv-hold), .hv.cx-on) { --tx-1: var(--on-gold); --tx-2: var(--on-gold); --tx-3: var(--on-gold); }
/* text links: hug the words, whatever the link's own display */
.hv-t { position: relative; isolation: isolate; width: fit-content; }
.hv-t-patch .hv-t::before, .hv-t-patch .hv-t::after { inset: calc(var(--hv-t-pad) * -1) calc(var(--hv-t-pad) * -1.6); }

.hv-t-line .hv-t::after { content: ""; position: absolute; left: 0; right: 0; bottom: calc(var(--hv-t-sq) * -2 - 3px); height: calc(var(--hv-t-sq) * 2);
  pointer-events: none; background: var(--gold); transform: scaleX(0); transform-origin: 0 50%; transition: transform var(--hv-t-dur) var(--hv-ease);
  -webkit-mask: conic-gradient(#000 25%, #0000 0 50%, #000 0 75%, #0000 0) 0 0 / calc(var(--hv-t-sq) * 2) calc(var(--hv-t-sq) * 2);
          mask: conic-gradient(#000 25%, #0000 0 50%, #000 0 75%, #0000 0) 0 0 / calc(var(--hv-t-sq) * 2) calc(var(--hv-t-sq) * 2); }
.hv-t-line .hv-t:is(:hover, :focus-visible)::after { transform: scaleX(1); }

.hv-t-ink .hv-t { transition: color .25s ease; }
.hv-t-ink .hv-t:is(:hover, :focus-visible) { color: var(--gold); }

/* letter blocks (hover.js): each rolls over to its other face, clipped to its own height */
.hb-w { white-space: nowrap; }
.hb { display: inline-block; position: relative; vertical-align: top; overflow-y: clip; overflow-x: visible; }
.hb > span { display: block; white-space: pre; }
.hb > .hk { position: absolute; inset: 0 -0.5px; visibility: hidden; }   /* a hair wider: no seams between gold blocks */
.hv-t-blocks .hb > span { -webkit-backface-visibility: hidden; backface-visibility: hidden; transform-origin: 50% 50% -0.5lh;
  transition: transform var(--hv-t-dur) var(--hv-ease) calc(var(--i) * var(--hv-t-stag)); }
.hv-t-blocks .hb > .hk { visibility: visible; }
.hv-t-blocks .hb > .hf { transform: perspective(var(--hv-t-persp)) rotateX(0deg); }
.hv-t-blocks.hv-t-up .hb > .hk { transform: perspective(var(--hv-t-persp)) rotateX(-90deg); }
.hv-t-blocks.hv-t-down .hb > .hk { transform: perspective(var(--hv-t-persp)) rotateX(90deg); }
.hv-t-blocks.hv-t-up .hv-t:is(:hover, :focus-visible) .hb > .hf { transform: perspective(var(--hv-t-persp)) rotateX(90deg); }
.hv-t-blocks.hv-t-down .hv-t:is(:hover, :focus-visible) .hb > .hf { transform: perspective(var(--hv-t-persp)) rotateX(-90deg); }
.hv-t-blocks .hv-t:is(:hover, :focus-visible) .hb > .hk { transform: perspective(var(--hv-t-persp)) rotateX(0deg); }
.hv-tb-gold .hb > .hk, .hv-tb-chess .hb:not(.odd) > .hk { background: var(--gold-cell); color: var(--on-gold); }
.hv-tb-ink .hb > .hk, .hv-tb-chess .hb.odd > .hk { background: var(--ink); color: var(--bg); }

@media (prefers-reduced-motion: reduce) {
  .hb > span { transition-duration: 0s !important; transition-delay: 0s !important; }
  .hv::before, .hv::after, .hv-t::before, .hv-t::after { transition-duration: 0s !important; transition-delay: 0s !important; }
}

/* terminal labels (hover.js TERM): block cursor in the link's colour at the decode front */
.tm-on { position: relative; }
.tm-c { position: absolute; z-index: 2; pointer-events: none; white-space: pre; background: currentColor; color: transparent; }
.tm-c.rest { animation: tm-blink 1s steps(1) infinite; }
@keyframes tm-blink { 50% { opacity: 0; } }

/* chess hovers (chess.js): the board canvas replaces the sweep layers; .cx-on eases the words to ink */
.hv-chess .hv::before { content: none; }
.hv > canvas.cx-board { position: absolute; left: 0; top: 0; z-index: -1; pointer-events: none; }
/* block rules redrawn above the board */
:root.hv-chess .hv::after { content: ""; position: absolute; inset: 0; z-index: 0; pointer-events: none; box-shadow: inherit; border-radius: inherit;
  background: none; -webkit-mask: none; mask: none; transition: none; }
/* neighbours: a hovered block stays above one that is emptying */
.hv-chess .cell.hv.cx-live { z-index: 3; }
.hv-chess .cell.hv.cx-hot { z-index: 4; }