/*
 * The Lua page, /features/lua/ (DESIGN.md "The Lua page in detail"). Linked from that
 * page only, and every rule starts at its main.lua-page or a lua- class, so nothing here
 * can reach another page. The site's own parts (hero, story, faq, feat-related, the
 * closing band) are drawn by site.css, crux.css and crux-features.css.
 */

.lua-page :focus-visible {
  outline: 2px solid var(--brand);
  outline-offset: 3px;
}

/* ---------- Lua's face, drawn by lua.js (the app's lua-mark.css, copied) ---------- */

.lua-page [data-lua-ghost] {
  display: inline-block;
  flex: none;
  line-height: 0;
}

/* site.css strokes every svg in currentColor, and the pill sizes its own: neither is the ghost. */
.lua-page [data-lua-ghost] svg {
  display: block;
  overflow: visible;
  stroke: none;
}

.lua-page .pill [data-lua-ghost] svg {
  width: 18px;
  height: 18px;
  padding: 0;
  border-radius: 0;
  background: none;
}

.lua-page .lua-ghost-eye {
  fill: #0d1838;
}

.lua-page .lua-ghost-glint {
  fill: #fff;
}

.lua-page .lua-ghost-cheek {
  fill: #ff9f70;
}

.lua-page .lua-ghost-hem-b,
.lua-page .lua-ghost-blink {
  opacity: 0;
}

/* Still, its eyes shut for one beat every 3.4s. */
.lua-page .lua-mark-still .lua-ghost-blink,
.lua-page .lua-mark-perch .lua-ghost-blink {
  animation: lua-ghost-blink 3.4s step-end infinite;
}

@keyframes lua-ghost-blink {
  0% {
    opacity: 0;
  }
  96% {
    opacity: 1;
  }
}

/* Perched, it rises into place from three cells below as the page opens, in whole cells. */
.lua-page .lua-mark-perch .lua-ghost {
  animation: lua-ghost-arrive 900ms steps(3, end) 200ms backwards;
}

@keyframes lua-ghost-arrive {
  from {
    opacity: 0;
    transform: translateY(3px);
  }
}

/* Pointed at, it floats, its loader: rest, up, up, higher, higher, up, up, rest. */
.lua-page .lua-perch:hover .lua-ghost {
  animation: lua-ghost-float 1.2s step-end infinite;
}

.lua-page .lua-perch:hover .lua-ghost-hem-a {
  animation: lua-ghost-hem-a 1.2s step-end infinite;
}

.lua-page .lua-perch:hover .lua-ghost-hem-b {
  animation: lua-ghost-hem-b 1.2s step-end infinite;
}

@keyframes lua-ghost-float {
  0% {
    transform: translateY(0);
  }
  12.5% {
    transform: translateY(-1px);
  }
  37.5% {
    transform: translateY(-2px);
  }
  62.5% {
    transform: translateY(-1px);
  }
  87.5% {
    transform: translateY(0);
  }
}

@keyframes lua-ghost-hem-a {
  0% {
    opacity: 1;
  }
  25% {
    opacity: 0;
  }
  50% {
    opacity: 1;
  }
  75% {
    opacity: 0;
  }
}

@keyframes lua-ghost-hem-b {
  0% {
    opacity: 0;
  }
  25% {
    opacity: 1;
  }
  50% {
    opacity: 0;
  }
  75% {
    opacity: 1;
  }
}

@media (prefers-reduced-motion: reduce) {
  .lua-page [data-lua-ghost],
  .lua-page [data-lua-ghost] * {
    animation: none !important;
  }
}

/* ---------- Hero ---------- */

.lua-page .pill .lua-pill-face {
  margin-right: -4px;
}

.lua-keys {
  margin-top: 26px;
  color: var(--muted);
  font-size: 15px;
}

.lua-page kbd {
  display: inline-grid;
  place-items: center;
  min-width: 22px;
  height: 22px;
  margin: 0 2px;
  padding: 0 6px;
  border: 1px solid var(--line);
  border-bottom-width: 2px;
  border-radius: 6px;
  background: #fff;
  color: var(--ink-2);
  font: 500 12px/1 var(--mono);
  vertical-align: 1px;
}

