/* Only the Ink landing page loads this stylesheet. */

/* Inter, the face of the site one click away. style.css names it but nothing
   loaded it, so the landing fell back to Segoe UI or Arial. These are the Next
   app's own self-hosted latin files (variable weight). Declared here, not in
   style.css, so the runner page (index.html) is left as it was. */
@font-face {
  font-family: Inter;
  font-style: normal;
  font-weight: 100 900;
  font-display: swap;
  src: url(./assets/inter-latin.woff2) format("woff2");
}
@font-face {
  font-family: Inter;
  font-style: italic;
  font-weight: 100 900;
  font-display: swap;
  src: url(./assets/inter-latin-italic.woff2) format("woff2");
}

/* The autoplay prompt belongs to the intro, while the header and its sound
   button are hidden. When the intro ended without a click it slid down onto
   the two exits ("lau[Sound on]ard"); from there the header's button takes
   over. !important because [hidden] toggles the prompt with !important. */
.ink-home:not(.intro-playing) .sound-prompt { display: none !important; }
/* the header button's speaker (main.js updateSoundLabel), struck through when
   off, so "Sound off" reads as the state it is */
.ink-home #sound { display: inline-flex; align-items: center; justify-content: center; gap: 8px; }
.ink-home #sound svg { flex: none; width: 17px; height: 17px; }

/* the only two ways into the site were the smallest things on screen */
.ink-home #outro-links .link-pill { font-size: 15px; padding: 14px 24px; }
.ink-home .home-analytics {
  position: fixed;
  z-index: 4;
  top: calc(var(--cinema, 1) * 12vh + 105px);
  left: 50%;
  transform: translateX(-50%);
  width: min(740px, calc(100% - 48px));
  pointer-events: none;
  text-align: center;
  transition: opacity 1.2s ease, visibility 1.2s;
}
.ink-home.intro-playing .home-analytics {
  opacity: 0;
  visibility: hidden;
}
@media (prefers-reduced-motion: reduce) {
  .ink-home .home-analytics { transition: none; }
}
.ink-home .home-analytics dl {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  margin: 0;
  padding: 20px 12px;
  border: 1px solid rgba(255, 255, 255, .13);
  border-top-color: rgba(255, 255, 255, .28);
  border-radius: 24px;
  background: linear-gradient(130deg, rgba(255, 255, 255, .045), rgba(255, 255, 255, .008));
  backdrop-filter: blur(9px);
  -webkit-backdrop-filter: blur(9px);
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, .06), 0 0 40px rgba(113, 50, 245, .12);
}
.ink-home .home-analytics dl > div { min-width: 0; padding: 0 10px; }
.ink-home .home-analytics dl > div + div { border-left: 1px solid rgba(255, 255, 255, .12); }
.ink-home .home-analytics dt { color: rgba(255, 255, 255, .96); font-size: 13px; letter-spacing: .025em; text-shadow: 0 0 8px rgba(230, 214, 255, .7), 0 0 18px rgba(160, 110, 255, .45); }
.ink-home .home-analytics dd {
  margin: 9px 0 0;
  font-size: clamp(26px, 3.5vw, 44px);
  font-weight: 650;
  letter-spacing: -.055em;
  line-height: 1.15;
  font-variant-numeric: tabular-nums;
  color: #fff;
  text-shadow:
    0 0 4px rgba(255, 255, 255, .85),
    0 0 14px rgba(214, 184, 255, .75),
    0 0 32px rgba(140, 80, 255, .6),
    0 0 60px rgba(113, 50, 245, .4);
}
.ink-home #analytics-status { margin: 10px 0 0; font-size: 11px; color: rgba(255,255,255,.92); text-shadow: 0 0 8px rgba(214, 184, 255, .6), 0 1px 8px #080210; }
.ink-home #outro-links .featured { background: rgba(255,255,255,.13); border-color: rgba(255,255,255,.45); box-shadow: inset 0 1px 0 #ffffff20, 0 0 25px #ffffff0d; }
.ink-home #outro-links .link-pill { backdrop-filter: blur(18px); -webkit-backdrop-filter: blur(18px); }
.ink-home.scene-unavailable header,.ink-home.scene-unavailable footer { opacity: 1; visibility: visible; }
.ink-home.scene-unavailable .cinema-bar,.ink-home.scene-unavailable #skip-intro { display: none; }
@media (max-width:650px) {
  .ink-home .home-analytics { top: calc(var(--cinema, 1) * 12vh + 90px); width: calc(100% - 28px); }
  .ink-home .home-analytics dl { padding: 17px 3px; border-radius: 20px; }
  .ink-home .home-analytics dl > div { padding: 0 5px; }
  .ink-home .home-analytics dt { font-size: 10px; letter-spacing: 0; }
  .ink-home .home-analytics dd { font-size: clamp(21px, 6vw, 32px); margin-top: 8px; }
  .ink-home #outro-links { top: auto; bottom: calc(100px + env(safe-area-inset-bottom)); }
  .ink-home #outro-links .link-pill { justify-content: center; min-height: 44px; font-size: 14px; padding: 12px 18px; }
  .ink-home footer { padding-bottom: max(22px, env(safe-area-inset-bottom)); }
}
@media (max-height:500px) and (min-width:651px) {
  .ink-home .home-analytics { top: 85px; width: min(600px, calc(100% - 48px)); }
  .ink-home .home-analytics dl { padding: 12px; }
  .ink-home .home-analytics dd { font-size: 28px; }
}
@supports not ((backdrop-filter: blur(1px)) or (-webkit-backdrop-filter: blur(1px))) {
  .ink-home .home-analytics dl { background: rgba(25, 13, 44, .55); }
}

/* the landing drops replay, pause and the drag hint: links centred, one
   camera button alone in the corner */
.ink-home footer { justify-content: center; }
.ink-home .bottom-controls { position: absolute; right: 42px; bottom: 30px; }
@media (max-width:650px) {
  .ink-home .bottom-controls { right: 22px; bottom: max(22px, env(safe-area-inset-bottom)); }
}