@charset "UTF-8";

:root {
  --yamm-nav-progress-top: env(safe-area-inset-top, 0px);
}

.yamm-main {
  view-transition-name: yamm-main;
}

/*
 * Navigation progress.
 * PJAX waits 90 ms before showing it, so an in-memory/cache navigation
 * completes without flashing a fake loader.
 */
html.yamm-nav-loading::before,
html.yamm-nav-finishing::before,
html.yamm-nav-arriving::before {
  content: "";
  position: fixed;
  z-index: 2147483647;
  top: var(--yamm-nav-progress-top);
  left: 0;
  right: 0;
  height: 3px;
  pointer-events: none;
  transform-origin: 0 50%;
  background:
    linear-gradient(
      90deg,
      #9e7824 0%,
      #d4af37 20%,
      #f8e6a1 48%,
      #d4af37 73%,
      #8b681e 100%
    );
  box-shadow:
    0 0 7px rgba(212,175,55,.72),
    0 0 16px rgba(212,175,55,.26);
}

html.yamm-nav-loading::after,
html.yamm-nav-finishing::after,
html.yamm-nav-arriving::after {
  content: "";
  position: fixed;
  z-index: 2147483646;
  top: var(--yamm-nav-progress-top);
  left: 0;
  right: 0;
  height: 12px;
  pointer-events: none;
  transform: translateY(-5px);
  background:
    radial-gradient(
      ellipse at 38% 0%,
      rgba(248,230,161,.32) 0%,
      rgba(212,175,55,.11) 32%,
      rgba(212,175,55,0) 76%
    );
}

html.yamm-nav-loading::before {
  opacity: 1;
  animation:
    yammNavigationOutgoing .72s cubic-bezier(.22,1,.36,1) both;
}

html.yamm-nav-loading::after {
  opacity: .9;
}

html.yamm-nav-finishing::before {
  opacity: 0;
  transform: scaleX(1);
  transition:
    transform .14s cubic-bezier(.22,1,.36,1),
    opacity .12s ease .12s;
}

html.yamm-nav-finishing::after {
  opacity: 0;
  transition: opacity .18s ease;
}

html.yamm-nav-arriving::before {
  animation:
    yammNavigationArrival .32s cubic-bezier(.22,1,.36,1) both;
}

html.yamm-nav-arriving::after {
  animation:
    yammNavigationArrivalGlow .32s ease-out both;
}

@keyframes yammNavigationOutgoing {
  0%   { transform: scaleX(0); }
  24%  { transform: scaleX(.18); }
  100% { transform: scaleX(.70); }
}

@keyframes yammNavigationArrival {
  0%   { opacity: .18; transform: scaleX(.04); }
  22%  { opacity: 1; transform: scaleX(.20); }
  70%  { opacity: 1; transform: scaleX(.82); }
  88%  { opacity: 1; transform: scaleX(1); }
  100% { opacity: 0; transform: scaleX(1); }
}

@keyframes yammNavigationArrivalGlow {
  0%      { opacity: 0; }
  18%,72% { opacity: 1; }
  100%    { opacity: 0; }
}

::view-transition-old(yamm-main) {
  animation-duration: 140ms;
  animation-timing-function: ease-out;
}

::view-transition-new(yamm-main) {
  animation-duration: 180ms;
  animation-timing-function: ease-out;
}

@media (prefers-reduced-motion: reduce) {
  .yamm-main {
    view-transition-name: none;
  }

  html.yamm-nav-loading::before,
  html.yamm-nav-loading::after,
  html.yamm-nav-finishing::before,
  html.yamm-nav-finishing::after,
  html.yamm-nav-arriving::before,
  html.yamm-nav-arriving::after {
    animation: none !important;
    transition: none !important;
    opacity: 0 !important;
  }
}