/* Integration map — pop-out entrance, energy flow, 3D hover */
.map.fx .n1 { --nc: #3b6bff; --fx: 62%; --fy: 78%; --d: .35s; --fd: 0s; }
.map.fx .n2 { --nc: #ff2bd1; --fx: -62%; --fy: 78%; --d: .5s; --fd: -1.6s; }
.map.fx .n4 { --nc: #ff7a1a; --fx: -62%; --fy: -78%; --d: .65s; --fd: -3.2s; }
.map.fx .n3 { --nc: #a855f7; --fx: 62%; --fy: -78%; --d: .8s; --fd: -4.8s; }
.map.fx .node, .map.fx .hub, .map.fx svg { opacity: 0; }
.map.fx svg { transition: opacity .7s ease .35s; }
.map.fx.fx-in svg { opacity: 1; }
.map.fx.fx-in .hub { animation: fx-hub .85s cubic-bezier(.34,1.56,.64,1) both; }
.map.fx.fx-in .node { animation: fx-pop .95s cubic-bezier(.34,1.56,.64,1) var(--d) both; }
@keyframes fx-hub { 0% { opacity: 0; transform: scale(.3) rotate(-25deg); filter: blur(6px); } 60% { opacity: 1; filter: none; } 100% { opacity: 1; transform: none; } }
@keyframes fx-pop { 0% { opacity: 0; transform: translate(var(--fx), var(--fy)) scale(.15); filter: blur(10px); } 55% { opacity: 1; filter: none; } 100% { opacity: 1; transform: none; filter: none; } }
/* landing flash */
.map.fx .node::before { content: ""; position: absolute; inset: -1px; border-radius: inherit; border: 2px solid var(--nc); opacity: 0; pointer-events: none; }
.map.fx.fx-in .node::before { animation: fx-flash .9s ease-out calc(var(--d) + .5s) both; }
@keyframes fx-flash { 0% { opacity: .95; transform: scale(1); box-shadow: 0 0 30px var(--nc); } 100% { opacity: 0; transform: scale(1.28); box-shadow: 0 0 0 transparent; } }
/* hub heartbeat */
.map.fx .hub::after { content: ""; position: absolute; inset: -4px; border-radius: 50%; border: 2px solid rgba(255,43,209,.65); opacity: 0; pointer-events: none; }
.map.fx.fx-in .hub::after { animation: fx-beat 3.4s ease-out .9s infinite; }
@keyframes fx-beat { 0% { opacity: .8; transform: scale(1); } 70%, 100% { opacity: 0; transform: scale(1.75); } }
/* settled: float + 3D hover */
.map.fx.fx-landed .node { opacity: 1; animation: fx-float 6.4s ease-in-out var(--fd) infinite; transform: perspective(700px) rotateX(var(--rx, 0deg)) rotateY(var(--ry, 0deg)); transition: transform .25s ease, box-shadow .35s ease, background-color .35s ease; will-change: transform; }
.map.fx.fx-landed .hub { opacity: 1; }
@keyframes fx-float { 50% { translate: 0 -7px; } }
.map.fx.fx-landed .node:hover, .map.fx.fx-landed .node:focus-visible { transform: perspective(700px) rotateX(var(--rx, 0deg)) rotateY(var(--ry, 0deg)) scale(1.08); box-shadow: 0 0 0 1px var(--nc), 0 22px 50px -12px var(--nc), 0 0 46px -8px var(--nc); z-index: 3; }
.map.fx .node::after { content: ""; position: absolute; inset: 0; border-radius: inherit; pointer-events: none; background: linear-gradient(115deg, transparent 35%, rgba(255,255,255,.28) 50%, transparent 65%); background-size: 260% 100%; background-position: 130% 0; opacity: 0; }
.map.fx.fx-landed .node:hover::after { animation: fx-shine .85s ease forwards; }
@keyframes fx-shine { 0% { opacity: 1; background-position: 130% 0; } 100% { opacity: 1; background-position: -30% 0; } }
.map.fx.fx-landed .node:hover small i { animation-duration: .9s; }
.map .fx-dot { filter: drop-shadow(0 0 4px currentColor); }
@media (prefers-reduced-motion: reduce) { .map.fx .node, .map.fx .hub, .map.fx svg { opacity: 1 !important; } .map .fx-dot { display: none; } }