/* ===== Run: the journey as a paper map on a table ("Atlas", chosen 15 Oct 2026) =====
   The sheet (661 x 928, sized from journey.js) lies back at 56 degrees inside a perspective box; cut-outs and town names
   stand on it, counter-rotated by the same 56 degrees. Only .at-clip clips (Safari needs the
   clipping box on its own layer to round the corners of 3D content). Every loop below is a
   transform or opacity animation, so it runs on the compositor, and all of it pauses while the
   hero is off screen (.at-idle). Nothing loops at all under reduced motion. */

.hero.atlas { height: 400px; padding: 0; color: var(--ink); background: #E4D3BF; border-radius: 22px; }
.atlas .at-clip { position: absolute; inset: 0; overflow: hidden; border-radius: 22px; transform: translateZ(0); }
.atlas .at-stage { position: absolute; inset: 0; perspective: 760px; perspective-origin: 50% 18%;
  background: radial-gradient(120% 90% at 50% 38%, #EBDDCB 0%, #E4D3BF 55%, #D8C3AA 100%); }
/* the pivot: the point of the map under the pin is always here, 170 px down, mid-width */
.atlas .at-tilt { position: absolute; left: 50%; top: 170px; width: 0; height: 0; transform-style: preserve-3d;
  transform: rotateX(56deg); transition: transform .9s cubic-bezier(.3, .7, .2, 1); }
.atlas .at-tilt.at-flying { transform: rotateX(56deg) scale3d(.84, .84, .84); }
.atlas .at-zoom { position: absolute; left: 0; top: 0; width: 0; height: 0; transform-style: preserve-3d; transform-origin: 0 0; }
.atlas .at-cam { position: absolute; left: 0; top: 0; transform-style: preserve-3d; }
.atlas .at-paper { position: absolute; left: 0; top: 0; display: block; border-radius: 4px; transform: translateZ(0);
  box-shadow: 0 1px 0 #F6EFE5, 0 26px 44px rgba(61, 43, 31, .26); }
.atlas .at-ink { position: absolute; left: 0; top: 0; display: block; overflow: visible; transform: translateZ(.6px); }
.atlas .at-sky { position: absolute; left: 0; top: 0; overflow: hidden; pointer-events: none; transform: translateZ(.9px); }

/* waves on the open sea, and cloud shadows drifting across the sheet */
.atlas .at-wave { position: absolute; display: block; width: 22px; height: 8px; opacity: .5;
  background: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 22 8'%3E%3Cpath d='M1 5q2.5-4 5 0t5 0 5 0 5 0' fill='none' stroke='%23708B7F' stroke-width='1.3' stroke-linecap='round'/%3E%3C/svg%3E") center / contain no-repeat;
  animation: at-wave 4s ease-in-out infinite alternate; }
@keyframes at-wave { from { transform: translateX(-2.5px); opacity: .3; } to { transform: translateX(2.5px); opacity: .85; } }
.atlas .at-cloud { position: absolute; left: 0; display: block; width: 200px; height: 120px; border-radius: 50%;
  background: radial-gradient(closest-side, rgba(61, 43, 31, .12), rgba(61, 43, 31, .05) 60%, rgba(61, 43, 31, 0));
  animation: at-drift 95s linear infinite; }
.atlas .at-cloud.at-c1 { top: 90px; animation-delay: -30s; }
.atlas .at-cloud.at-c2 { top: 390px; width: 260px; height: 150px; animation-duration: 140s; animation-delay: -80s; }
.atlas .at-cloud.at-c3 { top: 660px; animation-duration: 120s; animation-delay: -12s; }
@keyframes at-drift { from { transform: translate3d(-280px, 0, 0); } to { transform: translate3d(740px, 90px, 0); } }

/* cut-outs: they stand on the paper, origin at their foot */
.atlas .at-bb { position: absolute; transform-origin: 50% 100%; transform: rotateX(-56deg); pointer-events: none; }
.atlas .at-bb svg { display: block; overflow: visible; }
.atlas .at-sails { position: absolute; display: block; left: 10%; top: -2%; width: 80%; height: 66.7%; animation: at-spin 7s linear infinite; }
.atlas .at-lazy .at-sails { animation-duration: 11s; }
@keyframes at-spin { to { transform: rotate(360deg); } }
.atlas .at-beam { position: absolute; display: block; left: 50%; top: 20%; width: 58px; height: 14px; margin-top: -7px; opacity: 0; transform-origin: 0 50%;
  background: linear-gradient(90deg, rgba(255, 228, 160, .85), rgba(255, 228, 160, 0)); clip-path: polygon(0 42%, 100% 0, 100% 100%, 0 58%);
  animation: at-beam 6s ease-in-out infinite; }
@keyframes at-beam { 0%, 100% { opacity: 0; transform: scaleX(1); } 20% { opacity: .9; transform: scaleX(1); } 42% { opacity: 0; transform: scaleX(1); }
  50% { opacity: 0; transform: scaleX(-1); } 70% { opacity: .9; transform: scaleX(-1); } 92% { opacity: 0; transform: scaleX(-1); } }
.atlas .at-ferry { position: absolute; left: 0; top: 0; width: 0; height: 0; transform-style: preserve-3d; }
.atlas .at-rock { width: 100%; height: 100%; transform-origin: 50% 90%; animation: at-rock 3.2s ease-in-out infinite; }
@keyframes at-rock { 0%, 100% { transform: rotate(-2deg); } 50% { transform: rotate(2deg) translateY(-1.5px); } }

/* town names: hidden until you approach; the next one in clay, the last one passed quieter.
   translateZ lifts each name towards you, so a cut-out standing just south of a town never hides it */
.atlas .at-label { position: absolute; width: 0; height: 0; transform-style: preserve-3d; }
.atlas .at-tag { position: absolute; left: 8px; bottom: 0; transform-origin: 0 100%; transform: rotateX(-56deg) translateZ(36px) translateY(-4px) scale(.6) scale(var(--zi, 1));
  opacity: 0; visibility: hidden; padding: 3px 6px; border-radius: 6px; background: rgba(255, 253, 250, .95); color: var(--ink);
  font: 700 10px/1.15 var(--font-body); white-space: nowrap; box-shadow: 0 1px 3px rgba(61, 43, 31, .2);
  transition: opacity .3s, transform .35s var(--spring), visibility 0s .35s; }
.atlas .at-label.at-left .at-tag { left: auto; right: 8px; transform-origin: 100% 100%; }
.atlas .at-label.at-on .at-tag { opacity: 1; visibility: visible; transform: rotateX(-56deg) translateZ(36px) translateY(-4px) scale(1) scale(var(--zi, 1));
  transition: opacity .3s, transform .35s var(--spring), visibility 0s; }
.atlas .at-label.at-next .at-tag { color: #A24F2D; font-size: 11px; box-shadow: inset 0 0 0 1px #E0925B, 0 1px 3px rgba(61, 43, 31, .2); }
.atlas .at-label.at-past .at-tag, .atlas .at-label.at-soon .at-tag { color: var(--ink-2); font-weight: 600; }
.atlas .at-tag.at-pop { animation: at-popped .7s var(--spring); }
@keyframes at-popped {
  0% { transform: rotateX(-56deg) translateZ(36px) translateY(-4px) scale(1) scale(var(--zi, 1)); background: #C9663E; color: #FFF8F0; }
  35% { transform: rotateX(-56deg) translateZ(36px) translateY(-11px) scale(1.35) scale(var(--zi, 1)); background: #C9663E; color: #FFF8F0; }
  100% { transform: rotateX(-56deg) translateZ(36px) translateY(-4px) scale(1) scale(var(--zi, 1)); } }

/* the pin: flat on the glass at the pivot, so nothing on the map ever hides it */
.atlas .at-pin { position: absolute; left: 50%; top: 170px; width: 0; height: 0; z-index: 2; pointer-events: none; }
.atlas .at-shadow { position: absolute; display: block; left: -11px; top: -6px; width: 22px; height: 12px; border-radius: 50%;
  background: rgba(61, 43, 31, .32); animation: at-shade 2.6s ease-in-out infinite; }
.atlas .at-ring { position: absolute; display: block; left: -20px; top: -11px; width: 40px; height: 22px; border-radius: 50%;
  border: 2px solid rgba(201, 102, 62, .8); opacity: 0; animation: at-ring 2.6s ease-out infinite; }
.atlas .at-bob { position: absolute; left: -15px; top: -45px; width: 30px; height: 44px; transform-origin: 50% 100%;
  filter: drop-shadow(0 2px 2px rgba(61, 43, 31, .25)); animation: at-bob 2.6s ease-in-out infinite; }
.atlas .at-bob svg { display: block; }
.atlas .at-pin.at-hop .at-bob { animation: at-hopped .55s var(--spring), at-bob 2.6s ease-in-out .55s infinite; }
@keyframes at-bob { 0%, 100% { transform: translateY(0); } 50% { transform: translateY(-4px); } }
@keyframes at-shade { 0%, 100% { transform: scale(1); opacity: 1; } 50% { transform: scale(.76); opacity: .6; } }
@keyframes at-ring { 0% { transform: scale(.4); opacity: .9; } 100% { transform: scale(1.7); opacity: 0; } }
@keyframes at-hopped { 0% { transform: translateY(0); } 35% { transform: translateY(-12px) scale(.95, 1.05); } 70% { transform: translateY(0) scale(1.08, .92); } 100% { transform: none; } }

/* overlays: next stop, the region stamp, the counter */
.atlas .at-top { position: absolute; left: 12px; right: 12px; top: 12px; z-index: 3; display: flex; justify-content: space-between;
  align-items: flex-start; gap: 10px; pointer-events: none; }
.atlas .at-next { min-width: 0; max-width: 62%; padding: 8px 12px 9px; border-radius: 14px; background: rgba(255, 253, 250, .95);
  box-shadow: 0 2px 8px rgba(61, 43, 31, .1); }
.atlas .at-k { font-size: 10px; font-weight: 700; letter-spacing: .1em; text-transform: uppercase; color: var(--ink-2); }
.atlas .at-town { font-family: var(--font-display); font-size: 22px; line-height: 1.1; color: var(--ink); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.atlas .at-town.at-tick { animation: at-ticked .45s var(--spring); }
@keyframes at-ticked { from { transform: translateY(6px); opacity: .2; } }
.atlas .at-to { font-size: 12px; font-weight: 600; color: #A24F2D; }
.atlas .at-stamp { position: relative; flex: none; width: 84px; height: 84px; padding: 9px; border-radius: 50%; border: 2.5px solid #A24F2D;
  display: grid; place-items: center; text-align: center; color: #A24F2D; background: rgba(255, 253, 250, .84);
  font-size: 10px; font-weight: 700; letter-spacing: .08em; line-height: 1.25; text-transform: uppercase; transform: rotate(-8deg); }
.atlas .at-stamp::before { content: ''; position: absolute; inset: 4px; border-radius: 50%; border: 1px dashed rgba(162, 79, 45, .55); }
.atlas .at-stamp.at-thump { animation: at-stamp .6s cubic-bezier(.2, .9, .2, 1) both; }
@keyframes at-stamp { 0% { transform: scale(1.7) rotate(-16deg); opacity: 0; } 60% { transform: scale(.93) rotate(-7deg); opacity: 1; } 100% { transform: scale(1) rotate(-8deg); opacity: 1; } }
.atlas .at-panel-wrap { position: absolute; left: 12px; right: 12px; bottom: 12px; z-index: 3; pointer-events: none; }
.atlas .at-panel { padding: 10px 14px 11px; border-radius: 16px; background: rgba(255, 253, 250, .95); box-shadow: 0 2px 8px rgba(61, 43, 31, .1); }
.atlas .at-count { display: flex; align-items: baseline; gap: 6px; }
.atlas .at-odo { font-family: var(--font-display); font-weight: 400; font-size: 30px; line-height: 1; letter-spacing: -.02em; color: var(--ink); }
.atlas .at-count span { font-size: 12px; font-weight: 600; color: var(--ink-2); }
.atlas .at-bar { display: flex; height: 6px; margin-top: 8px; border-radius: 3px; overflow: hidden; background: var(--line); }
.atlas .at-bar i { display: block; height: 100%; width: 0; transition: width 1.4s var(--ease); }
.atlas .at-bar .at-you { background: var(--accent); }
.atlas .at-bar .at-them { background: var(--accent-2); }
.atlas .at-who { display: flex; justify-content: space-between; gap: 10px; margin-top: 5px; font-size: 12px; color: var(--ink-2); }
.atlas .at-who b { font-weight: 700; color: var(--ink); }
.atlas .at-line { margin-top: 7px; padding-top: 7px; border-top: 1px solid var(--line); font-size: 12.5px; line-height: 1.35; color: var(--ink-2); transition: opacity .3s; text-wrap: pretty; }
.atlas .at-line:empty { display: none; }
.atlas .at-line.at-news { color: var(--ink); font-weight: 600; }
.atlas .at-line.at-fade { opacity: 0; }

/* zoom: a pinch anywhere on the map, or the two buttons; one finger still scrolls the page */
.hero.atlas { touch-action: pan-y; }
.atlas .at-zoomctl { position: absolute; right: 12px; top: 108px; z-index: 3; display: flex; flex-direction: column; overflow: hidden;
  border-radius: 14px; background: rgba(255, 253, 250, .95); box-shadow: 0 2px 8px rgba(61, 43, 31, .1); }
.atlas .at-zbtn { display: grid; place-items: center; width: 44px; height: 44px; padding: 0; border: 0; background: none; color: var(--ink); }
.atlas .at-zbtn + .at-zbtn { border-top: 1px solid var(--line); }
.atlas .at-zbtn:disabled { color: var(--muted-2); }
.atlas .at-zbtn svg { display: block; }
.atlas.at-zooming .at-tag { transition: none !important; }
.atlas .at-top { transition: opacity .25s, transform .25s var(--ease); }
.atlas.at-wide .at-top { opacity: 0; transform: translateY(-10px); pointer-events: none; }

.atlas.at-idle *, .atlas.at-idle *::before { animation-play-state: paused !important; }
@media (prefers-reduced-motion: reduce) {
  .atlas .at-wave, .atlas .at-cloud, .atlas .at-sails, .atlas .at-beam, .atlas .at-rock, .atlas .at-bob, .atlas .at-shadow, .atlas .at-ring,
  .atlas .at-tag.at-pop, .atlas .at-stamp.at-thump, .atlas .at-town.at-tick, .atlas .at-pin.at-hop .at-bob { animation: none !important; }
  .atlas .at-ring { display: none; }
  .atlas .at-cloud { transform: translate3d(150px, 20px, 0); }
  .atlas .at-tilt, .atlas .at-tag, .atlas .at-bar i, .atlas .at-top { transition: none !important; }
}