/* ---------- The hero film, and the ghost perched on its edge ---------- */

.lua-stage {
  position: relative;
  margin-top: 112px;
}

.lua-stage .crux-film {
  position: relative;
  z-index: 1;
}

/* Its head over the frame's top edge, its hem hidden behind the frame. */
.lua-perch {
  position: absolute;
  top: -66px;
  left: 48px;
  z-index: 0;
}

/* Every clip is 16:10, as filmed. */
.lua-page .crux-film video {
  aspect-ratio: 16 / 10;
  object-fit: cover;
}

/* ---------- Try asking ---------- */

.lua-asks {
  text-align: center;
}

.lua-asks ul {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: 12px;
  max-width: 920px;
  margin: 48px auto 0;
  padding: 0;
  list-style: none;
}

.lua-asks li {
  padding: 12px 20px;
  border-radius: 999px;
  background: var(--sheet);
  color: var(--ink);
  font-size: 16px;
  line-height: 1.4;
}

/* ---------- The trust line ---------- */

.lua-trust {
  text-align: center;
}

.lua-trust-line {
  max-width: 860px;
  margin: 0 auto;
  color: var(--ink);
  font: var(--display-weight) clamp(28px, 3.4vw, 44px) / 1.15 var(--display);
  letter-spacing: var(--display-track);
  text-wrap: balance;
}

/* ---------- The way to the MCP server ---------- */

.lua-more {
  margin-top: 40px;
  color: var(--muted);
  font-size: 16px;
  text-align: center;
}

.lua-more a {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  margin-left: 4px;
  color: var(--brand);
  font-weight: 500;
  text-decoration: none;
}

.lua-more svg {
  width: 14px;
  height: 14px;
  stroke-width: 1.8;
  transition: transform 0.2s var(--ease);
}

.lua-more a:hover svg {
  transform: translateX(3px);
}

/* ---------- The closing band: Lua in the mark's place ---------- */

/* On the band's blue the ghost's own blues would sink, so it sits on a white tile, as the
   mark does on other pages, with the mark's shadow. */
.lua-page .lua-band-face {
  position: relative;
  z-index: 1;
  display: grid;
  place-items: center;
  width: 64px;
  height: 64px;
  margin: 0 auto 24px;
  border-radius: 14px;
  background: #fff;
  box-shadow: 0 12px 30px rgb(0 20 50 / 0.35);
}

/* The canvas keeps room above the head to float in; lift it so the ghost sits centred. */
.lua-page .lua-band-face svg {
  margin-top: -6px;
}

/* ---------- Smaller screens ---------- */

@media (max-width: 720px) {
  .lua-stage {
    margin-top: 80px;
  }

  .lua-perch {
    top: -36px;
    left: 24px;
  }

  .lua-perch svg {
    width: 54px;
    height: 54px;
  }

  .lua-asks ul {
    margin-top: 32px;
  }

  .lua-asks li {
    padding: 10px 16px;
    font-size: 15px;
  }
}

/* The underlined line does not wrap, so on a narrow phone the headline steps down to keep
   it inside the gutters (it is about 9.6em wide). */
@media (max-width: 480px) {
  .lua-page .p-hero h1 {
    font-size: clamp(30px, calc((100vw - 32px) / 9.6), 42px);
  }
}

/* ---------- How it works: the clips, closer ----------
   The clips are the whole app at 1600px; at the stage's size its words were too small to read.
   Each is framed closer on its right side, where Lua's panel and what it points at are: the
   window bleeds off the stage's left and bottom edges and the app's own sidebar falls away. */
.lua-page .crux-story-stage {
  overflow: hidden;
}

.lua-page .crux-story-stage .scene {
  inset: 28px 0 0 28px;
}

.lua-page .crux-story-stage .crux-film {
  height: 100%;
  border-right: 0;
  border-bottom: 0;
  border-radius: 14px 0 0;
}

.lua-page .crux-story-stage .crux-film video {
  height: 100%;
}

/* On a phone the story is inline, each clip under its step: framed as close. */
.lua-page #how .crux-film video {
  transform: scale(1.32);
  transform-origin: 100% 40%;
}