/* transitions-dev shared polish layer */
:root {
  --resize-dur: 300ms;
  --resize-ease: cubic-bezier(0.22, 1, 0.36, 1);
  --digit-dur: 500ms;
  --digit-distance: 8px;
  --digit-stagger: 70ms;
  --digit-blur: 2px;
  --digit-ease: cubic-bezier(0.34, 1.45, 0.64, 1);
  --digit-dir-x: 0;
  --digit-dir-y: 1;
  --badge-slide-dur: 260ms;
  --badge-pop-dur: 500ms;
  --badge-pop-close-dur: 180ms;
  --badge-fade-dur: 400ms;
  --badge-fade-close-dur: 180ms;
  --badge-blur: 2px;
  --badge-offset-x: -8.2px;
  --badge-offset-y: 12.4px;
  --badge-slide-ease: cubic-bezier(0.22, 1, 0.36, 1);
  --badge-pop-ease: cubic-bezier(0.34, 1.36, 0.64, 1);
  --badge-close-ease: cubic-bezier(0.4, 0, 0.2, 1);
  --text-swap-dur: 150ms;
  --text-swap-translate-y: 4px;
  --text-swap-blur: 2px;
  --text-swap-ease: ease-in-out;
  --dropdown-open-dur: 250ms;
  --dropdown-close-dur: 150ms;
  --dropdown-pre-scale: 0.97;
  --dropdown-closing-scale: 0.99;
  --dropdown-ease: cubic-bezier(0.22, 1, 0.36, 1);
  --modal-open-dur: 250ms;
  --modal-close-dur: 150ms;
  --modal-scale: 0.96;
  --modal-scale-close: 0.96;
  --modal-ease: cubic-bezier(0.22, 1, 0.36, 1);
  --panel-open-dur: 400ms;
  --panel-close-dur: 350ms;
  --panel-translate-y: 100px;
  --panel-blur: 2px;
  --panel-ease: cubic-bezier(0.22, 1, 0.36, 1);
  --page-slide-dur: 200ms;
  --page-fade-dur: 200ms;
  --page-slide-distance: 8px;
  --page-blur: 3px;
  --page-stagger: 0ms;
  --page-exit-enabled: 1;
  --page-slide-ease: cubic-bezier(0.22, 1, 0.36, 1);
  --page-fade-ease: cubic-bezier(0.22, 1, 0.36, 1);
  --icon-swap-dur: 200ms;
  --icon-swap-blur: 2px;
  --icon-swap-start-scale: 0.25;
  --icon-swap-ease: ease-in-out;
  --check-opacity-dur: 550ms;
  --check-rotate-dur: 550ms;
  --check-rotate-from: 80deg;
  --check-bob-dur: 450ms;
  --check-y-amount: 40px;
  --check-blur-dur: 500ms;
  --check-blur-from: 10px;
  --check-path-dur: 550ms;
  --check-path-delay: 80ms;
  --check-ease-out: cubic-bezier(0.22, 1, 0.36, 1);
  --check-ease-opacity: cubic-bezier(0.22, 1, 0.36, 1);
  --check-ease-rotate: cubic-bezier(0.22, 1, 0.36, 1);
  --check-ease-bob: cubic-bezier(0.34, 1.35, 0.64, 1);
  --check-ease-path: cubic-bezier(0.22, 1, 0.36, 1);
  --avatar-lift: -4px;
  --avatar-dur: 320ms;
  --avatar-scale: 1.035;
  --avatar-falloff: 0.45;
  --avatar-ease-in: cubic-bezier(0.22, 1, 0.36, 1);
  --avatar-ease-out: cubic-bezier(0.34, 2.4, 0.64, 1);
}

.t-panel-slide {
  transform: translateY(var(--panel-translate-y));
  opacity: 0;
  filter: blur(var(--panel-blur));
  pointer-events: none;
  transition:
    transform var(--panel-close-dur) var(--panel-ease),
    opacity var(--panel-close-dur) var(--panel-ease),
    filter var(--panel-close-dur) var(--panel-ease);
  will-change: transform, opacity, filter;
}

.t-panel-slide[data-open="true"] {
  transform: translateY(0);
  opacity: 1;
  filter: blur(0);
  pointer-events: auto;
  transition:
    transform var(--panel-open-dur) var(--panel-ease),
    opacity var(--panel-open-dur) var(--panel-ease),
    filter var(--panel-open-dur) var(--panel-ease);
}

