/* The play bar and the Start button (owner decision, October 13, 2026).
   Visitors land on the website; Start, or Play in this bar, runs the tour
   sense by sense. The bar stays at the bottom on every screen: play or pause,
   previous, one recognizable icon per sense, next, then sound and the
   camera, whose orbit and zoom open above it. Colours are brand tokens. */

/* The Start button: the first thing offered on the website. */
#overview .journey-start {
  display: inline-flex;
  align-items: center;
  gap: 0.7rem;
  min-height: 48px;
  max-width: 100%;
  margin: 0.4rem 0 1.4rem;
  padding: 0.7rem 1.35rem 0.7rem 0.75rem;
  border: 0;
  border-radius: var(--es-radius-pill);
  background: var(--es-pore);
  color: var(--es-pore-ink);
  font: 600 var(--es-text-body) / 1.2 var(--es-font-display);
  letter-spacing: -0.01em;
  box-shadow: 0 0 0 0 var(--es-glow-soft);
  transition:
    box-shadow 240ms ease,
    transform 240ms ease;
}
#overview .journey-start::after {
  content: none;
}
/* An invitation, not an alarm: three soft rings of light leave the button
   after the website arrives, then it rests. */
#overview .journey-start {
  animation: journey-start-call 3.6s ease-out 1.5s 3;
}
#overview .journey-start:is(:hover, :focus-visible) {
  animation: none;
}
@keyframes journey-start-call {
  0% {
    box-shadow: 0 0 0 0 var(--es-glow-soft);
  }
  45%,
  100% {
    box-shadow: 0 0 0 14px transparent;
  }
}
#overview .journey-start:hover {
  color: var(--es-pore-ink);
  box-shadow: 0 0 0 6px var(--es-glow-soft);
}
#overview .journey-start:focus-visible {
  outline: 2px solid var(--es-ink);
  outline-offset: 3px;
  text-decoration: none;
}
.journey-start-icon {
  flex: 0 0 auto;
  width: 2rem;
  height: 2rem;
  padding: 0.35rem;
  border-radius: 50%;
  background: color-mix(in oklab, var(--es-pore-ink) 16%, transparent);
  fill: currentColor;
}

/* The bar. */
.player {
  position: fixed;
  z-index: 55;
  left: 50%;
  bottom: max(0.75rem, env(safe-area-inset-bottom));
  translate: -50% 0;
  display: flex;
  align-items: center;
  gap: 0.15rem;
  max-width: calc(100vw - 1rem);
  padding: 0.25rem;
  border: 1px solid var(--es-line);
  border-radius: var(--es-radius-pill);
  background: var(--es-panel);
  color: var(--es-ink);
}
.player button {
  display: inline-grid;
  place-items: center;
  flex: 0 0 auto;
  min-width: 44px;
  min-height: 44px;
  margin: 0;
  padding: 0;
  border: 0;
  border-radius: 50%;
  background: transparent;
  color: var(--es-ink);
  font: var(--es-text-small) var(--es-font-data);
}
.player button:hover {
  background: color-mix(in oklab, var(--es-ink) 8%, transparent);
}
.player button:focus-visible {
  outline: 2px solid var(--es-pore);
  outline-offset: 1px;
}
.player svg {
  width: 1.35rem;
  height: 1.35rem;
  fill: none;
  stroke: currentColor;
  stroke-width: 1.6;
  stroke-linecap: round;
  stroke-linejoin: round;
}

/* Play and pause share one button; the bar's state picks the glyph. */
.player-play {
  width: 48px;
  height: 48px;
}
.player .player-play {
  background: var(--es-pore);
  color: var(--es-pore-ink);
}
.player .player-play:hover {
  background: var(--es-pore);
  box-shadow: 0 0 0 4px var(--es-glow-soft);
}
.player .player-play svg {
  fill: currentColor;
  stroke: none;
}
.player-icon--pause,
.player[data-state="playing"] .player-icon--play {
  display: none;
}
.player[data-state="playing"] .player-icon--pause {
  display: block;
}

.player-step {
  font-size: 1.1rem;
}

/* Familiar sense silhouettes, in the tour's order and its product colour. */
.player #senses {
  position: static;
  display: flex;
  flex-wrap: nowrap;
  gap: 0;
  margin: 0;
}
.player #senses button {
  --player-sense: var(--es-pore);
  width: 44px;
}
.player #senses .sense-hear {
  --player-sense: var(--es-hear);
}
.player #senses .sense-move {
  --player-sense: var(--es-move);
}
.player #senses .sense-smell {
  --player-sense: var(--es-smell);
}
.player #senses .sense-taste {
  --player-sense: var(--es-taste);
}
.player #senses .sense-view {
  --player-sense: var(--es-view);
}
.player #senses .sense-touch {
  --player-sense: var(--es-touch);
}
.player .sense-control-icon {
  display: block;
  width: 1.5rem;
  height: 1.5rem;
  color: var(--player-sense);
  stroke-width: 1.8;
  pointer-events: none;
}
.player #senses button[aria-current="step"] {
  background: color-mix(in oklab, var(--player-sense) 16%, transparent);
  box-shadow: inset 0 0 0 1px var(--player-sense);
}
/* The name is the button's label; it stays out of the slim bar until the
   bar has room to say it (below). */
