/* A single rhythm for entry, scroll and interaction; no scroll interception. */
:root { --motion-ease: cubic-bezier(.22, 1, .36, 1); }
.has-motion .hero-line > span { animation-duration: 1050ms; animation-timing-function: var(--motion-ease); }
.has-motion .line-two > span { animation-delay: 120ms; }
.has-motion .hero-top { animation: soft-enter 650ms var(--motion-ease) both; }
.has-motion .hero-bottom > div { animation: soft-enter 800ms 380ms var(--motion-ease) both; }
.has-motion .hero-bottom > div + div { animation-delay: 470ms; }
.has-motion .shot-main { animation: float-main 8s 850ms ease-in-out infinite, artwork-enter 950ms 180ms var(--motion-ease) both; }
.has-motion .shot-small { animation: float-small 9s 950ms ease-in-out infinite, artwork-enter 950ms 300ms var(--motion-ease) both; }
.has-motion .hero-silver { animation: chrome-turn 12s 950ms ease-in-out infinite, artwork-enter 1000ms 240ms var(--motion-ease) both; }
.has-motion .hero-sticker { animation: artwork-enter 850ms 480ms var(--motion-ease) both; }
.has-motion .reveal { opacity: 0; transform: translateY(26px); transition: opacity 700ms ease, transform 900ms var(--motion-ease); transition-delay: var(--reveal-delay, 0ms); }
.has-motion .reveal.is-visible { opacity: 1; transform: translateY(0); }
.has-motion .work-card:nth-child(2) { transition-delay: 90ms; }
.has-motion .project-sheet.reveal { transform: translateY(20px); }
.has-motion .project-sheet.reveal.is-visible { transform: none; }
.has-motion .reveal:focus-within { opacity: 1; transform: none; transition: none; }
.has-motion .empty-state { animation: soft-enter 450ms var(--motion-ease) both; }
.has-motion .detail-head, .has-motion .about-hero { animation: soft-enter 750ms var(--motion-ease) both; }
.has-motion .project-cover { animation: soft-enter 850ms 100ms var(--motion-ease) both; }
.has-motion dialog[open] { animation: dialog-enter 350ms var(--motion-ease) both; }
.has-motion dialog[open]::backdrop { animation: backdrop-enter 250ms ease both; }
.has-motion .motion-outside .floating-shot, .has-motion .motion-outside .hero-silver,
.motion-dormant *, .motion-dormant *::before, .motion-dormant *::after { animation-play-state: paused !important; }

.has-motion .pill-link > span, .has-motion .button > span, .has-motion .text-link > span,
.has-motion .explore-item > span:last-child, .has-motion .work-open, .has-motion .work-link-label > span {
  transition: transform 350ms var(--motion-ease), background 250ms ease, color 250ms ease;
}
.has-motion .floating-shot, .has-motion .hero-silver { transition: translate 850ms var(--motion-ease), box-shadow 350ms ease; }
.has-motion .work-image { transition: transform 650ms var(--motion-ease), border-color 350ms ease; }
.site-header nav a::before { content: ''; position: absolute; bottom: 0; left: 0; width: 100%; height: 1px; background: var(--pink-deep); transform: scaleX(0); transform-origin: left; }
.has-motion .site-header nav a::before { transition: transform 300ms var(--motion-ease); }
.site-header nav a:not([aria-current]):is(:hover, :focus-visible)::before { transform: scaleX(1); }
.work-card:focus-visible .work-open { background: var(--ink); color: white; }
.has-motion .work-card:focus-visible .work-image { transform: translateY(-4px); }

@media (hover: hover) and (pointer: fine) {
  .has-motion .shot-main { translate: var(--pointer-x, 0px) var(--pointer-y, 0px); }
  .has-motion .shot-small { translate: calc(var(--pointer-x, 0px) * -.7) calc(var(--pointer-y, 0px) * -.7); }
  .has-motion .hero-silver { translate: calc(var(--pointer-x, 0px) * -1.2) calc(var(--pointer-y, 0px) * -1.2); }
  .has-motion .floating-shot:hover { box-shadow: 0 24px 45px #44283130; }
  .has-motion .work-card:hover .work-image { transform: perspective(950px) translateY(-6px) rotateX(var(--tilt-x, 0deg)) rotateY(var(--tilt-y, 0deg)); }
  .has-motion .work-card:hover .work-open { transform: rotate(45deg); }
  .has-motion .work-card:hover .work-link-label > span,
  .has-motion .pill-link:hover > span, .has-motion .text-link:hover > span,
  .has-motion .button:hover > span, .has-motion .explore-item:hover > span:last-child { transform: translate(2px, -2px); }
}
@keyframes soft-enter { from { opacity: 0; transform: translateY(18px); } to { opacity: 1; transform: translateY(0); } }
@keyframes artwork-enter { from { opacity: 0; scale: .92; } to { opacity: 1; scale: 1; } }
@keyframes dialog-enter { from { opacity: 0; transform: translateY(12px) scale(.98); } to { opacity: 1; transform: none; } }
@keyframes backdrop-enter { from { opacity: 0; } to { opacity: 1; } }
@keyframes float-main-mobile { 0%, 100% { transform: rotate(8deg); } 50% { transform: translateY(-5px) rotate(7deg); } }
@keyframes float-small-mobile { 0%, 100% { transform: rotate(-10deg); } 50% { transform: translateY(4px) rotate(-8deg); } }
@media (max-width: 680px) {
  .has-motion .shot-main { animation-name: float-main-mobile, artwork-enter; }
  .has-motion .shot-small { animation-name: float-small-mobile, artwork-enter; }
  .has-motion .reveal { transform: translateY(14px); transition-duration: 550ms, 700ms; transition-delay: 0ms; }
  .has-motion .reveal.is-visible { transform: none; }
  .has-motion .work-card:nth-child(2) { transition-delay: 0ms; }
}
@media (hover: none), (pointer: coarse) {
  .work-card:hover .work-image, .work-card:hover img { transform: none; }
}
/* Turning motion off also removes pointer offsets and hover movement. */
html.motion-off { scroll-behavior: auto; }
body:not(.has-motion) *, body:not(.has-motion) *::before, body:not(.has-motion) *::after { animation: none !important; transition: none !important; }
body:not(.has-motion) .reveal { opacity: 1; transform: none; }
body:not(.has-motion) .floating-shot, body:not(.has-motion) .hero-silver { translate: none; scale: 1; }
body:not(.has-motion) :is(.work-card:hover, .work-card:focus-visible) .work-image,
body:not(.has-motion) .work-card:hover img, body:not(.has-motion) .pill-link:hover,
body:not(.has-motion) .button:hover, body:not(.has-motion) .contact-big:hover .circle-link,
body:not(.has-motion) .image-button:hover .zoom-tag { transform: none; }
@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto !important; }
  *, *::before, *::after { animation: none !important; transition: none !important; }
  .reveal, .has-motion .reveal { opacity: 1; transform: none; }
  .floating-shot, .hero-silver { translate: none !important; scale: 1 !important; }
}