.t-modal {
  transform-origin: center;
  transform: scale(var(--modal-scale));
  opacity: 0;
  pointer-events: none;
  transition:
    transform var(--modal-open-dur) var(--modal-ease),
    opacity var(--modal-open-dur) var(--modal-ease);
  will-change: transform, opacity;
}

.t-modal.is-open {
  transform: scale(1);
  opacity: 1;
  pointer-events: auto;
}

.t-modal.is-closing {
  transform: scale(var(--modal-scale-close));
  opacity: 0;
  pointer-events: none;
  transition:
    transform var(--modal-close-dur) var(--modal-ease),
    opacity var(--modal-close-dur) var(--modal-ease);
}

.t-avatar {
  transform-origin: center;
  transform: translateY(var(--shift, 0px)) scale(var(--scale-active, 1));
  transition: transform var(--avatar-dur) var(--avatar-ease-in);
  will-change: transform;
}

.t-avatar:hover,
.t-avatar:focus-visible {
  transform: translateY(var(--shift, 0px)) scale(var(--scale-active, 1));
}

.site-drawer {
  transition:
    opacity var(--panel-close-dur) var(--panel-ease),
    visibility var(--panel-close-dur) linear;
}

.site-drawer.is-open {
  transition:
    opacity var(--panel-open-dur) var(--panel-ease),
    visibility 0ms linear;
}

.site-drawer-panel {
  --panel-translate-y: -30px;
  transform: translate3d(0, var(--panel-translate-y), 0) scale(0.985) !important;
  opacity: 0;
  filter: blur(var(--panel-blur));
  transition:
    transform var(--panel-close-dur) var(--panel-ease),
    opacity var(--panel-close-dur) var(--panel-ease),
    filter var(--panel-close-dur) var(--panel-ease) !important;
  will-change: transform, opacity, filter;
}

.site-drawer.is-open .site-drawer-panel {
  transform: translate3d(0, 0, 0) scale(1) !important;
  opacity: 1;
  filter: blur(0);
  transition:
    transform var(--panel-open-dur) var(--panel-ease),
    opacity var(--panel-open-dur) var(--panel-ease),
    filter var(--panel-open-dur) var(--panel-ease) !important;
}

.site-drawer-nav a,
.site-drawer-book {
  opacity: 0;
  transform: translateY(10px);
  transition:
    transform var(--panel-open-dur) var(--panel-ease),
    opacity var(--panel-open-dur) var(--panel-ease),
    color 220ms ease,
    background 220ms ease,
    border-color 220ms ease;
  will-change: transform, opacity;
}

.site-drawer.is-open .site-drawer-nav a,
.site-drawer.is-open .site-drawer-book {
  opacity: 1;
  transform: translateY(0);
}

.site-drawer.is-open .site-drawer-nav a:nth-child(2) { transition-delay: 35ms; }
.site-drawer.is-open .site-drawer-nav a:nth-child(3) { transition-delay: 70ms; }
.site-drawer.is-open .site-drawer-book { transition-delay: 105ms; }

.video-lightbox,
.vmodal {
  transition:
    opacity var(--modal-open-dur) var(--modal-ease),
    backdrop-filter var(--modal-open-dur) var(--modal-ease),
    -webkit-backdrop-filter var(--modal-open-dur) var(--modal-ease);
}

.video-lightbox .vl-stage,
.vmodal {
  transform-origin: center;
  transform: scale(var(--modal-scale)) translateY(8px);
  opacity: 0;
  filter: blur(2px);
  transition:
    transform var(--modal-open-dur) var(--modal-ease),
    opacity var(--modal-open-dur) var(--modal-ease),
    filter var(--modal-open-dur) var(--modal-ease);
  will-change: transform, opacity, filter;
}

.video-lightbox.open .vl-stage,
.vmodal[open].is-open {
  animation: none !important;
  transform: scale(1) translateY(0);
  opacity: 1;
  filter: blur(0);
}

.video-lightbox.is-closing .vl-stage,
.vmodal[open].is-closing {
  transform: scale(var(--modal-scale-close)) translateY(8px);
  opacity: 0;
  filter: blur(2px);
  transition:
    transform var(--modal-close-dur) var(--modal-ease),
    opacity var(--modal-close-dur) var(--modal-ease),
    filter var(--modal-close-dur) var(--modal-ease);
}

:where(
  .header-book,
  .site-drawer-book,
  .contact-cta-btn,
  .edit-apply,
  .ig-more,
  .work-more,
  .reel-play,
  .submit-btn,
  .share-btn,
  .link,
  .filter,
  .btn,
  .vmodal-status button,
  .vmodal-status a,
  .vl-status button,
  .vl-status a
) {
  transition-timing-function: var(--avatar-ease-in), var(--modal-ease), var(--modal-ease), var(--modal-ease);
}

