/* FILE: assets/css/styles.css */

:root {
  --background: #000000;
  --text: #ffffff;

  --page-padding-x: clamp(10px, 1.6vw, 26px);
  --page-padding-top: clamp(8px, 1.4vh, 18px);
  --page-padding-bottom: clamp(8px, 1.5vh, 18px);
}

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

html {
  width: 100%;
  min-width: 280px;
  min-height: 100%;

  background: var(--background);
}

body {
  width: 100%;
  min-width: 280px;
  min-height: 100%;

  margin: 0;

  overflow-x: hidden;
  overflow-y: auto;

  background: var(--background);
  color: var(--text);

  font-family:
    Inter,
    ui-sans-serif,
    system-ui,
    -apple-system,
    BlinkMacSystemFont,
    "Segoe UI",
    sans-serif;
}

button,
a {
  -webkit-tap-highlight-color: transparent;
}

button {
  font: inherit;
}

img,
video {
  display: block;
  max-width: 100%;
}


/* =========================================================
   PAGE
   ========================================================= */

.landing {
  display: grid;

  width: 100%;

  height: auto;

  min-height: 100vh;
  min-height: 100dvh;

  margin: 0;

  padding:
    max(var(--page-padding-top), env(safe-area-inset-top))
    max(var(--page-padding-x), env(safe-area-inset-right))
    max(var(--page-padding-bottom), env(safe-area-inset-bottom))
    max(var(--page-padding-x), env(safe-area-inset-left));

  grid-template-rows:
    clamp(
      58px,
      8.5dvh,
      82px
    )
    minmax(
      880px,
      1fr
    );

  gap:
    clamp(
      4px,
      0.8dvh,
      10px
    );

  overflow: visible;
}

.landing > h1 {
  display: flex;

  width: 100%;
  height: 100%;

  margin: 0;
  padding: 0;

  align-items: center;
  justify-content: center;

  color: #ffffff;

  font-size:
    clamp(
      1.5rem,
      2.65vw,
      2.7rem
    );

  font-weight: 800;
  line-height: 1;

  letter-spacing: -0.04em;

  text-align: center;

  white-space: nowrap;
}


/* =========================================================
   SLIDER
   ========================================================= */

.slider {
  position: relative;

  display: grid;

  width: 100%;
  height: 100%;

  min-width: 0;
  min-height: 880px;

  grid-template-columns:
    clamp(42px, 4vw, 58px)
    minmax(0, 1fr)
    clamp(42px, 4vw, 58px);

  grid-template-rows:
    minmax(0, 1fr)
    clamp(26px, 4dvh, 38px);

  align-items: center;

  outline: none;
}

.slider:focus,
.slider:focus-visible {
  outline: none;
}

.slider__viewport {
  --drag-x: 0px;

  position: relative;

  grid-column: 2;
  grid-row: 1;

  width: 100%;
  height: 100%;

  min-width: 0;
  min-height: 0;

  overflow: hidden;

  perspective: 1400px;

  touch-action: pan-y;
  user-select: none;

  cursor: grab;

  outline: none;
}

.slider__viewport.is-dragging {
  cursor: grabbing;
}


/* =========================================================
   FLOOR
   ========================================================= */

.slider__floor {
  position: absolute;

  z-index: 0;

  left: 50%;
  top: 54%;

  width: min(88vw, 1320px);
  height: 40%;

  pointer-events: none;

  transform:
    translateX(-50%)
    perspective(780px)
    rotateX(66deg);

  transform-origin: top center;

  background:
    linear-gradient(
      to bottom,
      rgba(255, 255, 255, 0.045),
      rgba(255, 255, 255, 0.01) 22%,
      transparent 78%
    );

  border: 0;
  outline: 0;
}

.slider__floor::after {
  content: "";

  position: absolute;

  inset: 0;

  background:
    repeating-linear-gradient(
      90deg,
      transparent 0,
      transparent 10%,
      rgba(255, 255, 255, 0.015) 10.15%,
      transparent 10.3%
    );

  opacity: 0.6;
}


