/* =========================================================================
   GAISCE — Motion & navigation layer (loaded last)
   ========================================================================= */

/* overflow:hidden on body breaks position:sticky; clip contains overflow without creating a scroller */
@supports (overflow: clip) { html, body { overflow-x: clip !important; } }

/* ---- Page transitions ---- */
@view-transition { navigation: auto; }
::view-transition-old(root) { animation: vtOut .42s var(--ease-smooth) both; }
::view-transition-new(root) { animation: vtIn .75s var(--ease-out) both; }
::view-transition-group(site-nav) { animation-duration: .45s; }
@keyframes vtOut { to { opacity: 0; transform: translateY(-16px) scale(.994); filter: blur(3px); } }
@keyframes vtIn { from { opacity: 0; transform: translateY(22px); } }
.nav { view-transition-name: site-nav; }
.pt-line { position: fixed; top: 0; left: 0; width: 100%; height: 2px; z-index: 1001; pointer-events: none; background: var(--mint); box-shadow: 0 0 14px var(--mint); transform: scaleX(0); transform-origin: left; opacity: 0; }
html.is-leaving .pt-line { opacity: 1; transform: scaleX(.8); transition: transform 1.4s var(--ease-out), opacity .2s; }
html.is-leaving body { opacity: .0; transition: opacity .26s var(--ease); }
@supports (view-transition-name: a) { html.is-leaving body { opacity: 1; } }
@media (prefers-reduced-motion: reduce) { ::view-transition-old(root), ::view-transition-new(root) { animation: none; } html.is-leaving body { opacity: 1; } }

/* ---- Scroll progress ---- */
.scroll-prog { position: fixed; top: 0; left: 0; right: 0; height: 2px; z-index: 102; pointer-events: none; }
.scroll-prog span { display: block; height: 100%; background: linear-gradient(90deg, var(--teal), var(--mint)); transform-origin: left; transform: scaleX(0); box-shadow: 0 0 10px rgba(86,245,189,.5); }

/* ---- Section rail ---- */
.rail { position: fixed; right: 24px; top: 50%; transform: translateY(-50%); z-index: 90; display: flex; flex-direction: column; gap: 2px; --rc: var(--fg-faint); --ra: var(--green); transition: color .4s; }
.rail.on-dark { --rc: rgba(234,241,237,.42); --ra: var(--mint); }
.rail a { display: flex; align-items: center; justify-content: flex-end; gap: 10px; height: 26px; color: var(--rc); transition: color .35s var(--ease); }
.rail .rl, .rail .rn { font-family: var(--mono); font-size: 10.5px; letter-spacing: .16em; text-transform: uppercase; white-space: nowrap; }
.rail .rl { opacity: 0; transform: translateX(8px); transition: opacity .35s var(--ease), transform .45s var(--ease-out); padding: 3px 8px; border-radius: 2px; }
.rail .rn { opacity: 0; width: 0; overflow: hidden; transition: opacity .3s; }
.rail .rt { width: 14px; height: 1px; background: currentColor; transition: width .45s var(--ease-out), background .35s; }
.rail a:hover { color: var(--ra); }
.rail a.active { color: var(--ra); }
.rail a.active .rt { width: 30px; box-shadow: 0 0 8px currentColor; }
.rail a.active .rn { opacity: 1; width: auto; }
.rail:hover .rl { opacity: 1; transform: none; }
.rail:not(.on-dark):hover .rl { background: rgba(250,251,250,.9); }
.rail.on-dark:hover .rl { background: rgba(11,15,13,.7); }
@media (max-width: 1379px) { .rail { display: none; } }

