/* ===== Home ===== */
.home {
  --cap-w: clamp(270px, 22vw, 340px);
  --cap-gap: clamp(28px, 3.2vw, 56px);
  --base-b: clamp(20px, 4.8vh, 52px);
  --hl-room: calc(100vw - 2 * var(--gutter) - var(--cap-w) - var(--cap-gap));
  position: relative;
  height: 100vh;
  height: 100svh;
  overflow: hidden;
  color: var(--sand);
}
.home.is-hot { cursor: pointer; }
/* swipes step through the animals, so they must not also swipe the browser back or pull to refresh */
html:has(> body[data-page="home"]),
body[data-page="home"] { overscroll-behavior: none; }

.home-field {
  position: fixed; inset: 0; z-index: 0;
  width: 100%; height: 100%;
  pointer-events: none;
}

/* ----- location + live time, just under the header ----- */
.home-loc {
  position: absolute; z-index: 1;
  left: var(--gutter); top: calc(var(--hdr-h) - 2px);
  max-width: min(36vw, 560px);
  color: var(--sand-dim);
  line-height: 1.5;
}
.home-loc__in { display: flex; flex-wrap: wrap; gap: 4px 26px; }
.home-loc__sep { opacity: .55; margin: 0 .15em; }
.home-loc__time { display: inline-flex; align-items: center; color: var(--sand); font-variant-numeric: tabular-nums; white-space: nowrap; }
.home-loc__live {
  width: 6px; height: 6px; margin-right: 9px; border-radius: 50%; background: var(--accent);
  animation: home-live 2.4s var(--ease-io) infinite;
}
@keyframes home-live {
  0%, 100% { opacity: 1; transform: scale(1); }
  50% { opacity: .3; transform: scale(.66); }
}
/* reduced motion: a steady dot, not one frozen mid-pulse */
.home.is-reduced .home-loc__live { animation: none; }
@media (prefers-reduced-motion: reduce) { .home-loc__live { animation: none; } }

/* ----- bottom band: headline left, caption right ----- */
.home-base {
  position: absolute; z-index: 1;
  left: var(--gutter); right: var(--gutter);
  bottom: max(var(--base-b), calc(env(safe-area-inset-bottom) + 12px));
  display: flex; align-items: flex-end; justify-content: space-between;
  gap: var(--cap-gap);
  pointer-events: none;
}
.home-base > * { pointer-events: auto; }

/* The longest line ("Georgetown, Class of 2030.") is ~11.1em wide, so the size is
   bounded by the room left beside the caption (home.js stacks the page below 20px). */
.home-hl {
  flex: 0 1 auto; min-width: 0;
  font-size: clamp(20px, min(11vh, calc(var(--hl-room) / 11.5)), 104px);
  color: var(--sand);
}
.home-hl__line { display: block; width: max-content; white-space: nowrap; }
.home-hl__link { position: relative; display: inline-block; }
.home-hl__link::after {
  content: ""; position: absolute; left: .03em; right: .01em; bottom: .015em;
  height: max(2px, .052em); border-radius: 1px; background: currentColor;
  transform: scaleX(0); transform-origin: left center;
  transition: transform 1.1s var(--ease-out) calc(var(--d, 0ms) + 620ms);
}
.home-hl.is-in .home-hl__link::after { transform: scaleX(1); }
.home-hl.is-in .home-hl__link:hover::after,
.home-hl.is-in .home-hl__link:focus-visible::after { animation: home-wipe .85s var(--ease-io); }
@keyframes home-wipe {
  0% { transform-origin: right center; transform: scaleX(1); }
  44% { transform-origin: right center; transform: scaleX(0); }
  56% { transform-origin: left center; transform: scaleX(0); }
  100% { transform-origin: left center; transform: scaleX(1); }
}

/* ----- "now showing" caption ----- */
.home-cap { flex: 0 0 var(--cap-w); width: var(--cap-w); }
.home-cap__in { position: relative; }

