/* Shared interaction for the original pixel motifs. No layout dimensions change. */
:root {
  --pixel-red: #e8483f;
  --pixel-teal: #00e5cc;
  --pixel-ease: cubic-bezier(.22, 1, .36, 1);
}

.pixel-control {
  --pixel-contrast: #470c0c;
}

.nav-ticket,
.pill-button,
.buy-ticket,
.signup-field button {
  --pixel-contrast: #fef9f9;
}

/* More specific than the original background-image and checkout mask rules. */
.pixel-control .pixel-motif {
  background: none;
  mask: none;
  -webkit-mask: none;
  overflow: visible;
  pointer-events: none;
}

/* Keep the ticket motif visible in the compact navigation too. */
.nav-ticket .pixel-motif {
  display: inline-block;
}

.pixel-motif .pixel-glyph {
  display: block;
  width: 100%;
  height: 100%;
  overflow: visible;
  transform-origin: center;
  transition: transform 260ms var(--pixel-ease);
}

.pixel-glyph .pixel-cell {
  fill: var(--pixel-red);
  transform-box: fill-box;
  transform-origin: center;
  transform: translate(0, 0);
  transition: transform 260ms var(--pixel-ease), fill 180ms ease;
  transition-delay: var(--pixel-delay, 0ms);
}

.pixel-glyph .pixel-cell:nth-child(even) {
  fill: var(--pixel-teal);
}

/* Gold, teal and cream remain distinct from the coral button and burgundy panel. */
.buy-ticket .pixel-cell {
  fill: #ffd166;
  stroke: #470c0c;
  stroke-width: .55px;
  stroke-linejoin: miter;
  paint-order: stroke fill;
}

.buy-ticket .pixel-cell:nth-child(3) {
  fill: #fef9f9;
}

/* An inset border preserves the pill silhouette throughout its hover transition. */
.buy-ticket {
  box-shadow: inset 0 0 0 2px var(--red);
}

.pixel-button {
  transform-origin: center;
  transition: transform 260ms var(--pixel-ease), background-color 180ms ease, color 180ms ease;
}

/* Keyboard users get the same colour signal immediately, without travel. */
.pixel-control:focus-visible:not(:disabled):not([aria-disabled="true"]):not([aria-busy="true"]) {
  outline: 2px solid var(--pixel-teal);
  outline-offset: 5px;
}

.pixel-control:is(:focus-visible, :active):not(:disabled):not([aria-disabled="true"]):not([aria-busy="true"]) .pixel-cell {
  fill: var(--pixel-teal);
  transition: none;
}

.pixel-control:is(:focus-visible, :active):not(:disabled):not([aria-disabled="true"]):not([aria-busy="true"]) .pixel-cell:nth-child(even) {
  fill: var(--pixel-red);
}

.pixel-control:is(:focus-visible, :active):not(:disabled):not([aria-disabled="true"]):not([aria-busy="true"]) .pixel-cell:nth-child(3n) {
  fill: var(--pixel-contrast);
}

@media (hover: hover) and (pointer: fine) {
  .pixel-control:hover:not(:disabled):not([aria-disabled="true"]):not([aria-busy="true"]) .pixel-glyph {
    transform: scale(1.16);
  }

  .pixel-control:hover:not(:disabled):not([aria-disabled="true"]):not([aria-busy="true"]) .pixel-cell {
    transform: translate(var(--pixel-x, 0px), var(--pixel-y, 0px));
    fill: var(--pixel-teal);
  }

  .pixel-control:hover:not(:disabled):not([aria-disabled="true"]):not([aria-busy="true"]) .pixel-cell:nth-child(even) {
    fill: var(--pixel-red);
  }

  .pixel-control:hover:not(:disabled):not([aria-disabled="true"]):not([aria-busy="true"]) .pixel-cell:nth-child(3n) {
    fill: var(--pixel-contrast);
  }

  .pixel-button:hover:not(:disabled):not([aria-disabled="true"]):not([aria-busy="true"]) {
    transform: translateY(-1px) scale(1.025);
  }

  .buy-ticket:hover:not([aria-disabled="true"]):not([aria-busy="true"]) {
    background: #470c0c;
    color: #fef9f9;
  }

}

.pixel-button:active:not(:disabled):not([aria-disabled="true"]):not([aria-busy="true"]) {
  transform: scale(.985);
  transition-duration: 100ms;
}

/* A focus ring already communicates the keyboard target; do not animate it. */
.pixel-control:focus-visible:not(:disabled):not([aria-disabled="true"]):not([aria-busy="true"]) .pixel-glyph,
.pixel-control:focus-visible:not(:disabled):not([aria-disabled="true"]):not([aria-busy="true"]) .pixel-cell,
.pixel-button:focus-visible:not(:disabled):not([aria-disabled="true"]):not([aria-busy="true"]) {
  transform: none;
  transition: none;
}

.pixel-control:is(:disabled, [aria-disabled="true"], [aria-busy="true"]),
.pixel-control:is(:disabled, [aria-disabled="true"], [aria-busy="true"]) .pixel-glyph,
.pixel-control:is(:disabled, [aria-disabled="true"], [aria-busy="true"]) .pixel-cell {
  transform: none;
  transition: none;
}

.buy-ticket:is([aria-disabled="true"], [aria-busy="true"]):hover {
  background: var(--red);
  color: #260606;
}

.signup-field button:is(:disabled, [aria-busy="true"]):hover {
  background: var(--ink);
}

/* Keep existing outer rotations that identify open menus, FAQs and biographies. */
@media (prefers-reduced-motion: reduce) {
  .pixel-control .pixel-glyph,
  .pixel-control .pixel-cell,
  .pixel-control .pixel-motif,
  .pixel-button {
    transition: none;
  }

  .pixel-control .pixel-glyph,
  .pixel-control .pixel-cell,
  .pixel-control.pixel-button {
    transform: none !important;
  }
}