/* /desktop: "the night the internet went out", told by the scroll (story.js).
   Without JS, or with reduced motion, this is a still picture of the end of the story with every caption listed:
   night, the answer with its source, the wise old boar, the file indexed. story.js adds .is-live: then the section
   is tall, the stage sticks to the viewport, and the scroll position drives everything through CSS variables. */

.story {
  --dark: 1;            /* 0 dusk -> 1 night */
  --scene-ink: #f6eedd;
  position: relative;
  color: var(--scene-ink);
  background: #0d1512;
  overflow: clip;
}
/* The hero above ends in the site's night green: the dusk sky fades in from it instead of starting on a hard edge. */
.story::before { content: ""; position: absolute; z-index: 1; top: 0; left: 0; right: 0; height: 180px; background: linear-gradient(#0f1d19, rgba(15, 29, 25, 0)); pointer-events: none; }
.story-stage {
  position: relative;
  min-height: 640px;
  display: grid;
  grid-template-columns: minmax(0, 5fr) minmax(0, 8fr);
  align-items: center;
  gap: clamp(20px, 4vw, 56px);
  padding: clamp(48px, 7vh, 88px) max(24px, calc((100vw - 1200px) / 2)) 150px;
  isolation: isolate;
}

/* ---- sky and ground --------------------------------------------------------------------------------------- */
.sky, .sky i { position: absolute; inset: 0; z-index: -2; }
.sky { background: linear-gradient(180deg, #2f5a63 0%, #6f7d6a 55%, #c4844c 100%); }
.sky .night { background: linear-gradient(180deg, #070c0b 0%, #0d1714 60%, #16221c 100%); opacity: var(--dark); }
.sky .stars {
  opacity: calc(var(--dark) * 0.9);
  background-image:
    radial-gradient(1.5px 1.5px at 12% 18%, #fff8 50%, transparent 51%), radial-gradient(1px 1px at 27% 9%, #fff7 50%, transparent 51%),
    radial-gradient(1.5px 1.5px at 41% 23%, #fff6 50%, transparent 51%), radial-gradient(1px 1px at 58% 12%, #fff8 50%, transparent 51%),
    radial-gradient(1.5px 1.5px at 73% 28%, #fff5 50%, transparent 51%), radial-gradient(1px 1px at 86% 8%, #fff8 50%, transparent 51%),
    radial-gradient(1px 1px at 93% 35%, #fff6 50%, transparent 51%), radial-gradient(1.5px 1.5px at 6% 40%, #fff5 50%, transparent 51%),
    radial-gradient(1px 1px at 35% 38%, #fff4 50%, transparent 51%), radial-gradient(1px 1px at 66% 42%, #fff5 50%, transparent 51%);
}
.sky .moon {
  inset: auto;
  top: 9%;
  right: 9%;
  width: 46px;
  height: 46px;
  border-radius: 50%;
  background: radial-gradient(circle at 40% 40%, #fdf6e3, #d9d2bf);
  box-shadow: 0 0 40px 10px rgba(253, 246, 227, 0.18);
  opacity: var(--dark);
  transform: translateY(calc((1 - var(--dark)) * 60px));
}
.ground { position: absolute; left: 0; right: 0; bottom: 0; height: 150px; z-index: -1; pointer-events: none; }
.ground img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; object-position: center bottom; }
.ground .day { opacity: calc(1 - var(--dark)); }
.ground .nite { opacity: var(--dark); }

/* ---- captions ----------------------------------------------------------------------------------------------- */
.story-captions { position: relative; z-index: 2; }
.story .cap { margin: 0 0 22px; font: 600 clamp(20px, 1.2vw + 12px, 28px)/1.25 var(--sans); text-wrap: balance; }
.story .cap small { display: block; margin-bottom: 8px; font: 600 12px/1 var(--mono); letter-spacing: 0.14em; text-transform: uppercase; color: #ffc15e; }
.story .cap em { font-family: var(--serif); font-style: italic; color: #ffc15e; }
.story .cap .btn { margin-top: 18px; font-size: 16px; }
.story-scroll { display: none; }

/* ---- the laptop and the app on its screen --------------------------------------------------------------------- */
.laptop { position: relative; z-index: 1; width: 100%; max-width: 720px; justify-self: center; }
.laptop .lid { background: #1b1a1f; border-radius: 14px 14px 6px 6px; padding: 12px; box-shadow: 0 30px 60px -20px rgba(0, 0, 0, 0.6); }
.laptop .base { height: 14px; margin: 0 -6%; background: linear-gradient(#3a3940, #232228); border-radius: 0 0 18px 18px; position: relative; }
.laptop .base::after { content: ""; position: absolute; left: 42%; right: 42%; top: 0; height: 5px; background: #17161b; border-radius: 0 0 8px 8px; }
.app { position: relative; aspect-ratio: 16 / 10; overflow: hidden; border-radius: 4px; background: #1c1511; color: #f3e6d4; font: 14px/1.4 var(--sans); display: flex; flex-direction: column; }
.app-top { display: flex; align-items: center; gap: 8px; padding: 9px 14px; border-bottom: 1px solid #33261c; }
.app-top img { width: 24px; height: 24px; }
.app-top b { font-size: 15px; letter-spacing: 0.02em; }
.pill { font: 700 10px/1 var(--mono); letter-spacing: 0.08em; padding: 4px 7px; border-radius: 5px; border: 1px solid #b38a2c; color: #f0c45a; background: #3a2d13; }
.pill .off { display: none; }
.story.is-offline .pill { border-color: #6e5b4b; color: #d8c8b6; background: #2a201a; }
.story.is-offline .pill .on { display: none; }
.story.is-offline .pill .off { display: inline; }
.wifi { margin-left: auto; width: 22px; height: 22px; color: #f3e6d4; }
.wifi path { transition: opacity 0.25s; }
.wifi .x { opacity: 0; stroke: #ff7a3d; }
.story[data-bars="2"] .wifi .b3, .story[data-bars="1"] .wifi .b3, .story[data-bars="1"] .wifi .b2,
.story[data-bars="0"] .wifi .b3, .story[data-bars="0"] .wifi .b2, .story[data-bars="0"] .wifi .b1 { opacity: 0.18; }
.story[data-bars="0"] .wifi .x { opacity: 1; }

.app-body { flex: 1; padding: 14px 18px; display: flex; flex-direction: column; gap: 12px; min-height: 0; }
.empty { display: none; }
.story.is-live:not(.has-question) .empty { display: flex; position: absolute; inset: 44px 0 56px; flex-direction: column; align-items: center; justify-content: center; gap: 4px; text-align: center; }
.empty img { width: 56px; height: 56px; }
.empty span { color: #ff8a4c; font-size: 12px; }
.msg { max-width: 82%; border-radius: 12px; padding: 9px 13px; }
.msg small { display: block; font-weight: 700; font-size: 11px; color: #f0b35a; margin-bottom: 3px; }
.msg p { margin: 0; }
.msg.you { align-self: flex-end; background: #34261c; }
.msg.boar { align-self: flex-start; border: 1px solid #45352a; }
.msg.boar small { color: #ff8a4c; }
.src { margin-top: 9px; display: flex; justify-content: space-between; gap: 10px; padding: 6px 10px; border: 1px solid #3a4a6a; border-radius: 6px; background: #111827; font-size: 12px; font-weight: 700; }
.src em { font-style: normal; color: #ff7a3d; }
.meta { margin-top: 7px; font: 600 11px/1 var(--mono); color: #a8957f; }
.lib { margin-top: auto; align-self: flex-start; font: 600 11px/1 var(--mono); color: #c8b49c; letter-spacing: 0.04em; }
.app-input { margin: 0 14px 12px; padding: 9px 14px; border-radius: 999px; border: 1px solid #4a382a; color: #8f7c69; font-size: 13px; }
.toast { position: absolute; right: 12px; bottom: 54px; width: 58%; padding: 10px 12px; border-radius: 8px; background: #2b2b30; color: #eee; box-shadow: 0 12px 30px rgba(0, 0, 0, 0.5); font-size: 12px; display: grid; grid-template-columns: 30px 1fr; gap: 2px 10px; align-items: center; }
.toast img { grid-row: span 2; width: 30px; height: 30px; }
.toast b { font-size: 12px; }

/* ---- the boar beside the laptop, the packs, the watched folder ---------------------------------------------------- */
.mascot { position: absolute; left: -31%; bottom: -10px; width: 30%; aspect-ratio: 1; pointer-events: none; }
.mascot img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: contain; object-position: center bottom; opacity: 0; transform-origin: 50% 100%; filter: drop-shadow(0 14px 16px rgba(0, 0, 0, 0.45)); }
.story[data-stage="1"] .mascot .s1, .story[data-stage="2"] .mascot .s2,
.story[data-stage="3"] .mascot .s3, .story[data-stage="4"] .mascot .s4 { opacity: 1; animation: boar-pop 0.45s var(--ease); }
@keyframes boar-pop { 0% { transform: scale(0.82); } 60% { transform: scale(1.06); } 100% { transform: scale(1); } }
.packs { display: none; }
/* The watched folder: a desktop folder icon in two layers (back, front) with the PDF slipping in between, BOAR's
   badge on it, and its name underneath as a file manager shows it. */
.folder { position: absolute; right: -11%; bottom: 0; width: 17%; aspect-ratio: 120 / 96; pointer-events: none; filter: drop-shadow(0 12px 14px rgba(0, 0, 0, 0.45)); }
.folder svg { position: absolute; inset: 0; width: 100%; height: 100%; }
.folder .badge { position: absolute; right: -7%; bottom: 2%; width: 30%; height: auto; padding: 3%; border-radius: 50%; background: #1c1511; box-shadow: 0 0 0 2px #f2ab3c; }
.folder .label { position: absolute; left: -20%; right: -20%; top: 100%; margin-top: 8px; text-align: center; font: 600 12px/1.2 var(--sans); color: var(--scene-ink); text-shadow: 0 1px 3px rgba(0, 0, 0, 0.7); }
.pdf { position: absolute; left: 25%; width: 44%; aspect-ratio: 3 / 4; bottom: 18%; border-radius: 3px; background: linear-gradient(225deg, #d9d0bf 0 12%, #fbf8f1 12%); box-shadow: 0 2px 6px rgba(0, 0, 0, 0.25); }
.pdf::before { content: ""; position: absolute; top: 22%; left: 14%; right: 14%; height: 34%; background: repeating-linear-gradient(#cfc6b4 0 2px, transparent 2px 6px); }
.pdf b { position: absolute; left: -10%; top: 58%; padding: 2px 4px; border-radius: 2px; background: #d93a2b; color: #fff; font: 800 9px/1 var(--sans); letter-spacing: 0.04em; }

/* Still picture (no JS, reduced motion): the captions are all listed on the left, so the boar sits on the laptop. */
.story:not(.is-live) .mascot { left: 3%; bottom: 100%; width: 22%; }

/* ---- small screens ------------------------------------------------------------------------------------------- */
@media (max-width: 860px) {
  .story-stage { grid-template-columns: minmax(0, 1fr); padding-bottom: 130px; }
  .mascot { left: -2%; bottom: auto; top: -26%; width: 26%; }
  .folder { right: 2%; bottom: auto; top: -22%; width: 15%; }
  .folder .label { font-size: 10px; margin-top: 4px; }
  .app { font-size: 11px; aspect-ratio: 4 / 5; }
  .sky .moon { top: auto; bottom: 150px; right: 7%; width: 34px; height: 34px; }
  .app-top b { font-size: 12px; }
  .msg small, .src, .toast, .toast b { font-size: 10px; }
  .meta, .lib, .pill { font-size: 9px; }
  .app-input { font-size: 10px; }
}

/* ---- live: the section is tall, the stage sticks, story.js sets the variables ---------------------------------------- */
.story.is-live { height: 560vh; }
.story.is-live .story-stage { position: sticky; top: 0; height: 100vh; height: 100svh; min-height: 0; overflow: hidden; }
.story.is-live .story-captions { min-height: 9em; }
.story.is-live .cap { position: absolute; inset: 0 0 auto 0; opacity: 0; transform: translateY(14px); transition: opacity 0.4s var(--ease), transform 0.4s var(--ease); pointer-events: none; }
.story.is-live .cap.on, .story.is-live .cap:focus-within { opacity: 1; transform: none; pointer-events: auto; }
.story.is-live .story-scroll { display: flex; position: absolute; left: 50%; bottom: 158px; translate: -50% 0; gap: 8px; align-items: center; font: 600 12px/1 var(--mono); letter-spacing: 0.1em; text-transform: uppercase; color: #f6eeddb0; transition: opacity 0.3s; }
.story.is-live .story-scroll::after { content: "↓"; animation: nudge 1.6s ease-in-out infinite; }
.story.is-live:not([data-ch="0"]) .story-scroll { opacity: 0; }
@keyframes nudge { 50% { transform: translateY(4px); } }
.story.is-live .msg.you, .story.is-live .msg.boar, .story.is-live .src, .story.is-live .meta, .story.is-live .toast { transition: opacity 0.3s var(--ease), transform 0.3s var(--ease); }
.story.is-live:not(.has-question) .msg.you,
.story.is-live:not(.has-answer) .msg.boar { opacity: 0; transform: translateY(8px); }
.story.is-live:not(.has-source) .src, .story.is-live:not(.has-source) .meta { opacity: 0; }
.story.is-live:not(.has-toast) .toast { opacity: 0; transform: translateY(10px); }
.story.is-live .packs { display: block; position: absolute; inset: 0; pointer-events: none; z-index: 3; }
.story.is-live .packs img { position: absolute; left: 0; top: 0; width: clamp(84px, 10vw, 150px); opacity: 0; will-change: transform, opacity; filter: drop-shadow(0 12px 14px rgba(0, 0, 0, 0.45)); }
.story.is-live .pdf { will-change: transform, opacity; }