/* ---- Sticky sub-nav ---- */
.subnav { position: fixed; left: 0; right: 0; top: 74px; z-index: 95; height: 48px; background: rgba(250,251,250,.86); backdrop-filter: blur(18px) saturate(1.25); -webkit-backdrop-filter: blur(18px) saturate(1.25); border-bottom: 1px solid var(--hair); transform: translateY(-100%); opacity: 0; pointer-events: none; transition: transform .55s var(--ease-out), opacity .35s var(--ease); }
.subnav.show { transform: none; opacity: 1; pointer-events: auto; }
.subnav-inner { max-width: 1480px; height: 100%; margin: 0 auto; padding: 0 32px; display: flex; align-items: center; gap: 24px; }
.sn-page { color: var(--teal); flex: none; display: inline-flex; align-items: center; gap: 10px; font-size: 10.5px; }
.sn-page i { width: 6px; height: 6px; border-radius: 50%; background: var(--mint-deep); box-shadow: 0 0 8px var(--mint); }
.sn-links { display: flex; gap: 2px; overflow-x: auto; scrollbar-width: none; min-width: 0; flex: 1; -webkit-mask-image: linear-gradient(90deg, #000 90%, transparent); mask-image: linear-gradient(90deg, #000 90%, transparent); }
.sn-links::-webkit-scrollbar { display: none; }
.sn-links a { flex: none; font-family: var(--mono); font-size: 11px; letter-spacing: .12em; text-transform: uppercase; color: var(--fg-soft); padding: 8px 13px; border-radius: 30px; transition: color .3s, background .35s var(--ease); white-space: nowrap; }
.sn-links a:hover { color: var(--green); }
.sn-links a.active { color: var(--green); background: rgba(86,245,189,.2); }
.sn-next { flex: none; display: inline-flex; align-items: center; gap: 10px; color: var(--green); font-size: 11px; transition: gap .3s var(--ease); }
.sn-next:hover { gap: 14px; }
.nav.scrolled { transition: background .4s var(--ease), border-color .4s var(--ease), height .45s var(--ease); }
@media (max-width: 760px) {
  .subnav { height: 50px; }
  .subnav-inner { padding: 0 max(12px, env(safe-area-inset-left)); gap: 0; }
  .sn-page, .sn-next { display: none; }
  .sn-links a { padding: 0 14px; height: 38px; display: inline-flex; align-items: center; }
}
section[id], header[id] { scroll-margin-top: 130px; }

/* ---- Next chapter pager ---- */
.next-chapter { background: var(--ink); color: var(--paper); border-bottom: 1px solid rgba(255,255,255,.08); }
.nc-link { display: grid; grid-template-columns: 1fr auto; grid-template-areas: "k a" "t a" "d a"; align-items: center; column-gap: 32px; padding: 84px 0; border-radius: 4px; }
.nc-k { grid-area: k; color: var(--mint); margin-bottom: 18px; }
.nc-t { grid-area: t; font-size: clamp(44px, 7vw, 104px); font-weight: 500; letter-spacing: -.04em; line-height: .95; color: #F4FAF7; transition: color .5s var(--ease), letter-spacing .7s var(--ease-out); }
.nc-d { grid-area: d; margin-top: 18px; font-family: var(--serif); font-style: italic; font-size: clamp(18px, 1.6vw, 22px); color: #9FB1A9; }
.nc-arrow { grid-area: a; width: 88px; height: 88px; border-radius: 50%; border: 1px solid rgba(86,245,189,.45); display: grid; place-items: center; color: var(--mint); transition: background .45s var(--ease), color .45s, transform .6s var(--ease-out), box-shadow .5s; }
.nc-link:hover .nc-t { color: var(--mint); letter-spacing: -.035em; }
.nc-link:hover .nc-arrow { background: var(--mint); color: var(--ink); transform: translateX(8px) rotate(-8deg); box-shadow: 0 0 40px rgba(86,245,189,.35); }
@media (max-width: 600px) { .nc-link { padding: 60px 0; column-gap: 18px; } .nc-arrow { width: 56px; height: 56px; } }

/* ---- Mobile menu ---- */
.mobile-menu { transform: none; padding: 0; justify-content: flex-start; overflow-y: auto; visibility: hidden; clip-path: circle(0px at calc(100% - 44px) 46px); transition: clip-path .75s var(--ease-smooth), visibility 0s linear .75s; }
.mobile-menu.open { visibility: visible; clip-path: circle(150vmax at calc(100% - 44px) 46px); transition: clip-path .8s var(--ease-smooth), visibility 0s; }
.mm-cells { position: absolute; inset: 0; width: 100%; height: 100%; opacity: .5; pointer-events: none; }
.mm-inner { position: relative; z-index: 1; min-height: 100%; display: flex; flex-direction: column; padding: calc(var(--nav-h) + 20px) max(24px, env(safe-area-inset-right)) calc(28px + env(safe-area-inset-bottom)) max(24px, env(safe-area-inset-left)); }
.mm-kicker { color: #6E827A; margin-bottom: 14px; font-size: 10.5px; }
.mm-links { display: flex; flex-direction: column; }
.mobile-menu .mm-links a { display: grid; grid-template-columns: 38px 1fr auto; align-items: baseline; column-gap: 8px; padding: 17px 0; min-height: 64px; border-bottom: 1px solid rgba(255,255,255,.08); font-size: clamp(28px, 8vw, 38px); opacity: 0; transform: translateY(22px); transition: opacity .5s var(--ease), transform .7s var(--ease-out), color .3s; transition-delay: 0s; }
.mobile-menu.open .mm-links a { opacity: 1; transform: none; transition-delay: calc(.18s + var(--i, 0) * .06s); }
.mobile-menu .mm-links a .mm-idx { margin: 0; font-size: 11px; color: #6E827A; }
.mm-name { line-height: 1.05; }
.mm-desc { grid-column: 2; font-family: var(--mono); font-size: 10.5px; letter-spacing: .14em; text-transform: uppercase; color: #7E938B; margin-top: 8px; font-weight: 500; }
.mm-go { grid-row: 1; grid-column: 3; align-self: center; color: rgba(86,245,189,.6); transition: transform .35s var(--ease-out); }
.mobile-menu .mm-links a:active .mm-go { transform: translateX(5px); }
.mobile-menu .mm-links a.is-current .mm-name { color: var(--mint); }
.mobile-menu .mm-links a.is-current .mm-idx { color: var(--mint); }
.mm-foot { margin-top: auto; padding-top: 34px; display: flex; flex-direction: column; align-items: flex-start; gap: 16px; opacity: 0; transform: translateY(14px); transition: opacity .5s, transform .6s var(--ease-out); }
.mobile-menu.open .mm-foot { opacity: 1; transform: none; transition-delay: .55s; }
.mobile-menu .mm-foot .mm-cta { margin-top: 0; border-bottom: 1px solid var(--mint); font-size: 13px; padding: 15px 26px; }
.mobile-menu .mm-foot .mm-mail { font-family: var(--serif); font-size: 19px; letter-spacing: 0; color: var(--mint); border: 0; padding: 4px 0; font-weight: 400; }
.mm-loc { color: #5E7068; font-size: 10.5px; }
.nav-burger span { transition: transform .5s var(--ease-out); }
body.menu-open .nav-burger span:first-child { transform: translateY(2.7px) rotate(45deg); }
body.menu-open .nav-burger span:last-child { transform: translateY(-2.7px) rotate(-45deg); }
body.menu-open .nav { background: transparent !important; backdrop-filter: none !important; -webkit-backdrop-filter: none !important; border-bottom-color: transparent !important; color: var(--paper); }
body.menu-open .nav .nav-burger { border-color: rgba(255,255,255,.28); }
body.menu-open .subnav, body.menu-open .scroll-prog, body.menu-open .cursor { opacity: 0 !important; pointer-events: none; }
@media (prefers-reduced-motion: reduce) { .mobile-menu, .mobile-menu.open { transition: none; } .mobile-menu .mm-links a, .mm-foot { opacity: 1; transform: none; transition: none; } }

/* ---- Cursor reticle ---- */
.cursor { position: fixed; left: 0; top: 0; width: 34px; height: 34px; margin: -17px 0 0 -17px; border: 1px solid #fff; border-radius: 50%; pointer-events: none; z-index: 2000; mix-blend-mode: difference; opacity: 0; transition: width .4s var(--ease-out), height .4s var(--ease-out), margin .4s var(--ease-out), opacity .3s, background .3s, border-radius .3s; }
.cursor::after { content: ""; position: absolute; left: 50%; top: 50%; width: 3px; height: 3px; margin: -1.5px 0 0 -1.5px; border-radius: 50%; background: #fff; }
.cursor.on { opacity: .85; }
.cursor.hover { width: 64px; height: 64px; margin: -32px 0 0 -32px; background: rgba(255,255,255,.06); }
.cursor.text { width: 3px; height: 26px; margin: -13px 0 0 -1.5px; border-radius: 2px; }
.cursor.down { width: 22px; height: 22px; margin: -11px 0 0 -11px; }
@media (hover: none), (pointer: coarse) { .cursor { display: none; } }

/* ---- Card spotlight ---- */
.spot { position: relative; isolation: isolate; }
.spot::before { content: ""; position: absolute; inset: 0; border-radius: inherit; pointer-events: none; z-index: -1; opacity: 0; transition: opacity .5s var(--ease); background: radial-gradient(420px circle at var(--mx, 50%) var(--my, 50%), rgba(86,245,189,.16), transparent 60%); }
.spot:hover::before { opacity: 1; }
.system.spot::before { background: radial-gradient(460px circle at var(--mx, 50%) var(--my, 50%), rgba(86,245,189,.11), transparent 60%); }
.btn { will-change: transform; }

/* ---- Dark bands enter full-bleed ---- */
[data-enter] { clip-path: inset(0 calc((1 - var(--enter, 1)) * 4vw) round calc((1 - var(--enter, 1)) * 28px)); }

/* ---- Engineered cell (home) ---- */
.cell-tilt { width: 100%; display: grid; place-items: center; transition: transform .9s var(--ease-out); transform-style: preserve-3d; }
.cell-svg .cell-mem.dash { transform-box: view-box; transform-origin: 230px 230px; transform: rotate(var(--spin, 0deg)); }
.cell-svg .cell-payload { transform-box: view-box; transform-origin: 230px 230px; animation: gSpin 70s linear infinite reverse; }
.cell-svg .cell-rec { transform-box: view-box; transform-origin: 230px 230px; animation: gSpin 140s linear infinite; opacity: .28; transition: opacity .5s var(--ease), filter .5s; }
.cell-rec line { stroke: var(--mint); stroke-width: 1; } .cell-rec circle { fill: var(--mint); }
.cell-shield { fill: none; stroke: var(--mint); stroke-width: 1.2; stroke-dasharray: 2 5; opacity: 0; transition: opacity .5s; }
.cell-svg circle, .cell-svg line { transition: stroke .5s var(--ease), opacity .5s, filter .5s; }
@keyframes gSpin { to { transform: rotate(360deg); } }
.cell-layout[data-hl] .cell-mem.faint { opacity: .25; }
.cell-layout[data-hl="1"] .cell-payload circle { opacity: 1; filter: drop-shadow(0 0 6px var(--mint)); }
.cell-layout[data-hl="1"] .cell-mem.outer { stroke: rgba(86,245,189,.85); filter: drop-shadow(0 0 6px rgba(86,245,189,.6)); }
.cell-layout[data-hl="2"] .cell-rec { opacity: 1; filter: drop-shadow(0 0 4px var(--mint)); }
.cell-layout[data-hl="2"] .cell-mem.dash { stroke: var(--mint); }
.cell-layout[data-hl="3"] .cell-shield { opacity: 1; }
.cell-layout[data-hl="3"] .cell-nuc, .cell-layout[data-hl="3"] .cell-cross, .cell-layout[data-hl="3"] .cell-mem.core { stroke: var(--mint); filter: drop-shadow(0 0 6px var(--mint)); }
.cell-hint { margin-top: 18px; color: #6E827A; font-size: 10.5px; text-align: center; }
@media (prefers-reduced-motion: reduce) { .cell-svg .cell-payload, .cell-svg .cell-rec { animation: none; } }

/* ---- Hero tumour scene ---- */
.hero-tumour { position: absolute; inset: 0; width: 100%; height: 100%; z-index: 1; pointer-events: none; }
.hero-contour { opacity: .55; }
.hero-cap { position: absolute; right: 32px; bottom: 30px; z-index: 3; color: #6E827A; font-size: 10px; letter-spacing: .2em; }
@media (max-width: 760px) { .hero-cap { display: none; } }

/* ---- Barrier scroll story (desktop) ---- */
.story-stage { display: none; }
@media (min-width: 1000px) {
  .story.story-on { display: grid; grid-template-columns: minmax(0, 1.08fr) minmax(0, .92fr); gap: 64px; margin-top: 44px; }
  .story.story-on .story-stage { display: block; }
  .story-sticky { position: sticky; top: 140px; height: calc(100vh - 180px); max-height: 680px; }
  .story-frame { position: relative; height: 100%; background: #fff; border: 1px solid var(--hair); border-radius: 3px; overflow: hidden; }
  .story-canvas { position: absolute; inset: 0; width: 100%; height: 100%; display: block; }
  .story-hud { position: absolute; left: 22px; right: 22px; top: 18px; display: flex; align-items: center; gap: 14px; z-index: 2; }
  .story-hud .sh-id { color: var(--teal); }
  .story-hud .sh-name { color: var(--fg); }
  .story-ind { margin-left: auto; display: flex; gap: 6px; }
  .story-ind i { position: relative; width: 26px; height: 2px; background: var(--hair); overflow: hidden; }
  .story-ind i::after { content: ""; position: absolute; inset: 0; background: var(--green); transform-origin: left; transform: scaleX(var(--p, 0)); transition: transform .2s linear; }
  .story-cap { position: absolute; left: 22px; bottom: 16px; color: var(--fg-faint); font-size: 10px; z-index: 2; }
  .story.story-on .barrier-grid { margin: 0; display: block; border: 0; }
  .story.story-on .barrier { min-height: 76vh; justify-content: center; border: 0; border-top: 1px solid var(--hair); padding: 40px 0 40px 4px; background: transparent !important; box-shadow: none !important; transform: none !important; opacity: .32; transition: opacity .6s var(--ease); }
  .story.story-on .barrier:last-child { min-height: 70vh; }
  .story.story-on .barrier.is-active { opacity: 1; }
  .story.story-on .barrier .ig { display: none; }
  .story.story-on .barrier-name { font-size: clamp(34px, 3.4vw, 50px); margin-bottom: 26px; }
  .story.story-on .barrier-fail, .story.story-on .barrier-fix { font-size: 18px; max-width: 40ch; }
  .story.story-on .barrier::before { display: none; }
}

/* ---- Live imaging frames ---- */
.scope-frame { position: relative; margin: 0; background: #040706; border: 1px solid rgba(255,255,255,.08); border-radius: 4px; overflow: hidden; }
.scope-frame canvas { position: absolute; inset: 0; width: 100%; height: 100%; display: block; }
.sc-corners { position: absolute; inset: 12px; z-index: 2; pointer-events: none; opacity: .75;
  background:
    linear-gradient(var(--mint),var(--mint)) left top/16px 1px no-repeat, linear-gradient(var(--mint),var(--mint)) left top/1px 16px no-repeat,
    linear-gradient(var(--mint),var(--mint)) right top/16px 1px no-repeat, linear-gradient(var(--mint),var(--mint)) right top/1px 16px no-repeat,
    linear-gradient(var(--mint),var(--mint)) left bottom/16px 1px no-repeat, linear-gradient(var(--mint),var(--mint)) left bottom/1px 16px no-repeat,
    linear-gradient(var(--mint),var(--mint)) right bottom/16px 1px no-repeat, linear-gradient(var(--mint),var(--mint)) right bottom/1px 16px no-repeat; }
.scope-hud > span { position: absolute; z-index: 3; font-family: var(--mono); font-size: 10px; letter-spacing: .18em; text-transform: uppercase; color: rgba(214,236,226,.78); display: inline-flex; align-items: center; gap: 9px; }
.scope-hud .sh-tl { top: 22px; left: 26px; }
.scope-hud .sh-tl::before { content: ""; width: 6px; height: 6px; border-radius: 50%; background: var(--mint); box-shadow: 0 0 10px var(--mint); animation: recBlink 2s ease-in-out infinite; }
.scope-hud .sh-tr { top: 22px; right: 26px; color: var(--mint); font-variant-numeric: tabular-nums; }
.scope-hud .sh-bl { bottom: 22px; left: 26px; text-transform: none; }
.scope-hud .sh-bl i { display: block; width: 54px; height: 2px; background: rgba(234,241,237,.85); }
.scope-hud .sh-br { bottom: 22px; right: 26px; text-transform: none; letter-spacing: .06em; color: rgba(191,208,201,.7); }
@keyframes recBlink { 0%,100% { opacity: 1; } 50% { opacity: .25; } }
@media (prefers-reduced-motion: reduce) { .scope-hud .sh-tl::before { animation: none; } }

.scope-band { background: var(--paper); border-top: 1px solid var(--hair); }
.scope-wide { margin-top: 56px; aspect-ratio: 21 / 9; }
@media (max-width: 900px) { .scope-wide { aspect-ratio: 4 / 3; } }
@media (max-width: 560px) { .scope-wide { aspect-ratio: 4 / 5; } .scope-hud .sh-br { display: none; } }

.ph-scope { display: none; }
@media (min-width: 1180px) {
  .page-head .ph-scope { display: block; position: absolute; z-index: 2; right: max(32px, calc((100vw - 1240px) / 2 + 32px)); top: calc(var(--nav-h) + 44px); bottom: 44px; width: min(34vw, 460px); }
  .page-head .ph-cells { opacity: .45; }
  .page-head .ph-title, .page-head .ph-lede, .page-head .ph-meta { max-width: min(var(--ph-max, 800px), calc(100% - min(34vw, 460px) - 56px)); }
  .page-head .ph-title { --ph-max: 16ch; }
  .page-head .ph-lede { --ph-max: 56ch; }
}