/* ============================================================
   The guided film: loader, signature, the question, Jason's
   dialogue with the page as his chalkboard, the close.
   Tokens come from site.css.
   ============================================================ */

/* ---------- Skip link (first tab stop, always) ---------- */
.skip {
  position: fixed; left: 16px; top: 16px; z-index: 200;
  padding: 10px 16px; background: var(--gold); color: var(--lacquer);
  font-size: 12px; letter-spacing: 0.16em; text-transform: uppercase; border-radius: 999px;
  transform: translateY(-200%); transition: transform 0.3s var(--ease);
}
.skip:focus { transform: none; outline: none; }

/* ---------- Shared small controls ---------- */
.jg-skip {
  appearance: none; background: none; border: 0; cursor: pointer; padding: 10px 2px;
  font-family: var(--sans); font-size: 11.5px; font-weight: 500; letter-spacing: 0.22em; text-transform: uppercase; color: var(--ivory-3);
  display: inline-flex; align-items: center; gap: 10px; transition: color 0.35s ease;
}
.jg-skip::after { content: ""; width: 26px; height: 1px; background: currentColor; transform-origin: 0 50%; transition: transform 0.45s var(--ease); }
.jg-skip:hover, .jg-skip:focus-visible { color: var(--gold-2); }
.jg-skip:hover::after { transform: scaleX(1.5); }

.jg-ibtn {
  appearance: none; background: transparent; border: 1px solid var(--line); border-radius: 50%; width: 36px; height: 36px;
  display: grid; place-items: center; color: var(--ivory-2); cursor: pointer;
  transition: border-color 0.35s ease, color 0.35s ease, background-color 0.35s ease;
}
.jg-ibtn:hover, .jg-ibtn:focus-visible { border-color: var(--gold); color: var(--gold-2); background: var(--gold-wash); }
.jg-ibtn svg { width: 15px; height: 15px; }

/* ---------- Screen lock (iOS keeps scrolling through overflow:hidden) ---------- */
html.is-locked, html.is-locked body { overscroll-behavior: none; touch-action: none; }
html.is-locked #jg-loader, html.is-locked #jg-gate, html.is-locked #jg-end { touch-action: manipulation; }
#jg-gate, #jg-end { overscroll-behavior: contain; }

/* ---------- Loader ---------- */
#jg-loader {
  position: fixed; inset: 0; z-index: 90; background: var(--lacquer);
  display: grid; place-items: center; transition: opacity 1s var(--ease-io);
}
#jg-loader.is-done { opacity: 0; pointer-events: none; }
.jg-loader__wrap { position: relative; display: grid; justify-items: center; gap: clamp(22px, 3.4vh, 34px); transition: opacity 0.7s var(--ease-io), transform 0.9s var(--ease-io); }
.jg-loader__wrap.is-out { opacity: 0; transform: scale(0.97); }
.jg-loader__stage { position: relative; width: min(56vw, 380px); aspect-ratio: 1; }
.jg-loader__medallion {
  position: absolute; inset: 7%; border-radius: 50%; overflow: hidden; background: var(--panel-2);
  box-shadow: 0 0 0 1px var(--gold-line-2), 0 60px 120px -40px rgba(0,0,0,0.9);
}
.jg-loader__medallion canvas { width: 100%; height: 100%; display: block; touch-action: none; }
.jg-ring { position: absolute; inset: 0; width: 100%; height: 100%; transform: rotate(-90deg); pointer-events: none; }
.jg-ring__track { fill: none; stroke: var(--line-2); stroke-width: 0.6; }
.jg-ring__progress { fill: none; stroke: var(--gold); stroke-width: 1; stroke-linecap: round; transition: stroke-dashoffset 0.25s linear; }
.jg-loader__pct {
  font-family: var(--serif); font-weight: 500; font-size: clamp(2.4rem, 6vw, 3.6rem); line-height: 1; color: var(--ivory);
  font-variant-numeric: tabular-nums; display: inline-flex; align-items: baseline; gap: 4px;
}
.jg-loader__pct small { font-size: 0.42em; color: var(--gold); letter-spacing: 0.04em; }
.jg-loader__name { font-size: 11px; font-weight: 500; letter-spacing: 0.34em; text-transform: uppercase; color: var(--ivory-3); }
.jg-loader__hint { font-size: 11px; font-weight: 500; letter-spacing: 0.3em; text-transform: uppercase; color: var(--gold-2); opacity: 0; transform: translateY(6px); transition: opacity 0.7s var(--ease), transform 0.7s var(--ease); pointer-events: none; }
#jg-loader.is-hold .jg-loader__hint { opacity: 1; transform: none; animation: jgHint 2.6s ease-in-out 0.7s infinite; }
#jg-loader.is-hold .jg-loader__pct { opacity: 0.35; }
@keyframes jgHint { 0%, 100% { opacity: 0.55; } 50% { opacity: 1; } }
.jg-loader__skip { position: absolute; right: clamp(18px, 3vw, 36px); bottom: clamp(18px, 3vh, 34px); opacity: 0; transition: opacity 0.8s var(--ease) 0.9s; }
#jg-loader.is-ready .jg-loader__skip { opacity: 1; }

