/* V10 opening surface: the artwork stays in its source colours. */
.loading-v9[hidden] {
  display: none;
}

.loading-v9 {
  --loading-v9-ink: #f5f4ef;
  --loading-v9-rule: rgba(245, 244, 239, 0);
  --loading-v9-tile-size: min(18.28125vw, 32.5vh);
  position: fixed;
  z-index: 9999;
  inset: 0;
  overflow: hidden;
  background: #0b0b0b;
  color: var(--loading-v9-ink);
  isolation: isolate;
  pointer-events: auto;
  opacity: 1;
}

.loading-v9.is-exiting {
  pointer-events: none;
  transition: opacity 220ms linear;
}

.loading-v9.is-revealing {
  background: transparent;
}

.loading-v9__surface,
.loading-v9__strip,
.loading-v9__hero,
.loading-v9__shutters,
.loading-v9__grid-lines {
  position: absolute;
}

.loading-v9__surface {
  inset: 0;
  overflow: hidden;
  background: #0b0b0b;
}

.loading-v9.is-revealing .loading-v9__surface {
  background: transparent;
}

.loading-v9__strip {
  --loading-v9-strip-left: 0px;
  --loading-v9-strip-gap: 27px;
  top: 50%;
  left: var(--loading-v9-strip-left);
  width: calc(100% - var(--loading-v9-strip-left));
  height: var(--loading-v9-tile-size);
  display: grid;
  grid-template-columns: repeat(5, var(--loading-v9-tile-size));
  column-gap: var(--loading-v9-strip-gap);
  transform: translateY(-50%);
  z-index: 6;
  pointer-events: none;
}

.loading-v9__strip[data-loading-v9-final="true"] {
  display: block;
}

.loading-v9__strip-cell {
  position: relative;
  display: block;
  width: var(--loading-v9-tile-size);
  height: var(--loading-v9-tile-size);
  min-width: 0;
  min-height: 0;
  overflow: hidden;
  background: #0b0b0b;
  clip-path: inset(0 100% 0 0);
  will-change: clip-path, opacity, width;
}

.loading-v9__strip[data-loading-v9-final="true"] .loading-v9__strip-cell {
  position: absolute;
  top: 0;
  left: 0;
}

.loading-v9__strip[data-loading-v9-final="true"] .loading-v9__strip-cell:nth-child(-n + 4) {
  left: 0;
}

.loading-v9__strip[data-loading-v9-final="true"] .loading-v9__strip-cell:nth-child(5) {
  left: calc(var(--loading-v9-final-left) - var(--loading-v9-strip-left));
  width: var(--loading-v9-final-width);
}

.loading-v9__strip-cell img {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: center;
  border: 0;
  filter: none;
  transform: translateZ(0);
}

.loading-v9__strip-cell:nth-child(1) img { object-position: 50% 12%; }
.loading-v9__strip-cell:nth-child(2) img { object-position: 50% 31%; }
.loading-v9__strip-cell:nth-child(3) img { object-position: 50% 50%; }
.loading-v9__strip-cell:nth-child(4) img { object-position: 50% 69%; }
.loading-v9__strip-cell:nth-child(5) img { object-position: 50% 88%; }

.loading-v9__shutters {
  --loading-v9-shutter-left: var(--loading-v9-tile-size);
  top: 50%;
  left: var(--loading-v9-shutter-left);
  width: calc(var(--loading-v9-tile-size) * .62);
  height: var(--loading-v9-tile-size);
  display: grid;
  grid-template-columns: repeat(6, 1fr);
  z-index: 7;
  pointer-events: none;
  transform: translateY(-50%);
  will-change: opacity, clip-path;
}

.loading-v9__shutters i {
  display: block;
  height: 100%;
  background: #dcdcdc;
}

