/* Lighting and motion are separate from the approved transparent artwork. */
.glass-surface{--glass-x:50%;--glass-y:40%;--glass-dx:0px;--glass-dy:0px;position:relative;isolation:isolate;overflow:hidden;aspect-ratio:var(--facility-ratio,1748/900);background:var(--glass-line-backdrop);border-radius:16px;box-shadow:0 12px 40px #00000012}
.glass-surface::before{content:'';position:absolute;inset:0;z-index:0;pointer-events:none;background:radial-gradient(ellipse at var(--glass-x) var(--glass-y),#ffffff9e 0%,#ffffff24 30%,transparent 65%);opacity:.16;transition:opacity .7s ease}
.glass-surface::after{content:'';position:absolute;inset:0 0 35%;z-index:2;pointer-events:none;background:linear-gradient(180deg,#0b1014b8 0%,#13191f70 24%,#1b202626 60%,transparent 100%);opacity:0;transform:translateY(-12%);transition:opacity .75s ease,transform .9s cubic-bezier(.2,.7,.2,1)}
.glass-surface>img{position:absolute;inset:0;z-index:1;display:block;width:100%;height:100%;object-fit:contain;padding:3.5% 3%;background:none;transform:translate3d(0,0,0);transform-origin:center;filter:drop-shadow(0 12px 9px #00000026);transition:transform .85s cubic-bezier(.16,1,.3,1);user-select:none;-webkit-user-drag:none}
.glass-edge-light{display:none;pointer-events:none}
.glass-surface>.glass-edge-light{display:block;position:absolute;top:0;left:var(--glass-x);z-index:3;width:clamp(75px,18%,200px);height:2px;opacity:0;background:linear-gradient(90deg,transparent,#ffc20e,transparent);transform:translateX(-50%);transition:opacity .5s ease}
.glass-surface:focus-visible{outline:2px solid #ffc20e;outline-offset:4px}
.glass-surface:focus-visible::before,.project-feature:focus-visible .glass-surface::before{opacity:.8}
.glass-surface:focus-visible::after,.project-feature:focus-visible .glass-surface::after{opacity:.86;transform:translateY(0)}
.glass-surface:focus-visible>.glass-edge-light,.project-feature:focus-visible .glass-edge-light{opacity:.9}
.glass-surface:focus-visible>img,.project-feature:focus-visible .glass-surface>img{transform:translate3d(0,-5px,0) scale(1.015)}
.glass-line-figure>.glass-surface>img{height:100%;background:none}
.line-scene.is-glass>.glass-surface{width:100%}
.header .nav-line-visual.glass-surface{aspect-ratio:auto;box-shadow:none;background:var(--glass-line-backdrop)}
.header .nav-line-visual.glass-surface>img{position:absolute;inset:0 0 auto;height:calc(100% - 56px);padding:18px 16px;object-fit:contain;opacity:1;mask-image:none;background:none;transform:translate3d(0,0,0);transition:transform .85s cubic-bezier(.16,1,.3,1)}
.header .nav-line-visual.glass-surface .nav-visual-label{z-index:4;background:#111d;backdrop-filter:blur(6px)}
@media(hover:hover) and (pointer:fine){
 .glass-surface:hover::before{opacity:.8}
 .glass-surface:hover::after{opacity:.86;transform:translateY(0)}
 .glass-surface:hover>.glass-edge-light{opacity:.9}
 .glass-surface:hover>img{transform:translate3d(var(--glass-dx),calc(var(--glass-dy) - 5px),0) scale(1.015)}
 .header .nav-line-visual.glass-surface:hover>img,.header .nav-line-visual.glass-surface:focus-visible>img{transform:translate3d(var(--glass-dx),calc(var(--glass-dy) - 3px),0) scale(1.012)}
}
@media(max-width:680px){.glass-surface{border-radius:10px}.glass-surface>img{padding:4% 2%;filter:drop-shadow(0 5px 5px #00000020)}}
@media(prefers-reduced-motion:reduce){
 .glass-surface::before,.glass-surface::after,.glass-surface>.glass-edge-light,.glass-surface>img{transition:none!important}
 .glass-surface::after{transform:none!important;opacity:0!important}
 .glass-surface::before{opacity:.16!important}
 .glass-surface>.glass-edge-light{opacity:0!important}
 .glass-surface>img,.header .nav-line-visual.glass-surface>img{transform:none!important}
}