/* The signature: a short film after 100 */
.jg-film { position: absolute; inset: 0; opacity: 0; transition: opacity 0.9s var(--ease-io); pointer-events: none; }
.jg-film.is-in { opacity: 1; }
.jg-film video { width: 100%; height: 100%; object-fit: cover; display: block; }
.jg-title { position: absolute; inset: 0; display: grid; place-items: center; text-align: center; opacity: 0; transition: opacity 1s var(--ease-io); pointer-events: none; }
.jg-title.is-in { opacity: 1; }
.jg-title h1 { font-family: var(--serif); font-weight: 500; font-size: clamp(2.2rem, 7vw, 5.4rem); line-height: 1; letter-spacing: 0.01em; color: var(--ivory); transform: translateY(12px); transition: transform 1.2s var(--ease); }
.jg-title.is-in h1 { transform: none; }
.jg-title h1 em { font-style: italic; color: var(--gold); }
.jg-title p { margin-top: 18px; font-size: 11px; letter-spacing: 0.34em; text-transform: uppercase; color: var(--ivory-2); }

/* ---------- The question ---------- */
#jg-gate {
  position: fixed; inset: 0; z-index: 85; background: var(--lacquer);
  display: grid; place-items: center; padding: clamp(20px, 5vw, 64px);
  opacity: 0; transition: opacity 0.9s var(--ease-io); overflow-y: auto;
}
#jg-gate::before { content: ""; position: absolute; inset: 0; pointer-events: none; background: radial-gradient(60% 45% at 50% 20%, rgba(201,166,66,0.06), transparent 70%); }
#jg-gate.is-in { opacity: 1; }
#jg-gate.is-leaving { opacity: 0; pointer-events: none; }
.jg-gate__wrap { position: relative; display: grid; gap: clamp(34px, 6vh, 64px); width: min(100%, 44rem); }
.jg-gate__q {
  font-family: var(--serif); font-weight: 500; font-size: clamp(2rem, 5vw, 3.9rem); line-height: 1.06; letter-spacing: -0.01em; color: var(--ivory); text-wrap: balance;
  opacity: 0; transform: translateY(16px); transition: opacity 1s var(--ease) 0.15s, transform 1.1s var(--ease) 0.15s;
}
.jg-gate__q em { font-style: italic; color: var(--gold); }
#jg-gate.is-in .jg-gate__q { opacity: 1; transform: none; }

