:root {
  --color-black: #000;
  --color-white: #fff;
  --color-gray: #c3c3c3;
  --color-red: #ff0000;

  --page-padding: 0.625rem;
  --vh-100: 100vh;

  --font-size-s: 0.75rem;
  --font-size-m: 1rem;
  --font-size-l: 1rem;
}

@media screen and (min-width: 1024px) {
  :root {
    --font-size-l: 1.75rem;
  }
}

@media screen and (min-width: 1400px) {
  :root {
    --font-size-m: 1rem;
    --font-size-l: 2rem;
  }
}

@media screen and (min-width: 2000px) {
  :root {
    --font-size-l: 2.25rem;
  }
}

body {
  background-color: var(--color-black);
  color: var(--color-white);
  font-family: Arial, Helvetica, sans-serif;
  font-size: var(--font-size-m);
  text-transform: uppercase;
  display: flex;
  flex-direction: column;
  min-height: var(--vh-100);
}

main {
  flex: 1;
}

::selection {
  background-color: var(--color-red);
  color: var(--color-white);
}

.will-appear {
  opacity: 0;
  transform: scale(1);
  transition: opacity 1200ms ease;
  will-change: opacity, transform;
}

.did-appear {
  opacity: 1;
  transform: scale(1);
}

/* Richtext */

.richtext p {
  line-height: 1.3;
  margin-bottom: 0.75rem;
}

.richtext h2 {
  margin-bottom: 1em;
  margin-top: 3em;
  color: var(--color-red);
  font-size: 0;
}

.richtext__title-svg {
  width: 100%;
  height: 10vh;
  margin-top: 2rem;
}

.richtext__title-svg:first-child {
  margin-top: 0;
}

.richtext a {
  text-decoration: underline;
  transition: color 100ms ease;
}

.richtext a:hover {
  color: var(--color-red);
}

.richtext ul {
  margin-bottom: 1em;
}

.richtext ul li {
  padding: 2px 0;
  border-bottom: 1px solid var(--color-black);
}

.richtext ul li:first-child {
  border-top: 1px solid var(--color-black);
}

.richtext ol li {
  list-style-type: decimal;
}

.richtext strong {
  font-weight: bold;
}

.richtext i {
  font-style: italic;
}

.richtext p:last-child,
.richtext ul:last-child {
  margin-bottom: 0;
}

/* Scrollbar */

.state--modal-open {
  scroll-behavior: auto;
}

.scrolling-wrapper {
  position: absolute;
  left: 0;
  top: 0;
  width: var(--vw-100);
  height: var(--vh-100);
}

.scrolling-container {
  height: 100%;
  width: 100%;
  overflow: hidden;
}

.scrollbar-track {
  background-color: transparent !important;
}

.state--modal-open .scrollbar-track {
  display: none !important;
  pointer-events: none !important;
}

.scrollbar-thumb {
  left: -2px !important;
}

.content {
  position: relative;
  overflow: hidden;
  min-height: var(--vh-100);
  display: flex;
  flex-direction: column;
}

/* Responsive Image */

.responsive-image {
  display: block;
  position: relative;
  width: 100%;
  overflow: hidden;
  opacity: 1;
}

.responsive-image span {
  position: absolute;
  top: 0;
  left: 0;
  height: 100%;
  width: 100%;
  background-size: cover;
  background-repeat: no-repeat;
  background-position: center;
  transition: opacity 0ms ease;
}

.responsive-image.did-appear span {
  opacity: 0;
}

.responsive-image.contain span {
  background-size: contain;
}

.responsive-image img {
  position: absolute;
  display: block;
  top: 0;
  left: 0;
  object-fit: cover;
  height: 100%;
  width: 100%;
  opacity: 0;
  transform: scale(1.1);
  transform-origin: center;
  transition: opacity 0ms ease, transform 0ms ease;
  will-change: opacity, transform;
}

.responsive-image.contain img {
  object-fit: contain;
}

.responsive-image.did-appear img {
  opacity: 1;
  transform: scale(1.001);
}

