/*
 * Motion layer styles for the agent build (js/motion/*). Every rule is gated by a class or
 * node that JS adds while motion is on. With JS off, reduced motion or motion off, none of
 * this applies and the page is the static layout. Nothing here changes geometry:
 * decorative nodes are absolutely positioned, and the only toggled properties on real
 * content are colour (count-up readout) and position:relative (no offsets).
 *
 * Editor palette: brand accent on navy; the "design editor" chrome
 * (placeholders, selection boxes, handles, size tags, carets) uses a blue accent.
 */
:root {
  --mo-blue: #2f9bff;
  --mo-blue-soft: rgb(47 155 255 / 0.45);
  --mo-ph: rgb(120 146 186 / 0.26);
  --mo-ph-edge: rgb(47 155 255 / 0.32);
  --mo-mono: ui-monospace, 'Cascadia Mono', Consolas, monospace;
}

/* First-visit cover until the opening takes over (js/main.js adds it, the director removes it). */
html.mo-cover body::before {
  content: '';
  position: fixed;
  inset: 0;
  z-index: 89;
  background: var(--bg);
  pointer-events: none;
}

.mo-rel {
  position: relative;
}

/* ---------- Per-section build layer ---------- */
.mo-layer {
  position: absolute;
  inset: 0;
  z-index: 20;
  pointer-events: none;
  user-select: none;
  overflow-x: clip;
  overflow-y: visible;
}

/* Placeholders: grey-blue blocks (images, cards), outlined text boxes, a tint over solid text */
.mo-ph {
  position: absolute;
  border-radius: 3px;
}

.mo-ph--block {
  background: linear-gradient(160deg, rgb(140 164 200 / 0.3), var(--mo-ph) 60%);
  box-shadow: inset 0 0 0 1px var(--mo-ph-edge);
}

.mo-ph--text {
  box-shadow: inset 0 0 0 1px var(--mo-blue-soft);
  background: rgb(47 155 255 / 0.05);
}