.jg-paths { display: grid; border-top: 1px solid var(--line); }
.jg-path {
  --d: 0ms; appearance: none; background: none; border: 0; border-bottom: 1px solid var(--line); text-align: left; cursor: pointer;
  display: grid; grid-template-columns: minmax(0, 1fr) auto; align-items: center; gap: 18px; padding: clamp(18px, 2.6vh, 26px) 0; color: var(--ivory);
  opacity: 0; transform: translateY(10px); transition: opacity 0.8s var(--ease) var(--d), transform 0.9s var(--ease) var(--d);
}
#jg-gate.is-in .jg-path { opacity: 1; transform: none; }
.jg-path h2 { font-family: var(--serif); font-weight: 500; font-size: clamp(1.5rem, 3vw, 2.2rem); line-height: 1.1; transition: color 0.35s ease, transform 0.6s var(--ease); }
.jg-path p { margin-top: 6px; font-size: 14px; line-height: 1.5; color: var(--ivory-3); transition: color 0.35s ease; }
.jg-path__go { display: inline-flex; align-items: center; gap: 10px; font-size: 11px; letter-spacing: 0.22em; text-transform: uppercase; color: var(--ivory-3); white-space: nowrap; transition: color 0.35s ease; }
.jg-path__go::after { content: ""; width: 34px; height: 1px; background: currentColor; transform: scaleX(0.6); transform-origin: 0 50%; transition: transform 0.5s var(--ease); }
.jg-path kbd { font-family: var(--sans); font-size: 10.5px; letter-spacing: 0.1em; color: var(--ivory-3); border: 1px solid var(--line); border-radius: 5px; padding: 2px 6px; margin-right: 12px; }
.jg-path:hover h2, .jg-path:focus-visible h2, .jg-path.is-hot h2 { color: var(--gold-2); transform: translateX(6px); }
.jg-path:hover p, .jg-path:focus-visible p { color: var(--ivory-2); }
.jg-path:hover .jg-path__go, .jg-path:focus-visible .jg-path__go, .jg-path.is-hot .jg-path__go { color: var(--gold-2); }
.jg-path:hover .jg-path__go::after { transform: scaleX(1); }
.jg-path:focus-visible { outline: none; }
.jg-gate__wrap { transition: opacity 0.4s var(--ease-io), transform 0.5s var(--ease-io); }
.jg-gate__wrap.is-swapping { opacity: 0; transform: translateY(-8px); }
.jg-gate__wrap.is-in .jg-gate__q { opacity: 1; transform: none; }
.jg-namestep { display: grid; gap: 22px; justify-items: start; }
.jg-namestep input {
  width: min(100%, 26rem); background: transparent; border: 0; border-bottom: 1px solid var(--line-3); padding: 10px 0 12px;
  font-family: var(--serif); font-weight: 500; font-size: clamp(1.7rem, 4vw, 2.6rem); line-height: 1.1; color: var(--ivory); caret-color: var(--gold);
  transition: border-color 0.4s ease;
}
.jg-namestep input::placeholder { color: var(--ivory-3); font-style: italic; }
.jg-namestep input:focus { outline: none; border-color: var(--gold); }
.jg-namestep__row { display: flex; align-items: center; gap: 22px; }
.jg-namestep__row .jg-opt { font-size: 14px; padding: 11px 22px; animation: none; opacity: 1; transform: none; }
.jg-namestep__note { font-size: 13px; color: var(--ivory-3); }
.jg-gate__foot { display: flex; justify-content: space-between; align-items: center; gap: 16px; opacity: 0; transition: opacity 1s var(--ease) 0.8s; }
#jg-gate.is-in .jg-gate__foot { opacity: 1; }

/* ---------- Annotations: the page as a chalkboard ---------- */
#jg-ink { position: fixed; inset: 0; z-index: 70; pointer-events: none; overflow: visible; }
#jg-ink path { fill: none; stroke: var(--gold-2); stroke-width: 2; stroke-linecap: round; stroke-linejoin: round; opacity: 0.95; transition: opacity 0.5s ease; }
#jg-ink path.is-out { opacity: 0; }
body.menu-open #jg-ink { opacity: 0; }
[data-mark] { position: relative; transition: color 0.6s ease; }
.jg-lit [data-mark].is-marked { color: var(--ivory); }
body.jg-focus main > * { transition: opacity 1s var(--ease-io); }
body.jg-focus main > *:not(.jg-lit) { opacity: 0.32; }

