/* ==========================================================================
   Just Knight – landing page
   Layout: every section holds a fixed "stage" (1440 design px on desktop,
   390 on mobile). Elements are placed with design coordinates passed as
   CSS custom properties (--x, --y, --w, --h, --fs, --lh and their --m*
   mobile counterparts), and --u converts one design px into real pixels.
   ========================================================================== */

@font-face {
  font-family: "JK Heading";
  src: url("../assets/fonts/heading-400.woff") format("woff");
  font-weight: 400;
  font-style: normal;
  font-display: swap;
}
@font-face {
  font-family: "JK Heading";
  src: url("../assets/fonts/heading-700.woff") format("woff");
  font-weight: 700;
  font-style: normal;
  font-display: swap;
}
@font-face {
  font-family: "JK Body";
  src: url("../assets/fonts/body-400.woff") format("woff");
  font-weight: 400;
  font-style: normal;
  font-display: swap;
}
@font-face {
  font-family: "JK Body";
  src: url("../assets/fonts/body-700.woff") format("woff");
  font-weight: 700;
  font-style: normal;
  font-display: swap;
}

:root {
  --bg: #000;
  --fg: #fff;
  --ease: cubic-bezier(0.22, 0.61, 0.36, 1);
}

*,
*::before,
*::after {
  box-sizing: border-box;
}

html,
body {
  margin: 0;
  background: var(--bg);
  color: var(--fg);
}

body {
  font-family: "JK Heading", "Helvetica Neue", Arial, sans-serif;
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
}

h1, h2, p, address {
  margin: 0;
  font-style: normal;
}

img {
  display: block;
}

a {
  color: inherit;
  text-decoration: none;
}

/* ---------- Section & stage ---------- */

.section {
  position: relative;
  overflow: hidden;
  background: var(--bg);
  container-type: inline-size;
  /* desktop: 1 design px = 1px up to 1440px wide, scales down below that */
  --u: calc(min(100cqw, 1440px) / 1440);
  height: calc(var(--h) * var(--u));
}

.stage {
  position: relative;
  width: calc(1440 * var(--u));
  height: 100%;
  margin: 0 auto;
}

.el {
  position: absolute;
  left: calc(var(--x) * var(--u));
  top: calc(var(--y) * var(--u));
}

img.el {
  width: calc(var(--w) * var(--u));
  height: calc(var(--h) * var(--u));
  object-fit: cover;
}

/* ---------- Typography ---------- */

.title,
.text {
  font-size: calc(var(--fs) * var(--u));
  line-height: calc(var(--lh) * var(--u));
  white-space: nowrap;
}

.title {
  font-weight: 700;
  text-transform: uppercase;
}

.text {
  font-weight: 400;
}

.text b {
  font-weight: 700;
}

.text.alt {
  font-family: "JK Body", "Helvetica Neue", Arial, sans-serif;
}

.brand {
  /* + 0.4em compensates the reveal mask padding */
  width: calc(var(--w) * var(--u) + 0.4em);
  text-align: right;
}

/* line breaks that only apply to one layout */
br.m { display: none; }

/* ---------- Hero ---------- */

.hero-bg {
  position: absolute;
  left: 0;
  top: calc(-33.9 * var(--u) - max(0px, 100cqw - 1440px) * 0.296);
  width: 105cqw;
  height: auto;
  opacity: 0.59;
}

/* ---------- Scroll reveal ---------- */

.reveal-slide {
  overflow: hidden;
  /* room so the mask doesn't crop glyph edges */
  padding: 0.12em 0.2em;
  margin: -0.12em -0.2em;
}

.reveal-slide > span {
  display: inline-block;
  transform: translateX(105%);
  transition: transform 1.1s var(--ease);
}

.reveal-fade {
  opacity: 0;
  transition: opacity 1.1s var(--ease) 0.25s;
}

.is-visible.reveal-slide > span,
.is-visible .reveal-slide > span {
  transform: none;
}

.is-visible.reveal-fade,
.is-visible .reveal-fade {
  opacity: 1;
}

@media (prefers-reduced-motion: reduce) {
  .reveal-slide > span,
  .reveal-fade {
    transform: none;
    opacity: 1;
    transition: none;
  }
}

/* ==========================================================================
   Mobile layout (390 design px wide, scales up to 1.3x on small tablets)
   ========================================================================== */

@media (max-width: 1023px) {
  .section {
    --u: calc(min(100cqw, 507px) / 390);
    height: calc(var(--mh) * var(--u));
  }

  .stage {
    width: calc(390 * var(--u));
  }

  .el {
    left: calc(var(--mx) * var(--u));
    top: calc(var(--my) * var(--u));
  }

  img.el {
    width: calc(var(--mw) * var(--u));
    height: calc(var(--mh) * var(--u));
  }

  .title,
  .text {
    font-size: calc(var(--mfs) * var(--u));
    line-height: calc(var(--mlh) * var(--u));
  }

  .brand {
    width: calc(var(--mw) * var(--u) + 0.4em);
  }

  br.m { display: inline; }
  br.d { display: none; }

  .hero-bg {
    left: calc(50cqw - 195 * var(--u) - 470.5 * var(--u));
    top: calc(-14.1 * var(--u));
    width: calc(1397.7 * var(--u));
  }
}