.loading-v9__shutters i:nth-child(2) { background: #c7c7c7; }
.loading-v9__shutters i:nth-child(3) { background: #b1b1b1; }
.loading-v9__shutters i:nth-child(4) { background: #979797; }
.loading-v9__shutters i:nth-child(5) { background: #7e7e7e; }
.loading-v9__shutters i:nth-child(6) { background: #666; }

.loading-v9__hero {
  inset: 0;
  display: grid;
  grid-template-columns: repeat(5, minmax(0, 1fr));
  grid-template-rows: repeat(3, minmax(0, 1fr));
  z-index: 4;
  pointer-events: none;
}

.loading-v9__hero-image {
  display: none;
}

.loading-v9__hero-cell {
  position: relative;
  min-width: 0;
  min-height: 0;
  background: #0b0b0b;
  border-right: 1px solid var(--loading-v9-rule);
  border-bottom: 1px solid var(--loading-v9-rule);
  opacity: 1;
  will-change: opacity;
}

.loading-v9__hero-cell:nth-of-type(5n + 1) { border-left: 1px solid var(--loading-v9-rule); }
.loading-v9__hero-cell:nth-of-type(n + 11) { border-bottom: 0; }

.loading-v9__grid-lines {
  inset: 0;
  z-index: 8;
  pointer-events: none;
  opacity: 0;
  background-image:
    linear-gradient(to right, transparent calc(100% - 1px), var(--loading-v9-rule) calc(100% - 1px)),
    linear-gradient(to bottom, transparent calc(100% - 1px), var(--loading-v9-rule) calc(100% - 1px));
  background-size: 20% 100%, 100% 33.333333%;
  background-position: left top;
  background-repeat: repeat-x, repeat-y;
}

.loading-v9-title-overlay {
  position: fixed !important;
  right: var(--home-pad, 2.1vw) !important;
  bottom: var(--home-pad, 2.1vw) !important;
  z-index: 10001 !important;
  color: #fff !important;
  mix-blend-mode: difference !important;
  pointer-events: none !important;
}

.loading-v9-title-overlay h1 {
  color: inherit !important;
}

body[data-loading-v9-title="loading"] .loading-v9-title-overlay {
  visibility: visible;
}

@media (max-width: 700px) {
  .loading-v9 {
    --loading-v9-tile-size: min(30vw, 18vh);
  }

  .loading-v9__strip {
    --loading-v9-strip-gap: 4px;
    left: 50%;
    width: max-content;
    grid-template-columns: repeat(3, var(--loading-v9-tile-size));
    grid-template-rows: repeat(2, var(--loading-v9-tile-size));
    column-gap: 4px;
    row-gap: 4px;
    transform: translate(-50%, -50%);
    height: auto;
  }

  .loading-v9__strip[data-loading-v9-final="true"] {
    display: block;
    width: 100%;
    left: 0;
    transform: translateY(-50%);
  }

  .loading-v9__strip[data-loading-v9-final="true"] .loading-v9__strip-cell:nth-child(5) {
    left: auto;
    right: 16px;
    width: var(--loading-v9-tile-size);
  }

  .loading-v9__strip-cell:nth-child(4) {
    grid-column: 1;
    grid-row: 2;
  }

  .loading-v9__strip-cell:nth-child(5) {
    grid-column: 2;
    grid-row: 2;
  }

  .loading-v9__shutters {
    display: none;
  }

  .loading-v9__hero {
    grid-template-columns: repeat(2, minmax(0, 1fr));
    grid-template-rows: repeat(4, minmax(0, 1fr));
  }

  .loading-v9__hero-cell[data-loading-v9-mobile-hidden="true"] {
    display: none;
  }

  .loading-v9__grid-lines {
    background-size: 50% 100%, 100% 25%;
  }

  .loading-v9-title-overlay {
    left: 20px !important;
    right: 20px !important;
    bottom: 28px !important;
  }
}

@media (prefers-reduced-motion: reduce) {
  .loading-v9,
  .loading-v9.is-exiting {
    transition: none;
  }
}