/* Initial navigation only. No class is added without JavaScript: the page stays usable. */
html.bbc-loading,
html.bbc-loading body {
  overflow: hidden !important;
  overscroll-behavior: none;
  background: #000 !important;
}

/* Black fail-safe while the head script mounts the real square, before parsing body. */
html.bbc-loading:not(.bbc-loader-mounted)::before {
  content: "";
  position: fixed;
  inset: 0;
  z-index: 2147483647;
  background: #000;
}

#bbc-intro-loader {
  --bbc-loader-bounce: 900ms;
  --bbc-loader-wordmark: 500ms;
  --bbc-loader-fly: 750ms;
  position: fixed;
  inset: 0;
  z-index: 2147483647;
  display: grid;
  place-items: center;
  box-sizing: border-box;
  width: 100vw;
  width: 100dvw;
  max-width: none;
  height: 100vh;
  height: 100dvh;
  max-height: none;
  margin: 0;
  padding: env(safe-area-inset-top, 0px) env(safe-area-inset-right, 0px)
           env(safe-area-inset-bottom, 0px) env(safe-area-inset-left, 0px);
  overflow: hidden;
  border: 0;
  background: #000;
  color: #fff;
  isolation: isolate;
  opacity: 1;
}

/* The top-layer backdrop covers viewport edges independently of mobile toolbar
   resizing and safe-area padding. It fades with the cover at the very end. */
#bbc-intro-loader::backdrop { background: #000; }

#bbc-intro-loader .bbc-loader-logo {
  position: relative;
  z-index: 1;
  display: block;
  margin: 0;
  padding: 0;
  font: 900 clamp(21.333333px, 5.933333vw, 90.666667px)/1.1 Arial, Helvetica, sans-serif;
  letter-spacing: -.065em;
  white-space: nowrap;
  text-align: center;
  color: #fff;
  opacity: 0;
  transform: scale(1);
  transform-origin: center;
  will-change: transform, opacity;
}
#bbc-intro-loader.is-positioned .bbc-loader-logo { opacity: 1; }

#bbc-intro-loader .bbc-loader-brand {
  display: flex;
  align-items: baseline;
  gap: .045em;
  /* The entire final wordmark stays centered from first paint. Masked text keeps
     its full layout width, leaving the square in its final period X at all times. */
}

#bbc-intro-loader .bbc-loader-wordmark {
  display: block;
  clip-path: inset(0 0 0 100%);
  transition: clip-path var(--bbc-loader-wordmark) cubic-bezier(.22, 1, .36, 1);
}

#bbc-intro-loader .bbc-loader-baseline {
  /* Zero-area measurement point at the actual typographic baseline; not a mark. */
  display: inline-block;
  width: 0;
  height: 0;
  margin: 0;
  padding: 0;
  vertical-align: baseline;
}

#bbc-intro-loader .bbc-loader-dot-seat {
  position: relative;
  display: block;
  flex: 0 0 .13em;
  width: .13em;
  height: .13em;
  /* No in-flow children: flex synthesizes this item's baseline at its bottom edge.
     align-items:baseline puts that edge on the wordmark's real text baseline. */
}

#bbc-intro-loader .bbc-loader-dot {
  position: absolute;
  inset: 0;
  display: block;
  width: 100%;
  height: 100%;
  border-radius: 0;
  background: #a1046f;
  color: #a1046f;
  transform-origin: center;
  will-change: transform;
}

#bbc-intro-loader.is-bouncing .bbc-loader-dot {
  animation: bbc-loader-bounce var(--bbc-loader-bounce) infinite;
}
#bbc-intro-loader.is-static .bbc-loader-dot { animation: none; }

/* Exactly two eased arcs. The second rises less than half as far as the first. */
@keyframes bbc-loader-bounce {
  0% { transform: translateY(0); animation-timing-function: cubic-bezier(.2, .7, .4, 1); }
  24% { transform: translateY(-.85em); animation-timing-function: cubic-bezier(.6, 0, .8, .3); }
  48% { transform: translateY(0); animation-timing-function: cubic-bezier(.2, .7, .4, 1); }
  65% { transform: translateY(-.38em); animation-timing-function: cubic-bezier(.6, 0, .8, .3); }
  82%, 100% { transform: translateY(0); }
}

/* Reveal reserved text outward from the square's unchanged period position. */
#bbc-intro-loader.is-writing .bbc-loader-wordmark { clip-path: inset(0); }

#bbc-intro-loader.is-flying .bbc-loader-logo {
  animation: bbc-loader-fly var(--bbc-loader-fly) cubic-bezier(.32, 0, .2, 1) both;
}
#bbc-intro-loader.is-flying {
  animation: bbc-loader-page-reveal var(--bbc-loader-fly) linear both;
}
#bbc-intro-loader.is-flying::backdrop {
  /* Custom properties are not inherited into ::backdrop. Keep in sync with FLY_MS. */
  animation: bbc-loader-page-reveal 750ms linear both;
}
@keyframes bbc-loader-fly {
  from { transform: scale(1); opacity: 1; }
  to { transform: scale(2.6); opacity: 0; }
}
@keyframes bbc-loader-page-reveal {
  0%, 55% { opacity: 1; }
  100% { opacity: 0; }
}

#bbc-intro-loader .bbc-loader-status {
  position: absolute;
  width: 1px;
  height: 1px;
  padding: 0;
  overflow: hidden;
  clip-path: inset(50%);
  white-space: nowrap;
}

/* Keyboard users can leave immediately, without waiting for the asset deadline. */
#bbc-intro-loader .bbc-loader-skip {
  position: absolute;
  z-index: 3;
  left: 20px;
  bottom: 20px;
  padding: 12px 16px;
  border: 1px solid #fff;
  border-radius: 0;
  background: #000;
  color: #fff;
  font: 700 14px/1.2 Arial, Helvetica, sans-serif;
  cursor: pointer;
  transform: translateY(calc(100% + 24px));
}
#bbc-intro-loader .bbc-loader-skip:focus {
  transform: none;
  outline: 2px solid #a1046f;
  outline-offset: 4px;
}

@media (prefers-reduced-motion: reduce) {
  /* The static square remains while critical assets settle; no timed choreography.
     JS also immediately releases the page if this preference changes mid-run. */
  #bbc-intro-loader,
  #bbc-intro-loader::backdrop,
  #bbc-intro-loader * { transition: none !important; animation: none !important; }
  #bbc-intro-loader .bbc-loader-logo { transform: none !important; }
}