/* ---------- Dialogue ---------- */
#jg-guide {
  position: fixed; left: 50%; bottom: 22px; z-index: 80; width: min(calc(100% - 44px), 900px);
  transform: translate(-50%, 20px); opacity: 0; pointer-events: none; transition: opacity 0.7s var(--ease), transform 0.8s var(--ease);
}
#jg-guide.is-open { opacity: 1; transform: translate(-50%, 0); pointer-events: auto; }
.jg-card {
  position: relative; background: rgba(13,17,15,0.9); -webkit-backdrop-filter: blur(22px) saturate(1.15); backdrop-filter: blur(22px) saturate(1.15);
  border: 1px solid var(--gold-line-2); box-shadow: 0 50px 100px -40px rgba(0,0,0,0.95);
  padding: 22px 24px 20px; display: grid; grid-template-columns: 104px minmax(0, 1fr); gap: 22px; align-items: start;
}
.jg-card::before { content: ""; position: absolute; left: 0; right: 0; top: 0; height: 1px; background: linear-gradient(90deg, var(--gold-line), rgba(201,166,66,0) 70%); }
.jg-portrait { position: relative; width: 104px; aspect-ratio: 4 / 5; border-radius: 999px 999px 10px 10px; overflow: hidden; background: var(--panel-2); box-shadow: 0 0 0 1px var(--gold-line-2); animation: jg-breathe 5.5s var(--ease-io) infinite; }
.jg-portrait img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; object-position: 50% 12%; opacity: 0; transition: opacity 0.45s var(--ease-io); }
.jg-portrait img.is-in { opacity: 1; }
.jg-portrait.is-talking { box-shadow: 0 0 0 1px var(--gold-line); }
@keyframes jg-breathe { 0%, 100% { transform: translateY(0); } 50% { transform: translateY(-2px); } }
.jg-name { font-family: var(--serif); font-size: 13px; letter-spacing: 0.3em; text-transform: uppercase; color: var(--gold); }
.jg-body { display: grid; gap: 14px; min-width: 0; }
.jg-top { display: flex; align-items: center; justify-content: space-between; gap: 12px; min-height: 30px; }
.jg-top__left { display: flex; align-items: center; gap: 16px; }
.jg-progress { position: relative; width: 120px; height: 1px; background: var(--line); }
.jg-progress i { position: absolute; left: 0; top: 0; height: 100%; width: 100%; background: var(--gold); transform-origin: 0 50%; transform: scaleX(0); transition: transform 0.9s var(--ease); }
.jg-ctl { display: flex; gap: 6px; align-items: center; }
.jg-say { font-family: var(--serif); font-weight: 500; font-size: clamp(1.2rem, 1.85vw, 1.45rem); line-height: 1.34; color: var(--ivory); min-height: 2.7em; cursor: default; }
.jg-say em { font-style: italic; color: var(--gold-2); }
.jg-say .jg-caret { display: inline-block; width: 1px; height: 0.95em; margin-left: 2px; background: var(--gold); vertical-align: -0.12em; animation: jg-blink 1s steps(2, start) infinite; }
.jg-say.is-done .jg-caret { display: none; }
@keyframes jg-blink { to { visibility: hidden; } }
.jg-choices { display: flex; flex-wrap: wrap; gap: 8px; }
.jg-choices:empty { display: none; }
.jg-opt {
  appearance: none; font-family: var(--sans); font-size: 13.5px; line-height: 1.3; color: var(--ivory-2);
  background: transparent; border: 1px solid var(--line); border-radius: 999px; padding: 9px 16px; cursor: pointer;
  opacity: 0; transform: translateY(6px); animation: jg-rise 0.6s var(--ease) forwards; animation-delay: calc(var(--i, 0) * 70ms);
  transition: border-color 0.3s var(--ease), color 0.3s var(--ease), background-color 0.3s var(--ease);
}
.jg-opt:hover, .jg-opt:focus-visible { border-color: var(--gold); color: var(--gold-2); background: var(--gold-wash); }
.jg-opt--primary { background: var(--gold); border-color: var(--gold); color: var(--lacquer); font-weight: 600; }
.jg-opt--primary:hover { background: var(--gold-2); border-color: var(--gold-2); color: var(--lacquer); }
@keyframes jg-rise { to { opacity: 1; transform: none; } }
.jg-chat { display: none; gap: 8px; align-items: center; }
#jg-guide.is-chat .jg-chat { display: flex; }
.jg-chat input { flex: 1; min-width: 0; background: rgba(10,13,11,0.6); border: 1px solid var(--line); border-radius: 999px; padding: 11px 18px; font-size: 14.5px; color: var(--ivory); caret-color: var(--gold); }
.jg-chat input::placeholder { color: var(--ivory-3); }
.jg-chat input:focus { outline: none; border-color: var(--gold); }
.jg-chat button { appearance: none; border: 1px solid var(--gold); background: var(--gold); color: var(--lacquer); border-radius: 999px; width: 42px; height: 42px; display: grid; place-items: center; cursor: pointer; transition: background-color 0.3s ease; }
.jg-chat button:hover { background: var(--gold-2); }
.jg-chat button svg { width: 15px; height: 15px; }
.jg-chat button[disabled] { opacity: 0.5; cursor: wait; }
.jg-note { font-size: 12px; color: var(--ivory-3); line-height: 1.45; }
.jg-note:empty { display: none; }

