.hero-art { min-width: 0; position: relative; align-self: stretch; display: flex; flex-direction: column; justify-content: center; padding-bottom: 32px; }
.art-viewport { position: relative; isolation: isolate; width: 118%; margin-left: -8%; height: clamp(400px, 40vw, 580px); overflow: clip; background: #090909; mask-image: radial-gradient(ellipse at 54% 49%, #000 32%, transparent 73%); }
.art-perspective { position: absolute; inset: -8%; transform: perspective(900px) rotateX(var(--art-rx, 0deg)) rotateY(var(--art-ry, 0deg)) translate(var(--art-x, 0px), var(--art-y, 0px)); transition: transform var(--motion-slow) var(--ease-out); }
.art-image { width: 100%; max-width: none; height: 100%; object-fit: cover; animation: textile-unfurl 18s cubic-bezier(.45, 0, .55, 1) infinite alternate paused; }
.art-filaments { position: absolute; inset: 0; width: 100%; height: 100%; pointer-events: none; stroke-width: .65; }
.filament-front { stroke: var(--action); opacity: .22; transform-origin: center; animation: thread-front 12s cubic-bezier(.45, 0, .55, 1) infinite alternate paused; }
.filament-back { stroke: var(--sky-ink); opacity: .13; transform-origin: center; animation: thread-back 16s cubic-bezier(.45, 0, .55, 1) infinite alternate paused; }
.hero-art[data-running="true"] .art-image, .hero-art[data-running="true"] .filament-front, .hero-art[data-running="true"] .filament-back { animation-play-state: running; }
.hero-art figcaption { position: relative; display: flex; justify-content: space-between; align-items: center; gap: 16px; color: var(--muted); font-size: 12px; margin-top: -24px; padding-left: 20px; }
.art-motion-toggle { display: inline-flex; align-items: center; justify-content: center; gap: 8px; min-height: 44px; padding: 8px 12px; border: 1px solid transparent; background: transparent; color: var(--muted); cursor: pointer; font-size: 12px; transition: color var(--motion-fast) var(--ease-out), border-color var(--motion-base) var(--ease-out); }
.art-motion-toggle[hidden] { display: none; }
.art-motion-toggle:hover, .art-motion-toggle:focus-visible { color: var(--ink); border-color: var(--line); }
.art-motion-toggle svg { width: 16px; height: 16px; fill: none; stroke: currentColor; stroke-width: 1.5; }
.art-motion-toggle .play-icon { display: none; }
.art-motion-toggle[aria-pressed="true"] .pause-icon { display: none; }
.art-motion-toggle[aria-pressed="true"] .play-icon { display: block; }
.art-daylight { display: none; }
html[data-theme="light"] .art-night { display: none; }
html[data-theme="light"] .art-daylight { display: block; }
html[data-theme="light"] .art-viewport { background: var(--bg); }
html[data-theme="light"] .filament-front { stroke: var(--accent-ink); opacity: .14; }
html[data-theme="light"] .filament-back { opacity: .1; }
@keyframes textile-unfurl { from { transform: scale(1.02) rotate(-2deg) translate(-1%, 1%); } to { transform: scale(1.09) rotate(2deg) translate(1%, -1%); } }
@keyframes thread-front { from { transform: translate(-2%, 2%) rotate(-3deg); } to { transform: translate(3%, -3%) rotate(4deg); } }
@keyframes thread-back { from { transform: translate(3%, -2%) rotate(3deg); } to { transform: translate(-3%, 3%) rotate(-4deg); } }
@supports (animation-timeline: view()) {
 .hero-art .art-viewport { animation: textile-scroll linear both; animation-timeline: --hero; animation-range: entry 0% exit 100%; }
 @keyframes textile-scroll { from { transform: translateY(-18px); } to { transform: translateY(24px); } }
 .hero-art[data-paused="true"] .art-viewport { animation: none; }
}
@media (max-width: 1000px) { .hero-art figcaption { padding-left: 0; font-size: 11px; } }
@media (max-width: 700px) {
 .hero-art { width: 100%; justify-self: center; padding-bottom: 24px; }
 .art-viewport { height: auto; aspect-ratio: 1.35; width: 112%; margin-left: -6%; }
 .hero-art figcaption { margin-top: -12px; font-size: 11px; gap: 8px; }
 .art-motion-toggle { font-size: 11px; padding-inline: 8px; }
}
@media (prefers-reduced-motion: reduce) {
 .hero-art .art-viewport, .art-image, .filament-front, .filament-back { animation: none; }
 .art-perspective { transform: none; transition: none; }
}