/* Motion layer. Loaded after the base and Journal styles so it can refine their transitions. */
:root {
  --ease-out: cubic-bezier(0.22, 1, 0.36, 1);
  --ease-soft: cubic-bezier(0.45, 0, 0.15, 1);
  --reveal-y: 18px;
}

html { scroll-behavior: smooth; }

/* Cross-document fade between the home page and the Journal; the nav stays put. */
@view-transition { navigation: auto; }
.site-nav { view-transition-name: site-nav; }
::view-transition-old(root) { animation: 0.35s var(--ease-soft) both vt-out; }
::view-transition-new(root) { animation: 0.7s var(--ease-out) both vt-in; }
@keyframes vt-out { to   { opacity: 0; } }
@keyframes vt-in  { from { opacity: 0; } }

.site-nav { animation: fade-down 1s var(--ease-out) both; }
@keyframes fade-down {
  from { opacity: 0; transform: translateY(-12px); }
  to   { opacity: 1; transform: none; }
}

/* ── Home sections: the old page fades quickly, the new one eases in and its pieces follow in order ── */
.page {
  transform: translateY(var(--reveal-y));
  transition: opacity 0.35s var(--ease-soft), transform 0.35s var(--ease-soft);
}
.page.active {
  transition: opacity 0.9s var(--ease-out) 0.2s, transform 0.9s var(--ease-out) 0.2s;
}

.quote-wrapper > *,
.about-photo-col,
.about-text-col > *,
.page-inner > :not(.social-grid),
.social-link,
.contact-email-wrap > * {
  opacity: 0;
  transform: translateY(var(--reveal-y));
  transition: opacity 0.25s var(--ease-soft), transform 0.25s var(--ease-soft);
}
.page.active .quote-wrapper > *,
.page.active .about-photo-col,
.page.active .about-text-col > *,
.page.active .page-inner > :not(.social-grid),
.page.active .social-link,
.page.active .contact-email-wrap > * {
  opacity: 1;
  transform: none;
  transition:
    opacity 1s var(--ease-out) calc(0.3s + var(--i, 0) * 110ms),
    transform 1s var(--ease-out) calc(0.3s + var(--i, 0) * 110ms);
}
.quote-wrapper > :nth-child(1), .about-photo-col, .about-text-col > :nth-child(1), .page-inner > :nth-child(1), .social-link:nth-child(1), .contact-email-wrap > :nth-child(1) { --i: 0; }
.quote-wrapper > :nth-child(2), .about-text-col > :nth-child(2), .page-inner > :nth-child(2), .social-link:nth-child(2), .contact-email-wrap > :nth-child(2) { --i: 1; }
.quote-wrapper > :nth-child(3), .about-text-col > :nth-child(3), .page-inner > :nth-child(3), .social-link:nth-child(3), .contact-email-wrap > :nth-child(3) { --i: 2; }
.quote-wrapper > :nth-child(4), .about-text-col > :nth-child(4), .page-inner > :nth-child(4), .social-link:nth-child(4) { --i: 3; }
.quote-wrapper > :nth-child(5), .about-text-col > :nth-child(5), .page-inner > :nth-child(5) { --i: 4; }
.page-inner > :nth-child(4) ~ .social-grid { --i: 3; }
/* The about photo shares a row with the text, so it leads the sequence. */
.page-inner > .social-grid { opacity: 1; transform: none; }

/* ── Micro-interactions ── */
.nav-name, .nav-links a, .mobile-menu a, .contact-email, .search-btn, .venture-tag, .journal-back {
  transition-duration: 0.4s;
  transition-timing-function: var(--ease-out);
}
.venture-tag { transition-property: border-color, color; }
.venture-tag:hover { border-color: var(--accent); color: var(--accent); }
.social-left { transition: transform 0.5s var(--ease-out); }
.social-link:hover .social-left { transform: translateX(6px); }
.social-link:hover .social-arrow { transition-duration: 0.5s; }
.about-photo { transition: filter 0.8s var(--ease-soft); }
.about-photo:hover { filter: grayscale(0%); }

/* ── Mobile menu: fade and slide instead of snapping ── */
.mobile-menu {
  display: flex;
  opacity: 0; visibility: hidden;
  transition: opacity 0.45s var(--ease-soft), visibility 0s linear 0.45s;
}
.mobile-menu.open {
  opacity: 1; visibility: visible;
  transition: opacity 0.45s var(--ease-soft), visibility 0s;
}
.mobile-menu a {
  opacity: 0; transform: translateY(12px);
  transition: opacity 0.3s var(--ease-soft), transform 0.3s var(--ease-soft), color 0.4s var(--ease-out);
}
.mobile-menu.open a {
  opacity: 1; transform: none;
  transition: opacity 0.7s var(--ease-out) 0.15s, transform 0.7s var(--ease-out) 0.15s, color 0.4s var(--ease-out);
}
.mobile-menu.open a:nth-of-type(2) { transition-delay: 0.22s, 0.22s, 0s; }
.mobile-menu.open a:nth-of-type(3) { transition-delay: 0.29s, 0.29s, 0s; }
.mobile-menu.open a:nth-of-type(4) { transition-delay: 0.36s, 0.36s, 0s; }
.mobile-menu.open a:nth-of-type(5) { transition-delay: 0.43s, 0.43s, 0s; }

/* ── Journal: content rises into place on load ── */
.journal-head > *, .journal-list li, .journal-post header > *, .journal-post .journal-body, .journal-empty {
  animation: rise 1s var(--ease-out) both;
  animation-delay: calc(0.15s + var(--i, 0) * 90ms);
}
@keyframes rise {
  from { opacity: 0; transform: translateY(var(--reveal-y)); }
  to   { opacity: 1; transform: none; }
}
.journal-head > :nth-child(2), .journal-post header > :nth-child(2) { --i: 1; }
.journal-head > :nth-child(3), .journal-post header > :nth-child(3) { --i: 2; }
.journal-post .journal-body { --i: 3; }
.journal-list li:nth-child(1) { --i: 3; } .journal-list li:nth-child(2) { --i: 4; }
.journal-list li:nth-child(3) { --i: 5; } .journal-list li:nth-child(4) { --i: 6; }
.journal-list li:nth-child(n+5) { --i: 7; }
.journal-item h2 { transition: color 0.4s var(--ease-out), transform 0.5s var(--ease-out); }
.journal-item:hover h2 { transform: translateX(6px); }

@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  *, *::before, *::after { animation: none !important; transition: none !important; }
  .page, .page *, .mobile-menu a { opacity: revert-layer; }
  @view-transition { navigation: none; }
}