/* ============================================================
   PROJECT PAGE · ITEM Lab
   Loaded after css/tokens.css + css/styles.css.
   Shared case-study layout lives in styles.css (.case-*).
   Add only ITEM Lab-specific overrides/accents below.
   ============================================================ */
.case--itemlab .case-name {
  height: 48px;
  width: auto;
  align-self: flex-start;  /* opt out of the column-flex stretch */
  display: block;
}

/* ============================================================
   CONSTRAINTS scrollytelling scene (step 6 only)
   Mirrors Joyn's Solution "pre" act: the pinned 16:9 stage holds two
   panels that slide in from the right and STACK as the .sol-beat blocks
   in the text column scroll past centre. case-scroll.js writes the active
   beat onto .sol-stage[data-scene]; all motion below is CSS.
   Scenes: c-1 → first panel · c-2 → both panels.
   (Reuses the generic .sol-* markup/JS shared with Joyn; joyn.css is not
   loaded here, so the needed rules are restated below.)
   ============================================================ */

/* the step-6 media slot becomes the sliding stage */
.case--itemlab .sol-stage {
  padding: 0;
  background: var(--bg);
}

/* the (single) act fills the frame; panels are laid out in a centred row */
.case--itemlab .sol-phase--pre {
  position: absolute;
  inset: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 4%;
  padding: 5% 4%;
}

/* panels are CONTAINED, not cover — override .case-scroll-media img */
.case--itemlab .sol-stage img {
  width: auto;
  height: 100%;
  object-fit: contain;
  transform: none;
  backface-visibility: hidden;
}

/* each panel starts off-frame to the right; revealed CUMULATIVELY by scene */
.case--itemlab .sol-mock {
  height: 100%;
  opacity: 0;
  transform: translateX(56px);
  transition: opacity 0.7s var(--ease, ease), transform 0.7s var(--ease, ease);
}
.case--itemlab .sol-stage[data-scene="c-1"] .sol-mock--1,
.case--itemlab .sol-stage[data-scene="c-2"] .sol-mock--1,
.case--itemlab .sol-stage[data-scene="c-2"] .sol-mock--2 {
  opacity: 1;
  transform: translateX(0);
}

/* The FIRST panel has nothing before it to react to, so it slides in the
   moment the scene takes the viewport (.sol-active toggled by case-scroll.js).
   Both the left panel and its right-column copy enter in sync. */
@keyframes itemSlideMockIn {
  from { opacity: 0; transform: translateX(56px); }
  to   { opacity: 1; transform: translateX(0); }
}
@keyframes itemSlideItemIn {
  from { opacity: 0; transform: translateX(26px); }
  to   { opacity: 1; transform: translateX(0); }
}
.case--itemlab .sol-stage.sol-active[data-scene="c-1"] .sol-mock--1 {
  animation: itemSlideMockIn 0.7s var(--ease, ease) both;
}
.case--itemlab .sol-panel.sol-active[data-scene="c-1"] .sol-item--1 {
  animation: itemSlideItemIn 0.55s var(--ease, ease) both;
}

/* ---------- text column ----------
   The heading + copy panel are PINNED (sticky) so the Constraints title
   sits above the body for the whole scene; an invisible .sol-track of
   spacers supplies the scroll length and drives the scene. The items
   STACK up cumulatively, keyed off the data-scene shared with the stage. */
.case--itemlab .case-step--constraints {
  display: block;
  min-height: auto;
  padding: 0;
}
.case--itemlab .sol-sticky {
  position: sticky;
  top: 156px;                 /* aligns with the pinned 16:9 stage */
  z-index: 1;
}
.case--itemlab .sol-head { margin-bottom: 24px; }
.case--itemlab .sol-panel {
  position: relative;
  min-height: 260px;          /* holds the full two-item stack */
}

/* each item enters from the right; revealed CUMULATIVELY by scene */
.case--itemlab .sol-item {
  opacity: 0;
  transform: translateX(26px);
  transition: opacity 0.55s var(--ease, ease), transform 0.55s var(--ease, ease);
}
.case--itemlab .sol-panel[data-scene="c-1"] .sol-item--1,
.case--itemlab .sol-panel[data-scene="c-2"] .sol-item--1,
.case--itemlab .sol-panel[data-scene="c-2"] .sol-item--2 {
  opacity: 1;
  transform: translateX(0);
}
.case--itemlab .sol-item--2 { transition-delay: 0.06s; }

/* Item typography reuses the shared .exp-label / .subtext-* classes so the
   copy matches every other step. Each item carries a per-item eyebrow tag,
   so we drop subtext-item's flex gap and set explicit margins to hit the
   exact rhythm: tag —20→ title —6→ description (items are 32px apart via
   .subtext-row above). */
.case--itemlab .sol-panel .subtext-item { gap: 0; }
.case--itemlab .sol-panel .subtext-highlight { margin-bottom: 6px; }

/* invisible scroll track — leisurely pace: ~one screen per beat */
.case--itemlab .sol-track { position: relative; }
.case--itemlab .sol-beat { min-height: 92vh; }

/* ---------- responsive: no scroll track, so reveal everything at rest ---------- */
@media (max-width: 900px) {
  /* stage keeps its 16:9 row; both panels shown since no beats fire */
  .case--itemlab .sol-mock { opacity: 1; transform: none; }
  .case--itemlab .sol-phase--pre { gap: 3%; padding: 6% 4%; }
  /* copy panel unsticks into a plain stacked list */
  .case--itemlab .sol-sticky { position: static; }
  .case--itemlab .sol-panel { min-height: 0; }
  .case--itemlab .sol-item { opacity: 1; transform: none; }
  .case--itemlab .sol-track { display: none; }
}