/* Origin page (7 Oct 2026). Loaded by app/pages/origin.php only. The ink thread is drawn by origin.js. */

.origin-story { position: relative; }
.origin-story > .sec { position: relative; z-index: 1; }
.ink-thread { position: absolute; left: 0; top: 0; width: 100%; height: 100%; z-index: 0; pointer-events: none; overflow: visible; }
.ink-thread path { fill: none; stroke-linecap: round; stroke-linejoin: round; }
.ink-thread .ink { stroke: var(--flame-1); stroke-width: 2.6; }
.ink-thread .ink-glow { stroke: rgba(255, 106, 0, .2); stroke-width: 10; }
.ink-thread .ink-dim { stroke: #4b4541; stroke-width: 1.4; }
.ink-thread .ink-dim-glow { stroke: transparent; }

/* hero: the copy, and the pen the line comes out of: the real one, on a pool of light that fades into the page */
.origin-hero-grid { display: grid; gap: 2rem; align-items: center; }
@media (min-width: 900px) { .origin-hero-grid { grid-template-columns: minmax(0, 1.15fr) minmax(0, .85fr); } }
.origin-pen { position: relative; margin: 0; width: 100%; max-width: 520px; justify-self: center; }
.origin-pen img { display: block; width: 100%; height: auto; }
.pen-nib { position: absolute; left: 8.27%; top: 93.07%; width: 2px; height: 2px; margin: -1px 0 0 -1px; }   /* the ball point */

/* chapters */
.origin-ch { padding-block: clamp(4rem, 8vh, 7rem); }
.ch-grid { display: grid; gap: 2.4rem; align-items: center; }
@media (min-width: 900px) { .ch-grid { grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: clamp(3rem, 6vw, 6rem); } }
.ch-grid.ch-solo { grid-template-columns: minmax(0, 1fr); max-width: 820px; margin-inline: 0; }
.ch-text { position: relative; min-width: 0; }
.ch-text > p:not(.sec-label) { margin-top: 1.1rem; max-width: 58ch; }
.ch-text .display { font-size: min(clamp(2.4rem, 4.4vw, 4.4rem), 12.5vw); }
.ch-coda { color: var(--flame-0); font-weight: 600; }
.ch-label { position: relative; }
.ch-dot { position: absolute; left: -2.15rem; top: .55em; width: 13px; height: 13px; border-radius: 50%; background: var(--ink-0);
          border: 2px solid #4b4541; transition: background .5s, border-color .5s, box-shadow .5s; }
.ch-dot.is-lit { background: var(--flame-1); border-color: var(--flame-0); box-shadow: 0 0 16px rgba(255, 106, 0, .75); }
.ch-dot[data-ink="dim"].is-lit { background: #4b4541; border-color: #6b6058; box-shadow: none; }
.ink-end { position: absolute; left: -2.15rem; top: .45em; width: 13px; height: 13px; }
@media (max-width: 899px) {
  .origin-story .origin-ch .wrap { padding-left: 2.9rem; }
  .ch-dot, .ink-end { left: -1.85rem; }
}
.ch-visual { margin: 0; min-width: 0; }

/* 1. the notebook page: a fighter jet in black and orange ink. The ink sketches it and fills it in black,
      the cockpit and the flames light up, then the gem and the leading edges glow and keep pulsing */
.notebook { position: relative; padding: 18px 18px 14px 44px; border-radius: 6px; background-color: #f3eee4;
            background-image: linear-gradient(90deg, transparent 33px, rgba(214, 70, 60, .45) 33px 35px, transparent 35px),
                              repeating-linear-gradient(180deg, transparent 0 27px, rgba(70, 105, 170, .22) 27px 28px);
            transform: rotate(-2deg); box-shadow: 0 30px 70px rgba(0, 0, 0, .55); max-width: 520px; justify-self: center; width: 100%; }
.notebook svg { display: block; width: 100%; height: auto; overflow: visible; }
.notebook .ink, .notebook .pl, .notebook .le, .notebook .gedge, .notebook .gfacet, .notebook .cf, .notebook .hi { fill: none; stroke-linecap: round; stroke-linejoin: round; }
.notebook .ink { stroke: #141010; stroke-width: 2.1; } .notebook .ink.fine { stroke-width: 1.2; }
.notebook .pl { stroke: #6a615b; stroke-width: 1.1; }
.notebook .le { stroke: #ff6a00; stroke-width: 2.6; }
.notebook .gedge { stroke: #b84600; stroke-width: 1.1; } .notebook .gfacet { stroke: #ffc98a; stroke-width: .9; }
.notebook .cf { stroke: #141010; stroke-width: 1.2; } .notebook .hi { stroke: #fff3e0; stroke-width: 1.6; opacity: .85; }
.notebook .sil { fill: #141010; } .notebook .gem { fill: #ff6a00; } .notebook .cockpit { fill: #ff7a1a; }
.notebook .flame { fill: #ff7a1a; } .notebook .flame-core { fill: #ffb347; } .notebook .flame-shock { fill: #fff1d6; }
.notebook .le, .notebook .gem { filter: drop-shadow(0 0 3px rgba(255, 106, 0, .9)); }
.notebook path, .fork path, .map-arc, .map-back { stroke-dasharray: 1; stroke-dashoffset: 1; }
.notebook .jet-fill path { opacity: 0; }
.notebook.is-in path { stroke-dashoffset: 0; transition: stroke-dashoffset .9s cubic-bezier(.45, 0, .2, 1) var(--d, 0s); }
.notebook.is-in .jet-fill path { opacity: 1; transition: opacity .8s ease var(--d, 0s); }
.notebook.is-in .le, .notebook.is-in .gem { animation: jet-energy 2.6s ease-in-out 4.6s infinite; }
.notebook.is-in .flame-core { animation: jet-flicker .45s ease-in-out 4s infinite alternate; }
@keyframes jet-energy { 0%, 100% { opacity: 1; } 50% { opacity: .55; } }
@keyframes jet-flicker { from { opacity: 1; } to { opacity: .72; } }

/* 2. the TV and the demo disc */
.crt { max-width: 560px; justify-self: center; width: 100%; }
.crt-screen { position: relative; aspect-ratio: 5 / 4; border-radius: 26px; border: 12px solid #1d1a18; background: #030202; overflow: hidden;
              box-shadow: inset 0 0 70px rgba(0, 0, 0, .95), 0 24px 60px rgba(0, 0, 0, .6), 0 0 0 1px #2a2522; }
.crt-screen::after { content: ""; position: absolute; inset: 0; pointer-events: none;
                     background: repeating-linear-gradient(180deg, rgba(0, 0, 0, .28) 0 1px, transparent 1px 3px),
                                 radial-gradient(120% 90% at 50% 50%, transparent 55%, rgba(0, 0, 0, .55) 100%); }
.crt-code { position: absolute; inset: 0; margin: 0; padding: 1.1rem 1.2rem; font-size: var(--fs-small); line-height: 1.45; color: #ffd6b0;
            text-shadow: 0 0 6px rgba(255, 140, 40, .55); white-space: pre; overflow: hidden; transition: opacity .4s; }
.crt-code .cursor { display: inline-block; width: .6em; background: #ffd6b0; animation: crt-blink 1s steps(1) infinite; }
@keyframes crt-blink { 50% { opacity: 0; } }
.crt-canvas { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: contain; opacity: 0; transition: opacity .4s; }
.crt.is-running .crt-canvas { opacity: 1; } .crt.is-running .crt-code { opacity: 0; }
.crt figcaption, .sim figcaption, .photo figcaption { margin-top: .8rem; font-size: var(--fs-small); }
.crt figcaption { display: flex; flex-wrap: wrap; align-items: center; justify-content: flex-start; gap: .6rem 1rem; }
.crt-run { min-height: 44px; padding-inline: 1.2rem; }

/* 3. the fork */
.fork svg { display: block; width: 100%; max-width: 460px; height: auto; margin-inline: auto; overflow: visible; }
.fork path { fill: none; stroke-width: 3; stroke-linecap: round; }
.fork .fork-stem, .fork .fork-cs { stroke: var(--flame-1); }
.fork .fork-mech { stroke: #4b4541; }
.fork-gear { color: #4b4541; opacity: 0; transition: opacity .6s 1.2s; }
.fork-code { color: var(--flame-0); opacity: 0; transition: opacity .6s 1.8s; }
.fork-label { fill: var(--dim); font-size: 16px; letter-spacing: .12em; opacity: 0; transition: opacity .6s 1.4s; }
.fork-label-cs { fill: var(--flame-0); transition-delay: 2s; }
.fork.is-in .fork-stem { stroke-dashoffset: 0; transition: stroke-dashoffset .7s ease-out; }
.fork.is-in .fork-mech { stroke-dashoffset: 0; transition: stroke-dashoffset .8s .6s ease-out; }
.fork.is-in .fork-cs { stroke-dashoffset: 0; transition: stroke-dashoffset 1s 1s ease-out; }
.fork.is-in .fork-gear, .fork.is-in .fork-code, .fork.is-in .fork-label { opacity: 1; }

/* 4, 5. the simulations */
.sim { margin: 0; min-width: 0; }
.sim-canvas { display: block; width: 100%; height: auto; aspect-ratio: 560 / 350; background: var(--ink-1); border: 1px solid var(--ink-2); border-radius: 6px; }
.sim-push { cursor: pointer; touch-action: manipulation; }
.sim-state { display: inline-block; min-width: 7ch; margin-right: .7rem; color: var(--flame-0); }
.sim-state:empty { display: none; }
.sim-pair { display: grid; gap: 2rem; margin-top: clamp(2.4rem, 5vw, 4rem); }
@media (min-width: 900px) { .sim-pair { grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); } }
@media (max-width: 899px) { .origin-story .sim-pair { padding-left: 2.9rem; } }

/* photos */
.photo { margin: 0; }
.photo img { display: block; width: 100%; height: auto; border-radius: 6px; box-shadow: 0 24px 60px rgba(0, 0, 0, .55); }
.photo-tall { max-width: 360px; justify-self: center; width: 100%; }

/* 6. the map */
.map { margin: 2.4rem 0 0; max-width: 440px; }
.map svg { display: block; width: 100%; height: auto; overflow: visible; }
.map-grid path { stroke: rgba(255, 255, 255, .07); stroke-width: 1; }
.map-arc { fill: none; stroke: var(--flame-1); stroke-width: 2.6; stroke-linecap: round; }
.map-back { fill: none; stroke: rgba(255, 138, 31, .45); stroke-width: 1.6; stroke-linecap: round; }
.map-pt { fill: var(--flame-1); }
.map-label { fill: var(--dim); font-size: 16px; letter-spacing: .14em; }
.map.is-in .map-arc { stroke-dashoffset: 0; transition: stroke-dashoffset 1.6s ease-in-out; }
.map.is-in .map-back { stroke-dashoffset: 0; transition: stroke-dashoffset 1.4s 1.7s ease-in-out; }

/* 7. 2016, the grey stretch */
.origin-grey .ch-text > p:not(.sec-label) { color: var(--dim); }
.origin-grey .display { color: #8f857d; }
.origin-grey .sec-label { color: #6b6058; }

/* 8. now */
.origin-now .sec-label { text-shadow: 0 0 18px rgba(255, 106, 0, .6); }
.origin-links { display: flex; flex-wrap: wrap; align-items: center; justify-content: flex-start; gap: .8rem 1rem; margin-top: 2rem !important; }
.origin-links + p { margin-top: 2rem !important; }
.origin-end { position: relative; margin-top: clamp(2.6rem, 6vw, 4.4rem) !important; font-size: clamp(2.2rem, 4.4vw, 3.6rem); line-height: 1; text-transform: uppercase;
              color: var(--flame-0); text-shadow: 0 0 30px rgba(255, 106, 0, .45); }

@media (prefers-reduced-motion: reduce) {
  .crt-code .cursor { animation: none; }
  .notebook path, .fork path, .map-arc, .map-back { stroke-dashoffset: 0 !important; transition: none !important; }
  .notebook .jet-fill path { opacity: 1 !important; }
  .notebook .le, .notebook .gem, .notebook .flame-core { animation: none !important; }
  .fork-gear, .fork-code, .fork-label { opacity: 1; transition: none; }
}