/* Photography and monitor content share one scroll-controlled camera. */
.gbs-software-intro { position:relative; isolation:isolate; height:var(--intro-height,100svh); background:#ecf4fa; overflow-anchor:none; }
.gbs-entrance-ready:not(.gbs-entrance-complete) .gbs-software-intro { height:calc(var(--intro-height,100svh)*4); }
.gbs-software-intro .gbs-entrance-viewport { position:sticky; top:0; height:var(--intro-height,100svh); overflow:hidden; }
.gbs-software-intro .gbs-welcome { position:absolute; inset:0; z-index:4; display:grid; place-items:center; background:transparent; opacity:1; transform:none; pointer-events:none; }
.gbs-software-intro .gbs-raster-welcome { opacity:var(--native-welcome-opacity,1); border-radius:0; transform:translate(var(--welcome-x,0px),var(--welcome-y,0px)) scale(var(--welcome-scale-x,1),var(--welcome-scale-y,1)); transform-origin:0 0; }
.gbs-entrance-complete .gbs-software-intro .gbs-welcome { pointer-events:auto; }
.gbs-entrance-complete .gbs-software-intro .gbs-raster-welcome { opacity:1; }
.gbs-software-intro .gbs-welcome-composite picture,.gbs-software-intro .gbs-welcome-composite img { display:block; width:100%; height:100%; object-fit:contain; }
.gbs-software-intro .gbs-welcome-hotspot { position:absolute; transition:background .2s; }
.gbs-software-intro .gbs-welcome-hotspot:focus-visible { outline:3px solid #376ba9; outline-offset:3px; }
.gbs-software-intro .gbs-entrance-replay { display:none; position:absolute; left:50%; bottom:12px; transform:translateX(-50%); z-index:5; }
.gbs-entrance-complete .gbs-software-intro .gbs-entrance-replay { display:flex; }
.gbs-code-stage { position:absolute; inset:0; z-index:3; overflow:hidden; visibility:hidden; pointer-events:none; }
.gbs-entrance-ready:not(.gbs-entrance-complete) .gbs-code-stage { visibility:visible; }
.gbs-code-stage::before { content:""; position:absolute; inset:0; background:#ecf4fa; }
.gbs-photo-environment { display:none; position:absolute; inset:-30px; filter:blur(24px); opacity:calc(var(--photo-opacity,1)*var(--photo-copy-opacity,1)); }
.gbs-photo-environment img { display:block; width:100%; height:100%; object-fit:cover; }
.gbs-software-intro[data-scene-fit="wide"] .gbs-photo-environment { display:block; }
.gbs-software-intro[data-scene-fit="wide"] .gbs-photo-source { mask-image:linear-gradient(to bottom,rgba(0,0,0,var(--photo-copy-opacity,1)) 0%,rgba(0,0,0,var(--photo-copy-opacity,1)) var(--photo-copy-start,28%),#000 var(--photo-copy-end,31%)),linear-gradient(to right,transparent,#000 5%,#000 95%,transparent); mask-composite:intersect; }
.gbs-entrance-ready:not(.gbs-entrance-complete) .page-home .atelier-header { opacity:var(--intro-nav-opacity,0); visibility:visible; pointer-events:none; transform:translateY(var(--intro-nav-y,-15px)); }
.gbs-entrance-ready:not(.gbs-entrance-complete) .atelier-to-top { display:none!important; }
.gbs-real-world { position:absolute; left:0; top:0; width:var(--world-width,100%); height:var(--world-height,100%); transform:translate(var(--world-x,0px),var(--world-y,0px)) scale(var(--world-scale-x,1),var(--world-scale-y,1)); transform-origin:0 0; will-change:transform; }
.gbs-photo-source { position:absolute; inset:0; display:block; opacity:var(--photo-opacity,1); mask-image:linear-gradient(to bottom,rgba(0,0,0,var(--photo-copy-opacity,1)) 0%,rgba(0,0,0,var(--photo-copy-opacity,1)) var(--photo-copy-start,28%),#000 var(--photo-copy-end,31%)); }
.gbs-photo-source img { display:block; width:100%; height:100%; }
.gbs-monitor-screen { position:absolute; left:var(--screen-x,24.82%); top:var(--screen-y,28.69%); width:var(--screen-width,50.06%); height:var(--screen-height,41.98%); border-radius:var(--screen-radius-x,2px) / var(--screen-radius-y,2px); overflow:hidden; background:#ecf4fa; opacity:var(--screen-opacity,1); }
.gbs-monitor-code { position:absolute; inset:0; background:#101a25; opacity:var(--code-opacity,1); filter:blur(var(--code-blur,0px)); }
.gbs-typing-definitions { position:absolute; pointer-events:none; }
.gbs-code-raster { position:absolute; inset:0; }
.gbs-screen-source { display:block; width:100%; height:100%; }
.gbs-screen-source img { display:block; width:100%; height:100%; object-fit:fill; }
.gbs-typing-caret { position:absolute; left:var(--caret-x,19.1%); top:var(--caret-y,11%); width:.17%; min-width:1px; height:var(--caret-height,3%); background:#c6def3; border-radius:1px; animation:gbs-typing-blink .9s steps(1,end) infinite; }
@keyframes gbs-typing-blink { 0%,55% { opacity:1; } 56%,100% { opacity:0; } }
.gbs-monitor-site { position:absolute; left:0; top:0; display:grid; place-items:center; width:var(--site-width,100%); height:var(--site-height,100%); transform:scale(var(--site-unscale-x,1),var(--site-unscale-y,1)); transform-origin:0 0; background:#ecf4fa; opacity:var(--site-opacity,0); filter:blur(var(--site-blur,0px)); }
.gbs-monitor-site picture,.gbs-monitor-site img { display:block; width:100%; height:100%; object-fit:contain; }
.gbs-monitor-site picture { width:var(--site-content-width,100%); }
.gbs-software-intro .gbs-welcome-composite img,.gbs-monitor-site img { mask-image:linear-gradient(to right,transparent,#000 1.5%,#000 98.5%,transparent),linear-gradient(to bottom,transparent,#000 1.5%,#000 98.5%,transparent); mask-composite:intersect; }
.gbs-monitor-reflection { position:absolute; inset:0; opacity:var(--reflection-opacity,0); background:linear-gradient(115deg,transparent 15%,#ffffffbb 48%,transparent 80%); transform:translateX(var(--reflection-x,-140%)); pointer-events:none; }
.gbs-monitor-glass { position:absolute; inset:0; opacity:var(--glass-opacity,1); background:linear-gradient(125deg,#d6e5ec10 0%,transparent 47%,#0a11170c 100%); box-shadow:inset 0 0 3px #0008; }
.gbs-cinema-vignette { position:absolute; inset:0; background:linear-gradient(0deg,#0a111744,transparent 22%); opacity:var(--photo-opacity,1); }
.gbs-code-progress { position:absolute; z-index:6; left:0; bottom:0; width:100%; height:2px; background:#82b0ed12; opacity:var(--progress-opacity,1); overflow:hidden; }
.gbs-code-progress span { display:block; height:100%; width:100%; background:linear-gradient(90deg,#648ab4,#a8c8cb); transform:scaleX(var(--scroll-progress,0)); transform-origin:left; }
.gbs-software-intro .gbs-entrance-hud { position:absolute; z-index:6; left:6%; right:6%; bottom:7%; display:none; align-items:center; justify-content:space-between; gap:20px; pointer-events:none; opacity:var(--hud-opacity,1); }
.gbs-entrance-ready:not(.gbs-entrance-complete) .gbs-entrance-hud { display:flex; }
.gbs-software-intro .gbs-intro-start { display:block; width:180px; padding:0; border:0; border-radius:12px; background:transparent; overflow:hidden; cursor:pointer; pointer-events:auto; min-height:44px; box-shadow:0 6px 24px #0a11171a; }
.gbs-intro-start>img { display:block; width:100%; height:auto; }
.gbs-intro-start:focus-visible,.gbs-entrance-skip:focus-visible,.gbs-entrance-replay:focus-visible { outline:3px solid #78b6ff; outline-offset:5px; }
.atelier-page .gbs-software-intro .gbs-entrance-skip { position:relative; right:auto; bottom:auto; width:145px; min-height:44px; cursor:pointer; pointer-events:auto; border-radius:12px; box-shadow:0 6px 24px #0a11171a; }
@media(max-width:650px) {
 .gbs-entrance-ready:not(.gbs-entrance-complete) .gbs-software-intro { height:calc(var(--intro-height,100svh)*3.5); }
 .gbs-software-intro .gbs-entrance-hud { left:5%; right:5%; bottom:5%; gap:14px; }
 .gbs-software-intro .gbs-intro-start { width:48%; max-width:180px; }
 .atelier-page .gbs-software-intro .gbs-entrance-skip { width:34%; max-width:135px; }
}
@media(max-height:520px) and (orientation:landscape) {
 .gbs-software-intro .gbs-entrance-hud { bottom:4%; }
 .gbs-software-intro .gbs-intro-start { width:145px; }
 .atelier-page .gbs-software-intro .gbs-entrance-skip { width:115px; }
}
@media(max-width:900px), (max-height:500px) and (pointer:coarse) {
 .gbs-entrance-ready:not(.gbs-entrance-complete) .gbs-software-intro { height:var(--intro-height,100svh); }
 .gbs-entrance-ready:not(.gbs-entrance-complete) .gbs-software-intro .gbs-entrance-hud,.gbs-entrance-complete .gbs-software-intro .gbs-entrance-replay { display:none; }
}
@media(prefers-reduced-motion:reduce) {
 .gbs-software-intro *,.gbs-software-intro *::before,.gbs-software-intro *::after { animation:none!important; }
}