/* Home page: hero. Section styles are added below as each section lands. */

/* Load choreography */
@keyframes pg-type { from { clip-path: inset(0 100% 0 0); } to { clip-path: inset(0 0 0 0); } }
@keyframes pg-ride { from { transform: translateX(0); } to { transform: translateX(calc(100cqw - 12px)); } }
@keyframes pg-lit { to { border-color: var(--accent-text); color: var(--accent-text); } }
.pg-type { display: inline-block; animation: pg-type 1440ms steps(48, end) 120ms both; }
.pg-title { animation: pg-rise var(--dur-slow) var(--ease-out) 240ms both; }
.pg-hero__panel { animation: pg-rise-soft var(--dur-slow) var(--ease-out) 360ms both; }
.pg-cta { animation: pg-fade var(--dur-base) var(--ease-out) 1400ms both; }

/* Hero */
.pg-hero { position: relative; overflow: hidden; }
.pg-hero__grid { position: absolute; inset: 0; background-image: linear-gradient(var(--line) 1px, transparent 1px), linear-gradient(90deg, var(--line) 1px, transparent 1px); background-size: 56px 56px; -webkit-mask-image: radial-gradient(ellipse at 15% 0%, #000, transparent 72%); mask-image: radial-gradient(ellipse at 15% 0%, #000, transparent 72%); pointer-events: none; }
.pg-hero__glow { position: absolute; inset: -10% 30% 10% -10%; background: radial-gradient(closest-side, var(--glow), transparent); pointer-events: none; }
.pg-hero__in { position: relative; display: grid; grid-template-columns: minmax(0, 1fr); gap: var(--space-12); align-items: center; padding-block: var(--space-24); }
@media (min-width: 960px) { .pg-hero__in { grid-template-columns: minmax(0, 1.25fr) minmax(0, 1fr); } }
@media (max-width: 719px) { .pg-hero__in { padding-block: var(--space-16); } }
.pg-hero__copy { display: flex; flex-direction: column; align-items: flex-start; }
.pg-title { margin-top: var(--space-6); color: var(--ink); }
.pg-name { display: block; font: 800 clamp(56px, 9vw, 112px)/0.9 var(--font-display); letter-spacing: -0.05em; font-variation-settings: "opsz" 96; }
.pg-role { display: block; margin-top: var(--space-4); font: 700 clamp(28px, 3.6vw, 48px)/1.05 var(--font-display); letter-spacing: -0.035em; font-variation-settings: "opsz" 48; color: var(--accent-text); }
.pg-lead { max-width: var(--reading-width); margin-top: var(--space-8); color: var(--ink-muted); text-wrap: pretty; }
.pg-cta { display: flex; flex-wrap: wrap; gap: var(--space-4); margin-top: var(--space-12); }
.pg-social { display: flex; flex-wrap: wrap; gap: var(--space-2); margin-top: var(--space-6); }
.pg-panelhead { display: flex; flex-direction: column; gap: var(--space-2); }
.pg-panelhead .heading-lg { color: var(--ink); }
.pg-panelhead .body { color: var(--ink-muted); }

/* What I do: four stations on a line, a dot rides through them */
.pg-flow { position: relative; margin-top: var(--space-8); }
.pg-flow__list { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: var(--space-2); }
.pg-flow__rail { position: absolute; left: 12.5%; right: 12.5%; top: 24px; height: 2px; border-radius: 2px; background: var(--line); container-type: inline-size; }
.pg-flow__line { position: absolute; inset: 0; background: var(--accent); transform-origin: left center; animation: pg-grow 2800ms var(--ease-in-out) 480ms both; }
.pg-flow__dot { position: absolute; left: 0; top: -5px; width: 12px; height: 12px; border-radius: 50%; background: var(--accent); box-shadow: 0 0 0 4px var(--accent-soft); animation: pg-ride 2800ms var(--ease-in-out) 480ms both; }
.pg-flow li { position: relative; display: flex; flex-direction: column; align-items: center; gap: var(--space-2); text-align: center; }
.pg-flow__icon { position: relative; z-index: 1; display: grid; place-items: center; width: 48px; height: 48px; border: 1px solid var(--line-strong); border-radius: var(--radius-md); background: var(--surface-raised); color: var(--ink); animation: pg-lit var(--dur-fast) var(--ease-out) both; }
.pg-flow li:nth-child(1) .pg-flow__icon { animation-delay: 480ms; }
.pg-flow li:nth-child(2) .pg-flow__icon { animation-delay: 1516ms; }
.pg-flow li:nth-child(3) .pg-flow__icon { animation-delay: 2244ms; }
.pg-flow li:nth-child(4) .pg-flow__icon { animation-delay: 3280ms; }
.pg-flow svg { display: block; width: 24px; height: 24px; fill: none; stroke: currentColor; stroke-width: 1.5; stroke-linecap: round; stroke-linejoin: round; }
.pg-flow .label { color: var(--ink); }
.pg-flow .caption { color: var(--ink-muted); }
.pg-stats { display: grid; grid-template-columns: repeat(auto-fit, minmax(min(110px, 100%), 1fr)); gap: var(--space-6); margin-top: var(--space-8); padding-top: var(--space-6); border-top: 1px solid var(--line); }
.pg-stats .stat { font-size: 36px; }

/* About */
.pg-two { display: grid; grid-template-columns: repeat(auto-fit, minmax(min(480px, 100%), 1fr)); gap: var(--space-12); margin-top: var(--space-12); align-items: start; }
.pg-two > * { min-width: 0; }
.pg-prose { display: flex; flex-direction: column; gap: var(--space-6); }
.pg-prose .body-lg { color: var(--ink-muted); max-width: var(--reading-width); text-wrap: pretty; }
.pg-marquee { margin-top: var(--space-12); }
.pg-facts { display: flex; flex-direction: column; gap: var(--space-1); }
.pg-fact { display: flex; flex-direction: column; gap: var(--space-1); padding: var(--space-3) var(--space-4); border-radius: var(--radius-md); }
.pg-fact dt { color: var(--accent-text); }
.pg-fact dd { color: var(--ink); }
.pg-fact--raised { background: var(--surface-raised); }

/* Service and work cards */
.pg-works { display: grid; grid-template-columns: repeat(auto-fit, minmax(min(340px, 100%), 1fr)); gap: var(--space-6); margin-top: var(--space-12); align-items: stretch; }
.pg-work { display: flex; min-width: 0; }
.pg-work .hf-panel { display: flex; flex-direction: column; width: 100%; padding: var(--space-6); }
.pg-work .hf-panel__head { margin-bottom: var(--space-4); }
.pg-work .body { color: var(--ink-muted); text-wrap: pretty; }
.pg-work__media { margin-bottom: var(--space-6); }
.pg-work__links { display: flex; flex-wrap: wrap; gap: var(--space-2); margin-top: auto; padding-top: var(--space-6); }
.pg-svc__icon { display: grid; place-items: center; width: 72px; height: 72px; margin-bottom: var(--space-6); border-radius: var(--radius-lg); background: var(--surface-raised); color: var(--accent-text); }
.pg-svc__icon svg { display: block; width: 40px; height: 40px; fill: none; stroke: currentColor; stroke-width: 1.5; stroke-linecap: round; stroke-linejoin: round; }
.pg-svc__cta { display: flex; flex-wrap: wrap; gap: var(--space-4); margin-top: var(--space-12); }

/* Browser-window illustrations. Drawings are visible by default; the reveal animation starts them hidden. */
@keyframes pg-bar { from { transform: scaleY(0); } to { transform: scaleY(1); } }
@keyframes pg-halo { from { opacity: 0; } to { opacity: 0.25; } }
.pg-browser { overflow: hidden; border: 1px solid var(--line); border-radius: var(--radius-lg); background: var(--bg); }
.pg-browser__bar { display: flex; align-items: center; gap: var(--space-2); padding: var(--space-2) var(--space-3); border-bottom: 1px solid var(--line); background: var(--surface-raised); }
.pg-browser__bar i { width: 8px; height: 8px; border-radius: 50%; background: var(--line-strong); }
.pg-browser__bar em { flex: 1; min-width: 0; margin-left: var(--space-2); padding: 3px var(--space-3); overflow: hidden; border-radius: var(--radius-pill); background: var(--bg); color: var(--ink-muted); font-style: normal; text-overflow: ellipsis; white-space: nowrap; }
.pg-browser__body { aspect-ratio: 16 / 9; }
.pg-browser__body svg { display: block; width: 100%; height: 100%; }
.pg-track, .pg-trace { fill: none; stroke-width: var(--sw, 6); stroke-linecap: round; stroke-linejoin: round; }
.pg-track { stroke: var(--line-strong); opacity: 0.5; }
.pg-trace { stroke: var(--accent-text); stroke-dasharray: 1 2; stroke-dashoffset: 0; }
.pg-bar { fill: var(--line-strong); opacity: 0.55; transform-box: fill-box; transform-origin: 50% 100%; }
.pg-bar--hot { fill: var(--accent-text); opacity: 1; }
.pg-ticks line { stroke: var(--line-strong); stroke-width: 2; stroke-linecap: round; opacity: 0.6; }
.pg-ringtext { fill: var(--ink); font: 600 22px var(--font-mono); letter-spacing: -0.02em; }
.pg-enddot { fill: var(--accent-text); }
.pg-halo { fill: var(--accent-text); opacity: 0.25; }
.pg-svc .pg-draw { stroke-dasharray: 1 2; stroke-dashoffset: 0; }
html.js .pg-work.is-in .pg-trace { animation: pg-dash 2200ms var(--ease-in-out) 300ms both; }
html.js .pg-work.is-in .pg-bar { animation: pg-bar 900ms var(--ease-out) both; animation-delay: calc(var(--k, 0) * 90ms + 300ms); }
html.js .pg-work.is-in .pg-enddot { animation: pg-fade var(--dur-base) var(--ease-out) 2300ms both; }
html.js .pg-work.is-in .pg-halo { animation: pg-halo var(--dur-base) var(--ease-out) 2300ms both; }
html.js .pg-svc.is-in .pg-draw { animation: pg-dash 1400ms var(--ease-in-out) both; animation-delay: calc(var(--k, 0) * 200ms + 200ms); }

.pg-link:hover .pg-go { transform: translateX(4px); }

/* Experience */
.pg-two--flush { margin-top: 0; }
.pg-sticky { position: sticky; top: calc(var(--header-height) + var(--space-8)); }
@media (max-width: 719px) { .pg-sticky { position: static; } }

/* Contact */
.pg-contact__in { display: grid; grid-template-columns: repeat(auto-fit, minmax(min(420px, 100%), 1fr)); gap: var(--space-12); align-items: center; }
.pg-contact__copy { display: flex; flex-direction: column; align-items: flex-start; gap: var(--space-6); }
.pg-contact h2 { color: var(--ink); text-wrap: balance; }
.pg-contact .body-lg { max-width: var(--reading-width); color: var(--ink-muted); }
.pg-links { display: flex; flex-direction: column; gap: var(--space-1); }
.pg-link { display: grid; grid-template-columns: 96px minmax(0, 1fr) auto; align-items: center; gap: var(--space-4); min-height: 56px; padding: var(--space-3) var(--space-4); border-radius: var(--radius-md); text-decoration: none; transition: background-color var(--dur-fast) var(--ease-out); }
.pg-link:hover { background: var(--surface-raised); }
.pg-link .label { color: var(--accent-text); }
.pg-link .body { color: var(--ink); overflow-wrap: anywhere; }
.pg-pulse { height: 140px; margin-top: var(--space-16); overflow: hidden; }
.pg-pulse svg { display: block; width: 100%; height: 100%; }
.pg-pulse__track, .pg-pulse__draw { fill: none; stroke-width: 3; stroke-linecap: round; stroke-linejoin: round; }
.pg-pulse__track { stroke: var(--line); }
.pg-pulse__draw { stroke: var(--accent-text); stroke-dasharray: 1 2; stroke-dashoffset: 0; }
html.js .pg-pulse.is-in .pg-pulse__draw { animation: pg-dash 2800ms var(--ease-in-out) both; }

@media (prefers-reduced-motion: reduce) {
  html.js .pg-pulse.is-in .pg-pulse__draw { animation: none; }
  html.js .pg-work.is-in .pg-trace, html.js .pg-work.is-in .pg-bar, html.js .pg-work.is-in .pg-enddot, html.js .pg-work.is-in .pg-halo, html.js .pg-svc.is-in .pg-draw { animation: none; }
  .pg-type, .pg-title, .pg-hero__panel, .pg-cta { animation: none; }
  .pg-flow__line { animation: none; }
  .pg-flow__dot { animation: none; transform: translateX(calc(100cqw - 12px)); }
  .pg-flow__icon { animation: none; border-color: var(--accent-text); color: var(--accent-text); }
}