/* Kinetic Visual */

.kinetic-visual {
  width: 100%;
  height: 100%;
  position: relative;
}

.kinetic-visual__canvas {
  position: absolute;
  left: 0;
  top: 0;
  width: 100%;
  height: 100%;
  display: block;
}

.kinetic-visual svg {
  display: block;
  width: 100%;
  height: 500px;
  position: absolute;
  z-index: 9999;
}

/* Header */

.header {
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  display: flex;
  justify-content: space-between;
  align-items: flex-start;
  padding: var(--page-padding);
  z-index: 2;
  pointer-events: none;
}

.header__link {
  pointer-events: auto;
  flex: 1;
  margin-right: 20px;
  padding: 3px 20px 2px 5px;
  display: block;
  background-color: var(--color-white);
  color: var(--color-black);
  border: 1px solid var(--color-white);
  position: relative;
  transition: color 100ms ease, background-color 100ms ease;
}

.header__link:hover {
  color: var(--color-white);
  background-color: var(--color-black);
}

.header__link::after {
  content: "";
  display: block;
  width: 10px;
  height: 10px;
  background-color: red;
  border-radius: 50%;
  position: absolute;
  right: 5px;
  top: 50%;
  transform: translate3d(0, -50%, 0);
  animation: blink 250ms linear infinite alternate;
}

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

.nav__trigger {
  pointer-events: auto;
  padding: 3px 5px 2px 5px;
  height: 23px;
  width: 28px;
  display: block;
  z-index: 1;
  background-color: var(--color-white);
  color: var(--color-black);
  border: 1px solid var(--color-white);
  position: relative;
  transition: color 100ms ease, background-color 100ms ease;
}

.nav__trigger:hover {
  color: var(--color-white);
  background-color: var(--color-black);
}

.nav__trigger span:first-child {
  display: none;
}

.nav__trigger-burger {
  position: absolute;
  right: 5px;
  top: 50%;
  transform: translate3d(0, -50%, 0);
  width: 15px;
  height: 1px;
  background-color: var(--color-black);
  display: block;
  transition: background-color 100ms ease;
}

.nav__trigger:hover .nav__trigger-burger {
  background-color: var(--color-white);
}

.nav.nav.state--open .nav__trigger-burger {
  background-color: transparent;
}

.nav__trigger-burger::before {
  content: "";
  display: block;
  width: 100%;
  height: 100%;
  position: absolute;
  left: 0;
  top: 0;
  background-color: var(--color-black);
  transform: translate3d(0, 5px, 0);
  transition: transform 100ms ease;
}

.nav__trigger-burger::after {
  content: "";
  display: block;
  position: absolute;
  left: 0;
  top: 0;
  width: 100%;
  height: 100%;
  background-color: var(--color-black);
  transform: translate3d(0, -5px, 0);
  transition: transform 100ms ease;
}

.nav__trigger:hover .nav__trigger-burger::before,
.nav__trigger:hover .nav__trigger-burger::after {
  background-color: var(--color-white);
}

.nav.nav.state--open .nav__trigger-burger::before {
  transform: translate3d(0, 0, 0) rotate(45deg);
}

.nav.nav.state--open .nav__trigger-burger::after {
  transform: translate3d(0, 0, 0) rotate(-45deg);
}

.nav__main {
  position: absolute;
  right: var(--page-padding);
}

.nav__link {
  display: block;
  background-color: var(--color-white);
  color: var(--color-black);
  padding: 3px 9rem 2px 5px;
  border: 1px solid var(--color-white);
  transition: transform 100ms ease var(--transition-delay),
    clip-path 100ms ease var(--transition-delay), color 100ms ease,
    background-color 100ms ease;
  margin-top: 1px;
  transform: translate3d(0, -10px, 0);
  clip-path: inset(0 0 100% 0);
}

.nav__link:hover {
  color: var(--color-white);
  background-color: var(--color-black);
}

