/* ============================================================ ng-depth.css — AURORA-X depth layer (2026-09-06) Cosmetic only. Three effects, all compositor-only: 1. pointer parallax on the ambient background layers 2. a one-shot specular sweep when a glass card enters view 3. a 1-2px hover lift on cards that had no hover state Nothing here runs unless ng-depth.js puts .ax-depth on . JS never adds that class under prefers-reduced-motion or the localStorage['aurora.depth']='0' kill switch, so an absent class == a completely inert stylesheet (no stuck transforms). Colours come from theme tokens only, so the 12 skins retint it. ============================================================ */ /* ---------- 1. pointer parallax ---------- The blobs .a1/.a2/.a3 own `transform` outright (drift1/2/3 keyframes on var(--amb)), so we never touch them. Instead we translate the CONTAINERS: .aurora (which carries the blobs), .stars (a sibling layer inside .aurora with only an opacity animation), and the ambient #brain3d canvas. --axp-x/--axp-y are set by JS in -1..1. Depth ordering — far layer moves least: .stars : aurora(6) + own(-3.5) = ~2.5px net (deepest) .aurora : 6px (mid) #brain3d: 13px (nearest) The .ax-parallax gate is separate from .ax-depth: coarse-pointer devices get the sweep and lift but no parallax at all. */ html.ax-parallax .aurora{ transform:translate3d(calc(var(--axp-x,0) * 6px), calc(var(--axp-y,0) * 6px), 0); } html.ax-parallax .aurora .stars{ transform:translate3d(calc(var(--axp-x,0) * -3.5px), calc(var(--axp-y,0) * -3.5px), 0); } /* brain3d is skipped in the brain view: brain-anat2.js projects its anatomy labels into page coordinates, so shifting the canvas there would desync the callouts. Everywhere else it is a mute backdrop. */ html.ax-parallax body:not([data-view=brain]) #brain3d{ transform:translate3d(calc(var(--axp-x,0) * 13px), calc(var(--axp-y,0) * 13px), 0); } /* ---------- 2. specular sweep ---------- One diagonal glint travelling across the glass as a card mounts. Runs once per element; ng-depth.js strips the class on animationend so no pseudo, animation or will-change is left behind. .panel / .node-card / .agent-card use ::after (their ::before is the conic border — untouched). .sec-hero already owns ::after (an 8s top-edge sweep from ng-v8.css), so it uses ::before instead. */ html.ax-depth .ax-sweep{position:relative} html.ax-depth .panel.ax-sweep::after, html.ax-depth .node-card.ax-sweep::after, html.ax-depth .agent-card.ax-sweep::after, html.ax-depth .deckcard.ax-sweep::after, html.ax-depth .sec-hero.ax-sweep::before{ content:""; position:absolute; inset:0; border-radius:inherit; pointer-events:none; z-index:3; mix-blend-mode:screen; background:linear-gradient(105deg, transparent 38%, color-mix(in srgb, var(--x-cyan) 16%, transparent) 47%, color-mix(in srgb, var(--t0) 26%, transparent) 50%, color-mix(in srgb, var(--x-cyan) 16%, transparent) 53%, transparent 62%); background-size:260% 100%; background-repeat:no-repeat; animation:ax-sweep 700ms var(--eo,cubic-bezier(0,0,.2,1)) 1 both; } /* .deckcard has no positioning context of its own; give it one only while the sweep is on it. */ html.ax-depth .deckcard.ax-sweep{position:relative} @keyframes ax-sweep{ from{background-position:170% 0;opacity:0} 12%{opacity:1} 88%{opacity:1} to{background-position:-70% 0;opacity:0} } /* ---------- 3. hover lift ---------- ONLY on the cards that had no hover state. .panel:hover and .agent-card:hover already exist in mockup-v11.html and are left exactly as they are. */ html.ax-depth .node-card{ transition:transform var(--tf) var(--ease), box-shadow var(--tf) var(--ease); } html.ax-depth .node-card::before{ transition:opacity var(--tf) var(--ease); } html.ax-depth .node-card:hover{ transform:translateY(-2px); box-shadow:0 10px 26px color-mix(in srgb, var(--bg) 55%, transparent), 0 0 20px color-mix(in srgb, var(--hue, var(--x-cyan)) 13%, transparent); } html.ax-depth .node-card:hover::before{opacity:.85} html.ax-depth .deckcard{ transition:transform var(--tf) var(--ease), border-color var(--tf) var(--ease), box-shadow var(--tf) var(--ease); } html.ax-depth .deckcard:hover{ transform:translateY(-1px); border-color:color-mix(in srgb, var(--x-cyan) 34%, var(--line2)); box-shadow:0 8px 22px color-mix(in srgb, var(--bg) 50%, transparent); } /* ---------- guards ---------- */ /* Belt and braces: even if the class somehow survives, reduced motion kills every part of this file. */ @media (prefers-reduced-motion: reduce){ html.ax-parallax .aurora, html.ax-parallax .aurora .stars, html.ax-parallax body:not([data-view=brain]) #brain3d{transform:none!important} html.ax-depth .panel.ax-sweep::after, html.ax-depth .node-card.ax-sweep::after, html.ax-depth .agent-card.ax-sweep::after, html.ax-depth .deckcard.ax-sweep::after, html.ax-depth .sec-hero.ax-sweep::before{display:none!important;animation:none!important} html.ax-depth .node-card, html.ax-depth .deckcard{transition:none!important} html.ax-depth .node-card:hover, html.ax-depth .deckcard:hover{transform:none!important} } /* No mouse == no parallax, ever. JS enforces this too; the media query is the second lock so a stale class can't leave a layer offset. */ @media (pointer: coarse){ html.ax-parallax .aurora, html.ax-parallax .aurora .stars, html.ax-parallax body:not([data-view=brain]) #brain3d{transform:none!important} }