/* One interaction material across public pages, atelier and model controls. */
:root{--control-ease:cubic-bezier(.16,1,.3,1)}
:where(button,a.button,a.atelier-primary,a.atelier-secondary,summary){position:relative;isolation:isolate;overflow:hidden}
:is(button,a.button,a.atelier-primary,a.atelier-secondary,summary){transition:transform 200ms var(--control-ease),box-shadow 240ms var(--control-ease),background-color 160ms,color 160ms,border-color 160ms;-webkit-tap-highlight-color:transparent}
.detail-toggle{position:absolute}
summary{overflow:visible}
:is(button,a.button,a.atelier-primary,a.atelier-secondary,summary):not(.ring-order)::after{content:"";position:absolute;z-index:1;inset:0;pointer-events:none;border:0;border-radius:inherit;background:radial-gradient(ellipse at var(--light-x,50%) var(--light-y,30%),#ffffff40,transparent 65%);opacity:0;transition:opacity 180ms}
:is(button,a.button,a.atelier-primary,a.atelier-secondary,summary):focus-visible::after{opacity:.65}
.control-ripple{position:absolute;z-index:3;display:block;pointer-events:none;border-radius:50%;background:radial-gradient(circle,#c5dcf6aa 0%,#ffffff52 45%,transparent 72%);opacity:0;transform:translate(-50%,-50%) scale(0)}
:is(.button,.cookie-choice,.atelier-primary,.atelier-secondary,.controls button){box-shadow:inset 0 1px 0 #ffffff54,0 3px 0 #14365725,0 7px 16px #0d2b5010}
:is(.footer-button,.motion-toggle,.cookie-settings){border-radius:6px;transition:background-color 160ms,color 160ms,box-shadow 200ms}
.inventory-item{transition:border-color 160ms,background-color 160ms,box-shadow 200ms}
@media(hover:hover) and (pointer:fine){
 :is(button,a.button,a.atelier-primary,a.atelier-secondary,summary):not(:disabled):hover::after{opacity:.75}
 :is(.button,.cookie-choice,.atelier-primary,.atelier-secondary,.controls button):not(:disabled):hover{transform:translateY(-3px);box-shadow:inset 0 1px 0 #ffffff8c,0 4px 0 #14365725,0 12px 24px #0d2b502b}
 .inventory-item:not(:disabled):hover{box-shadow:inset 0 1px 0 white,0 5px 16px #0d2b5010}
 :is(.footer-button,.motion-toggle,.cookie-settings):hover{background-color:#7cadd522;box-shadow:inset 0 -1px 0 currentColor}
 .dialog-close:hover{transform:rotate(8deg);background-color:#8bb0d52a}
}
:is(button,a.button,a.atelier-primary,a.atelier-secondary,summary):not(.ring-order):is(:active,.is-pressing){transform:translateY(1px) scale(.975);transition-duration:90ms}
:is(.button,.cookie-choice,.atelier-primary,.atelier-secondary,.controls button):is(:active,.is-pressing){box-shadow:inset 0 2px 5px #0d2b5026,0 1px 0 #14365725}
:is(.footer-button,.motion-toggle,.cookie-settings,.inventory-item,summary):is(:active,.is-pressing){transform:none;background-color:#7cadd52e}
input[type=file]::file-selector-button{transition:transform 160ms var(--control-ease),background-color 160ms,box-shadow 160ms}
input[type=file]::file-selector-button:hover{background:#e8f1fa;box-shadow:inset 0 1px 0 white,0 3px 8px #0d2b501a}
input[type=file]::file-selector-button:active{transform:translateY(1px)}
/* The outer order control is the dock anchor and never moves. */
.ring-order,.ring-order:hover,.ring-order:active,.ring-order.is-pressing{transform:none}
.ring-order .order-face{transform:perspective(500px) rotateX(var(--tilt-x,0deg)) rotateY(var(--tilt-y,0deg));transition:transform 220ms var(--control-ease),box-shadow 220ms var(--control-ease)}
.order-face::before{background:radial-gradient(ellipse at var(--light-x,35%) var(--light-y,15%),#ffffffd9,transparent 65%),linear-gradient(125deg,#ffffff54,transparent 38%,#ffffff40 50%,transparent 68%)}
@media(hover:hover) and (pointer:fine){.ring-order:hover .order-face{transform:perspective(500px) translateY(-3px) rotateX(var(--tilt-x,0deg)) rotateY(var(--tilt-y,0deg));box-shadow:inset 0 3px 4px white,inset 0 -7px 9px #7296b150,0 8px 12px #0c2a4a66}.ring-order:hover svg{transform:translateX(5px)}}
.ring-order:is(:active,.is-pressing) .order-face{transform:perspective(500px) translateY(2px) rotateX(0deg) rotateY(0deg);box-shadow:inset 0 3px 6px #426b8d55,inset 0 -1px 3px white,0 1px 2px #0c2a4a44}
button:disabled{transform:none!important}.control-ripple:empty{line-height:0}
@media(prefers-reduced-motion:reduce){
 :is(button,a.button,a.atelier-primary,a.atelier-secondary,summary),.ring-order .order-face,input[type=file]::file-selector-button{transition:none}
 :is(button,a.button,a.atelier-primary,a.atelier-secondary,summary):is(:hover,:active,.is-pressing),.ring-order:hover .order-face,.ring-order:is(:active,.is-pressing) .order-face,input[type=file]::file-selector-button:active{transform:none}
 .control-ripple{display:none}:is(button,a.button,a.atelier-primary,a.atelier-secondary,summary)::after{display:none}
}
@media(forced-colors:active){.control-ripple,:is(button,a.button,a.atelier-primary,a.atelier-secondary,summary)::after{display:none}:is(button,a.button,a.atelier-primary,a.atelier-secondary,summary){box-shadow:none}.ring-order .order-face{transform:none}}

/* The existing explicit motion choice covers button feedback, too. */
html.controls-still :is(button,a.button,a.atelier-primary,a.atelier-secondary,summary,.order-face),html.controls-still input[type=file]::file-selector-button{transition:none!important}
html.controls-still :is(button,a.button,a.atelier-primary,a.atelier-secondary,summary):is(:hover,:active,.is-pressing),html.controls-still .ring-order:is(:hover,:focus-visible,:active,.is-pressing) .order-face{transform:none!important}
html.controls-still .control-ripple,html.controls-still :is(button,a.button,a.atelier-primary,a.atelier-secondary,summary)::after{display:none}
html.controls-still :is(.button,.detail-toggle)::before{display:none}
html.controls-still :is(.button,.ring-order) svg,html.controls-still input[type=file]::file-selector-button:active{transform:none!important;transition:none!important}
html.controls-still .detail-toggle svg{transition:none!important}
@media(prefers-reduced-motion:reduce){
 html.controls-motion :is(button,a.button,a.atelier-primary,a.atelier-secondary,summary){transition:transform 200ms var(--control-ease),box-shadow 240ms var(--control-ease),background-color 160ms,color 160ms,border-color 160ms!important}
 html.controls-motion :is(button,a.button,a.atelier-primary,a.atelier-secondary,summary)::after{display:block;transition:opacity 180ms!important}
 html.controls-motion .control-ripple{display:block}
 html.controls-motion .ring-order .order-face{transition:transform 220ms var(--control-ease),box-shadow 220ms var(--control-ease)!important}
 html.controls-motion :is(button,a.button,a.atelier-primary,a.atelier-secondary,summary):not(.ring-order):is(:active,.is-pressing){transform:translateY(1px) scale(.975)}
 html.controls-motion .ring-order:is(:active,.is-pressing) .order-face{transform:perspective(500px) translateY(2px)}
}
@media(prefers-reduced-motion:reduce) and (hover:hover) and (pointer:fine){
 html.controls-motion :is(.button,.cookie-choice,.atelier-primary,.atelier-secondary,.controls button):not(:disabled):hover{transform:translateY(-3px)}
 html.controls-motion .dialog-close:hover{transform:rotate(8deg)}
 html.controls-motion .ring-order:hover .order-face{transform:perspective(500px) translateY(-3px) rotateX(var(--tilt-x,0deg)) rotateY(var(--tilt-y,0deg))}
 html.controls-motion .ring-order:hover svg{transform:translateX(5px)}
}
@media(forced-colors:active){html.controls-motion .control-ripple,html.controls-motion :is(button,a.button,a.atelier-primary,a.atelier-secondary,summary)::after{display:none}.ring-order:is(:hover,:focus-visible,:active,.is-pressing) .order-face{transform:none!important}}