/* =============================================================================
   card.css — the 24 documents that make up the helix

   Every card is a real 960×540 DOM box (so its artwork and type stay sharp at
   any zoom) that helix.js positions in 3D. Structure, innermost first:

       .three-card            the object; sized here, placed by the script
         .three-card-body     gets the pointer-proximity tilt from CSS vars
           .three-card-face   front
           .three-card-back   mirrored copy, visible through the open edge
           .three-card-edge--right / --bottom   the paper's thickness

   A card shows either the generic placeholder sheet (.plain) or, for the four
   product cards, the placeholder plus the real illustration; the script fades
   between them with the --card-detail custom property.

   The reference stylesheet also carried a set of hand-built preview mock-ups
   (.pc-bar, .chat, .plan, .composer, .speaker, .approve, .timeline, .tcell,
   .run-dot, .bubble) from an earlier design pass. They appear nowhere in the
   shipped build — not in the pre-rendered HTML, not in the bundle — so this
   rewrite leaves them out. See tools/audit-selectors.mjs.
   ============================================================================= */

/* --- the card object ----------------------------------------------------- */

.three-card {
  --card-radius: 27px;

  position: absolute;
  top: 0;
  left: 0;
  width: 960px;
  height: 540px;
  transform-style: preserve-3d;
}

/* The tilt is written to custom properties by the pointer handler; keeping the
   transform here means the browser can animate it without a style recalc. */
.three-card-body {
  position: absolute;
  inset: 0;
  transform-style: preserve-3d;
  transform: translateZ(var(--pointer-lift, 0px)) rotateX(var(--pointer-tilt-x, 0deg))
    rotateY(var(--pointer-tilt-y, 0deg)) rotateZ(var(--pointer-tilt-z, 0deg));
  transition: transform .42s cubic-bezier(.22, .61, .36, 1);
}

/* while the pointer is right on top of a card, follow it more closely */
.three-card.is-pointer-near .three-card-body {
  transition-duration: 90ms;
}

/* --- front and back faces ------------------------------------------------ */

.three-card-face,
.three-card-back {
  position: absolute;
  inset: 0;
  overflow: hidden;
  background: var(--surface);
  border: 2px solid var(--ink-a10);
  border-radius: var(--card-radius);
  box-shadow: 0 36px 80px var(--ink-a14);
  backface-visibility: hidden;
}

.three-card-face {
  transform: translateZ(4px);
}

.three-card-back {
  background: var(--surface-sunk);
  transform: rotateY(180deg) translateZ(4px);
}

/* a few cards are printed on warm paper */
.three-card.is-yellow .three-card-face,
.three-card.is-yellow .three-card-back {
  background: var(--accent-tint);
}

/* --- the paper's thickness ---------------------------------------------- */

.three-card-edge {
  position: absolute;
  background: var(--chip-alt);
}

.three-card-edge--right {
  top: var(--card-radius);
  bottom: var(--card-radius);
  left: 100%;
  width: 8px;
  transform: rotateY(90deg) translateZ(-4px);
  transform-origin: 0;
}

.three-card-edge--bottom {
  top: 100%;
  right: var(--card-radius);
  left: var(--card-radius);
  height: 8px;
  transform: rotateX(-90deg) translateZ(-4px);
  transform-origin: top;
}

/* --- what is printed on a card ------------------------------------------ */

.three-card-placeholder,
.three-card-art {
  position: absolute;
  inset: 0;
  pointer-events: none;
}

.three-card-placeholder {
  opacity: calc(1 - var(--card-detail, 0));
}

.three-card-art {
  opacity: var(--card-detail, 0);
}

.product-preview {
  display: block;
  width: 100%;
  height: 100%;
  background: var(--surface);
  object-fit: contain;
}

/* --- the generic sheet every card starts as ----------------------------- */

.plain {
  position: relative;
  height: 100%;
  padding: 36px 40px;
}

.plain__num {
  color: var(--ink);
  font-size: 27px;
  font-weight: 600;
  letter-spacing: .04em;
  opacity: .45;
}

.plain__lines {
  margin-top: 22px;
}

.plain__lines i {
  display: block;
  height: 10px;
  margin-bottom: 13px;
  border-radius: 5px;
  background: var(--chip);
}

.plain__disc {
  position: absolute;
  top: 50%;
  right: 48px;
  display: flex;
  align-items: center;
  justify-content: center;
  width: 168px;
  height: 168px;
  border: 2px solid var(--line);
  border-radius: 50%;
  transform: translateY(-50%);
}

.plain__disc i {
  width: 76px;
  height: 76px;
  border: 2px solid var(--line);
  border-radius: 50%;
  opacity: .65;
}

/* --- the same face, reused flat in the static story ---------------------- */

/* a plain slot, no frame of its own: the surrounding .static-card draws it */
.static-card__inner.three-card-face {
  border: 0;
  border-radius: 0;
  box-shadow: none;
}