:root {
  color: #000000;
  background: #ffffff;
  font-family: "Geist", Arial, sans-serif;
  font-synthesis: none;
}

* {
  box-sizing: border-box;
}

/* Match the homepage entrance without overriding the artwork's own transforms. */
.scroll-lift { translate: 0 0; transition: opacity 800ms cubic-bezier(.22,1,.36,1), translate 800ms cubic-bezier(.25,.1,.25,1); }
.scroll-lift--pending { opacity: 0 !important; translate: 0 18px; transition: none; }
@media (prefers-reduced-motion: reduce) {
  .scroll-lift { translate: none; transition: none; }
  .scroll-lift--pending { opacity: 1 !important; }
}

html {
  scroll-behavior: smooth;
}

body {
  min-width: 320px;
  margin: 0;
  background: #ffffff;
}

a,
button {
  color: inherit;
  font: inherit;
}

a {
  text-decoration: none;
}

h1 {
  font-size: inherit;
}

button {
  border: 0;
  padding: 0;
  background: transparent;
  cursor: pointer;
}

.home {
  position: relative;
  isolation: isolate;
  min-height: max(747px, 100svh);
  overflow: hidden;
  background: #ffffff;
}

.background,
.background__base,
.background__video,
.background__gradients,
.background__wash,
.background__noise {
  position: absolute;
  inset: 0;
}

.background {
  z-index: -1;
  pointer-events: none;
}

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

.background__video {
  z-index: 3;
  display: block;
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: center;
}

.background__gradients {
  overflow: hidden;
}

.gradient {
  position: absolute;
  filter: blur(10px);
  will-change: transform, opacity;
}

/* Values and timing are translated directly from the Figma motion timeline. */
.gradient--blue {
  top: 17.74%;
  right: -11.25%;
  bottom: -50.74%;
  left: -26.81%;
  width: 138.06%;
  height: 132.98%;
  background: radial-gradient(
    ellipse 50% 50% at 60.5% 48.7%,
    rgb(23 71 255 / 98%) 0%,
    rgb(36 91 255 / 90%) 24%,
    rgb(63 121 255 / 62%) 48%,
    rgb(87 142 255 / 28%) 72%,
    rgb(107 148 255 / 8%) 88%,
    transparent 100%
  );
  animation: blue-opacity 10.064s cubic-bezier(0.5, 0, 0.5, 1) infinite;
}

.gradient--green {
  top: 4.28%;
  right: -13.86%;
  bottom: -30.47%;
  left: 10.36%;
  width: 103.47%;
  height: 126.19%;
  background: radial-gradient(
    ellipse 50% 50% at 54% 52%,
    rgb(22 240 183 / 98%) 0%,
    rgb(35 231 193 / 92%) 22%,
    rgb(72 215 213 / 62%) 45%,
    rgb(94 220 216 / 32%) 68%,
    rgb(111 225 214 / 8%) 88%,
    transparent 100%
  );
  transform: translate3d(25.85px, 0, 0);
  animation: green-drift 10.064s linear infinite;
}

.gradient--core {
  top: 54.32%;
  right: -18.75%;
  bottom: -34.11%;
  left: 51.92%;
  width: 66.83%;
  height: 79.8%;
  background: radial-gradient(
    ellipse 50% 50% at 54.4% 47.2%,
    rgb(18 58 232 / 82%) 0%,
    rgb(18 58 232 / 66%) 24%,
    rgb(18 58 232 / 40%) 48%,
    rgb(18 58 232 / 14%) 72%,
    transparent 100%
  );
  animation: core-drift 10.064s linear infinite;
}

.background__wash {
  z-index: 1;
  background: rgb(255 255 255 / 1%);
  mix-blend-mode: lighten;
  opacity: 0.5;
}

.background__noise {
  z-index: 2;
  background-image: url("public/assets/raw-image-1.png");
  background-repeat: no-repeat;
  background-position: center;
  background-size: cover;
  mix-blend-mode: multiply;
  opacity: 0.36;
}

.header {
  position: fixed;
  z-index: 20;
  background: transparent;
  top: 0;
  right: 0;
  left: 0;
  display: flex;
  align-items: center;
  justify-content: space-between;
  min-height: 84px;
  padding: 32px 80px;
  font-size: 15px;
  line-height: 1;
}

.logo {
  font-size: 20px;
  font-weight: 400;
  letter-spacing: -0.02em;
  white-space: nowrap;
}

.nav {
  display: flex;
  gap: 80px;
  align-items: center;
  margin-left: 72px;
}

