/* ══════════════════════════════════════════════════════════════
   HOW WE WORK — media frames + scroll-motion styles
   Load AFTER css/style.css:
   <link rel="stylesheet" href="css/how-we-work-extra.css" />
   ══════════════════════════════════════════════════════════════ */

/* ─── Two-column step layout (text + product shot) ─────────── */
.step-content.has-media {
  display: grid;
  grid-template-columns: minmax(0, 0.92fr) minmax(0, 1.08fr);
  gap: 64px;
  align-items: start;   /* text stays up beside the step number */
}
.step-text { min-width: 0; }
.step-media {
  min-width: 0;
  perspective: 1600px;           /* the 3-D stage for the tilt */
  perspective-origin: 30% 50%;
}

/* ─── Browser-chrome frame (dashboard, step 04) ────────────── */
/* Resting state is already tilted "sideways" — GSAP scrubs into
   this pose from a deeper tilt while the user scrolls. */
.shot-browser-wrap { margin: 0; }
.shot-browser {
  border-radius: 14px;
  background: #ffffff;
  border: 1px solid rgba(20, 30, 60, 0.10);
  overflow: hidden;
  transform: rotateY(-8deg) rotateX(3deg);
  transform-style: preserve-3d;
  will-change: transform;
  box-shadow:
    0 1px 2px   rgba(20, 30, 60, 0.06),
    0 8px 16px  rgba(20, 30, 60, 0.06),
    0 24px 48px rgba(20, 30, 60, 0.10),
    0 72px 96px -32px rgba(20, 30, 60, 0.22),
    -24px 48px 80px -40px rgba(128, 0, 32, 0.10);
  transition: box-shadow 0.4s ease;
}
.shot-browser:hover {
  box-shadow:
    0 1px 2px   rgba(20, 30, 60, 0.06),
    0 12px 22px rgba(20, 30, 60, 0.08),
    0 32px 64px rgba(20, 30, 60, 0.12),
    0 88px 112px -32px rgba(20, 30, 60, 0.26),
    -28px 56px 88px -40px rgba(128, 0, 32, 0.12);
}

