/* ==========================================================
   CRITICAL GRAFFIX — SITE-WIDE AMBIENT LINE MOTION
   Moving highlights travel along existing accent geometry.
   Base borders remain stationary. 2026-09-15
   ========================================================== */
.cg-motion-host{position:relative;isolation:isolate;}
.cg-motion-edge{position:absolute;z-index:6;display:block;pointer-events:none;border-radius:999px;opacity:0;will-change:transform,opacity;}
.cg-motion-edge--top{top:-1px;left:0;width:92px;height:2px;background:linear-gradient(90deg,transparent,rgba(57,255,20,.30) 28%,rgba(210,255,198,.96) 52%,rgba(57,255,20,.34) 72%,transparent);box-shadow:0 0 7px rgba(57,255,20,.36),0 0 14px rgba(57,255,20,.13);animation:cgEdgeSweepRight 16s cubic-bezier(.45,.05,.55,.95) infinite;}
.cg-motion-edge--bottom{right:0;bottom:-1px;width:104px;height:2px;background:linear-gradient(90deg,transparent,rgba(0,229,255,.28) 28%,rgba(201,250,255,.96) 52%,rgba(0,229,255,.34) 72%,transparent);box-shadow:0 0 7px rgba(0,229,255,.36),0 0 14px rgba(0,229,255,.13);animation:cgEdgeSweepLeft 20s cubic-bezier(.45,.05,.55,.95) infinite;}
.cg-motion-edge--left{left:-1px;top:0;width:2px;height:78px;background:linear-gradient(180deg,transparent,rgba(57,255,20,.28) 28%,rgba(210,255,198,.94) 52%,rgba(57,255,20,.34) 72%,transparent);box-shadow:0 0 7px rgba(57,255,20,.32),0 0 14px rgba(57,255,20,.12);animation:cgEdgeSweepDown 19s cubic-bezier(.45,.05,.55,.95) infinite;}
.cg-motion-edge--right{right:-1px;bottom:0;width:2px;height:84px;background:linear-gradient(180deg,transparent,rgba(0,229,255,.28) 28%,rgba(201,250,255,.94) 52%,rgba(0,229,255,.34) 72%,transparent);box-shadow:0 0 7px rgba(0,229,255,.32),0 0 14px rgba(0,229,255,.12);animation:cgEdgeSweepUp 23s cubic-bezier(.45,.05,.55,.95) infinite;}
@keyframes cgEdgeSweepRight{0%,7%{transform:translateX(0);opacity:0}13%,87%{opacity:.78}93%,100%{transform:translateX(var(--cg-edge-x,1100px));opacity:0}}
@keyframes cgEdgeSweepLeft{0%,7%{transform:translateX(0);opacity:0}13%,87%{opacity:.70}93%,100%{transform:translateX(calc(var(--cg-edge-x,1100px)*-1));opacity:0}}
@keyframes cgEdgeSweepDown{0%,8%{transform:translateY(0);opacity:0}14%,86%{opacity:.66}92%,100%{transform:translateY(var(--cg-edge-y,420px));opacity:0}}
@keyframes cgEdgeSweepUp{0%,8%{transform:translateY(0);opacity:0}14%,86%{opacity:.62}92%,100%{transform:translateY(calc(var(--cg-edge-y,420px)*-1));opacity:0}}
.cg-motion-host{--cg-edge-x:1180px;--cg-edge-y:520px;}

/* Navigation rail: one short cyan/lime pulse smoothly ping-pongs across the fixed separator. */
.navbar{--cg-nav-rail-inset:max(30px,calc((100% - 1320px)/2));}
.navbar::before{content:"";position:absolute;z-index:8;left:var(--cg-nav-rail-inset);bottom:4px;width:clamp(90px,10vw,150px);height:2px;border-radius:999px;pointer-events:none;opacity:.82;background:linear-gradient(90deg,transparent,rgba(57,255,20,.22) 18%,rgba(127,255,102,.88) 39%,rgba(221,255,214,1) 50%,rgba(125,247,255,.90) 61%,rgba(0,229,255,.24) 82%,transparent);box-shadow:0 0 7px rgba(57,255,20,.20),0 0 10px rgba(0,229,255,.26);will-change:transform,opacity;animation:cgNavRailPingPong 13s ease-in-out infinite alternate;}
@keyframes cgNavRailPingPong{0%{transform:translateX(0);opacity:.28}8%,92%{opacity:.82}100%{transform:translateX(calc(100vw - (var(--cg-nav-rail-inset)*2) - clamp(90px,10vw,150px)));opacity:.30}}

