/* ==========================================================================
   Page loader
   Shown only when JS is running (html.js). main.js adds html.is-loaded
   once the page has loaded, which slides the loader away.
   ========================================================================== */

.loader {
  display: none;
}

.js .loader {
  position: fixed;
  inset: 0;
  z-index: 1000;
  display: grid;
  place-items: center;
  padding: var(--container-pad);
  background: var(--color-white);
  transition:
    transform 800ms cubic-bezier(0.76, 0, 0.24, 1),
    visibility 0s linear 800ms;
}

.no-loader .loader {
  display: none !important;
}

.js:not(.is-loaded) body {
  overflow: hidden;
}

/* Hold every page entrance animation until the loader lifts,
   so sections animate in as they are revealed. */
.js:not(.is-loaded) main *,
.js:not(.is-loaded) main *::before,
.js:not(.is-loaded) main *::after {
  animation-play-state: paused !important;
}

.is-loaded .loader {
  transform: translateY(-100%);
  visibility: hidden;
  pointer-events: none;
}

.loader__inner {
  display: flex;
  flex-direction: column;
  align-items: center;
  text-align: center;
  transition:
    opacity 300ms ease,
    transform 800ms cubic-bezier(0.76, 0, 0.24, 1);
}

.is-loaded .loader__inner {
  opacity: 0;
  transform: translateY(-40px);
}

/* Logo: wipes in from the bottom (same motion as the button fill), then breathes */
.loader__logo {
  width: auto;
  height: 96px;
  animation:
    loader-logo-in 900ms cubic-bezier(0.65, 0, 0.35, 1) both,
    loader-breathe 2400ms ease-in-out 900ms infinite;
}

.loader__line {
  max-width: 24ch;
  margin-top: var(--space-7);
  font-family: var(--font-display);
  font-size: var(--fs-h4);
  font-weight: var(--fw-semibold);
  line-height: var(--lh-h4);
  letter-spacing: -0.01em;
  color: var(--color-black);
  text-wrap: balance;
  animation: loader-fade-up 600ms var(--ease-out) 350ms both;
}

/* Three segment bar in the brand colours */
.loader__bar {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: var(--space-1);
  width: 144px;
  margin-top: var(--space-6);
  animation: loader-fade-up 600ms var(--ease-out) 500ms both;
}

.loader__bar span {
  height: 3px;
  border-radius: var(--radius-pill);
  animation: loader-seg 1500ms cubic-bezier(0.65, 0, 0.35, 1) infinite;
}

.loader__bar span:nth-child(1) { background: var(--color-brand-blue); }
.loader__bar span:nth-child(2) { background: var(--color-brand-orange); animation-delay: 150ms; }
.loader__bar span:nth-child(3) { background: var(--color-brand-red); animation-delay: 300ms; }

@keyframes loader-logo-in {
  from { clip-path: inset(100% 0 0 0); transform: translateY(12px); }
  to   { clip-path: inset(0 0 0 0);    transform: none; }
}

@keyframes loader-breathe {
  0%, 100% { transform: scale(1); }
  50%      { transform: scale(1.04); }
}

@keyframes loader-fade-up {
  from { opacity: 0; transform: translateY(10px); }
  to   { opacity: 1; transform: none; }
}

@keyframes loader-seg {
  0%   { transform: scaleX(0); transform-origin: left; }
  45%  { transform: scaleX(1); transform-origin: left; }
  55%  { transform: scaleX(1); transform-origin: right; }
  100% { transform: scaleX(0); transform-origin: right; }
}

@media (max-width: 640px) {
  .loader__logo {
    height: 72px;
  }

  .loader__line {
    margin-top: var(--space-6);
  }
}

@media (prefers-reduced-motion: reduce) {
  .loader__bar span {
    animation: none;
  }
}