/* Axis passport: one holographic pearl card carries who you are (memory, projects, Docs, files) into every AI.
   The card is a GPT Image render (passport-card.webp, face-on) with a live HTML face; passport.js runs the story. */
.pp{max-width:600px;margin-inline:auto;--pp-ease:cubic-bezier(.2,.8,.2,1)}
.pp-stage{position:relative;display:flex;flex-direction:column;align-items:center;padding-top:22px}

/* the card: pearl stock with a holographic Axis field (HOLOGRAM.md). holo.js paints --holo-field and moves --lx/--ly. */
.pp-card-wrap{position:relative;width:80%;align-self:flex-start;perspective:1400px;z-index:2}
.pp-card-wrap::before{content:"";position:absolute;left:8%;right:8%;top:34%;bottom:-8%;border-radius:50%;background:radial-gradient(closest-side,rgba(206,170,255,.22),rgba(120,220,255,.08) 60%,transparent);filter:blur(30px);z-index:-1}
.pp-card{--lx:20%;--ly:15%;--tx:0;--ty:0;--pp-ink:#16181a;--pp-sub:#6e7377;
  position:relative;aspect-ratio:1100/729;container-type:inline-size;border-radius:3.7%/5.6%;
  transform:rotateX(calc(7deg - var(--ty) * 14deg)) rotateY(calc(-9deg + var(--tx) * 18deg)) rotateZ(1deg);
  box-shadow:0 1px 0 #d9dbde,0 2px 0 #c9ccd0,0 3px 0 #b9bdc1,0 4px 0 #a9adb2,0 5px 0 #9a9ea3,0 6px 1px rgba(0,0,0,.35),0 40px 60px -28px rgba(0,0,0,.9),0 14px 26px -10px rgba(0,0,0,.6);transition:transform .25s ease-out}
.pp-pearl,.holo-ink,.holo-film{position:absolute;inset:0;border-radius:inherit;pointer-events:none}
.pp-pearl{background:radial-gradient(120% 90% at var(--lx) var(--ly),#fff 0%,#f6f5f7 38%,#eceef0 100%);box-shadow:inset 0 1px 0 #fff,inset 0 0 0 1px rgba(255,255,255,.7),inset 0 -1px 0 rgba(0,0,0,.08),inset 1px 0 0 rgba(255,255,255,.6)}
/* the ink: Axis marks in an iridescent film, visible only inside the travelling light */
.holo-ink{
  background:linear-gradient(calc(120deg + var(--tx) * 80deg),#ff5fa8 0%,#ff8a7a 18%,#c48bff 40%,#7aa8ff 62%,#4fd8f0 82%,#9ff0d6 100%);
  background-size:180% 180%;background-position:calc(50% + var(--tx) * 60%) calc(50% + var(--ty) * 60%);
  -webkit-mask-image:var(--holo-field),radial-gradient(circle at var(--lx) var(--ly),#000 0,rgba(0,0,0,.5) 15cqi,transparent 36cqi);
  mask-image:var(--holo-field),radial-gradient(circle at var(--lx) var(--ly),#000 0,rgba(0,0,0,.5) 15cqi,transparent 36cqi);
  -webkit-mask-size:100% 100%;mask-size:100% 100%;-webkit-mask-composite:source-in;mask-composite:intersect;opacity:.72}
/* the film: a faint rainbow glare over everything, so the card reads as foil even between marks */
.holo-film{background:linear-gradient(calc(105deg + var(--tx) * 40deg),transparent 30%,rgba(255,120,190,.10) 42%,rgba(150,140,255,.12) 50%,rgba(90,220,240,.10) 58%,transparent 70%);
  background-size:260% 100%;background-position:calc(100% - var(--lx)) 0;mix-blend-mode:multiply}
.pp-card.is-held{transition:transform .08s linear}

/* the face: printed ink on pearl */
.pp-face{position:absolute;inset:0;padding:6.2cqi 6.6cqi 5.4cqi;display:flex;flex-direction:column;color:var(--pp-ink);font-family:'DM Sans',sans-serif}
.pp-mark{width:1em;height:1em;flex:none;color:currentColor}
.pp-top{display:flex;align-items:center;gap:2cqi}
/* the mark on the card is itself a hologram: near-invisible silver until the light reaches it */
.holo-mark{display:block;width:5cqi;height:5cqi;
  background:linear-gradient(calc(130deg + var(--tx) * 120deg),#c9ccd0 0%,#ff6fae 30%,#9f8cff 50%,#45d3ee 70%,#c9ccd0 100%);background-size:300% 300%;
  background-position:calc(100% - var(--lx)) calc(100% - var(--ly));
  -webkit-mask:url(axis-mark.svg) center/contain no-repeat;mask:url(axis-mark.svg) center/contain no-repeat}
.pp-kind{font:600 2.1cqi/1 'JetBrains Mono',ui-monospace,monospace;letter-spacing:.32em;text-transform:uppercase;color:#3b3f43}
.pp-issuer{margin-left:auto;display:flex;align-items:center;gap:1.3cqi;font:500 2.2cqi/1 'DM Sans',sans-serif;color:var(--pp-sub)}
.pp-issuer .nx-dot{width:1.3cqi;height:1.3cqi}
.pp-mid{display:flex;align-items:center;justify-content:space-between;gap:4cqi;margin-top:auto}
.pp-id{display:flex;flex-direction:column;align-items:center;gap:1.8cqi;min-width:0;text-align:center}
.pp-id .nx-person{--s:21cqi;padding:0;background:none;box-shadow:0 2.4cqi 4cqi -2cqi rgba(0,0,0,.35)}
.pp-id .nx-person img{border:none}
.pp-id .nx-person::after{content:"";position:absolute;right:-.4cqi;bottom:.6cqi;width:5.6cqi;height:5.6cqi;border-radius:50%;
  background:#16181a url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23fff' stroke-width='2.6' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='m6 12.5 4 4 8-9'/%3E%3C/svg%3E") center/55% no-repeat;
  box-shadow:0 0 0 .7cqi #fff}
.pp-id b{display:block;font-size:5.4cqi;font-weight:700;letter-spacing:-.03em;color:var(--pp-ink);line-height:1.05}
.pp-id small{display:block;margin-top:.6cqi;font-size:2.4cqi;color:var(--pp-sub);white-space:nowrap}
.pp-carry{display:grid;grid-template-columns:1fr;gap:0;margin:0;min-width:34%}
.pp-carry div{display:flex;align-items:baseline;justify-content:space-between;gap:3cqi;padding:1.5cqi 0;border-bottom:1px solid rgba(0,0,0,.09)}
.pp-carry div:last-child{border-bottom:0}
.pp-carry dt{order:2;font:500 2.3cqi/1 'DM Sans',sans-serif;color:var(--pp-sub)}
.pp-carry dd{margin:0;font-size:4cqi;font-weight:700;letter-spacing:-.03em;color:var(--pp-ink);line-height:1;font-variant-numeric:tabular-nums}
.pp-low{display:flex;align-items:flex-end;justify-content:space-between;gap:3cqi;margin-top:3.4cqi}
.pp-knows{margin:0;font-size:2.15cqi;line-height:1.45;color:#4a4f53;max-width:62%}
.pp-knows span{display:block;font:600 1.75cqi/1 'JetBrains Mono',ui-monospace,monospace;letter-spacing:.2em;text-transform:uppercase;color:#8a8f93;margin-bottom:1cqi}
.pp-mrz{margin:2.6cqi 0 0;font:500 1.85cqi/1.5 'JetBrains Mono',ui-monospace,monospace;letter-spacing:.14em;color:#a2a6aa;white-space:nowrap;overflow:hidden}

/* the AIs: every assistant you use, each reading the same passport */
.pp-ais{display:grid;padding-bottom:30px!important;grid-template-columns:repeat(6,1fr);width:100%;margin:0;padding:0;list-style:none;position:relative;z-index:3}
.pp-ai{position:relative;z-index:2;display:flex;flex-direction:column;align-items:center;gap:8px;opacity:.55;transition:opacity .5s ease}
.pp-ai>img,.pp-ai-tile{position:relative;display:grid;place-items:center;width:58px;height:58px;border-radius:50%;object-fit:cover;background:var(--bg,#111);
  box-shadow:0 0 0 1px rgba(255,255,255,.14),0 14px 24px -14px rgba(0,0,0,.9);transition:box-shadow .5s ease,transform .5s var(--pp-ease)}
.pp-ai-tile img{width:52%;height:52%;object-fit:contain}
.pp-ai-tile img.is-dark{filter:brightness(0)}
.pp-ai b{font:500 12.5px/1 'DM Sans',sans-serif;color:#cfd6d4;letter-spacing:-.005em}
.pp-ai.is-on{opacity:1}
.pp-ai.is-on>img,.pp-ai.is-on .pp-ai-tile{transform:translateY(-3px) scale(1.06);
  box-shadow:0 0 0 2px #0b0d0e,0 0 0 4px transparent,0 0 0 3.5px rgba(196,139,255,.9),0 0 26px rgba(159,140,255,.55),0 14px 24px -14px rgba(0,0,0,.9)}
.pp-ai.is-on>img{outline:0}
.pp-ai.was-on{opacity:.85}
.pp-caption{min-height:40px;margin:-2% 0 0;position:relative;z-index:3;font:500 13.5px/1.4 'DM Sans',sans-serif;color:#97a19e;text-align:center;transition:opacity .35s ease}
.pp-caption b{color:#eef2f0;font-weight:600}
.pp-caption em{font-style:normal;display:block;color:#c9b8ff}
.pp-caption.is-swap{opacity:0}

/* the wires: hairlines from every AI converge on the card; the active one carries light */
/* every AI's wire meets at the MCP node; one trunk runs from it into the passport */
.pp-link{position:relative;z-index:1;width:100%;height:150px;margin:-30px 0 -10px}
.pp-wires{display:block;width:100%;height:100%;overflow:visible}
.pp-wires path.pp-trunk{stroke:rgba(185,164,255,.38);stroke-width:1.6}
.pp-wires path.pp-trunk.is-flow{stroke:#b9a4ff;stroke-dasharray:12 44;stroke-dashoffset:56;filter:drop-shadow(0 0 4px rgba(170,140,255,.9));animation:pp-flow 1.1s linear infinite}
.pp-mcp{position:absolute;left:40%;top:58.667%;transform:translate(-50%,-50%);display:inline-flex;align-items:center;gap:7px;height:34px;padding:0 13px 0 10px;border-radius:999px;
  background:linear-gradient(180deg,#15181a,#0b0d0e);color:#eef2f0;box-shadow:inset 0 0 0 1px rgba(255,255,255,.14),inset 0 1px 0 rgba(255,255,255,.1),0 6px 18px -6px rgba(0,0,0,.9),0 0 22px -4px rgba(170,140,255,.45)}
.pp-mcp svg{width:19px;height:19px;flex:none}
.pp-mcp b{font:650 12.5px/1 'DM Sans',sans-serif;letter-spacing:.06em}
.pp-mcp.is-ping{animation:pp-ping .9s ease-out}
@keyframes pp-ping{0%{box-shadow:inset 0 0 0 1px rgba(205,190,255,.7),inset 0 1px 0 rgba(255,255,255,.1),0 6px 18px -6px rgba(0,0,0,.9),0 0 30px 2px rgba(170,140,255,.85)}}
.pp-wires path{fill:none;stroke:rgba(255,255,255,.12);stroke-width:1.2;vector-effect:non-scaling-stroke}
.pp-wires path.is-on{stroke:#b9a4ff;stroke-width:1.6;stroke-dasharray:14 200;stroke-dashoffset:214;filter:drop-shadow(0 0 4px rgba(170,140,255,.9));animation:pp-flow 1.1s linear infinite}
@keyframes pp-flow{to{stroke-dashoffset:0}}

/* the server: the passport rests on it, lit from below by its light bar */
.pp-server{position:relative;width:46%;align-self:flex-end;margin-top:-16%;margin-right:-3%;z-index:1;pointer-events:none}
.pp-server img{display:block;width:100%;height:auto;-webkit-mask:radial-gradient(70% 66% at 50% 52%,#000 62%,transparent 100%);mask:radial-gradient(70% 66% at 50% 52%,#000 62%,transparent 100%)}
.pp-beam{position:absolute;left:22%;right:22%;top:-6%;height:46%;background:radial-gradient(50% 60% at 50% 70%,rgba(120,230,215,.35),rgba(160,140,255,.12) 55%,transparent);filter:blur(12px);z-index:2;animation:pp-glow 3.2s ease-in-out infinite}
@keyframes pp-glow{50%{opacity:.55}}
.pp-card-wrap{margin-top:0}

@media (max-width:560px){
  .pp-card-wrap{width:86%}
  .pp-server{width:52%;margin-top:-11%}
  .pp-ai>img,.pp-ai-tile{width:44px;height:44px}
  .pp-ai b{font-size:11px}
  .pp-link{height:118px}
  .pp-mcp{gap:6px;height:28px;padding:0 10px 0 8px}
  .pp-mcp svg{width:15px;height:15px}
  .pp-mcp b{font-size:11px}
}
@media (prefers-reduced-motion:reduce){.pp-card,.pp-beam,.pp-wires path,.pp-mcp{animation:none!important;transition:none!important}}