/* v6 / Split-rock waymark: one real illustration, five independently animated silhouettes.
   No decorative bloom, halo or particles: the stones themselves tell the story. */
html { overflow-x: clip; }
body { min-width: 0; max-width: 100%; overflow-x: clip; }
.hero, .hero-copy, .hero-art, .header, .nav-actions, .atlas-handoff {
  min-width: 0;
}
.hero {
  max-width: 100%;
  grid-template-columns: minmax(0,45%) minmax(0,55%);
}
.hero-art {
  position: relative;
  width: 100%;
  max-width: 100%;
  margin-left: 0;
  overflow: clip;
  isolation: isolate;
}
/* JS reveals layers only after the source WebP has loaded. With JS off, original stays. */
.hero-art .cairn-layered {
  position: absolute;
  z-index: 2;
  inset: 0;
  width: 100%;
  height: 100%;
  pointer-events: none;
  opacity: 0;
  transform: translate3d(0, var(--stone-y, 0px), 0) scale(var(--stone-scale, 1));
  transform-origin: 50% 58%;
  transition: opacity .35s ease;
}
.hero-art.is-layered-ready > .cairn {
  opacity: 0;
  pointer-events: none;
}
.hero-art.is-layered-ready .cairn-layered { opacity: 1; }
.hero-art .cairn-layered .stone-part {
  transform-box: fill-box;
  transform-origin: 50% 82%;
  /* All layers are still and perfectly aligned in reduced-motion / no-JS mode. */
}
.hero-art.is-cairn-playing .stone-base {
  animation: cairn-base-shift 7.8s ease-in-out infinite;
}
.hero-art.is-cairn-playing .stone-lower {
  animation: cairn-low-balance 6.7s ease-in-out infinite;
}
.hero-art.is-cairn-playing .stone-middle {
  animation: cairn-mid-balance 5.9s ease-in-out infinite;
}
.hero-art.is-cairn-playing .stone-crown {
  animation: cairn-crown-balance 5.1s ease-in-out infinite;
}
@keyframes cairn-base-shift {
  0%,100% { transform: translate3d(0, 0, 0) rotate(0deg); }
  48% { transform: translate3d(-.6px,-2.5px,0) rotate(-.15deg); }
}
@keyframes cairn-low-balance {
  0%,100% { transform: translate3d(0, 0, 0) rotate(0deg); }
  45% { transform: translate3d(1.7px,-5px,0) rotate(.35deg); }
}
@keyframes cairn-mid-balance {
  0%,100% { transform: translate3d(0, 0, 0) rotate(0deg); }
  51% { transform: translate3d(-2.1px,-8px,0) rotate(-.65deg); }
}
@keyframes cairn-crown-balance {
  0%,100% { transform: translate3d(0, 0, 0) rotate(0deg); }
  43% { transform: translate3d(2.2px,-14px,0) rotate(1.4deg); }
}
/* The stones first assemble from separate positions, bottom to top.
   Then each rock settles into its own slow balancing loop. */
