/* Spirit House journey. Type and ink from Spirit House DESIGN.md; 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;
  --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) .hint, html:not(.js) .chrome__sound, 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; }
.stage__film { opacity: 0; transition: opacity 0.6s ease; }
.has-video .stage__film { opacity: 1; }
.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 text strip: one viewport-wide slot per painting, sliding right to left. */
.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; }
.panel[data-layout="band"] .cta { margin: 0.4rem 0 0.9rem; }
.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;
}
.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; }
.cta {
  pointer-events: auto; display: inline-block; align-self: flex-start; margin-top: 1.2rem;
  font-family: var(--sans); font-size: 15px; font-weight: 600; letter-spacing: 0.08em;
  color: var(--ink); background: var(--parchment); text-decoration: none;
  padding: 0.95rem 1.6rem; border-radius: 999px;
  box-shadow: 0 0 0 1px rgba(255, 255, 255, 0.4), 0 10px 40px rgba(224, 116, 63, 0.45);
  transition: transform 0.25s ease, box-shadow 0.25s ease;
}
.cta:hover, .cta:focus-visible { transform: translateY(-2px); box-shadow: 0 0 0 1px #fff, 0 14px 50px rgba(224, 116, 63, 0.7); }
.cta:focus-visible, .chrome a:focus-visible, .chrome button:focus-visible { outline: 2px solid var(--ember); outline-offset: 3px; }

/* Chrome: brand, language, sound. */
.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;
}
.chrome__brand {
  margin-right: auto; color: var(--parchment); text-decoration: none; font-family: var(--serif);
  font-size: 1.15rem; letter-spacing: 0.04em;
}
.chrome__lang, .chrome__sound { white-space: nowrap;
  font: 600 12px/1 var(--sans); letter-spacing: 0.16em; text-transform: uppercase;
  color: var(--parchment); background: rgba(18, 12, 9, 0.35); border: 1px solid rgba(245, 240, 232, 0.45);
  padding: 0.6rem 0.9rem; border-radius: 999px; text-decoration: none; cursor: pointer;
}
.chrome__lang:lang(ja) { letter-spacing: 0.08em; }
.chrome__sound[aria-pressed="true"] { background: var(--parchment); color: var(--ink); }

.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); }

.hint {
  position: absolute; right: max(16px, 4vw); bottom: 28px; margin: 0; z-index: 3;
  font: 600 12px/1 var(--sans); letter-spacing: 0.16em; text-transform: uppercase; color: var(--on-dark-muted);
  transition: opacity 0.8s ease;
}
.hint::after { content: " \2192"; color: var(--ember); }
.hint.is-gone { opacity: 0; }

/* Phase 1 is landscape: portrait phones get one painting, one line, and the invitation. */
.hold { display: none; }
@media (orientation: portrait) {
  .stage, .strip, .progress, .hint, .chrome__sound { display: none; }
  .chrome__brand { white-space: nowrap; font-size: 1.05rem; }
  .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; }
  .hold .cta { margin-top: 0.6rem; }
}

/* Short landscape screens (phones turned sideways): smaller type so every card clears the nav. */
@media (orientation: landscape) and (max-height: 500px) {
  .panel { 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); }
  .cta { padding: 0.7rem 1.2rem; margin-top: 0.6rem; }
}

@media (prefers-reduced-motion: reduce) {
  .stage__still--b { transition: opacity 0.6s ease; }
  .stage__sparks { display: none; }
}