/* Shared reliability and accessibility layer for the static portfolio. */
html { scroll-padding-top: 84px; }

:focus-visible {
  outline: 2px solid #D2B45A;
  outline-offset: 4px;
}

a, button, input { -webkit-tap-highlight-color: rgba(210, 180, 90, .22); }

.field { opacity: .16 !important; }
.blob { animation: none !important; }

nav a, nav button, .back, .footer-links a {
  min-height: 44px;
  display: inline-flex;
  align-items: center;
}

@media (max-width: 700px) {
  .wrap { padding-left: 20px !important; padding-right: 20px !important; }
  .idx, .label, .meta, .kicker { font-size: 11px !important; }
}

@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after {
    animation-duration: .01ms !important;
    animation-iteration-count: 1 !important;
    scroll-behavior: auto !important;
    transition-duration: .01ms !important;
  }
}

/* Premium interaction and material layer. It deliberately stays quiet so the work remains primary. */
:root {
  color-scheme: dark;
  font-synthesis: none;
}

body {
  text-rendering: optimizeLegibility;
  font-optical-sizing: auto;
}

nav {
  background: color-mix(in srgb, #18171C 78%, transparent) !important;
  backdrop-filter: blur(22px) saturate(140%);
  -webkit-backdrop-filter: blur(22px) saturate(140%);
  border-bottom-color: color-mix(in srgb, #ECE9E6 10%, transparent) !important;
  box-shadow: 0 10px 30px rgba(0, 0, 0, .12);
}

nav::after {
  content: "";
  position: absolute;
  inset: auto 0 -18px;
  height: 18px;
  pointer-events: none;
  background: linear-gradient(to bottom, rgba(24, 23, 28, .20), transparent);
}

a, button, input, .backend-step, .tool-link, .case, .system, .paper-fact, .paper-card {
  transition: transform 180ms cubic-bezier(.2, .8, .2, 1), color 180ms ease, background-color 180ms ease, border-color 180ms ease, box-shadow 220ms cubic-bezier(.2, .8, .2, 1);
}

a:active, button:active { transform: scale(.975); }

.link, .back, .footer-links a, .paper-links a, .dlbtn {
  position: relative;
  letter-spacing: .01em;
}

.link:hover, .back:hover, .footer-links a:hover, .paper-links a:hover, .dlbtn:hover {
  transform: translateY(-1px);
}

.link::after, .back::after, .footer-links a::after {
  content: "";
  position: absolute;
  left: 0;
  right: 0;
  bottom: 3px;
  height: 1px;
  background: currentColor;
  transform: scaleX(0);
  transform-origin: left;
  transition: transform 220ms cubic-bezier(.2, .8, .2, 1);
}

.link:hover::after, .back:hover::after, .footer-links a:hover::after { transform: scaleX(1); }

.evidence-panel, .workflow, .hero-evidence, .stage, .paper-figure, .media-slot {
  box-shadow: 0 18px 45px rgba(0, 0, 0, .14);
}

.case:hover, .tool-link:hover, .paper-fact:hover, .system:hover {
  transform: translateY(-2px);
  border-color: color-mix(in srgb, #ECE9E6 22%, #2E2D36);
}

/* Continuous decorative loops compete with technical evidence; interaction and entry motion remain. */
.backend-step, .backend-step::before, .backend-art * { animation: none !important; }

@media (prefers-reduced-transparency: reduce) {
  nav { background: #18171C !important; backdrop-filter: none; -webkit-backdrop-filter: none; }
}

@media (prefers-contrast: more) {
  nav { background: #18171C !important; border-bottom-color: #ECE9E6 !important; }
  a:focus-visible, button:focus-visible, input:focus-visible { outline-width: 3px; }
}

@media (prefers-reduced-motion: no-preference) {
  .hero h1, .hero .lede, .hero .statement { animation: premium-rise 700ms cubic-bezier(.22, 1, .36, 1) both; }
  .hero .lede { animation-delay: 70ms; }
  .hero .statement { animation-delay: 40ms; }
}

@keyframes premium-rise {
  from { opacity: 0; transform: translateY(12px); }
  to { opacity: 1; transform: translateY(0); }
}

/* V13 restore: use the established V12 legacy dark palette. */
:root {
  --ink: #18171C !important;
  --dark: #201F26 !important;
  --mid: #2E2D36 !important;
  --bone: #ECE9E6 !important;
  --taupe: #96949C !important;
  --wine: #BE4669 !important;
  --wine-h: #D25A7D !important;
  --green: #5AB482 !important;
  --yellow: #D2B45A !important;
  --sans: ui-sans-serif, system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif !important;
  --body: ui-sans-serif, system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif !important;
  --mono: ui-monospace, "SFMono-Regular", Consolas, monospace !important;
  --ease: cubic-bezier(.23, 1, .32, 1) !important;
}

html, body { overflow-x: clip; background: var(--ink) !important; }
body {
  background-image: none !important;
}

body::before, body::after {
  display: none !important;
}

nav {
  background: rgba(24, 23, 28, .96) !important;
  border-bottom: 1px solid rgba(46, 45, 54, .85) !important;
  box-shadow: none !important;
}
nav .wrap { max-width: 1320px; }
.brand { letter-spacing: .12em !important; text-transform: uppercase; }
.navlinks a { letter-spacing: .08em !important; }

.hero { min-height: min(820px, 92svh); display: grid; align-items: center; }
.hero h1 { max-width: 10ch; font-size: clamp(4.25rem, 10vw, 9.5rem) !important; line-height: .91 !important; letter-spacing: -.075em !important; text-wrap: balance; }
.hero .statement { max-width: 28ch; font-size: clamp(1.4rem, 2.4vw, 2.15rem) !important; line-height: 1.15 !important; }
.hero .lede { max-width: 54ch; font-size: 1rem !important; line-height: 1.7 !important; }
.hero-grid { gap: clamp(2.5rem, 7vw, 8rem) !important; }
.hero-evidence { position: relative; overflow: hidden; border-radius: 24px 4px 24px 4px !important; background: var(--dark) !important; }
.hero-evidence::after { display: none !important; }
.hero-stats { margin-top: 5.5rem !important; }
.stat { transition: transform 180ms cubic-bezier(.23, 1, .32, 1), color 180ms ease; }

.track, .feat, .paper-record, .section, .blk { border-color: var(--mid) !important; }
.track { padding-top: clamp(7rem, 12vw, 12rem) !important; padding-bottom: clamp(7rem, 12vw, 12rem) !important; }
.track:nth-of-type(even) { background: var(--dark); }
.track h2, .feat h2, .paper-record h2, .section h2 { letter-spacing: -.055em !important; text-wrap: balance; }
.idx, .kicker, .label { letter-spacing: .14em !important; }

.evidence-panel, .workflow, .daylight-graphic, .stage, .paper-figure, .media-slot {
  position: relative;
  border-radius: 18px 3px 18px 3px !important;
  overflow: hidden;
  background-color: var(--dark) !important;
  --intro-y: 0px;
  transform: perspective(1000px) translate3d(0, var(--intro-y), 0) rotateX(var(--tilt-x, 0deg)) rotateY(var(--tilt-y, 0deg));
  transition: transform 260ms cubic-bezier(.23, 1, .32, 1), border-color 220ms ease, box-shadow 260ms cubic-bezier(.23, 1, .32, 1) !important;
  box-shadow: 0 24px 80px rgba(0, 0, 0, .22) !important;
}
.evidence-panel::before, .workflow::before, .daylight-graphic::before { display: none !important; }

.case, .tool-link, .paper-fact, .system { border-color: var(--mid) !important; }
.case:hover, .tool-link:hover, .paper-fact:hover, .system:hover { border-color: var(--green) !important; transform: translateY(-4px) !important; }
.link { color: var(--bone); border-color: var(--wine) !important; font-family: var(--body) !important; font-size: 15px !important; }
.link:hover { color: var(--green) !important; }
.link::after { background: var(--green) !important; }

.scroll-signal { position: fixed; inset: 0 auto auto 0; z-index: 100; width: 100%; height: 3px; background: linear-gradient(90deg, var(--wine), var(--yellow), var(--green)); transform: scaleX(0); transform-origin: left; pointer-events: none; }
.pointer-halo { display: none !important; }

.motion-ready .track, .motion-ready .feat, .motion-ready .solver-backend, .motion-ready .tool-index, .motion-ready .blk, .motion-ready .paper-record, .motion-ready .section { opacity: 0; transform: translate3d(0, 28px, 0); transition: opacity 620ms cubic-bezier(.23, 1, .32, 1), transform 620ms cubic-bezier(.23, 1, .32, 1); transition-delay: calc(var(--motion-order, 0) * 45ms); }
.motion-ready .workflow, .motion-ready .daylight-graphic { opacity: 0; --intro-y: 28px; transition: opacity 620ms cubic-bezier(.23, 1, .32, 1), transform 620ms cubic-bezier(.23, 1, .32, 1); transition-delay: calc(var(--motion-order, 0) * 45ms); }
.motion-ready .is-inview:not(.workflow):not(.daylight-graphic) { opacity: 1; transform: translate3d(0, 0, 0); }
.motion-ready .workflow.is-inview, .motion-ready .daylight-graphic.is-inview { opacity: 1; }
.motion-ready .workflow.is-inview, .motion-ready .daylight-graphic.is-inview { --intro-y: 0px; }

/* The homepage diagram acts like a live study, not a decorative loop. */
.hero-evidence .atlas-layer { position:absolute; inset:0; z-index:0; pointer-events:none; opacity:.78; }
.hero-evidence .atlas-layer svg { width:100%; height:100%; display:block; }
.hero-evidence .evidence-head, .hero-evidence .filter-diagram, .hero-evidence .evidence-caption { position:relative; z-index:1; }
.atlas-layer .atlas-path { stroke-dasharray: 3 9; animation: atlas-flow 7s linear infinite; }
.atlas-layer .atlas-ping { transform-box: fill-box; transform-origin:center; animation: atlas-pulse 2.8s cubic-bezier(.23,1,.32,1) infinite; }
.atlas-layer .atlas-ping:nth-child(2) { animation-delay: .9s; }
.daylight-graphic svg .udi-rays { transform-origin: 180px 95px; animation: sun-sweep 8s cubic-bezier(.23,1,.32,1) infinite alternate; }
.daylight-graphic svg .udi-cell { animation: cell-breathe 3.4s ease-in-out infinite alternate; }
.daylight-graphic svg .udi-cell:nth-of-type(2n) { animation-delay: .7s; }

@media (hover: hover) and (pointer: fine) {
  .evidence-panel:hover::before, .workflow:hover::before, .daylight-graphic:hover::before { animation: signal-sweep 800ms cubic-bezier(.23, 1, .32, 1) both; }
  .stat:hover { transform: translateY(-5px); color: var(--green); }
}

@keyframes orbit-drift { from { transform: translate3d(0, 0, 0) scale(.94); opacity: .38; } to { transform: translate3d(-4vw, 5vh, 0) scale(1.08); opacity: .8; } }
@keyframes signal-sweep { to { transform: translateX(115%); } }
@keyframes atlas-flow { to { stroke-dashoffset: -96; } }
@keyframes atlas-pulse { 0%, 100% { opacity:.25; transform:scale(.75); } 45% { opacity:1; transform:scale(1.45); } }
@keyframes sun-sweep { from { transform:rotate(-4deg); opacity:.55; } to { transform:rotate(5deg); opacity:.96; } }
@keyframes cell-breathe { from { opacity:.45; } to { opacity:1; } }

@media (max-width: 760px) {
  .hero { min-height: auto; padding-top: 5rem; }
  .hero h1 { font-size: clamp(3.5rem, 16vw, 5.25rem) !important; }
  .track { padding-top: 5.5rem !important; padding-bottom: 5.5rem !important; }
}

@media (prefers-reduced-motion: reduce) {
  body::before, body::after { animation: none; }
  .motion-ready .track, .motion-ready .feat, .motion-ready .solver-backend, .motion-ready .tool-index, .motion-ready .blk, .motion-ready .paper-record, .motion-ready .section { transform: none; transition: opacity 140ms ease-out; }
  .motion-ready .workflow, .motion-ready .daylight-graphic { --intro-y: 0px; transition: opacity 140ms ease-out; }
  .pointer-halo, .scroll-signal { display: none; }
  .atlas-layer .atlas-path, .atlas-layer .atlas-ping, .daylight-graphic svg .udi-rays, .daylight-graphic svg .udi-cell { animation:none; }
}