/* showcase.css — page 3, scroll-driven 3D card stack (js/sections/showcase.js).
 *
 * Everything inside .showcase__layer is in design px (the 1920 × 1231 mockup);
 * the JS scales the layer to fit the viewport. Cards are 1000 × 1000 squares
 * that the JS maps onto their quads with matrix3d.
 */

.showcase {
  /* ~70vh of scrolling per screenshot */
  height: calc(100vh + var(--cards, 6) * 70vh);
}

.showcase__layer {
  position: absolute;
  left: 0;
  top: 0;
  width: 1920px;
  height: 1231px;
  transform-origin: 0 0;
  pointer-events: none;
}

.showcase__layer--caps {
  z-index: 2;
}

.showcase__card {
  position: absolute;
  left: 0;
  top: 0;
  width: 1000px;
  height: 1000px;
  margin: 0;
  transform-origin: 0 0;
  will-change: transform;
  visibility: hidden;
}

.showcase__face {
  position: absolute;
  inset: 0;
  background: var(--bg-elev);
  box-shadow: 0 60px 140px var(--shadow);
}

.showcase__img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: 62% top;
}

/* turns a parked (front) card into a plain grey sheet */
.showcase__veil {
  position: absolute;
  inset: 0;
  background: rgb(150 150 154);
  opacity: 0;
}

:root[data-theme='light'] .showcase__veil {
  background: rgb(110 110 116);
}

@media (prefers-color-scheme: light) {
  :root:not([data-theme='dark']) .showcase__veil {
    background: rgb(110 110 116);
  }
}

/* white broken-line frames (BrandFrame) hug the square edge */
.showcase__card .brand-frame {
  color: var(--fg);
}

/* the spectrum border: a conic gradient cut down to a 9px ring, square corners */
.showcase__spectrum {
  position: absolute;
  inset: -3px;
  padding: 10px;
  background: conic-gradient(
    from 0deg,
    #6a4cff 0deg,
    #00aeef 45deg,
    #8fd16a 105deg,
    #fff200 150deg,
    #ff8a00 205deg,
    #ed1c24 250deg,
    #ec008c 315deg,
    #6a4cff 360deg
  );
  -webkit-mask:
    linear-gradient(#000 0 0) content-box,
    linear-gradient(#000 0 0);
  -webkit-mask-composite: xor;
  mask:
    linear-gradient(#000 0 0) content-box exclude,
    linear-gradient(#000 0 0);
  opacity: 0;
}

/* ── captions (design px) ── */

.showcase__caption {
  position: absolute;
  left: 0;
  top: 0;
  width: 560px;
  transform-origin: 0 0;
  visibility: hidden;
  will-change: transform, opacity, filter;
}

.showcase__cap-title {
  display: flex;
  align-items: center;
  gap: 22px;
  font-family: var(--font-display);
  font-size: 92px;
  font-weight: 400;
  line-height: 1.05;
  letter-spacing: -0.005em;
  white-space: nowrap;
}

.showcase__cap-icon {
  width: 104px;
  height: 104px;
  flex: none;
}

.showcase__cap-body {
  margin-top: 26px;
  max-width: 520px;
  color: var(--fg-muted);
  font-size: 23px;
  line-height: 1.12;
}

/* ── title (design px, bottom left) ── */

.showcase__title {
  position: absolute;
  left: 228px;
  top: 918px;
  z-index: 800;
}

.showcase__title .dl-title__text {
  font-size: 56px;
  font-weight: 600;
  white-space: nowrap;
}

.showcase__title .dl-lines {
  height: 22px;
}

.showcase.is-narrow .showcase__title {
  display: none;
}