/* ==========================================================================
   Preloader (components/preloader.php, driven by app/common.js)
   Positions come from the 1920 × 1080 Figma frames as percentages of the screen, so the
   line frame lands in the same place on any size: vertical lines at 79 / 1439 / 1841,
   horizontal lines at 599 / 1000 (the home hero's grid, pixel for pixel).
   ========================================================================== */

html.is_preloading,
html.is_preloading body {
  overflow: hidden;
}

.preloader_area {
  position: fixed;
  inset: 0;
  z-index: 9999;
  overflow: hidden;
  background-color: #FFFFFF;
}

/* once the panels cover the screen the white is dropped, so the page is what shows as they
   lift away */
.preloader_area.is_lifting {
  background-color: transparent;
}

.preloader_stage_area {
  position: absolute;
  inset: 0;
}

/* ===== Line frame ===== */

.preloader_line {
  position: absolute;
  display: block;
  background-color: #DDDDDD;
}

/* vertical lines: drawn in from the top, so they start collapsed (first paint included) */
.preloader_line.is_x1,
.preloader_line.is_x2,
.preloader_line.is_x3 {
  top: 0;
  bottom: 0;
  width: 1px;
  transform: scaleY(0);
  transform-origin: center top;
}

/* horizontal lines: drawn in from the left */
.preloader_line.is_y1,
.preloader_line.is_y2 {
  left: 0;
  right: 0;
  height: 1px;
  transform: scaleX(0);
  transform-origin: left center;
}

.preloader_line.is_x1,
.preloader_mark.is_x1 {
  left: 4.115%;
}

.preloader_line.is_x2,
.preloader_mark.is_x2 {
  left: calc(75% - 1px);
}

.preloader_line.is_x3,
.preloader_mark.is_x3 {
  left: 95.885%;
}

/* the home hero's upper line sits on the top of its square card, so it follows the screen's
   width: 20.833vw above the bottom line (599 at 1920 × 1080) */
.preloader_line.is_y1,
.preloader_mark.is_y1 {
  top: calc(92.593% - 20.833vw - 1px);
}

.preloader_line.is_y2,
.preloader_mark.is_y2 {
  top: 92.593%;
}

/* a 9px + centred on each crossing, in brand blue, popped in once the lines are drawn */
.preloader_mark {
  position: absolute;
  display: block;
  width: 9px;
  height: 9px;
  margin: -4px 0 0 -4px;
  opacity: 0;
}

.preloader_mark::before,
.preloader_mark::after {
  content: "";
  position: absolute;
  background-color: #2D4385;
}

.preloader_mark::before {
  top: 4px;
  left: 0;
  width: 9px;
  height: 1px;
}

.preloader_mark::after {
  top: 0;
  left: 4px;
  width: 1px;
  height: 9px;
}

/* ===== Logo + progress ===== */

/* logo top at 364 of 1080; the bar sits 64px under the logo */
.preloader_center_area {
  position: absolute;
  top: 33.7%;
  left: 50%;
  display: flex;
  flex-direction: column;
  align-items: center;
  transform: translateX(-50%);
}

.preloader_logo_area {
  width: clamp(180px, 18.55vw, 356px);
}

.preloader_logo_area svg,
.preloader_logo_area img {
  display: block;
  width: 100%;
  height: auto;
  overflow: visible;
}

/* the parts that build themselves start hidden on the first paint */
.preloader_logo_area [data-preloader-mascot],
.preloader_logo_area [data-preloader-subline],
.preloader_logo_area [data-preloader-tagline] {
  opacity: 0;
}

/* ===== Progress: a blue fill along the long horizontal line, and the percentage ===== */

/* sits exactly on the long line (2px over its 1px), growing from the left as the page loads */
.preloader_progress_line {
  position: absolute;
  top: calc(92.593% - 20.833vw - 1px);
  left: 0;
  right: 0;
  height: 2px;
  margin-top: -0.5px;
  background-color: #2D4385;
  transform: scaleX(0);
  transform-origin: left center;
}

/* the square cell on the right, between the two vertical lines and the two long lines: the
   percentage sits at its bottom left, 40 in and 30 up, like the label at its top */
