/* Mobile-only swipeable card stack — paired with cards-stack.js.
   See that file for the interaction model. */

.cards-stack {
  position: relative;
  width: 100%;
  display: flex;
  flex-direction: column;
  align-items: center;
  /* Generous breathing room top + bottom so the stack reads as its
     own section, not crammed between paragraphs. The bottom is
     deliberately bigger than the top — combined with the next
     paragraph's own top margin (or the footer's padding), this
     gives the cards a confident landing before the eye moves on. */
  margin: 56px 0 88px;
  /* Lift above any surrounding text so cards stack visually clean. */
  z-index: 2;
  /* Default aspect — overridable per-stack via JS setting
     --stage-aspect on the wrap element. */
  --stage-aspect: 4 / 5;
}

/* The stage is the box the cards live in. Cards are absolutely
   positioned relative to it, centred via translate(-50%, -50%) set
   by JS. Aspect ratio is driven by --stage-aspect (set by the
   caller) — work cards use 4:3 (matches desktop), experiments use
   4:5 portrait. */
.cards-stack-stage {
  position: relative;
  width: min(86vw, 380px);
  aspect-ratio: var(--stage-aspect);
  /* Padding so back cards' offsets don't clip against the edge. */
  margin: 0 auto;
}

/* Each card is forced to absolute, full-stage size. Whatever the
   caller's card markup looked like in fan mode (.fan-card with its own
   sizing vars), the stack-card class wins via specificity + !important
   on the layout-critical properties. */
.stack-card {
  position: absolute !important;
  top: 50% !important;
  left: 50% !important;
  /* JS sets transform; declare a sane initial so the first paint
     (before JS runs) doesn't show 5 cards stacked at 0,0. */
  transform: translate(-50%, -50%);
  /* Cancel any longhand translate/rotate/scale the original .fan-card
     rule applied (it composes with `transform` and would otherwise
     re-offset every card on top of the stack's positioning). */
  translate: none !important;
  rotate: none !important;
  scale: none !important;
  transform-origin: 50% 50% !important;
  width: 100% !important;
  height: 100% !important;
  margin: 0 !important;
  /* Stack mode controls the entrance via opacity + transform applied
     in JS; cancel the .fan-card entrance transitions that would
     otherwise fight ours. */
  opacity: 1;
  transition: none;
  will-change: transform, opacity;
  cursor: grab;
  -webkit-user-select: none;
  user-select: none;
  -webkit-tap-highlight-color: transparent;
  /* No outline on focus — focus rings on cards inside a stack look odd
     and the surrounding meta block doubles as the affordance. */
  outline: none;
}
.stack-card:active { cursor: grabbing; }

/* Force the in-card frame to fill the new full-card box. Border-radius
   is fluid (matches wabi-web's clamp), and the shadow stack reproduces
   that page's signature depth: a soft outer drop + a darker top-left
   inset highlight (-2px, -2px, 0.2 alpha) + a faint bottom-right inset
   counter (+2px, +2px, 0.03 alpha). That asymmetry is what makes the
   card read as a slightly-recessed pane rather than a flat colour
   rectangle.

   Background-image (set by JS once meta.json resolves on work cards)
   paints the poster directly on the frame so the video's first
   visible frame is the poster — no dark "overlay" while the video
   element is still negotiating its first frame. Background-size:
   cover matches the video's object-fit. Experiments cards keep their
   inline `background:${color}` (set in cards-experiments.js); this
   default of `transparent` loses to that inline value. */
.cards-stack .fan-card-frame {
  background: transparent;
  background-size: cover;
  background-position: center;
  border-radius: clamp(22px, 5vw, 30px) !important;
  inset: 0 !important;
  box-shadow:
    0 8px 40px rgba(0, 0, 0, 0.12),
    -2px -2px 2px 0 rgba(0, 0, 0, 0.20) inset,
    2px 2px 2px 0 rgba(0, 0, 0, 0.03) inset !important;
}
/* Second inset layer drawn ON TOP of the media — sits above the
   img/video so the edge highlight stays visible against the
   underlying photo (a single inset on the frame would be hidden by
   the absolutely-positioned media). pointer-events:none so it doesn't
   eat clicks. */
.cards-stack .fan-card-frame::after {
  content: '';
  position: absolute;
  inset: 0;
  border-radius: inherit;
  box-shadow:
    -2px -2px 2px 0 rgba(0, 0, 0, 0.20) inset,
    2px 2px 2px 0 rgba(0, 0, 0, 0.03) inset;
  pointer-events: none;
  z-index: 3;
}
.cards-stack .fan-card-img .fan-card-media {
  /* Always fully opaque in stack mode (the fan/carousel formula used
     calc((var(--p) - 0.85) * 6.667) to fade media in only at the very
     end — irrelevant here). */
  opacity: 1 !important;
}
/* The fan-card-meta is rendered separately in stack mode (in the
   shared meta block below the stage), so hide the per-card one if it
   happens to be in the DOM. */
.cards-stack .fan-card-meta {
  display: none !important;
}

/* The "See more" card in experiments has its own content block.
   Make sure it's visible in stack mode. */
.cards-stack .fan-card-see-more {
  display: flex !important;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  text-align: center;
  padding: 24px;
  height: 100%;
}

/* ── Meta + dots ─────────────────────────────────────────────── */

.cards-stack-meta {
  margin-top: 18px;
  text-align: center;
  max-width: min(86vw, 360px);
  /* Opacity + transform are JS-driven (cards-stack.js) so the meta
     can tilt + translate with the stage during drag, fade out as
     the swipe approaches threshold, and swap text invisibly at
     opacity 0 before fading the new title back in. */
  will-change: transform, opacity;
  /* Reserved height so a one-line vs two-line title doesn't reflow
     the page when cycling through cards. Sized for two lines of the
     title (21px × 1.25 ≈ 26px each, plus the subtitle line + the
     6px gap) with a little slack. */
  min-height: 84px;
  /* Keep the 3D rotateY readable through the meta block's text — same
     perspective the stage uses. */
  transform-style: preserve-3d;
}
.cards-stack-meta-title {
  font-family: 'Edict Display', Georgia, serif;
  font-weight: 400;
  font-size: 21px;
  line-height: 1.25;
  letter-spacing: -0.012em;
  color: #1a1a2e;
  margin: 0;
  /* Long work titles ("Redesigning the world's most human financial
     company …") would otherwise wrap to 3-4 lines and push the
     subtitle past the reserved meta height. Cap at 2 lines so the
     fixed height holds no matter which card is in front. */
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
  overflow: hidden;
}
.cards-stack-meta-sub {
  font-family: 'Inter', sans-serif;
  font-weight: 400;
  font-size: 14px;
  /* Matches the desktop .fan-card-company tightening for a unified
     sans treatment across the work + experiments meta blocks. */
  letter-spacing: -0.005em;
  color: rgba(26, 26, 46, 0.6);
  margin: 6px 0 0;
}

/* Navigation dots are hidden — the meta block (title that swaps on
   each card change) doubles as the indicator, and a row of dots
   competed with that signal. Kept in the DOM for accessibility /
   future use, just visually removed. */
.cards-stack-dots { display: none; }