/* Industrial Glass — shared presentation layer, 27 October 2026.
   Existing layout, palette tokens and real routes remain the foundation. */
:root{--cut:10px;--ui-ease:cubic-bezier(.2,.75,.25,1);--title-shadow:0 1px 0 var(--glass-border),0 5px 22px var(--soft-shadow)}
.glass{--radius:18px}
.topbar{border-radius:14px;box-shadow:inset 0 1px 0 var(--specular),0 12px 38px -24px var(--soft-shadow)}
.overline,.widget-top,.toolbelt-label,.section-mini,.work-detail-block h3{font-family:Consolas,"Cascadia Code",monospace;letter-spacing:.12em}
.hero-copy h1{letter-spacing:-.065em;text-shadow:var(--title-shadow)}
.hero-still{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;z-index:3;pointer-events:none}
.page-hero h1,.section-heading h2,.contact-opening h1{font-weight:780;letter-spacing:-.045em;text-shadow:var(--title-shadow)}
.page-hero{min-height:185px}
.page-hero p,.intro-text,.about-story p{color:var(--ink-soft);line-height:1.75}
.btn,.social-chip,.contact-link,.weather-action,.certificate-action{
 position:relative;isolation:isolate;border-radius:2px!important;
 clip-path:polygon(0 0,calc(100% - var(--cut)) 0,100% var(--cut),100% 100%,var(--cut) 100%,0 calc(100% - var(--cut)));
 transition:transform .3s var(--ui-ease),background .3s,border-color .3s,box-shadow .3s!important;
}
.btn{min-height:52px;padding:12px 20px;font-size:12px;letter-spacing:.055em;border:1px solid var(--control-edge)}
.btn-primary{background:linear-gradient(120deg,var(--btn-front),color-mix(in srgb,var(--btn-front) 78%,var(--accent)));color:var(--btn-text)}
:root[data-mode="dark"] .btn-primary{background:linear-gradient(120deg,var(--btn-front),color-mix(in srgb,var(--btn-front) 78%,var(--accent)))}
.btn::after,.social-chip::after,.contact-link::after{content:"";position:absolute;inset:0;pointer-events:none;z-index:-1;background:linear-gradient(110deg,transparent 25%,var(--specular) 50%,transparent 75%);transform:translateX(-130%);opacity:.2;transition:transform .65s var(--ui-ease)}
:is(.btn,.social-chip,.contact-link):is(:hover,:focus-visible)::after{transform:translateX(130%)}
:is(.btn,.social-chip,.contact-link):is(:hover,:focus-visible){transform:translateY(-3px);border-color:var(--accent);box-shadow:inset 0 0 0 1px var(--accent)}
:is(.btn,.social-chip,.contact-link):active{transform:translateY(0) scale(.985)}
.btn .svg-icon{transition:transform .3s var(--ui-ease)}
.btn:hover .svg-icon{transform:translate(2px,-2px)}
/* Inset keyboard rings remain visible inside the cut geometry. */
:is(.btn,.social-chip,.contact-link,.work-filter a):focus-visible{outline:3px solid var(--accent-deep);outline-offset:-4px}
.navigation{border-radius:5px;padding:4px;gap:4px}
.navigation a{border-radius:2px;padding:10px 16px;min-height:40px;transition:color .25s,background .25s,transform .25s}
.navigation a::after{content:"";position:absolute;bottom:4px;left:24%;right:24%;height:2px;background:currentColor;transform:scaleX(0);transition:transform .3s var(--ui-ease)}
.navigation a.active::after,.navigation a:hover::after,.navigation a:focus-visible::after{transform:scaleX(1)}
.navigation a:hover{background:var(--accent-wash);color:var(--ink)}
.language-picker,.palette-picker{border-radius:5px}
.language-picker button{border-radius:2px}
.skin-choice{transition:transform .25s,outline-offset .25s}.skin-choice:hover{transform:scale(1.12)}
.icon-button,.circle-btn,.media-button{border-color:var(--control-edge);background:linear-gradient(140deg,var(--glass-top),var(--accent-wash));transition:transform .25s var(--ui-ease),background .25s,box-shadow .25s}
.icon-button:hover,.circle-btn:hover,.media-button:hover{background:var(--accent-wash);box-shadow:inset 0 0 0 1px var(--accent);transform:translateY(-2px)}
#motionToggle,#carouselPrev,.music-prev,.viewer-controls>.media-button:first-child{border-radius:3px 3px 1px 12px}
#mode,#carouselNext,.music-next,.viewer-controls>.media-button:last-child{border-radius:3px 3px 12px 1px}
.toolbelt{border-radius:8px;padding-block:14px}.toolbelt-label{border-right:1px solid var(--control-edge);padding-right:16px}
.tool-pill{border-radius:4px;background:linear-gradient(125deg,var(--glass-top),transparent);border-color:var(--control-edge);padding:7px 13px 7px 7px;gap:10px}
.tool-symbol{border-radius:3px;background:var(--accent-wash);width:32px;height:32px;flex-basis:32px;padding:7px}
.tool-symbol .svg-icon{width:17px;height:17px}.tool-symbol svg{width:17px;height:17px}
.tool-logo{max-width:18px;max-height:18px}.tool-pill>span:last-child{font-size:12px}
.work-filter{display:grid;grid-template-columns:repeat(5,minmax(0,1fr));padding:10px;gap:8px;border-radius:10px}
.work-filter a{display:flex;align-items:center;justify-content:center;text-align:center;min-height:54px;padding:10px 12px;border:1px solid var(--control-edge);border-radius:2px;line-height:1.35;text-transform:uppercase;letter-spacing:.035em;font-size:11px;position:relative;background:linear-gradient(120deg,var(--glass-top),var(--accent-wash));transition:background .25s,transform .25s,border-color .25s}
.work-filter a[aria-current="true"]{background:var(--btn-front);color:var(--btn-text);border-color:var(--btn-front)}
.work-filter a:hover{border-color:var(--accent);transform:translateY(-2px)}
.work-filter a{clip-path:polygon(0 0,calc(100% - 8px) 0,100% 8px,100% 100%,8px 100%,0 calc(100% - 8px))}
.work-item{border-radius:14px;transition:border-color .35s,box-shadow .35s}
.work-item:hover,.work-item:focus-within{border-color:var(--accent);box-shadow:inset 0 1px 0 var(--specular),0 15px 40px -25px var(--soft-shadow)}
.work-summary{grid-template-columns:minmax(210px,.62fr) minmax(0,1fr) 94px;min-height:224px}
.work-summary:focus-visible{outline:3px solid var(--accent-deep);outline-offset:-4px}
.work-summary-text{padding:30px 32px}
.work-summary-text h2{font-size:clamp(24px,2.7vw,40px);letter-spacing:-.035em;margin:0 0 13px}
.work-summary-text p{max-width:560px;font-size:15px}
.work-open{position:relative;isolation:isolate;align-self:stretch;width:auto;height:auto;margin:0;border:0;border-left:1px solid var(--control-edge);border-radius:0;background:linear-gradient(135deg,var(--accent-wash),transparent);overflow:hidden;transform:none!important}
.work-open::before{content:"";position:absolute;inset:0;z-index:-1;pointer-events:none;background:linear-gradient(135deg,transparent 30%,var(--accent-wash) 50%,transparent 70%);transform:translateY(-110%);transition:transform .8s var(--ui-ease)}
.work-summary:hover .work-open::before{transform:translateY(110%)}
.work-open::after{content:"";position:absolute;inset:16px 10px;border-top:1px solid var(--accent);border-bottom:1px solid var(--accent);opacity:.45;pointer-events:none}
.work-open .svg-icon{width:26px;height:26px;transition:transform .4s var(--ui-ease)}
.work-item[open] .work-open .svg-icon{transform:rotate(90deg)}
.work-item[open] .work-open{background:var(--accent-wash)}
.work-detail-block .tool-pill{padding:5px 9px 5px 5px;min-height:36px}.work-detail-block .tool-symbol{width:26px;height:26px;flex-basis:26px;padding:4px}
.work-detail-block .tool-pill>span{border:0}.work-detail-block .tool-pill>span:last-child{background:none;padding:0;font-size:11px}
.work-tools{display:flex;flex-wrap:wrap;gap:7px}.work-detail-block .tool-pill .tool-symbol{border:1px solid var(--control-edge)}
.home-social-links{grid-template-columns:repeat(4,minmax(0,1fr))}
.social-banner{padding:28px 32px}.home-social-links .social-chip{min-height:66px}
.contact-card-grid{grid-template-columns:repeat(2,minmax(0,1fr))}
.contact-link{min-height:100px}.contact-value{overflow-wrap:anywhere}
.profile-fact{border-radius:3px;border-left:2px solid var(--accent);background:linear-gradient(100deg,var(--accent-wash),transparent)}
.certificate-row{border-radius:4px;background:linear-gradient(110deg,var(--accent-wash),transparent)}
.certificate-action{--cut:5px}
/* Perimeter light travels behind the content; no diagrams overlap controls. */
.energy-panel::after{inset:0;border-radius:inherit;z-index:0;background:linear-gradient(90deg,transparent,var(--accent),transparent) 0 0/42% 1px no-repeat,linear-gradient(0deg,transparent,var(--accent),transparent) 100% 100%/1px 45% no-repeat;opacity:.4;animation:panelSignal 12s ease-in-out infinite;pointer-events:none}
.page-work .page-hero::after,.contact-main::after{animation-delay:-5s}
@keyframes panelSignal{0%,70%,100%{opacity:.18;background-position:0 0,100% 100%}78%{opacity:.65}90%{opacity:.32;background-position:100% 0,100% 0}}
.work-filter{animation:panelHover 9s ease-in-out infinite}
@keyframes panelHover{0%,100%{transform:translateY(0);box-shadow:inset 0 1px var(--specular),0 8px 22px -18px var(--soft-shadow)}50%{transform:translateY(-3px);box-shadow:inset 0 1px var(--specular),0 14px 28px -18px var(--soft-shadow)}}
/* Identical start/end coordinates make the two parallel traces tile seamlessly. */
.ambient-edge{width:48px;opacity:.38}.ambient-left{left:2px}.ambient-right{right:2px}
:root[data-mode="dark"] .ambient-edge{opacity:.42}
.ambient-edge::before,.ambient-edge::after{inset:-400px 0;mask:url('./assets/ui/circuit-rail-v2.svg') repeat-y center top / 44px 400px;animation:railFlowV2 32s linear infinite}
.ambient-edge::after{background:linear-gradient(180deg,transparent 24%,var(--accent-deep) 48%,var(--shine) 52%,transparent 65%);opacity:.7}
.ambient-right::before,.ambient-right::after{animation-direction:reverse}
@keyframes railFlowV2{to{transform:translateY(400px)}}
.music-panel{border-radius:12px;padding:22px;box-shadow:0 20px 60px -20px var(--soft-shadow);background:linear-gradient(145deg,color-mix(in srgb,var(--page-top) 85%,transparent),color-mix(in srgb,var(--page-low) 88%,transparent))}
.music-panel-head{border-bottom:1px solid var(--control-edge);padding-bottom:13px;margin-bottom:18px}
.music-panel-head strong{font-family:Consolas,monospace;font-size:12px;letter-spacing:.12em}
.music-art{font-size:0;display:flex;align-items:center;justify-content:center;gap:3px}
.music-art i{width:2px;height:10px;background:currentColor;transform-origin:center;animation:audioMeter .9s ease-in-out infinite alternate;animation-play-state:paused}
.music-art i:nth-child(2){height:16px;animation-delay:-.4s}.music-art i:nth-child(3){height:7px;animation-delay:-.7s}
.music-launch[data-playing="true"] .music-art i{animation-play-state:running}
@keyframes audioMeter{to{transform:scaleY(.35)}}
.music-current{letter-spacing:-.02em;font-size:22px}.music-track-label select{min-height:44px;border-radius:3px}
.music-status{border-left:2px solid var(--accent);padding-left:10px}
@media(min-width:1151px){.layout{padding-inline:56px}}
@media(max-width:1150px){.work-summary{grid-template-columns:220px minmax(0,1fr) 72px}.work-summary-text{padding:25px}.work-filter a{font-size:10px;padding-inline:7px}}
@media(max-width:760px){.navigation a{padding:10px 6px}.work-filter{grid-template-columns:repeat(2,minmax(0,1fr));animation:none}.work-filter a:last-child{grid-column:1/-1}.work-summary{grid-template-columns:105px minmax(0,1fr) 44px;min-height:190px}.work-summary-text{padding:22px 15px}.work-summary-text h2{font-size:22px;line-height:1.17}.work-summary-text p{font-size:13px}.work-open .svg-icon{width:20px;height:20px}.work-open::after{inset:12px 7px}.home-social-links{grid-template-columns:repeat(2,minmax(0,1fr))}.social-banner{padding:26px 20px}.page-hero{min-height:160px}.toolbelt-label{padding-right:10px}.contact-card-grid{grid-template-columns:1fr}.music-panel{padding:18px}.ambient-edge{display:none}}
@media(max-width:430px){.work-summary{grid-template-columns:82px minmax(0,1fr) 40px}.work-summary-text{padding:18px 12px}.work-summary-text h2{font-size:19px}.work-summary-text p{font-size:12px}.hero-actions .btn{padding-inline:15px;gap:14px}.home-social-links{grid-template-columns:1fr 1fr}.home-social-links .contact-value{font-size:10px}}
:root[data-motion="paused"] .work-filter,:root[data-motion="paused"] .energy-panel::after,:root[data-motion="paused"] .music-art i{animation:none!important;transform:none}
@media(prefers-reduced-motion:reduce){.work-filter,.music-art i,.energy-panel::after{animation:none!important}.ambient-edge::before,.ambient-edge::after{animation:none!important}:root[data-motion="running"] .ambient-edge::before,:root[data-motion="running"] .ambient-edge::after{animation:railFlowV2 32s linear infinite!important}:root[data-motion="running"] .ambient-right::before,:root[data-motion="running"] .ambient-right::after{animation-direction:reverse!important}}