/* ---------- The close ---------- */
#jg-end {
  position: fixed; inset: 0; z-index: 89; background: rgba(6,8,7,0.88); -webkit-backdrop-filter: blur(10px); backdrop-filter: blur(10px);
  display: grid; place-items: center; padding: var(--pad); opacity: 0; pointer-events: none; transition: opacity 0.9s var(--ease-io); overflow-y: auto;
}
#jg-end.is-in { opacity: 1; pointer-events: auto; }
.jg-end__wrap { display: grid; justify-items: center; text-align: center; gap: 22px; max-width: 44rem; }
.jg-end__wrap h2 { font-family: var(--serif); font-weight: 500; font-size: clamp(2.2rem, 6vw, 4.4rem); line-height: 1; color: var(--ivory); }
.jg-end__wrap h2 em { font-style: italic; color: var(--gold); }
.jg-end__sum { font-family: var(--serif); font-size: clamp(1.15rem, 1.8vw, 1.4rem); line-height: 1.4; color: var(--ivory-2); max-width: 38ch; text-wrap: balance; }
.jg-end__cta { display: flex; flex-wrap: wrap; justify-content: center; gap: 10px; margin-top: 6px; }
.jg-end__replay { display: flex; flex-wrap: wrap; justify-content: center; gap: 8px 18px; margin-top: 10px; font-size: 12.5px; color: var(--ivory-3); }
.jg-end__replay button { appearance: none; background: none; border: 0; border-bottom: 1px solid var(--line-3); padding: 0 0 2px; color: var(--ivory-2); cursor: pointer; font-size: 12.5px; transition: color 0.3s ease, border-color 0.3s ease; }
.jg-end__replay button:hover { color: var(--gold-2); border-color: var(--gold); }

/* ---------- Reopen ---------- */
#jg-fab {
  position: fixed; right: 22px; bottom: 22px; z-index: 79; display: inline-flex; align-items: center; gap: 10px; padding: 8px 16px 8px 8px;
  border: 1px solid var(--gold-line-2); border-radius: 999px; background: rgba(13,17,15,0.88); -webkit-backdrop-filter: blur(14px); backdrop-filter: blur(14px);
  font-size: 11.5px; font-weight: 500; letter-spacing: 0.18em; text-transform: uppercase; color: var(--ivory); cursor: pointer;
  opacity: 0; transform: translateY(10px); pointer-events: none; transition: opacity 0.6s var(--ease), transform 0.7s var(--ease), border-color 0.3s ease;
}
#jg-fab.is-in { opacity: 1; transform: none; pointer-events: auto; }
body.menu-open #jg-fab, body.menu-open #jg-guide { opacity: 0; pointer-events: none; }
#jg-fab:hover { border-color: var(--gold); color: var(--gold-2); }
#jg-fab img { width: 30px; height: 30px; border-radius: 50%; object-fit: cover; object-position: 50% 15%; box-shadow: 0 0 0 1px var(--gold-line-2); }

/* ---------- Responsive ---------- */
@media (max-width: 720px) {
  #jg-guide { bottom: 12px; width: calc(100% - 24px); max-width: calc(100vw - 24px); }
  .jg-card { grid-template-columns: 60px minmax(0, 1fr); gap: 12px; padding: 14px 14px 12px; }
  .jg-portrait { width: 60px; }
  .jg-say { font-size: 1.05rem; min-height: 2.2em; overflow-wrap: anywhere; }
  .jg-top { flex-wrap: wrap; row-gap: 6px; }
  .jg-progress { display: none; }
  .jg-guide__skip { padding: 6px 0; font-size: 10.5px; letter-spacing: 0.16em; }
  .jg-guide__skip::after { display: none; }
  .jg-ibtn { width: 32px; height: 32px; }
  .jg-opt { font-size: 13px; padding: 8px 13px; }
  #jg-fab { right: 12px; bottom: 12px; }
  .jg-path { grid-template-columns: 1fr; gap: 8px; }
  .jg-path kbd { display: none; }
  .jg-gate__foot { flex-direction: column; align-items: flex-start; }
}

/* ---------- Preferences ---------- */
@media (prefers-reduced-motion: reduce) {
  .jg-portrait { animation: none; }
  .jg-opt { animation: none; opacity: 1; transform: none; }
  .jg-say .jg-caret { animation: none; }
}
@media (forced-colors: active) {
  .jg-card, .jg-ibtn, .jg-path, .jg-opt { border-color: CanvasText; }
  .jg-opt--primary, .btn--solid { forced-color-adjust: none; }
  #jg-ink path { stroke: Highlight; }
}