/* ============================================================
   PRECISION NOIR · Development entry hub — "Guided next-step path"
   Drop-in section. Depends on the shared design tokens in
   theme.css (--color-*, --accent*, --space-*, --radius-*,
   --text-*, --font-*, --weight-*, --tracking-*, --duration-*,
   --ease-*, --success) and the .chip / .kicker helpers from
   components.css. Set data-section="development" on an ancestor
   so --accent resolves to the dev-blue.
   Dark + light, reduced-motion-safe, BEM, logical properties.
   ============================================================ */

/* ============================================================
   C · GUIDED PATH
   ============================================================ */
.hub-path { position: relative; }
.hub-path__steps { display: grid; gap: var(--space-6); }
.hub-path__step { position: relative; padding-inline-start: 54px; }
.hub-path__node { position: absolute; inset-inline-start: 0; inset-block-start: 0; inline-size: 36px; block-size: 36px; display: grid; place-items: center; border-radius: 50%; border: 1px solid var(--color-border); background: var(--color-surface); font-family: var(--font-mono); font-size: var(--text-sm); color: var(--color-text-secondary); z-index: 1; }
.hub-path__line { position: absolute; inset-inline-start: 18px; inset-block: 18px; inline-size: 2px; background: var(--color-border); transform-origin: top; }
.hub-path__step > p { font-family: var(--font-heading); font-size: var(--text-lg); color: var(--color-text); margin-block: 4px 0; }
.hub-path__ramps { display: grid; grid-template-columns: repeat(5, 1fr); gap: var(--space-3); margin-block-start: var(--space-4); }
.hub-path__ramp { display: grid; gap: var(--space-3); padding: var(--space-3); border: 1px solid var(--color-border); border-radius: var(--radius-md); text-decoration: none; color: var(--color-text); background: var(--color-surface);
  transition: transform var(--duration-normal) var(--ease-out), border-color var(--duration-normal) var(--ease-out), background var(--duration-normal) var(--ease-out), box-shadow var(--duration-normal) var(--ease-out); }
.hub-path__ramp:hover, .hub-path__ramp:focus-visible { border-color: var(--accent); background: color-mix(in oklab, var(--accent) 7%, var(--color-surface)); transform: translateY(-3px); box-shadow: 0 10px 24px color-mix(in oklab, var(--accent) 16%, transparent); outline: none; }
.hub-path__rbody { display: grid; gap: 1px; }
.hub-path__rname { font-size: var(--text-sm); font-weight: var(--weight-medium); color: var(--color-text); }
.hub-path__ramp small { font-size: 11px; color: var(--color-text-tertiary); }

/* landscape "preview" — a faux app window that reacts like a live demo */
.hub-path__thumb { position: relative; aspect-ratio: 16 / 9; border-radius: var(--radius-sm); border: 1px solid var(--color-border-subtle); overflow: hidden;
  background: linear-gradient(160deg, var(--color-surface-raised), var(--color-bg)); }
