/* ==========================================================================
   Digital Marketing story (Phase 4): CONTENT → ATTENTION → ENGAGEMENT → RESULTS
   Base rules = static (no JS / reduced motion) and the mobile layout: steps in
   normal flow, then the service list with descriptions.
   .motion-d: the section starts at the Phase 3 stage top at its lock; the
   creative and the service list stay put (sticky layer) while the steps flow
   past on the left. One step owns the frame at a time (js/story.js).
   ========================================================================== */

/* The Phase 4 list (with descriptions) is the service list from here on. The
   Phase 3 list only remains as the desktop lock frame inside the stage. */
html:not(.motion-d) .dm__services { display: none; }

.story {
  position: relative;
  display: flex;
  flex-direction: column;
  max-width: var(--ref-width);
  margin: 0 auto;
  padding: 8px var(--gutter) 112px;
}
.story__steps { order: 1; padding: 0; max-width: none; }
.story__pin { order: 2; }
.story__anchor { display: none; }

/* ---- Steps ---- */
.step {
  display: grid;
  grid-template-columns: minmax(0, 1fr) 34%;
  column-gap: 20px;
  align-items: start;
  padding-block: 48px;
  border-top: 1px solid var(--line);
}
.step:first-child { border-top: 0; }
/* Phase 4B: DIGITAL MARKETING → creative → CONTENT reads as one chapter on
   mobile (the Phase 3 section keeps its own bottom padding). */
@media (max-width: 1023.98px) {
  .story { margin-top: -48px; padding-top: 0; }
  .step:first-child { padding-top: 24px; }
}
.step__sum,
.step__word { grid-column: 1 / -1; }
.step__word {
  color: var(--ink);
  font-size: clamp(32px, 10.5vw, 48px);
  font-weight: 900;
  font-stretch: var(--stretch-display);
  letter-spacing: -0.05em;
  line-height: 0.9;
  text-transform: uppercase;
}
.step__word--signal { color: var(--mas-red); }
.step__sum {
  margin-bottom: 14px;
  color: var(--muted);
  font-size: 10px;
  font-weight: 600;
  font-stretch: var(--stretch-ui);
  letter-spacing: 0.18em;
  text-transform: uppercase;
}
.step__copy {
  grid-column: 1;
  margin-top: 16px;
  color: var(--body);
  font-size: 14.5px;
  line-height: 1.55;
  max-width: 26em;
}

/* Per-step creative response (mobile / static): the same creative, framed
   for the state. Desktop uses the single sticky anchor instead. */
.step__thumb {
  grid-column: 2;
  grid-row: 2 / span 2;
  position: relative;
  margin-top: 28px;   /* clear of the word's line box */
  aspect-ratio: 9 / 16;
  overflow: hidden;
  background: #111214;
}
.step__thumb > img,
.step__pair img {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
}
[data-step="results"] .step__copy { grid-row: 3; }
[data-step="results"] .step__thumb { grid-row: 3 / span 2; }
[data-step="attention"] .step__thumb > img { transform: scale(1.16); }
[data-step="attention"] .step__thumb::after,
[data-step="results"] .step__thumb::after {
  content: "";
  position: absolute;
  left: 0;
  bottom: 0;
  width: 38%;
  height: 2px;
  background: var(--mas-red);
}
[data-step="results"] .step__thumb::after { width: 100%; height: 3px; }
[data-step="engagement"] .step__thumb { overflow: visible; }
.step__pair {
  position: absolute;
  left: -42%;
  bottom: 10%;
  width: 62%;
  aspect-ratio: 1;
  overflow: hidden;
  background: #111214;
  outline: 3px solid var(--white);
}

/* ---- Service list (same type as the Phase 3 list, plus descriptions) ---- */
.story__services { margin-top: 24px; }
.svc { margin: 0; }
.svc__item {
  position: relative;
  display: flex;
  flex-wrap: wrap;
  align-items: baseline;
  column-gap: 18px;
  padding-block: 15px;
  border-top: 1px solid var(--line);
  color: var(--ink);
  font-size: 13px;
  font-weight: 600;
  font-stretch: var(--stretch-ui);
  letter-spacing: 0.14em;
  text-transform: uppercase;
}
.svc__item:last-child { border-bottom: 1px solid var(--line); }
.svc__index {
  min-width: 2ch;
  color: var(--muted);
  font-size: 10px;
  font-weight: 500;
  letter-spacing: 0.1em;
}
/* Description wraps onto its own line under the name (index width + gap). */
.svc__desc {
  flex: 0 0 100%;
  padding-left: calc(2ch * 10 / 12.5 + 18px);
  display: grid;
  grid-template-rows: 1fr;
  color: var(--body);
  font-size: 12.5px;
  font-weight: 400;
  font-stretch: 100%;
  letter-spacing: 0;
  line-height: 1.5;
  text-transform: none;
}
.svc__desc { margin-top: 6px; }
.svc__desc > span { min-height: 0; overflow: hidden; }
.svc__item:focus-visible { outline-offset: 2px; }

