/* ==========================================================================
   Moncur — page motion + "new look" system
   Shared by the Human-Built Brands and AI-Powered Activation pages.

   Performance rules this file follows:
   - Only transform / opacity / stroke-dashoffset are animated (compositor-friendly, no layout).
   - Nothing is hidden unless JS has opted in (html.js-motion), so no-JS and
     prefers-reduced-motion visitors get the finished page.
   - No images for decoration: doodles are inline SVG strokes, the dot field is a CSS gradient.
   ========================================================================== */

/* ---------- Tokens (palette = deck slide 7 "Color") ----------
   --blue, --lblue, --sand, --cream, --f-wide and --f-body are defined in style.css :root. */
:root {
  --black: #000;
  --white: #fff;

  /* Site already loads these from the Adobe Fonts kit (use.typekit.net/gfb8kpb.css). */
  --f-display:
    "owners-xxnarrow", "Owners XXNarrow", "Big Shoulders Display", sans-serif;

  --ease-out: cubic-bezier(0.16, 1, 0.3, 1); /* expo-out: arrivals */
  --ease-io: cubic-bezier(0.65, 0, 0.35, 1); /* in-out: pen strokes */
  --gutter: clamp(20px, 8.333vw, 120px); /* 120px at the 1440 Figma frame */
  --maxw: 1200px;
  --section-y: clamp(80px, 10vw, 140px);
}

.wrap {
  width: 100%;
  max-width: calc(var(--maxw) + 2 * var(--gutter));
  margin-inline: auto;
  padding-inline: var(--gutter);
}
.section {
  padding-block: var(--section-y);
  position: relative;
  overflow: hidden;
}
.section--black {
  background: var(--black);
  color: var(--white);
}
.section--cream {
  background: var(--cream);
}
.section--blue {
  background: var(--blue);
  color: var(--white);
}
:focus-visible {
  outline: 3px solid var(--blue);
  outline-offset: 4px;
}
.section--blue :focus-visible {
  outline-color: var(--white);
}

/* ---------- Type ---------- */
.eyebrow {
  margin: 0 0 24px;
  font: 700 15px/1.2 var(--f-wide);
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--blue);
}
.section--black .eyebrow {
  color: var(--lblue);
}
.display {
  margin: 0;
  font-family: var(--f-display);
  font-weight: 800;
  text-transform: uppercase;
  line-height: 0.88;
  letter-spacing: -0.005em;
}
.headline {
  margin: 0;
  font: 700 clamp(30px, 3.6vw, 48px)/1.12 var(--f-wide);
  letter-spacing: -0.015em;
}
.lede {
  margin: 0;
  font-size: clamp(18px, 1.6vw, 22px);
  line-height: 1.5;
}
.body {
  font-size: 18px;
  line-height: 1.6;
  color: #3d3d3d;
}
.body p {
  margin: 0 0 1.1em;
}

/* ---------- Doodles (hand-drawn marks; one stroke style everywhere) ----------
   Every <path> carries pathLength="1" so dash maths is size-independent.
   --dd = per-path delay, --dur = draw duration. */
.doodle {
  overflow: visible;
  pointer-events: none;
}
.doodle path {
  fill: none;
  stroke: currentColor;
  stroke-width: var(--sw, 3.2);
  stroke-linecap: round;
  stroke-linejoin: round;
} /* --sw: stroke width in viewBox units, tuned per placement */

/* Word-scale marks that sit on top of text */
.mark {
  position: relative;
  display: inline-block;
  white-space: nowrap;
}
.mark > .doodle {
  position: absolute;
  max-width: none;
} /* marks overhang their word */
.mark--circle > .doodle:not(.mark__sparks) {
  left: -9%;
  top: -22%;
  width: 118%;
  height: 136%;
}
.mark--strike > .doodle {
  left: -2%;
  right: -2%;
  top: 34%;
  width: 104%;
  height: 46%;
}
.mark--under {
  white-space: normal;
} /* long underlined phrases may wrap */
.mark--under > .doodle {
  left: -1%;
  bottom: -0.45em;
  width: 102%;
  height: 0.55em;
}
.mark--circle > .doodle {
  --sw: 4;
}

/* ---------- Motion (only when JS opts in and motion is allowed) ---------- */
.js-motion [data-reveal] {
  opacity: 0;
  transform: translate3d(0, 28px, 0);
  transition:
    opacity 0.9s var(--ease-out),
    transform 1.1s var(--ease-out);
  transition-delay: calc(var(--d, 0s) + var(--i, 0) * 80ms);
}
.js-motion [data-reveal].is-in {
  opacity: 1;
  transform: none;
}

/* split headings: each word rises out of a mask */
.w {
  display: inline-block;
  overflow: hidden;
  vertical-align: top;
  padding: 0.06em 0.02em 0.12em;
  margin: -0.06em -0.02em -0.12em;
}
.w--free {
  overflow: visible;
} /* words carrying a doodle must not clip it */
.wi {
  display: inline-block;
}
/* :where() keeps these at low specificity so per-heading overrides in style.css (e.g. .wwd-title .wi) win
   regardless of stylesheet load order */
.js-motion :where([data-split]) .wi {
  transform: translate3d(0, 108%, 0);
  transition: transform 1s var(--ease-out);
  transition-delay: calc(var(--d, 0s) + var(--i, 0) * 70ms);
}
.js-motion :where([data-split]) .w--free .wi {
  transform: translate3d(0, 40%, 0);
  opacity: 0;
  transition-property: transform, opacity;
}
.js-motion [data-split].is-in .wi {
  transform: none;
  opacity: 1;
}

/* pen strokes draw on after their parent is in view */
.js-motion .doodle path {
  stroke-dasharray: 1 1;
  stroke-dashoffset: 1;
  transition: stroke-dashoffset var(--dur, 0.8s) var(--ease-io) var(--dd, 0s);
}
.js-motion .is-in .doodle path,
.js-motion .doodle.is-in path {
  stroke-dashoffset: 0;
}
/* hover-only marks (e.g. card underlines) opt out of the scroll draw */
.doodle--hover path {
  stroke-dasharray: 1 1;
  stroke-dashoffset: 1;
  transition: stroke-dashoffset 0.5s var(--ease-io);
}
.js-motion .is-in .doodle.doodle--hover path {
  stroke-dashoffset: 1;
}

/* Brushed icons (artwork expanded from the Moncur brush library, "Moncur Marker 40").
   Each brushed .ink shape sits under an SVG mask whose stroke follows the original pen path; js/moncur-site.js
   draws that mask stroke on (attribute updates repaint reliably; CSS-animated mask content doesn't in Chrome).
   The ink itself never swaps or fades, so nothing flashes. Without JS / with reduced motion: fully drawn. */
.ink-icon {
  overflow: visible;
} /* some brushed strokes (e.g. the website cursor) run past the 200x140 box */
.ink-icon path.ink {
  fill: currentColor;
  stroke: none;
}
.ink-icon mask path {
  fill: none;
  stroke: #fff;
  stroke-width: 14;
  stroke-linecap: round;
  stroke-linejoin: round;
} /* fully open by default */
.ink-icon mask path.is-drawing {
  stroke-linecap: butt;
} /* flat ends while drawing: no dot at the start */

@keyframes redraw {
  from {
    stroke-dashoffset: 1;
  }
  to {
    stroke-dashoffset: 0;
  }
}
@keyframes marquee {
  to {
    transform: translate3d(-50%, 0, 0);
  }
}

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