:root {
  --ease: cubic-bezier(.23, 1, .32, 1);
  --motion-press: 140ms;
  --motion-fast: 180ms;
  --motion-ui: 260ms;
  --motion-image: 500ms;
}
html { scrollbar-gutter: stable; }
html.is-scrolling { scroll-behavior: auto !important; overflow-anchor: none; }
.motion-toggle { display: none; align-items: center; gap: 9px; min-height: 44px; padding: 0 4px; font-size: 12px; }
.js .motion-toggle { display: inline-flex; }
.motion-toggle::after { content: ''; width: 26px; height: 16px; border: 1px solid currentColor; border-radius: 20px; background: radial-gradient(circle at 7px 50%, currentColor 4px, transparent 4.5px); }
.motion-toggle[aria-pressed=true]::after { background: radial-gradient(circle at 17px 50%, currentColor 4px, transparent 4.5px); }
.hero, .projects, .filters, .hero-selector { position: relative; }
.hero-screen[data-hero-theme=desert], .hero-screen[data-hero-theme=film] { background: var(--ink); }
.work { overflow-anchor: none; }
.hero-screen--copy {
  position: absolute;
  z-index: 2;
  min-height: 0;
  aspect-ratio: auto;
  pointer-events: none;
  margin: 0;
}
[data-motion-copy] { pointer-events: none !important; user-select: none; }
.project--leaving { z-index: 1; }
.selection-line {
  position: absolute;
  left: 0;
  bottom: -1px;
  width: 1px;
  height: 2px;
  background: var(--accent);
  transform-origin: left center;
  transition: transform var(--motion-ui) var(--ease);
  pointer-events: none;
}
.filters.has-selection-line button[aria-pressed=true] { border-color: transparent; }
.hero-selector.has-selection-line button::after { display: none; }
.hero-selector .selection-line { bottom: 6px; }
.filters button, .languages button, .hero-selector button {
  transition: color var(--motion-fast) ease, transform var(--motion-press) var(--ease);
}
.icon-button, .menu-button {
  transition: background var(--motion-fast) ease, color var(--motion-fast) ease, transform var(--motion-press) var(--ease);
}
.icon-button:active, .menu-button:active { transform: scale(.95); }
.hero-screen__open {
  transition: transform var(--motion-press) var(--ease);
}
.hero-screen__open:active { transform: scale(.98); }
.hero-screen__open svg, .text-link svg, .contact-links svg, .header-contact svg {
  transition: transform var(--motion-ui) var(--ease);
}
.project__image > img, .shot__image img { transition: transform var(--motion-image) var(--ease); }
.project__image > video { transition: none; }
.project__play {
  transition: transform var(--motion-ui) var(--ease), background var(--motion-fast) ease, border-color var(--motion-fast) ease;
}
.project--invite { transition: border-color var(--motion-ui) ease, background var(--motion-ui) ease; }
.project__caption > svg { transition: transform var(--motion-ui) var(--ease); }
.desktop-nav a { position: relative; }
.desktop-nav a::after {
  content: '';
  position: absolute;
  left: 0;
  right: 0;
  bottom: 7px;
  height: 1px;
  background: currentColor;
  transform: scaleX(0);
  transform-origin: left;
  transition: transform var(--motion-ui) var(--ease);
}
.desktop-nav a[aria-current]::after { transform: scaleX(1); }
.mobile-menu { transform-origin: top center; }
.menu-button span { transition: transform var(--motion-ui) var(--ease); }
.viewer { transform-origin: center; }
.viewer::backdrop { opacity: 1; transition: opacity var(--motion-fast) ease; }
.viewer.is-leaving::backdrop { opacity: 0; }
@starting-style { .viewer[open]::backdrop { opacity: 0; } }
.viewer__media { position: relative; overflow: hidden; }
.viewer__media .media-crossfade {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  max-height: 100%;
  object-fit: contain;
}
.details-icon::after { transition: transform var(--motion-ui) var(--ease); }
.tools details[data-expanded=false] .details-icon::after { transform: rotate(90deg); }
.contact-links a { transition: background var(--motion-fast) ease; }
.contact-orbit { transition: transform var(--motion-ui) var(--ease); }
@media (hover:hover) and (pointer:fine) {
  .desktop-nav a:hover::after { transform: scaleX(1); }
  .hero-screen__open:hover { filter: none; transform: translateY(-2px); }
  .hero-screen__open:hover svg, .header-contact:hover svg, .text-link:hover svg, .contact-links a:hover svg { transform: translate(2px,-2px); }
  .project:hover .project__image > img, .shot:hover img { transform: scale(1.035); }
  .project:hover .project__play { transform: scale(1.08); background: #172019d9; border-color: #ffffffc0; }
  .project--invite:hover { background: #252c26; }
}
@media (max-width:640px) { .hero-selector .selection-line { bottom: -1px; } }
html[data-motion=reduced] { scroll-behavior: auto; }
html[data-motion=reduced] *, html[data-motion=reduced] *::before, html[data-motion=reduced] *::after,
html[data-motion=reduced] .viewer::backdrop { transition: none !important; animation: none !important; }
html[data-motion=reduced] .hero-screen__open:hover, html[data-motion=reduced] .project:hover .project__play,
html[data-motion=reduced] .project:hover .project__image > img, html[data-motion=reduced] .shot:hover img { transform: none; }
@media (prefers-reduced-motion:reduce) {
  html:not([data-motion=full]) .viewer::backdrop { transition: none !important; animation: none !important; }
}