/* Tyrant motion: short feedback, natural entry, immediate keyboard controls. */
:root{--motion-out:var(--ease);--motion-drawer:cubic-bezier(.32,.72,0,1)}
dialog[open]{animation:none;transform-origin:center}
dialog::backdrop{transition:opacity 180ms ease;opacity:1}
@starting-style{dialog[open]::backdrop{opacity:0}}
dialog[data-closing]::backdrop{opacity:0}
.creator-card,.product-card,.social-card,.news-card{transition:transform 200ms var(--motion-out),border-color 160ms ease,background 160ms ease}
.creator-card:active,.news-card:active,.social-card:active{transform:scale(.985)}
.filter{transition:background 150ms ease,color 150ms ease,transform 120ms var(--motion-out)}
.button,.menu,.dialog-close{transition:transform 120ms var(--motion-out),background 160ms ease,color 160ms ease}
.creator-caption{transition:transform 200ms var(--motion-out)}
.button:active,.menu:active,.dialog-close:active{transform:scale(.97)}
.news-read,.social-footer,.product-cta{transition:color 160ms ease}
header nav a{position:relative}
header nav a::after{content:'';position:absolute;bottom:5px;left:0;right:0;height:1px;background:#ff3600;opacity:0;transform:scaleX(.75);transform-origin:left;transition:opacity 160ms ease,transform 180ms var(--motion-out)}
header nav a:focus-visible::after{opacity:1;transform:scaleX(1)}
@media(hover:hover) and (pointer:fine){
 .creator-card:hover,.product-card:hover,.news-card:hover{transform:translateY(-3px);border-color:#585858}
 .creator-card:hover .creator-caption{transform:translateY(-3px)}
 .creator-card:active,.news-card:active{transform:translateY(0) scale(.985)}
 .social-card:hover{background:#171717}
 header nav a:hover::after{opacity:1;transform:scaleX(1)}
 .product-photo:hover img{transform:none}
}
@media(max-width:700px){
 header nav{transition:opacity 180ms ease,transform 240ms var(--motion-drawer),display 240ms;transition-behavior:allow-discrete;opacity:0;transform:translateY(-8px)}
 header nav.open{opacity:1;transform:translateY(0)}
 @starting-style{header nav.open{opacity:0;transform:translateY(-8px)}}
 header nav a::after{display:none}
}
html[data-input=keyboard]{scroll-behavior:auto}
html[data-input=keyboard] *,html[data-input=keyboard] *::after{transition:none!important;animation:none!important}
@media(prefers-reduced-motion:reduce){
 html{scroll-behavior:auto}
 .creator-card,.creator-caption,.product-card,.social-card,.news-card,.button,.menu,.dialog-close,.member-row,.filter,header nav,header nav a::after{transform:none!important;animation:none!important}
 .button,.filter,.social-footer,.product-cta,.news-read{transition:color 160ms ease,background 160ms ease!important}
 dialog::backdrop{transition:opacity 160ms ease!important}
}

/* Scroll reveals only prepare content below the initial viewport. */
.scroll-pending{opacity:0;transform:translateY(18px)}
@media(prefers-reduced-motion:reduce){.scroll-pending{opacity:1;transform:none}}
html[data-input=keyboard] .scroll-pending{opacity:1;transform:none}


/* Primary CTAs keep their dimensions while the fill becomes an outline. */
.button.primary{transition:transform 120ms var(--motion-out),background 160ms ease,color 160ms ease,border-color 160ms ease}
.button.primary:focus-visible{background:transparent;color:#fff;border-color:#ff3600}