@import url("https://fonts.googleapis.com/css2?family=Zalando+Sans+SemiExpanded:wght@200;300;400;700;800&display=swap");

/* 1. Base */

* {
  box-sizing: border-box;
}

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

body {
  background: white;
  color: black;
  font-family: "Zalando Sans SemiExpanded", Helvetica, Arial, sans-serif;
  font-weight: 200;
}

/* 2. Intro page */

.intro-page {
  min-height: 100vh;
}

.intro {
  min-height: 100vh;
  width: 100%;
  display: flex;
  justify-content: center;
  align-items: center;
  padding: 40px 0;
}

.intro-poster {
  position: relative;
  width: min(78vw, 620px);
}

.intro-poster img {
  display: block;
  width: 100%;
  height: auto;
}

.enter-link {
  position: absolute;
  left: 50%;
  bottom: 18.8%;
  transform: translateX(-50%);

  color: black;
  text-decoration: none;
  white-space: nowrap;
  cursor: pointer;

  font-family: "Zalando Sans SemiExpanded", Helvetica, Arial, sans-serif;
  font-weight: 200;
  font-size: clamp(38px, 4vw, 66px);
  line-height: 1;
  letter-spacing: 0;

  transition: color 120ms ease;
}

.enter-link:hover,
.enter-link:focus-visible,
.enter-link:active {
  color: #00D422;
}

.enter-link:focus-visible {
  outline: 2px solid #00D422;
  outline-offset: 8px;
}

@media (max-height: 850px) {
  .intro {
    align-items: flex-start;
    padding-top: 20px;
  }

  .intro-poster {
    width: min(72vw, 540px);
  }
}

/* 3. Custom horse cursor */

@media (hover: hover) and (pointer: fine) {
  body.has-custom-cursor,
  body.has-custom-cursor * {
    cursor: none !important;
  }

  .custom-cursor {
    position: fixed;
    left: 0;
    top: 0;

    width: 96px;
    height: 96px;

    pointer-events: none;
    z-index: 9999;

    background-image: url("assets/cursors/horse-gallop.png");
    background-repeat: no-repeat;
    background-position: center;
    background-size: contain;

    opacity: 0;
    transform: translate(-50%, -50%) scaleX(1);

    filter: drop-shadow(0 1px 2px rgba(0, 0, 0, 0.35));
  }

  .custom-cursor.is-visible {
    opacity: 1;
  }

  .custom-cursor.is-clicking {
    background-image: url("assets/cursors/horse-rearing.png");
  }

  .custom-cursor.facing-left {
    transform: translate(-50%, -50%) scaleX(-1);
  }
}

/* 4. Shared back link */

.back-link {
  position: fixed;
  left: 36px;
  top: 36px;
  z-index: 9998;

  display: inline-block;
  color: black;
  text-decoration: none;
  font-size: 20px;
  line-height: 1;
  font-weight: 200;

  transition: color 120ms ease;
}

.back-link:hover,
.back-link:focus-visible {
  color: #00D422;
}

/* 5. Generic content pages */

.content-page {
  min-height: 100vh;
  background: white;
}

.content-stage {
  min-height: 100vh;
  padding: 36px;
}

.content-stage h1 {
  margin: 140px 0 0;
  text-align: center;
  font-size: clamp(42px, 5vw, 82px);
  line-height: 1;
  font-weight: 200;
}

/* 6. Recent Works */

.project-list {
  min-height: calc(100vh - 72px);
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 28px;
}

.project-list a {
  color: black;
  text-decoration: none;

  font-family: "Zalando Sans SemiExpanded", Helvetica, Arial, sans-serif;
  font-weight: 200;
  font-size: clamp(42px, 5vw, 86px);
  line-height: 1;

  transition: color 120ms ease;
}

.project-list a:hover,
.project-list a:focus-visible {
  color: #00D422;
}

/* 7. Project pages */

.project-page {
  min-height: 100vh;
  background: white;
}

.project-stage {
  min-height: 100vh;
  padding: 36px;
}

.project-header {
  margin: 120px auto 100px;
  text-align: center;
}

.project-header h1 {
  margin: 0;
  font-size: clamp(48px, 6vw, 100px);
  line-height: 1;
  font-weight: 200;
}

.project-header p {
  margin: 18px 0 0;
  font-size: clamp(18px, 1.6vw, 26px);
  line-height: 1;
  font-weight: 200;
}

.project-images {
  width: min(82vw, 980px);
  margin: 0 auto 120px;

  display: flex;
  flex-direction: column;
  gap: 80px;
}

.project-images img {
  display: block;
  width: 100%;
  height: auto;
}

/* 8. CV */

.cv-page {
  min-height: 100vh;
  background: white;
}

.cv-stage {
  max-width: 980px;
  min-height: 100vh;
  margin: 0 auto;
  padding: 36px 36px 140px;
}

.cv-header {
  margin: 120px 0 110px;
  text-align: center;
}

.cv-header h1 {
  margin: 0 0 38px;
  color: black;
  font-size: clamp(56px, 7vw, 128px);
  line-height: 1;
  font-weight: 200;
}

.cv-header p {
  margin: 0;
  color: #00D422;
  font-size: clamp(18px, 1.6vw, 26px);
  line-height: 1.35;
  font-weight: 200;
}

.cv-section {
  margin-top: 84px;
}

.cv-section h2 {
  margin: 0 0 24px;
  color: black;
  font-size: clamp(25px, 2.2vw, 38px);
  line-height: 1;
  font-weight: 200;
}

.cv-section p {
  margin: 0 0 12px;
  color: #00D422;
  font-size: clamp(17px, 1.28vw, 21px);
  line-height: 1.38;
  font-weight: 200;
}

.cv-section a {
  color: #00D422;
  text-decoration: none;
  transition: color 120ms ease;
}

