*, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; }

:root {
  --bg:    #FFF;
  --g1:    #F7F7F7;
  --g2:    #EDEDED;
  --g3:    #DEDEDE;
  --g4:    #999;
  --g5:    #696969;
  --g6:    #333;
  --fg:    #000;
  --blue:  #3D46C2;

  --font:  -apple-system, BlinkMacSystemFont, 'Segoe UI', system-ui,
           'PingFang SC', 'Hiragino Sans GB', 'Microsoft YaHei', sans-serif;
  --fs-xs: 0.78125rem;
  --fs-sm: 0.9rem;
  --fs-md: 1rem;

  --nav-h: 42px;
  --pad:   20px;
  --max:   860px;
  --r:     3px;

  /* Motion timing — Are.na-calibrated */
  --t-fast:   120ms;
  --t-base:   200ms;
  --t-slow:   320ms;
  --ease-out: cubic-bezier(0.25, 0.46, 0.45, 0.94);
  --ease-in:  cubic-bezier(0.55, 0.055, 0.675, 0.19);
}

html { scroll-behavior: smooth; }

body {
  background: var(--bg);
  color: var(--g6);
  font-family: var(--font);
  font-size: var(--fs-sm);
  line-height: 1.45;
  -webkit-font-smoothing: antialiased;
}

a { color: inherit; text-decoration: none; }

/* ────────────────────────────────────────────
   Page-load entrance — breadcrumb + intro
──────────────────────────────────────────── */
@keyframes fade-up {
  from { opacity: 0; transform: translateY(6px); }
  to   { opacity: 1; transform: none; }
}

.fade-in-1 { animation: fade-up var(--t-base) var(--ease-out) both; }
.fade-in-2 { animation: fade-up var(--t-base) var(--ease-out) 60ms  both; }
.fade-in-3 { animation: fade-up var(--t-base) var(--ease-out) 120ms both; }

/* ────────────────────────────────────────────
   Scroll reveal — sections below the fold
──────────────────────────────────────────── */
.reveal {
  opacity: 0;
  transform: translateY(8px);
  transition:
    opacity  var(--t-slow) var(--ease-out),
    transform var(--t-slow) var(--ease-out);
}
.reveal.in-view {
  opacity: 1;
  transform: none;
}
.reveal.delay-1 { transition-delay: 40ms; }
.reveal.delay-2 { transition-delay: 80ms; }

/* ────────────────────────────────────────────
   View Transitions — directional
──────────────────────────────────────────── */
@view-transition { navigation: auto; }

/* Default: pure fade */
::view-transition-old(root) {
  animation: var(--t-fast) var(--ease-in) both vt-fade-out;
}
::view-transition-new(root) {
  animation: var(--t-base) var(--ease-out) both vt-fade-in;
}

@keyframes vt-fade-out { to   { opacity: 0; } }
@keyframes vt-fade-in  { from { opacity: 0; } }

/* Forward: home → project, slide slightly left */
:root[data-dir="forward"] ::view-transition-old(root) {
  animation: var(--t-fast) var(--ease-in) both vt-out-left;
}
:root[data-dir="forward"] ::view-transition-new(root) {
  animation: var(--t-base) var(--ease-out) both vt-in-right;
}

/* Back: project → home, slide right */
:root[data-dir="back"] ::view-transition-old(root) {
  animation: var(--t-fast) var(--ease-in) both vt-out-right;
}
:root[data-dir="back"] ::view-transition-new(root) {
  animation: var(--t-base) var(--ease-out) both vt-in-left;
}

@keyframes vt-out-left  { to   { opacity: 0; transform: translateX(-12px); } }
@keyframes vt-in-right  { from { opacity: 0; transform: translateX(12px);  } }
@keyframes vt-out-right { to   { opacity: 0; transform: translateX(12px);  } }
@keyframes vt-in-left   { from { opacity: 0; transform: translateX(-12px); } }

/* Respect reduced-motion */
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after {
    animation-duration: 0.01ms !important;
    transition-duration: 0.01ms !important;
  }
  .reveal { opacity: 1; transform: none; }
}