/* ============================================================================
   MACKDATA — Landing preloader
   Animation mechanic ported from the codegrid PermianWorld reveal (revealer
   wordmark grows in -> tagline fades up -> clip-path wipe -> nav + hero rise).
   Layout/copy are mackdata's own; only the motion is borrowed.
   Front page only (enqueued conditionally + body.mk-has-preloader).
   ========================================================================== */

/* Pre-hide the risers before JS runs so there's no flash of final state.
   Scoped to html.js: with JavaScript off (or inline scripts held back by an
   optimizer plugin) nothing could ever dismiss the overlay, so don't show it. */
html.js body.mk-has-preloader { overflow: hidden; }
html.js body.mk-has-preloader .mk-nav,
html.js body.mk-has-preloader [data-preloader-rise] {
  transform: translateY(35svh);
  will-change: transform;
}
html:not(.js) .mk-preloader { display: none !important; }

/* Already seen this session: the head script adds .mk-preloader-skip before the
   overlay paints, so we hide it and reveal the risers immediately — no flash. */
html.mk-preloader-skip .mk-preloader { display: none !important; }
html.mk-preloader-skip body.mk-has-preloader { overflow: auto; }
html.mk-preloader-skip body.mk-has-preloader .mk-nav,
html.mk-preloader-skip body.mk-has-preloader [data-preloader-rise] {
  transform: none !important;
  will-change: auto;
}

.mk-preloader {
  position: fixed;
  inset: 0;
  height: 100svh;
  display: grid;
  place-items: center;
  padding: 24px;
  background: linear-gradient(135deg, #08183d 0%, #182f72 55%, #10235a 100%);
  clip-path: polygon(0% 0%, 100% 0%, 100% 100%, 0% 100%);
  will-change: clip-path;
  overflow: hidden;
  z-index: 2000;
}

/* Wordmark with the tagline beneath it. The tagline is sized off the
   wordmark's width (--mk-pl-logo) so it spans exactly under the logo. */
.mk-preloader__stack {
  /* Never wider than the screen minus the panel's 24px side padding. */
  --mk-pl-logo: min(clamp(260px, 36vw, 560px), 100vw - 48px);
  display: flex;
  flex-direction: column;
  align-items: center;
  width: var(--mk-pl-logo);
}

/* The white Mackdata wordmark, hidden until the JS grows it in. */
.mk-preloader__logo {
  display: block;
  width: 100%;
  height: auto;
  opacity: 0;
  transform: scale(0.7);
  will-change: transform, opacity;
}

/* Hidden until the JS fades it up. (.mk-preloader prefix beats the
   site-wide `.mk-site p { margin: 0 }`.) */
.mk-preloader .mk-preloader__tag {
  display: flex;
  align-items: center;
  justify-content: space-between;
  width: 100%;
  margin: calc(var(--mk-pl-logo) * 0.055) 0 0;
  color: rgba(255, 255, 255, 0.78);
  font-size: calc(var(--mk-pl-logo) * 0.0255);
  font-weight: 500;
  letter-spacing: 0.2em;
  line-height: 1.3;
  text-transform: uppercase;
  white-space: nowrap;
  opacity: 0;
  transform: translateY(12px);
}
.mk-preloader__dot {
  flex: none;
  width: 0.35em;
  height: 0.35em;
  border-radius: 50%;
  background: var(--mk-blue-bright);
}

/* Narrower screens: the one-line tagline would be too small to read, so each half
   gets its own line at a readable size. */
@media (max-width: 1180px) {
  .mk-preloader .mk-preloader__tag {
    flex-direction: column;
    gap: 8px;
    margin-top: 18px;
    /* 13px, shrinking with the wordmark so the longer half always fits under it. */
    font-size: min(13px, calc(var(--mk-pl-logo) * 0.048));
  }
  .mk-preloader__dot { display: none; }
}