/* ==========================================================================
   Static desktop (no JS / reduced motion): steps left, services right
   ========================================================================== */
@media (min-width: 1024px) {
  html:not(.motion-d) .story {
    display: grid;
    grid-template-columns: repeat(12, minmax(0, 1fr));
    column-gap: calc(24 * var(--u));
    padding-top: 0;
    padding-bottom: calc(160 * var(--u));
  }
  html:not(.motion-d) .story__steps { grid-column: 1 / span 6; grid-row: 1; }
  html:not(.motion-d) .story__pin { display: contents; }
  html:not(.motion-d) .story__services { grid-column: 8 / -1; grid-row: 1; margin-top: 40px; }
  .step__thumb { display: none; }
  .step { grid-template-columns: minmax(0, 1fr); }
  .step__word { font-size: calc(64 * var(--u)); }
  .step__copy { font-size: 15px; }
}

/* ==========================================================================
   Desktop motion
   ========================================================================== */
.motion-d .story {
  display: grid;           /* pin and steps share one cell (see .story__pin) */
  grid-template-columns: minmax(0, 1fr);
  z-index: 6;
  max-width: none;
  margin: -100vh 0 0;      /* starts at the Phase 3 stage top at its lock */
  padding: 0;
}
/* Sticky layer: creative + services hold while the steps flow. It overlaps
   the steps in the same grid cell (a negative margin would extend its sticky
   range 100vh past the section). Hidden until the handoff at the lock. */
.motion-d .story__pin {
  grid-area: 1 / 1;
  align-self: start;
  position: sticky;
  top: 0;
  z-index: 1;
  height: 100vh;
  pointer-events: none;
  visibility: hidden;
}
.motion-d.p4-live .story__pin { visibility: visible; }
/* Same pixels: once the story owns them, the Phase 3 copies are hidden. */
.motion-d.p4-live .place[data-place="social"],
.motion-d.p4-live .dm__services { visibility: hidden; }

.motion-d .story__anchor {
  display: block;
  position: absolute;
  left: var(--a-x);
  top: var(--a-y);
  width: var(--a-w);
  height: var(--a-h);
}
.motion-d .story__media {
  position: absolute;
  inset: 0;
  z-index: 1;
  margin: 0;
  overflow: hidden;
  background: #111214;
  will-change: transform;   /* same raster path as the Phase 3 placement it replaces */
  transition: transform 520ms var(--ease-mech);
}
.motion-d .story__media img,
.motion-d .story__alt img {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  transition: transform 520ms var(--ease-mech);
}
.motion-d .story__alt {
  position: absolute;
  left: 0;
  bottom: 10%;
  z-index: 0;
  width: 58%;
  aspect-ratio: 1;
  overflow: hidden;
  background: #111214;
  opacity: 0;
  transition: transform 520ms var(--ease-mech), opacity 200ms linear 0ms;
}
.motion-d .story__rule {
  position: absolute;
  left: 0;
  top: calc(100% + 16px);
  width: 100%;
  height: 2px;
  background: var(--mas-red);
  transform: scaleX(0);
  transform-origin: left center;
  transition: transform 520ms var(--ease-mech), height 0ms;
}