/* =========================================================
   NAVIGATION
   ========================================================= */

.slider__nav {
  z-index: 20;

  display: flex;

  width:
    clamp(
      36px,
      3.4vw,
      48px
    );

  height:
    clamp(
      58px,
      9dvh,
      86px
    );

  margin: 0;
  padding: 0;

  align-items: center;
  justify-content: center;

  border: 0;
  outline: 0;

  background: transparent;

  color: #ffffff;

  cursor: pointer;

  opacity: 1;

  transition:
    opacity 160ms ease;
}

.slider__nav:hover,
.slider__nav:focus,
.slider__nav:focus-visible {
  color: #ffffff;

  outline: none;

  opacity: 1;
}

.slider__nav span {
  display: block;

  color: #ffffff;

  font-size:
    clamp(
      2.2rem,
      4.4vw,
      4.2rem
    );

  font-weight: 200;
  line-height: 0.8;
}

.slider__nav--prev {
  grid-column: 1;
  grid-row: 1;

  justify-self: start;
}

.slider__nav--next {
  grid-column: 3;
  grid-row: 1;

  justify-self: end;
}


/* =========================================================
   PROJECT SLIDE
   ========================================================= */

.project-slide {
  --media-ratio: 1.777777778;
  --reflection-ratio: 4.232804233;

  --slide-opacity: 0;
  --slide-scale: 0.7;
  --slide-x: -50%;
  --slide-z: -180px;

  position: absolute;

  z-index: 2;

  left:
    calc(
      50% + var(--drag-x)
    );

  top: 50%;

  width:
    clamp(
      380px,
      54vw,
      880px
    );

  max-width: 90%;

  opacity: var(--slide-opacity);

  pointer-events: none;

  /*
   * Y centering is part of the same transform that JS uses.
   * The complete stack is centered:
   *
   * media
   * text
   * CTA
   * gap
   * reflection
   */
  transform:
    translate(
      var(--slide-x),
      -50%
    )
    translateZ(
      var(--slide-z)
    )
    scale(
      var(--slide-scale)
    );

  transform-origin: center center;

  transition:
    transform 560ms cubic-bezier(0.2, 0.75, 0.22, 1),
    opacity 360ms ease,
    filter 360ms ease;

  filter:
    brightness(0.58);

  will-change:
    transform,
    opacity;
}


/* 1194 × 768 */

.project-slide--subway {
  --media-ratio: 1.5546875;
  --reflection-ratio: 3.701636905;
}


/* 1502 × 842 */

.project-slide--2d {
  --media-ratio: 1.783847981;
  --reflection-ratio: 4.247257098;
}


/* 1254 × 786 */

.project-slide--cube {
  --media-ratio: 1.595419847;
  --reflection-ratio: 3.798618684;
}


/* 1248 × 785 */

.project-slide--orb {
  --media-ratio: 1.589808917;
  --reflection-ratio: 3.785259327;
}


.slider__viewport.is-dragging .project-slide {
  transition: none;
}

.slider__viewport.is-settling .project-slide {
  transition:
    transform 380ms cubic-bezier(0.2, 0.75, 0.22, 1),
    opacity 300ms ease,
    filter 300ms ease;
}


/* =========================================================
   SLIDE POSITIONS
   ========================================================= */

.project-slide[data-offset="0"] {
  --slide-opacity: 1;
  --slide-scale: 1;
  --slide-x: -50%;
  --slide-z: 0px;

  z-index: 10;

  pointer-events: auto;

  filter:
    brightness(1);
}

.project-slide[data-offset="-1"] {
  --slide-opacity: 0.48;
  --slide-scale: 0.72;
  --slide-x: -122%;
  --slide-z: -120px;

  z-index: 4;

  pointer-events: auto;
}

.project-slide[data-offset="1"] {
  --slide-opacity: 0.48;
  --slide-scale: 0.72;
  --slide-x: 22%;
  --slide-z: -120px;

  z-index: 4;

  pointer-events: auto;
}

.project-slide[data-offset="-2"],
.project-slide[data-offset="2"] {
  --slide-opacity: 0;
  --slide-scale: 0.64;
  --slide-z: -220px;

  pointer-events: none;
}

