/* Tabi Mind. The type and ink stay quiet; the paintings carry the color. */
:root {
  --ink: #1f1b17;
  --parchment: #f5f0e8;
  --on-dark-muted: #d8cdbb;
  --ember: #e0743f;
  --night: #120c09;
  --serif: "Cormorant Garamond", "Iowan Old Style", Georgia, serif;
  --brand: "Cormorant Garamond", "Iowan Old Style", Georgia, serif;
  /* One glass for every pill: the name, the language switch, Scroll, Sound, Next, Previous. */
  --glass-bg: linear-gradient(160deg, rgba(48, 20, 10, 0.6), rgba(20, 12, 10, 0.42));
  --glass-blur: blur(12px) saturate(1.2);
  --glass-border: 1px solid rgba(255, 179, 71, 0.6);
  --glass-glow: 0 0 16px rgba(255, 106, 43, 0.22);
  --glass-glow-hot: 0 0 26px rgba(255, 106, 43, 0.45);
  --sans: "Source Sans 3", -apple-system, "Segoe UI", Helvetica, Arial, sans-serif;
  --mincho: "Shippori Mincho", "Hiragino Mincho ProN", "Yu Mincho", serif;
}
:lang(ja) { --serif: var(--mincho); }

*, *::before, *::after { box-sizing: border-box; }
html, body {
  margin: 0; height: 100%; overflow: hidden; background: var(--night); color: var(--parchment);
  overscroll-behavior: none; -webkit-font-smoothing: antialiased;
}
body { font-family: var(--serif); touch-action: pan-x pan-y pinch-zoom; }

/* With the engine running nothing may scroll the journey box (focus would otherwise drag the
   stage off-screen); without it the strip falls back to a natively scrollable row. */
.journey { position: fixed; inset: 0; overflow-x: auto; overflow-y: hidden; }
.js .journey { overflow: clip; }
html:not(.js) .stage, html:not(.js) .chrome { position: fixed; }
html:not(.js) .cue, html:not(.js) .steps, html:not(.js) .progress { display: none; }

/* Stage: painted stills underneath, the scrubbed film on top once it can draw. */
.stage { position: absolute; inset: 0; }
.stage__still, .stage__film {
  position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; display: block;
}
.stage__still--b { opacity: 0; }
/* The film only carries the pours: app.js fades it in as a pour starts and out as it lands, so
   every painting rests as the crisp still itself. */
.stage__film { opacity: 0; }
.stage__sparks { position: absolute; inset: 0; width: 100%; height: 100%; pointer-events: none; }
.stage__veil {
  position: absolute; inset: 0; pointer-events: none;
  background: linear-gradient(to bottom, rgba(18, 12, 9, 0.45), rgba(18, 12, 9, 0) 16%);
}

/* The words: one viewport-wide slot per painting. Without JavaScript they sit in a natively
   scrollable row; with it they stack, and each one slides in over its painting when its step comes. */
.strip {
  position: absolute; inset: 0; display: flex; width: max-content; height: 100%;
  will-change: transform; pointer-events: none;
}
.panel {
  position: relative; flex: 0 0 100vw; width: 100vw; height: 100%;
  display: flex; flex-direction: column; justify-content: flex-end;
  padding: 0 max(16px, 7vw) clamp(72px, 13vh, 150px);
}
.panel__body {
  display: flex; flex-direction: column; max-width: min(36rem, 82vw);
  padding: clamp(18px, 2.2vw, 30px) clamp(20px, 2.4vw, 34px) clamp(10px, 1.4vw, 20px);
  background: linear-gradient(160deg, rgba(20, 12, 10, 0.62), rgba(20, 12, 10, 0.44));
  -webkit-backdrop-filter: blur(14px) saturate(1.15); backdrop-filter: blur(14px) saturate(1.15);
  border: 1px solid rgba(245, 240, 232, 0.14); border-radius: 18px;
  box-shadow: 0 20px 60px rgba(0, 0, 0, 0.35);
}
.panel[data-layout="band"] { align-items: center; padding-bottom: clamp(40px, 7vh, 80px); }
.panel[data-layout="band"] .panel__body { max-width: min(64rem, 90vw); display: block; column-count: 2; column-gap: 2.6rem; }
.panel[data-layout="band"] .panel__kicker { column-span: all; }
.panel[data-layout="band"] .panel__line { font-size: clamp(1.1rem, 1.45vw, 1.5rem); break-inside: avoid; }
.js .strip { display: block; width: 100%; }
.js .panel { position: absolute; inset: 0; width: auto; opacity: 0; will-change: transform, opacity; }
.js .panel[data-layout="band"] { padding-bottom: clamp(72px, 9vh, 96px); }
.panel__still { position: absolute; width: 1px; height: 1px; opacity: 0; pointer-events: none; }
.panel__kicker {
  font-family: var(--sans); font-size: 12px; font-weight: 600; letter-spacing: 0.18em;
  text-transform: uppercase; color: var(--on-dark-muted); margin: 0 0 1.1rem;
}
.panel__kicker span { color: var(--ember); margin-right: 0.6em; }
.panel__title {
  font-family: var(--serif); font-weight: 400; font-style: italic;
  font-size: clamp(1.05rem, 1.3vw, 1.35rem); color: var(--on-dark-muted); margin: 0 0 0.9rem;
}
:lang(ja) .panel__title { font-style: normal; letter-spacing: 0.08em; } /* kanji are never slanted */
.panel__line {
  font-size: clamp(1.45rem, 2.35vw, 2.45rem); line-height: 1.22; margin: 0 0 0.55em;
  text-shadow: 0 1px 2px rgba(0, 0, 0, 0.5);
  text-wrap: pretty;
}
:lang(ja) .panel__line { font-size: clamp(1.15rem, 1.85vw, 1.95rem); line-height: 1.7; letter-spacing: 0.04em; }