.hero-art.has-cairn-entered .stone-assemble-base {
  animation: stack-assemble-low 1.22s .04s cubic-bezier(.18,.82,.21,1) both;
}
.hero-art.has-cairn-entered .stone-assemble-lower {
  animation: stack-assemble-low 1.22s .16s cubic-bezier(.18,.82,.21,1) both;
}
.hero-art.has-cairn-entered .stone-assemble-middle {
  animation: stack-assemble-mid 1.22s .29s cubic-bezier(.18,.82,.21,1) both;
}
.hero-art.has-cairn-entered .stone-assemble-crown {
  animation: stack-assemble-top 1.27s .43s cubic-bezier(.18,.82,.21,1) both;
}
.hero-art.is-cairn-playing .stone-base { animation-delay: 1.55s; }
.hero-art.is-cairn-playing .stone-lower { animation-delay: 1.65s; }
.hero-art.is-cairn-playing .stone-middle { animation-delay: 1.78s; }
.hero-art.is-cairn-playing .stone-crown { animation-delay: 1.9s; }
@keyframes stack-assemble-low {
  0% { opacity: 0; transform: translate3d(0,-28px,0) rotate(-.8deg); }
  75% { opacity: 1; transform: translate3d(0,3px,0) rotate(.16deg); }
  100% { opacity: 1; transform: translate3d(0,0,0) rotate(0); }
}
@keyframes stack-assemble-mid {
  0% { opacity: 0; transform: translate3d(0,-41px,0) rotate(1.4deg); }
  75% { opacity: 1; transform: translate3d(-1px,4px,0) rotate(-.25deg); }
  100% { opacity: 1; transform: translate3d(0,0,0) rotate(0); }
}
@keyframes stack-assemble-top {
  0% { opacity: 0; transform: translate3d(0,-63px,0) rotate(-2.6deg); }
  73% { opacity: 1; transform: translate3d(2px,5px,0) rotate(.45deg); }
  100% { opacity: 1; transform: translate3d(0,0,0) rotate(0); }
}
/* The original route remains visible, but is cropped to the stone scene. */
.hero-art .hero-route { z-index: 3; }
/* Keep the pause control available only in the footer, not over the opening artwork. */
.footer .motion-switch {
  position: static;
  inset: auto;
  right: auto;
  bottom: auto;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-height: 44px;
  min-width: 120px;
  flex: 0 0 auto;
  padding: 10px 14px;
}
.footer .motion-switch:focus-visible {
  outline: 2px solid var(--copper);
  outline-offset: 3px;
}
@media (max-width: 900px) {
  .hero { grid-template-columns: minmax(0,1fr); }
  .hero-art { width: 100%; max-width: 100%; margin: 20px auto 0; }
  .header { min-width: 0; }
  .header .brand { flex-shrink: 1; }
  .nav-actions { flex-shrink: 0; max-width: 64%; }
  .atlas-handoff { max-width: calc(100% - 48px); }
  .atlas-handoff .handoff-marker { min-width: 0; }
}
@media (max-width: 600px) {
  /* Preserve .container's gutters; only the children fill the content rail. */
  .hero-copy, .hero-art { width: 100%; max-width: 100%; }
  .hero .cta-row { display: grid; grid-template-columns: minmax(0, 1fr); }
  .hero .cta-row .btn { justify-content: space-between; }
  .hero-art { margin-top: 22px; }
  .art-caption { max-width: 45%; }
  .footer .motion-switch { padding-inline: 12px; }
}
@media (max-width: 360px) {
  .atlas-handoff { max-width: calc(100% - 36px); }
  .header .brand { font-size: 25px; }
  .nav-actions { gap: 3px; }
}
/* Paused/reduced states must not leave frozen midair rocks or hide the base art. */
@media (prefers-reduced-motion: reduce) {
  .hero-art .stone-part, .hero-art .stone-assemble { animation: none !important; transform: none !important; opacity: 1 !important; }
  .hero-art .cairn-layered {
    transform: none !important;
    transition: none !important;
  }
}
.motion-off .hero-art .stone-part, .motion-off .hero-art .stone-assemble { animation: none !important; transform: none !important; opacity: 1 !important; }
.motion-off .hero-art .cairn-layered { transform: none !important; transition: none !important; }