.project-slide[data-offset="-2"] {
  --slide-x: -156%;
}

.project-slide[data-offset="2"] {
  --slide-x: 56%;
}


/* =========================================================
   MAIN MEDIA
   ========================================================= */

.project-slide__media {
  position: relative;

  width: 100%;

  aspect-ratio:
    var(--media-ratio);

  overflow: hidden;

  border: 0;
  outline: 0;

  background: #000000;

  box-shadow:
    0 16px 48px
    rgba(0, 0, 0, 0.78);
}

.project-slide__poster,
.project-slide__video {
  position: absolute;

  inset: 0;

  width: 100%;
  height: 100%;

  object-fit: fill;
  object-position: center center;

  background: #000000;

  -webkit-user-drag: none;
}

.project-slide__poster {
  z-index: 1;

  opacity: 1;

  transition:
    opacity 160ms ease;
}

.project-slide__video {
  z-index: 2;

  opacity: 0;

  transition:
    opacity 160ms ease;
}

.project-slide.is-video-playing
.project-slide__poster {
  opacity: 0;
}

.project-slide.is-video-playing
.project-slide__video {
  opacity: 1;
}


/* =========================================================
   TEXT / CTA
   ========================================================= */

.project-slide__content {
  position: relative;

  display: flex;

  width: 100%;

  height: auto;

  min-height: 150px;

  padding:
    16px
    clamp(
      12px,
      2vw,
      26px
    )
    62px;

  align-items: center;
  justify-content: center;

  opacity: 0;

  pointer-events: none;

  text-align: center;

  transition:
    opacity 180ms ease;
}

.project-slide[data-offset="0"]
.project-slide__content {
  opacity: 1;

  pointer-events: auto;
}

.project-slide__text {
  display: flex;

  width: 100%;
  max-width: 56rem;

  flex-direction: column;

  align-items: center;
  justify-content: center;

  gap: 8px;
}

.project-slide__content h2 {
  width: 100%;

  margin: 0;

  color: #ffffff;

  font-size:
    clamp(
      1.2rem,
      1.7vw,
      1.7rem
    );

  font-weight: 780;
  line-height: 1.08;

  letter-spacing: -0.03em;
}

.project-slide__content p {
  width: 100%;
  max-width: 54rem;

  margin: 0;

  color: #ffffff;

  font-size:
    clamp(
      0.82rem,
      1vw,
      1rem
    );

  font-weight: 450;
  line-height: 1.45;

  text-align: center;
}

.project-slide__link {
  color: inherit;

  text-decoration: none;

  -webkit-tap-highlight-color: transparent;
}

.project-slide__link:focus,
.project-slide__link:focus-visible {
  outline: none;
}

.project-slide__cta {
  position: absolute;

  left: 50%;
  bottom: 12px;

  display: inline-flex;

  width: auto;

  min-width: 148px;
  height: 40px;

  margin: 0;
  padding:
    0 18px;

  align-items: center;
  justify-content: center;

  gap: 9px;

  border:
    1px solid
    #ffffff;

  border-radius: 999px;

  outline: none;

  background: #ffffff;

  color: #000000;

  font-size: 0.8rem;
  font-weight: 750;
  line-height: 1;

  letter-spacing: 0.01em;

  white-space: nowrap;

  cursor: pointer;

  transform:
    translateX(-50%);

  transition:
    transform 160ms ease;
}

.project-slide__cta:hover,
.project-slide__cta:focus,
.project-slide__cta:focus-visible {
  border-color: #ffffff;

  background: #ffffff;

  color: #000000;

  outline: none;

  transform:
    translateX(-50%)
    translateY(-1px);
}

.project-slide__cta:active {
  background: #ffffff;
  color: #000000;

  transform:
    translateX(-50%);
}

.project-slide__cta-icon {
  display: inline-flex;

  align-items: center;
  justify-content: center;

  color: #000000;

  font-size: 1rem;
  line-height: 1;
}


/* =========================================================
   REFLECTION
   ========================================================= */

