/**
 * PHARAON EXPERIENCE SYSTEM — layout & state
 * ------------------------------------------------------------------
 * Phase: PHARAON-EXP-04
 *
 * Everything here is scoped under `html.phx-ready`, a class the JS core
 * adds only after it has successfully restructured a story for the
 * current breakpoint. Without JavaScript — or on tablet and mobile,
 * where the stories deliberately stay in native vertical flow — none of
 * these rules match and the sections render exactly as they always did.
 * That IS the no-JS and mobile fallback (spec §21, §24): the base markup
 * is the story, in logical order.
 *
 * Sticky first, pin second (spec §11): both stories are CSS
 * `position: sticky` visuals beside naturally scrolling text. Nothing is
 * pinned, nothing traps the scroll, and a fast wheel flick sails through
 * the whole story.
 */

/* ==================================================================
   Shared story scaffold
   ================================================================== */

html.phx-ready .phx-cols {
  display: grid;
  grid-template-columns: minmax(320px, 5fr) 7fr;
  gap: clamp(32px, 4vw, 72px);
  align-items: start;
}

html.phx-ready .phx-sticky {
  position: sticky;
  top: clamp(90px, 16vh, 160px);
}

/* Local progress caption: "03 / 08 — QUALITY" (spec §15). */
html.phx-ready .phx-count {
  display: flex;
  align-items: baseline;
  gap: 0.6em;
  margin: 0 0 1.2em;
  font-size: 13px;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  opacity: 0.65;
}
html.phx-ready .phx-count b {
  font-weight: 600;
  letter-spacing: 0.05em;
}

/* ==================================================================
   EXP-04A — Manufacturing story (.ph-video, desktop >= 1200px)
   ==================================================================
   The section's own head/title/lead move into the left column above the
   chapter steps; the film frame becomes the sticky visual. The chapter
   <li>s — real content, shipped with the film — become full text steps.
   Their is-active / is-done classes are still written by the video
   module's own timeupdate handler, driven by video.currentTime, which
   the story seeks. One clock, one owner.
   ================================================================== */

html.phx-ready [data-phx-story="manufacturing"].phx-on .ph-video__inner {
  display: block;
}

html.phx-ready [data-phx-story="manufacturing"].phx-on .ph-video__steps {
  display: block;
  margin: 0;
  padding: 0;
}

html.phx-ready [data-phx-story="manufacturing"].phx-on .ph-video__step {
  display: flex;
  align-items: baseline;
  gap: 1em;
  min-height: 38vh;
  padding: 2.2em 0;
  margin: 0;
  font-size: clamp(20px, 2vw, 30px);
  font-weight: 500;
  line-height: 1.25;
  border-bottom: 1px solid rgba(128, 128, 128, 0.18);
  opacity: 0.32;
  transition: opacity 320ms cubic-bezier(0.33, 0.68, 0.32, 1);
  counter-increment: phx-step;
  cursor: default;
}

/* Real data, no invention: the number is positional, the time mark comes
   from data-marks. */
html.phx-ready [data-phx-story="manufacturing"].phx-on .ph-video__step::before {
  content: counter(phx-step, decimal-leading-zero);
  font-size: 0.6em;
  font-weight: 600;
  letter-spacing: 0.12em;
  opacity: 0.7;
  min-width: 2.2em;
}

html.phx-ready [data-phx-story="manufacturing"].phx-on .ph-video__step.is-active {
  opacity: 1;
}
html.phx-ready [data-phx-story="manufacturing"].phx-on .ph-video__step.is-done {
  opacity: 0.55;
}

html.phx-ready [data-phx-story="manufacturing"].phx-on .ph-video__steps {
  counter-reset: phx-step;
}

/* The film frame fills the sticky column; the module's own control,
   poster and progress bar ride along untouched. */
html.phx-ready [data-phx-story="manufacturing"].phx-on .phx-right .ph-video__frame {
  margin: 0;
}

