/* Quiet motion, with native navigation and no scrolling interception. */
/* The branded curtain owns the transition rather than a second page fade. */
@view-transition { navigation: none; }
.page-curtain { position: fixed; inset: 0; z-index: 9999; display: grid; place-items: center; background: #080808; color: #f5f5f1; opacity: 0; visibility: hidden; pointer-events: none; }
.curtain-brand { position: relative; display: flex; flex-direction: column; align-items: center; text-align: center; }
.curtain-brand::before { content: ''; position: absolute; width: 290px; height: 290px; top: -80px; background: radial-gradient(circle, #ffffff0c, transparent 68%); pointer-events: none; }
.curtain-logo { width: clamp(125px, 18vw, 175px); height: auto; filter: brightness(0) invert(1); }
.curtain-name { font-size: 12px; letter-spacing: .32em; margin: 27px 0 8px; padding-left: .32em; }
.curtain-descriptor { font-size: 8px; letter-spacing: .46em; color: #999; padding-left: .46em; }
.curtain-rule { width: 42px; height: 1px; margin-top: 30px; background: #bdbdbd; transform-origin: center; }
.transition-leaving .page-curtain, .transition-arriving .page-curtain { visibility: visible; opacity: 1; pointer-events: auto; }
@media (prefers-reduced-motion: no-preference) {
  .transition-leaving .page-curtain { animation: curtain-cover 220ms ease-out both; }
  .transition-leaving .curtain-brand { animation: curtain-brand-in 480ms 120ms cubic-bezier(.22,1,.36,1) both; }
  .transition-leaving .curtain-rule { animation: curtain-rule-in 450ms 240ms cubic-bezier(.22,1,.36,1) both; }
  .transition-arriving .page-curtain { animation: curtain-uncover 650ms 80ms cubic-bezier(.76,0,.24,1) both; }
  .transition-arriving .curtain-brand { animation: curtain-brand-out 300ms ease-in both; }
  @keyframes curtain-cover { from { opacity: 0; } to { opacity: 1; } }
  @keyframes curtain-brand-in { from { opacity: 0; transform: translateY(10px) scale(.97); filter: blur(5px); } to { opacity: 1; transform: none; filter: blur(0); } }
  @keyframes curtain-rule-in { from { transform: scaleX(0); } to { transform: scaleX(1); } }
  @keyframes curtain-uncover { from { clip-path: inset(0); } to { clip-path: inset(0 0 100% 0); } }
  @keyframes curtain-brand-out { to { opacity: 0; transform: translateY(-16px); } }
}
@media (prefers-reduced-motion: reduce), print { .page-curtain { display: none !important; } }
@media (prefers-reduced-motion: no-preference) {
  ::view-transition-old(root) { animation: ttg-out 160ms ease-out both; }
  ::view-transition-new(root) { animation: ttg-in 260ms ease-out both; }
  @keyframes ttg-out { to { opacity: 0; } }
  @keyframes ttg-in { from { opacity: 0; } to { opacity: 1; } }
  .button, .nav-contact { transition: background 240ms ease, color 240ms ease, transform 280ms cubic-bezier(.22,1,.36,1); }
  .arrow { transition: transform 300ms cubic-bezier(.22,1,.36,1); }
  .primary-navigation > a:not(.nav-contact)::after { transition: transform 300ms cubic-bezier(.22,1,.36,1); }
  .story-photo img, .work-photo img, .commercial-intro > img, .commercial-gallery > img { transition: filter 650ms ease, transform 850ms cubic-bezier(.22,1,.36,1); }
  .about-photo { overflow: hidden; }
  .about-photo img { transition: transform 900ms cubic-bezier(.22,1,.36,1); }
  input, textarea, select { transition: border-color 220ms ease, background-color 220ms ease; }
  input:focus, textarea:focus, select:focus { border-bottom-color: #101010; background-color: #00000003; }
  .button:focus-visible .arrow, .nav-contact:focus-visible .arrow { transform: translate(2px,-2px); }
  @media (hover: hover) and (pointer: fine) {
    .button:hover .arrow, .nav-contact:hover .arrow { transform: translate(2px,-2px); }

  }
  @media (max-width: 760px) {
    .primary-navigation.is-open { animation: ttg-menu 240ms ease-out both; }
    @keyframes ttg-menu { from { opacity: 0; transform: translateY(-6px); } to { opacity: 1; transform: translateY(0); } }
  }
}
@media (prefers-reduced-motion: reduce) {
  ::view-transition-group(*), ::view-transition-old(*), ::view-transition-new(*) { animation: none !important; }
  .button:hover, .text-link:hover .arrow, .story-photo:hover img { transform: none; }
}

.work-photo { overflow: hidden; }
@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  .site-header, .menu-lines::before, .menu-lines::after, .js .primary-navigation, .arrow { transition: none !important; }
}