/* CLV Tech coming-soon page. Colours and proportions are taken from the logo. */

:root {
  --paper: #ffffff;
  --ink: #2c2c2d;
  --ink-soft: #5a6068;
  --blue: #187dbb;
  --blue-deep: #1066a0;
  --blue-bright: #1ea0e7;
  --mist: #e8eaea;

  --font: "Montserrat", "Avenir Next", "Segoe UI", system-ui, sans-serif;
  --ease-out: cubic-bezier(0.2, 0.8, 0.2, 1);
}

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

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

body {
  margin: 0;
  min-height: 100vh;
  min-height: 100svh;
  display: grid;
  grid-template-rows: 1fr auto;
  background: var(--paper);
  color: var(--ink);
  font-family: var(--font);
  font-size: 1rem;
  line-height: 1.6;
  -webkit-font-smoothing: antialiased;
}

/* ---------- 3D layer ---------- */

#scene {
  position: fixed;
  inset: 0;
  z-index: 0;
  width: 100%;
  height: 100%;
  display: block;
  pointer-events: none;
}

.page,
.foot {
  position: relative;
  z-index: 1;
}

/* ---------- Layout ---------- */

.page {
  display: grid;
  place-content: center;
  justify-items: center;
  gap: clamp(2rem, 5.5vh, 3.5rem);
  padding: clamp(1.5rem, 5vh, 4rem) 1.25rem;
  text-align: center;
}

/* The lockup's font-size is the wordmark size; everything inside is sized in em from it,
   so the mark, rule and tagline keep the logo's proportions at every viewport. */
.lockup {
  display: grid;
  justify-items: center;
  font-size: clamp(2.75rem, 1.6rem + 6vw, 6rem);
}

.mark {
  height: clamp(170px, 32vh, 330px);
  aspect-ratio: 569 / 701;
  margin-bottom: 0.32em;
}

.mark__fallback {
  display: block;
  width: 100%;
  height: 100%;
}

/* With JS on, the canvas draws the mark; keep the SVG only as the no-WebGL fallback. */
.js .mark__fallback {
  visibility: hidden;
}

.js.no-gl .mark__fallback {
  visibility: visible;
}

/* ---------- Wordmark, rule, tagline ---------- */

.brand {
  display: inline-grid;
  justify-items: stretch;
}

.wordmark {
  display: flex;
  gap: 0.2em;
  margin: 0;
  font-weight: 800;
  line-height: 1;
  letter-spacing: -0.01em;
  white-space: nowrap;
}

.word {
  display: block;
  overflow: hidden;
  padding-block: 0.04em;
}

.word > span {
  display: block;
}

.word--clv > span {
  color: var(--ink);
}

.word--tech > span {
  color: var(--blue);
}

@supports ((-webkit-background-clip: text) or (background-clip: text)) {
  .word > span {
    -webkit-background-clip: text;
    background-clip: text;
    -webkit-text-fill-color: transparent;
  }

  .word--clv > span {
    background-image: radial-gradient(ellipse at 50% 45%, #4a4a4a, #222223 75%);
  }

  .word--tech > span {
    background-image: radial-gradient(ellipse at 50% 45%, var(--blue-bright), var(--blue-deep) 80%);
  }
}

.rule {
  display: block;
  height: 0.055em;
  margin-top: 0.15em;
  border-radius: 99px;
  background: linear-gradient(90deg, var(--blue-deep), var(--blue-bright) 50%, var(--blue-deep));
}

/* width: 0 + min-width: 100% stops the tagline from widening the lockup,
   and justify stretches it to the exact width of the wordmark, as in the logo. */
.tagline {
  width: 0;
  min-width: 100%;
  margin: 0.6em 0 0;
  font-size: 0.302em;
  font-weight: 600;
  line-height: 1;
  letter-spacing: 0.02em;
  text-transform: uppercase;
  white-space: nowrap;
  text-align: justify;
  text-align-last: justify;
  color: #161617;
}

/* ---------- Message ---------- */

/* Holds the French and English versions of one piece of text.
   Stacked by default; the "Language swap" rules below overlap them and show one at a time. */
.swap {
  display: grid;
  justify-items: center;
  row-gap: 0.35rem;
}

.message h1 {
  margin: 0;
  font-size: clamp(1.5rem, 1.1rem + 1.6vw, 2.25rem);
  font-weight: 600;
  line-height: 1.15;
  letter-spacing: -0.015em;
}

.message__text {
  margin-top: 0.7rem;
}

.message p {
  max-width: 44ch;
  margin: 0;
  color: var(--ink-soft);
  text-wrap: balance;
}

.foot {
  padding: 1.25rem;
  font-size: 0.8125rem;
  text-align: center;
  color: var(--ink-soft);
}

/* ---------- Load sequence: the mark assembles in 3D, then the lockup follows ---------- */

@media (prefers-reduced-motion: no-preference) {
  #scene {
    animation: fade 0.9s ease-out both;
  }

  .word > span {
    animation: rise 0.9s var(--ease-out) 0.75s both;
  }

  .word--tech > span {
    animation-delay: 0.87s;
  }

  .rule {
    animation: draw 0.8s cubic-bezier(0.65, 0, 0.35, 1) 1.15s both;
  }

  .tagline {
    animation: fade 0.7s ease-out 1.45s both;
  }

  .foot {
    animation: fade 0.8s ease-out 2.1s both;
  }

  /* Language swap: French and English share one spot and take 5 seconds each.
     French comes in first, at the end of the load sequence. */
  .swap > * {
    grid-area: 1 / 1;
    animation: swap 10s ease-out 1.75s infinite both;
  }

  .swap > [lang="en"] {
    animation-delay: 6.75s;
  }
}

@keyframes rise {
  from { transform: translateY(110%); }
  to { transform: translateY(0); }
}

@keyframes draw {
  from { transform: scaleX(0); }
  to { transform: scaleX(1); }
}

@keyframes fade {
  from { opacity: 0; }
  to { opacity: 1; }
}

@keyframes swap {
  0% { opacity: 0; transform: translateY(0.5em); }
  7%, 46% { opacity: 1; transform: translateY(0); }
  52%, 100% { opacity: 0; transform: translateY(-0.5em); }
}

/* ---------- No WebGL / no JS: flat version of the logo's hex backdrop ---------- */

.no-gl body,
html:not(.js) body {
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='52' height='90' viewBox='0 0 52 90'%3E%3Cg fill='%23f0f2f4'%3E%3Cpath d='M26 3l21 12v24L26 51 5 39V15z'/%3E%3Cpath d='M0 48l21 12v24L0 96-21 84V60z'/%3E%3Cpath d='M52 48l21 12v24L52 96 31 84V60z'/%3E%3Cpath d='M0-42l21 12v24L0 6-21-6v-24z'/%3E%3Cpath d='M52-42l21 12v24L52 6 31-6v-24z'/%3E%3C/g%3E%3C/svg%3E");
}