/* I-beam text cursor waiting beside every text box */
.mo-ph--text::after {
  content: '';
  position: absolute;
  inset-inline-end: -10px;
  inset-block-start: 50%;
  inline-size: 7px;
  block-size: 14px;
  margin-block-start: -7px;
  border-block: 2px solid #dfe8f5;
  background: linear-gradient(#dfe8f5, #dfe8f5) center / 2px 100% no-repeat;
}

.mo-ph--tint {
  background: rgb(120 146 186 / 0.42);
  box-shadow: inset 0 0 0 1px var(--mo-ph-edge);
}

.mo-ph--outline {
  border: 1px dashed rgb(47 155 255 / 0.65);
  background: rgb(47 155 255 / 0.03);
  border-radius: var(--radius);
}

.mo-ph__skel {
  position: absolute;
  inset: var(--space-5);
  display: flex;
  flex-direction: column;
  gap: 0.7rem;
}

.mo-ph__bar {
  display: block;
  block-size: 0.7rem;
  inline-size: 72%;
  border-radius: 2px;
  background: var(--mo-ph);
}

.mo-ph__bar:first-child {
  block-size: 1.1rem;
  inline-size: 55%;
  margin-block-end: 0.4rem;
  background: rgb(47 155 255 / 0.22);
}

.mo-ph__bar:last-child {
  inline-size: 48%;
}

.mo-ph__label {
  position: absolute;
  inset-block-start: 0.5rem;
  inset-inline-start: 0.6rem;
  padding: 0.15rem 0.4rem;
  border-radius: 2px;
  background: rgb(11 11 13 / 0.8);
  color: var(--mo-blue);
  font: 600 0.6875rem/1.2 var(--mo-mono);
  letter-spacing: 0.04em;
  white-space: nowrap;
}

/* Selection box: 1px blue frame, 8 square handles, size tag */
.mo-sel {
  position: absolute;
  box-shadow: 0 0 0 1px var(--mo-blue);
  will-change: clip-path, opacity;
}

.mo-sel__h {
  position: absolute;
  inline-size: 7px;
  block-size: 7px;
  margin: -3.5px 0 0 -3.5px;
  background: #fff;
  box-shadow: 0 0 0 1px var(--mo-blue);
}

.mo-sel__h--nw { inset-inline-start: 0; inset-block-start: 0; }
.mo-sel__h--n { inset-inline-start: 50%; inset-block-start: 0; }
.mo-sel__h--ne { inset-inline-start: 100%; inset-block-start: 0; }
.mo-sel__h--e { inset-inline-start: 100%; inset-block-start: 50%; }
.mo-sel__h--se { inset-inline-start: 100%; inset-block-start: 100%; }
.mo-sel__h--s { inset-inline-start: 50%; inset-block-start: 100%; }
.mo-sel__h--sw { inset-inline-start: 0; inset-block-start: 100%; }
.mo-sel__h--w { inset-inline-start: 0; inset-block-start: 50%; }

.mo-sel__dim {
  position: absolute;
  inset-block-start: calc(100% + 7px);
  inset-inline-start: 50%;
  translate: -50% 0;
  padding: 2px 5px;
  border-radius: 3px;
  background: var(--mo-blue);
  color: #fff;
  font: 600 10px/1.2 var(--mo-mono);
  letter-spacing: 0.02em;
  white-space: nowrap;
}

/* Text carets */
.mo-ibeam {
  position: absolute;
  inline-size: 2px;
  margin-inline-start: 1px;
  background: var(--mo-blue);
  box-shadow: 0 0 8px rgb(47 155 255 / 0.7);
}

.mo-decode {
  position: absolute;
  padding-inline: 0.15em;
  background: var(--mo-blue);
  color: #fff;
  font: 700 0.75em/1 var(--mo-mono);
  display: flex;
  align-items: center;
  white-space: nowrap;
}

.mo-caret {
  position: absolute;
  margin-inline-start: 4px;
  inline-size: 0.42em;
  background: var(--accent);
}

/* Paint scan line, sweep highlight, fill edge, guides */
.mo-scanline {
  position: absolute;
  block-size: 2px;
  margin-block-start: -1px;
  background: var(--mo-blue);
  box-shadow: 0 0 14px 2px rgb(47 155 255 / 0.55);
}

.mo-sweep {
  position: absolute;
  background: rgb(47 155 255 / 0.38);
  mix-blend-mode: screen;
}

.mo-fill-edge {
  position: absolute;
  inline-size: 2px;
  background: var(--mo-blue);
  box-shadow: 0 0 10px rgb(47 155 255 / 0.8);
}

.mo-guide {
  position: absolute;
  background: rgb(47 155 255 / 0.55);
}

.mo-guide--h {
  inset-inline: 0;
  block-size: 1px;
  transform-origin: left center;
}

.mo-guide--v {
  inset-block: 0;
  inline-size: 1px;
  transform-origin: center top;
}

html[data-motion-tier='lite'] .mo-scanline,
html[data-motion-tier='lite'] .mo-ibeam,
html[data-motion-tier='lite'] .mo-fill-edge {
  box-shadow: none;
}

/* ---------- Hero: PORTFOLIO glyph copies (blue outline wireframe + landing fill) ---------- */
.mo-glyphs {
  position: absolute;
  inset: 0;
  z-index: 0;
  pointer-events: none;
  user-select: none;
}

.mo-glyph {
  position: absolute;
  display: block;
  margin: 0;
  font-family: var(--font-display);
  letter-spacing: 0;
  text-transform: uppercase;
  white-space: nowrap;
  will-change: transform, opacity;
}

.mo-glyph--line {
  color: transparent;
  -webkit-text-stroke: 1px rgb(47 155 255 / 0.6);
}

.mo-glyph--fill {
  color: transparent;
  background: linear-gradient(
    to bottom,
    rgb(var(--accent-rgb) / 0.85) 0%,
    rgb(var(--accent-rgb) / 0.35) 45%,
    transparent 100%
  );
  -webkit-background-clip: text;
  background-clip: text;
  -webkit-text-fill-color: transparent;
}

/* ---------- Count-up readout: the real text stays (transparent) and keeps the layout ---------- */
.mo-counting {
  position: relative;
  color: transparent !important;
}

.mo-counting::after {
  content: attr(data-mo-count);
  position: absolute;
  inset-inline-start: 0;
  inset-block-start: 0;
  color: var(--accent);
  white-space: nowrap;
  animation: mo-flicker 0.16s steps(2, jump-none) infinite;
}

@keyframes mo-flicker {
  0% {
    opacity: 1;
  }
  100% {
    opacity: 0.55;
  }
}

/* ---------- Journey: track, drawn line, node sockets ---------- */
.timeline.mo-track {
  border-inline-start-color: rgb(var(--accent-rgb) / 0.14);
}

.mo-jline {
  position: absolute;
  inset-block: 0;
  inset-inline-start: -2px;
  inline-size: 2px;
  background: var(--accent);
  box-shadow: 0 0 10px rgb(var(--accent-rgb) / 0.55);
  pointer-events: none;
}

.timeline__item.mo-node-off::before {
  transform: scale(0.45);
  background: transparent;
  box-shadow: inset 0 0 0 1px rgb(var(--accent-rgb) / 0.45);
}

.timeline__item.mo-node-on::before {
  transform: scale(1);
  transition: transform calc(0.45s * var(--mo-ts, 1)) cubic-bezier(0.34, 1.8, 0.64, 1);
}

.timeline__item.mo-node-on::after {
  content: '';
  position: absolute;
  inset-inline-start: calc(-1 * var(--space-6) - 5px);
  inset-block-start: 0.35rem;
  inline-size: 10px;
  block-size: 10px;
  border-radius: 50%;
  border: 2px solid var(--accent);
  pointer-events: none;
  opacity: 0;
  animation: mo-ring calc(0.7s * var(--mo-ts, 1)) ease-out 1;
}

@keyframes mo-ring {
  0% {
    opacity: 0.9;
    transform: scale(1);
  }
  100% {
    opacity: 0;
    transform: scale(3.2);
  }
}

/* ---------- Contact: CTA pulse ring ---------- */
.mo-cta-ring {
  position: absolute;
  border-radius: var(--radius);
  border: 2px solid var(--accent);
}