/* ============================================================================
   OLISEMEKA.DEV — DEPTH LAYER
   ----------------------------------------------------------------------------
   The 3D card treatment, re-cut for paper: a real mouse-tracked tilt, layered
   translateZ "pop", a hard pixel shadow that tracks the tilt, and a slowly
   rotating ink wireframe drawn with Three.js.

   The wireframe now has its own framed window lapped over the corner of the
   figure. A card with no screenshot hands that window the whole frame instead.

   Deliberately restrained — the depth should read as a raised sheet of paper,
   not as a glowing slab.
   ============================================================================ */

/* Shared vanishing point for the whole grid. `.card-grid > *` carries
   `transform-style: preserve-3d` so this still reaches cards inside the blog
   list's filter wrapper. */
.card-grid { perspective: 1600px; }

.card--3d {
  transform-style: preserve-3d;
  transition: transform 0.2s ease, box-shadow 0.2s ease;
  will-change: transform;
}

/* While the pointer is over the card, drop the transition so tracking is 1:1. */
.card--3d.is-tilting { transition: box-shadow 0.08s linear; }
.card--3d.is-resetting { transition: transform 0.45s cubic-bezier(0.22, 0.8, 0.3, 1), box-shadow 0.45s ease; }

/* ---- Layered "pop" ------------------------------------------------------ */
/* The plate pops off the print; the mount deliberately does NOT preserve-3d,
   so the wireframe window sits flat where it is placed instead of being
   pushed around by its own translateZ. */
.card--3d .card-plate { transform-style: preserve-3d; }

/* ---- Wireframe window --------------------------------------------------- */
/* Absolute against the mount, not the art, so it can lap over the frame
   edge like a medallion clipped to the print. */
.card--3d .three-container {
  position: absolute;
  left: -0.9rem;
  bottom: -0.9rem;
  inline-size: 5.25rem;
  block-size: 5.25rem;
  z-index: 2;
  pointer-events: none;
  opacity: 0;
  background-color: var(--paper);
  background-image:
    linear-gradient(var(--grid) 1px, transparent 1px),
    linear-gradient(90deg, var(--grid) 1px, transparent 1px);
  background-size: 9px 9px;
  border: var(--rule-w) solid var(--ink);
  box-shadow: 3px 3px 0 rgba(22, 24, 28, 0.22);
  transform: translateZ(32px);
  transition: opacity 0.3s ease;
}

.card--3d.is-drawn .three-container { opacity: 0.92; }
.card--3d:hover .three-container { opacity: 1; }

.card--3d .three-container canvas {
  display: block;
  inline-size: 100%;
  block-size: 100%;
  /* A paper-coloured halo hugging each line keeps the graphite legible over
     dark screenshots without washing a disc across the artwork. */
  filter:
    drop-shadow(0 0 1.5px rgba(251, 251, 249, 0.95))
    drop-shadow(0 0 3px rgba(251, 251, 249, 0.8));
}

/* No screenshot: the window becomes the figure and fills the frame. */
.card--nofig .three-container {
  inset: var(--sp-4);
  inline-size: auto;
  block-size: auto;
  background: none;
  border: 0;
  box-shadow: none;
}
.card--nofig .three-container canvas { filter: none; }
/* The blank tag sits under the solid once it is drawn. */
.card--nofig.is-drawn .card-blank-tag { opacity: 0.75; }

/* On coarse pointers there is no hover, so show the wireframe immediately and
   skip the tilt entirely. */
@media (hover: none), (pointer: coarse) {
  .card--3d .three-container { opacity: 0.85; }
  .card-grid { perspective: none; }
  .card--3d { transform: none !important; box-shadow: none !important; }
}

@media (prefers-reduced-motion: reduce) {
  .card-grid { perspective: none; }
  .card--3d { transform: none !important; }
  .card--3d .three-container { opacity: 0.85; }
}