/* Full-field, low-cost atmosphere. Text and controls sit above every effect. */
.blue-cover>.ambient-data{position:absolute;inset:0;width:100%;height:100%;z-index:0;opacity:1;pointer-events:none}.hero,.hero-integrations{z-index:2}.hero-art{z-index:-1}
.showcase-top-actions{display:flex;align-items:center;gap:12px}.atmosphere-toggle{display:flex;align-items:center;justify-content:center;width:40px;height:40px;background:#ffffff08;border:1px solid #bfb5e34a;border-radius:50%;color:#cfc0f4;transition:background-color .3s var(--ease),transform .5s var(--ease)}.atmosphere-toggle:hover{background:#c5b0ff20;transform:rotate(12deg)}.atmosphere-toggle svg{width:20px;height:20px}.atmosphere-toggle[aria-pressed=false]{color:#91899d;background:#ffffff04}.atmosphere-toggle:active{transform:scale(.94)}.showcase-top{margin-bottom:20px}
.reading-progress{position:absolute;left:0;right:0;bottom:-1px;height:2px;overflow:hidden;pointer-events:none}.reading-progress>span{display:block;width:100%;height:100%;background:linear-gradient(90deg,#9e8bea,#c8b6ff,#c3ddff);box-shadow:0 0 12px #baa4ff88;transform:scaleX(var(--reading-progress,0));transform-origin:left}
/* The long portfolio is its own graphite and iris environment. */
.work-section{position:relative;isolation:isolate;overflow:clip;max-width:none;background:radial-gradient(ellipse at 5% 4%,#46345766,transparent 35%),radial-gradient(ellipse at 95% 65%,#3d315966,transparent 40%),#181621;padding-bottom:32px;border-top:1px solid #d9c4ff24;border-bottom:1px solid #d9c4ff24}
.case-content{position:relative;z-index:1}.case-atmosphere{position:absolute;inset:0;z-index:0;pointer-events:none;overflow:clip}.case-particles{position:sticky;top:0;display:block;width:100%;height:100svh;pointer-events:none;opacity:.9}
.case-halo{position:absolute;width:560px;height:560px;border:1px solid #a78ccc16;border-radius:50%;box-shadow:0 0 0 48px #b69be405,0 0 0 96px #b69be403;animation:halo-drift 18s var(--ease) infinite alternate}.case-halo-one{top:12%;left:-320px}.case-halo-two{top:65%;right:-320px;animation-delay:-9s}@keyframes halo-drift{to{transform:translate3d(32px,-48px,0) rotate(12deg)}}
.work-section .section-label{color:#bca5e5}.work-section .work-heading h2{color:#f3effb}.work-section .work-heading>p{color:#b7aec8}.work-section .case-filters button{color:#bfb4d0;border:1px solid #77648f55;background:#bba1e807;border-radius:8px;transition:background-color .3s var(--ease),color .3s var(--ease),transform .5s var(--ease)}.work-section .case-filters button[aria-pressed=true]{background:#d4c4f5;color:#30203e;border-color:#d4c4f5}.work-section .case-filters button:after{display:none}.work-section .case-filters button:hover{background:#baa5e620;color:#fff;transform:translateY(-2px)}.work-section .case-filters button[aria-pressed=true]:hover{background:#e2d5fa;color:#30203e}.work-section .case-filters button>span{color:inherit}
.work-section .project-card{background:linear-gradient(135deg,#302a3de8,#211e2bea);border:1px solid #82709755;box-shadow:inset 0 1px 0 #d8c5ff10,0 16px 40px #08061124;backdrop-filter:blur(12px);color:#ece5f7}.work-section .project-card:hover{border-color:#af93c477;box-shadow:inset 0 1px 0 #d8c5ff24,0 24px 56px #08061144}.work-section .project-title{color:#f2edf9}.work-section .project-kind{background:#b698db18;border-color:#a487c633;color:#d1b9ed}.work-section .project-client{color:#aea3bf}.work-section .case-story p{color:#c1b7ce}.work-section .case-story b{color:#c6a6e5}.work-section .project-result{background:#b597dd12;border:1px solid #af8cd326;color:#d4bce9}.work-section .project-details{background:#d6b6ff05;color:#d4b7f3;border-color:#a182bd55}.work-section .project-details:hover{background:#d6b6ff15;border-color:#c4a2df}.work-section .project-card:before{background:radial-gradient(400px circle at var(--surface-x,50%) var(--surface-y,0%),#bd91e91a,transparent 75%)}
.work-section .project-card .case-visual{background:linear-gradient(135deg,#4a405c,#302d3b);border-top:1px solid #ac90cc22}.work-section .project-image-footer{color:#dac9f0}.work-section .project-card .case-visual>img{border-color:#a191b84d;box-shadow:0 16px 32px #0b071a33}.work-section .project-card .visual-hub,.work-section .project-screen-note{background:#262330;color:#c1b2d2}.work-section .project-card .visual-legal,.work-section .project-card .visual-legal .project-image-footer{background:#343040;color:#d7c4ed}
/* Touches produce a restrained local light pulse; normal actions continue. */
[data-surface]{position:relative;overflow:hidden}.touch-light{position:absolute;pointer-events:none;z-index:4;width:160px;height:160px;border-radius:50%;background:radial-gradient(circle,#c6adff28,transparent 68%);border:1px solid #c7a5f03d;transform:translate(-50%,-50%) scale(.25);opacity:0}.work-section .touch-light{background:radial-gradient(circle,#c6adff38,transparent 68%)}
/* Make the existing diagram a small working example, rather than decoration alone. */
.network-controls{display:flex;gap:8px;flex-wrap:wrap;padding:0 16px 16px}.network-controls button{flex:1;min-height:40px;padding:8px 12px;border-radius:8px;border:1px solid #8c74ae66;background:#c4a6ee08;color:#c9b5e1;font-size:14px;line-height:20px;transition:background-color .3s var(--ease),color .3s var(--ease),transform .3s var(--ease)}.network-controls button[aria-pressed=true]{background:#d3b7f5;color:#382244;border-color:#d3b7f5}.network-controls button:hover{background:#c4a6ee20}.network-controls button[aria-pressed=true]:hover{background:#e2cafb}.network-controls button:active{transform:scale(.96)}.data-network figcaption.network-caption{display:block;min-height:76px;font-size:14px;line-height:20px;color:#d0bde5;padding:0 16px 16px}.network-node rect{transition:fill .4s var(--ease),stroke .4s var(--ease)}.network-node rect.is-selected{fill:#66507c;stroke:#e5c6ff;stroke-width:2}.circuit-traces path{transition:stroke .4s var(--ease),opacity .4s var(--ease)}.circuit-traces path.is-selected{stroke:#d0aff1;stroke-width:3}
.floating-fragments{position:absolute;inset:0;overflow:hidden;pointer-events:none;z-index:0}.notifications-layout{position:relative;z-index:1}.glass-fragment{position:absolute;width:112px;height:112px;fill:#ad98cf13;stroke:#9b83ba75;stroke-width:.7;opacity:.7;animation:fragment-float 10s var(--ease) infinite alternate;filter:drop-shadow(0 16px 16px #65507e12)}.glass-fragment>path:nth-child(2){fill:#fff9}.glass-fragment>path:nth-child(3){fill:none;stroke:#ab93c399}.fragment-1{right:38%;top:48px;transform:rotate(-12deg)}.fragment-2{width:64px;height:64px;right:8%;bottom:64px;animation-delay:-5s}.notification-screen{animation:phone-float 8s var(--ease) infinite alternate}@keyframes fragment-float{to{transform:translate3d(12px,-24px,0) rotate(12deg)}}@keyframes phone-float{from{transform:translateY(0) rotate(2deg)}to{transform:translateY(-12px) rotate(-1deg)}}
.effects-paused .hero-art>img,.effects-paused .case-halo,.effects-paused .glass-fragment,.effects-paused .notification-screen,.effects-paused .signal-status{animation-play-state:paused!important}.effects-paused .ambient-data,.effects-paused .case-particles{opacity:0}.effects-paused .reading-progress{opacity:.5}
@media(max-width:800px){.blue-cover>.ambient-data{opacity:1}.work-section{padding-top:40px;padding-bottom:24px}.case-halo{width:400px;height:400px}.case-halo-one{left:-260px}.case-halo-two{right:-260px}.fragment-1{width:64px;height:64px;right:24px;top:180px;opacity:.35}.fragment-2{right:16px;bottom:80px}.reading-progress{height:2px}.data-network figcaption.network-caption{min-height:76px}}
@media(max-width:560px){.atmosphere-toggle{width:36px;height:36px}.showcase-top-actions{gap:8px}.network-controls{gap:8px}.network-controls button{padding:8px;min-height:44px}.work-section .project-copy{padding:24px}.case-particles{opacity:1}.glass-fragment{opacity:.4}}
@media(max-width:360px){.work-section .project-copy{padding:20px}.network-controls button{font-size:14px;line-height:20px;flex:1 1 35%}.data-network figcaption.network-caption{min-height:96px}}
@media(prefers-reduced-motion:reduce){.blue-cover>.ambient-data,.case-particles{display:none}.case-halo,.glass-fragment,.notification-screen{animation:none}.touch-light{display:none}.reading-progress>span{transition:none}.atmosphere-toggle:hover{transform:none}}

.effects-paused .hero-art>img,.effects-paused .hero-showcase .showcase-screen{transform:none;transition:none}