/* Coming-soon page, after the Figma page "Coming soon" (frames lg 1440 and sm 390).
   Plain CSS with the tokens of the main theme (resources/css/app.css and plugins/):
   dark colour scheme, MiSans Latin, fluid sizes between 320px and 1440px. */

@font-face {
  font-family: 'MiSans Latin';
  font-style: normal;
  font-weight: 350;
  font-display: swap;
  src: url('fonts/misans-latin-normal.woff2') format('woff2');
}

@font-face {
  font-family: 'MiSans Latin';
  font-style: normal;
  font-weight: 400;
  font-display: swap;
  src: url('fonts/misans-latin-regular.woff2') format('woff2');
}

:root {
  /* Colours: Figma Colors collection, dark mode */
  --color-neutral-950: #0a0a0a;
  --color-neutral-400: #8f9191;
  --color-white: #ffffff;
  --color-brand-blue: #496cff;
  --bg: var(--color-neutral-950);
  --fg: var(--color-white);
  --fg-muted: var(--color-neutral-400);
  --accent-blue: var(--color-brand-blue);
  --accent-blue-fg: var(--color-neutral-950);

  --font-sans: 'MiSans Latin', 'Helvetica Neue', Helvetica, Arial, sans-serif;

  /* Fluid tokens (Breakpoint collection, sm 320px → lg 1440px) */
  --container-x: clamp(1rem, 0.4286rem + 2.8571vw, 3rem); /* 16 → 48 */
  --container-max: 90rem; /* 1440px */
  --media-max: 120rem; /* 1920px, the line-up image stops here */
}

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

body,
h1,
h2,
p {
  margin: 0;
}

html {
  -webkit-text-size-adjust: 100%;
}

body {
  display: flex;
  flex-direction: column;
  min-height: 100svh;
  background: var(--bg);
  color: var(--fg);
  font-family: var(--font-sans);
  font-size: 0.9375rem;
  line-height: 1.5;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
}

img {
  display: block;
  max-width: 100%;
  height: auto;
}

:focus-visible {
  outline: 2px solid var(--color-brand-blue);
  outline-offset: 2px;
}

/* Text styles (Figma type-*) */
.type-display {
  font-size: clamp(2.75rem, 2.3571rem + 1.9643vw, 4.125rem); /* 44 → 66 */
  font-weight: 400;
  line-height: 1;
  text-wrap: balance;
}

.type-overline {
  font-size: clamp(1rem, 0.9643rem + 0.1786vw, 1.125rem); /* 16 → 18 */
  font-weight: 350;
  line-height: 1.4;
  letter-spacing: 2px;
  text-transform: uppercase;
}

.type-body-sm {
  font-size: 0.8125rem; /* 13 */
  line-height: 1.45;
}

/* Hero: logo, heading and contact on the dark sky of the line-up image. The image is pulled
   up under the text by the height of its sky, so the text never reaches the cars, and fades
   into the page at the top and bottom. */
.hero {
  display: flex;
  flex-direction: column;
  flex: 1;
}

.hero__content {
  position: relative;
  z-index: 1;
  padding-inline: var(--container-x);
  text-align: center;
}

.hero__header {
  display: flex;
  justify-content: center;
  padding-block: clamp(2rem, 1.7143rem + 1.4286vw, 3rem); /* 32 → 48 */
}

.logo {
  width: clamp(15.125rem, 13.0393rem + 6.5179vw, 19.6875rem); /* 242 → 315 */
  height: auto;
}

.hero__intro {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 0.75rem;
  padding-top: clamp(2rem, 1.7143rem + 1.4286vw, 3rem); /* 32 → 48 */
}

.hero__contact {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 0.75rem;
  margin-top: 1.25rem; /* with the gap: 32px below the heading */
}

.hero__media {
  /* The sky stays dark behind the text (white email 4.5:1) and opens up above the cars. */
  --media-fade: linear-gradient(to bottom, transparent, rgb(0 0 0 / 0.25) 45%, #000 68%, #000 78%, transparent);

  width: 100%;
  max-width: var(--media-max);
  margin-inline: auto;
  margin-top: calc(-1 * min(22.5vw, 20rem)); /* the sky above the cars */
  aspect-ratio: 9 / 4; /* 2:1 image, the empty road below the cars cut off */
  overflow: hidden;
  -webkit-mask-image: var(--media-fade);
  mask-image: var(--media-fade);
}

.hero__media img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: top;
}

/* Beyond 1920px the image also fades out at the sides. */
@media (min-width: 120rem) {
  .hero__media {
    -webkit-mask-image:
      var(--media-fade),
      linear-gradient(to right, transparent, #000 10%, #000 90%, transparent);
    -webkit-mask-composite: source-in;
    mask-image:
      var(--media-fade),
      linear-gradient(to right, transparent, #000 10%, #000 90%, transparent);
    mask-composite: intersect;
  }
}

/* Phones: the portrait image (4:5), its dark top already matches the page. */
@media (max-width: 39.99rem) {
  .hero__media {
    margin-top: -30vw;
    aspect-ratio: 390 / 408;
    -webkit-mask-image: linear-gradient(to bottom, transparent, #000 30%, #000 76%, transparent);
    mask-image: linear-gradient(to bottom, transparent, #000 30%, #000 76%, transparent);
  }
}

/* Button: Figma Button, Primary md (theme components/button.css) */
.button {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 0.5rem;
  min-height: 3rem;
  padding: 0.75rem 1.5rem;
  background: var(--accent-blue);
  color: var(--accent-blue-fg);
  font-size: clamp(0.9375rem, 0.9196rem + 0.0893vw, 1rem); /* 15 → 16 */
  line-height: 1.2;
  text-decoration: none;
  transition: background-color 0.2s, color 0.2s;
}

.button:hover {
  background: var(--fg);
  color: var(--bg);
}

.button__icon {
  width: 1.5rem;
  height: 1.5rem;
  flex-shrink: 0;
  transition: transform 0.2s;
}

.button:hover .button__icon {
  transform: translateX(0.25rem);
}

/* Footer: legal notice and copyright, caption size */
.footer {
  display: flex;
  flex-direction: column;
  gap: 1.5rem;
  width: 100%;
  max-width: var(--container-max);
  margin-inline: auto;
  padding: 2rem var(--container-x);
  color: var(--fg-muted);
  font-size: 0.6875rem; /* 11 */
  line-height: 1.4;
}

.footer__legal {
  display: flex;
  flex-direction: column;
  gap: 0.25rem;
}

.footer__title {
  color: var(--fg);
  font-size: inherit;
  font-weight: 400;
}

@media (min-width: 40rem) {
  .footer {
    flex-direction: row;
    justify-content: space-between;
    align-items: flex-end;
  }
}

@media (prefers-reduced-motion: reduce) {
  .button,
  .button__icon {
    transition: none;
  }

  .button:hover .button__icon {
    transform: none;
  }
}