/* Rivet plate button: a chunky square plate with four screw-head rivets and a thick bottom bevel, standing on a
   soft drop shadow. Hover cross-fades the label into a looping pixel chevron train; press drops the plate 10px
   into its shadow and it springs back on release.
   Measured from Daemon (Framer "Primary button" + "Button animation"): 56px tall (48px face + 8px bevel), padding
   0 24px 8px, bevel inset 0 -8px 2px rgb(201,201,201), 0.5px rgba(0,0,0,.7) edges, rivets 7px at 5px from the face
   corners, everything on a spring of duration .4 s / bounce .2 (baked below from ../spring-to-linear). */

.rpb {
  /* colours (White preset) */
  --rpb-face: #fff;                     /* plate face */
  --rpb-ink: rgb(17, 17, 17);           /* label, chevrons, rivet rings and slots */
  --rpb-bevel: rgb(201, 201, 201);      /* the thick bottom bevel */
  --rpb-edge: rgba(0, 0, 0, .7);        /* 0.5px outline of the face and of the whole plate */
  /* the hover shine (source White hover: a dark lip under the bevel, a pale line on it, a soft top light) */
  --rpb-lip: rgb(105, 105, 105);
  --rpb-shine: rgba(255, 255, 255, .4);
  --rpb-top: rgba(255, 255, 255, .5);
  --rpb-top-y: 3px;                     /* top light offset + blur (Black preset: 1px) */
  /* the shadow the plate stands on (and drops into) */
  --rpb-base: 0 .72px .29px -.17px rgba(84, 84, 84, .06), 0 2.75px 1.1px -.33px rgba(84, 84, 84, .11), 0 12px 4.8px -.5px rgba(84, 84, 84, .36);
  /* shape */
  --rpb-h: 56px;                        /* whole button height */
  --rpb-depth: 8px;                     /* bevel depth (face = height - depth) */
  --rpb-pad: 24px;                      /* label side padding */
  --rpb-press: 10px;                    /* how far the plate drops while pressed */
  --rpb-rivet: 7px;                     /* rivet diameter */
  --rpb-rivet-inset: 5px;               /* rivet centre-box distance from the face corners */
  --rpb-font: 400 16px/1.2 ui-monospace, "SF Mono", Menlo, Consolas, monospace;  /* source: Array 16px, -0.01em */
  /* motion */
  --rpb-dur: 400ms;                     /* spring duration (Framer duration .4) */
  --rpb-spring: linear(0, 0.0224, 0.0794, 0.1581, 0.2486, 0.3435, 0.4375, 0.5269, 0.6093, 0.6833, 0.7484, 0.8044, 0.8518, 0.8911, 0.9231, 0.9487, 0.9688, 0.9841, 0.9954, 1.0036, 1.0091, 1.0125, 1.0144, 1.0151, 1.015, 1.0142, 1.0131, 1.0118, 1.0104, 1.0089, 1.0076, 1.0063, 1.0051, 1.0041, 1.0032, 1.0024, 1.0018, 1.0013, 1.0009, 1.0006, 1);
  --rpb-step: 128ms;                    /* chevron loop: one frame (Framer: 100ms delay + a render, live mean 128ms) */

  position: relative; display: inline-flex; align-items: center; justify-content: center;
  box-sizing: border-box; height: var(--rpb-h); padding: 0 var(--rpb-pad) var(--rpb-depth);
  font: var(--rpb-font); letter-spacing: -.01em; white-space: nowrap; color: var(--rpb-ink);
  text-decoration: none; cursor: pointer; user-select: none; -webkit-user-select: none;
  -webkit-tap-highlight-color: transparent; touch-action: manipulation;
  background: none; border: 0; border-radius: 0; isolation: isolate;
  box-shadow: var(--rpb-base);
}
.rpb.rpb--black {
  --rpb-face: rgb(56, 56, 56); --rpb-ink: #fff; --rpb-edge: rgba(255, 255, 255, .5);
  --rpb-bevel: rgb(15, 15, 15); --rpb-lip: #000; --rpb-shine: rgba(0, 0, 0, .4); --rpb-top: rgba(0, 0, 0, .5); --rpb-top-y: 1px;
}

