/* Critical first-paint loader: independent of the application bundle. */
.portfolio-loader { position: fixed; inset: 0; z-index: 2000; display: flex; flex-direction: column; align-items: center; justify-content: center; overflow: hidden; background: #fff; color: #171717; font-family: 'Geist Variable', system-ui, sans-serif; transition: opacity 360ms ease, visibility 360ms; }
.portfolio-loader.is-leaving { opacity: 0; visibility: hidden; pointer-events: none; }
.loader-workflow { position: relative; width: min(420px, 88vw); height: 100px; margin-bottom: 28px; }
.loader-wires { position: absolute; width: 100%; height: 100%; }
.loader-wire-run { stroke-dasharray: .22 .78; animation: loader-wire 1.6s linear infinite; }
.loader-node { position: absolute; top: 50%; width: 66px; height: 66px; margin: -33px 0 0 -33px; display: grid; place-items: center; border: 1px solid #e2e5e3; border-radius: 19px; background: #fff; box-shadow: 0 4px 0 #eeeeef, 0 8px 20px #00000008; animation: loader-node 1.6s ease-in-out infinite; }
.loader-node > svg { width: 26px; height: 26px; }
.loader-trigger { left: 14.285%; color: #239b56; }
.loader-n8n { left: 50%; animation-delay: .4s; }
.loader-n8n img { display: block; object-fit: contain; }
.loader-done { left: 85.715%; color: #239b56; animation-delay: .8s; }
.loader-title { font-size: clamp(22px, 3vw, 28px); font-weight: 500; letter-spacing: -.045em; }
.loader-label { margin-top: 12px; font-size: 11px; color: #777; letter-spacing: .02em; }
.portfolio-loading { overflow: hidden !important; }
.portfolio-loading .custom-cursor, .portfolio-loading .cursor-pill { visibility: hidden; }
@keyframes loader-wire { from { stroke-dashoffset: 1; } to { stroke-dashoffset: 0; } }
@keyframes loader-node { 0%, 65%, 100% { border-color: #e2e5e3; transform: translateY(0); } 20%, 40% { border-color: #239b56; transform: translateY(-3px); } }