/* Keep both hero actions on the same text, arrow and touch-target rails. */
.hero .cta-row { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 12px; }
.hero .cta-row .btn {
  display: flex;
  justify-content: space-between;
  gap: 12px;
  min-height: 56px;
  padding: 14px 18px;
  font-size: 14px;
  line-height: 1.5;
}
.hero .cta-row .btn > span:first-child { min-width: 0; }
.hero .cta-row .link-arrow { flex: 0 0 20px; text-align: center; }
/* The SVG fallback used to show through the cut-out layers as a second stone stack. */
.hero-art .art-fallback { visibility: hidden; opacity: 0; }
.hero-art.asset-error .art-fallback { visibility: visible; opacity: 1; }
@media (max-width: 900px) {
  .hero-art { max-width: 520px; }
  /* Mobile keeps the individual stone layers, with a coordinated levitation cycle. */
  .hero-art .cairn-layered { transform: none; }
  .hero-art { background: none; }
  .hero-art .cairn {
    transform: none;
    filter: none;
    mask-image: radial-gradient(ellipse 68% 72% at 50% 58%, #000 55%, transparent 95%);
  }
  .hero-art .topography-ring, .hero-art .hero-route { display: none; }
  .hero-art.is-layered-ready .hero-route { display: block; opacity: .65; }
  .hero-art .art-caption { top: 7%; left: 5%; font-size: 9px; }
  .hero-art.is-cairn-playing .stone-base { animation: cairn-mobile-base 6.4s 1.9s ease-in-out infinite; }
  .hero-art.is-cairn-playing .stone-lower { animation: cairn-mobile-lower 6.4s 1.9s ease-in-out infinite; }
  .hero-art.is-cairn-playing .stone-middle { animation: cairn-mobile-middle 6.4s 1.9s ease-in-out infinite; }
  .hero-art.is-cairn-playing .stone-crown { animation: cairn-mobile-crown 6.4s 1.9s ease-in-out infinite; }
  .hero-art.is-cairn-playing .route-draw { animation: cairn-mobile-trace 6.4s 1.9s ease-in-out infinite; }
}
@media (max-width: 600px) {
  .hero .cta-row { grid-template-columns: minmax(0, 1fr); gap: 10px; }
  .hero .cta-row .btn { font-size: 15px; padding-inline: 18px; }
}
@keyframes cairn-mobile-base {
  0%, 100% { transform: none; }
  50% { transform: translate3d(-1px,-4px,0) rotate(-.15deg); }
}
@keyframes cairn-mobile-lower {
  0%, 100% { transform: none; }
  50% { transform: translate3d(3px,-13px,0) rotate(.45deg); }
}
@keyframes cairn-mobile-middle {
  0%, 100% { transform: none; }
  50% { transform: translate3d(-4px,-24px,0) rotate(-.8deg); }
}
@keyframes cairn-mobile-crown {
  0%, 100% { transform: none; }
  50% { transform: translate3d(5px,-38px,0) rotate(1.6deg); }
}
@keyframes cairn-mobile-trace {
  0% { stroke-dashoffset: 1; opacity: 0; }
  15% { opacity: 1; }
  55%, 75% { stroke-dashoffset: 0; opacity: 1; }
  100% { stroke-dashoffset: 0; opacity: 0; }
}
/* A full still illustration remains for reduced motion and the explicit pause switch. */
@media (prefers-reduced-motion: reduce) {
  .hero-art .route-draw { animation: none !important; }
  @media (max-width: 900px) {
    .hero-art.is-layered-ready > .cairn { opacity: 1; }
    .hero-art .cairn-layered, .hero-art.is-layered-ready .hero-route { display: none; }
  }
}
.motion-off .hero-art .route-draw { animation: none !important; }
@media (max-width: 900px) {
  .motion-off .hero-art.is-layered-ready > .cairn { opacity: 1; }
  .motion-off .hero-art .cairn-layered, .motion-off .hero-art.is-layered-ready .hero-route { display: none; }
}

/* Invisible native button: the stones remain the interface, with keyboard access. */
.hero-art .cairn-touch {
  position: absolute;
  z-index: 5;
  inset: 28% 22% 18%;
  width: auto;
  margin: 0;
  padding: 0;
  border: 0;
  border-radius: 45%;
  background: transparent;
  color: inherit;
  box-shadow: none;
  cursor: pointer;
  touch-action: manipulation;
  -webkit-tap-highlight-color: transparent;
}
.hero-art .cairn-touch:focus-visible { outline: 1px solid var(--copper); outline-offset: 5px; }
.cairn-touch-label {
  position: absolute;
  width: 1px;
  height: 1px;
  padding: 0;
  margin: -1px;
  overflow: hidden;
  clip-path: inset(50%);
  white-space: nowrap;
}
.hero-art .stone-react { transform-box: view-box; }
.hero-art .stone-react-base { transform-origin: 50% 75%; }
.hero-art .stone-react-lower { transform-origin: 48% 64%; }
.hero-art .stone-react-middle { transform-origin: 49% 52%; }
.hero-art .stone-react-crown { transform-origin: 49% 40%; }

/* Only the project title + arrow is a link; the card and illustrations are not. */
.project-linked .project-title-link {
  display: inline-flex;
  align-items: baseline;
  gap: .28em;
  color: inherit;
  text-decoration: none;
  -webkit-tap-highlight-color: transparent;
  touch-action: manipulation;
}
.project-linked .project-outbound {
  display: inline-block;
  font: 500 .38em var(--sans);
  opacity: .68;
  transition: opacity .24s ease, transform .24s ease;
}
.project-linked .project-title-link:is(:hover, :focus-visible) .project-outbound {
  opacity: 1;
  transform: translate(2px, -2px);
}
.project-linked .project-title-link:focus-visible {
  outline: 2px solid var(--copper);
  outline-offset: 5px;
  border-radius: 2px;
}
@media (prefers-reduced-motion: reduce) {
  .project-linked .project-outbound { transition: none; }
}
.motion-off .project-linked .project-outbound { transition: none; }