/* Tfon Tech — restrained opening and page transition */
body.brand-transition-locked {
  overflow: hidden !important;
}

.site-splash--retired {
  display: none !important;
}

.brand-transition {
  position: fixed;
  z-index: 9000;
  inset: 0;
  display: grid;
  place-items: center;
  padding: 24px;
  background: #f4f6f6;
  opacity: 0;
  visibility: hidden;
  pointer-events: none;
  transition: opacity 320ms ease, visibility 0s linear 320ms;
}

.brand-transition-pending .brand-transition {
  opacity: 1;
  visibility: visible;
  pointer-events: auto;
  transition-delay: 0s;
}

.brand-transition-pending .brand-transition.is-leaving {
  opacity: 0;
  transition: opacity 300ms ease;
}

.brand-transition__panel {
  width: min(100%, 360px);
  display: grid;
  justify-items: center;
  opacity: 0;
  transform: translateY(5px);
  transition: opacity 280ms ease, transform 360ms ease;
}

.brand-transition.is-active .brand-transition__panel {
  opacity: 1;
  transform: none;
}

.brand-transition__brand {
  width: min(72vw, 246px);
  height: auto;
  object-fit: contain;
}

.brand-transition__descriptor {
  margin-top: 17px;
  color: #667985;
  font-size: 11px;
  font-weight: 600;
  letter-spacing: .055em;
}

.brand-transition__progress {
  width: 184px;
  height: 1px;
  margin-top: 25px;
  overflow: hidden;
  background: rgba(10, 32, 49, .13);
}

.brand-transition__progress span {
  width: 100%;
  height: 100%;
  display: block;
  background: linear-gradient(90deg, #147fb9 0%, #147fb9 72%, #8db532 100%);
  transform: translateX(-100%);
}

.brand-transition.is-active .brand-transition__progress span {
  animation: brandProgress 620ms cubic-bezier(.4, 0, .2, 1) forwards;
}

@keyframes brandProgress {
  to { transform: translateX(0); }
}

@media (max-width: 480px) {
  .brand-transition { padding: 18px; }
  .brand-transition__brand { width: min(74vw, 218px); }
  .brand-transition__descriptor { margin-top: 15px; font-size: 10px; }
  .brand-transition__progress { width: 164px; margin-top: 22px; }
}

@media (prefers-reduced-motion: reduce) {
  .brand-transition,
  .brand-transition__panel {
    transition-duration: 100ms;
    transform: none;
  }

  .brand-transition__progress span {
    animation: none !important;
    transform: none;
  }
}