/* MASAR Q8, coming-soon page: the landing hero on its own, with "Bientôt en ligne" and two ways to reach the agency.
   Same footage, car matte and logo as the site's hero; nothing else from the site is loaded. */
@font-face {
  font-family: "Archivo";
  src: url("/fonts/archivo-var-latin.woff2") format("woff2");
  font-weight: 100 900;
  font-stretch: 62% 125%;
  font-display: swap;
}

:root {
  --ivory: #f1efe8;
  --silver: #aeb3ba;
  --red: #ba1727;
  --red-gloss: linear-gradient(180deg, #cc2233 0%, #ba1727 52%, #a81423 100%);
  --logo-accent: #ba1727;
  --gut: clamp(16px, 4vw, 40px);
  color-scheme: dark;
}
*, *::before, *::after { box-sizing: border-box; }
html, body { margin: 0; background: #000; color: var(--ivory); }
body { font-family: "Archivo", system-ui, -apple-system, "Segoe UI", sans-serif; -webkit-font-smoothing: antialiased; }
.sr { position: absolute; width: 1px; height: 1px; overflow: hidden; clip-path: inset(50%); white-space: nowrap; }

.soon { position: relative; height: 100svh; min-height: 560px; overflow: clip; isolation: isolate; }
/* The frame keeps the footage's ratio, so the logo stays locked to the car at any window size. */
.soon-media { position: absolute; left: 50%; top: 50%; width: min(max(100%, calc(100svh * 16 / 9)), 133.333vw); aspect-ratio: 16 / 9; translate: -50% -50%; z-index: -1; }
.soon-frame { position: absolute; inset: 0; }
.soon-frame::after { content: ""; position: absolute; inset: auto 0 0 0; height: 22%; background: linear-gradient(to top, #000, rgba(0, 0, 0, 0)); pointer-events: none; }
.soon-still, .soon-video { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; }
.js .soon-still { opacity: 0; transition: opacity .9s linear; }
.js .use-still .soon-still { opacity: 1; }
.soon-video { opacity: 0; transition: opacity .35s linear; }
.video-on .soon-video { opacity: 1; }

/* The emblem on the wall behind the car: the second mask layer is the car, cut out of the footage. */
.crest {
  position: absolute;
  inset: 0;
  pointer-events: none;
  -webkit-mask: linear-gradient(#000 0 0), url("/media/hero-q8-car.png") 0 0 / 100% 100% no-repeat;
  -webkit-mask-composite: xor;
  mask: linear-gradient(#000 0 0), url("/media/hero-q8-car.png") 0 0 / 100% 100% no-repeat;
  mask-composite: exclude;
}
.crest svg { position: absolute; left: 13%; top: 9.5%; width: 74%; height: auto; overflow: visible; opacity: .94; filter: drop-shadow(0 10px 18px rgba(0, 0, 0, .45)); }
/* Clear glass rising from the bottom, faded out upwards, behind the wordmark. */
.glass {
  position: absolute;
  inset: 34% 0 0 0;
  z-index: 1;
  pointer-events: none;
  background:
    linear-gradient(to top, rgba(255, 255, 255, .13), rgba(255, 255, 255, .05) 40%, rgba(255, 255, 255, 0) 75%),
    linear-gradient(102deg, rgba(255, 255, 255, 0) 28%, rgba(255, 255, 255, .07) 42%, rgba(255, 255, 255, 0) 56%);
  box-shadow: inset 0 -14px 30px -14px rgba(255, 255, 255, .3);
  -webkit-backdrop-filter: blur(2.5px) brightness(.72) saturate(140%);
  backdrop-filter: blur(2.5px) brightness(.72) saturate(140%);
  -webkit-mask: linear-gradient(to top, #000 0%, #000 38%, rgba(0, 0, 0, .6) 62%, rgba(0, 0, 0, .2) 82%, transparent 100%);
  mask: linear-gradient(to top, #000 0%, #000 38%, rgba(0, 0, 0, .6) 62%, rgba(0, 0, 0, .2) 82%, transparent 100%);
}
/* The wordmark in front of the car, never lower than just above the words (their height is --copy-h). */
.word {
  position: absolute;
  left: 26%;
  /* --copy-h is the words' height; clamp(...) is .soon-copy's own bottom offset, so the tagline clears the title. */
  bottom: max(15.8%, calc(50% - max(100svh, 560px) / 2 + var(--copy-h, 170px) + clamp(20px, 5vh, 48px) + 14px));
  width: 48%;
  z-index: 1;
  pointer-events: none;
}
.word svg { display: block; width: 100%; height: auto; overflow: visible; filter: drop-shadow(0 6px 14px rgba(0, 0, 0, .7)); }

.soon-copy {
  position: absolute;
  left: 50%;
  bottom: clamp(20px, 5vh, 48px);
  translate: -50% 0;
  width: min(760px, calc(100% - var(--gut) * 2));
  text-align: center;
  z-index: 2;
}
.soon-title { margin: 0; font-size: clamp(1.5rem, 3.2vw, 2.6rem); font-weight: 600; font-stretch: 112%; letter-spacing: .32em; text-transform: uppercase; line-height: 1.1; text-shadow: 0 2px 18px rgba(0, 0, 0, .6); }
.soon-title .ch { display: inline-block; }
.soon-ar { margin: 6px 0 0; font-size: clamp(1rem, 1.6vw, 1.25rem); color: var(--silver); letter-spacing: 0; }
.soon-lead { margin: 10px auto 0; max-width: 52ch; font-size: clamp(.95rem, 1.3vw, 1.05rem); line-height: 1.5; color: rgba(255, 255, 255, .84); text-shadow: 0 1px 10px rgba(0, 0, 0, .6); }
.soon-phones { display: flex; flex-wrap: wrap; justify-content: center; gap: 6px 22px; margin: 8px 0 0; font-size: clamp(1rem, 1.4vw, 1.12rem); font-weight: 600; letter-spacing: .02em; font-variant-numeric: tabular-nums; }
.soon-phones a { color: #fff; text-decoration: none; text-shadow: 0 1px 10px rgba(0, 0, 0, .6); }
.soon-phones a:hover { text-decoration: underline; text-underline-offset: 4px; }
.soon-phones a:focus-visible { outline: 2px solid #fff; outline-offset: 3px; border-radius: 4px; }
.soon-cta { display: flex; flex-wrap: wrap; justify-content: center; gap: 10px; margin-top: 18px; }
.btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 10px;
  min-height: 48px;
  padding: 0 22px;
  border-radius: 999px;
  font: inherit;
  font-weight: 600;
  font-size: .98rem;
  color: #fff;
  text-decoration: none;
  transition: transform .2s ease, box-shadow .2s ease, background-color .2s ease;
}
.btn svg { width: 18px; height: 18px; flex: none; }
.btn-red { background: var(--red-gloss); box-shadow: inset 0 1px 0 rgba(255, 255, 255, .28), 0 10px 26px -10px rgba(186, 23, 39, .8); }
.btn-glass {
  background: linear-gradient(180deg, rgba(255, 255, 255, .13), rgba(255, 255, 255, .04) 48%, rgba(255, 255, 255, .07)), rgba(16, 17, 20, .4);
  box-shadow: inset 1px 1px 2px rgba(255, 255, 255, .22), inset -1px -1px 2px rgba(255, 255, 255, .08), 0 10px 26px -12px rgba(0, 0, 0, .5);
  -webkit-backdrop-filter: blur(9px) saturate(170%);
  backdrop-filter: blur(9px) saturate(170%);
}
.btn:hover { transform: translateY(-2px); }
.btn:focus-visible { outline: 2px solid #fff; outline-offset: 3px; }

/* Before the entrance runs, and as a safety net if it never does. */
.js .soon:not(.is-static):not(.logo-on) :is(.crest, .glass, .word, .soon-copy) { visibility: hidden; animation: show 0s 6s forwards; }
@keyframes show { to { visibility: visible; } }

/* Phone and upright tablet: a 4:3 crop that keeps both wings, the words under it. */
@media (max-width: 760px), (orientation: portrait) and (max-width: 1180px) {
  .soon { height: auto; min-height: 100svh; display: flex; flex-direction: column; justify-content: center; padding: 24px 0 32px; }
  .soon-media { position: relative; left: auto; top: auto; translate: none; width: 100%; aspect-ratio: 4 / 3; flex: none; z-index: 0; overflow: hidden; }
  .soon-frame { inset: 0 auto; left: 50%; width: 133.333%; translate: -50% 0; }
  .word { top: 69%; bottom: auto; }
  .soon-copy { position: relative; left: auto; bottom: auto; translate: none; margin: 8px auto 0; }
  .soon-title { letter-spacing: .22em; }
}
@media (max-width: 420px) {
  .soon-cta { flex-direction: column; }
  .btn { width: 100%; }
}
@media (prefers-reduced-motion: reduce) {
  .btn { transition: none; }
}