/* Microinteractions only. Load after system.css and all family styles.
   Content is visible without this sheet and without JavaScript. */
:root{--motion-fast:140ms;--motion-ui:180ms;--motion-media:280ms;--motion-ease:cubic-bezier(.2,.65,.3,1)}
body[data-brand="sierra-nube"]{--motion-ui:220ms;--motion-media:320ms}
body[data-brand="luna-norte"]{--motion-ui:200ms;--motion-media:280ms}
body[data-brand="brasa-mare"]{--motion-ui:160ms;--motion-media:240ms}
body[data-brand="varela"]{--motion-ui:160ms;--motion-media:220ms}
body[data-brand="opsflow"]{--motion-fast:100ms;--motion-ui:140ms;--motion-media:180ms}
body[data-brand] :where(button,.btn,.button,.action,.solid-button,.sys-button,.viewer-external){transition-property:background-color,color,border-color,box-shadow;transition-duration:var(--motion-fast);transition-timing-function:var(--motion-ease)}
body[data-brand] :where(input,select,textarea){transition:border-color var(--motion-fast) var(--motion-ease),box-shadow var(--motion-fast) var(--motion-ease)}
:where(.text-link,.text-button,.explore-link,.nav-link,.table-action,.agenda-title,.nav-links a,.main-nav a,.site-nav a,.side-nav a,.mobile-nav a){transition:color var(--motion-fast) var(--motion-ease),background-color var(--motion-fast) var(--motion-ease),text-decoration-color var(--motion-fast) var(--motion-ease)}
:where(.text-link,.text-button,.explore-link,.table-action,.agenda-title):focus-visible{text-decoration:underline;text-underline-offset:.25em}
:where(button,.btn,.button,.action,.solid-button,.sys-button):not(:disabled):not([aria-disabled="true"]):active{box-shadow:inset 0 0 0 2px currentColor}
:where(button:disabled,[aria-disabled="true"]){animation:none;transition:none}
body[data-brand] :where(.filters button,.tabs button,.menu-tab,.sizes button,[data-category],[data-filter],[data-device]){transition:background-color var(--motion-fast) var(--motion-ease),color var(--motion-fast) var(--motion-ease),border-color var(--motion-fast) var(--motion-ease),box-shadow var(--motion-fast) var(--motion-ease)}
.project-image-link img,.product-image img,.image-link img{transition:transform var(--motion-media) var(--motion-ease),box-shadow var(--motion-media) var(--motion-ease)}
/* Focus gets the same image response as a pointer, in addition to the system outline. */
.project-card:focus-within .project-image-link img,.product-card:focus-within .product-image img{transform:scale(1.01)}
.project-card:focus-within .project-open{background:var(--navy,#213c35);color:#fff;transform:none}
.product-card:focus-within .image-link{opacity:1}
:where(.task-card,.doc-card,.room-card,.experience-card){transition:box-shadow var(--motion-ui) var(--motion-ease)}
:where(.task-card,.doc-card,.room-card,.experience-card):focus-within{box-shadow:0 0 0 2px var(--sys-action,#426444)}
@media(hover:hover) and (pointer:fine){
 .project-card:hover .project-image-link img,.product-card:hover .product-image img{transform:scale(1.01)}
 .project-image-link:hover .project-open{transform:none}
 :where(.task-card,.doc-card,.room-card,.experience-card):hover{box-shadow:0 3px 12px #1c302414}
}
/* A short surface response accompanies persistent textual confirmations. */
:where(.action-summary,.status-message,.form-status,.confirmation,.message):not([hidden]):not(:empty){animation:motion-confirm var(--motion-ui) ease-out 1}
dialog[open]{animation:motion-dialog var(--motion-ui) var(--motion-ease) 1}
@keyframes motion-confirm{from{box-shadow:0 0 0 3px #6b80652b}to{box-shadow:0 0 0 0 transparent}}
@keyframes motion-dialog{from{opacity:.96;transform:translateY(4px)}to{opacity:1;transform:translateY(0)}}
@media(prefers-reduced-motion:reduce){
 html{scroll-behavior:auto!important}
 *,*::before,*::after{animation:none!important;transition:none!important;scroll-behavior:auto!important}
 .project-card .project-image-link img,.product-card .product-image img,.project-open{transform:none!important}
}
@media(forced-colors:active){
 :where(.task-card,.doc-card,.room-card,.experience-card):focus-within{outline:2px solid Highlight;outline-offset:2px;box-shadow:none}
 :where(button,.btn,.button,.action,.solid-button,.sys-button):not(:disabled):active{outline:2px solid Highlight;outline-offset:2px;box-shadow:none}
}