.nav.state--open .nav__link {
  transform: translate3d(0, 0, 0);
  clip-path: inset(0 0 0 0);
  pointer-events: auto;
}

@media screen and (min-width: 700px) {
  .header__link {
    padding: 3px 9rem 2px 5px;
    flex: none;
  }

  .nav__trigger {
    padding: 3px 9rem 2px 5px;
    height: auto;
    width: auto;
  }

  .nav__trigger span:first-child {
    display: block;
  }

  .nav__main {
    position: static;
  }
}

/* Footer */

.footer {
  padding: 5rem var(--page-padding) var(--page-padding);
  border-bottom: 5px solid var(--color-white);
}

.footer__text {
  font-size: var(--font-size-l);
}

.footer__text a:hover {
  text-decoration: underline;
}

@media screen and (min-width: 700px) {
  .footer {
    padding: 10rem var(--page-padding) var(--page-padding);
  }
}

/* Home */

.home {
  height: var(--vh-100);
  display: flex;
  flex-direction: column;
}

.home__visual {
  flex: 1;
  position: relative;
}

.home__text {
  padding: var(--page-padding);
  font-size: var(--font-size-l);
  display: flex;
}

.home__text-text {
  flex: 1;
}

.home__text-icon {
  width: 1.25rem;
  background-color: var(--color-white);
  margin-left: var(--page-padding);
  overflow: hidden;
}

@keyframes homeIconAnimation {
  from {
    transform: translate3d(-50%, -30px, 0);
  }
  to {
    transform: translate3d(-50%, 100%, 0);
  }
}

.home__text-icon-wrapper {
  position: absolute;
  top: 0;
  left: 50%;
  transform: translate3d(-50%, 0, 0);
  height: 100%;
  transform: translate3d(-50%, -30px, 0);
  animation: homeIconAnimation 1s linear infinite;
}

.home__text-icon-wrapper:nth-child(1) {
  animation-timing-function: ease-in;
}

.home__text-icon-wrapper:nth-child(2) {
  animation-timing-function: linear;
  padding-top: 10px;
}

.home__text-icon-wrapper:nth-child(3) {
  padding-top: 20px;
  animation-timing-function: ease-out;
}

.home__text-icon-triangle {
  width: 0px;
  height: 0px;
  border-style: solid;
  border-width: 10px 6px 0 6px;
  border-color: var(--color-black) transparent transparent transparent;
  transform: rotate(0deg);
}

.home__visual-claim {
  position: absolute;
  top: 50%;
  left: 0;
  width: 100%;
  transform: translate3d(0, -50%, 0);
  font-size: var(--font-size-l);
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  z-index: 1;
  padding: var(--page-padding);
}

.home__visual-claim p {
  white-space: nowrap;
  text-align: center;
}

.home__scroll {
  z-index: 1;
}

.home__scroll-spacer {
  height: 100vh;
}

.home__scroll-grid {
  padding: 0 5vw;
  display: grid;
  grid-template-columns: repeat(28, 1fr);
  gap: var(--page-padding);
  align-items: center;
}

.home__scroll-media {
  width: 100%;
  display: grid;
  margin-bottom: 10vw;
  filter: grayscale(1);
  transition: filter 300ms ease;
}

.home__scroll-media:hover {
  filter: grayscale(0);
}

.home__scroll-media-inner {
  overflow: hidden;
}

.home__scroll-media video,
.home__scroll-media .responsive-image {
  width: 100%;
  display: block;
}

@media screen and (min-width: 700px) {
  .home__scroll-grid {
    grid-template-columns: repeat(28, 1fr);
  }
}

@media screen and (min-width: 1024px) {
  .home__visual-claim {
    flex-direction: row;
  }

  .home__scroll-grid {
    grid-template-columns: repeat(48, 1fr);
  }
}

/* Content Page */

.content-page__header {
  height: 60vh;
}

.content-page__title {
  font-size: 0;
}

.content-page__text {
  padding: var(--page-padding);
  padding-bottom: 0;
  font-size: var(--font-size-l);
  margin-bottom: 2rem;
}

