/* T6-B: shared state semantics, case-specific material and pace. No new animation runtime. */
html[data-portfolio-page=clirik]{--micro-accent:var(--cl-orange)}
html[data-portfolio-page=macy-pan]{--micro-accent:var(--mp-blue)}
.r1-case{--micro-accent:#dfc7f2}
:is(.cl-header nav,.mp-header nav,.r1-case .nav-links) a{position:relative;text-decoration:none!important}
:is(.cl-header nav,.mp-header nav,.r1-case .nav-links) a::after{content:"";position:absolute;left:0;right:0;bottom:5px;height:1px;background:currentColor;transform:scaleX(0);transform-origin:left;transition:transform 200ms cubic-bezier(.22,1,.36,1)}
:is(.cl-header nav,.mp-header nav,.r1-case .nav-links) a:is(:hover,:focus-visible)::after{transform:scaleX(1)}
:is(.cl-chapters,.mp-chapters) a{transition:color 180ms ease;text-underline-offset:6px;text-decoration-thickness:1px}
:is(.cl-chapters,.mp-chapters) a:is(:hover,:focus-visible){color:var(--micro-accent);text-decoration:underline}
:is(.cl-footer,.mp-footer,.r1-case .site-footer) a[href^="mailto:"]{transition:color 200ms ease;text-underline-offset:6px;text-decoration-thickness:1px}
:is(.cl-footer,.mp-footer,.r1-case .site-footer) a[href^="mailto:"]:is(:hover,:focus-visible){color:var(--micro-accent);text-decoration:underline}
:is(.cl-text-link,.cl-next-case,.mp-text-link,.mp-next-case,.r1-case .case-pagination a):focus-visible{outline:2px solid var(--micro-accent);outline-offset:5px}
:is(.cl-next-case,.mp-next-case,.r1-case .case-pagination .button){transition:color 200ms ease,background-color 180ms ease,box-shadow 100ms ease}
:is(.cl-next-case,.mp-next-case):active{opacity:.78;transition-duration:100ms}
.cl-next-case strong .cl-label{height:1.1em;line-height:1.1}
.cl-label>span{transition:transform 200ms cubic-bezier(.2,.8,.2,1)}
.cl-text-link:is(:hover,:focus-visible) .cl-label>span,.cl-next-case:is(:hover,:focus-visible) .cl-label>span{transform:translateY(-100%)}
.cl-text-link:focus-visible{color:var(--cl-orange)}
.cl-next>.cl-text-link svg{transform:rotate(180deg)}
.cl-next>.cl-text-link:is(:hover,:focus-visible) svg{transform:translateX(-4px) rotate(180deg)}
.cl-catalog .cl-text-link:focus-visible{color:#ffb68f}
.cl-next-case:is(:hover,:focus-visible){color:var(--cl-orange)}
.cl-next-case:is(:hover,:focus-visible)>svg{transform:translate(4px,-4px)}
.cl-image-open .cl-zoom svg{transition:transform 200ms cubic-bezier(.2,.8,.2,1)}
.cl-image-open:is(:hover,:focus-visible) .cl-zoom{background:var(--cl-ink);color:#fff}
.cl-image-open:is(:hover,:focus-visible) .cl-zoom svg{transform:translate(2px,-2px)}
.cl-image-open:active .cl-zoom{background:#3e4a43}
.cl-product-photo button:is(:hover,:focus-visible)::after{opacity:1}
.cl-product-photo button:active::after{border-color:#ffb68f}
.cl-view-head button{transition:background-color 180ms ease,border-color 180ms ease,color 180ms ease}
.cl-view-head button[aria-pressed=true]{background:#27332d;color:#f5f3ec;border-color:#27332d}
.cl-view-head button:active{background:#bcc8be;color:#1b2422}
.cl-tab-list button:focus-visible{outline:2px solid #e47e50;outline-offset:-4px}
.mp-text-link{transition:color 220ms ease,border-color 220ms ease,background-color 120ms ease}
.mp-text-link:is(:hover,:focus-visible){color:var(--mp-blue);border-color:var(--mp-blue)}
.mp-text-link:is(:hover,:focus-visible) svg{transform:translateX(4px)}
.mp-next>.mp-text-link svg{transform:rotate(180deg)}
.mp-next>.mp-text-link:is(:hover,:focus-visible) svg{transform:translateX(-4px) rotate(180deg)}
.mp-next-case:is(:hover,:focus-visible){color:var(--mp-blue)}
.mp-next-case:is(:hover,:focus-visible)>svg{transform:translateX(4px)}
.mp-image-open .mp-zoom{transition:background-color 220ms ease,color 220ms ease,box-shadow 220ms ease;box-shadow:inset 0 0 0 1px #1959a61a}
.mp-image-open:is(:hover,:focus-visible) .mp-zoom{background:#e5eef8;color:#144a85;box-shadow:inset 0 0 0 1px #1959a650}
.mp-image-open:is(:hover,:focus-visible) .mp-zoom svg{transform:translate(1px,-1px)}
.mp-image-open:active .mp-zoom{background:#ccddf0;color:#123f71}
.mp-view-head button[aria-pressed=true]{background:#1959a6;color:#fff}
.mp-view-head button:active{background:#c3d7e8;color:#123f71}
.mp-tab-list button[aria-selected=false]:hover{background:#dde9f2}
.r1-case .r1-finale .r1-product-link{border-color:#a893b5;background-color:#d7c2e408;transition:color 200ms ease,border-color 200ms ease,background-color 200ms ease,box-shadow 200ms ease}
.r1-case .r1-finale .r1-product-link:is(:hover,:focus-visible){color:#f1e2ff;border-color:#e5c9ff;background-color:#d7c2e417;box-shadow:inset 0 -1px #e5c9ff}
.r1-case .r1-finale .r1-product-link:active{background-color:#d7c2e429;box-shadow:inset 0 -2px #e5c9ff;transition-duration:100ms}
.r1-case .r1-product-link:focus-visible span{transform:translate(3px,-3px)}
.r1-case :is(.p4-copy,.p4-image-open,.p4-prompt-toggle):focus-visible{border-color:#e5c9ff}
.r1-case .p4-copy[data-result=success]{background:#d8e6d40c}
.r1-case .case-pagination .button:is(:hover,:focus-visible){background:#d7c2e414;box-shadow:inset 0 -2px #d7c2e4}
.r1-case .case-pagination .button:is(:hover,:focus-visible) .p4-next-arrow{transform:translate(3px,-3px)}
.r1-case .case-pagination .text-link:active{color:#fff}
.p4-dialog-close{transition:background-color 180ms ease,border-color 180ms ease;color:inherit}
.p4-dialog-close:focus-visible{background:#ffffff16}
@media(prefers-reduced-motion:reduce){
 :is(.cl-header nav,.mp-header nav,.r1-case .nav-links) a::after,:is(.cl-chapters,.mp-chapters) a,:is(.cl-footer,.mp-footer,.r1-case .site-footer) a[href^="mailto:"],.cl-label>span,.cl-next-case,.cl-image-open .cl-zoom,.cl-image-open .cl-zoom svg,.cl-view-head button,.mp-text-link,.mp-text-link svg,.mp-next-case,.mp-next-case>svg,.mp-image-open .mp-zoom,.mp-image-open .mp-zoom svg,.mp-view-head button,.r1-case .r1-finale .r1-product-link,.r1-case .r1-product-link span,.r1-case .case-pagination a,.r1-case .case-pagination .p4-next-arrow,.p4-dialog-close{transition:none!important}
 .cl-label>span,.cl-next-case:is(:hover,:focus-visible)>svg,.cl-image-open:is(:hover,:focus-visible) .cl-zoom svg,.mp-text-link:is(:hover,:focus-visible) svg,.mp-next-case:is(:hover,:focus-visible)>svg,.mp-image-open:is(:hover,:focus-visible) .mp-zoom svg,.r1-case .r1-product-link:focus-visible span,.r1-case .case-pagination .button:is(:hover,:focus-visible) .p4-next-arrow{transform:none!important}
 .cl-next>.cl-text-link:is(:hover,:focus-visible) svg,.mp-next>.mp-text-link:is(:hover,:focus-visible) svg{transform:rotate(180deg)!important}
}