.motion-d .story__services {
  position: absolute;
  left: var(--s-x);
  top: var(--s-y);
  width: var(--s-w);
  margin: 0;
  pointer-events: auto;
}
/* Lock frame = the Phase 3 list: descriptions closed until the story starts. */
.motion-d .svc__desc { grid-template-rows: 0fr; margin-top: 0; transition: grid-template-rows 480ms var(--ease-mech), margin-top 480ms var(--ease-mech); }
.motion-d .story[data-state] .svc__desc { grid-template-rows: 1fr; margin-top: 6px; }
.motion-d .svc__item,
.motion-d .svc__index { transition: color 300ms linear, transform 420ms var(--ease-mech); }
.motion-d .svc__item::before {
  content: "";
  position: absolute;
  left: -22px;
  top: 21px;
  width: 12px;
  height: 2px;
  background: var(--mas-red);
  transform: scaleX(0);
  transform-origin: left center;
  transition: transform 420ms var(--ease-mech);
}
.motion-d .story[data-state] .svc__item { color: var(--muted); }
.motion-d .story[data-state] .svc__desc { color: var(--muted); }
.motion-d .svc__item.is-active,
.motion-d .svc__item:hover,
.motion-d .svc__item:focus-visible { color: var(--ink); transform: translateX(6px); }
.motion-d .svc__item.is-active .svc__desc,
.motion-d .svc__item:hover .svc__desc,
.motion-d .svc__item:focus-visible .svc__desc { color: var(--body); }
.motion-d .svc__item.is-active .svc__index { color: var(--mas-red); }
.motion-d .svc__item.is-active::before,
.motion-d .svc__item:hover::before,
.motion-d .svc__item:focus-visible::before { transform: scaleX(1); }

/* Steps flow in the left columns; the first starts just below the fold. */
.motion-d .story__steps {
  grid-area: 1 / 1;
  width: 100%;
  position: relative;
  z-index: 2;
  max-width: var(--ref-width);
  margin: 0 auto;
  /* 22vh end space inside the shared cell: the pin releases exactly where the
     page used to end, then leaves together with RESULTS. */
  padding: 100vh var(--gutter) 22vh;
}
.motion-d .step {
  display: block;
  max-width: calc(520 * var(--u));
  min-width: 360px;
  min-height: 52vh;   /* Phase 4B: was 70vh */
  padding: 0;
  border: 0;
  opacity: 0.18;
  transition: opacity 420ms linear;
}
.motion-d .step:last-child { min-height: 58vh; }
.motion-d .step.is-active { opacity: 1; }
.motion-d .step__word {
  display: inline-block;
  font-size: calc(64 * var(--u));
}
.motion-d .step__word::before {
  content: "";
  display: block;
  width: 22px;
  height: 2px;
  margin-bottom: calc(22 * var(--u));
  background: var(--mas-red);
  transform: scaleX(0);
  transform-origin: left center;
  transition: transform 420ms var(--ease-mech);
}
.motion-d .step.is-active .step__word::before { transform: scaleX(1); }
.motion-d .step__copy { margin-top: calc(22 * var(--u)); font-size: 15px; }
/* Text-width box, so it never reaches the ENGAGEMENT crop beside the creative. */
.motion-d .step__sum { display: table; }

/* Creative response per state (small amplitudes, then still). */
.motion-d .story[data-state="attention"] .story__media { transform: scale(1.035); }
.motion-d .story[data-state="attention"] .story__media img { transform: scale(1.12); }
.motion-d .story[data-state="attention"] .story__rule { transform: scaleX(0.38); }
.motion-d .story[data-state="engagement"] .story__alt { opacity: 1; transform: translateX(-62%); }
.motion-d .story[data-state="results"] .story__rule { height: 3px; transform: scaleX(1); }

/* ==========================================================================
   Mobile motion: each step settles as it enters (word → creative → copy)
   ========================================================================== */
.motion-m.motion-ready .step__word,
.motion-m.motion-ready .step__thumb,
.motion-m.motion-ready .step__copy,
.motion-m.motion-ready .step__sum {
  clip-path: inset(0 100% 0 0);
  transition: clip-path 520ms var(--ease-mech);
}
.motion-m.motion-ready .step__word { clip-path: inset(0 0 100% 0); transform: translateY(24px); transition: clip-path 480ms var(--ease-mech), transform 480ms var(--ease-mech); }
.motion-m.motion-ready .step.is-in :is(.step__word, .step__thumb, .step__copy, .step__sum) { clip-path: inset(-20px -60% -20px -60%); transform: none; }
.motion-m.motion-ready .step.is-in .step__thumb { transition-delay: 120ms; }
.motion-m.motion-ready .step.is-in .step__copy { transition-delay: 240ms; }

@media (prefers-reduced-motion: reduce) {
  .story *, .story *::before, .story *::after { transition: none !important; }
}