/* Open Form / responsive art. Text and layout remain independent of motion. */
:root {
  --art-open-distance: -26px;
  --art-flare-distance: -56px;
  --art-draw-step: 24ms;
  --art-walk: 2400ms;       /* the profile trail, walked once in one column */
}
/* SVG user units: a phone draws the bloom at under half the desktop size,
   so the same gesture needs a longer travel to read at arm's length. */
@media (max-width: 768px) {
  :root {
    --art-open-distance: -40px;
    --art-flare-distance: -72px;
  }
}
@media (prefers-reduced-motion: no-preference) {
  .bloom-responsive {
    touch-action: pan-y;
    -webkit-user-select: none;
    user-select: none;
    -webkit-touch-callout: none;
    -webkit-tap-highlight-color: transparent;
  }
  .bloom-responsive .hb-quad {
    --art-shift: calc(var(--petal-open, 0) * var(--art-open-distance) + var(--petal-flare, 0) * var(--art-flare-distance));
    transform: translate(var(--art-shift), var(--art-shift));
    transition: none;
  }
  /* Leaving the hero, the petals turn back by the angle they arrived with. */
  .bloom-responsive .hb-lines {
    translate: 0 calc(var(--bloom-depth, 0px) * -0.35);
    rotate: calc(var(--bloom-turn, 0) * var(--hero-rotate));
    transform-origin: 300px 300px;
  }
  .bloom-responsive .hb-core {
    transform-box: fill-box;
    transform-origin: center;
    scale: calc(1 + var(--bloom-turn, 0) + var(--bloom-energy, 0) * 0.5);
  }
  .bloom-responsive .hb-ring {
    stroke-dasharray: 2 10;
    opacity: 0.7;
  }
  .case-slab.art-directed .slab-motif,
  .case-slab.art-directed:hover .slab-motif {
    transform: translate(var(--art-x, 0px), var(--art-y, 0px)) scale(1.06);
    transition: transform var(--dur-slower) var(--ease-brand);
  }
  .art-directed .slab-motif path {
    stroke-dasharray: 1;
    stroke-dashoffset: 1;
  }
  .art-directed.art-revealed .slab-motif path {
    stroke-dashoffset: 0;
    transition: stroke-dashoffset var(--dur-draw) var(--ease-brand);
    transition-delay: calc(var(--art-layer, 0) * var(--art-draw-step));
  }
  .op-contact .bl-quad {
    transition: translate var(--dur-motion) var(--ease-brand);
  }
  .op-contact.is-composing .bl-quad {
    translate: -12px -12px;
  }
  .op-contact.is-composing .bl-core {
    transform-box: fill-box;
    transform-origin: center;
    scale: 1.25;
    transition: scale var(--dur-motion) var(--ease-brand);
  }
}
@media (prefers-reduced-motion: reduce) {
  .art-directed .slab-motif path { stroke-dashoffset: 0; }
  .case-slab.art-directed .slab-motif { transform: none; transition: none; }
}

/* ================================================================
   Section art (scripts/section-art.py): the petal as the problem,
   the plan, the system and the bloom. Both sections sit on the ink
   ground in light and dark themes, so the lines are white.
   ================================================================ */
.sa-svg { display: block; width: 100%; height: auto; overflow: visible; }
.sa-ring, .sa-axis { stroke: rgba(255, 255, 255, 0.16); stroke-width: 1.2; }
.sa-quad path { stroke: rgba(255, 255, 255, 0.62); stroke-width: 1.4; }

/* Problems — a congested stack. js/art-direction.js eases --jam to 0. */
.problems-section .ed-header {
  display: grid;
  grid-template-columns: minmax(0, 1fr) clamp(220px, 26vw, 340px);
  column-gap: clamp(32px, 6vw, 96px);
  align-items: center;
  max-width: none;
}
.problems-section .ed-header > .eyebrow,
.problems-section .ed-header > h2 { grid-column: 1; }
.problems-section .ed-header > .eyebrow { align-self: end; }
.problems-section .ed-header > h2 { align-self: start; }
.problems-art { grid-column: 2; grid-row: 1 / span 2; }
.sa-jam path {
  stroke: var(--accent);
  stroke: color-mix(in srgb, var(--accent) calc(var(--jam, 1) * 100%), rgba(255, 255, 255, 0.62));
}

