/* SAMPLE film, cinema pass: the route atlas becomes a tilted map table with a camera that follows the
   work, Lass's scout drone flies the route node to node, each arrival pings, and the approval chapter
   waits for the viewer's own tap. Transform, opacity and offset-distance only. Reduced motion keeps the
   table still and the scout parked at its chapter. */

.hero-film .film-viewport { perspective: 900px; }

.hero-film .film-atlas {
  --cam-x: 14%;
  transform-origin: 50% 62%;
  transform: rotateX(28deg) scale(1.32) translate3d(var(--cam-x), 2%, 0);
  transition: transform 1.4s var(--ease);
}
.hero-film[data-chapter="1"] .film-atlas { --cam-x: 7%; }
.hero-film[data-chapter="2"] .film-atlas { --cam-x: 0%; }
.hero-film[data-chapter="3"] .film-atlas { --cam-x: -7%; }
.hero-film[data-chapter="4"] .film-atlas { --cam-x: -13%; }

/* Scout: Lass's drone rides the same route the line draws. */
.atlas-scout {
  offset-path: path("M40 150C70 136 92 120 120 112S170 100 200 96S250 76 280 64S330 40 360 34");
  offset-distance: 0%;
  offset-rotate: 0deg;
  transition: offset-distance 1.3s var(--ease);
  --c: var(--film-accent, #4af0e0);
}
.hero-film[data-chapter="1"] .atlas-scout { offset-distance: 26%; }
.hero-film[data-chapter="2"] .atlas-scout { offset-distance: 50%; }
.hero-film[data-chapter="3"] .atlas-scout { offset-distance: 75%; --c: #ffca6f; }
.hero-film[data-chapter="4"] .atlas-scout { offset-distance: 100%; --c: #34d399; }
.atlas-scout-glow { fill: var(--c); opacity: .45; }
@supports not (offset-path: path("M0 0")) {
  .atlas-scout { display: none; }
}

.atlas-pings circle {
  fill: none;
  stroke: var(--film-accent, #4af0e0);
  stroke-width: 1.5;
  vector-effect: non-scaling-stroke;
  opacity: 0;
  transform-box: fill-box;
  transform-origin: center;
}
.hero-film[data-chapter="3"] .atlas-pings circle { stroke: #ffca6f; }
.hero-film[data-chapter="4"] .atlas-pings circle { stroke: #34d399; }

/* Personalise first: one tap themes the story to the viewer's business and starts it. */
.film-quickpick {
  position: absolute;
  z-index: 4;
  top: 78px;
  left: 16px;
  max-width: 46%;
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: .4rem;
}
.film-quickpick span {
  margin-right: .15rem;
  color: #c9d6e2;
  font-size: .72rem;
  font-weight: 700;
}
.film-quickpick button {
  min-height: 36px;
  padding: 0 .85rem;
  border: 1px solid rgba(255, 255, 255, .2);
  border-radius: 999px;
  background: rgba(4, 10, 14, .66);
  color: #f4f8ff;
  font: 650 .78rem/1 var(--font-sans, inherit);
  cursor: pointer;
  transition: border-color .18s, background-color .18s, transform .18s var(--ease);
}
.film-quickpick button:hover { border-color: var(--film-accent, #69e2dd); background: rgba(4, 10, 14, .82); }
.film-quickpick button:active { transform: scale(.97); }
.film-quickpick button:focus-visible { outline: 2px solid var(--film-accent, #69e2dd); outline-offset: 2px; }
.hero-film[data-playing="true"] .film-quickpick,
.hero-film[data-film-armed="true"] .film-quickpick { display: none; }
@media (max-width: 900px) {
  .film-quickpick { top: 60px; left: 12px; right: 12px; max-width: none; flex-wrap: nowrap; }
  .film-quickpick span,
  .film-quickpick button:nth-of-type(4) { display: none; }
  .film-quickpick button { min-height: 40px; }
  .hero-film:not([data-film-armed="true"]) .film-copy { padding-top: 7.6rem; }
}

/* The approval chapter asks the viewer. Approve moves the story on; otherwise it continues itself. */
.film-gate-approve {
  grid-template-columns: minmax(0, 1fr) auto;
  grid-template-areas: "label go" "text go" "bar bar";
  row-gap: .25rem;
}
.film-gate-approve > span { grid-area: label; }
.film-gate-approve > strong { grid-area: text; }
.film-gate-approve > .film-gate-bar { grid-area: bar; }
.film-gate-receipt span { margin-right: .5rem; }
.film-gate-go {
  grid-area: go;
  align-self: center;
  min-height: 40px;
  padding: 0 1.1rem;
  border: 0;
  border-radius: 999px;
  background: #ffca6f;
  color: #1a1204;
  font: 800 .82rem/1 var(--font-sans, inherit);
  letter-spacing: .02em;
  cursor: pointer;
  transition: transform .16s var(--ease), filter .16s;
}
.film-gate-go:hover { filter: brightness(1.08); }
.film-gate-go:active { transform: scale(.96); }
.film-gate-go:focus-visible { outline: 2px solid #ffe2a8; outline-offset: 3px; }

@media (prefers-reduced-motion: no-preference) {
  .hero-film[data-chapter="1"] .atlas-pings [data-ping="1"],
  .hero-film[data-chapter="2"] .atlas-pings [data-ping="2"],
  .hero-film[data-chapter="3"] .atlas-pings [data-ping="3"] { animation: atlasPing 1.3s .95s ease-out both; }
  .hero-film[data-chapter="4"] .atlas-pings [data-ping="4"] { animation: atlasPing 1.3s .95s ease-out 2 both; }
  .hero-film[data-chapter="0"][data-playing="true"] .atlas-pings [data-ping="0"] { animation: atlasPing 1.3s .2s ease-out both; }
  .atlas-scout-body { animation: scoutHover 2.6s ease-in-out infinite; }
  .hero-film[data-playing="true"][data-chapter="3"] .film-gate-go { animation: approveCall 1.6s ease-in-out infinite; }
  .hero-film[data-viewer-approved="true"] .film-end-cta { animation: endUnlock 1.1s var(--ease) both; }
}

@keyframes atlasPing {
  0% { opacity: .9; transform: scale(1); }
  100% { opacity: 0; transform: scale(4.2); }
}
@keyframes scoutHover {
  0%, 100% { transform: translateY(0); }
  50% { transform: translateY(-2.5px); }
}
@keyframes approveCall {
  0%, 100% { box-shadow: 0 0 0 0 rgba(255, 202, 111, .55); }
  70% { box-shadow: 0 0 0 10px rgba(255, 202, 111, 0); }
}
@keyframes endUnlock {
  0% { box-shadow: 0 0 0 0 rgba(52, 211, 153, .6); transform: translateY(6px); opacity: 0; }
  40% { opacity: 1; }
  100% { box-shadow: 0 0 0 18px rgba(52, 211, 153, 0); transform: none; }
}

@media (prefers-reduced-motion: reduce) {
  .hero-film .film-atlas,
  .atlas-scout { transition: none; }
}