/* the whole preview is ONE inline SVG (browser chrome + realistic page content) */
.hub-path__svg { position: absolute; inset: 0; inline-size: 100%; block-size: 100%; display: block; }
/* --- browser chrome (drawn in SVG) — Windows-style: tab left, controls right --- */
.hub-path__svg .pv-chrome { fill: color-mix(in oklab, var(--color-bg) 55%, var(--color-surface-raised)); }
.hub-path__svg .pv-tab { fill: var(--color-surface); stroke: var(--color-border-subtle); stroke-width: .8; }
/* --- live dev-world favicon (L-in-O brand mark, comet ring) in the tab --- */
.hub-path__svg .pv-fav-tile { fill: #0D0D1A; }
.hub-path__svg .pv-fav-ring { fill: none; stroke: var(--accent); stroke-width: 3.2; opacity: .22; }
.hub-path__svg .pv-fav-spin { fill: none; stroke: var(--accent); stroke-width: 3.2; stroke-linecap: round; stroke-dasharray: 20 40; transform-box: fill-box; transform-origin: center; animation: pv-fav-rot 1.6s linear infinite; animation-play-state: paused; }
.hub-path__svg .pv-fav-l { fill: #E2E8F0; }
@keyframes pv-fav-rot { to { transform: rotate(360deg); } }
.hub-path__svg .pv-tabtitle { fill: var(--color-text-secondary); font-family: var(--font-mono); font-size: 5px; letter-spacing: .01em; }
.hub-path__svg .pv-ctrl { stroke: var(--color-text-tertiary); stroke-width: 1; fill: none; stroke-linecap: round; }
.hub-path__svg .pv-sep { stroke: var(--color-border-subtle); stroke-width: 1; }
/* --- content parts (themeable) --- */
.hub-path__svg .pv-mut { fill: var(--color-text-tertiary); opacity: .5; }
.hub-path__svg .pv-strong { fill: var(--color-text-secondary); }
.hub-path__svg .pv-h { fill: var(--color-text-secondary); }
.hub-path__svg .pv-acc { fill: var(--accent-light); }
.hub-path__svg .pv-card { fill: color-mix(in oklab, var(--color-text-tertiary) 6%, transparent); stroke: var(--color-border); stroke-width: 1; }
.hub-path__svg .pv-thumb { fill: color-mix(in oklab, var(--accent) 16%, var(--color-surface-raised)); }
.hub-path__svg .pv-live { fill: var(--color-success, #22C55E); }
.hub-path__svg .pv-chip, .hub-path__svg .pv-chip2 { fill: none; stroke: var(--color-border); stroke-width: 1; }
.hub-path__svg .pv-pill { fill: none; stroke: var(--color-border); stroke-width: 1; }
.hub-path__svg .pv-pill--on { fill: var(--accent-faint); stroke: var(--accent); }
.hub-path__svg .pv-sel { fill: var(--accent-faint); stroke: color-mix(in oklab, var(--accent) 50%, transparent); stroke-width: 1.2; }
.hub-path__svg .pv-ghost { fill: color-mix(in oklab, var(--color-text-tertiary) 16%, transparent); }
.hub-path__svg .pv-ico { fill: color-mix(in oklab, var(--accent) 18%, var(--color-surface-raised)); stroke: var(--color-border); stroke-width: .8; }
.hub-path__svg .pv-val { fill: var(--accent-light); opacity: .85; }
.hub-path__svg .pv-dot-php { fill: #8892BF; }
.hub-path__svg .pv-dot-rust { fill: #DEA584; }
.hub-path__svg .pv-star { fill: var(--accent-light); }
.hub-path__svg .pv-txt-name { fill: var(--accent-light); font-family: var(--font-heading); font-weight: 700; font-size: 7px; }
.hub-path__svg .pv-txt { fill: var(--color-text-tertiary); font-family: var(--font-body); font-size: 4.4px; }
.hub-path__svg .pv-txt2 { fill: var(--color-text-secondary); font-family: var(--font-mono); font-size: 4.6px; }
.hub-path__svg .pv-txt-ver { fill: var(--color-text-tertiary); }
.hub-path__svg .pv-badge { fill: none; stroke: var(--color-border); stroke-width: .8; }
.hub-path__svg .pv-txt-badge { fill: var(--color-text-tertiary); font-family: var(--font-mono); font-size: 4px; }

/* --- content animations: paused at rest, loop only while hovered (slow, subtle) --- */
.hub-path__svg .pv-live, .hub-path__svg .pv-scard, .hub-path__svg .pv-chip, .hub-path__svg .pv-star, .hub-path__svg .pv-val, .hub-path__svg .pv-fav-spin { animation-play-state: paused; }
.hub-path__ramp:hover .hub-path__svg .pv-live,
.hub-path__ramp:hover .hub-path__svg .pv-scard,
.hub-path__ramp:hover .hub-path__svg .pv-chip,
.hub-path__ramp:hover .hub-path__svg .pv-star,
.hub-path__ramp:hover .hub-path__svg .pv-val,
.hub-path__ramp:hover .hub-path__svg .pv-fav-spin { animation-play-state: running; }
/* case studies — the "Live" badges breathe */
.hub-path__svg .pv-live { transform-box: fill-box; transform-origin: center; animation: pv-pulse 2.8s ease-in-out infinite; }
@keyframes pv-pulse { 0%,100% { opacity: 1; transform: scale(1); } 50% { opacity: .4; transform: scale(.66); } }
/* services — each offer card lights in relay, one at a time */
.hub-path__svg .pv-scard { animation: pv-scard 6s ease-in-out infinite; }
.hub-path__svg .s2 { animation-delay: 1.5s; }
.hub-path__svg .s3 { animation-delay: 3s; }
.hub-path__svg .s4 { animation-delay: 4.5s; }
@keyframes pv-scard {
  0%, 21% { fill: color-mix(in oklab, var(--accent) 14%, transparent); stroke: var(--accent); }
  28%, 100% { fill: color-mix(in oklab, var(--color-text-tertiary) 6%, transparent); stroke: var(--color-border); }
}
/* tech stack — chips populate in sequence */
.hub-path__svg .pv-chip { animation: pv-fade 5s ease-in-out infinite; }
.hub-path__svg .ch2 { animation-delay: .5s; } .hub-path__svg .ch3 { animation-delay: 1s; } .hub-path__svg .ch4 { animation-delay: 1.5s; }
@keyframes pv-fade { 0%,72%,100% { opacity: 1; } 14% { opacity: .25; } }
/* open source — the star twinkles */
.hub-path__svg .pv-star { transform-box: fill-box; transform-origin: center; animation: pv-pulse 3.6s ease-in-out infinite; }
/* uses — values "type" in */
.hub-path__svg .pv-val { transform-box: fill-box; transform-origin: left; animation: pv-type 4.4s ease-in-out infinite; }
@keyframes pv-type { 0% { transform: scaleX(.04); } 40%,100% { transform: scaleX(1); } }

.hub-path__skip { position: relative; display: inline-flex; align-items: center; gap: 8px; margin-block-start: var(--space-3); font-family: var(--font-mono); font-size: var(--text-sm); color: var(--accent-light); text-decoration: none; transition: color var(--duration-fast) var(--ease-out); }
.hub-path__skip-label { position: relative; }
.hub-path__skip-label::after { content: ''; position: absolute; inset-inline: 0; inset-block-end: -2px; block-size: 1px; background: currentColor; transform: scaleX(0); transform-origin: left; transition: transform .32s var(--ease-out); }
.hub-path__skip:hover { color: #fff; }
[data-theme="light"] .hub-path__skip:hover { color: var(--color-text-tertiary); }
.hub-path__skip:hover .hub-path__skip-label::after { transform: scaleX(1); }
.hub-path__skip:hover .hub__arrow { transform: translateX(4px); }

/* end step — node + CTA vertically centred together, line meets node centre */
.hub-path__step--end { padding-inline-start: 0; display: flex; align-items: center; gap: 18px; }
.hub-path__node--end { position: static; flex: none; border-color: var(--accent); background: var(--accent); color: #fff; }

/* staggered scroll-in reveal (JS adds data-anim + is-in; degrades to visible) */
.hub-path[data-anim] .hub-path__step { opacity: 0; transform: translateY(16px); }
.hub-path[data-anim].is-in .hub-path__step { opacity: 1; transform: none; transition: opacity .5s var(--ease-out), transform .5s var(--ease-out); }
.hub-path[data-anim].is-in .hub-path__steps > .hub-path__step:nth-child(2) { transition-delay: .12s; }
.hub-path[data-anim].is-in .hub-path__steps > .hub-path__step:nth-child(3) { transition-delay: .24s; }
.hub-path[data-anim] .hub-path__ramp { opacity: 0; }
.hub-path[data-anim].is-in .hub-path__ramp { opacity: 1; animation: hub-ramp-in .5s var(--ease-out) backwards; }
.hub-path[data-anim].is-in .hub-path__ramp:nth-child(1) { animation-delay: .28s; }
.hub-path[data-anim].is-in .hub-path__ramp:nth-child(2) { animation-delay: .36s; }
.hub-path[data-anim].is-in .hub-path__ramp:nth-child(3) { animation-delay: .44s; }
.hub-path[data-anim].is-in .hub-path__ramp:nth-child(4) { animation-delay: .52s; }
.hub-path[data-anim].is-in .hub-path__ramp:nth-child(5) { animation-delay: .60s; }
@keyframes hub-ramp-in { from { opacity: 0; transform: translateY(12px); } to { opacity: 1; transform: none; } }

@media (max-width: 640px) {
  .hub-path__ramps { grid-template-columns: repeat(2, 1fr); }
}
.hub-path__cta { position: relative; overflow: hidden; isolation: isolate; display: inline-flex; align-items: center; gap: var(--space-3); padding: var(--space-4) var(--space-5); border-radius: var(--radius-lg); text-decoration: none; color: #fff;
  background: linear-gradient(135deg, var(--accent), color-mix(in oklab, var(--accent) 60%, #000)); border: 1px solid color-mix(in oklab, var(--accent) 60%, transparent); transition: transform var(--duration-normal) var(--ease-out), box-shadow var(--duration-normal) var(--ease-out); }
.hub-path__cta, .hub-path__cta:hover { color: #fff; }
.hub-path__cta b, .hub-path__cta > .hub__arrow, .hub-path__cta > span:not(.hub-path__cta-glow):not(.hub-path__cta-grid):not(.hub-path__cta-sweep) { position: relative; z-index: 2; }
.hub-path__cta b { font-family: var(--font-heading); font-size: var(--text-lg); color: #fff; }
.hub-path__cta > span:not(.hub__arrow):not(.hub-path__cta-glow):not(.hub-path__cta-grid):not(.hub-path__cta-sweep) { color: color-mix(in oklab, #fff 80%, transparent); font-size: var(--text-sm); }
.hub-path__cta-grid { position: absolute; inset: 0; z-index: 0; opacity: 0; background-image: linear-gradient(color-mix(in oklab, #fff 20%, transparent) 1px, transparent 1px), linear-gradient(90deg, color-mix(in oklab, #fff 20%, transparent) 1px, transparent 1px); background-size: 13px 13px; transition: opacity .35s var(--ease-out); }
.hub-path__cta-glow { position: absolute; inset: 0; z-index: 1; opacity: 0; background: radial-gradient(140px circle at var(--gx, 50%) var(--gy, 50%), color-mix(in oklab, #fff 42%, transparent), transparent 60%); transition: opacity .3s var(--ease-out); }
.hub-path__cta:hover { box-shadow: 0 14px 34px color-mix(in oklab, var(--accent) 45%, transparent); }
.hub-path__cta:hover .hub-path__cta-grid { opacity: 1; animation: cta-grid-pan 2.4s linear infinite; }
.hub-path__cta:hover .hub-path__cta-glow { opacity: 1; }
.hub-path__cta:hover .hub__arrow { transform: translateX(5px); }
@keyframes cta-grid-pan { to { background-position: 13px 13px, 13px 13px; } }
/* Per-world CTA hover field: photography = concentric circles, explore = topographic contours */
[data-section="photography"] .hub-path__cta-grid {
  background-image: repeating-radial-gradient(circle at 50% 50%, transparent 0 10px, color-mix(in oklab, #fff 24%, transparent) 10px 11px);
  background-size: auto;
}
[data-section="photography"] .hub-path__cta:hover .hub-path__cta-grid {
  opacity: 1; animation: cta-ripple 2.6s var(--ease-out) infinite;
}
@keyframes cta-ripple { from { transform: scale(1); opacity: .9; } to { transform: scale(1.65); opacity: 0; } }

[data-section="explore"] .hub-path__cta-grid {
  background-image:
    repeating-radial-gradient(ellipse 64% 80% at 38% 42%, transparent 0 9px, color-mix(in oklab, #fff 22%, transparent) 9px 10px),
    repeating-radial-gradient(ellipse 82% 60% at 72% 66%, transparent 0 11px, color-mix(in oklab, #fff 16%, transparent) 11px 12px);
  background-size: auto;
}
[data-section="explore"] .hub-path__cta:hover .hub-path__cta-grid {
  opacity: 1; animation: cta-topo-drift 6.5s linear infinite;
}
@keyframes cta-topo-drift { to { background-position: 16px -11px, -13px 9px; } }

.hub__arrow { display: inline-block; transition: transform var(--duration-fast) var(--ease-out); }

@media (prefers-reduced-motion: reduce) {
  .hub__arrow { transition: none; }
  .hub-path__ramp:hover .hub-path__svg * { animation-play-state: paused !important; }
  .hub-path__cta-grid, .hub-path__cta:hover .hub-path__cta-grid,
  [data-section="photography"] .hub-path__cta:hover .hub-path__cta-grid,
  [data-section="explore"] .hub-path__cta:hover .hub-path__cta-grid { animation: none; }
}