.player-dot-name {
  position: absolute;
  width: 1px;
  height: 1px;
  overflow: hidden;
  clip-path: inset(50%);
  white-space: nowrap;
}
/* Each sense says its name under its icon where the bar has room, so the bar
   reads as sections, not only colours (owner request, October 14, 2026). */
@media (min-width: 720px) and (min-height: 600px) {
  .player #senses button {
    display: inline-flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 0.2rem;
    width: auto;
    min-width: 3.25rem;
    padding: 0 0.3rem;
    border-radius: var(--es-radius-pill);
  }
  .player-dot-name {
    position: static;
    width: auto;
    height: auto;
    overflow: visible;
    clip-path: none;
    font: 500 var(--es-text-small) / 1 var(--es-font-body);
    letter-spacing: 0.01em;
    color: var(--es-muted);
  }
  .player
    #senses
    button:is(:hover, :focus-visible, [aria-current="step"])
    .player-dot-name {
    color: var(--es-ink);
  }
}

.player-index {
  display: none;
  min-width: 4.4rem;
  text-align: center;
  font: var(--es-text-small) var(--es-font-data);
  letter-spacing: 0.08em;
  color: var(--es-muted);
}
.player-rule {
  width: 1px;
  height: 1.5rem;
  margin: 0 0.25rem;
  background: var(--es-line);
}

/* Overview appears once a sense is open: a house drawn by the stylesheet,
   the visible words kept for its accessible name. */
.player .return-overview {
  display: none;
  position: relative;
  width: 44px;
  color: transparent;
  overflow: hidden;
}
body.scene-focused .player .return-overview {
  display: inline-grid;
}
.player .return-overview::before {
  content: "";
  position: absolute;
  inset: 0;
  margin: auto;
  width: 1.3rem;
  height: 1.3rem;
  background: var(--es-ink);
  mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='1.6' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M4 11.5 12 5l8 6.5M6.5 9.5V19h11V9.5M10 19v-5h4v5'/%3E%3C/svg%3E")
    center / contain no-repeat;
}

/* Sound: waves when narration is on, a cross when it is off. */
.player-mute,
#player-sound[aria-pressed="true"] .player-mute {
  display: none;
}
#player-sound[aria-pressed="false"] .player-mute {
  display: inline;
}
#player-sound[aria-pressed="false"] .player-waves {
  display: none;
}
#player-sound[aria-pressed="false"],
#player-camera[aria-expanded="false"] {
  color: var(--es-muted);
}
#player-camera[aria-expanded="true"] {
  color: var(--es-pore);
}
.player .player-view-icon {
  width: 1.6rem;
  height: 1.6rem;
  stroke-width: 1.9;
}
.player-tool-label {
  display: none;
}
@media (min-width: 1000px) {
  .player #player-camera {
    display: inline-flex;
    gap: 0.4rem;
    padding-inline: 0.65rem;
    border-radius: var(--es-radius-pill);
  }
  .player-tool-label {
    display: inline;
    font: var(--es-text-small) var(--es-font-body);
  }
}
.sense-rail button {
  display: inline-flex;
  align-items: center;
  gap: 0.35rem;
  min-width: 44px;
  padding-inline: 0.6rem;
}
.sense-rail .sense-control-icon {
  flex: 0 0 auto;
  width: 1.15rem;
  height: 1.15rem;
  fill: none;
  stroke: currentColor;
  stroke-width: 1.8;
  stroke-linecap: round;
  stroke-linejoin: round;
  pointer-events: none;
}
.control-hint {
  position: fixed;
  z-index: 70;
  left: var(--control-hint-left, 0px);
  top: var(--control-hint-top, 0px);
  max-width: min(19rem, var(--control-hint-max-width, calc(100vw - 1rem)));
  box-sizing: border-box;
  margin: 0;
  padding: 0.55rem 0.8rem;
  border: 1px solid var(--es-dialog-edge);
  border-radius: var(--es-radius-s);
  background: var(--es-dialog-surface);
  color: var(--es-ink);
  box-shadow: var(--es-dialog-shadow);
  font: 400 var(--es-text-small) / 1.4 var(--es-font-body);
  overflow-wrap: anywhere;
  pointer-events: auto;
}
.control-hint[hidden] {
  display: none;
}
/* Bridge the small visual gap so a large pointer can enter the description. */
.control-hint::before,
.control-hint::after {
  content: "";
  position: absolute;
  inset-inline: 0;
  height: 0.5rem;
}
.control-hint::before {
  bottom: 100%;
}
.control-hint::after {
  top: 100%;
}