@media (hover: hover) {
  :where(
    .header-book,
    .site-drawer-book,
    .contact-cta-btn,
    .edit-apply,
    .ig-more,
    .work-more,
    .reel-play,
    .submit-btn,
    .share-btn,
    .link,
    .filter,
    .btn
  ):hover {
    transform: translate3d(0, -2px, 0);
  }
}

:where(
  .header-book,
  .site-drawer-book,
  .contact-cta-btn,
  .edit-apply,
  .ig-more,
  .work-more,
  .reel-play,
  .submit-btn,
  .share-btn,
  .link,
  .filter,
  .btn
):active {
  transform: translate3d(0, 0, 0) scale(0.985);
}

.t-avatar:hover,
.t-avatar:focus-visible {
  transform: translateY(var(--shift, 0px)) scale(var(--scale-active, 1));
}

.menu-button span {
  transition:
    transform var(--icon-swap-dur) var(--modal-ease),
    opacity var(--icon-swap-dur) var(--modal-ease);
}

@media (hover: hover) {
  .menu-button:hover span:first-child { transform: scaleX(0.78); }
  .menu-button:hover span:last-child { transform: scaleX(0.92); }
}

.field input,
.field select,
.field textarea {
  transition:
    border-color var(--modal-open-dur) var(--modal-ease),
    background var(--modal-open-dur) var(--modal-ease),
    box-shadow var(--modal-open-dur) var(--modal-ease),
    transform var(--modal-open-dur) var(--modal-ease);
}

.field:focus-within input,
.field:focus-within select,
.field:focus-within textarea {
  transform: translateY(-1px);
  box-shadow: 0 0 0 1px rgba(244, 244, 241, 0.08);
}

.t-input {
  transition: border-color 150ms ease-out;
  will-change: transform;
}

.t-input.is-error {
  transition: border-color var(--revert-dur, 280ms) ease-out;
}

.t-error-msg {
  opacity: 0;
  visibility: hidden;
  transition:
    opacity var(--revert-dur, 280ms) ease-out,
    visibility 0s linear var(--revert-dur, 280ms);
}

.t-input-wrap.is-error .t-error-msg {
  opacity: 1;
  visibility: visible;
  transition:
    opacity var(--revert-dur, 280ms) ease-out,
    visibility 0s linear 0s;
}

.field.is-error .field-label {
  color: rgba(255, 142, 142, 0.86);
}

.field.is-error input,
.field.is-error select,
.field.is-error textarea,
.t-input.is-error {
  border-color: rgba(255, 142, 142, 0.86) !important;
  box-shadow: 0 0 0 1px rgba(255, 142, 142, 0.12);
}

.t-input.is-shaking {
  animation: t-input-shake calc(
      var(--shake-dur-a) * 2 + var(--shake-dur-b) * 2
    ) linear;
}

@keyframes t-input-shake {
  0% {
    transform: translateX(0);
    animation-timing-function: var(--shake-ease);
  }
  28.57% {
    transform: translateX(var(--shake-distance));
    animation-timing-function: var(--shake-ease);
  }
  57.14% {
    transform: translateX(calc(var(--shake-distance) * -1));
    animation-timing-function: var(--shake-ease);
  }
  78.57% {
    transform: translateX(var(--shake-overshoot));
    animation-timing-function: var(--shake-ease);
  }
  100% {
    transform: translateX(0);
  }
}

.work-card,
.work-stage,
.ig-tile,
.neo-ring,
.featured-media {
  transition-timing-function: var(--panel-ease);
}

.toast {
  transition:
    opacity var(--text-swap-dur) var(--text-swap-ease),
    transform var(--text-swap-dur) var(--text-swap-ease);
}

:where(a, button, input, select, textarea):focus-visible {
  outline: 1px solid rgba(244, 244, 241, 0.72);
  outline-offset: 4px;
}

@media (prefers-reduced-motion: reduce) {
  .t-panel-slide,
  .t-modal,
  .t-avatar,
  .site-drawer,
  .site-drawer-panel,
  .site-drawer-nav a,
  .site-drawer-book,
  .video-lightbox,
  .video-lightbox .vl-stage,
  .vmodal,
  .vmodal[open],
  .field input,
  .field select,
  .field textarea {
    transition: none !important;
    animation: none !important;
    transform: none !important;
    filter: none !important;
  }

  .t-input {
    animation: none !important;
    transform: none !important;
  }
}