.project-slide__reflection {
  position: relative;

  width: 100%;

  /*
   * Real compressed reflection height.
   * The outer element itself is not scaled.
   */
  aspect-ratio:
    var(--reflection-ratio);

  margin-top:
    clamp(
      16px,
      2dvh,
      24px
    );

  overflow: hidden;

  pointer-events: none;

  opacity: 0.82;

  border: 0;
  outline: 0;
}

.project-slide__reflection::after {
  content: "";

  position: absolute;

  z-index: 5;

  inset: 0;

  pointer-events: none;

  background:
    linear-gradient(
      to bottom,
      rgba(0, 0, 0, 0.06),
      rgba(0, 0, 0, 0.3)
    );
}

.project-slide__reflection-media {
  position: absolute;

  inset: 0;

  width: 100%;
  height: 100%;

  overflow: hidden;

  transform:
    scaleY(-1);

  transform-origin:
    center center;

  filter:
    brightness(0.72)
    saturate(0.86)
    blur(0.25px);
}

.project-slide__reflection-poster,
.project-slide__reflection-video {
  position: absolute;

  inset: 0;

  width: 100%;
  height: 100%;

  object-fit: fill;
  object-position: center center;

  border: 0;
  outline: 0;
}

.project-slide__reflection-poster {
  z-index: 1;

  opacity: 1;

  background: #000000;

  -webkit-user-drag: none;
}

.project-slide__reflection-video {
  z-index: 2;

  opacity: 0;

  background: transparent;

  transition:
    opacity 120ms ease;
}

.project-slide.is-reflection-video-playing
.project-slide__reflection-video {
  opacity: 1;
}


/*
 * Poster deliberately remains underneath the reflection video.
 */

.project-slide[data-offset="-1"]
.project-slide__content,
.project-slide[data-offset="1"]
.project-slide__content {
  visibility: hidden;
}

.project-slide[data-offset="-1"]
.project-slide__reflection,
.project-slide[data-offset="1"]
.project-slide__reflection {
  opacity: 0.34;
}


/* =========================================================
   DOTS
   ========================================================= */

.slider__dots {
  z-index: 40;

  grid-column: 1 / -1;
  grid-row: 2;

  display: flex;

  height: 100%;

  align-items: center;
  justify-content: center;

  gap: 10px;
}

.slider__dot {
  width: 8px;
  height: 8px;

  margin: 0;
  padding: 0;

  border:
    1px solid
    #ffffff;

  border-radius: 50%;

  outline: none;

  background: transparent;

  cursor: pointer;

  opacity: 1;
}

.slider__dot:hover,
.slider__dot:focus,
.slider__dot:focus-visible {
  border-color: #ffffff;

  outline: none;
}

.slider__dot[aria-current="true"] {
  border-color: #ffffff;

  background: #ffffff;

  transform:
    scale(1.25);
}


/* =========================================================
   NOSCRIPT
   ========================================================= */

.noscript-note {
  position: fixed;

  z-index: 50;

  left: 50%;
  bottom: 12px;

  width:
    min(
      90vw,
      560px
    );

  margin: 0;
  padding: 10px 12px;

  border:
    1px solid
    #ffffff;

  background: #000000;

  color: #ffffff;

  text-align: center;

  transform:
    translateX(-50%);
}


/* =========================================================
   PORTRAIT MOBILE
   ========================================================= */

