@font-face {
  font-family: "Nexa";
  src: local("Nexa"), local("Nexa Regular");
  font-style: normal;
  font-weight: 400;
  font-display: swap;
}

:root {
  color: #f5eadf;
  background: #160f0d;
  font-family: "Nexa", "Helvetica Neue", Arial, sans-serif;
  font-synthesis: none;
  text-rendering: optimizeLegibility;
  -webkit-font-smoothing: antialiased;
}

* {
  box-sizing: border-box;
}

html,
body {
  width: 100%;
  min-width: 320px;
  min-height: 100%;
  margin: 0;
}

body {
  overflow: hidden;
}

::selection {
  color: #1d1411;
  background: #f1e2d1;
}

.coming-soon {
  position: relative;
  isolation: isolate;
  width: 100%;
  min-height: 100vh;
  min-height: 100svh;
  overflow: hidden;
  background: #160f0d;
}

.video-stack,
.motion-fallback,
.video-overlay {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
}

.video-stack {
  z-index: -2;
  overflow: hidden;
}

.background-video {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: center;
  opacity: 0;
  transition: opacity 1.35s cubic-bezier(0.45, 0, 0.55, 1);
  will-change: opacity;
}

.background-video.is-visible {
  opacity: 1;
}

.motion-fallback {
  z-index: -3;
  overflow: hidden;
  background:
    radial-gradient(circle at 22% 26%, #5d4438 0, transparent 37%),
    radial-gradient(circle at 76% 72%, #38251f 0, transparent 42%),
    linear-gradient(125deg, #0e0908 0%, #2a1b17 53%, #130d0b 100%);
}

.motion-fallback::after {
  content: "";
  position: absolute;
  inset: -30%;
  opacity: 0.11;
  background-image: url("data:image/svg+xml,%3Csvg viewBox='0 0 180 180' xmlns='http://www.w3.org/2000/svg'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.8' numOctaves='4' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)' opacity='.65'/%3E%3C/svg%3E");
  animation: grain 1.1s steps(2) infinite;
}

.motion-fallback__orb {
  position: absolute;
  display: block;
  width: 58vw;
  aspect-ratio: 1;
  border-radius: 50%;
  filter: blur(80px);
  opacity: 0.22;
}

.motion-fallback__orb--one {
  top: -28%;
  left: -18%;
  background: #a98972;
  animation: drift-one 16s ease-in-out infinite alternate;
}

.motion-fallback__orb--two {
  right: -22%;
  bottom: -36%;
  background: #765344;
  animation: drift-two 20s ease-in-out infinite alternate;
}

.video-overlay {
  z-index: -1;
  background:
    linear-gradient(90deg, rgb(11 7 6 / 70%) 0%, rgb(11 7 6 / 43%) 43%, rgb(11 7 6 / 27%) 100%),
    linear-gradient(180deg, rgb(9 6 5 / 20%), rgb(9 6 5 / 40%));
}

.coming-soon__content {
  position: absolute;
  top: 50%;
  left: clamp(2rem, 7vw, 8.5rem);
  width: min(42rem, 44vw);
  transform: translateY(-50%);
  text-align: left;
}

.qvar-logo {
  display: block;
  width: clamp(9.5rem, 12vw, 14rem);
  height: auto;
  margin-bottom: clamp(2.3rem, 4.8vh, 4rem);
}

.coming-soon h1 {
  max-width: 12ch;
  margin: 0;
  color: #f5eadf;
  font-family: "DM Serif Display", Georgia, serif;
  font-size: clamp(2.85rem, 4.35vw, 5.4rem);
  font-style: italic;
  font-weight: 400;
  letter-spacing: -0.035em;
  line-height: 0.96;
  text-wrap: balance;
}

.coming-soon__content > p {
  margin: clamp(2.25rem, 5vh, 4rem) 0 0;
  color: rgb(245 234 223 / 76%);
  font-family: "Nexa", "Helvetica Neue", Arial, sans-serif;
  font-size: clamp(0.68rem, 0.78vw, 0.9rem);
  font-weight: 400;
  letter-spacing: 0.48em;
  line-height: 1.4;
  text-transform: uppercase;
}

@keyframes drift-one {
  from {
    transform: translate3d(-6%, -4%, 0) scale(1);
  }
  to {
    transform: translate3d(28%, 18%, 0) scale(1.15);
  }
}

@keyframes drift-two {
  from {
    transform: translate3d(5%, 12%, 0) scale(1.05);
  }
  to {
    transform: translate3d(-24%, -18%, 0) scale(0.9);
  }
}

@keyframes grain {
  0% {
    transform: translate3d(-2%, 1%, 0);
  }
  25% {
    transform: translate3d(2%, -1%, 0);
  }
  50% {
    transform: translate3d(1%, 2%, 0);
  }
  75% {
    transform: translate3d(-1%, -2%, 0);
  }
  100% {
    transform: translate3d(2%, 1%, 0);
  }
}

@media (max-width: 767px) {
  .video-overlay {
    background:
      linear-gradient(90deg, rgb(10 7 6 / 42%), rgb(10 7 6 / 25%)),
      linear-gradient(180deg, rgb(10 7 6 / 18%) 0%, rgb(10 7 6 / 36%) 44%, rgb(10 7 6 / 78%) 100%);
  }

  .coming-soon__content {
    top: auto;
    right: clamp(1.35rem, 6vw, 2rem);
    bottom: clamp(2rem, 6svh, 3.75rem);
    left: clamp(1.35rem, 6vw, 2rem);
    width: auto;
    transform: none;
  }

  .qvar-logo {
    width: clamp(8rem, 36vw, 10.5rem);
    margin-bottom: 1.75rem;
  }

  .coming-soon h1 {
    max-width: 11ch;
    font-size: clamp(2.45rem, 11.5vw, 3.4rem);
  }

  .coming-soon__content > p {
    margin-top: 2rem;
    font-size: 0.64rem;
    letter-spacing: 0.42em;
  }
}

@media (prefers-reduced-motion: reduce) {
  .background-video {
    display: none;
  }

  .motion-fallback__orb,
  .motion-fallback::after {
    animation: none;
  }
}