/* MSQ WEAVE. Hero: a full-bleed photograph with the title burned into its
   lower left. Authored moment: the loom photograph opens thread by thread on
   load, and Land, Localise and Lift slide in from the right as you scroll. */

/* ---------- Hero ---------- */
.hero--cinema { position: relative; display: flex; flex-direction: column; }
.hero--cinema__fig { margin: 0; order: -1; }   /* placed first; the text comes first in the DOM */
.hero--cinema__fig .hero__media { height: var(--hero-media-phone); }
.hero--cinema__fig .cap { padding-inline: var(--gutter); }
.hero--cinema__text { padding-block: var(--s-5) var(--band-tight); }
@media (min-width: 64em) {
  .hero--cinema__fig .hero__media { height: var(--hero-h); }
  .hero--cinema__fig .hero__media::after { content: ""; position: absolute; inset: 0; background: var(--scrim-deep); pointer-events: none; }
  .hero--cinema__fig .cap { justify-content: flex-end; }
  .hero--cinema__text {
    position: absolute; left: 0; right: 0; bottom: calc(var(--s-7) + var(--s-6)); z-index: var(--z-raise);
    padding: 0 var(--gutter); color: var(--on-photo-2);
  }
  .hero--cinema__text h1 { color: var(--on-photo); max-width: var(--hero-title-max); }
  .hero--cinema__text .t-lead { color: var(--on-photo); }
  .hero--cinema__text .btn { background: var(--night-accent); border-color: var(--night-accent); color: var(--photo-ink); }
  .hero--cinema__text .btn:hover { background: var(--on-photo); border-color: var(--on-photo); color: var(--photo-ink); }
  .hero--cinema__text .link-arrow { color: var(--on-photo); }
  .hero--cinema__text .link-arrow > span { background-image: linear-gradient(var(--night-accent), var(--night-accent)), linear-gradient(var(--on-photo-2), var(--on-photo-2)); }
  .hero--cinema__text .link-arrow:hover > span, .hero--cinema__text .link-arrow:hover .i { color: var(--night-accent); }
  .hero--cinema__text :focus-visible { outline-color: var(--night-accent); }
}

/* The weave reveal: vertical threads widen until the photograph is whole */
@property --thread { syntax: "<length>"; inherits: false; initial-value: 0px; } /* @property needs a literal */
@media (prefers-reduced-motion: no-preference) {
  .js .weave-reveal {
    --thread: 0px;
    -webkit-mask-image: repeating-linear-gradient(90deg, var(--ink) 0, var(--ink) var(--thread), transparent var(--thread), transparent var(--weave-pitch));
    mask-image: repeating-linear-gradient(90deg, var(--ink) 0, var(--ink) var(--thread), transparent var(--thread), transparent var(--weave-pitch));
    animation: weave var(--t-reveal) var(--ease-in-out) var(--delay-load) forwards;
  }
  @keyframes weave { to { --thread: var(--weave-pitch); } }
}

/* ---------- How WEAVE works ---------- */
.weave-how { border-top: var(--hair) solid var(--ink); overflow: clip; }
.weave-how__row { display: grid; grid-template-columns: minmax(0, 7fr) minmax(0, 5fr); column-gap: var(--col-gap); align-items: center; padding-block: var(--s-5); border-bottom: var(--hair) solid var(--rule); }
.weave-how__word {
  font: var(--wt-display) var(--fs-display-1) / var(--lh-display) var(--font-display);
  font-stretch: var(--wd-display); letter-spacing: var(--tr-display); color: var(--ink);
}
.weave-how dd { color: var(--ink-2); }
@media (max-width: 47.99em) { .weave-how__row { grid-template-columns: minmax(0, 1fr); row-gap: var(--s-3); } }
@media (prefers-reduced-motion: no-preference) {
  .js .weave-how__word { transform: translateX(var(--slide-from)); opacity: var(--o-arrive); transition: transform var(--t-reveal) var(--ease-out), opacity var(--t-reveal) var(--ease-out); }
  .js .weave-how__word.is-in { transform: none; opacity: 1; }
  @supports (animation-timeline: view()) {
    .js .weave-how__word, .js .weave-how__word.is-in {
      transition: none; animation: slide-in linear both; animation-timeline: view(); animation-range: entry 0% cover 40%;
    }
    @keyframes slide-in { from { transform: translateX(var(--slide-from)); opacity: var(--o-arrive); } to { transform: none; opacity: 1; } }
  }
}