/* ==================================================================
   EXP-04B — Product story ([data-phx-story="products"], desktop)
   ==================================================================
   Text steps are the widget's own .portfolio-desc blocks (titles keep
   their live links); the sticky visual stacks the .portfolio-image
   wrappers and crossfades between them. Only opacity and a whisper of
   scale move (spec §27) — the theme's img hover transform keeps sole
   ownership of the <img> itself (spec §26).
   ================================================================== */

html.phx-ready [data-phx-story="products"].phx-on .phx-step {
  min-height: 44vh;
  display: flex;
  flex-direction: column;
  justify-content: center;
  padding: 1.5em 0;
  border-bottom: 1px solid rgba(128, 128, 128, 0.18);
  opacity: 0.38;
  transition: opacity 320ms cubic-bezier(0.33, 0.68, 0.32, 1);
  counter-increment: phx-product;
}
html.phx-ready [data-phx-story="products"].phx-on .phx-step::before {
  content: counter(phx-product, decimal-leading-zero);
  font-size: 12px;
  font-weight: 600;
  letter-spacing: 0.14em;
  opacity: 0.6;
  margin-bottom: 0.9em;
}
html.phx-ready [data-phx-story="products"].phx-on .phx-left {
  counter-reset: phx-product;
}
html.phx-ready [data-phx-story="products"].phx-on .phx-step.is-active {
  opacity: 1;
}

html.phx-ready [data-phx-story="products"].phx-on .phx-step .portfolio-title h4 {
  margin: 0 0 0.35em;
  font-size: clamp(22px, 2.1vw, 32px);
  line-height: 1.2;
}

/* The visual stack: first image sets the box, the rest overlay it. */
html.phx-ready [data-phx-story="products"].phx-on .phx-visual {
  position: relative;
  overflow: hidden;
  border-radius: 20px;
}
html.phx-ready [data-phx-story="products"].phx-on .phx-visual .portfolio-image {
  margin: 0;
}
html.phx-ready [data-phx-story="products"].phx-on .phx-visual .portfolio-image + .portfolio-image {
  position: absolute;
  inset: 0;
}
html.phx-ready [data-phx-story="products"].phx-on .phx-visual .portfolio-image img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
}

/* ==================================================================
   EXP-04C — Factory chapter index (body.phx-factory, desktop)
   ==================================================================
   A minimal fixed rail of the page's real sections. Same visual
   language as the company-profile sub-nav the site already has:
   technical, quiet, vertical.
   ================================================================== */

html.phx-ready .phx-index {
  position: fixed;
  right: clamp(12px, 2vw, 32px);
  top: 50%;
  transform: translateY(-50%);
  z-index: 400;
  display: flex;
  flex-direction: column;
  gap: 10px;
  margin: 0;
  padding: 0;
  list-style: none;
}
html.phx-ready .phx-index a {
  display: flex;
  align-items: center;
  gap: 8px;
  font-size: 11px;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  text-decoration: none;
  color: inherit;
  opacity: 0.45;
  transition: opacity 200ms ease;
}
html.phx-ready .phx-index a::before {
  content: "";
  width: 14px;
  height: 1px;
  background: currentColor;
  transition: width 200ms ease;
}
html.phx-ready .phx-index li.is-active a {
  opacity: 1;
}
html.phx-ready .phx-index li.is-active a::before {
  width: 26px;
}

/* The rail is desktop furniture; below the breakpoint it never exists
   (the JS only builds it inside the desktop matchMedia context). */

/* ==================================================================
   Reduced motion (spec §22)
   ==================================================================
   The core never initialises a story under prefers-reduced-motion, so
   phx-on is never set and this block is a belt-and-braces guarantee, not
   the primary mechanism. */
@media (prefers-reduced-motion: reduce) {
  html.phx-ready .phx-sticky {
    position: static;
  }
  html.phx-ready .phx-step,
  html.phx-ready .ph-video__step {
    opacity: 1 !important;
    transition: none !important;
  }
}