/* ═══════════════════════════════════════════════════════════════════════
   LABS: LIFT A CARD OUT OF THE ROW
   Goes with assets/js/modules/labs-lift.js, which sets every position and
   size here from script. This file is the look: the empty slot, the lifted
   card and its shadow, the glass scrim behind it, the buttons.
   The last section is the AI effort meter (lab-effort-meter.js).
   ═══════════════════════════════════════════════════════════════════════ */

/* ── In the row ────────────────────────────────────────────────────── */
.archive-tile.is-liftable {
  cursor: pointer;
}

/* The slot a card leaves behind is empty: the card in the row is simply
   not drawn, so the page shows through. The soft reflection under it goes
   too, and comes back when the card does. */
.archive-tile.is-lifted-out {
  opacity: 0;
  cursor: default;
}

.archive-marquee .archive-tile-extension {
  transition: opacity 0.35s ease, border-color 0.3s ease;
}

.archive-column:has(> .archive-tile.is-lifted-out) .archive-tile-extension {
  opacity: 0;
}

/* The card arriving back in its slot */
.archive-tile.is-plopping {
  animation: labs-plop 0.34s cubic-bezier(0.22, 1, 0.36, 1);
}

@keyframes labs-plop {
  0% { transform: scale(1.035); }
  55% { transform: scale(0.992); }
  100% { transform: scale(1); }
}

/* ── The stage ─────────────────────────────────────────────────────────
   No opacity or transform on the stage itself: either would cut the scrim
   off from the page behind it, and it would have nothing to warp. */
.labs-lift {
  position: fixed;
  inset: 0;
  z-index: 10010;
}

.labs-lift[hidden] {
  display: none;
}

/* Tunnel vision, in two layers.
   The scrim covers the screen: a light blur, under a shade that is fairly
   open in the middle and close to black at the edges.
   The halo is the box a lifted card may fill, grown outward (labs-lift.js
   places it once per lift). In
   it the row is blurred much further, into soft colour, and lifted back
   out of the shade. Its mask is solid next to the card and eases to
   nothing at its outer edge, so the effect is strongest round the card
   and thins out with distance, with no line where it ends.
   Two blurred layers in all, and nothing under them moves while a card is
   lifted, so the browser can work them out once and keep them. */
.labs-lift__scrim {
  position: absolute;
  inset: 0;
  z-index: 1;
  background: radial-gradient(
    ellipse 62% 70% at 50% 50%,
    rgba(9, 9, 8, 0.6) 0%,
    rgba(9, 9, 8, 0.7) 40%,
    rgba(9, 9, 8, 0.86) 72%,
    rgba(9, 9, 8, 0.95) 100%
  );
  -webkit-backdrop-filter: blur(12px);
  backdrop-filter: blur(12px);
  opacity: 0;
  transition: opacity 0.42s ease;
}