.weave-board { grid-column: 1 / span 6; grid-row: 2; }
.weave-board a { display: inline-flex; align-items: center; min-height: var(--control-h-sm); margin-block: calc(-1 * var(--s-3)); text-decoration: none; color: var(--ink); }
.weave-board a:hover { color: var(--accent); }
@media (max-width: 63.99em) { .weave-board { grid-column: 1 / -1; } }

.weave-why { margin-top: var(--s-9); row-gap: var(--s-7); align-items: start; }
.weave-why__quote { grid-column: 1 / span 6; }
.weave-why__list { grid-column: 8 / -1; grid-row: 1 / span 2; display: grid; gap: var(--s-6); align-content: start; }
.weave-why__list li { display: grid; gap: var(--s-3); padding-top: var(--s-4); border-top: var(--hair) solid var(--rule); }
.weave-why__list p { color: var(--ink-2); font-size: var(--fs-small); line-height: var(--lh-small); }
@media (max-width: 63.99em) { .weave-why__quote, .weave-why__list, .weave-board { grid-column: 1 / -1; grid-row: auto; } }

/* ---------- The WEAVE map: an indexed table of four groups ---------- */
.weave-map { border-top: var(--rule-heavy) solid var(--ink); }
/* Each group: the name, a serif summary and the AI line in view; the capability list folds */
.weave-group {
  display: grid; grid-template-columns: minmax(0, 3fr) minmax(0, 9fr); column-gap: var(--col-gap); row-gap: var(--s-4);
  padding-block: var(--s-6); border-bottom: var(--hair) solid var(--rule);
  scroll-margin-top: calc(var(--nav-h) + var(--s-5));
}
.weave-group__name { grid-row: 1 / span 3; font: var(--wt-display) var(--fs-title) / var(--lh-h2) var(--font-display); font-stretch: var(--wd-display); letter-spacing: var(--tr-h2); }
.weave-group__sum { grid-column: 2; font: var(--wt-medium) var(--fs-sub) / var(--lh-sub) var(--font-serif); color: var(--ink); max-width: var(--measure); }
.weave-group__sum strong { font-weight: var(--wt-strong); }
.weave-group__ai { grid-column: 2; display: flex; flex-wrap: wrap; gap: var(--s-2) var(--s-4); align-items: baseline; font-size: var(--fs-small); line-height: var(--lh-small); color: var(--ink-2); max-width: none; }
.weave-group__more { grid-column: 2; margin-top: var(--s-2); }
.weave-group__caps { columns: 2; column-gap: var(--col-gap); padding-block: var(--s-3) var(--s-2); font-size: var(--fs-small); line-height: var(--lh-small); }
.weave-group__caps li { break-inside: avoid; padding-block: var(--s-1); color: var(--ink-2); }
@media (max-width: 63.99em) {
  .weave-group { grid-template-columns: minmax(0, 1fr); }
  .weave-group__name { grid-row: auto; }
  .weave-group__sum, .weave-group__ai, .weave-group__more { grid-column: 1; }
}
@media (max-width: 47.99em) { .weave-group__caps { columns: 1; } }

.scope-block { margin-top: var(--s-9); display: grid; gap: var(--s-6); justify-items: start; }
.scope-block > h3 { font: var(--wt-h2) var(--fs-title) / var(--lh-h2) var(--font-display); font-stretch: var(--wd-h2); letter-spacing: var(--tr-h2); }
.scope-seq { width: 100%; }
.scope-seq .seq__step p { font-size: var(--fs-body); line-height: var(--lh-body); }