/* transport: pause glyph + progress line; the whole 24px-tall strip is the pause target,
   laid out as a 2px line so the caption keeps its rhythm */
.home-cap__track {
  position: relative; z-index: 1;
  display: flex; align-items: center; gap: 12px;
  height: 24px; margin: -11px 0;
}
.home-cap__pause { flex: none; display: grid; place-items: center; height: 24px; color: var(--sand); }
.home-cap__pause::after { content: ""; position: absolute; inset: 0 -6px; border-radius: 6px; }
.home-cap__pause:focus-visible { outline: none; }
.home-cap__pause:focus-visible::after { outline: 2px solid var(--accent); outline-offset: -1px; }
.home-cap__glyph { position: relative; display: block; width: 9px; height: 10px; transition: color .35s var(--ease-out); }
.home-cap__glyph i {
  position: absolute; inset: 0; background: currentColor;
  transition: clip-path .45s var(--ease-io);
}
.home-cap__glyph i:first-child { clip-path: polygon(0 0, 33% 0, 33% 100%, 0 100%); }
.home-cap__glyph i:last-child { clip-path: polygon(67% 0, 100% 0, 100% 100%, 67% 100%); }
.home-cap__pause.is-paused .home-cap__glyph i:first-child { clip-path: polygon(0 0, 50% 25%, 50% 75%, 0 100%); }
.home-cap__pause.is-paused .home-cap__glyph i:last-child { clip-path: polygon(50% 25%, 100% 50%, 100% 50%, 50% 75%); }
.home-cap__pause.is-paused .home-cap__glyph { color: var(--accent); }
@media (hover: hover) { .home-cap__track:hover .home-cap__glyph { color: var(--accent); } }

.home-cap__bar { position: relative; flex: 1 1 auto; height: 2px; border-radius: 2px; background: var(--line); overflow: hidden; pointer-events: none; }
.home-cap__bar i {
  position: absolute; inset: 0; border-radius: inherit; background: var(--sand);
  transform: scaleX(0); transform-origin: left center;
  transition: opacity .5s var(--ease-out);
}
.home-cap.is-held .home-cap__bar i { opacity: .4; }
.home.is-reduced .home-cap__bar i {
  right: auto; width: calc(100% / 8);
  transform: translateX(calc(var(--i, 0) * 100%));
  transition: transform .5s var(--ease-out);
}

.home-cap__meta {
  display: flex; justify-content: space-between; align-items: baseline; gap: 12px;
  margin-top: 14px; color: var(--sand-dim); white-space: nowrap;
}
.home-cap__meta > span:first-child { color: var(--sand); font-variant-numeric: tabular-nums; }
.home-cap__hint { color: var(--sand-dim); }

.home-cap__row { display: flex; align-items: flex-end; justify-content: space-between; gap: 16px; margin-top: 12px; }
/* the whole caption opens the destination; the round buttons sit above the stretched link */
.home-cap__link { display: block; min-width: 0; padding: 2px 0; }
.home-cap__link::before { content: ""; position: absolute; inset: 0; }
.home-cap__animal { display: block; font-size: clamp(30px, 2.6vw, 42px); line-height: 1; letter-spacing: -0.03em; }
.home-cap__dest { display: flex; align-items: baseline; gap: .7em; margin-top: 12px; color: var(--sand); }
.home-cap__arrow { display: inline-block; color: var(--accent); transition: transform .55s var(--ease-spring); }
.home-cap__link:hover .home-cap__arrow,
.home-cap__link:focus-visible .home-cap__arrow { transform: translateX(5px); }
.home-cap__dest .home-slot {
  background: linear-gradient(currentColor, currentColor) 0 100% / 0% 1px no-repeat;
  transition: background-size .5s var(--ease-out);
}
.home-cap__link:hover .home-cap__dest .home-slot,
.home-cap__link:focus-visible .home-cap__dest .home-slot { background-size: 100% 1px; }

