/* ui.css: the title, the narration, and the visitor's controls over the journey:
   skip intro, chapters, a clickable progress line, click-for-more sheets, the village gates.
   Motion is CSS transform/opacity only. */

/* ---------- the title: ASTRONEEOR ---------- */
.panel.bare .win.wordmark {
  display: flex; flex-direction: column; align-items: center; gap: 18px;
  font: 400 118px/.9 var(--display);
}
.wm {
  display: flex; letter-spacing: .16em; padding-left: .16em;
  filter: drop-shadow(0 0 28px rgb(95 227 201 / .35)) drop-shadow(0 4px 30px rgb(0 0 0 / .75));
}
.wm span {
  display: inline-block;
  background: linear-gradient(180deg, #f2fffb 0%, #bff5e8 38%, #5fe3c9 72%, #2b8d7f 100%);
  -webkit-background-clip: text; background-clip: text; color: transparent;
  opacity: 0; transform: translate3d(0, .32em, 0) scale(.96);
  animation: wm-in 1.1s cubic-bezier(.2, .8, .2, 1) calc(.25s + var(--i) * .07s) forwards;
}
@keyframes wm-in { to { opacity: 1; transform: none; } }
/* phones: the frame is cropped to a sliver, so the title is placed and sized against the screen instead */
html.cards .panel.start.bare {
  --ex0: 50vw; --ex1: 50vw; --ex2: 50vw; --ey0: 40svh; --ey1: 40svh; --ey2: 40svh;
  width: 100vw;
}
html.cards .panel.bare .win.wordmark { font-size: 10.4vw; gap: 3vw; }
html.cards .wm { letter-spacing: .12em; padding-left: .12em; }
html.cards .wm-sub { font-size: 3.1vw; letter-spacing: .42em; gap: 3vw; }
html.cards .wm-sub::before, html.cards .wm-sub::after { width: 9vw; }
.wm-sub {
  display: flex; align-items: center; gap: 18px;
  font: 500 22px/1 var(--mono); letter-spacing: .5em; text-transform: uppercase; color: rgb(234 244 239 / .78);
  opacity: 0; animation: wm-in 1s ease 1.2s forwards;
}
.wm-sub::before, .wm-sub::after { content: ""; width: 90px; height: 1px; background: linear-gradient(90deg, transparent, rgb(95 227 201 / .8)); }
.wm-sub::after { transform: scaleX(-1); }

/* ---------- narration: the story, one line per beat, in the visitor's reading line ---------- */
.tag.narr { left: var(--x); top: var(--y); width: var(--w); translate: 0 -100%; pointer-events: none; }
.tag.narr.c { translate: -50% -100%; text-align: center; }
.tag.narr p {
  margin: 0; color: var(--ink);
  font: 400 34px/1.28 var(--display); letter-spacing: -.005em;
  text-shadow: 0 2px 4px rgb(0 0 0 / .65), 0 4px 34px rgb(0 0 0 / .7);
  opacity: 0; transform: translate3d(0, 14px, 0);
  transition: opacity .8s ease .1s, transform .9s cubic-bezier(.2, .8, .2, 1) .1s;
}
.tag.narr.in p { opacity: 1; transform: none; }
.tag.narr.c p { font-size: 40px; font-style: italic; }
html.cards .tag.narr { translate: -50% 0; text-align: left; }
html.cards .tag.narr p { font-size: 1.35rem; }

/* ---------- top bar: skip, chapters, a progress line you can click ---------- */
.jbar {
  position: fixed; inset: 0 0 auto 0; z-index: 20;
  display: flex; align-items: center; gap: 10px;
  padding: 14px max(16px, 2.2vw) 0;
  pointer-events: none;
  transition: opacity .4s ease, transform .4s ease;
}
.jbar.gone { opacity: 0; transform: translate3d(0, -12px, 0); }
.jbar.gone * { pointer-events: none !important; }
.jbar > * { pointer-events: auto; }
.jb-mark {
  margin-right: auto; background: none; border: 0; padding: 6px 2px; cursor: pointer;
  font: 500 13px/1 var(--mono); letter-spacing: .32em; color: rgb(234 244 239 / .85);
  text-shadow: 0 1px 8px rgb(0 0 0 / .8); text-decoration: none;
}
.jb-btn {
  font: 500 12px/1 var(--mono); letter-spacing: .14em; text-transform: uppercase;
  color: var(--ink); background: rgb(3 14 16 / .55);
  -webkit-backdrop-filter: blur(8px); backdrop-filter: blur(8px);
  border: 1px solid rgb(95 227 201 / .35); border-radius: 999px;
  padding: 9px 14px; cursor: pointer; white-space: nowrap;
  transition: border-color .2s, background-color .2s, color .2s;
}
@media (max-width: 420px) {
  .jbar { gap: 6px; }
  .jb-mark { letter-spacing: .2em; font-size: 11px; }
  .jb-btn { padding: 8px 10px; font-size: 11px; letter-spacing: .08em; }
}
.jb-btn:hover, .jb-btn:focus-visible { border-color: var(--teal); color: var(--teal); }
.jb-btn[aria-expanded="true"] { border-color: var(--teal); }

.jb-menu {
  position: fixed; top: 58px; right: max(16px, 2.2vw); z-index: 21;
  width: min(320px, calc(100vw - 32px));
  margin: 0; padding: 8px; list-style: none;
  background: rgb(3 14 16 / .86);
  -webkit-backdrop-filter: blur(10px); backdrop-filter: blur(10px);
  border: 1px solid rgb(95 227 201 / .3); border-radius: 12px;
  box-shadow: 0 18px 50px rgb(0 0 0 / .5);
  opacity: 0; visibility: hidden; transform: translate3d(0, -6px, 0) scale(.98); transform-origin: top right;
  transition: opacity .22s ease, transform .22s ease, visibility 0s linear .22s;
}
.jb-menu.open { opacity: 1; visibility: visible; transform: none; transition: opacity .22s ease, transform .22s ease, visibility 0s; }
.jb-menu button {
  display: flex; width: 100%; align-items: center; gap: 12px; text-align: left;
  background: none; border: 0; border-radius: 8px; padding: 10px 12px; cursor: pointer;
  color: var(--ink); font: 400 17px/1.25 var(--display);
  transition: background-color .15s;
}
.jb-menu button:hover, .jb-menu button:focus-visible { background: rgb(95 227 201 / .1); }
.jb-menu button i { flex: none; width: 8px; height: 8px; border-radius: 50%; border: 1px solid rgb(95 227 201 / .7); }
.jb-menu button.here i { background: var(--teal); box-shadow: 0 0 8px var(--teal); }
.jb-menu button small { margin-left: auto; font: 400 11px/1 var(--mono); letter-spacing: .1em; color: var(--ink-dim); text-transform: uppercase; }

/* the line: fills with scroll (CSS scroll timeline), chapter ticks are buttons */
.jline { position: fixed; inset: 0 0 auto 0; height: 14px; z-index: 19; }
.jline::before { content: ""; position: absolute; inset: 0 0 auto 0; height: 2px; background: rgb(95 227 201 / .12); }
.jline-fill {
  position: absolute; inset: 0 0 auto 0; height: 2px; transform-origin: 0 50%; transform: scaleX(0);
  background: linear-gradient(90deg, var(--teal), var(--fire));
  box-shadow: 0 0 8px rgb(95 227 201 / .6);
}
@supports (animation-timeline: scroll()) {
  .jline-fill { animation: jfill linear both; animation-timeline: scroll(root); animation-range: 0 var(--jend, 100%); }
}
@keyframes jfill { to { transform: scaleX(1); } }
.jline button {
  position: absolute; top: -6px; left: var(--at); width: 18px; height: 18px; margin-left: -9px;
  background: none; border: 0; padding: 0; cursor: pointer;
}
.jline button::before {
  content: ""; position: absolute; left: 6px; top: 5px; width: 6px; height: 6px; border-radius: 50%;
  background: var(--bg); border: 1px solid rgb(95 227 201 / .8); transition: transform .2s;
}
.jline button:hover::before, .jline button:focus-visible::before { transform: scale(1.6); }
.jline button span {
  position: absolute; top: 20px; left: 50%; translate: -50% 0; white-space: nowrap;
  font: 500 11px/1 var(--mono); letter-spacing: .12em; text-transform: uppercase; color: var(--ink);
  background: rgb(3 14 16 / .85); border: 1px solid rgb(95 227 201 / .3); border-radius: 6px; padding: 6px 8px;
  opacity: 0; transform: translate3d(0, -4px, 0); transition: opacity .15s, transform .15s; pointer-events: none;
}
.jline button:hover span, .jline button:focus-visible span { opacity: 1; transform: none; }
.jline.gone { opacity: 0; pointer-events: none; }
.jline.gone button { pointer-events: none; }

/* ---------- click for more: every card can open its details ---------- */
.tag[data-more] .card { cursor: pointer; }
.tag[data-more] .card .more {
  position: absolute; top: 9px; right: 10px; width: 18px; height: 18px; border-radius: 50%;
  border: 1px solid rgb(var(--tint) / .6);
  background:
    linear-gradient(rgb(var(--tint)), rgb(var(--tint))) 50% 50% / 8px 1px no-repeat,
    linear-gradient(rgb(var(--tint)), rgb(var(--tint))) 50% 50% / 1px 8px no-repeat;
  opacity: .75; transition: transform .25s ease, opacity .2s;
}
.tag[data-more] .card:hover .more { transform: rotate(90deg); opacity: 1; }
html.cards .tag[data-more] .card .more { top: 12px; right: 12px; }

.sheet-scrim {
  position: fixed; inset: 0; z-index: 30; background: rgb(1 6 6 / .55);
  opacity: 0; visibility: hidden; transition: opacity .3s ease, visibility 0s linear .3s;
}
.sheet-scrim.open { opacity: 1; visibility: visible; transition: opacity .3s ease, visibility 0s; }
.sheet {
  position: fixed; top: 0; right: 0; bottom: 0; z-index: 31;
  width: min(560px, 100vw); overflow: auto; overscroll-behavior: contain;
  background: linear-gradient(180deg, #06191a, #04100f 40%);
  border-left: 1px solid rgb(95 227 201 / .25);
  box-shadow: -30px 0 80px rgb(0 0 0 / .55);
  transform: translate3d(102%, 0, 0); visibility: hidden;
  transition: transform .42s cubic-bezier(.2, .8, .2, 1), visibility 0s linear .42s;
}
.sheet.open { transform: none; visibility: visible; transition: transform .42s cubic-bezier(.2, .8, .2, 1), visibility 0s; }
.sheet-top { position: sticky; top: 0; z-index: 2; display: flex; justify-content: flex-end; gap: 8px; padding: 14px 16px; background: linear-gradient(#06191a, rgb(6 25 26 / 0)); }
.sheet .flow { padding: 0 22px 40px; background: none; z-index: auto; }
.sheet .flow .rv { opacity: 1 !important; transform: none !important; animation: none !important; }
.sheet .flow article { margin: 0; }
.sheet-go { display: inline-flex; margin: 18px 0 0; }
.sheet-go a {
  font: 500 12px/1 var(--mono); letter-spacing: .14em; text-transform: uppercase; color: var(--bg); text-decoration: none;
  background: var(--teal); border-radius: 999px; padding: 12px 16px; transition: background-color .2s;
}
.sheet-go a:hover, .sheet-go a:focus-visible { background: #8ff0dc; }
@media (max-width: 640px) {
  .sheet { top: auto; width: 100vw; max-height: 86vh; border-left: 0; border-top: 1px solid rgb(95 227 201 / .25); border-radius: 16px 16px 0 0; transform: translate3d(0, 102%, 0); }
}

/* ---------- the village gates: on the held last frame each pin becomes a gate you can open ---------- */
.gate {
  position: absolute; left: 50%; top: 100%; width: 92px; height: 64px; margin: 10px 0 0 -46px;
  border: 0; padding: 0; background: none; cursor: pointer; perspective: 400px;
  opacity: 0; transform: translate3d(0, 10px, 0) scale(.9); pointer-events: none;
  transition: opacity .5s ease, transform .6s cubic-bezier(.2, .8, .2, 1);
}
.stage.hold .gate { opacity: 1; transform: none; pointer-events: auto; }
.gate::before { /* the warm light behind the doors */
  content: ""; position: absolute; inset: 4px 8px 0; border-radius: 30px 30px 2px 2px;
  background: radial-gradient(ellipse at 50% 70%, #ffd9a0, #ff9a3c 45%, rgb(255 120 40 / 0) 75%);
  opacity: .25; transition: opacity .5s ease;
}
.gate i {
  position: absolute; top: 0; bottom: 0; width: 50%;
  background:
    linear-gradient(90deg, rgb(0 0 0 / .35), transparent 30%, transparent 70%, rgb(0 0 0 / .35)),
    repeating-linear-gradient(90deg, rgb(0 0 0 / .25) 0 1px, transparent 1px 11px),
    url("assets/ui/wood-plank.webp") center / cover, #4a2e18;
  border: 1px solid rgb(255 179 92 / .45);
  box-shadow: inset 0 0 0 2px rgb(0 0 0 / .25), 0 0 14px rgb(255 160 60 / .25);
  transition: transform .7s cubic-bezier(.3, .7, .2, 1);
}
.gate i::after { /* iron band */
  content: ""; position: absolute; left: 0; right: 0; top: 38%; height: 5px;
  background: linear-gradient(#5a4a3a, #2b231b); box-shadow: 0 0 0 1px rgb(0 0 0 / .4);
}
.gate .l { left: 0; border-radius: 30px 0 0 2px; transform-origin: 0 50%; }
.gate .r { right: 0; border-radius: 0 30px 2px 0; transform-origin: 100% 50%; }
.gate:hover .l, .gate:focus-visible .l { transform: rotateY(-18deg); }
.gate:hover .r, .gate:focus-visible .r { transform: rotateY(18deg); }
.gate.open .l { transform: rotateY(-108deg); }
.gate.open .r { transform: rotateY(108deg); }
.gate.open::before, .gate:hover::before { opacity: 1; }
/* sized and angled to the doorway it sits in, in the clip's own pixels */
.gate.door {
  left: var(--x); top: var(--y); width: var(--w); height: var(--h); margin: 0;
  translate: -50% -50%; rotate: y var(--ry);
}
.gate.door i { border-radius: 0; }
.gate.door .l { border-radius: calc(var(--w) * .5) 0 0 0; }
.gate.door .r { border-radius: 0 calc(var(--w) * .5) 0 0; }
.gate.door::after { /* a slow ember outline: this one opens */
  content: ""; position: absolute; inset: -4px; border-radius: calc(var(--w) * .55) calc(var(--w) * .55) 3px 3px;
  box-shadow: 0 0 0 1px rgb(255 179 92 / .8), 0 0 18px rgb(255 160 60 / .55);
  opacity: 0; animation: door-call 2.4s ease-in-out infinite; pointer-events: none;
}
.stage:not(.hold) .gate.door::after { animation: none; }
.gate.door.open::after { animation: none; opacity: 0; }
@keyframes door-call { 50% { opacity: 1; } }
html.cards .gate.door { display: none; }   /* phones see a sliver of the frame: the cards stay tappable */

@media (prefers-reduced-motion: reduce) {
  .wm span, .wm-sub { animation: none; opacity: 1; transform: none; }
  .gate i { transition: none; }
  .gate.door::after { animation: none; opacity: .8; }
}

/* ---------- phones: the card rail ----------
   A portrait screen sees a sliver of the frame, so instead of pinning cards to objects, every card the
   scene has revealed so far sits in one swipeable strip along the bottom (ui.js moves them into .rail).
   The newest card scrolls into view as it arrives. */
.rail { display: none; }
html.cards .rail {
  position: absolute; left: 0; right: 0; bottom: 0; z-index: 6;
  display: flex; gap: 10px; align-items: flex-end;
  overflow-x: auto; overscroll-behavior-x: contain; scroll-snap-type: x mandatory;
  padding: 40px 16px calc(16px + env(safe-area-inset-bottom));
  background: linear-gradient(0deg, rgb(2 8 8 / .72), rgb(2 8 8 / 0));
  scrollbar-width: none; -webkit-overflow-scrolling: touch;
}
html.cards .rail::-webkit-scrollbar { display: none; }
html.cards .rail .tag {
  position: relative; left: auto; top: auto; bottom: auto; translate: none;
  flex: 0 0 min(78vw, 330px); width: auto; scroll-snap-align: center;
  display: none;
}
html.cards .rail .tag.in, html.cards .rail .tag.seen { display: block; opacity: 1 !important; visibility: visible !important; }
html.cards .rail .tag .card { opacity: 1; transform: none; }
html.cards .rail .tag:only-child { flex-basis: calc(100vw - 32px); }
html.cards .rail .card p { font-size: 15px; }
html.cards .rail .card h3 { font-size: 22px; }
html.cards .rail .tag.flag .card h3 { font-size: 24px; }
/* a count of how many there are to swipe through */
html.cards .rail-dots { position: absolute; left: 0; right: 0; bottom: calc(6px + env(safe-area-inset-bottom)); z-index: 7; display: flex; justify-content: center; gap: 5px; pointer-events: none; }
html.cards .rail-dots i { width: 5px; height: 5px; border-radius: 50%; background: rgb(234 244 239 / .35); }
html.cards .rail-dots i.on { background: var(--teal); }
html:not(.cards) .rail-dots { display: none; }