/* Hypha · Architect · Recall: the reel (a pencil film strip round the page while it rewinds) and the landing's way on.
   Built by js/recall.js; js/recall-boot.js paints the reel before the first paint when a page opens mid-rewind.

   html.rc-on     the reel is up: <main> shrinks into the gate (--rc-s); the film (.rc-film: dark edges with pencil
                  sprocket holes and edge print, graphite streaks and grain over the gate) runs down both sides; the
                  plate (.rc-plate: ◀◀ Recall + the counter above, the plain line + "Skip to the start" below, the
                  pencil gate frame) stays put while the frames hop from page to page (view-transition-name rc-reel)
   html.rc-anim   the reel closes in / opens out with transitions
   html.rc-in     a page opened mid-hop: the previous page's reel is already painted (a copy, js/recall-boot.js) and
                  the gate is empty and dark until js/recall.js settles the frame, which waits a nudge above the gate
                  (the page opens on the reel, never a flat or blank screen between pages)
   html.rc-open   the reel opens out to the top of page 01
   html.rc-hold   the landing holds: the corner banner with a green hue (phone: a bottom sheet) waits for a choice
   html.rc-again  "Take another look" was chosen: a slim corner banner keeps the green way on
   html.rc-vt     a same-page frame change is running as a view transition */

:root {
  --rc-plate: #040706;
  --rc-base: #0e1412;
  --rc-pen: rgb(214 221 216 / 0.8);
  --rc-pen-2: rgb(214 221 216 / 0.28);
  --rc-s: 0.8;
  --rc-bx: 144px;
  --rc-by: 90px;
  --rc-ease: cubic-bezier(0.6, 0, 0.2, 1);
  --pencil-2: #848c87; /* port: wiring */
  --pencil-3: #b4bbb6; /* port: wiring */
}

/* ---------- the reel ---------- */
html.rc-on, html.rc-on body { background: var(--rc-plate); }
html.rc-on body { touch-action: none; }
html.rc-on main { transform: scale(var(--rc-s)); will-change: transform; }
html.rc-anim main { transition: transform 0.9s var(--rc-ease); }
html.rc-on.rc-open main { transform: none; }
/* until js/recall.js places the page at its end, the gate stays empty and dark (the reel is already up); the page
   is not shrunk meanwhile, so every scene lays its drawing out on the page at its own size (punch F1) */
html.rc-on.rc-in main { transform: none; opacity: 0; }

/* (the copy js/recall-boot.js paints before the body exists sits outside it: the same smoothing either way) */
.rc-film, .rc-plate { position: fixed; inset: 0; pointer-events: none; visibility: hidden; -webkit-font-smoothing: antialiased; -moz-osx-font-smoothing: grayscale; }
.rc-film { z-index: 870; overflow: hidden; }
.rc-plate { z-index: 880; }
html.rc-on .rc-film, html.rc-on .rc-plate { visibility: visible; }
html.rc-on .rc-plate { view-transition-name: rc-reel; }

