/* Gate, cinematic pass (preview 2026-11-05). Layered over the gate's own <style>.
   SWITCH: delete the cinematic.css + cinematic.js lines in portal/page.html and the gate is as it was.
   - a depth field behind the plates: thin lines coming at the camera, no glow (canvas, cinematic.js)
   - opening title card once per browser session (?intro replays it): letterbox, the Z drawn, the name
     opened from a slit, then the name flies to the header and the bars pull away
   - the plates arrive out of depth, the digits draw themselves, then the runners start
   - the camera follows the pointer a little; hovering a side leans the field towards it in its colour
   - picking a side pushes into it and the bars close, then the page changes
   Reduced motion: no opening, no field motion, nothing hidden. Copy is read from the page itself. */

html.zc-on{--zc-ease:cubic-bezier(.7,0,.2,1);--zc-out:cubic-bezier(.16,1,.3,1)}
html.zc-on .streaks{display:none}
html.zc-on body{background:#010309}
.zc-field{position:fixed;inset:0;width:100%;height:100%;z-index:0;pointer-events:none;display:block}

/* plates let the field through; everything else about them is the shared plate */
html.zc-on .half{--panel:rgba(2,5,12,.64)}
html.zc-on .page{perspective:1800px}
html.zc-on .halves{perspective:1500px;transform-origin:50% 55%;will-change:transform}

/* the page's own entrance animations are replaced by the ones below */
html.zc-on .head h1,html.zc-on .head p,html.zc-on .head .bar,html.zc-on .half.panel,html.zc-on .links{animation:none}
html.zc-on:not(.zc-go) .head h1,html.zc-on:not(.zc-go) .head p,html.zc-on:not(.zc-go) .head .bar,
html.zc-on:not(.zc-go) .half.panel,html.zc-on:not(.zc-go) .links{opacity:0}
html.zc-intro:not(.zc-h1) .head h1{visibility:hidden}

/* arrival */
html.zc-go:not(.zc-done) .half.panel{animation:zc-in-l 1.15s var(--zc-out) .05s both}
html.zc-go:not(.zc-done) .half.panel + .half.panel{animation-name:zc-in-r;animation-delay:.17s}
html.zc-go:not(.zc-done) .half .meta{animation:zc-rise .7s var(--zc-out) .75s both}
html.zc-go:not(.zc-done) .head p{animation:zc-rise .6s var(--zc-out) .3s both}
html.zc-go:not(.zc-done) .head .bar{animation:grow 1s var(--zc-ease) .2s both}
html.zc-go:not(.zc-done) .links{animation:zc-rise .6s var(--zc-out) .95s both}
html.zc-go:not(.zc-done):not(.zc-intro) .head h1{animation:wipe .8s var(--zc-ease) both}
@keyframes zc-in-l{from{opacity:0;transform:translate3d(-140px,0,-760px) rotateY(24deg)}38%{opacity:1}to{opacity:1;transform:none}}
@keyframes zc-in-r{from{opacity:0;transform:translate3d(140px,0,-760px) rotateY(-24deg)}38%{opacity:1}to{opacity:1;transform:none}}
@keyframes zc-rise{from{opacity:0;transform:translateY(12px)}to{opacity:1;transform:none}}

/* the digits draw themselves, then the runner and the depth stack come in */
html.zc-go:not(.zc-done) .digit .ol{stroke-dasharray:1000;animation:zc-draw 1.5s var(--zc-ease) .3s both}
@keyframes zc-draw{from{stroke-dashoffset:1000}to{stroke-dashoffset:0}}
html.zc-on .digit .run{transition:opacity .6s}
html.zc-on:not(.zc-done) .digit .run{opacity:0}
.zc-echo{pointer-events:none;transition:opacity .9s}
/* the side face: stacked copies with one flat fill merge into a solid extrusion; the deepest copy carries the back edge */
.zc-echo path{fill:color-mix(in srgb,var(--ac) 20%,#01030a);stroke:none}
.zc-echo path.back{stroke:color-mix(in srgb,var(--ac) 45%,transparent);stroke-width:1.2;vector-effect:non-scaling-stroke;stroke-linejoin:miter}
/* the front face is opaque so the side face only shows past its edges */
html.zc-on .digit .ol{fill:#02050c}
html.zc-on .half:hover .digit .ol,html.zc-on .half:focus-within .digit .ol{fill:color-mix(in srgb,var(--ac) 12%,#02050c)}
html.zc-on:not(.zc-done) .zc-echo{opacity:0}

/* once settled, a plate comes forward a little under the pointer */
html.zc-done .half.panel{transition:transform .45s var(--zc-out),--edge .18s}
html.zc-done .half.panel:hover,html.zc-done .half.panel:focus-within{transform:translateZ(18px)}

/* letterbox: 12vh bars for the opening, full height to close on the way out */
.zc-lb i{position:fixed;left:0;right:0;height:0;background:#000;z-index:60;pointer-events:none;transition:height .9s var(--zc-ease)}
.zc-lb i:first-child{top:0;box-shadow:0 1px 0 rgba(0,243,255,.28)}
.zc-lb i:last-child{bottom:0;box-shadow:0 -1px 0 rgba(0,243,255,.28)}
html.zc-bars .zc-lb i{height:12vh;transition:none}
html.zc-exit .zc-lb i{height:50.5vh;transition:height .55s var(--zc-ease) .05s}

/* opening title card */
.zc-card{position:fixed;inset:0;z-index:70;pointer-events:none}
.zc-card .zc-mark{position:fixed;left:50%;width:var(--ms);height:var(--ms);margin-left:calc(var(--ms) / -2);overflow:visible}
.zc-card .zc-mark .fr{fill:none;stroke:var(--cyan);stroke-width:1.6;stroke-dasharray:1000;stroke-dashoffset:1000;transition:stroke-dashoffset 1.1s var(--zc-ease)}
.zc-card .zc-mark .z{fill:#eefcff;opacity:0;transform:scale(.86);transform-origin:32px 32px;transition:opacity .5s,transform .7s var(--zc-out)}
.zc-card.s1 .zc-mark .fr{stroke-dashoffset:0}
.zc-card.s2 .zc-mark .z{opacity:1;transform:none}
.zc-card .zc-name{position:fixed;margin:0;white-space:nowrap;transform-origin:0 0;clip-path:inset(0 50% 0 50%);opacity:0;
  transition:clip-path 1.1s var(--zc-ease),opacity .3s}
.zc-card.s2 .zc-name{clip-path:inset(0 -2% 0 -2%);opacity:1}
.zc-card.fly .zc-name{transition:transform .9s var(--zc-ease)}
.zc-card .zc-strap{position:fixed;left:0;right:0;text-align:center;opacity:0;transform:translateY(10px);transition:opacity .6s,transform .6s var(--zc-out)}
.zc-card.s3 .zc-strap{opacity:1;transform:none}
.zc-card.fly .zc-mark,.zc-card.fly .zc-strap{opacity:0;transform:translateY(-8px);transition:opacity .35s,transform .5s var(--zc-ease)}
.zc-skip{position:fixed;right:24px;bottom:calc(6vh - 18px);z-index:80;min-height:36px;padding:0 16px;cursor:pointer;
  font:500 12px var(--data);letter-spacing:.24em;text-transform:uppercase;color:#bfe9f5;background:transparent;border:0;
  box-shadow:inset 0 0 0 1px rgba(0,243,255,.3);transition:color .15s,box-shadow .15s,opacity .3s}
.zc-skip:hover,.zc-skip:focus-visible{color:#000;background:var(--cyan);outline:none}
html.zc-h1 .zc-skip{opacity:0;pointer-events:none}

/* leaving: the picked plate comes at the camera, the other falls back, the bars close */
html.zc-exit .half.panel{animation:none;transition:transform .6s var(--zc-ease),opacity .45s var(--zc-ease)}
html.zc-exit .half.zc-pick{transform:translateZ(140px)}
html.zc-exit .half.zc-pick .digit .ol{fill:color-mix(in srgb,var(--ac) 18%,#02050c)}
html.zc-exit .half.zc-drop{opacity:0;transform:translateZ(-420px)}
html.zc-exit .head,html.zc-exit .links,html.zc-exit .zr-bar{opacity:0;transition:opacity .3s}

@media (max-width:760px){
  html.zc-on .halves{will-change:auto}
  .zc-skip{right:12px}
}
@media (prefers-reduced-motion:reduce){
  .zc-lb,.zc-card,.zc-skip{display:none}
}

html.zc-on:not(.zc-go) .halves{pointer-events:none}