/* text slots that roll on change */
.home-slot { display: inline-grid; vertical-align: top; overflow: hidden; padding-bottom: .14em; margin-bottom: -.14em; }
.home-slot__i { grid-area: 1 / 1; white-space: nowrap; }

.home-cap__nav { position: relative; z-index: 1; display: flex; gap: 8px; flex: none; }
.home-btn {
  width: 42px; height: 42px; border-radius: 50%;
  display: grid; place-items: center;
  border: 1px solid var(--sand-faint); color: var(--sand);
  font: 500 15px/1 var(--f-mono);
  transition: background-color .35s var(--ease-out), color .35s var(--ease-out), border-color .35s var(--ease-out), transform .5s var(--ease-spring);
}
/* hover fill only where hover is real, so a tapped button does not stay filled on phones */
@media (hover: hover) { .home-btn:hover { background: var(--sand); border-color: var(--sand); color: var(--ink); } }
.home-btn:active { transform: scale(.9); }
.home-btn:focus-visible { outline-offset: 2px; border-radius: 50%; }

.home-sr {
  position: absolute; width: 1px; height: 1px; margin: -1px; padding: 0; border: 0;
  overflow: hidden; clip: rect(0 0 0 0); clip-path: inset(50%); white-space: nowrap;
}

/* touch: a swipe hint instead of the keyboard one, and bigger targets. The pause strip grows
   to 44px without moving anything (the caption link sits under it). */
.home-cap__hint--touch { display: none; }
@media (hover: none), (pointer: coarse) {
  .home-cap__hint { display: none; }
  .home-cap__hint--touch { display: inline; }
}
@media (pointer: coarse) {
  .home-cap__pause::after { inset: -10px -6px; }
  .home-btn { width: 44px; height: 44px; }
}

/* ----- stacked (portrait, < 900px): animal on top, headline and caption below ----- */
.home.is-stacked { --base-b: clamp(16px, 2.6vh, 28px); }
.home.is-stacked .home-loc { max-width: none; right: var(--gutter); top: calc(var(--hdr-h) - 6px); }
.home.is-stacked .home-base { flex-direction: column; align-items: stretch; gap: clamp(16px, 3.2vh, 32px); }
.home.is-stacked .home-hl {
  align-self: flex-start;
  font-size: clamp(24px, min(8.6vh, calc((100vw - 2 * var(--gutter)) / 11.4)), 64px);
}
.home.is-stacked .home-cap { flex: none; width: auto; }
.home.is-stacked .home-cap__meta { margin-top: 12px; }
.home.is-stacked .home-cap__row { margin-top: 8px; }
.home.is-stacked .home-cap__animal { font-size: clamp(20px, min(5.6vw, 8.6vh * .8), 28px); }
.home.is-stacked .home-cap__dest { margin-top: 8px; }
.home.is-stacked .home-btn { width: 44px; height: 44px; }

/* very short screens (e.g. 400% zoom): the section grows to fit and the page scrolls; home.js
   sets --ovf-top so the animal keeps a band between the location line and the headline */
.home.is-overflow { height: auto; min-height: 100vh; min-height: 100svh; padding: var(--ovf-top, 50vh) 0 var(--base-b); }
.home.is-overflow .home-field { position: absolute; }
.home.is-overflow .home-base { position: relative; inset: auto; margin: 0 var(--gutter); }
.home.is-overflow .home-cap__hint:not(.home-cap__hint--touch) { display: none; } /* scroll and space scroll here */

/* short landscape phones keep the wide layout; tighten the caption */
@media (max-height: 520px) {
  .home:not(.is-stacked) .home-cap__meta { margin-top: 10px; }
  .home:not(.is-stacked) .home-cap__row { margin-top: 6px; }
  /* stays under the headline's size where the headline has to shrink to fit */
  .home:not(.is-stacked) .home-cap__animal { font-size: clamp(20px, calc(var(--hl-room) / 11.5 * .9), 28px); }
  .home:not(.is-stacked) .home-cap__dest { margin-top: 6px; }
}