/* Spud & Root: the two pages you go between places from, Town
   (town/index.html, the park) and Home (home/index.html, the living room).
   Loaded after site.css and before the page's own town.css or home.css,
   which colour its scene for the time of day and move things in it.
   hub.js sets data-time on .hub (day, dusk or night) by the visitor's
   clock, and opens the map. See docs/pages/town.md and home.md. */

.hub-page {
  overflow: hidden;
  background: #22283d;
  overscroll-behavior: none;
}

.hub {
  position: relative;
  height: 100vh;
  height: 100svh;
  min-height: 360px;
  overflow: hidden;
  font-family: var(--font-body);
  color: var(--ink);
  -webkit-tap-highlight-color: transparent;
}

/* ---------- The scene ---------- */

.scene {
  position: absolute;
  inset: 0;
  overflow-x: auto;
  overflow-y: hidden;
  scrollbar-width: none;
  overscroll-behavior-x: none;
}
.scene::-webkit-scrollbar {
  display: none;
}
.art {
  display: block;
  height: 100%;
  /* As wide as the drawing at this height, so on a phone you can look
     round by swiping */
  width: max(100%, 160vh);
  width: max(100%, 160svh);
  -webkit-user-select: none;
  user-select: none;
}
/* A phone held upright shows a tall strip of the picture: lose a little
   off the top, so what's in front of you comes up the screen */
@media (max-aspect-ratio: 4/5) {
  .art {
    height: 115%;
    width: max(100%, 184vh);
    width: max(100%, 184svh);
    margin-top: -15vh;
    margin-top: -15svh;
  }
}

/* The sky (the park's, and the one through the living room's window) */
.sky0 { stop-color: var(--sky0); }
.sky1 { stop-color: var(--sky1); }
.sky2 { stop-color: var(--sky2); }

.sun--dusk,
.moon,
.stars,
.lit {
  display: none;
}
.hub[data-time="dusk"] .sun--day,
.hub[data-time="night"] .sun--day {
  display: none;
}
.hub[data-time="dusk"] .sun--dusk,
.hub[data-time="night"] .moon,
.hub[data-time="night"] .stars,
.hub[data-time="dusk"] .lit,
.hub[data-time="night"] .lit {
  display: inline;
}

/* The evening is a tint over the whole scene (its colour and strength are
   set by each page), with the lights drawn above it so they shine */
.tint {
  fill: #000;
  opacity: 0;
  pointer-events: none;
}
.lights {
  pointer-events: none;
}
.hub[data-time="dusk"] .lit {
  opacity: 0.85;
}

/* The map's pictures, kept out of sight until the map shows them */
.pictures {
  position: absolute;
  width: 0;
  height: 0;
  overflow: hidden;
}

/* ---------- Buttons ---------- */

.pill {
  display: inline-block;
  padding: 0.3em 0.9em;
  font-family: var(--font-display);
  font-weight: 600;
  font-size: 0.95rem;
  line-height: 1.4;
  white-space: nowrap;
  color: var(--ink);
  background: var(--white);
  border: var(--stroke) solid var(--ink);
  border-radius: var(--radius-pill);
  box-shadow: var(--shadow-sm);
  text-decoration: none;
  cursor: pointer;
}
.pill:hover {
  background: var(--logo-yellow);
}
.pill--go {
  padding: 0.45em 1.3em;
  font-size: 1.1rem;
  background: var(--logo-yellow);
}
.pill--go:hover {
  background: #fff07a;
}
.open-map {
  position: absolute;
  z-index: 5;
  left: 50%;
  bottom: max(20px, calc(env(safe-area-inset-bottom) + 12px));
  translate: -50% 0;
}
html:not(.js) .open-map {
  display: none;
}

/* ---------- The map ---------- */

.map {
  position: absolute;
  z-index: 10;
  inset: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: max(16px, env(safe-area-inset-top)) 16px max(16px, env(safe-area-inset-bottom));
  background: rgba(24, 18, 12, 0.5);
}
html.js .map:not(.is-open) {
  display: none;
}
.map__paper {
  position: relative;
  width: min(100%, 780px);
  max-height: 100%;
  overflow-y: auto;
  overscroll-behavior: contain;
  padding: clamp(18px, 4vw, 34px);
  background-color: #fbf2dc;
  /* the folds: it's folded in three, and in half across */
  background-image:
    linear-gradient(90deg, transparent 33%, rgba(120, 90, 40, 0.13) 33.3%, rgba(255, 255, 255, 0.5) 33.6%, transparent 34%),
    linear-gradient(90deg, transparent 66.3%, rgba(120, 90, 40, 0.13) 66.6%, rgba(255, 255, 255, 0.5) 66.9%, transparent 67.3%),
    linear-gradient(transparent 49.7%, rgba(120, 90, 40, 0.1) 50%, rgba(255, 255, 255, 0.45) 50.3%, transparent 50.6%),
    radial-gradient(circle at 88% 82%, transparent 38px, rgba(150, 100, 50, 0.13) 40px, rgba(150, 100, 50, 0.06) 44px, transparent 46px);
  border: var(--stroke) solid var(--ink);
  border-radius: 6px;
  box-shadow: var(--shadow);
  transform-origin: 50% 100%;
}
.map__paper::before {
  /* the printed border */
  content: "";
  position: absolute;
  inset: 9px;
  border: 2px solid #7a5a3a;
  outline: 1px solid #7a5a3a;
  outline-offset: 3px;
  border-radius: 3px;
  pointer-events: none;
}
.map__head {
  position: relative;
  text-align: center;
  margin-bottom: 1.2rem;
}
.map__head h2 {
  margin: 0;
  font-family: var(--font-display);
  font-weight: 700;
  font-size: clamp(1.9rem, 6vw, 2.6rem);
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: #5a3b22;
}
.map__head h2:focus {
  outline: none;
}
.map__here {
  margin: 0.3rem 0 0;
  font-family: var(--font-script);
  font-size: 1.25rem;
  color: #b3362b;
}
.map__dot {
  display: inline-block;
  width: 0.7em;
  height: 0.7em;
  margin-right: 0.4em;
  vertical-align: -0.05em;
  background: #e0402f;
  border: 2px solid var(--ink);
  border-radius: 50%;
}