/* Hero → header: when the bloom has left the hero, the symbol in the header
   opens a breath along its diagonals to receive it (js/art-direction.js). */
@media (prefers-reduced-motion: no-preference) {
  .logo.is-handoff .lp { animation: logoHandoff var(--dur-motion) var(--ease-brand) both; }
  @keyframes logoHandoff {
    0% { transform: translate(0, 0); }
    45% { transform: translate(-6px, -6px); }
    100% { transform: translate(0, 0); }
  }
}

/* Approach — plan, system, bloom. The numeral indexes the drawing. */
.stack-art { width: min(100%, 42svh); }
.stack-art .sa-svg { margin-top: var(--sp-3); }
.sa-plan { stroke: rgba(255, 255, 255, 0.3); stroke-width: 1.2; stroke-dasharray: 6 8; }
.sa-contour { stroke: var(--paper); stroke-width: 2; }
.sa-handle { stroke: rgba(255, 255, 255, 0.5); stroke-width: 1; }
.sa-ctrl { fill: var(--primary-dark); stroke: var(--paper); stroke-width: 1.4; }
.sa-anchor { fill: var(--paper); }
.sa-point, .sa-core { fill: var(--accent); }
.sa-copy path { stroke: rgba(255, 255, 255, 0.38); }
.sa-unit path { stroke: rgba(255, 255, 255, 0.8); }
.sa-grow-ring { stroke-dasharray: 0.006 0.02; }
.sa-part { transform: translate(-30px, -30px); }

/* /apps How we build: the same three drawings, small, on paper. */
.how-art { width: min(100%, 176px); margin: 0 0 var(--sp-3); }
.how-art .sa-ring, .how-art .sa-axis { stroke: var(--border); stroke-opacity: 1; }
.how-art .sa-quad path { stroke: var(--ink); stroke-opacity: 0.55; }
.how-art .sa-plan { stroke: var(--ink); stroke-opacity: 0.3; }
.how-art .sa-contour { stroke: var(--ink); }
.how-art .sa-handle { stroke: var(--ink); stroke-opacity: 0.5; }
.how-art .sa-ctrl { fill: var(--bg); stroke: var(--ink); }
.how-art .sa-anchor { fill: var(--ink); }
.how-art .sa-copy path { stroke-opacity: 0.28; }
.how-art .sa-unit path { stroke-opacity: 0.75; }

@media (max-width: 900px) {
  .problems-section .ed-header { grid-template-columns: 1fr; }
  .problems-art {
    grid-column: 1;
    grid-row: auto;
    width: min(62vw, 280px);
    margin: var(--sp-5) auto 0;
  }
  /* Numeral left, drawing right: an index beside its figure. */
  .stack-art {
    width: 100%;
    display: flex;
    justify-content: space-between;
    align-items: flex-start;
  }
  .stack-art .sa-svg { width: min(54vw, 260px); margin-top: 0; }
}

/* Drawn once as the panel arrives. JS arms the art, so without JS or with
   reduced motion every drawing simply rests in its finished state. */
