/* =========================================================
   WHITE BEARD COFFEE & ROASTERY
   Global Loading Screen
   ========================================================= */

/* ---------------------------------------------------------
   Loading State
   --------------------------------------------------------- */

html.is-loading,
body.is-loading {
  overflow: hidden;
  overscroll-behavior: none;
}

.wb-loader {
  position: fixed;
  inset: 0;
  z-index: var(--z-loader);

  display: grid;
  width: 100%;
  min-height: 100vh;

  place-items: center;
  overflow: hidden;

  color: var(--color-white);
  background: #000000;

  opacity: 1;
  visibility: visible;
  pointer-events: auto;

  isolation: isolate;

  transition:
    opacity 650ms var(--ease-soft),
    visibility 650ms var(--ease-soft);
}

/* Subtle warm light */

.wb-loader::before {
  position: absolute;
  inset: 0;
  z-index: -2;

  background:
    radial-gradient(
      circle at 50% 48%,
      rgba(118, 80, 60, 0.2) 0%,
      rgba(74, 48, 38, 0.09) 25%,
      rgba(0, 0, 0, 0) 58%
    );

  content: "";

  opacity: 0;

  animation:
    wb-loader-background-in
    900ms var(--ease-soft)
    forwards;
}

/* Thin editorial line */

.wb-loader::after {
  position: absolute;
  top: 0;
  bottom: 0;
  left: 50%;
  z-index: -1;

  width: 1px;

  background:
    linear-gradient(
      to bottom,
      transparent,
      rgba(255, 255, 255, 0.08),
      transparent
    );

  content: "";

  opacity: 0;

  animation:
    wb-loader-line-in
    900ms var(--ease-soft)
    250ms forwards;
}

/* ---------------------------------------------------------
   Inner Content
   --------------------------------------------------------- */

.wb-loader__inner {
  position: relative;

  display: flex;
  width: min(
    calc(100% - 3rem),
    34rem
  );

  padding:
    max(2rem, env(safe-area-inset-top))
    0
    max(2rem, env(safe-area-inset-bottom));

  flex-direction: column;
  align-items: center;
  justify-content: center;

  text-align: center;
}

/* ---------------------------------------------------------
   Logo
   --------------------------------------------------------- */

.wb-loader__logo {
  width: min(100%, 26rem);
  height: auto;

  margin-bottom: 1.75rem;

  opacity: 0;

  transform:
    translate3d(0, 1rem, 0)
    scale(0.985);

  animation:
    wb-loader-logo-in
    850ms var(--ease-soft)
    100ms forwards;
}

/* ---------------------------------------------------------
   Motto
   --------------------------------------------------------- */

.wb-loader__motto {
  margin: 0 0 1.5rem;

  color: rgba(255, 255, 255, 0.62);

  font-family: var(--font-body);
  font-size: 0.7rem;
  font-weight: 500;
  line-height: 1.2;
  letter-spacing: 0.24em;
  text-transform: uppercase;

  opacity: 0;

  transform: translate3d(0, 0.5rem, 0);

  animation:
    wb-loader-motto-in
    700ms var(--ease-soft)
    350ms forwards;
}

/* ---------------------------------------------------------
   Progress Line
   --------------------------------------------------------- */

.wb-loader__progress {
  position: relative;

  width: min(100%, 12rem);
  height: 1px;

  overflow: hidden;

  background:
    rgba(255, 255, 255, 0.16);

  opacity: 0;

  animation:
    wb-loader-progress-in
    500ms var(--ease-soft)
    500ms forwards;
}

.wb-loader__progress-bar {
  position: absolute;
  inset: 0;

  display: block;
  width: 100%;
  height: 100%;

  background:
    linear-gradient(
      90deg,
      transparent,
      var(--color-white),
      transparent
    );

  transform: translate3d(-100%, 0, 0);

  animation:
    wb-loader-progress
    1.45s var(--ease-standard)
    600ms infinite;
}

/* ---------------------------------------------------------
   Exit State
   --------------------------------------------------------- */

.wb-loader.is-exiting,
.wb-loader[data-loader-state="exiting"] {
  opacity: 0;
  visibility: hidden;
  pointer-events: none;
}

.wb-loader.is-exiting
  .wb-loader__inner {
  opacity: 0;

  transform:
    translate3d(0, -0.75rem, 0)
    scale(0.99);

  transition:
    opacity 420ms var(--ease-standard),
    transform 520ms var(--ease-standard);
}

