/* Tour films (js/ui/cinema.js). Night palette from the solar/cosmos atlases;
   everything animated is gated by prefers-reduced-motion. */
body.film-open { overflow: hidden; }
.film {
  --night: #15111F; --ink-night: #FBF6EC; --muted-night: rgba(251, 246, 236, .66); --bar: 7vh;
  position: fixed; inset: 0; z-index: 90; overflow: hidden; background: var(--night); color: var(--ink-night);
  opacity: 0; transition: opacity .5s ease;
}
.film.is-open { opacity: 1; }
.film.is-out { opacity: 0; pointer-events: none; }

.film__stars, .film__map { position: absolute; inset: 0; width: 100%; height: 100%; display: block; }
.film__stars { opacity: 0; transition: opacity 1.2s ease; }
.film.is-space .film__stars { opacity: 1; }
.film__map { transition: opacity 1.2s ease; cursor: pointer; }
.film.is-space .film__map { opacity: .08; }
.film__sea { fill: #1C2433; }
.film__sphere { fill: #22304A; stroke: rgba(251, 246, 236, .12); stroke-width: 1; vector-effect: non-scaling-stroke; }
.film__layer { opacity: 0; transition: opacity .9s ease; }
.film__layer.is-in { opacity: 1; }
.film__layer.is-out { opacity: 0; }
.film__land { fill: #E9DCC0; stroke: #B8A47E; stroke-width: .6; vector-effect: non-scaling-stroke; }
.film__land--paleo { fill: #D9C39A; }
.film__polity { fill: var(--f); fill-opacity: .72; stroke: rgba(26, 18, 12, .45); stroke-width: .6; vector-effect: non-scaling-stroke; }
.film__polity.is-approx { stroke-dasharray: 3 3; fill-opacity: .5; }
.film__arc { fill: none; stroke: #F3D9A4; stroke-width: 2; stroke-linecap: round; vector-effect: non-scaling-stroke; opacity: 0; filter: drop-shadow(0 0 4px rgba(243, 217, 164, .8)); }
.film__arc.is-on { opacity: .9; }
.film__traveller circle { fill: #FFE6A8; filter: drop-shadow(0 0 6px #FFE6A8); }
.film__traveller { transition: opacity .3s; }
.film__pin { --c: #E3A23B; }
.film__dot { fill: var(--c); stroke: #FBF6EC; stroke-width: 2; vector-effect: non-scaling-stroke; }
.film__ripple { fill: none; stroke: var(--c); stroke-width: 2; vector-effect: non-scaling-stroke; transform-box: fill-box; transform-origin: center; opacity: 0; }

.film__vignette { position: absolute; inset: 0; pointer-events: none; background: radial-gradient(120% 90% at 50% 45%, transparent 55%, rgba(10, 8, 16, .75) 100%); }
.film__bar { position: absolute; left: 0; right: 0; height: var(--bar); background: #07060B; z-index: 3; transform: scaleY(0); transition: transform .9s var(--ease-out, cubic-bezier(.2, .8, .2, 1)); pointer-events: none; }
.film__bar--top { top: 0; transform-origin: top; }
.film__bar--bottom { bottom: 0; transform-origin: bottom; }
.film.is-open .film__bar { transform: none; }

.film__top { position: absolute; z-index: 4; top: 0; left: 0; right: 0; height: var(--bar); display: flex; align-items: center; gap: 16px; padding: 0 clamp(14px, 3vw, 32px); }
.film__tour { display: grid; line-height: 1.1; min-width: 0; }
.film__tour .nasha-eyebrow { color: var(--color-peach, #F3B98F); font-size: 10px; }
.film__tour b { font-family: var(--font-display); font-weight: 600; font-size: clamp(14px, 1.6vw, 18px); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.film__count { margin-left: auto; color: var(--muted-night); }
.film__close, .film__controls button {
  border: 1px solid rgba(251, 246, 236, .28); background: rgba(21, 17, 31, .55); color: var(--ink-night);
  border-radius: 999px; min-width: 40px; height: 40px; padding: 0 14px; cursor: pointer; font-size: 15px;
  transition: background .2s, transform .2s var(--spring, ease), border-color .2s;
}
.film__close:hover, .film__controls button:hover { background: rgba(251, 246, 236, .14); border-color: rgba(251, 246, 236, .6); transform: translateY(-1px); }
.film__close:focus-visible, .film__controls button:focus-visible, .film__strip button:focus-visible { outline: 2px solid #FFE6A8; outline-offset: 2px; }

.film__year {
  position: absolute; z-index: 2; left: clamp(16px, 4vw, 56px); top: calc(var(--bar) + clamp(12px, 3vh, 36px));
  font-family: var(--font-display); font-variation-settings: var(--display-variation); font-weight: 600; font-variant-numeric: tabular-nums;
  font-size: clamp(2.2rem, 7.2vw, 6.4rem); line-height: .95; letter-spacing: -0.02em; color: var(--ink-night);
  text-shadow: 0 4px 40px rgba(10, 8, 16, .8); max-width: 70vw; pointer-events: none;
}
.film__place { position: absolute; z-index: 2; left: clamp(16px, 4vw, 56px); top: calc(var(--bar) + clamp(12px, 3vh, 36px) + clamp(2.6rem, 8vw, 7rem)); color: var(--muted-night); font-size: 11px; pointer-events: none; }

.film__chapter {
  position: absolute; inset: var(--bar) 0; z-index: 3; display: grid; place-content: center; justify-items: center; text-align: center; gap: 14px; padding: 0 24px;
  background: radial-gradient(60% 60% at 50% 50%, rgba(21, 17, 31, .92), rgba(21, 17, 31, .55)); opacity: 0; pointer-events: none; transition: opacity .6s ease;
}
.film__chapter.is-in { opacity: 1; }
.film__chapter .nasha-eyebrow { color: var(--color-peach, #F3B98F); }
.film__chapter h2 { margin: 0; font-family: var(--font-display); font-variation-settings: var(--display-variation); font-weight: 600; font-size: clamp(2.4rem, 8vw, 6rem); line-height: 1; letter-spacing: -0.02em; }
.film__chapter h2 span { display: inline-block; }
.film__chapter p { margin: 0; max-width: 46ch; font-family: var(--font-display); font-style: italic; font-size: clamp(1rem, 2vw, 1.35rem); color: var(--muted-night); }
.film__chapter .mono { color: var(--muted-night); }

.film__card {
  --c: #E3A23B;
  position: absolute; z-index: 2; left: clamp(12px, 4vw, 56px); bottom: calc(var(--bar) + 76px); width: min(620px, calc(100vw - 24px));
  padding: 18px 22px 16px; border-radius: 18px; border-left: 4px solid var(--c);
  background: linear-gradient(180deg, rgba(21, 17, 31, .82), rgba(21, 17, 31, .92)); backdrop-filter: blur(6px); -webkit-backdrop-filter: blur(6px);
  box-shadow: 0 24px 60px rgba(0, 0, 0, .45); opacity: 0; transition: opacity .4s ease;
}
.film__card.is-in { opacity: 1; }
.film__eyebrow { display: flex; align-items: center; gap: 10px; flex-wrap: wrap; color: var(--muted-night); }
.film__eyebrow .mono { font-size: 11px; }
.film__eyebrow .medallion { flex: none; }
.film__cert { font-family: var(--font-mono); font-size: 10px; letter-spacing: .08em; text-transform: uppercase; padding: 3px 8px; border-radius: 999px; background: rgba(232, 164, 160, .2); color: #F5C7C2; }
.film__cert--planned { background: rgba(227, 162, 59, .22); color: #F3D9A4; }
.film__cert--forecast { background: rgba(110, 138, 204, .25); color: #C9D6F5; }
.film__title { margin: 10px 0 8px; font-family: var(--font-display); font-variation-settings: var(--display-variation); font-weight: 600; font-size: clamp(1.5rem, 3.4vw, 2.6rem); line-height: 1.05; letter-spacing: -0.01em; }
.film__title span { display: inline-block; }
.film__text { margin: 0; font-size: clamp(.95rem, 1.4vw, 1.08rem); line-height: 1.5; color: rgba(251, 246, 236, .9); }
.film__why { margin: 10px 0 0; font-size: .92rem; line-height: 1.45; color: var(--muted-night); }
.film__why b { color: #F3D9A4; font-weight: 600; margin-right: 4px; }
.film__where { margin: 10px 0 0; color: var(--muted-night); font-size: 11px; }
.film__era { position: absolute; right: 18px; top: 16px; font-size: 10px; color: var(--muted-night); }

.film__foot { position: absolute; z-index: 4; left: 0; right: 0; bottom: 0; height: calc(var(--bar) + 64px); display: grid; align-content: end; gap: 10px; padding: 0 clamp(12px, 4vw, 56px) calc(10px + env(safe-area-inset-bottom)); pointer-events: none; }
.film__controls { display: flex; gap: 8px; align-items: center; pointer-events: auto; }
.film__play { min-width: 52px !important; font-size: 14px !important; background: #FBF6EC !important; color: #15111F !important; border-color: #FBF6EC !important; }
.film__details { margin-left: auto; font-size: 11px !important; letter-spacing: .08em; text-transform: uppercase; }
.film__strip { list-style: none; margin: 0; padding: 0; display: flex; gap: 3px; pointer-events: auto; }
.film__strip li { flex: 1; --p: 0; }
.film__strip button { display: block; width: 100%; height: 14px; padding: 5px 0; border: 0; background: none; cursor: pointer; }
.film__strip i { display: block; height: 4px; border-radius: 2px; background: rgba(251, 246, 236, .22); overflow: hidden; position: relative; }
.film__strip i::after { content: ''; position: absolute; inset: 0; background: #FBF6EC; transform-origin: left; transform: scaleX(var(--p)); }
.film__strip li.is-done i::after { transform: none; }
.film__strip li.is-now i { background: rgba(251, 246, 236, .35); }
.film.is-paused .film__strip li.is-now i::after { background: #F3D9A4; }
.film.is-end .film__play::after { content: ' Replay'; font-size: 12px; }

@media (max-width: 640px) {
  .film { --bar: 5vh; }
  .film__card { left: 12px; right: 12px; width: auto; bottom: calc(var(--bar) + 70px); padding: 14px 16px; max-height: 46vh; overflow: auto; }
  .film__why, .film__where { display: none; }
  .film__era { display: none; }
  .film__year { font-size: clamp(1.8rem, 10vw, 3rem); }
  .film__details { display: none; }
}

@media (prefers-reduced-motion: no-preference) {
  .film__chapter.is-in h2 span { animation: film-letter .9s var(--ease-out, ease) both; animation-delay: calc(120ms + var(--i) * 32ms); }
  .film__chapter.is-in p, .film__chapter.is-in .mono { animation: film-rise .9s var(--ease-out, ease) .55s both; }
  .film__card.is-in { animation: film-card .7s var(--ease-out, ease) both; }
  .film__card.is-in .film__title span { animation: film-word .7s var(--ease-out, ease) both; animation-delay: calc(140ms + var(--i) * 70ms); }
  .film__card.is-in .film__text { animation: film-rise .8s var(--ease-out, ease) .5s both; }
  .film__card.is-in .film__why, .film__card.is-in .film__where { animation: film-rise .8s var(--ease-out, ease) .9s both; }
  .film__pin:not([hidden]) .film__ripple { animation: film-ripple 2.4s ease-out infinite; }
  .film__pin:not([hidden]) .film__ripple--2 { animation-delay: 1.2s; }
  .film__pin:not([hidden]) .film__dot { animation: film-drop .6s var(--spring, ease) both; transform-box: fill-box; transform-origin: center; }
}
@keyframes film-letter { from { opacity: 0; transform: translateY(.4em) rotate(4deg); filter: blur(8px); } }
@keyframes film-word { from { opacity: 0; transform: translateY(.5em); filter: blur(6px); } }
@keyframes film-rise { from { opacity: 0; transform: translateY(10px); } }
@keyframes film-card { from { opacity: 0; transform: translateY(18px) scale(.98); } }
@keyframes film-ripple { from { opacity: .9; transform: scale(1); } to { opacity: 0; transform: scale(5); } }
@keyframes film-drop { from { opacity: 0; transform: scale(2.4); } }

/* Entry points */
.film-btn::before { content: '▶'; font-size: .8em; margin-right: 6px; }
.tour-card__btns { display: flex; gap: 6px; flex-wrap: wrap; }
.film .mono { color: var(--muted-night); }

/* ---------------------------------------------------------------- Powers of ten (js/ui/powers.js) */
.p10 { position: fixed; inset: 0; z-index: 90; background: #0B0912; color: #FBF6EC; opacity: 0; transition: opacity .45s ease; touch-action: none; }
.p10.is-open { opacity: 1; }
.p10.is-out { opacity: 0; pointer-events: none; }
.p10 canvas { position: absolute; inset: 0; width: 100%; height: 100%; display: block; }
.p10__top { position: absolute; z-index: 2; top: 0; left: 0; right: 0; display: flex; align-items: center; gap: 16px; padding: 14px clamp(14px, 3vw, 32px); }
.p10__title { display: grid; line-height: 1.15; margin-right: auto; }
.p10__title .nasha-eyebrow { color: var(--color-peach, #F3B98F); font-size: 10px; }
.p10__title b { font-family: var(--font-display); font-weight: 600; font-size: clamp(14px, 1.6vw, 18px); }
.p10__read { position: absolute; z-index: 2; left: clamp(16px, 4vw, 56px); top: clamp(70px, 12vh, 110px); max-width: min(460px, calc(100vw - 32px)); pointer-events: none; text-shadow: 0 2px 20px rgba(11, 9, 18, .9); }
.p10__pow { display: block; font-family: var(--font-display); font-weight: 600; font-size: clamp(2.2rem, 6vw, 4.6rem); line-height: 1; font-variant-numeric: tabular-nums; }
.p10__pow sup { font-size: .5em; }
.p10__read b { display: block; margin-top: 10px; font-family: var(--font-display); font-size: clamp(1.2rem, 2.4vw, 1.8rem); }
.p10__read p { margin: 4px 0 8px; color: rgba(251, 246, 236, .78); line-height: 1.45; }
.p10__read .mono { color: rgba(251, 246, 236, .6); font-size: 11px; }
.p10__bar { position: absolute; z-index: 2; right: clamp(16px, 4vw, 56px); top: clamp(74px, 12vh, 112px); display: grid; justify-items: end; gap: 6px; pointer-events: none; }
.p10__bar i { display: block; height: 6px; border: 1px solid rgba(251, 246, 236, .8); border-top: 0; transition: width .2s linear; }
.p10__bar .mono { font-size: 11px; color: rgba(251, 246, 236, .8); }
.p10__foot { position: absolute; z-index: 2; left: 0; right: 0; bottom: 0; display: flex; align-items: center; gap: 12px; padding: 14px clamp(14px, 4vw, 56px) calc(26px + env(safe-area-inset-bottom)); }
.p10__foot input { flex: 1; accent-color: #F3D9A4; }
.p10__foot button { border-radius: 999px; height: 40px; padding: 0 16px; cursor: pointer; border: 1px solid rgba(251, 246, 236, .3); background: rgba(21, 17, 31, .55); color: #FBF6EC; }
.p10__home { font-size: 11px !important; letter-spacing: .08em; text-transform: uppercase; }
.p10__note { position: absolute; z-index: 2; left: 0; right: 0; bottom: 6px; margin: 0; text-align: center; font-size: 9px; color: rgba(251, 246, 236, .45); pointer-events: none; }
.p10-btn { border: 0; border-radius: 999px; padding: 0 14px; cursor: pointer; font: inherit; background: linear-gradient(90deg, #2F74C0, #6D4C8E, #15111F); color: #FBF6EC; }
@media (prefers-reduced-motion: no-preference) {
  .p10__read.is-swap b, .p10__read.is-swap p { animation: film-rise .6s var(--ease-out, ease) both; }
}
@media (max-width: 640px) { .p10__bar { top: auto; bottom: 96px; } }