@media (prefers-reduced-motion: no-preference) {
  .sa-armed .sa-draw { stroke-dasharray: 1; stroke-dashoffset: 1; }
  .sa-armed .sa-plan,
  .sa-armed .sa-handle,
  .sa-armed .sa-ctrl,
  .sa-armed .sa-anchor { opacity: 0; }
  .sa-armed .sa-point { scale: 0; transform-box: fill-box; transform-origin: center; }
  .sa-armed.sa-drawn .sa-draw { stroke-dashoffset: 0; transition: stroke-dashoffset var(--dur-draw) var(--ease-brand); }
  .sa-armed.sa-drawn .sa-plan { opacity: 1; transition: opacity var(--dur-motion) var(--ease-brand) 600ms; }
  .sa-armed.sa-drawn .sa-handle,
  .sa-armed.sa-drawn .sa-ctrl,
  .sa-armed.sa-drawn .sa-anchor {
    opacity: 1;
    transition: opacity var(--dur-motion) var(--ease-brand);
    transition-delay: calc(900ms + var(--k, 0) * 120ms);
  }
  .sa-armed.sa-drawn .sa-point { scale: 1; transition: scale var(--dur-motion) var(--ease-brand) 1500ms; }

  .sa-armed .sa-system path { stroke-dasharray: 1; stroke-dashoffset: 1; }
  .sa-armed.sa-drawn .sa-system path {
    stroke-dashoffset: 0;
    transition: stroke-dashoffset var(--dur-draw) var(--ease-brand);
    transition-delay: calc(var(--q, 0) * 420ms + var(--i, 0) * 18ms);
  }

  .sa-armed .sa-part { transform: none; }
  .sa-armed .sa-core { scale: 0; transform-box: fill-box; transform-origin: center; }
  .sa-armed.sa-drawn .sa-part {
    transform: translate(-30px, -30px);
    transition: transform var(--dur-draw) var(--ease-brand);
    transition-delay: calc(300ms + var(--q, 0) * 140ms);
  }
  .sa-armed.sa-drawn .sa-core { scale: 1; transition: scale var(--dur-motion) var(--ease-brand) 1100ms; }
}

/* Profile — the ground walked: a contour map and its trail (section-art.py).
   In the two-column layout it rides with the sticky name; the trail follows
   the reader through the career list. */
.op-map {
  margin-top: var(--sp-5);
  width: min(100%, max(200px, calc(100svh - var(--header-height) - 380px)));
  aspect-ratio: 1;
}
.tm-svg { display: block; width: 100%; height: 100%; }
.tm-line { stroke: var(--ink); stroke-opacity: 0.16; stroke-width: 0.9; }
.tm-index { stroke-opacity: 0.34; stroke-width: 1.1; }
.tm-frame { stroke: var(--ink); stroke-opacity: 0.28; stroke-width: 1; }
.tm-trail { stroke: var(--ink); stroke-width: 2; stroke-linecap: round; stroke-dasharray: 1; stroke-dashoffset: 0; }
.tm-ahead { stroke: var(--ink); stroke-opacity: 0.55; stroke-width: 1.2; stroke-dasharray: 3 5; }
.tm-summit { stroke: var(--ink); stroke-width: 1.3; }
.tm-stop { fill: var(--bg); stroke: var(--ink); stroke-width: 1.4; }
.tm-now { fill: var(--accent); stroke: none; }

@media (max-width: 860px) {
  /* A 4:3 fragment of the map, all five stops inside it; no frame. */
  .op-map { width: 100%; aspect-ratio: 4 / 3; margin-top: var(--sp-4); }
  .tm-frame { display: none; }
}

@media (prefers-reduced-motion: no-preference) {
  .tm-armed .tm-trail { stroke-dashoffset: 1; }
  .tm-armed .tm-stop { opacity: 0; scale: 0.4; transform-box: fill-box; transform-origin: center; }
  .tm-armed .tm-ahead,
  .tm-armed .tm-summit { opacity: 0; }
  .tm-armed .tm-stop,
  .tm-armed .tm-ahead,
  .tm-armed .tm-summit { transition: opacity var(--dur-motion) var(--ease-brand), scale var(--dur-motion) var(--ease-brand); }
  .tm-armed .tm-stop.is-reached { opacity: 1; scale: 1; }
  .tm-armed.is-arrived .tm-ahead,
  .tm-armed.is-arrived .tm-summit { opacity: 1; }
  /* Single column: the map is passed before the career list, so it walks
     once on arrival instead of following the reading position. */
  .tm-armed.tm-walk .tm-trail { stroke-dashoffset: 0; transition: stroke-dashoffset var(--art-walk) var(--ease-brand); }
  .tm-armed.tm-walk .tm-stop { opacity: 1; scale: 1; transition-delay: calc(var(--at, 0) * var(--art-walk)); }
  .tm-armed.tm-walk .tm-ahead,
  .tm-armed.tm-walk .tm-summit { opacity: 1; transition-delay: var(--art-walk); }
}