/* Motion is layered onto a fully visible, usable static layout. */
.hero-line { display: block; transform-origin: 50% 100%; }
.site-header { transition: background .3s, box-shadow .3s; }
.js .site-header { position: sticky; top: 0; }
.motion-ready .site-header { background: rgb(0 0 0 / .92); backdrop-filter: blur(18px); -webkit-backdrop-filter: blur(18px); }
.motion-ready.is-scrolled .site-header { box-shadow: 0 1px 0 #ffffff24, 0 8px 28px #0000000a; }
.motion-ready::before { content: ''; position: fixed; inset: 0 0 auto; height: 2px; z-index: 90; pointer-events: none; background: #fff; transform: scaleX(var(--page-progress, 0)); transform-origin: left; }
.motion-ready .scene > img { transform: translate3d(0, var(--photo-offset, 0px), 0) scale(1.09); transition: scale .7s cubic-bezier(.16, 1, .3, 1); }
.motion-ready .world-card:hover .scene > img,
.motion-ready .journal-card:hover .scene > img { transform: translate3d(0, var(--photo-offset, 0px), 0) scale(1.09); scale: 1.025; }
.motion-ready .motion-surface { transform: perspective(1000px) rotateX(var(--tilt-x, 0deg)) rotateY(var(--tilt-y, 0deg)); }
.motion-ready .scene.motion-surface::after { content: ''; position: absolute; inset: 0; pointer-events: none; border-radius: inherit; background: radial-gradient(ellipse at var(--light-x, 50%) var(--light-y, 50%), #ffffff26, transparent 70%); opacity: 0; transition: opacity .4s; }
.motion-ready .world-card:hover .scene::after,
.motion-ready .journal-card:hover .scene::after { opacity: 1; }
.motion-ready .brand-row { background-image: radial-gradient(ellipse at var(--light-x, 50%) var(--light-y, 50%), #ffffffb3, transparent 75%); }
.motion-ready .motion-magnet { translate: var(--magnet-x, 0px) var(--magnet-y, 0px); }
.motion-ready .button { transition: color .2s, background .2s, box-shadow .3s, scale .3s cubic-bezier(.2,.8,.2,1); }
.motion-ready .button:hover { box-shadow: 0 6px 20px #17171717; }
.motion-ready .button:active { scale: .96; }
.text-link > span[aria-hidden], .button > span[aria-hidden], .round-arrow, .world-card-title > span, .journal-read > span { transition: transform .4s cubic-bezier(.16, 1, .3, 1); }
.text-link:hover > span[aria-hidden], .button:hover > span[aria-hidden], .brand-row:hover .round-arrow,
.world-card:hover .world-card-title > span, .journal-card:hover .journal-read > span { transform: translate(3px, -3px); }
.primary-nav a { position: relative; }
.primary-nav a::after { content: ''; position: absolute; bottom: 4px; left: 0; width: 100%; height: 1px; background: currentColor; transform: scaleX(0); transform-origin: right; transition: transform .35s cubic-bezier(.16, 1, .3, 1); }
.primary-nav a:hover::after { transform: scaleX(1); transform-origin: left; }
.primary-nav a[aria-current] { text-decoration: none; }
.primary-nav a[aria-current]::after { transform: scaleX(1); }
.menu-icon { transition: transform .35s cubic-bezier(.16, 1, .3, 1); }

@media (max-width: 580px) {
  html { scroll-padding-top: 85px; }
  .js .primary-nav { display: flex; visibility: hidden; pointer-events: none; opacity: 0; transform: translateY(-9px); clip-path: inset(0 0 100% 0); transition: opacity .25s, transform .4s cubic-bezier(.16, 1, .3, 1), clip-path .4s cubic-bezier(.16, 1, .3, 1), visibility 0s .4s; }
  .js .primary-nav.is-open { visibility: visible; pointer-events: auto; opacity: 1; transform: translateY(0); clip-path: inset(0 0 -30px 0); transition-delay: 0s; }
  .js .primary-nav a { opacity: 0; transform: translateY(-7px); transition: opacity .25s, transform .35s cubic-bezier(.16, 1, .3, 1); }
  .js .primary-nav.is-open a { opacity: 1; transform: translateY(0); transition-delay: calc(var(--menu-order, 0) * 45ms + 50ms); }
  .primary-nav a::after { width: 28px; bottom: 8px; }
}

@media (hover: none), (pointer: coarse) {
  .motion-ready .motion-surface { transform: none; }
  .motion-ready .motion-magnet { translate: none; }
}

@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { animation: none !important; transition: none !important; scroll-behavior: auto !important; }
  .scene > img, .world-card:hover .scene > img, .journal-card:hover .scene > img,
  .text-link:hover > span[aria-hidden], .button:hover > span[aria-hidden], .brand-row:hover .round-arrow,
  .world-card:hover .world-card-title > span, .journal-card:hover .journal-read > span { transform: none; scale: none; }
}

@media print {
  .site-header { position: static; }
  .motion-ready::before { display: none; }
  .motion-ready .scene > img, .motion-ready .motion-surface { transform: none; }
}