/* A freely scrolling workstation opens into a perspective scene as the visitor scrolls. */
.hero{max-width:1440px;height:auto;padding:0 4%;position:relative;margin:auto}
.studio-pin{position:relative;top:0;height:calc(100svh - 100px);min-height:540px;display:flex;flex-direction:column;padding:16px 0 18px}
.studio-intro{display:flex;justify-content:space-between;align-items:center;width:100%;max-width:1180px;margin:0 auto 8px;position:relative;z-index:2}
.studio-intro p{font-size:12px;letter-spacing:3px;font-weight:500}.studio-intro>span{font-size:9px;letter-spacing:1.8px;color:var(--color-muted)}
.studio-scene{height:auto;flex:1;min-height:390px;max-width:1230px;width:100%;margin:0 auto;perspective:none;transform:none!important;isolation:isolate;touch-action:pan-y}
.studio-scene.has-object-hover{cursor:grab}.studio-scene.is-dragging{cursor:grabbing}
.studio-word{position:absolute;top:18%;left:3%;width:94%;z-index:0;text-align:center;pointer-events:none;transform:translateY(var(--type-shift,0px))}
.studio-word h1{margin:0;line-height:1;letter-spacing:normal;transform:none;white-space:normal;font-size:inherit}
.studio-word svg{display:block;width:100%;height:clamp(180px,22vw,300px);color:var(--color-ink);overflow:visible}
#studio-canvas{position:absolute;inset:0;z-index:2;opacity:0;transition:opacity .35s}
#studio-canvas canvas{width:100%;height:100%;display:block}
.studio-scene[data-webgl=ready] #studio-canvas{opacity:1}
.studio-character{position:absolute;inset:0;margin:0;z-index:3;pointer-events:none;transition:opacity .3s}
.studio-character img{width:100%;height:100%;object-fit:contain;user-select:none}
.studio-scene[data-webgl=ready] .studio-character{opacity:0;visibility:hidden}
.studio-scene:not([data-webgl=ready]) .studio-word,.studio-scene:not([data-webgl=ready]) .studio-role{visibility:hidden}
.studio-ground{position:absolute;bottom:11%;left:38%;width:24%;height:18px;background:#444b40;filter:blur(20px);opacity:var(--ground-opacity,.25);border-radius:50%;transform:scaleX(var(--ground-scale,1));z-index:1;pointer-events:none}
.studio-role{position:absolute;top:71%;font-size:8px;letter-spacing:1.8px;line-height:1.8;z-index:1;color:var(--color-muted);pointer-events:none}.role-left{left:9%}.role-right{right:7%}
.studio-signature{position:absolute;left:50%;bottom:0;transform:translateX(-50%);z-index:4;font-size:10px;background:var(--color-surface);border:1px solid var(--color-rule);border-radius:30px;padding:12px 20px;white-space:nowrap;box-shadow:0 8px 24px -15px var(--color-shadow)}.studio-signature .tiny-dot{margin-right:8px}.studio-signature:hover{border-color:var(--color-ink)}
.hero-bottom{max-width:1180px;width:100%;margin:14px auto 0;flex-shrink:0;gap:20px}
.hero-zalo{display:flex;white-space:nowrap}
.studio-keyboard-controls{position:absolute;left:0;bottom:0;z-index:6;display:flex;gap:5px;max-width:70%;flex-wrap:wrap;opacity:0;pointer-events:none}
.studio-keyboard-controls:focus-within{opacity:1;pointer-events:auto}.studio-keyboard-controls button{font-size:10px;padding:8px;background:var(--color-surface);border:1px solid var(--color-rule);border-radius:6px}
.hero.reduce-motion{height:auto}.hero.reduce-motion .studio-pin{position:relative;top:0}
@media(min-width:1500px){.studio-pin{min-height:620px}.studio-scene{min-height:500px}}
@media(max-width:900px){.hero{padding-inline:25px}.studio-intro p{font-size:10px;letter-spacing:2px}.studio-intro>span{font-size:8px;letter-spacing:.9px}.studio-word{left:0;width:100%;top:22%}.studio-role{font-size:7px;letter-spacing:1px}.role-left{left:1%}.role-right{right:0}.studio-signature{font-size:9px;padding:11px 16px}}
@media(max-width:600px){.hero{height:auto;padding-inline:17px}.studio-pin{top:0;height:calc(100svh - 74px);min-height:570px;padding:12px 0 76px}.studio-intro{margin-bottom:5px}.studio-intro p{font-size:8px;letter-spacing:1.5px}.studio-intro>span{font-size:7px;letter-spacing:.5px}.studio-scene{min-height:365px;max-width:none}.studio-word{top:25%;left:-1%;width:102%}.studio-word svg{height:155px}.studio-role{display:none}.studio-signature{font-size:8px;padding:10px 13px;bottom:0}.hero-bottom{margin-top:14px;gap:12px}.hero-bottom p{font-size:8px;flex-basis:48%}.explore-link{font-size:8px}.hero-zalo{display:flex;font-size:9px;margin-left:auto;padding-block:5px}.contact-indicator{width:5px;height:5px}.studio-keyboard-controls{max-width:100%;bottom:38px}}
@media(prefers-reduced-motion:reduce){.hero{height:auto}.studio-pin{position:relative;top:0}#studio-canvas,.studio-character{transition:none}.studio-word{transform:none}}

/* Foot shadows track the rendered feet rather than a fixed section offset. */
:root{--color-foot-shadow:#30382c66;--color-foot-penumbra:#30382c00}
.studio-ground{left:var(--shadow-x,50%);top:var(--shadow-y,88%);bottom:auto;width:var(--shadow-width,22%);height:25px;border-radius:50%;background:radial-gradient(ellipse at 33% 50%,var(--color-foot-shadow),var(--color-foot-penumbra) 61%),radial-gradient(ellipse at 68% 50%,var(--color-foot-shadow),var(--color-foot-penumbra) 61%);filter:blur(7px);transform:translate(-50%,-50%) scaleX(var(--ground-scale,1));opacity:var(--ground-opacity,.53)}