/* the film edges: dark film base, the film's own edge in pencil, a sprocket hole every pitch, edge print */
.rc-edge { position: absolute; top: 0; bottom: 0; width: var(--rc-bx); overflow: hidden; }
.rc-edge--l { left: 0; background: linear-gradient(90deg, var(--rc-plate) 0 16%, var(--rc-base) 16% 100%); transform: translate3d(-100%, 0, 0); }
.rc-edge--r { right: 0; background: linear-gradient(270deg, var(--rc-plate) 0 16%, var(--rc-base) 16% 100%); transform: translate3d(100%, 0, 0); }
html.rc-on .rc-edge { transform: none; }
html.rc-on.rc-open .rc-edge--l { transform: translate3d(-100%, 0, 0); }
html.rc-on.rc-open .rc-edge--r { transform: translate3d(100%, 0, 0); }
html.rc-anim .rc-edge, html.rc-anim .rc-band { transition: transform 0.9s var(--rc-ease); }
.rc-run { position: absolute; left: 0; top: 0; width: 100%; will-change: transform; }
.rc-holes { position: absolute; left: 0; top: 0; max-width: none; overflow: visible; }
.rc-holes path, .rc-gate path, .rc-glyph path, .rc-cbox path {
  fill: none;
  stroke: var(--rc-pen);
  stroke-width: 1.5;
  stroke-linecap: round;
  stroke-linejoin: round;
}
.rc-holes path.rc-c, .rc-gate path.rc-c { stroke: var(--rc-pen-2); stroke-width: 1; }
.rc-print {
  position: absolute;
  margin: 0;
  font: 500 12px/1 var(--f-mono);
  letter-spacing: 0.3em;
  color: var(--pencil-2);
  writing-mode: vertical-rl;
  white-space: nowrap;
}
/* what the holes leave when the film runs too fast to see them */
.rc-blur {
  position: absolute;
  top: 0;
  bottom: 0;
  opacity: 0;
  will-change: opacity;
  background: linear-gradient(90deg, rgb(214 221 216 / 0.45) 0 1.5px, rgb(214 221 216 / 0.08) 1.5px calc(100% - 1.5px), rgb(214 221 216 / 0.45) calc(100% - 1.5px));
}

/* over the gate: faint graphite streaks and a flutter in the grain, both only as fast as the film runs */
.rc-gatebox { position: absolute; left: var(--rc-bx); right: var(--rc-bx); top: var(--rc-by); bottom: var(--rc-by); overflow: hidden; }
.rc-streaks { position: absolute; left: 0; top: 0; width: 100%; height: 100%; max-width: none; opacity: 0; will-change: opacity; }
.rc-streaks path { fill: none; stroke: var(--pencil-3); stroke-width: 1.4; stroke-linecap: round; }
.rc-grain { position: absolute; inset: -40px; background-image: var(--grain); background-size: 160px; opacity: 0; will-change: opacity, transform; }

/* the plate: above and below the gate, it carries the words; the pencil frame sits on the gate's edge */
.rc-gate { position: absolute; left: 0; top: 0; width: 100%; height: 100%; max-width: none; overflow: hidden; transition: opacity 0.35s ease; }
html.rc-open .rc-gate { opacity: 0; }
.rc-band {
  position: absolute;
  left: 0;
  right: 0;
  height: var(--rc-by);
  box-sizing: border-box;
  padding: 0 var(--rc-bx);
  display: flex;
  align-items: center;
  background: var(--rc-plate);
  color: #eef2ef;
}
.rc-band--t { top: 0; transform: translate3d(0, -100%, 0); }
.rc-band--b { bottom: 0; justify-content: space-between; gap: 28px; transform: translate3d(0, 100%, 0); }
html.rc-on .rc-band { transform: none; }
html.rc-on.rc-open .rc-band--t { transform: translate3d(0, -100%, 0); }
html.rc-on.rc-open .rc-band--b { transform: translate3d(0, 100%, 0); }