@media
  (max-width: 767px)
  and (orientation: portrait) {

  :root {
    --page-padding-x: 4px;
    --page-padding-top: 4px;
    --page-padding-bottom: 4px;
  }

  /*
   * 100dvh is ONLY the minimum.
   *
   * If the project needs more vertical room, the page becomes
   * taller and the browser can scroll normally.
   */
  .landing {
    display: grid;

    width: 100%;

    height: auto;

    min-height: 100vh;
    min-height: 100dvh;

    padding:
      max(
        4px,
        env(safe-area-inset-top)
      )
      max(
        4px,
        env(safe-area-inset-right)
      )
      max(
        4px,
        env(safe-area-inset-bottom)
      )
      max(
        4px,
        env(safe-area-inset-left)
      );

    grid-template-rows:
      clamp(
        48px,
        7dvh,
        58px
      )
      minmax(
        clamp(
          650px,
          110vw,
          820px
        ),
        1fr
      );

    gap: 0;

    overflow: visible;
  }

  .landing > h1 {
    font-size:
      clamp(
        1.3rem,
        6.2vw,
        1.8rem
      );
  }

  .slider {
    grid-template-columns:
      28px
      minmax(0, 1fr)
      28px;

    grid-template-rows:
      minmax(0, 1fr)
      28px;

    min-height:
      clamp(
        650px,
        110vw,
        820px
      );
  }

  /*
   * Full width viewport.
   * Navigation arrows overlay the media area.
   */
  .slider__viewport {
    grid-column:
      1 / -1;

    grid-row: 1;

    width: 100%;
    height: 100%;

    min-height: 0;

    perspective: none;

    overflow: hidden;
  }

  .slider__nav {
    width: 28px;
    height: 54px;

    align-self: center;

    color: #ffffff;
  }

  .slider__nav span {
    color: #ffffff;

    font-size: 2.45rem;
  }

  /*
   * No dvh-based width.
   *
   * A short phone therefore does NOT make the whole slide
   * narrower and force the text into more lines.
   */
  .project-slide {
    top: 50%;

    width:
      min(
        88vw,
        560px
      );

    max-width: none;

    transform-origin:
      center center;
  }

  .project-slide[data-offset="-1"] {
    --slide-opacity: 0.25;
    --slide-scale: 0.67;
    --slide-x: -136%;
    --slide-z: 0px;
  }

  .project-slide[data-offset="1"] {
    --slide-opacity: 0.25;
    --slide-scale: 0.67;
    --slide-x: 36%;
    --slide-z: 0px;
  }

  .project-slide[data-offset="-2"] {
    --slide-x: -172%;
  }

  .project-slide[data-offset="2"] {
    --slide-x: 72%;
  }

  /*
   * Let content grow instead of forcing it into a fixed height.
   */
  .project-slide__content {
    height: auto;

    min-height: 150px;

    padding:
      14px
      10px
      58px;
  }

  .project-slide__text {
    gap: 7px;
  }

  .project-slide__content h2 {
    color: #ffffff;

    font-size:
      clamp(
        1.08rem,
        5.2vw,
        1.42rem
      );

    line-height: 1.08;
  }

  .project-slide__content p {
    max-width: 100%;

    color: #ffffff;

    font-size:
      clamp(
        0.76rem,
        3.45vw,
        0.92rem
      );

    line-height: 1.38;
  }

  .project-slide__cta {
    bottom: 7px;

    min-width: 144px;
    height: 38px;

    padding:
      0 14px;

    border-color: #ffffff;

    background: #ffffff;

    color: #000000;

    font-size: 0.74rem;
    font-weight: 750;
  }

  .project-slide__cta:hover,
  .project-slide__cta:focus,
  .project-slide__cta:focus-visible,
  .project-slide__cta:active {
    border-color: #ffffff;

    background: #ffffff;

    color: #000000;
  }

  .slider__floor {
    top: 54%;

    width: 125vw;
    height: 38%;

    opacity: 0.4;
  }

  .slider__dots {
    height: 28px;

    gap: 10px;
  }

  .slider__dot {
    width: 8px;
    height: 8px;

    border-color: #ffffff;
  }
}


/* =========================================================
   SMALL PORTRAIT MOBILE
   ========================================================= */