.cv-section a:hover,
.cv-section a:focus-visible {
  color: black;
}

/* 9. Studio Dump */

.dump-page {
  position: relative;
  isolation: isolate;
  min-height: 100vh;
  background: #00D422;
}

.dump-stage {
  position: relative;
  z-index: 2;

  width: 100%;
  min-height: 100vh;
  padding: 80px 48px 48px;

  background: transparent;
}

.dump-background-gif,
.dump-header {
  display: none;
}

.dump-page .back-link {
  position: fixed;
  left: 36px;
  top: 36px;
  z-index: 999999;

  color: black;
  text-decoration: none;
  font-family: "Zalando Sans SemiExpanded", Helvetica, Arial, sans-serif;
  font-weight: 200;
}

.dump-page .back-link:hover,
.dump-page .back-link:focus-visible {
  color: white;
}

.dump-grid {
  position: relative;
  z-index: 3;

  width: min(98vw, 1680px);
  margin: 0 auto;
  padding: 0;

  display: grid;
  grid-template-columns: repeat(5, 260px);
  justify-content: space-between;
  column-gap: 18px;
  row-gap: 18px;

  align-items: start;
  grid-auto-flow: dense;

  background: transparent;
}

.dump-item {
  width: 260px;
  height: 360px;
  margin: 0;
  padding: 0;

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

  position: relative;
  z-index: 1;

  overflow: visible;
  background: #00D422;

  content-visibility: auto;
  contain-intrinsic-size: 260px 360px;
}

.dump-item a {
  width: 100%;
  height: 100%;

  display: flex;
  align-items: center;
  justify-content: center;
}

.dump-item img {
  display: block;

  max-width: 100%;
  max-height: 100%;

  width: auto;
  height: auto;

  object-fit: contain;
  object-position: center center;
  aspect-ratio: auto;
}

.dump-clickable-image {
  cursor: none;
}

.studio-dump-sentinel {
  grid-column: 1 / -1;
  height: 1px;
}

/* 10. Studio Dump chains */

.chain-layer {
  position: fixed;
  inset: 0;
  z-index: 0;

  pointer-events: none;
  overflow: hidden;
  background: transparent;
}

.scroll-chain {
  position: absolute;
  top: -50vh;
  bottom: -50vh;

  width: 520px;

  background-image: url("assets/chains/chain.png");
  background-repeat: repeat-y;
  background-position-x: center;
  background-size: 520px auto;

  opacity: 0.75;
  outline: none;
  background-color: transparent;

  will-change: background-position;
}

.chain-left {
  left: -180px;
  background-position-y: var(--chain-left-y, 0px);
}

.chain-right {
  right: -180px;
  background-position-y: var(--chain-right-y, 0px);
}

.chain-middle {
  display: none;
}

/* 11. Studio Dump lightbox */

.image-lightbox {
  position: fixed;
  inset: 0;
  z-index: 9000;

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

  padding: 56px;
  background: rgba(255, 255, 255, 0.72);

  opacity: 0;
  pointer-events: none;
  transition: opacity 120ms ease;
}

.image-lightbox.is-open {
  opacity: 1;
  pointer-events: auto;
}

.lightbox-image {
  display: block;
  max-width: 86vw;
  max-height: 86vh;
  width: auto;
  height: auto;
  object-fit: contain;
}

.lightbox-close {
  position: fixed;
  right: 36px;
  top: 28px;
  z-index: 9001;

  padding: 0;
  border: 0;
  background: transparent;

  color: black;
  font-family: "Zalando Sans SemiExpanded", Helvetica, Arial, sans-serif;
  font-size: 42px;
  line-height: 1;
  font-weight: 200;

  cursor: none;
  transition: color 120ms ease;
}

.lightbox-close:hover,
.lightbox-close:focus-visible {
  color: #00D422;
}

/* 12. Mobile general */

@media (max-width: 700px) {
  html,
  body {
    overflow-x: hidden;
  }

  .back-link {
    left: 18px;
    top: 18px;
    font-size: 18px;
  }

  .content-stage,
  .project-stage,
  .cv-stage {
    padding-left: 18px;
    padding-right: 18px;
  }

  .project-list a {
    font-size: clamp(38px, 12vw, 58px);
    text-align: center;
  }

  .project-header {
    margin: 100px auto 70px;
  }

  .project-images {
    width: 100%;
    gap: 48px;
  }

  .cv-stage {
    padding-bottom: 100px;
  }

  .cv-header {
    margin: 100px 0 80px;
  }

  .cv-section {
    margin-top: 64px;
  }

  .image-lightbox {
    padding: 28px;
  }

  .lightbox-image {
    max-width: 92vw;
    max-height: 82vh;
  }

  .lightbox-close {
    right: 20px;
    top: 16px;
    font-size: 38px;
  }
}

/* 13. Studio Dump mobile */

@media (max-width: 700px) {
  .dump-stage {
    width: 100%;
    padding: 64px 14px 24px;
    overflow-x: hidden;
  }

  .dump-grid {
    width: 100%;
    max-width: none;

    display: grid;
    grid-template-columns: 1fr;
    justify-content: initial;

    column-gap: 0;
    row-gap: 24px;

    overflow: visible;
  }

  .dump-item {
    width: 100%;
    height: auto;

    grid-column: auto;
    grid-row: auto;

    display: block;

    margin: 0;
    padding: 0;

    overflow: visible;
  }

  .dump-item a {
    width: 100%;
    height: auto;

    display: block;
  }

  .dump-item img {
    width: 100%;
    height: auto;

    max-width: 100%;
    max-height: none;

    display: block;
    object-fit: contain;
    object-position: center center;
  }

  .studio-dump-sentinel {
    grid-column: 1 / -1;
  }
}