/* Public home motion (founder 2026-10-16, "I like it" on the motion prototype), loaded after hub-public.css.
   Every rule outside the prefers-reduced-motion: no-preference block is the finished static state, so the page reads
   the same with reduced motion, without scroll-timeline support and without the script. The h1 is never hidden: it is
   the LCP element. Card markup is untouched (card identity binds its bytes), so glyph effects select by position. */

/* Hero with the instrument: title column (role, h1, positioning) beside a study result the reader can inspect */
.hero-instrument .hero-title {display: grid; gap: 0; align-content: start;}
.hero-instrument .position {margin-top: 2rem;}
.h1-mark {background: linear-gradient(var(--viz-accent), var(--viz-accent)) left 92% / 100% .08em no-repeat; padding-bottom: .04em;}
@media (min-width: 900px) {
  section.hub-hero.hero-instrument {grid-template-columns: minmax(0, 1.1fr) minmax(0, 1fr); align-items: center;}
}

.instrument {margin: 0; background: var(--viz-panel); border: 1px solid var(--viz-rule); border-radius: 8px; padding: 1.1rem 1.2rem 1rem; display: grid; gap: .6rem; min-width: 0; container-type: inline-size;}
@media (max-width: 899px) {.instrument {max-width: 34rem;}}
.inst-head p {margin: 0;}
.inst-kicker {font-family: var(--viz-font-figures); font-size: .75rem; letter-spacing: .04em; text-transform: uppercase; color: var(--viz-accent);}
.inst-title {font-family: var(--viz-font-heading); font-size: 1.3rem; font-weight: 500; line-height: 1.2; margin-top: .3rem !important;}
.inst-sub {font-size: var(--viz-type-small); color: var(--viz-muted);}
.inst-chart {display: block; width: 100%; height: auto; overflow: visible;}
.inst-grid line {stroke: var(--viz-grid); stroke-width: 1;}
.inst-axis text {font-family: var(--viz-font-body); font-size: 11.5px; fill: var(--viz-muted); font-variant-numeric: tabular-nums;}
/* The chart scales with its box: keep rendered axis text at or above the kit's 12px floor */
@container (max-width: 419px) {.inst-axis text {font-size: 15px;} .inst-chart {padding-inline-start: .5rem;}}
@container (max-width: 339px) {.inst-axis text {font-size: 17px;}}
@container (max-width: 299px) {.inst-axis text {font-size: 19.5px;}}
.inst-xname {margin: -.3rem 0 0; text-align: center; font-size: var(--viz-type-label); color: var(--viz-muted);}
.inst-area {fill: var(--viz-accent); opacity: .08;}
.inst-line {fill: none; stroke: var(--viz-foreground); stroke-width: 2; stroke-linejoin: round; stroke-linecap: round;}
.pt {cursor: pointer; outline: none;}
.pt-hit {fill: transparent;}
.pt-dot {fill: var(--viz-panel); stroke: var(--viz-foreground); stroke-width: 2; transition: r .2s ease, fill .2s ease;}
.pt-base .pt-dot {fill: var(--viz-accent); stroke: var(--viz-accent);}
.pt-ring {fill: none; stroke: var(--viz-accent); stroke-width: 1.5; opacity: .5;}
.pt-guide {stroke: var(--viz-accent); stroke-width: 1; stroke-dasharray: 3 3; opacity: 0; transition: opacity .2s ease;}
.pt:hover .pt-dot, .pt:focus-visible .pt-dot {r: 7px; fill: var(--viz-accent); stroke: var(--viz-accent);}
.pt:hover .pt-guide, .pt:focus-visible .pt-guide {opacity: 1;}
.pt:focus-visible .pt-dot {stroke: var(--viz-focus); stroke-width: 3;}