.labs-lift__halo {
  --halo: 300px;
  --halo-fade:
    transparent 0,
    rgba(0, 0, 0, 0.04) calc(var(--halo) * 0.18),
    rgba(0, 0, 0, 0.16) calc(var(--halo) * 0.38),
    rgba(0, 0, 0, 0.4) calc(var(--halo) * 0.58),
    rgba(0, 0, 0, 0.72) calc(var(--halo) * 0.78),
    #000 var(--halo);
  position: fixed;
  z-index: 2;
  opacity: 0;
  pointer-events: none;
  transition: opacity 0.5s ease;
  -webkit-backdrop-filter: blur(52px) saturate(1.5) brightness(1.7);
  backdrop-filter: blur(52px) saturate(1.5) brightness(1.7);
  -webkit-mask-image:
    linear-gradient(to right, var(--halo-fade), #000 calc(100% - var(--halo))),
    linear-gradient(to left, var(--halo-fade), #000 calc(100% - var(--halo))),
    linear-gradient(to bottom, var(--halo-fade), #000 calc(100% - var(--halo))),
    linear-gradient(to top, var(--halo-fade), #000 calc(100% - var(--halo)));
  mask-image:
    linear-gradient(to right, var(--halo-fade), #000 calc(100% - var(--halo))),
    linear-gradient(to left, var(--halo-fade), #000 calc(100% - var(--halo))),
    linear-gradient(to bottom, var(--halo-fade), #000 calc(100% - var(--halo))),
    linear-gradient(to top, var(--halo-fade), #000 calc(100% - var(--halo)));
  -webkit-mask-composite: source-in;
  mask-composite: intersect;
}

.labs-lift.is-open .labs-lift__halo {
  opacity: 1;
}

.labs-lift.is-open .labs-lift__scrim {
  opacity: 1;
}

/* ── The lifted card ───────────────────────────────────────────────────
   --lift: 0 in the row, 1 fully lifted. --s: its current scale. */
.labs-lift__card {
  position: fixed;
  z-index: 4;
  transform-origin: 50% 50%;
  will-change: transform;
  outline: none;
  border-radius: calc(8px / var(--s, 1));
  box-shadow:
    0 calc(var(--lift, 0) * 46px) calc(var(--lift, 0) * 120px) rgba(0, 0, 0, calc(var(--lift, 0) * 0.62)),
    0 calc(var(--lift, 0) * 12px) calc(var(--lift, 0) * 30px) rgba(0, 0, 0, calc(var(--lift, 0) * 0.45));
}

.labs-lift__card .labs-lift__face {
  position: absolute;
  inset: 0;
  overflow: hidden;
  border-radius: inherit;
  clip-path: inset(0 round calc(8px / var(--s, 1)));
  /* the row's cards carry a mask and their own stacking layer for an old
     Safari clipping bug; a lifted card needs neither */
  -webkit-mask-image: none;
  mask-image: none;
  isolation: auto;
  background-color: #0c0c10;
}

/* The pictures in the row each sit on their own graphics layer (for an
   old flicker fix there). A lifted card must not: extra layers under a
   fading, clipped card are what made it draw in bands. */
.labs-lift__face .archive-tile__cut-img {
  will-change: auto;
  transform: none;
  -webkit-transform: none;
  backface-visibility: visible;
  -webkit-backface-visibility: visible;
}

/* ── Close ─────────────────────────────────────────────────────────── */
/* Close: for touch and for the keyboard. With a mouse, clicking away does it. */
.labs-lift__close {
  position: fixed;
  z-index: 5;
  display: flex;
  align-items: center;
  justify-content: center;
  width: 44px;
  height: 44px;
  padding: 0;
  border: 0;
  border-radius: 9999px;
  corner-shape: round;
  background: rgba(22, 22, 25, 0.55);
  box-shadow: inset 0 0 0 1px rgba(255, 255, 255, 0.14);
  color: rgba(255, 255, 255, 0.82);
  opacity: 0;
  pointer-events: none;
  transition: opacity 0.16s ease;
  -webkit-tap-highlight-color: transparent;
}

.labs-lift.is-settled .labs-lift__close:focus-visible {
  opacity: 1;
  pointer-events: auto;
  outline: 2px solid #ffffff;
  outline-offset: 2px;
}

@media (pointer: coarse) {
  .labs-lift.is-settled .labs-lift__close {
    opacity: 1;
    pointer-events: auto;
    transition: opacity 0.4s ease 0.1s;
  }
}

@media (prefers-reduced-motion: reduce) {
  .labs-lift__scrim,
  .labs-lift__halo,
  .labs-lift__close {
    transition: none !important;
  }
}

/* ═══════════════════════════════════════════════════════════════════════
   LAB PIECE: AI EFFORT METER (lab-effort-meter.js)
   Sized in container units, so it is the same picture in the row and
   lifted, only larger. --effort is the current level, 1 to 5.
   ═══════════════════════════════════════════════════════════════════════ */
.lab-demo {
  position: absolute;
  inset: 0;
  z-index: 4;
  display: grid;
  place-items: center;
  container-type: size;
  pointer-events: none;
}

.lab-effort__panel {
  position: relative;
  width: min(88cqw, max(62cqw, 250px));
  padding: 5cqw;
  border-radius: 3.4cqw;
  background: rgba(17, 17, 16, 0.86);
  box-shadow: inset 0 0 0 1px rgba(255, 255, 255, 0.1), 0 2.4cqw 6cqw rgba(0, 0, 0, 0.35);
  color: #ffffff;
  font-family: var(--font-body, "Switzer", sans-serif);
  text-align: left;
}

/* No blur behind the live panel: a blurred layer inside a card that is
   changing size and fading made the card draw in bands or go dark. */
.lab-effort--live .lab-effort__panel {
  pointer-events: auto;
}

.lab-effort__top {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: 2cqw;
}

.lab-effort__label,
.lab-effort__note {
  font-size: max(12px, 3cqw);
  line-height: 1.4;
  color: rgba(255, 255, 255, 0.62);
}

.lab-effort__value {
  font-size: max(15px, 4.4cqw);
  font-weight: 500;
  line-height: 1.2;
  letter-spacing: -0.01em;
}

.lab-effort__bars {
  display: grid;
  grid-template-columns: repeat(5, 1fr);
  align-items: end;
  gap: 1.6cqw;
  height: 17cqw;
  margin: 4cqw 0 3cqw;
  touch-action: none;
}

.lab-effort--live .lab-effort__bars {
  cursor: pointer;
}

.lab-effort__bar {
  height: calc(36% + var(--i) * 16%);
  border-radius: 1.1cqw;
  background: rgba(255, 255, 255, 0.13);
  transition: background-color 0.28s ease calc(var(--i) * 30ms);
}

.lab-effort__bar.is-on {
  background: #f0ab3c;
}

.lab-effort__trace {
  display: block;
  width: 100%;
  height: 9cqw;
  overflow: visible;
}

/* The preview in the row holds still while a card is lifted (see above) */
html:has(.labs-lift.is-open) .archive-marquee .lab-effort__trace-line {
  animation-play-state: paused;
}

.lab-effort__trace-line {
  stroke: rgba(255, 255, 255, 0.78);
  stroke-width: 1.5;
  stroke-linecap: round;
  stroke-dasharray: 7 6;
  vector-effect: non-scaling-stroke;
  animation: lab-effort-flow calc(2.6s / var(--effort, 1)) linear infinite;
}

@keyframes lab-effort-flow {
  to { stroke-dashoffset: -26; }
}

.lab-effort__note {
  margin: 2.4cqw 0 0;
}

/* The real control for the keyboard and for screen readers; the bars are
   what you see, and they show its focus. */
.lab-effort__range {
  position: absolute;
  width: 1px;
  height: 1px;
  margin: 0;
  opacity: 0;
  pointer-events: none;
}

.lab-effort__panel:has(.lab-effort__range:focus-visible) .lab-effort__bars {
  outline: 2px solid #ffffff;
  outline-offset: 1.6cqw;
  border-radius: 1.4cqw;
}

@media (prefers-reduced-motion: reduce) {
  .lab-effort__trace-line {
    animation: none;
  }

  .lab-effort__bar {
    transition: none;
  }
}