/* Motion lives outside the theme; content remains visible without JavaScript. */
:root { --motion-ease: cubic-bezier(.22, 1, .36, 1); }
.gh-burger { appearance: none; background: transparent; border: 0; padding: 0; color: inherit; min-width: 44px; min-height: 44px; }
.gh-burger-box { margin: auto; }
.gh-head-menu .nav a, .site-footer-nav .nav a { position: relative; }
.gh-head-menu .nav a::after, .site-footer-nav .nav a::after {
    content: ""; position: absolute; left: 0; right: 0; bottom: -5px; height: 1px;
    background: var(--brass-bright); transform: scaleX(0); transform-origin: left;
    transition: transform 260ms var(--motion-ease);
}
.gh-head-menu .nav a:hover::after, .gh-head-menu .nav a:focus-visible::after,
.site-footer-nav .nav a:hover::after, .site-footer-nav .nav a:focus-visible::after { transform: scaleX(1); }
.nav-search, .gh-social a, .search-close { transition: translate 200ms var(--motion-ease), color 200ms; }
.nav-search:active, .gh-social a:active, .search-close:active { translate: 0 2px; }

/* A slow wash of brass light, layered above the photo and below the text. */
.motion-ambient {
    position: absolute; inset: 0; overflow: hidden; pointer-events: none; z-index: 1;
    translate: var(--hero-x, 0px) var(--hero-y, 0px); transition: translate 900ms var(--motion-ease);
}
.motion-ambient::before {
    content: ""; position: absolute; inset: -25%; opacity: .32;
    background: radial-gradient(ellipse at 32% 38%, rgba(210,164,78,.55), transparent 58%);
    animation: brass-drift 20s ease-in-out infinite alternate; animation-play-state: paused;
}
.motion-active .motion-ambient::before { animation-play-state: running; }
@keyframes brass-drift { from { transform: translate(-5%, -2%) rotate(-5deg); } to { transform: translate(8%, 6%) rotate(6deg); } }
.motion-hero .site-title, .motion-hero .hero-tagline, .motion-hero .hero-search,
.motion-hero .category-header-content { animation: hero-arrive 900ms var(--motion-ease) both; }
.motion-hero .hero-tagline { animation-delay: 100ms; }
.motion-hero .hero-search { animation-delay: 200ms; }
@keyframes hero-arrive { from { opacity: 0; transform: translateY(14px); } to { opacity: 1; transform: none; } }

.motion-reveal { transition: opacity 700ms var(--motion-ease), transform 700ms var(--motion-ease); }
.motion-reveal.motion-wait { opacity: 0; transform: translateY(18px); }
.motion-reveal:focus-within { opacity: 1; transform: none; }
.motion-card { isolation: isolate; }
.motion-card::before {
    content: ""; position: absolute; inset: -12px; z-index: -1; pointer-events: none; border-radius: 8px;
    background: radial-gradient(ellipse 360px 260px at var(--card-x, 50%) var(--card-y, 50%), rgba(184,137,59,.1), transparent 72%);
    opacity: 0; transition: opacity 350ms;
}
@media (hover: hover) and (pointer: fine) and (min-width: 901px) {
    .motion-card { transition: opacity 700ms var(--motion-ease), transform 700ms var(--motion-ease), translate 450ms var(--motion-ease), rotate 450ms var(--motion-ease); }
    .motion-card.motion-hover { translate: 0 -3px; rotate: var(--card-tilt, 0deg); }
    .motion-card.motion-hover::before, .motion-card:focus-within::before { opacity: 1; }
    .gh-social a:hover { translate: 0 -2px; }
}
.page-about .thread-name::after {
    content: ""; display: block; flex: 1; align-self: center; height: 1px; max-width: 90px;
    background: linear-gradient(90deg, var(--brass), transparent); transform-origin: left;
    transform: scaleX(1); transition: transform 900ms var(--motion-ease) 120ms;
}
.page-about .thread-name.motion-wait::after { transform: scaleX(0); }

.search-modal { z-index: 5000000; }
.search-modal:not([hidden]) .search-modal-backdrop { animation: search-shade 180ms ease-out both; }
.search-modal:not([hidden]) .search-modal-box { animation: search-arrive 280ms var(--motion-ease) both; }
@keyframes search-shade { from { opacity: 0; } to { opacity: 1; } }
@keyframes search-arrive { from { opacity: 0; transform: translateY(12px) scale(.985); } to { opacity: 1; transform: none; } }
.search-input { min-width: 0; }
.search-close { flex: 0 0 36px; width: 36px; height: 36px; border: 0; border-radius: 4px; background: transparent; color: #667; font: 2.6rem/1 var(--font-sans-serif); cursor: pointer; }
.search-close:hover { background: rgba(184,137,59,.1); color: var(--brass); }
.reading-progress { width: 100%; transform: scaleX(0); transform-origin: left; transition: transform 80ms linear; }

@media (prefers-reduced-motion: reduce) {
    .motion-ambient { display: none; }
    .motion-hero .site-title, .motion-hero .hero-tagline, .motion-hero .hero-search,
    .motion-hero .category-header-content, .search-modal:not([hidden]) .search-modal-backdrop,
    .search-modal:not([hidden]) .search-modal-box { animation: none; }
    .motion-reveal, .motion-card, .page-about .thread-name::after, .nav-search, .gh-social a,
    .search-close, .reading-progress, .gh-head-menu .nav a::after, .site-footer-nav .nav a::after,
    #gh-head, .gh-burger-inner, .gh-burger-inner::before, .gh-burger-inner::after { transition: none; }
    .motion-reveal.motion-wait { opacity: 1; transform: none; }
    .motion-card.motion-hover, .gh-social a:hover, .nav-search:active, .gh-social a:active,
    .search-close:active { translate: none; rotate: none; }
    .video-facade:hover .video-facade-play { transform: none; }
}