/* The camera: orbit, zoom and motion, above the bar's right end. */
.player .scene-controls {
  position: absolute;
  inset: auto 0 calc(100% + 0.5rem) auto;
  display: flex;
  gap: 0.15rem;
  padding: 0.25rem;
  border: 1px solid var(--es-line);
  border-radius: var(--es-radius-pill);
  background: var(--es-panel);
}
.player .scene-controls[hidden] {
  display: none;
}
.player .scene-controls button {
  font-size: var(--es-text-small);
}

/* The tour's progress runs along the top edge of the bar. */
.player .sequence-status {
  position: absolute;
  inset: -1px 1.5rem auto;
  min-width: 0;
  height: 2px;
  display: block;
  pointer-events: none;
}
.player #tour-status {
  position: absolute;
  width: 1px;
  height: 1px;
  overflow: hidden;
  clip-path: inset(50%);
  white-space: nowrap;
}
.player #tour-progress {
  display: block;
  width: 100%;
  height: 2px;
  background: transparent;
}
.player #tour-progress::after {
  border-radius: 2px;
}
.player:not([data-state="playing"], [data-state="paused"]) .sequence-status {
  display: none;
}

/* The tour's last page. */
.end-card {
  position: fixed;
  z-index: 50;
  inset: 0;
  display: grid;
  place-content: center;
  justify-items: center;
  gap: 1rem;
  padding: 5rem var(--es-space-4) 6.5rem;
  text-align: center;
  background: color-mix(in oklab, var(--es-ground) 82%, transparent);
}
.end-card[hidden] {
  display: none;
}
.end-card .eyebrow {
  margin: 0;
}
.end-card-title {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: 0.1em 0.45em;
  max-width: 44rem;
  margin: 0;
  font: 600 clamp(1.75rem, 4.2vw, 3.25rem) / 1.15 var(--es-font-display);
  letter-spacing: -0.02em;
}
.end-card-title:focus {
  outline: none;
}
.end-card-title em {
  font-style: normal;
  color: var(--es-pore);
}
.end-card-actions {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: 0.6rem;
  max-width: 40rem;
  margin-top: 0.75rem;
}
.end-card-actions :is(button, a) {
  display: inline-flex;
  align-items: center;
  gap: 0.5rem;
  min-height: 44px;
  padding: 0.6rem 1.1rem;
  border: 1px solid var(--es-line);
  border-radius: var(--es-radius-pill);
  background: var(--es-surface);
  color: var(--es-ink);
  font: var(--es-text-small) var(--es-font-body);
  text-decoration: none;
}
.end-card-actions :is(button, a):hover {
  border-color: var(--es-pore);
}
.end-card-actions .end-card-replay {
  border-color: var(--es-pore);
  background: var(--es-pore);
  color: var(--es-pore-ink);
}
.end-card svg {
  width: 1.2rem;
  height: 1.2rem;
  fill: none;
  stroke: currentColor;
  stroke-width: 1.7;
  stroke-linecap: round;
  stroke-linejoin: round;
}
.end-card-close {
  position: absolute;
  top: max(1.25rem, env(safe-area-inset-top));
  right: max(1rem, env(safe-area-inset-right));
  display: grid;
  place-items: center;
  width: 44px;
  height: 44px;
  padding: 0;
  border: 1px solid var(--es-line);
  border-radius: 50%;
  background: var(--es-surface);
}
body.end-card-open :is(#overview, #narrative, .telemetry-layer) {
  visibility: hidden;
}

/* Narrow screens: the chapter number stands in for the dots. */
@media (max-width: 719px) {
  .player #senses {
    display: none;
  }
  .player #chapter-index {
    display: block;
    /* Enlarged text still fits the bar: the counter gives up its spare
       width and tracking before any control is pushed off the screen. */
    min-width: 0;
    padding-inline: 0.25rem;
    font-size: min(var(--es-text-small), 4.2vw);
    letter-spacing: 0;
    white-space: nowrap;
  }
  .player-rule {
    display: none;
  }
  #overview .journey-start {
    pointer-events: auto;
  }
}
@media (max-width: 359px) {
  .player {
    width: calc(100vw - 1rem);
    flex-wrap: wrap;
    justify-content: center;
    gap: 0;
    padding: 0.125rem;
  }
  .player #chapter-index {
    display: none;
  }
  .player-index {
    min-width: 3.6rem;
    letter-spacing: 0;
  }
  .player button {
    min-width: 44px;
  }
}

.text-only .player,
.text-only .end-card {
  display: none;
}

@media (prefers-reduced-motion: reduce) {
  #overview .journey-start,
  .sense-control-icon {
    transition: none;
    animation: none;
  }
}