/* the plate (face + bevel) and the face outline: they move together on press; the button's own drop shadow stays */
.rpb::before, .rpb::after, .rpb > * { transition: transform var(--rpb-dur) var(--rpb-spring); }
.rpb::before {
  content: ""; position: absolute; inset: 0; z-index: -1;
  background: var(--rpb-face); outline: .5px solid var(--rpb-edge); outline-offset: -.5px;
  /* the same four-shadow list at rest and on hover (transparent ones at rest), so the shine tweens instead of jumping */
  box-shadow:
    inset 0 -1px 1px 0 transparent,
    inset 0 calc(-1 * var(--rpb-depth)) 2px 0 var(--rpb-bevel),
    inset 0 calc(-1 * var(--rpb-depth) - 1px) 1px 0 transparent,
    inset 0 var(--rpb-top-y) var(--rpb-top-y) 0 transparent;
  transition: transform var(--rpb-dur) var(--rpb-spring), box-shadow var(--rpb-dur) var(--rpb-spring);
}
.rpb::after {
  content: ""; position: absolute; left: 0; right: 0; top: 0; height: calc(100% - var(--rpb-depth));
  outline: .5px solid var(--rpb-edge); outline-offset: -.5px; pointer-events: none;
}
.rpb--black::before {
  box-shadow:
    inset 0 -1px 1px 0 var(--rpb-lip),
    inset 0 calc(-1 * var(--rpb-depth)) 2px 0 var(--rpb-bevel),
    inset 0 calc(-1 * var(--rpb-depth) - 1px) 1px 0 var(--rpb-shine),
    inset 0 var(--rpb-top-y) var(--rpb-top-y) 0 var(--rpb-top);
}
/* hover shine (the White preset changes on hover; Black wears it all the time). Pressed goes back to rest. */
.rpb:is(.is-hover, :focus-visible):not(.is-pressed)::before {
  box-shadow:
    inset 0 -1px 1px 0 var(--rpb-lip),
    inset 0 calc(-1 * var(--rpb-depth)) 2px 0 var(--rpb-bevel),
    inset 0 calc(-1 * var(--rpb-depth) - 1px) 1px 0 var(--rpb-shine),
    inset 0 var(--rpb-top-y) var(--rpb-top-y) 0 var(--rpb-top);
}
@media (hover: hover) {
  .rpb:not(.rpb--js):hover::before {
    box-shadow:
      inset 0 -1px 1px 0 var(--rpb-lip),
      inset 0 calc(-1 * var(--rpb-depth)) 2px 0 var(--rpb-bevel),
      inset 0 calc(-1 * var(--rpb-depth) - 1px) 1px 0 var(--rpb-shine),
      inset 0 var(--rpb-top-y) var(--rpb-top-y) 0 var(--rpb-top);
  }
}

/* rivets (part.js adds them): a 7px ring in the face colour with a 0.5px ink edge and a diagonal slot, mirrored
   per corner, 5px in from the corners of the face */
.rpb__rivets { position: absolute; left: 0; right: 0; top: 0; height: calc(100% - var(--rpb-depth)); pointer-events: none; }
.rpb__rivet { position: absolute; width: var(--rpb-rivet); height: var(--rpb-rivet); }
.rpb__rivet svg { display: block; width: 100%; height: 100%; overflow: visible; }
.rpb__rivet circle { fill: var(--rpb-face); stroke: var(--rpb-ink); stroke-width: .5px; }
.rpb__rivet line { stroke: var(--rpb-ink); stroke-width: .5px; }
.rpb__rivet:nth-child(1) { left: var(--rpb-rivet-inset); top: var(--rpb-rivet-inset); }
.rpb__rivet:nth-child(2) { right: var(--rpb-rivet-inset); top: var(--rpb-rivet-inset); }
.rpb__rivet:nth-child(3) { left: var(--rpb-rivet-inset); bottom: var(--rpb-rivet-inset); }
.rpb__rivet:nth-child(4) { right: var(--rpb-rivet-inset); bottom: var(--rpb-rivet-inset); }

/* label <-> chevron loop cross-fade (label 1 -> 0, loop 0 -> 1, same spring) */
.rpb__label { position: relative; transition: transform var(--rpb-dur) var(--rpb-spring), opacity var(--rpb-dur) var(--rpb-spring); }
.rpb__loop {
  position: absolute; left: 50%; top: calc((100% - var(--rpb-depth)) / 2); width: 30px; height: 15px; margin: -7.5px 0 0 -15px;
  opacity: 0; pointer-events: none;
  /* three-cell-thick chevrons drawn from 3px squares, one every 12px (4 cells), masked out of the ink colour */
  background: currentColor;
  -webkit-mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='15' shape-rendering='crispEdges'%3E%3Cpath d='M0 0h6v3H0zM3 3h6v3H3zM6 6h6v3H6zM3 9h6v3H3zM0 12h6v3H0z'/%3E%3C/svg%3E") 0 0 / 12px 15px repeat-x;
          mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='15' shape-rendering='crispEdges'%3E%3Cpath d='M0 0h6v3H0zM3 3h6v3H3zM6 6h6v3H6zM3 9h6v3H3zM0 12h6v3H0z'/%3E%3C/svg%3E") 0 0 / 12px 15px repeat-x;
  animation: rpb-march calc(var(--rpb-step) * 4) steps(4, end) infinite;
  transition: transform var(--rpb-dur) var(--rpb-spring), opacity var(--rpb-dur) var(--rpb-spring);
}
@keyframes rpb-march { from { -webkit-mask-position: 0 0; mask-position: 0 0; } to { -webkit-mask-position: 12px 0; mask-position: 12px 0; } }

.rpb:is(.is-hover, .is-pressed, :focus-visible) .rpb__label { opacity: 0; }
.rpb:is(.is-hover, .is-pressed, :focus-visible) .rpb__loop { opacity: 1; }
@media (hover: hover) {
  .rpb:not(.rpb--js):hover .rpb__label { opacity: 0; }
  .rpb:not(.rpb--js):hover .rpb__loop { opacity: 1; }
}

/* press: the plate, its outline, rivets, label and loop all drop; the drop shadow under the button doesn't */
.rpb:is(.is-pressed, :not(.rpb--js):active)::before,
.rpb:is(.is-pressed, :not(.rpb--js):active)::after,
.rpb:is(.is-pressed, :not(.rpb--js):active) > * { transform: translateY(var(--rpb-press)); }

.rpb:focus-visible { outline: 2px solid var(--rpb-ink); outline-offset: 4px; }

@media (prefers-reduced-motion: reduce) {
  .rpb::before, .rpb::after, .rpb > *, .rpb__label, .rpb__loop { transition-duration: 1ms !important; }
  .rpb__loop { animation: none; }
}