.wb-loader.is-exiting::before,
.wb-loader.is-exiting::after {
  opacity: 0;

  transition:
    opacity 350ms var(--ease-standard);
}

/* ---------------------------------------------------------
   Animations
   --------------------------------------------------------- */

@keyframes wb-loader-background-in {
  from {
    opacity: 0;
    transform: scale(0.94);
  }

  to {
    opacity: 1;
    transform: scale(1);
  }
}

@keyframes wb-loader-line-in {
  from {
    opacity: 0;
    transform: scaleY(0);
  }

  to {
    opacity: 1;
    transform: scaleY(1);
  }
}

@keyframes wb-loader-logo-in {
  from {
    opacity: 0;

    transform:
      translate3d(0, 1rem, 0)
      scale(0.985);
  }

  to {
    opacity: 1;

    transform:
      translate3d(0, 0, 0)
      scale(1);
  }
}

@keyframes wb-loader-motto-in {
  from {
    opacity: 0;
    transform: translate3d(0, 0.5rem, 0);
  }

  to {
    opacity: 1;
    transform: translate3d(0, 0, 0);
  }
}

@keyframes wb-loader-progress-in {
  from {
    opacity: 0;
    transform: scaleX(0.6);
  }

  to {
    opacity: 1;
    transform: scaleX(1);
  }
}

@keyframes wb-loader-progress {
  0% {
    transform: translate3d(-100%, 0, 0);
  }

  50% {
    transform: translate3d(0, 0, 0);
  }

  100% {
    transform: translate3d(100%, 0, 0);
  }
}

/* ---------------------------------------------------------
   Tablet
   --------------------------------------------------------- */

@media (max-width: 991px) {
  .wb-loader__inner {
    width: min(
      calc(100% - 2.5rem),
      30rem
    );
  }

  .wb-loader__logo {
    width: min(100%, 22rem);
  }
}

/* ---------------------------------------------------------
   Mobile
   --------------------------------------------------------- */

@media (max-width: 767px) {
  .wb-loader__inner {
    width: calc(100% - 2.5rem);
  }

  .wb-loader__logo {
    width: min(100%, 18rem);
    margin-bottom: 1.5rem;
  }

  .wb-loader__motto {
    margin-bottom: 1.25rem;

    font-size: 0.62rem;
    letter-spacing: 0.2em;
  }

  .wb-loader__progress {
    width: 9rem;
  }

  .wb-loader::before {
    background:
      radial-gradient(
        circle at 50% 48%,
        rgba(118, 80, 60, 0.18),
        rgba(74, 48, 38, 0.07) 30%,
        transparent 62%
      );
  }
}

/* ---------------------------------------------------------
   Small Mobile
   --------------------------------------------------------- */

@media (max-width: 479px) {
  .wb-loader__logo {
    width: min(100%, 15.5rem);
  }

  .wb-loader__progress {
    width: 8rem;
  }
}

/* ---------------------------------------------------------
   Short Landscape Screens
   --------------------------------------------------------- */

@media (max-height: 540px) {
  .wb-loader__inner {
    padding-block: 1rem;
  }

  .wb-loader__logo {
    width: min(100%, 16rem);
    margin-bottom: 1rem;
  }

  .wb-loader__motto {
    margin-bottom: 0.9rem;
  }
}

/* ---------------------------------------------------------
   Reduced Motion
   --------------------------------------------------------- */

@media (prefers-reduced-motion: reduce) {
  .wb-loader::before,
  .wb-loader::after,
  .wb-loader__logo,
  .wb-loader__motto,
  .wb-loader__progress,
  .wb-loader__progress-bar {
    animation: none;
  }

  .wb-loader::before,
  .wb-loader::after,
  .wb-loader__logo,
  .wb-loader__motto,
  .wb-loader__progress {
    opacity: 1;
    transform: none;
  }

  .wb-loader__progress-bar {
    transform: translate3d(0, 0, 0);
  }

  .wb-loader.is-exiting
    .wb-loader__inner {
    opacity: 1;
    transform: none;
  }
}

/* ---------------------------------------------------------
   Forced Colors
   --------------------------------------------------------- */

@media (forced-colors: active) {
  .wb-loader {
    color: CanvasText;
    background: Canvas;
  }

  .wb-loader__progress {
    border: 1px solid CanvasText;
  }

  .wb-loader__progress-bar {
    background: Highlight;
  }
}