:root { --m-ease: cubic-bezier(0.22, 1, 0.36, 1); --m-ease-in: cubic-bezier(0.4, 0, 1, 1); --m-open: cubic-bezier(0.32, 0.72, 0, 1); }


@view-transition { navigation: auto; }
.site-head { view-transition-name: site-head; }

:root::view-transition { pointer-events: none; }


.card:not(.art-card) .card-photo { overflow: visible; }
.card-photo::before { content: ''; position: absolute; inset: 0; border-radius: inherit; pointer-events: none; box-shadow: 0 26px 40px -22px rgb(18 21 19 / 0.4), 0 10px 18px -12px rgb(18 21 19 / 0.22); opacity: 0; transition: opacity 500ms var(--m-ease); }
@media (hover: hover) { .card:hover .card-photo::before { opacity: 1; } }


.m-open .card-photo::before { opacity: 0; transition: none; }
.m-fit { width: fit-content; }
::view-transition-old(card-photo), ::view-transition-new(card-photo) { height: 100%; object-fit: cover; overflow: clip; }

@media (prefers-reduced-motion: no-preference) {
  html:not(.m-kit-vt, .m-card)::view-transition-old(root) { animation: 240ms var(--m-ease-in) both m-page-out; }
  html:not(.m-kit-vt, .m-card)::view-transition-new(root) { animation: 560ms var(--m-ease) 60ms both m-page-in; }

  
  html.m-card::view-transition-old(root) { animation: 220ms var(--m-ease-in) both m-fade-out; }
  html.m-card::view-transition-new(root) { animation: 420ms var(--m-ease) 120ms both m-fade-in; }
  ::view-transition-group(card-photo), ::view-transition-group(card-name) { animation-duration: 620ms; animation-timing-function: var(--m-open); }
  ::view-transition-old(card-name) { animation: 200ms ease-out both m-fade-out; }
  ::view-transition-new(card-name) { animation: 380ms ease-out 200ms both m-fade-in; }
  
  .m-still { animation: none !important; }

  
  .hero-media { animation: m-settle 1400ms var(--m-ease) backwards; }
  .hero-text > * { animation: m-rise 1000ms var(--m-ease) backwards; }
  .hero-text > :nth-child(1) { animation-delay: 200ms; }
  .hero-text > :nth-child(2) { animation-delay: 330ms; }
  .hero-text > :nth-child(3) { animation-delay: 460ms; }

  
  .page-head > *, .crumbs, .p-gallery, .p-head > div:not(.p-gallery) > :nth-child(-n+5) { animation: m-rise 900ms var(--m-ease) backwards; }
  .page-head > :nth-child(2), .p-head > div:not(.p-gallery) > :nth-child(2) { animation-delay: 90ms; }
  .p-gallery, .p-head > div:not(.p-gallery) > :nth-child(3) { animation-delay: 160ms; }
  .p-head > div:not(.p-gallery) > :nth-child(4) { animation-delay: 230ms; }
  .p-head > div:not(.p-gallery) > :nth-child(5) { animation-delay: 300ms; }

  
  .js .reveal { opacity: 0; transform: translateY(36px); transition: opacity 900ms var(--m-ease) var(--d, 0ms), transform 1100ms var(--m-ease) var(--d, 0ms); }
  .js .reveal.in { opacity: 1; transform: none; }

  
  .js .bar i::after { transform: scaleX(0); transition: transform 320ms cubic-bezier(0.3, 0.6, 0.3, 1); transition-delay: calc(var(--d, 0ms) + 200ms + var(--n) * 50ms); }
  .js .bar.in i::after { transform: scaleX(var(--f, 0)); }
  .js :is(.bar.in[data-value='1'] i:nth-child(1), .bar.in[data-value='2'] i:nth-child(2), .bar.in[data-value='3'] i:nth-child(3), .bar.in[data-value='4'] i:nth-child(4), .bar.in[data-value='5'] i:nth-child(5), .bar.in[data-value='6'] i:nth-child(6), .bar.in[data-value='7'] i:nth-child(7), .bar.in[data-value='8'] i:nth-child(8), .bar.in[data-value='9'] i:nth-child(9), .bar.in[data-value='10'] i:nth-child(10)):not(.m-now *) { animation: m-tick 360ms ease-out; animation-delay: calc(var(--d, 0ms) + 420ms + var(--n) * 50ms); }

  
  .card { -webkit-tap-highlight-color: transparent; }
  .card-photo { transition: transform 600ms var(--m-ease); }
  .card-photo img { transition: transform 700ms var(--m-ease); }
  @media (hover: hover) {
    .card:hover .card-photo { transform: translateY(-6px); }
    .card:hover .card-photo img { transform: scale(1.045); }
  }
  .card:active .card-photo { transform: translateY(-2px) scale(0.98); transition-duration: 120ms; }

  
  html.m-kit-vt::view-transition-group(*) { animation-duration: 480ms; animation-timing-function: var(--m-ease); }
  html.m-kit-vt::view-transition-old(*.swap) { animation: 220ms var(--m-ease-in) both m-out; }
  html.m-kit-vt::view-transition-new(*.swap) { animation: 600ms var(--m-ease) 90ms both m-in; }
  .kit-row.m-changed .bar i::after { animation: m-fill 320ms cubic-bezier(0.3, 0.6, 0.3, 1) backwards; animation-delay: calc(200ms + var(--n) * 50ms); }
  
  .kit-row.m-swap { animation: m-rise 700ms var(--m-ease) backwards; }
}

@media (prefers-reduced-motion: reduce) {
  
  ::view-transition-group(*) { animation: none; }
  ::view-transition-old(*), ::view-transition-new(*) { animation-duration: 150ms; }
  .kit-row.m-swap { animation: m-fade-in 200ms ease-out backwards; }
}

@keyframes m-page-out { to { opacity: 0; transform: scale(0.985); } }
@keyframes m-page-in { from { opacity: 0; transform: scale(1.012); } }
@keyframes m-fade-out { to { opacity: 0; } }
@keyframes m-fade-in { from { opacity: 0; } }
@keyframes m-settle { from { opacity: 0; transform: scale(1.06); } }
@keyframes m-rise { from { opacity: 0; transform: translateY(24px); } }
@keyframes m-out { to { opacity: 0; transform: translateY(-10px); } }
@keyframes m-in { from { opacity: 0; transform: translateY(16px); } }
@keyframes m-fill { from { transform: scaleX(0); } }
@keyframes m-tick { 45% { transform: scaleY(1.7); } }