.content-page__text p {
  line-height: 1.1;
}

/* Text Component */

.text-component {
  margin-bottom: 2rem;
  display: grid;
  grid-template-columns: repeat(24, 1fr);
  gap: var(--page-padding);
  padding: 0 var(--page-padding);
  line-height: 1.1;
}

.text-component__text {
  grid-column: span 24;
}

@media screen and (min-width: 700px) {
  .text-component__text {
    grid-column-start: 3;
    grid-column-end: 23;
  }
}

@media screen and (min-width: 1024px) {
  .text-component__text {
    grid-column-start: 6;
    grid-column-end: 20;
  }
}

@media screen and (min-width: 1900px) {
  .text-component__text {
    grid-column-start: 7;
    grid-column-end: 19;
  }
}

/* Image Slider Component */

.image-slider-component {
  --scroll-progress: 0;
  --slider-height: 50vh;
  overflow: hidden;
  position: relative;
  margin-bottom: 2rem;
}

.image-slider-component + .image-slider-component {
  margin-top: -22px;
}

.image-slider-component__inner {
  display: flex;
}

.image-slider-component__media {
  --ratio: 1;
  --scale-progress: 0;

  flex: var(--ratio);
  padding-top: 0 !important;
  margin-right: var(--page-padding);
  overflow: hidden;
  border-radius: 0;
  filter: grayscale(1);
  transition: filter 300ms ease;
}

.image-slider-component__media:hover {
  filter: grayscale(0);
}

.image-slider-component__media:first-child {
  margin-left: var(--page-padding);
}

.image-slider-component__media video,
.image-slider-component__media img {
  width: 100%;
  object-fit: fill;
  position: static;
  transform-origin: top;
  transform: scaleY(var(--scale-progress)) !important;
}

/* List Component */

.list-component {
  margin-bottom: 2rem;
  display: grid;
  grid-template-columns: repeat(24, 1fr);
  gap: 0 var(--page-padding);
  padding: 0 var(--page-padding);
  line-height: 1.1;
}

.list-component__title {
  grid-column: span 24;
  margin-bottom: var(--page-padding);
}

.list-component__list {
  grid-column: span 24;
  border-top: 1px solid var(--color-white);
  padding: 2rem 0;
}

.list-component__list:nth-child(2) {
  border-top: none;
}

.list-component__list-title {
  color: var(--color-red);
  margin-bottom: 1rem;
}

.list-component__list-list {
  padding-left: 1rem;
  list-style-type: disc;
  white-space: pre;
}

@media screen and (min-width: 700px) {
  .list-component__title,
  .list-component__list {
    grid-column-start: 3;
    grid-column-end: 23;
  }
}

@media screen and (min-width: 1024px) {
  .list-component__title,
  .list-component__list {
    grid-column-start: 6;
    grid-column-end: 20;
  }
}

@media screen and (min-width: 1900px) {
  .list-component__title,
  .list-component__list {
    grid-column-start: 7;
    grid-column-end: 19;
  }
}

/* References Component */

.references-component {
  margin-bottom: 2rem;
  padding: 0 var(--page-padding);
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 2rem var(--page-padding);
}

.references-component__reference {
  grid-column: span 3;
  filter: grayscale(1);
  transition: filter 200ms ease, opacity 1200ms ease;
}

.references-component__reference:hover {
  filter: grayscale(0);
}

.references-component__image {
  margin-bottom: 1.5rem;
}

.references-component__title {
  color: var(--color-red);
  margin-bottom: 0.5rem;
}

.references-component__categories {
  display: flex;
  flex-wrap: wrap;
  padding-top: var(--page-padding);
}

.references-component__category {
  font-size: var(--font-size-s);
  border: 1px solid var(--color-gray);
  padding: 2px 0.75rem;
  color: var(--color-gray);
  border-radius: 1000px;
  margin: 0 5px 5px 0;
}

@media screen and (min-width: 800px) {
  .references-component__reference {
    grid-column: span 1;
  }
}