/* Readout: the base case by default, the hovered or focused point otherwise (CSS only; up to eight points) */
.readout {display: grid; min-height: 2.6rem; border-top: 1px solid var(--viz-rule); padding-top: .55rem;}
.readout p {grid-area: 1 / 1; margin: 0; opacity: 0; transform: translateY(4px); transition: opacity .18s ease, transform .18s ease; font-size: var(--viz-type-small); color: var(--viz-muted);}
.readout strong {font-family: var(--viz-font-body); font-variant-numeric: tabular-nums lining-nums; font-size: 1.6rem; font-weight: 600; color: var(--viz-foreground); letter-spacing: -.02em; margin-right: .15rem;}
.readout span {display: inline-block;}
.readout .readout-base {opacity: 1; transform: none;}
.instrument:has(.pt:hover, .pt:focus-visible) .readout-base {opacity: 0; transform: translateY(4px);}
.instrument:has(#pt1:hover, #pt1:focus-visible) [data-pt="1"],
.instrument:has(#pt2:hover, #pt2:focus-visible) [data-pt="2"],
.instrument:has(#pt3:hover, #pt3:focus-visible) [data-pt="3"],
.instrument:has(#pt4:hover, #pt4:focus-visible) [data-pt="4"],
.instrument:has(#pt5:hover, #pt5:focus-visible) [data-pt="5"],
.instrument:has(#pt6:hover, #pt6:focus-visible) [data-pt="6"],
.instrument:has(#pt7:hover, #pt7:focus-visible) [data-pt="7"],
.instrument:has(#pt8:hover, #pt8:focus-visible) [data-pt="8"] {opacity: 1; transform: none;}
.instrument figcaption {font-size: var(--viz-type-label); color: var(--viz-muted); line-height: 1.4;}

/* Study rows: a fuller plate that reacts, a title rule and a link with intent */
.published .thumb-glyph {flex: 1; display: grid; place-items: center;}
.published .thumb-glyph svg {max-height: 11rem; width: 78%;}
.published .thumb, .published .exhibit-plate {transition: transform .25s ease, box-shadow .25s ease, border-color .25s ease;}
.published :is(.study, .feature):is(:hover, :focus-within) :is(.thumb, .exhibit-plate) {transform: translateY(-4px); box-shadow: 0 14px 30px -18px color-mix(in srgb, var(--viz-foreground) 45%, transparent); border-color: var(--viz-rule-strong);}
.published .study-link::after {content: "\2192"; display: inline-block; margin-left: .4em; transition: transform .2s ease;}
.published :is(.study, .feature):hover .study-link::after, .published .study-link:focus-visible::after {transform: translateX(5px);}
.published :is(.study, .feature) h3 {background: linear-gradient(var(--viz-accent), var(--viz-accent)) left 100% / 0 2px no-repeat; transition: background-size .35s ease; width: fit-content;}
.published :is(.study, .feature):hover h3 {background-size: 100% 2px;}

@media (prefers-reduced-motion: no-preference) {
  /* Load: below-the-title elements rise in; the h1 paints at once, only its underline draws */
  @keyframes jh-rise {from {opacity: 0; transform: translateY(14px);}}
  @keyframes jh-underline {from {background-size: 0 .08em;}}
  @keyframes jh-draw {from {stroke-dashoffset: 1;}}
  @keyframes jh-draw-glyph {from {stroke-dashoffset: 60;}}
  @keyframes jh-fade {from {opacity: 0;}}
  @keyframes jh-pop {from {opacity: 0; transform: scale(.2);}}
  @keyframes jh-ring {0% {opacity: .7; r: 6px;} 100% {opacity: 0; r: 22px;}}

  .h1-mark {animation: jh-underline .9s cubic-bezier(.2, .7, .2, 1) .35s both;}
  .hero-instrument .hero-role {animation: jh-rise .6s ease-out both;}
  .hero-instrument .position {animation: jh-rise .7s ease-out .25s both;}
  .instrument {animation: jh-rise .7s ease-out .15s both;}
  .inst-line {stroke-dasharray: 1; animation: jh-draw 1.3s cubic-bezier(.4, 0, .2, 1) .55s both;}
  .inst-area {animation: jh-fade .8s ease-out 1.5s both;}
  .pt .pt-dot {transform-box: fill-box; transform-origin: center; animation: jh-pop .4s cubic-bezier(.3, 1.6, .5, 1) calc(.65s + var(--i) * .26s) both;}
  .pt-base .pt-ring {animation: jh-fade .3s ease-out .95s both, jh-ring 1.6s ease-out 1.6s 3;}
  .readout-base {animation: jh-rise .5s ease-out 1.1s both;}

  /* Studies: rows rise and the tree glyph draws itself as it scrolls into view (CSS scroll timelines) */
  @supports (animation-timeline: view()) {
    .group-head, .published > article, .contact {animation: jh-rise linear both; animation-timeline: view(); animation-range: entry 5% entry 45%;}
    .published .glyph-tree line {stroke-dasharray: 60; animation: jh-draw-glyph linear both; animation-timeline: view(); animation-range: entry 25% cover 45%;}
    .published .glyph-tree circle {transform-box: fill-box; transform-origin: center; animation: jh-pop linear both; animation-timeline: view(); animation-range: entry calc(20% + var(--i, 0) * 5%) cover calc(30% + var(--i, 0) * 4%);}
    .published .glyph-tree circle:nth-of-type(2), .published .glyph-tree circle:nth-of-type(3) {--i: 1;}
    .published .glyph-tree circle:nth-of-type(n+4) {--i: 2;}
  }
}

@media print {
  .instrument {break-inside: avoid; border-color: #000;}
  .inst-kicker, .readout {display: none;}
  .published .study-link::after {content: none;}
}