.map__places {
  display: grid;
  gap: 0.9rem;
  margin: 0;
  padding: 0;
  list-style: none;
}
@media (min-width: 640px) {
  .map__places {
    grid-template-columns: 1fr 1fr;
  }
}
.map__place {
  position: relative;
  display: flex;
  background: rgba(255, 255, 255, 0.5);
  border: 2px solid #7a5a3a;
  border-radius: 10px;
}
.map__go {
  display: flex;
  flex: 1;
  gap: 0.9rem;
  align-items: flex-start;
  padding: 0.75rem;
  color: inherit;
  text-decoration: none;
  border-radius: 8px;
}
.map__go:hover,
.map__go:focus-visible {
  background: rgba(255, 222, 0, 0.35);
}
.map__go:focus-visible {
  outline: 3px solid var(--ink);
  outline-offset: 2px;
}
.map__pic {
  flex: none;
  width: 84px;
  height: 84px;
  padding: 4px;
  background: #e9f0dc;
  border: 2px solid #7a5a3a;
  border-radius: 8px;
}
.map__text {
  display: block;
  flex: 1;
  min-width: 0;
}
.map__name {
  display: block;
  margin: 0 0 0.2rem;
  font-family: var(--font-display);
  font-weight: 700;
  font-size: 1.25rem;
  line-height: 1.2;
}
.map__line {
  display: block;
  margin: 0;
  font-size: 0.95rem;
  line-height: 1.4;
  color: var(--ink-soft);
}
.map__note {
  position: absolute;
  right: 10px;
  bottom: -4px;
  font-family: var(--font-script);
  font-size: 1.15rem;
  color: #b3362b;
  rotate: -6deg;
  pointer-events: none;
}
.map__note--2 {
  rotate: 4deg;
  color: #3a5ea8;
}
/* The other map's place (Home on Town's map, Town on Home's): a dashed
   edge, as it's off this map */
.map__place--away {
  border-style: dashed;
}
.map__out {
  margin: 1.1rem 0 0;
  text-align: center;
  font-size: 0.95rem;
  color: var(--ink-soft);
}
.map__out a {
  color: var(--ink);
  font-weight: 600;
}

.map__close {
  display: block;
  margin: 1rem auto 0;
}
html:not(.js) .map__close {
  display: none;
}

/* Without JavaScript the map is the page, under the picture */
html:not(.js) .hub-page {
  overflow: auto;
}
html:not(.js) .hub {
  height: auto;
  overflow: visible;
}
html:not(.js) .scene {
  position: relative;
  height: 70vh;
}
html:not(.js) .map {
  position: static;
  background: #22283d;
}
html:not(.js) .map__paper {
  max-height: none;
}

/* ---------- Going somewhere ---------- */

.going {
  position: absolute;
  z-index: 20;
  inset: 0;
  background: #1a140f;
  opacity: 0;
  pointer-events: none;
  transition: opacity 0.45s ease;
}
.hub.is-going .going {
  opacity: 1;
  pointer-events: auto;
}

/* ---------- Opening the map, and arriving ---------- */

@media (prefers-reduced-motion: no-preference) {
  .hub {
    animation: hub-in 0.6s ease both;
  }
  .map.is-open .map__paper {
    animation: map-unfold 0.62s var(--ease-out) both;
  }
  .map.is-open {
    animation: fade-in 0.25s ease both;
  }
  .map.is-closing .map__paper {
    animation: map-fold 0.3s ease-in both;
  }
  .map.is-closing {
    animation: fade-in 0.3s ease reverse both;
  }
  .hub.is-going .map__paper {
    animation: map-fold 0.35s ease-in both;
  }
}

@keyframes hub-in {
  from { opacity: 0; }
}
@keyframes fade-in {
  from { opacity: 0; }
}
@keyframes map-unfold {
  0% { transform: translateY(60vh) scaleX(0.34) scaleY(0.5) rotate(-4deg); }
  45% { transform: translateY(0) scaleX(0.34) scaleY(1) rotate(-1deg); }
  100% { transform: none; }
}
@keyframes map-fold {
  to { transform: translateY(60vh) scaleX(0.34) scaleY(0.5) rotate(3deg); }
}