.nav__link,
.language-switcher__button,
.language-switcher__separator {
  color: #a2a2a2;
  transition: color 180ms ease;
}

.nav__link:hover,
.nav__link:focus-visible,
.language-switcher__button:hover,
.language-switcher__button:focus-visible {
  color: #393939;
  outline: none;
}

.nav__link--active,
.language-switcher__button.is-active {
  color: #000000;
}

.nav__link--active {
  font-weight: 700;
}

.language-switcher {
  display: flex;
  width: 123px;
  gap: 5px;
  align-items: center;
  justify-content: flex-end;
}

.intro {
  position: absolute;
  top: 242px;
  right: 80px;
  left: 80px;
  font-size: 20px;
  font-weight: 300;
  line-height: 1.35;
  letter-spacing: -0.025em;
}

.intro__line {
  max-width: 800px;
  margin: 0;
  color: #222222;
}

.intro__line--strong {
  margin-bottom: 27px;
  color: #000000;
  font-weight: 500;
}

.scroll-cue {
  position: absolute;
  bottom: 25px;
  left: 50%;
  display: grid;
  width: 18px;
  height: 9px;
  place-items: center;
  transform: translateX(-50%);
}

.scroll-cue img {
  display: block;
  width: 17.5px;
  height: 8.5px;
}

@keyframes blue-opacity {
  0% { opacity: 1; }
  21.92% { opacity: 0.9; }
  40.02% { opacity: 1; }
  52.66% { opacity: 0.8; }
  68% { opacity: 1; }
  88.9% { opacity: 0.85; }
  100% { opacity: 1; }
}

@keyframes green-drift {
  0% { transform: translate3d(25.85px, 0, 0); animation-timing-function: linear; }
  28.33% { transform: translate3d(-148.368px, 43.693px, 0); animation-timing-function: ease-in; }
  51.75% { transform: translate3d(-30.368px, 146.693px, 0); animation-timing-function: linear; }
  77.39% { transform: translate3d(130.851px, 126px, 0); animation-timing-function: ease-in; }
  100% { transform: translate3d(25.852px, 0, 0); }
}

@keyframes core-drift {
  0% { transform: translate3d(0, 0, 0); }
  28.33% { transform: translate3d(-114.836px, 0, 0); }
  51.75% { transform: translate3d(-114.836px, -105.775px, 0); }
  72.69% { transform: translate3d(24.328px, -221.734px, 0); }
  100% { transform: translate3d(0.004px, 0.005px, 0); }
}

@keyframes green-drift-mobile {
  0%,
  100% { transform: translate3d(0, 0, 0); }
  30% { transform: translate3d(-16px, 8px, 0); }
  58% { transform: translate3d(-5px, 18px, 0); }
  78% { transform: translate3d(14px, 10px, 0); }
}

@keyframes core-drift-mobile {
  0%,
  100% { transform: translate3d(0, 0, 0); }
  28% { transform: translate3d(-10px, -5px, 0); }
  55% { transform: translate3d(-7px, -14px, 0); }
  76% { transform: translate3d(9px, -8px, 0); }
}

@media (max-width: 760px) {
  .background__video {
    display: none;
  }

  .home {
    min-height: 100svh;
  }

  .header {
    min-height: 68px;
    padding: 24px;
  }

  .logo {
    font-size: 17px;
  }

  .nav {
    display: none;
  }

  .language-switcher {
    width: auto;
  }

  .intro {
    top: 31svh;
    right: 24px;
    left: 24px;
    font-size: 17px;
    line-height: 1.45;
  }

  .intro__line--strong {
    margin-bottom: 24px;
  }

  .gradient--blue {
    top: 21.6%;
    right: auto;
    bottom: auto;
    left: -156%;
    width: 340%;
    height: 99.4%;
  }

  .gradient--green {
    top: 24%;
    right: auto;
    bottom: auto;
    left: -96%;
    width: 270%;
    height: 79%;
  }

  .gradient--core {
    top: 39.2%;
    right: auto;
    bottom: auto;
    left: -48%;
    width: 180%;
    height: 52.6%;
  }

  .gradient--blue {
    animation-duration: 20s;
  }

  .gradient--green {
    transform: translate3d(0, 0, 0);
    animation: green-drift-mobile 22s ease-in-out infinite;
  }

  .gradient--core {
    animation: core-drift-mobile 24s ease-in-out infinite;
  }
}

@media (prefers-reduced-motion: reduce) {
  *,
  *::before,
  *::after {
    scroll-behavior: auto !important;
  }

  .gradient {
    animation: none;
  }

  .gradient--green {
    transform: translate3d(25.85px, 0, 0);
  }
}