/* macOS-style title bar */
.shot-bar {
  display: flex;
  align-items: center;
  gap: 7px;
  height: 38px;
  padding: 0 14px;
  background: linear-gradient(#fbfbfd, #f3f4f7);
  border-bottom: 1px solid rgba(20, 30, 60, 0.07);
}
.shot-dot { width: 11px; height: 11px; border-radius: 50%; flex-shrink: 0; }
.shot-dot.red    { background: #ff5f57; }
.shot-dot.yellow { background: #febc2e; }
.shot-dot.green  { background: #28c840; }
.shot-url {
  margin: 0 auto;
  padding: 4px 18px;
  background: #ffffff;
  border: 1px solid rgba(20, 30, 60, 0.08);
  border-radius: 7px;
  font-family: var(--font-body);
  font-size: 11px;
  font-weight: 500;
  letter-spacing: 0.02em;
  color: var(--text-secondary);
  display: inline-flex;
  align-items: center;
  gap: 6px;
  line-height: 1;
}
.shot-url::before {
  content: '';
  width: 7px; height: 7px;
  border-radius: 50%;
  background: #5bbb7b;
}
.shot-browser img {
  display: block;
  width: 100%;
  height: auto;
  user-select: none;
  -webkit-user-drag: none;
}

/* ─── Stacked-paper frame (PDF report, step 05) ────────────── */
.shot-paper-wrap {
  margin: 0 0 0 auto;           /* hug the right edge of the column */
  padding: 8px 26px 30px 8px;   /* room for the sheet behind */
  max-width: 500px;             /* keep the portrait page compact so the
                                   step doesn't tower over its text */
}
.shot-paper {
  position: relative;
  background: #ffffff;
  border: 1px solid rgba(20, 30, 60, 0.09);
  border-radius: 8px;
  transform: rotate(-1.4deg);
  will-change: transform;
  box-shadow:
    0 1px 2px   rgba(20, 30, 60, 0.05),
    0 12px 24px rgba(20, 30, 60, 0.07),
    0 36px 64px -16px rgba(20, 30, 60, 0.16);
  transition: box-shadow 0.4s ease;
}
.shot-paper:hover {
  box-shadow:
    0 1px 2px   rgba(20, 30, 60, 0.05),
    0 16px 30px rgba(20, 30, 60, 0.09),
    0 44px 76px -16px rgba(20, 30, 60, 0.20);
}
/* the sheet peeking out behind */
.shot-paper::before {
  content: '';
  position: absolute;
  inset: 0;
  background: #fbfbfc;
  border: 1px solid rgba(20, 30, 60, 0.06);
  border-radius: 8px;
  transform: rotate(2.6deg) translate(14px, 10px);
  z-index: -1;
  box-shadow: 0 20px 44px -12px rgba(20, 30, 60, 0.12);
}
.shot-paper img {
  display: block;
  width: 100%;
  height: auto;
  border-radius: 7px;
  user-select: none;
  -webkit-user-drag: none;
}
/* crimson wax-seal style corner chip */
.shot-paper::after {
  content: 'PDF';
  position: absolute;
  top: -13px;
  right: -13px;
  width: 44px; height: 44px;
  border-radius: 50%;
  background: #8B1A1A;
  color: #ffffff;
  font-family: var(--font-body);
  font-size: 10px;
  font-weight: 700;
  letter-spacing: 0.08em;
  display: flex;
  align-items: center;
  justify-content: center;
  box-shadow: 0 6px 16px rgba(139, 26, 26, 0.35);
}

/* ─── Data-source logo cards (step 01) ─────────────────────────
   Same treatment family as the browser/paper shots: a 3-D stage,
   each logo on a white card resting sideways with layered
   shadows. The TI card sits offset for a staggered stack. */
.step-media--center { align-self: center; }
.sources-stage {
  perspective: 1400px;
  perspective-origin: 30% 50%;
  display: flex;
  flex-direction: column;
  gap: 30px;
  max-width: 470px;
  margin-left: auto;
  padding: 10px 6px 10px 0;
}
.source-card {
  /* transparent PNGs need no plaque — the tilt and a silhouette-
     hugging drop-shadow do the work */
  display: flex;
  align-items: center;
  transform: rotateY(-9deg) rotateX(2deg);
  transform-style: preserve-3d;
  will-change: transform;
  filter:
    drop-shadow(0 3px 4px rgba(20, 30, 60, 0.10))
    drop-shadow(0 14px 22px rgba(20, 30, 60, 0.14))
    drop-shadow(-10px 26px 34px rgba(128, 0, 32, 0.08));
  transition: filter 0.4s ease;
}
.source-card:hover {
  filter:
    drop-shadow(0 4px 6px rgba(20, 30, 60, 0.12))
    drop-shadow(0 20px 30px rgba(20, 30, 60, 0.18))
    drop-shadow(-12px 32px 40px rgba(128, 0, 32, 0.10));
}
.source-card--ti { margin-left: 52px; }
.source-logo {
  display: block;
  width: auto;
  max-width: 100%;
  user-select: none;
  -webkit-user-drag: none;
}
.source-logo--icij { height: 66px; }
.source-logo--ti   { height: 88px; }

/* ─── Scroll-activated colour: every step visual is grayscale
       until its step gains .is-active (the site's existing
       scroll-down logic), then colour washes in. Scrolling back
       up removes .is-active and the visual desaturates again. ── */
.pipeline-step .shot-browser img,
.pipeline-step .shot-paper img,
.pipeline-step .graph-anim-wrap canvas,
.pipeline-step .source-logo {
  filter: grayscale(100%);
  transition: filter 0.8s ease, opacity 0.8s ease;
}
.pipeline-step .source-logo { opacity: 0.5; }
.pipeline-step.is-active .shot-browser img,
.pipeline-step.is-active .shot-paper img,
.pipeline-step.is-active .graph-anim-wrap canvas,
.pipeline-step.is-active .source-logo {
  filter: grayscale(0%);
}
.pipeline-step.is-active .source-logo { opacity: 1; }

/* ─── Animated heterogeneous graph (step 02) ───────────────── */
.graph-anim-wrap {
  position: relative;
  width: 100%;
  aspect-ratio: 5 / 4;
  max-width: 620px;
  margin-left: auto;
}
.graph-anim-wrap canvas {
  display: block;
  width: 100%;
  height: 100%;
}

/* ─── Responsive ───────────────────────────────────────────── */
@media (max-width: 1100px) {
  .step-content.has-media {
    grid-template-columns: 1fr;
    gap: 40px;
  }
  .step-media { order: 2; perspective: 1200px; }
  .shot-browser { transform: rotateY(-5deg) rotateX(2deg); }
}
@media (max-width: 768px) {
  .shot-browser { transform: none; }
  .shot-paper   { transform: rotate(-1deg); }
  .shot-paper-wrap { padding: 4px 14px 18px 4px; }
  .source-card  { transform: none; padding: 22px 26px; }
  .source-card--ti { margin-left: 0; }
  .sources-stage { margin-left: 0; }
}

/* ─── Reduced motion: everything rests flat and visible ────── */
@media (prefers-reduced-motion: reduce) {
  .shot-browser, .shot-paper, .source-card { transform: none !important; }
}