.preloader_percent_area {
  position: absolute;
  top: calc(92.593% - 20.833vw);
  bottom: 7.407%;
  left: 75%;
  width: 20.885%;
  display: flex;
  align-items: flex-end;
  padding: 0 40px 30px;
}

.preloader_percent_mask {
  display: flex;
  align-items: baseline;
  overflow: hidden;
  font-family: "BT Steinhart", sans-serif;
  font-weight: 500;
  font-size: 5vw;
  line-height: 1;
  letter-spacing: -0.02em;
  color: #2D4385;
  font-variant-numeric: tabular-nums;
}

.preloader_percent_mask > span {
  display: block;
  transform: translateY(110%);
}

/* a third of the number's size, on the same baseline, in the label grey */
.preloader_percent_sign {
  margin-left: 0.12em;
  font-size: 0.32em;
  line-height: 1;
  letter-spacing: 0;
  color: #86868B;
}

/* ===== Labels ===== */

.preloader_status,
.preloader_bottom_area {
  font-family: "BT Steinhart", sans-serif;
  font-size: 14px;
  font-weight: 500;
  line-height: 1.2;
  text-transform: uppercase;
  color: #86868B;
}

/* LOADING / READY: 40px into the right-hand column, just under the middle line. Both words
   share one grid cell inside a mask, so one rolls up and out as the other rolls in */
.preloader_status {
  position: absolute;
  top: calc(92.593% - 20.833vw + 30px);
  left: calc(75% + 40px);
  display: grid;
  overflow: hidden;
}

.preloader_status span {
  grid-area: 1 / 1;
  display: block;
  transform: translateY(110%);
}

.preloader_status [data-preloader-ready] {
  color: #2D4385;
}

.preloader_bottom_area {
  position: absolute;
  top: 92.593%;
  bottom: 0;
  left: 6.25%;
  right: calc(25% + 40px);
  display: flex;
  align-items: center;
  justify-content: space-between;
}

[data-preloader-since] {
  visibility: hidden;
}

.preloader_tagline {
  display: block;
  overflow: hidden;
  color: #000000;
}

.preloader_tagline span {
  display: block;
  transform: translateY(110%);
}

/* ===== Exit panels ===== */

/* plain colour, only there for the movement: waiting below the screen, they sweep up through
   it and off the top. The dark one leads in and trails out, so the blue arrives over a
   deeper edge and leaves on one */
.preloader_panel_area {
  position: absolute;
  inset: 0;
  background-color: #2D4385;
  transform: translateY(100%);
}

.preloader_panel_area.is_dark {
  background-color: #1F2F5E;
}

/* ==========================================================================
   Preloader — responsive
   ========================================================================== */

@media screen and (max-width: 991px) {

  .preloader_bottom_area {
    left: 40px;
  }
}

/* phones: the right-hand columns would be a sliver, so the frame keeps its outer line and
   the two horizontals, and the labels move under the bar and to the screen edges */
@media screen and (max-width: 767px) {
  .preloader_line.is_x2,
  .preloader_line.is_x3,
  .preloader_mark.is_x2,
  .preloader_mark.is_x3 {
    display: none;
  }


  .preloader_line.is_y1,
  .preloader_mark.is_y1 {
    top: calc(55.556% - 1px);
  }

  .preloader_status {
    top: calc(55.556% + 30px);
  }

  .preloader_progress_line {
    top: calc(55.556% - 1px);
  }

  .preloader_percent_area {
    top: calc(55.556% + 70px);
    bottom: auto;
    left: 0;
    width: 100%;
    justify-content: center;
    padding: 0 20px;
  }

  .preloader_percent_mask {
    font-size: 15vw;
  }

  .preloader_status {
    left: 0;
    right: 0;
    justify-items: center;
  }

  .preloader_bottom_area {
    left: 20px;
    right: 20px;
  }

  .preloader_status,
  .preloader_bottom_area {
    font-size: 12px;
  }
}

/* already played in this session (components/preloader.php): never shown */
html.is_preloaded .preloader_area {
  display: none !important;
}