/* Home page: the QCube tile. A black card (white text) on the cream page; the characters keep their colours.
   Motion matches the QCube page: the golden quantum computer drops on its cable with a bounce, the frog hops,
   the photon trap glows. Here they also leave again, so the tile keeps changing. */
.tile.qcube { background: linear-gradient(160deg, #1c1c20, #09090a 78%); border-color: rgba(255, 255, 255, .16); color: #f5f5f7;
  box-shadow: 0 0 0 1px rgba(255, 255, 255, .08), 0 18px 40px -22px rgba(0, 0, 0, .7); backdrop-filter: none; -webkit-backdrop-filter: none;
  padding-bottom: 136px; overflow: hidden; }
.tile.qcube::after { content: ""; position: absolute; inset: 0; z-index: 0; pointer-events: none;
  background: linear-gradient(90deg, rgba(9, 9, 10, .95) 10%, rgba(9, 9, 10, .5)); }
.tile.qcube .label, .tile.qcube .idx { color: #a1a1aa; }
.tile.qcube h3 { color: #fff; max-width: 34em; }
.tile.qcube p { color: #d4d4d8; max-width: 40em; }
.tile.qcube .more { color: #fff; }
.tile.qcube .badge.live { background: #fff; color: #09090a; }
.tile.qcube .badge.live::before { background: #09090a; box-shadow: 0 0 0 3px rgba(9, 9, 10, .25); }

/* wall of circuit wires with gates sliding along them */
.qc-wall { position: absolute; inset: 0; z-index: 0; display: flex; flex-direction: column; justify-content: space-around; overflow: hidden; pointer-events: none; }
.qc-row { position: relative; overflow: hidden; padding: 4px 0; }
.qc-row::before { content: ""; position: absolute; left: 0; right: 0; top: 50%; border-top: 1.5px solid rgba(255, 255, 255, .16); }
.qc-track { position: relative; display: flex; width: max-content; gap: 26px; animation: qc-move var(--t, 90s) linear infinite; }
.qg { flex: none; width: 30px; height: 30px; display: grid; place-items: center; border: 2px solid rgba(255, 255, 255, .3); border-radius: 6px;
  background: #121215; color: rgba(255, 255, 255, .6); font: 600 12px "IBM Plex Mono", ui-monospace, monospace; opacity: .55; }
.qg.dot { width: 14px; height: 14px; margin: 8px 8px; border-radius: 50%; background: rgba(255, 255, 255, .5); border: 0; }
.qg.xor { border-radius: 50%; font-size: 17px; }
@keyframes qc-move { from { transform: translateX(-50%); } to { transform: translateX(0); } }

/* the pop-ups: in with the page's bounce (same easing as the hero), hold, then back out.
   The loop only runs while the tile is on screen (home-tile.js adds .go), and starts from the entrance each time. */
.tile.qcube > .qc-slot { position: absolute; z-index: 2; pointer-events: none; overflow: hidden; }
.qc-slot.frog { left: 46%; bottom: 0; width: 150px; height: 122px; transform: translateY(115%); }
.qc-slot.photon { left: 17%; bottom: 0; width: 190px; height: 104px; transform: translateY(115%); filter: drop-shadow(0 0 8px rgba(255, 226, 122, .35)); }
.qc-slot.chand { right: 5%; top: 0; width: 150px; height: 270px; transform: translateY(-105%); }
.tile.qcube.go .qc-slot.frog { animation: qc-rise 10s infinite .5s; }
.tile.qcube.go .qc-slot.photon { animation: qc-rise 10s infinite 1.3s; }
.tile.qcube.go .qc-slot.chand { animation: qc-lower 12s infinite .1s; }
.tile.qcube.go .qc-slot.frog > svg { transform-origin: 50% 100%; animation: ha-hop 3.4s ease-in-out infinite; }
@keyframes qc-rise {
  0% { transform: translateY(115%); animation-timing-function: cubic-bezier(.2, .8, .3, 1); }
  14% { transform: translateY(-4%); }
  20%, 68% { transform: translateY(0); animation-timing-function: cubic-bezier(.5, 0, .9, .4); }
  80%, 100% { transform: translateY(115%); }
}
@keyframes qc-lower {
  0% { transform: translateY(-105%); animation-timing-function: cubic-bezier(.2, .8, .3, 1); }
  14% { transform: translateY(2%); }
  20%, 70% { transform: translateY(0); animation-timing-function: cubic-bezier(.5, 0, .9, .4); }
  84%, 100% { transform: translateY(-105%); }
}

@media (max-width: 1040px) {
  .qc-slot.frog { width: 100px; height: 82px; left: 44%; } .qc-slot.photon { width: 140px; height: 76px; left: 14%; }
  .qc-slot.chand { width: 104px; height: 188px; } .tile.qcube { padding-bottom: 96px; }
}
@media (max-width: 760px) {
  .tile.qcube { padding-bottom: 0; }
  .tile.qcube h3, .tile.qcube p { padding-right: 70px; }
  .tile.qcube > .qc-slot.chand { right: 10px; width: 64px; height: 116px; }
  .qc-slots { position: relative; z-index: 2; display: flex; justify-content: space-around; align-items: flex-end; height: 84px; margin-top: 12px; overflow: hidden; pointer-events: none; }
  .qc-slots > .qc-slot { position: static; flex: none; }
}
@media (prefers-reduced-motion: reduce) {
  .tile.qcube .qc-slot, .tile.qcube .qc-slot > svg { animation: none !important; transform: none !important; }
  .qc-track { animation: none !important; }
}