/* ──────────────────────────────────────────────────────────
   tysondonnelly.com — site stylesheet
   Targets the inline-styled React output. Overrides via
   data-* attributes added in direction-a.jsx.
   ────────────────────────────────────────────────────────── */

*, *::before, *::after { box-sizing: border-box; }
html, body { margin: 0; padding: 0; }
html { background: #0A0A0B; }
:root {
  --accent: #C5F02C;
  /* Site-wide nav font (Index / Work / Lab …) — wordmark keeps its display font */
  --nav-font: "Newsreader", Georgia, serif;
  --nav-tracking: 0.12em;
  --nav-case: uppercase;
}
body {
  font-family: "DM Sans", "Söhne", system-ui, sans-serif;
  color: #EDEAE3;
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
}
img { display: block; max-width: 100%; }
a  { color: inherit; }
h1, h2, h3 { margin: 0; }

/* ─── Section scroll-in motion ─── */
[data-section] {
  opacity: 0;
  transform: translateY(18px);
  transition: opacity 700ms ease, transform 700ms cubic-bezier(.2,.75,.2,1);
  will-change: opacity, transform;
}
[data-section].is-in-view {
  opacity: 1;
  transform: none;
}
@media (prefers-reduced-motion: reduce) {
  [data-section] { opacity: 1 !important; transform: none !important; transition: none !important; }
}

/* ─── Hero staggered reveal ─── */
@media (prefers-reduced-motion: no-preference) {
  [data-hero] .a-rise { opacity: 0; transform: translateY(22px); animation: aRise 800ms cubic-bezier(.2,.75,.2,1) forwards; }
  [data-hero] .a-rise-1 { animation-delay: 60ms; }
  [data-hero] .a-rise-2 { animation-delay: 180ms; }
  [data-hero] .a-rise-3 { animation-delay: 300ms; }
  [data-hero] .a-rise-4 { animation-delay: 420ms; }
}
@keyframes aRise { to { opacity: 1; transform: none; } }

/* ─── Scroll-reactive chrome (injected by page.jsx) ─── */
#a-progress {
  position: fixed; top: 0; left: 0; right: 0; height: 2px;
  background: var(--accent);
  transform-origin: 0 50%; transform: scaleX(0);
  z-index: 80; pointer-events: none;
}
#a-tc {
  position: fixed; right: 16px; bottom: 14px; z-index: 80; pointer-events: none;
  font-family: "JetBrains Mono", monospace; font-size: 10px; letter-spacing: 0.14em;
  color: rgba(237,234,227,0.55);
  background: rgba(10,10,11,0.72); border: 1px solid rgba(237,234,227,0.12);
  padding: 5px 10px; backdrop-filter: blur(6px);
}
#a-bgglow {
  position: fixed; inset: -10%; z-index: 70; pointer-events: none;
  mix-blend-mode: screen; opacity: 0.8;
  background: radial-gradient(46vw 34vh at var(--gx, 78%) var(--gy, 12%),
              color-mix(in oklab, var(--accent) 8%, transparent), transparent 72%);
}
@media (max-width: 640px) { #a-tc { display: none; } }

/* ─── Lab post: reading view (.a-prose) ─── */
.a-prose {
  max-width: 720px;
  font-family: "DM Sans", system-ui, sans-serif;
  font-size: 19px; line-height: 1.68; color: rgba(237,234,227,0.86);
  letter-spacing: -0.003em;
}
.a-prose > :first-child { margin-top: 0; }
.a-prose p { margin: 0 0 26px; text-wrap: pretty; }
.a-prose h2 {
  font-family: "Space Grotesk", system-ui, sans-serif;
  font-size: 30px; font-weight: 500; letter-spacing: -0.02em; line-height: 1.15;
  color: #EDEAE3; margin: 56px 0 20px;
}
.a-prose h3 {
  font-family: "Space Grotesk", system-ui, sans-serif;
  font-size: 21px; font-weight: 500; letter-spacing: -0.01em;
  color: #EDEAE3; margin: 40px 0 16px;
}
.a-prose strong { color: #EDEAE3; font-weight: 600; }
.a-prose em { font-style: italic; color: rgba(237,234,227,0.94); }
.a-prose a {
  color: var(--accent); text-decoration: none;
  border-bottom: 1px solid color-mix(in oklab, var(--accent) 45%, transparent);
  transition: border-color 160ms ease;
}
.a-prose a:hover { border-bottom-color: var(--accent); }
.a-prose code {
  font-family: "JetBrains Mono", monospace; font-size: 0.86em;
  background: rgba(237,234,227,0.06); border: 1px solid rgba(237,234,227,0.10);
  padding: 1px 6px; border-radius: 3px; color: #EDEAE3;
}
.a-prose ul, .a-prose ol { margin: 0 0 26px; padding-left: 24px; }
.a-prose li { margin: 0 0 12px; padding-left: 6px; }
.a-prose li::marker { color: var(--accent); }
.a-prose ol li::marker { font-family: "JetBrains Mono", monospace; font-size: 0.82em; color: rgba(237,234,227,0.5); }
.a-prose blockquote {
  margin: 0 0 26px; padding: 4px 0 4px 24px;
  border-left: 2px solid var(--accent);
  color: rgba(237,234,227,0.72); font-style: italic;
}
.a-prose hr {
  border: none; height: 1px; background: rgba(237,234,227,0.12);
  margin: 44px 0;
}
.a-prose > p:last-child em, .a-prose hr + p em { color: rgba(237,234,227,0.6); }
@media (max-width: 640px) { .a-prose { font-size: 17px; } .a-prose h2 { font-size: 25px; } }

/* Post images — markdown ![caption](images/…) renders as a figure */
.a-prose .a-fig { margin: 36px 0; }
.a-prose .a-fig img { width: 100%; display: block; border: 1px solid rgba(237,234,227,0.10); background: #0E0E10; }
.a-prose figcaption {
  font-family: "JetBrains Mono", monospace; font-size: 11px; letter-spacing: 0.08em;
  text-transform: uppercase; color: rgba(237,234,227,0.42); margin-top: 12px;
}
.a-prose .a-inlimg { max-width: 100%; }

/* ─── Lab post rows (index) ─── */
.a-postrow { transition: background-color 200ms ease; }
.a-postrow:hover { background: rgba(237,234,227,0.02); }
.a-postrow .a-arrow-glyph { opacity: 0.5; transition: opacity 180ms ease, transform 180ms ease; }
.a-postrow:hover .a-arrow-glyph { opacity: 1; transform: translateX(4px); }

/* ─── Nav link hover (anchor wrappers in ANav) ─── */
.a-navlink { transition: color 140ms ease, border-color 140ms ease; }
.a-navlink:hover { color: var(--accent) !important; border-bottom-color: var(--accent) !important; }
.a-logo:hover .a-logo-accent { transform: translateX(2px); }
.a-logo-accent { display: inline-block; transition: transform 200ms ease; }

/* ─── CTA / link arrow hover ─── */
.a-arrow { transition: transform 140ms ease, color 140ms ease; }
.a-arrow:hover { color: var(--accent) !important; }
.a-arrow:hover .a-arrow-glyph { transform: translateX(4px); }
.a-arrow-glyph { display: inline-block; transition: transform 180ms ease; }

/* ─── Still frames: hover-scrub (shuttle) + parallax ───
   --shx  set by mousemove (shuttle), --plx set by scroll (parallax) */
.a-tile-frame { position: relative; overflow: hidden; transition: border-color 160ms ease; }
.a-tile-frame img {
  transform: translate3d(var(--shx, 0px), var(--plx, 0px), 0) scale(var(--zoom, 1.12));
  transition: transform 400ms cubic-bezier(.2,.7,.2,1);
  will-change: transform;
}
a.a-tile-frame:hover, .a-featrow:hover .a-tile-frame { border-color: var(--accent) !important; }
.a-tile-frame:hover img { --zoom: 1.17; }
@media (prefers-reduced-motion: reduce) {
  .a-tile-frame img { transform: none !important; transition: none !important; }
}

.a-tile-overlay {
  position: absolute; inset: 0; z-index: 2;
  background: linear-gradient(180deg, transparent 50%, rgba(0,0,0,0.65) 100%);
  display: flex; align-items: flex-end; padding: 14px 16px;
  font-family: "JetBrains Mono", monospace;
  font-size: 10px; letter-spacing: 0.14em; text-transform: uppercase;
  color: rgba(237,234,227,0.0);
  transition: color 200ms ease;
  pointer-events: none;
}
.a-tile-frame:hover .a-tile-overlay { color: rgba(237,234,227,0.92); }
.a-tile-tc {
  position: absolute; top: 10px; right: 12px; z-index: 2;
  font-family: "JetBrains Mono", monospace;
  font-size: 10px; letter-spacing: 0.14em; text-transform: uppercase;
  color: var(--accent);
  opacity: 0;
  transition: opacity 200ms ease;
  pointer-events: none;
}
.a-tile-frame:hover .a-tile-tc { opacity: 1; }

/* ─── Hero montage crossfade + slow push-in ─── */
[data-montage-stage] img {
  position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover;
  opacity: 0; transition: opacity 900ms ease;
}
[data-montage-stage] img.is-active { opacity: 1; }
@media (prefers-reduced-motion: no-preference) {
  [data-montage-stage] img.is-active { animation: aKb 4800ms ease-out forwards; }
}
@keyframes aKb { from { transform: scale(1.02); } to { transform: scale(1.09); } }

/* ─── Timeline ─── */
.a-tl-img { animation: aFadeIn 400ms ease both; }
@keyframes aFadeIn { from { opacity: 0; } to { opacity: 1; } }
@media (prefers-reduced-motion: reduce) { .a-tl-img { animation: none; } }
.a-tl-track { user-select: none; -webkit-user-select: none; }

/* ─── Work rows / credit rows / bridge rows ─── */
.a-featrow { transition: background-color 200ms ease; }
.a-featrow:hover { background: rgba(237,234,227,0.015); }
.a-featrow-title { transition: color 200ms ease; }
.a-featrow:hover .a-featrow-title, .a-creditrow:hover .a-featrow-title { color: var(--accent) !important; }
.a-creditrow { transition: background-color 200ms ease; }
.a-creditrow:hover { background: rgba(237,234,227,0.025); }
.a-creditrow .a-arrow-glyph { opacity: 0; }
.a-creditrow:hover .a-arrow-glyph { opacity: 1; transform: translateX(4px); }

/* ─── Lab filter chips ─── */
.a-chip {
  font-family: "JetBrains Mono", monospace; font-size: 11px;
  letter-spacing: 0.12em; text-transform: uppercase;
  padding: 8px 14px; cursor: pointer;
  background: transparent; color: rgba(237,234,227,0.55);
  border: 1px solid rgba(237,234,227,0.14);
  transition: color 160ms ease, border-color 160ms ease, background-color 160ms ease;
}
.a-chip:hover { color: #EDEAE3; border-color: rgba(237,234,227,0.35); }
.a-chip.is-active { color: #0A0A0B; background: var(--accent); border-color: var(--accent); }

/* ─── Contact card hover ─── */
.a-card { transition: background-color 200ms ease; }
.a-card:hover { background: #131316 !important; }
.a-card:hover .a-arrow-glyph { transform: translateX(4px); }

/* ─── Lab row subtle hover ─── */
[data-lab-row] { transition: background-color 200ms ease; }
.a-lab-cover { transition: border-color 160ms ease, box-shadow 160ms ease; }
.a-postrow:hover .a-lab-cover { border-color: var(--accent); box-shadow: 0 0 0 1px var(--accent), 0 0 22px -2px color-mix(in oklab, var(--accent) 55%, transparent); }
[data-lab-row]:hover { background: rgba(237,234,227,0.015); }
[data-lab-row]:hover h3 { color: var(--accent) !important; }
[data-lab-row] h3 { transition: color 200ms ease; }

/* ──────────────────────────────────────────────────────────
   RESPONSIVE LAYER
   Inline styles handle the 1440 desktop design.
   These overrides kick in below 1180px.
   ────────────────────────────────────────────────────────── */

@media (max-width: 1180px) {
  [data-grid="hero"]     { grid-template-columns: 1fr !important; }
  [data-montage]         { min-height: 380px !important; }
  [data-grid="services"] { grid-template-columns: repeat(2, 1fr) !important; }
  [data-grid="footer"]   { grid-template-columns: 1.4fr 1fr 1fr !important; }
  [data-hero] h1         { font-size: clamp(72px, 11vw, 132px) !important; }
}

@media (max-width: 900px) {
  [data-section]         { padding-left: 20px !important; padding-right: 20px !important; }
  [data-grid="tl"]       { grid-template-columns: 1fr !important; gap: 24px !important; }
  [data-grid="ai"]       { grid-template-columns: 1fr !important; gap: 40px !important; }
  [data-grid="about"]    { grid-template-columns: 1fr !important; gap: 32px !important; }
  [data-grid="stats-4"]  { grid-template-columns: repeat(2, 1fr) !important; }
  [data-grid="contact"]  { grid-template-columns: 1fr !important; }
  [data-grid="footer"]   { grid-template-columns: 1fr 1fr !important; }

  [data-grid="postvis"] { grid-template-columns: 1fr !important; gap: 32px !important; }
  [data-featrow]         { grid-template-columns: 1fr !important; gap: 20px !important; padding: 28px 0 !important; }

  [data-display="mega"]    { font-size: clamp(64px, 14vw, 168px) !important; }
  [data-display="display"] { font-size: clamp(48px, 10vw, 120px) !important; }
  [data-display="h2"]      { font-size: clamp(40px, 8vw, 88px) !important; }
  [data-display="h3"]      { font-size: clamp(28px, 5vw, 52px) !important; }

  [data-credit]           { grid-template-columns: 60px 1fr !important; }
  [data-credit] > :nth-child(3),
  [data-credit] > :nth-child(4),
  [data-credit] > :nth-child(5) { display: none; }

  [data-postrow]         { grid-template-columns: 1fr !important; }
  [data-lab-row]          { grid-template-columns: 1fr !important; gap: 20px !important; }
  [data-lab-row] > div:last-child { text-align: left !important; }

  [data-nav-row]          { flex-direction: column; align-items: flex-start !important; gap: 18px; }
  [data-nav-links]        { gap: 18px !important; flex-wrap: wrap; }
}

@media (max-width: 640px) {
  [data-grid="services"]  { grid-template-columns: 1fr !important; }
  [data-grid="footer"]    { grid-template-columns: 1fr !important; }
  [data-grid="stats-4"]   { grid-template-columns: 1fr 1fr !important; }
  [data-hero-readout]     { gap: 14px 28px !important; }
  [data-rail]             { font-size: 9px !important; gap: 8px !important; }
  [data-rail] > div       { gap: 12px !important; }
  [data-timeline] .a-tl-track { height: 48px !important; }
}