/* Shared music control — text-first, intentionally no icon/glyph. */
.cg-sound-control{position:fixed;right:18px;bottom:18px;z-index:80;border:1px solid rgba(0,229,255,.34);background:rgba(2,5,8,.86);backdrop-filter:blur(8px);color:#cfe9ee;font:600 10px/1.1 Orbitron,system-ui,sans-serif;letter-spacing:.12em;text-transform:uppercase;padding:10px 12px;border-radius:4px;cursor:pointer;box-shadow:0 0 16px rgba(0,229,255,.08);transition:border-color .2s ease,color .2s ease,background .2s ease;}
.cg-sound-control:hover,.cg-sound-control:focus-visible{border-color:rgba(57,255,20,.62);color:#fff;background:rgba(4,9,12,.94);outline:none;}
.cg-sound-control[data-state="on"]{border-color:rgba(57,255,20,.42);}
.cg-sound-control[data-state="waiting"]{opacity:.72;}

/* Homepage CTA portfolio cross-fade. */
.cg-final-cta{grid-template-columns:minmax(190px,260px) minmax(0,1fr) auto!important;}
.cg-cta-portfolio-cycle{position:relative;width:100%;aspect-ratio:4/3;overflow:hidden;border:1px solid rgba(0,229,255,.24);background:#030506;box-shadow:0 0 0 1px rgba(57,255,20,.06) inset,0 12px 32px rgba(0,0,0,.28);}
.cg-cta-portfolio-cycle::before{content:"Selected work";position:absolute;z-index:5;left:10px;bottom:8px;padding:5px 7px;background:rgba(0,0,0,.66);color:rgba(255,255,255,.78);font:600 9px/1 Orbitron,sans-serif;letter-spacing:.13em;text-transform:uppercase;}
.cg-cta-portfolio-cycle img{position:absolute!important;inset:0;width:100%!important;height:100%!important;object-fit:cover!important;filter:none!important;opacity:0;transform:scale(1.012);transition:opacity 1.6s ease-in-out,transform 8.5s ease-out;z-index:1;}
.cg-cta-portfolio-cycle img.is-active{opacity:1;transform:scale(1);z-index:2;}
@media(max-width:900px){.navbar{--cg-nav-rail-inset:18px}.navbar::before{width:76px;animation-duration:10s}@keyframes cgNavRailPingPong{0%{transform:translateX(0);opacity:.26}8%,92%{opacity:.76}100%{transform:translateX(calc(100vw - (var(--cg-nav-rail-inset)*2) - 76px));opacity:.28}}.cg-motion-host{--cg-edge-x:760px;--cg-edge-y:600px}.cg-final-cta{grid-template-columns:minmax(150px,220px) 1fr!important}.cg-final-cta>.btn{grid-column:1/-1}.cg-sound-control{right:12px;bottom:12px}}
@media(max-width:640px){.cg-motion-host{--cg-edge-x:480px;--cg-edge-y:760px}.cg-final-cta{grid-template-columns:1fr!important}.cg-cta-portfolio-cycle{max-width:320px;margin:0 auto}.cg-final-cta>.btn{grid-column:auto}.cg-sound-control{font-size:9px;padding:9px 10px}}
@media(prefers-reduced-motion:reduce){.cg-motion-edge,.navbar::before{display:none!important;animation:none!important}.cg-cta-portfolio-cycle img{transition:none!important;opacity:0!important;transform:none!important}.cg-cta-portfolio-cycle img:first-child,.cg-cta-portfolio-cycle img.is-active{opacity:1!important}}

@supports (bottom: env(safe-area-inset-bottom)) {.cg-sound-control{bottom:calc(12px + env(safe-area-inset-bottom));}}