/* Chrome: brand and language. */
.chrome {
  position: absolute; top: 0; left: 0; right: 0; display: flex; align-items: center; gap: 1.2rem;
  padding: max(14px, env(safe-area-inset-top)) max(16px, 3vw) 0; font-family: var(--sans); z-index: 3;
}
/* The name wears the step buttons' glass pill so it reads over every painting. */
.chrome__brand {
  margin-right: auto; display: inline-flex; align-items: center; gap: 0.75em; white-space: nowrap;
  color: var(--parchment); text-decoration: none; padding: 0.5rem 1.1rem 0.55rem; border-radius: 999px;
  background: var(--glass-bg);
  -webkit-backdrop-filter: var(--glass-blur); backdrop-filter: var(--glass-blur);
  border: var(--glass-border); box-shadow: var(--glass-glow);
  transition: transform 0.25s ease, border-color 0.25s ease, box-shadow 0.25s ease;
}
.chrome__brand:hover, .chrome__brand:focus-visible { transform: translateY(-1px); border-color: #ffb347; box-shadow: var(--glass-glow-hot); }
.chrome__name { font-family: var(--brand); font-size: 1.15rem; line-height: 1; letter-spacing: 0.04em; }
.chrome__sub {
  font-family: var(--serif); font-size: 0.95rem; line-height: 1; letter-spacing: 0.08em;
  padding-left: 0.75em; border-left: 1px solid rgba(255, 179, 71, 0.55);
}
@media (max-width: 560px) { .chrome__sub { display: none; } }
.chrome__lang { white-space: nowrap;
  font: 600 12px/1 var(--sans); letter-spacing: 0.16em; text-transform: uppercase; color: var(--parchment);
  padding: 0.7rem 1.1rem; border-radius: 999px; text-decoration: none; cursor: pointer;
  background: var(--glass-bg); -webkit-backdrop-filter: var(--glass-blur); backdrop-filter: var(--glass-blur);
  border: var(--glass-border); box-shadow: var(--glass-glow);
  transition: transform 0.25s ease, border-color 0.25s ease, box-shadow 0.25s ease;
}
.chrome__lang:hover, .chrome__lang:focus-visible { transform: translateY(-1px); border-color: #ffb347; box-shadow: var(--glass-glow-hot); }
.chrome__lang:lang(ja) { letter-spacing: 0.08em; }

.progress { position: absolute; left: 0; right: 0; bottom: 0; height: 3px; background: rgba(245, 240, 232, 0.12); z-index: 3; }
.progress__bar { display: block; height: 100%; background: linear-gradient(90deg, #ff4d2e, #ffb347, #39d5ff); transform-origin: 0 50%; transform: scaleX(0); }

/* Opening cues: two glass pills at the bottom, lit like embers. Once the journey moves,
   Scroll fades away and Sound settles small in the bottom-right corner. */
.cue {
  position: absolute; left: 50%; bottom: clamp(28px, 6vh, 64px); z-index: 4; display: flex;
  transform: translateX(-50%);
  transition: left 1s cubic-bezier(0.2, 0.7, 0.2, 1), bottom 1s cubic-bezier(0.2, 0.7, 0.2, 1), transform 1s cubic-bezier(0.2, 0.7, 0.2, 1);
}
.cue button {
  display: inline-flex; align-items: center; gap: 0.8em; white-space: nowrap; cursor: pointer; overflow: hidden;
  font: 600 14px/1 var(--sans); letter-spacing: 0.18em; text-transform: uppercase; color: var(--parchment);
  padding: 1.05rem 1.6rem; border-radius: 999px;
  background: var(--glass-bg);
  -webkit-backdrop-filter: var(--glass-blur); backdrop-filter: var(--glass-blur);
  border: var(--glass-border);
  box-shadow: 0 0 24px rgba(255, 106, 43, 0.32), inset 0 0 16px rgba(255, 140, 60, 0.12);
  animation: cue-breathe 3.2s ease-in-out infinite;
  transition: opacity 0.6s ease, visibility 0.6s, max-width 0.8s ease, padding 0.8s ease, margin 0.8s ease,
    border-width 0.8s ease, font-size 0.8s ease, transform 0.25s ease;
}
:lang(ja) .cue button { letter-spacing: 0.08em; }
.cue button:hover, .cue button:focus-visible { transform: translateY(-2px); border-color: #ffb347; }
.cue__go { max-width: 22rem; margin-right: 14px; }
.cue__arrow {
  position: relative; width: 34px; height: 2px;
  background: linear-gradient(90deg, rgba(255, 179, 71, 0), #ffb347);
  animation: cue-drift 1.8s ease-in-out infinite;
}
.cue__arrow::after {
  content: ""; position: absolute; right: 0; top: -4px; width: 8px; height: 8px;
  border-top: 2px solid #ffb347; border-right: 2px solid #ffb347; transform: rotate(45deg);
}
.cue__wave { display: inline-flex; align-items: center; gap: 3px; height: 16px; }
.cue__wave i { display: block; width: 3px; height: 16px; border-radius: 2px; background: #ffb347; transform: scaleY(0.4); }
.cue__wave i:nth-child(2) { transform: scaleY(0.7); }
.cue__wave i:nth-child(3) { transform: scaleY(0.95); }
.cue__wave i:nth-child(4) { transform: scaleY(0.55); }
.is-sound .cue__wave i { animation: cue-wave 0.9s ease-in-out infinite; }
.is-sound .cue__wave i:nth-child(2) { animation-delay: -0.3s; }
.is-sound .cue__wave i:nth-child(3) { animation-delay: -0.6s; }
.is-sound .cue__wave i:nth-child(4) { animation-delay: -0.15s; }
.moved .cue { left: calc(100% - max(16px, 3vw)); bottom: 18px; transform: translateX(-100%); }
.moved .cue__go { opacity: 0; visibility: hidden; max-width: 0; padding-left: 0; padding-right: 0; margin-right: 0; border-width: 0; }
.moved .cue__sound { padding: 0.7rem 1rem; font-size: 12px; animation: none; box-shadow: var(--glass-glow); }
/* Next and Previous: shown once the journey has moved, faded out while a step plays. */
.steps {
  position: absolute; left: 50%; bottom: 18px; z-index: 4; display: flex; gap: 12px;
  transform: translateX(-50%); visibility: hidden;
}
.moved .steps { visibility: visible; }
.steps button {
  display: inline-flex; align-items: center; gap: 0.7em; white-space: nowrap; cursor: pointer;
  font: 600 12px/1 var(--sans); letter-spacing: 0.16em; text-transform: uppercase; color: var(--parchment);
  padding: 0.7rem 1.1rem; border-radius: 999px;
  background: var(--glass-bg);
  -webkit-backdrop-filter: var(--glass-blur); backdrop-filter: var(--glass-blur);
  border: var(--glass-border); box-shadow: var(--glass-glow);
  opacity: 0; pointer-events: none;
  transition: opacity 0.2s ease, transform 0.25s ease, border-color 0.25s ease, box-shadow 0.25s ease;
}
.moved:not(.is-moving) .steps button {
  opacity: 1; pointer-events: auto;
  transition: opacity 0.6s ease 0.1s, transform 0.25s ease, border-color 0.25s ease, box-shadow 0.25s ease;
}
:lang(ja) .steps button { letter-spacing: 0.08em; }
.steps button:hover, .steps button:focus-visible { transform: translateY(-2px); border-color: #ffb347; box-shadow: var(--glass-glow-hot); }
.at-start .steps__prev, .at-end .steps__next { display: none; }
/* Keyboard focus: a light amber ring on a dark halo, so it shows over the brightest painting. */
.chrome a:focus-visible, .steps button:focus-visible, .cue button:focus-visible {
  outline: 2px solid #ffb347; outline-offset: 3px; box-shadow: 0 0 0 7px rgba(18, 12, 9, 0.6), var(--glass-glow-hot);
}
.steps__arrow {
  position: relative; width: 22px; height: 2px;
  background: linear-gradient(90deg, rgba(255, 179, 71, 0), #ffb347);
}
.steps__arrow::after {
  content: ""; position: absolute; right: 0; top: -3px; width: 7px; height: 7px;
  border-top: 2px solid #ffb347; border-right: 2px solid #ffb347; transform: rotate(45deg);
}
.steps__arrow--back { transform: scaleX(-1); }
@keyframes cue-breathe {
  0%, 100% { box-shadow: 0 0 20px rgba(255, 106, 43, 0.26), inset 0 0 14px rgba(255, 140, 60, 0.1); }
  50% { box-shadow: 0 0 42px rgba(255, 106, 43, 0.55), inset 0 0 20px rgba(255, 140, 60, 0.2); }
}
@keyframes cue-drift { 0%, 100% { transform: translateX(-4px); opacity: 0.55; } 50% { transform: translateX(6px); opacity: 1; } }
@keyframes cue-wave { 0%, 100% { transform: scaleY(0.35); } 50% { transform: scaleY(1); } }

/* Upright screens get the same journey on the tall paintings (the approved painting with sky and
   ground added above and below). The words sit in a full-width card above the buttons; Previous
   and Next take the two bottom corners and Sound sits between them, all at a 44 px touch height. */
.hold { display: none; }
@media (orientation: portrait) {
  .chrome__name { font-size: 1.05rem; }
  .panel, .js .panel[data-layout="band"] {
    align-items: stretch; justify-content: flex-end;
    padding: 0 12px calc(max(18px, env(safe-area-inset-bottom)) + 58px);
  }
  .panel__body, .panel[data-layout="band"] .panel__body {
    max-width: none; width: 100%; column-count: 1; padding: 16px 18px 8px; border-radius: 16px;
  }
  .panel__title { margin-bottom: 0.5rem; }
  .panel__kicker { margin-bottom: 0.5rem; }
  .panel__line, .panel[data-layout="band"] .panel__line { font-size: clamp(1rem, 4.6vw, 1.35rem); line-height: 1.38; }
  :lang(ja) .panel__line, :lang(ja) .panel[data-layout="band"] .panel__line {
    font-size: clamp(0.95rem, 4.2vw, 1.25rem); line-height: 1.7; letter-spacing: 0.02em;
  }
  .steps { left: 12px; right: 12px; transform: none; justify-content: space-between; bottom: max(18px, env(safe-area-inset-bottom)); }
  .steps__next { margin-left: auto; }
  .steps button { min-height: 44px; padding: 0 1rem; }
  .cue { bottom: calc(max(18px, env(safe-area-inset-bottom)) + 28px); }
  .cue__go { margin-right: 10px; }
  .cue button { padding: 0.95rem 1.25rem; }
  .moved .cue { left: 50%; transform: translateX(-50%); bottom: max(18px, env(safe-area-inset-bottom)); }
  /* Once moving, Sound shrinks to its wave in a 44 px circle between Previous and Next; the
     label stays for screen readers. */
  .moved .cue__sound { width: 44px; height: 44px; padding: 0; justify-content: center; gap: 0; }
  .moved .cue__sound .cue__label {
    position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap;
  }
  .steps button { letter-spacing: 0.12em; }
}
/* Without scripts an upright screen gets one painting, its first line and a note. */
@media (orientation: portrait) {
  html:not(.js) .stage, html:not(.js) .strip, html:not(.js) .progress { display: none; }
  html:not(.js) .hold {
    display: flex; flex-direction: column; justify-content: flex-end; position: absolute; inset: 0;
    padding: 0 16px max(40px, env(safe-area-inset-bottom)); gap: 0.6rem;
  }
  .hold__img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; object-position: 38% 50%; z-index: -1; }
  .hold::before { content: ""; position: absolute; inset: 0; z-index: -1; background: linear-gradient(to top, rgba(18, 12, 9, 0.92) 8%, rgba(18, 12, 9, 0.2) 60%); }
  .hold__line { font-size: 1.7rem; line-height: 1.25; margin: 0; }
  .hold__note { font-family: var(--sans); font-size: 0.95rem; line-height: 1.5; color: var(--on-dark-muted); margin: 0; }
}

/* Short landscape screens (phones turned sideways): smaller type so every card clears the nav. */
@media (orientation: landscape) and (max-height: 500px) {
  .panel, .js .panel[data-layout="band"] { padding-bottom: 56px; }
  .panel__body { max-width: min(46rem, 80vw); padding: 12px 20px 4px; }
  .panel__kicker { margin-bottom: 0.5rem; }
  .panel__title { margin-bottom: 0.4rem; }
  .panel__line { font-size: clamp(0.95rem, 4.4vh, 1.45rem); line-height: 1.2; }
  :lang(ja) .panel__line { font-size: clamp(0.85rem, 3.8vh, 1.15rem); line-height: 1.5; letter-spacing: 0.02em; }
  .panel[data-layout="band"] .panel__line { font-size: clamp(0.85rem, 3.6vh, 1.1rem); }
}

@media (prefers-reduced-motion: reduce) {
  .stage__still--b { transition: opacity 0.6s ease; }
  .stage__sparks { display: none; }
  .cue button, .cue__arrow, .is-sound .cue__wave i { animation: none; }
}