@media
  (max-width: 430px)
  and (orientation: portrait) {

  .landing {
    grid-template-rows:
      46px
      minmax(
        clamp(
          620px,
          150vw,
          680px
        ),
        1fr
      );
  }

  .landing > h1 {
    font-size:
      clamp(
        1.2rem,
        6vw,
        1.58rem
      );
  }

  .slider {
    grid-template-rows:
      minmax(0, 1fr)
      26px;

    min-height:
      clamp(
        620px,
        150vw,
        680px
      );
  }

  .project-slide {
    width:
      min(
        90vw,
        430px
      );
  }

  .project-slide__content {
    height: auto;

    min-height: 146px;

    padding:
      12px
      8px
      56px;
  }

  .project-slide__content h2 {
    font-size:
      clamp(
        1.05rem,
        5.2vw,
        1.32rem
      );
  }

  .project-slide__content p {
    font-size:
      clamp(
        0.73rem,
        3.35vw,
        0.86rem
      );

    line-height: 1.36;
  }

  .project-slide__cta {
    bottom: 7px;

    min-width: 138px;
    height: 36px;

    font-size: 0.71rem;
  }
}


/* =========================================================
   SHORT PORTRAIT MOBILE
   ========================================================= */

@media
  (orientation: portrait)
  and (max-height: 680px) {

  /*
   * Do NOT shrink everything because the screen is short.
   *
   * Keep readable sizes and allow vertical page scrolling.
   */
  .landing {
    height: auto;

    min-height: 100vh;
    min-height: 100dvh;

    grid-template-rows:
      44px
      minmax(
        620px,
        1fr
      );

    overflow: visible;
  }

  .slider {
    min-height: 620px;
  }

  .project-slide {
    width:
      min(
        90vw,
        410px
      );
  }

  .project-slide__content {
    height: auto;

    min-height: 142px;

    padding:
      10px
      7px
      54px;
  }

  .project-slide__content h2 {
    font-size:
      clamp(
        1rem,
        5vw,
        1.26rem
      );
  }

  .project-slide__content p {
    font-size:
      clamp(
        0.71rem,
        3.25vw,
        0.84rem
      );

    line-height: 1.34;
  }

  .project-slide__cta {
    bottom: 6px;

    min-width: 136px;
    height: 35px;

    font-size: 0.7rem;
  }
}


/* =========================================================
   LANDSCAPE MOBILE
   ========================================================= */

@media
  (orientation: landscape)
  and (max-height: 560px) {

  /*
   * Landscape also uses a minimum layout height instead of
   * crushing the entire project into the current dvh.
   */
  .landing {
    display: grid;

    width: 100%;

    height: auto;

    min-height: 100vh;
    min-height: 100dvh;

    grid-template-rows:
      38px
      minmax(
        500px,
        1fr
      );

    gap: 0;

    overflow: visible;
  }

  .landing > h1 {
    font-size:
      clamp(
        1rem,
        4vw,
        1.3rem
      );
  }

  .slider {
    grid-template-rows:
      minmax(0, 1fr)
      24px;

    min-height: 500px;
  }

  .slider__viewport {
    min-height: 0;
  }

  .project-slide {
    width:
      min(
        48vw,
        520px
      );
  }

  .project-slide__content {
    height: auto;

    min-height: 108px;

    padding:
      8px
      8px
      39px;
  }

  .project-slide__content h2 {
    font-size:
      clamp(
        0.86rem,
        2vw,
        1.1rem
      );
  }

  .project-slide__content p {
    color: #ffffff;

    font-size:
      clamp(
        0.62rem,
        1.35vw,
        0.78rem
      );

    line-height: 1.3;
  }

  .project-slide__cta {
    bottom: 4px;

    min-width: 120px;
    height: 30px;

    padding:
      0 10px;

    border-color: #ffffff;

    background: #ffffff;

    color: #000000;

    font-size: 0.64rem;
  }

  .project-slide__reflection {
    margin-top: 10px;
  }
}


/* =========================================================
   BELOW 768PX: NO REFLECTION AT ALL
   ========================================================= */

@media (max-width: 767px) {
  .project-slide__reflection {
    display: none !important;
  }
}


/* =========================================================
   ACCESSIBILITY
   ========================================================= */

@media (prefers-reduced-motion: reduce) {
  *,
  *::before,
  *::after {
    transition-duration:
      0.01ms !important;

    animation-duration:
      0.01ms !important;

    animation-iteration-count:
      1 !important;
  }
}

@media (forced-colors: active) {
  .slider__dot {
    border-color: CanvasText;
  }
}