.rc-head { display: flex; align-items: center; gap: 14px; }
.rc-glyph { flex: none; width: 46px; height: 30px; max-width: none; overflow: visible; }
.rc-glyph path { stroke: #eef2ef; stroke-width: 2.2; }
.rc-word { font: 600 34px/1 var(--f-display); letter-spacing: -0.01em; color: #f2f5f3; }
.rc-count {
  position: relative;
  display: inline-flex;
  align-items: center;
  margin-left: 18px;
  font: 500 24px/1 var(--f-mono);
  color: #dfe5e0;
  font-variant-numeric: tabular-nums;
}
.rc-count b { display: inline-block; box-sizing: border-box; width: 1.3em; padding: 0.32em 0; text-align: center; font-weight: 500; }
.rc-count b + b { margin-left: 4px; }
.rc-count i { display: inline-block; width: 0.7em; text-align: center; font-style: normal; color: var(--pencil-2); }
.rc-cbox { position: absolute; left: 0; top: 0; width: 100%; height: 100%; max-width: none; overflow: visible; pointer-events: none; }
.rc-cbox path { stroke: var(--rc-pen-2); stroke-width: 1.2; }
.rc-line { margin: 0; font: 500 30px/1.15 var(--f-display); letter-spacing: -0.015em; color: #eef2ef; }
.rc-skip {
  flex: none;
  pointer-events: auto;
  padding: 8px 14px;
  border: 0;
  border-radius: 999px;
  background: rgb(255 255 255 / 0.04);
  box-shadow: inset 0 0 0 1px rgb(169 177 172 / 0.22), var(--btn-glow);
  font: 500 16px/1.2 var(--f-body);
  color: #a9b1ac;
  text-decoration: underline;
  text-decoration-color: rgb(169 177 172 / 0.5);
  text-underline-offset: 5px;
  cursor: pointer;
}
.rc-skip:hover { color: #eef2ef; }
.rc-skip:focus-visible { outline: 2px solid var(--neon); outline-offset: 4px; border-radius: 4px; }

@media (max-width: 899px) {
  .rc-band { padding: 0 16px; }
  .rc-band--b { flex-direction: column; align-items: flex-start; justify-content: center; gap: 0; padding-bottom: env(safe-area-inset-bottom); }
  .rc-head { gap: 10px; }
  .rc-glyph { width: 30px; height: 20px; }
  .rc-word { font-size: 22px; }
  .rc-count { margin-left: 8px; font-size: 16px; }
  .rc-count b + b { margin-left: 3px; }
  .rc-line { font: 500 17px/1.25 var(--f-body); }
  .rc-skip { padding: 6px 12px; font-size: 14px; }
}

/* ---------- a frame change on the same page (skip, reduced-motion steps): the old frame slides down out of the gate,
   the new one comes in from above (a crossfade under reduced motion). Between pages each page paints its own half. ---------- */
html.rc-on::view-transition-old(root),
html.rc-on::view-transition-new(root),
html.rc-vt::view-transition-old(root),
html.rc-vt::view-transition-new(root) {
  mix-blend-mode: normal;
  animation-duration: 0.75s;
  animation-timing-function: cubic-bezier(0.65, 0, 0.3, 1);
  animation-fill-mode: both;
}
html.rc-on::view-transition-old(root), html.rc-vt::view-transition-old(root) { animation-name: rc-frame-out; }
html.rc-on::view-transition-new(root), html.rc-vt::view-transition-new(root) { animation-name: rc-frame-in; }
@keyframes rc-frame-out { to { transform: translate3d(0, 100%, 0); } }
@keyframes rc-frame-in { from { transform: translate3d(0, -100%, 0); } }
@keyframes rc-fade-out { to { opacity: 0; } }
@keyframes rc-fade-in { from { opacity: 0; } }
@media (prefers-reduced-motion: reduce) {
  html.rc-on::view-transition-old(root), html.rc-vt::view-transition-old(root) { mix-blend-mode: plus-lighter; animation: rc-fade-out 0.45s ease both !important; }
  html.rc-on::view-transition-new(root), html.rc-vt::view-transition-new(root) { mix-blend-mode: plus-lighter; animation: rc-fade-in 0.45s ease both !important; }
}

/* ---------- the way on: a corner banner with a green hue (phone: a bottom sheet) ---------- */
.rc-way {
  position: fixed;
  z-index: 990;
  right: 24px;
  bottom: 24px;
  width: min(452px, calc(100vw - 48px));
  box-sizing: border-box;
  padding: 26px 28px 18px;
  border-radius: 22px;
  background: #08110e;
  color: #f2f5f3;
  box-shadow: 0 0 0 1px rgb(57 241 100 / 0.32), 0 26px 70px rgb(3 8 6 / 0.38), 0 0 54px rgb(57 241 100 / 0.2);
  opacity: 0;
  visibility: hidden;
  transform: translate3d(0, 18px, 0);
  transition: opacity 0.5s ease, transform 0.6s cubic-bezier(0.2, 0.7, 0.2, 1), visibility 0s linear 0.6s;
}
.rc-way.is-on { opacity: 1; visibility: visible; transform: none; transition: opacity 0.5s ease, transform 0.6s cubic-bezier(0.2, 0.7, 0.2, 1); }
html.rc-on .rc-way { visibility: hidden; }
.rc-way-h { margin: 0 0 18px; font: 600 28px/1.12 var(--f-display); letter-spacing: -0.015em; color: #f4f7f5; }
.rc-go {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 12px;
  min-height: 58px;
  padding: 0 28px;
  border: 0;
  border-radius: 999px;
  background: var(--neon);
  color: var(--ink);
  font: 600 19px/1.1 var(--f-display);
  letter-spacing: -0.005em;
  cursor: pointer;
  box-shadow: 0 0 0 5px rgb(57 241 100 / 0.14), 0 0 34px rgb(57 241 100 / 0.5), var(--btn-glow);
  transition: transform 0.2s ease;
}
.rc-go:hover { transform: translateY(-1px); }
.rc-arw { display: inline-block; transition: transform 0.2s ease; }
.rc-go:hover .rc-arw { transform: translateX(3px); }
.rc-way-or { display: flex; flex-wrap: wrap; gap: 4px 26px; margin: 12px 0 0; }
button.rc-again, button.rc-leave {
  padding: 9px 16px;
  border: 0;
  border-radius: 999px;
  background: rgb(255 255 255 / 0.04);
  box-shadow: inset 0 0 0 1px rgb(230 235 231 / 0.18), var(--btn-glow);
  font: 500 17px/1.2 var(--f-body);
  color: #e6ebe7;
  text-decoration: underline;
  text-decoration-color: rgb(230 235 231 / 0.45);
  text-underline-offset: 5px;
  cursor: pointer;
}
.rc-leave { color: #9ea7a2; }
.rc-go:focus-visible, button.rc-again:focus-visible, .rc-leave:focus-visible { outline: 2px solid #f4f7f5; outline-offset: 4px; }
.rc-way.is-slim { padding: 0; width: auto; background: none; box-shadow: none; border-radius: 999px; }
/* the slim way on steps out while the page moves (it would sit on the words passing under it) and is back at rest */
.rc-way.is-scrolling.is-slim.is-on { opacity: 0; transform: translate3d(0, 10px, 0); pointer-events: none; transition: opacity 0.18s ease, transform 0.25s ease; }
.rc-way.is-slim .rc-way-h, .rc-way.is-slim .rc-way-or { display: none; }
.rc-way.is-slim .rc-go { min-height: 50px; padding: 0 22px; font-size: 17px; box-shadow: 0 0 0 1px rgb(7 16 14 / 0.25), 0 10px 30px rgb(3 8 6 / 0.3), 0 0 26px rgb(57 241 100 / 0.45); }
/* while the landing holds, nothing on the page invites a scroll */
html.rc-hold .cue { visibility: hidden; }

@media (max-width: 899px) {
  .rc-way { left: 0; right: 0; bottom: 0; width: auto; padding: 22px 20px calc(14px + env(safe-area-inset-bottom)); border-radius: 22px 22px 0 0; }
  .rc-way-h { margin-bottom: 14px; font-size: 24px; }
  .rc-go { width: 100%; min-height: 56px; font-size: 18px; }
  .rc-way-or { justify-content: space-between; margin-top: 8px; }
  .rc-way.is-slim { left: auto; right: 14px; bottom: calc(14px + env(safe-area-inset-bottom)); border-radius: 999px; }
  .rc-way.is-slim .rc-go { width: auto; min-height: 46px; padding: 0 18px; font-size: 16px; }
  html.rc-hold .toast { bottom: calc(var(--rc-sheet, 230px) + 14px); }
  html.rc-again .toast { bottom: calc(74px + env(safe-area-inset-bottom)); } /* clear of the slim way on */
}