/* Brighter, visible glass frames, positioned around the portrait silhouette. */
.hero-stage[data-pose=close] .hero-effects{mask-image:none;-webkit-mask-image:none}
.hero-stage .code-pane{width:45%;background:linear-gradient(135deg,#24454d72,#18192d82);border:1px solid #38bdf89c;box-shadow:0 0 16px #38bdf82a,inset 0 0 22px #38bdf807;backdrop-filter:blur(16px);transform-origin:center;transition:transform .22s ease-out,box-shadow .3s}
.hero-stage .code-pane:after{inset:-2px;padding:2px;background:conic-gradient(from var(--code-edge-angle),#38bdf820 0deg,#38bdf820 180deg,#38bdf8 240deg,#a7fff0 270deg,#6366f1 305deg,#38bdf820 350deg);animation-duration:10s;filter:drop-shadow(0 0 5px #38bdf8)}
.hero-stage .pane-a{left:-7%;top:5%;transform:perspective(700px) rotateX(var(--tilt-y,0deg)) rotateY(var(--tilt-x,0deg)) rotate(-7deg)}
.hero-stage .pane-b{right:-5%;top:31%;border-color:#9294ffb0;box-shadow:0 0 19px #6366f13b;transform:perspective(700px) rotateX(var(--tilt-y,0deg)) rotateY(var(--tilt-x,0deg)) rotate(7deg)}
.hero-stage .pane-c{left:-4%;top:61%;border-color:#10b981a0;box-shadow:0 0 20px #10b9812c;transform:perspective(700px) rotateX(var(--tilt-y,0deg)) rotateY(var(--tilt-x,0deg)) rotate(-3deg)}
.code-pane code{color:#d2e1e9;font-size:10px}.code-pane code b{color:#74d7ff}.code-pane code em{color:#8ef0c7}.code-pane small{color:#c1d4dc}
.hero-stage[data-pose=close] #hero-portrait{width:100%;left:9%;height:91%}
/* Organic elliptical loops: stationary geometry, rotating edge highlights only. */
.creative-optical{overflow:visible}.creative-optical .curve-base{stroke-width:1.3;opacity:.65;filter:drop-shadow(0 0 3px currentColor)}
.creative-optical .optical-green .curve-base{stroke:url(#orbit-emerald)}.creative-optical .optical-purple .curve-base{stroke:url(#orbit-indigo)}.creative-optical .optical-blue .curve-base{stroke:url(#orbit-cyan)}
.creative-optical .curve-light{stroke-width:2.6;stroke-dasharray:120 880;filter:drop-shadow(0 0 5px currentColor);animation-duration:24s}.creative-optical .optical-purple .curve-light{animation-duration:30s}.creative-optical .optical-blue .curve-light{animation-duration:36s}
/* A tighter zigzag tool network alongside the standing figure. */
.hero-stage[data-hero-variant=architecture] .live-pipeline{display:block;left:4%;top:10%;width:59%;height:76%;gap:0}
.live-pipeline .pipeline-caption{position:absolute;top:-21px;left:1%;font-size:8px;letter-spacing:1.5px;color:#a0b7b5;white-space:nowrap}
.live-pipeline>.flow-link{display:none}.zigzag-connectors{position:absolute;inset:0;width:100%;height:100%;overflow:visible;pointer-events:none}.net-secondary{stroke:#38bdf81a;stroke-width:.65}.net-main{stroke:#38bdf854;stroke-width:1}.net-pulse{stroke:#6fffe1;stroke-width:1.6;stroke-dasharray:33 967;filter:drop-shadow(0 0 4px #10b981);animation:zigzag-event 14s linear infinite}
.live-pipeline .flow-node{position:absolute;left:12%;top:calc(6.25% + var(--step)*13.75% - 16px);width:92px;min-height:0;display:flex;flex-direction:column;align-items:center;gap:6px;transform:translateX(-50%);text-align:center;color:#c4d4d8;z-index:1;font-size:10px}
.live-pipeline .flow-node:nth-of-type(even){left:72%}.live-pipeline .flow-node svg{width:32px;height:32px;filter:drop-shadow(0 0 6px #38bdf847);background:#121216c2;border-radius:50%;padding:3px;box-sizing:content-box}.live-pipeline .flow-node small{font-size:6px;color:#93a7af;margin-top:3px}.hero-stage[data-pose=standing] #hero-portrait{left:29%;width:82%}
@keyframes zigzag-event{to{stroke-dashoffset:-1000}}
/* Seated: luminous aurora ribbons with a clear, gentle background transition. */
.seated-atmosphere{mask-image:radial-gradient(ellipse,#000 53%,transparent 90%)}.seated-atmosphere i{width:43%;left:0;background:linear-gradient(170deg,transparent,#10b98142 34%,#38bdf811 65%,transparent);filter:blur(23px);animation:seated-light-drift 10s ease-in-out infinite alternate}.seated-atmosphere i:nth-child(2){left:51%;background:linear-gradient(175deg,transparent,#6366f14f 35%,#38bdf827 66%,transparent)}.seated-atmosphere i:nth-child(3){width:26%;left:74%;background:linear-gradient(transparent,#38bdf83b,transparent)}
.seated-ribbons{position:absolute;inset:0;width:100%;height:100%;overflow:visible}.seated-ribbons path{stroke:#10b981;stroke-width:1.3;stroke-linecap:round;stroke-dasharray:230 620;opacity:.65;filter:drop-shadow(0 0 7px #10b981);animation:seated-ribbon-travel 18s linear infinite}.seated-ribbons path:nth-child(2){stroke:#6366f1;filter:drop-shadow(0 0 7px #6366f1);animation-delay:-8s;animation-duration:24s}.seated-ribbons path:nth-child(3){stroke:#38bdf8;filter:drop-shadow(0 0 7px #38bdf8);animation-delay:-13s;animation-duration:28s}
@keyframes seated-light-drift{to{translate:14px -17px;opacity:.5}}@keyframes seated-ribbon-travel{to{stroke-dashoffset:-850}}
/* Pointer tilt settings; photos remain unfiltered on hover. */
.hero-stage{--photo-rim:#38bdf8;--rim-soft:#38bdf83d;--tilt-x:0deg;--tilt-y:0deg}.hero-stage[data-pose=folded]{--photo-rim:#10b981;--rim-soft:#10b9813d}.hero-stage[data-pose=seated]{--photo-rim:#9395ff;--rim-soft:#6366f14d}.hero-stage[data-pose=laptop]{--photo-rim:#38bdf8;--rim-soft:#38bdf83d}.hero-stage[data-pose=standing]{--photo-rim:#10b981;--rim-soft:#10b9813d}.hero-stage #hero-portrait{transition:opacity .28s ease,translate .45s cubic-bezier(.16,1,.3,1),filter .45s ease}
@media(hover:hover) and (pointer:fine){.hero-stage:hover .code-pane{box-shadow:0 0 27px #38bdf84a,inset 0 0 24px #38bdf810}.hero-stage:hover .pane-b{box-shadow:0 0 28px #6366f15c}.hero-stage:hover .pane-c{box-shadow:0 0 27px #10b9814d}}
@media(max-width:1023px){.hero-stage .code-pane{width:45%}.code-pane code{font-size:8px}.live-pipeline .flow-node{width:78px;font-size:9px}.live-pipeline .flow-node svg{width:28px;height:28px}}
@media(max-width:767px){.hero-stage .code-pane{width:46%}.hero-stage .pane-a{left:-3%;top:4%}.hero-stage .pane-b{right:-3%;top:32%}.hero-stage .pane-c{left:-1%;top:63%}.code-pane code{font-size:7px}.hero-stage[data-pose=close] #hero-portrait{left:8%;width:99%}.hero-stage[data-hero-variant=architecture] .live-pipeline{left:3%;top:8%;width:60%;height:76%}.live-pipeline .flow-node{width:73px;font-size:8px;gap:3px}.live-pipeline .flow-node svg{width:24px;height:24px;padding:2px}.live-pipeline .flow-node small{font-size:5px}.live-pipeline .pipeline-caption{font-size:6px;top:-18px}.hero-stage[data-pose=standing] #hero-portrait{left:30%;width:83%}.creative-optical .curve-light{stroke-width:2}.seated-ribbons path{stroke-width:1.1}}
@media(prefers-reduced-motion:reduce){.hero-stage .code-pane{transform:none!important;transition:none}.net-pulse,.seated-ribbons path,.seated-atmosphere i{animation:none!important}.hero-stage #hero-portrait{transition:none}}
.motion-paused .code-pane{transform:none!important}
.hero-stage .pane-b{right:5%;width:41%}.hero-stage[data-pose=laptop] .hero-effects{mask-image:none;-webkit-mask-image:none}@media(max-width:767px){.hero-stage .pane-b{right:4%;width:42%}}