/* ABOUTME: Styles for the Misszió (Mission) scroll-driven word-swap section.
   ABOUTME: Handles sticky layout, large serif typography, overflow-clip word swaps, and description parallax. */

/* ===========================
   Section Wrapper
   =========================== */

.misszio {
  position: relative;
  z-index: 1;
  height: 300vh;
}

.misszio__sticky {
  position: sticky;
  top: 0;
  height: 100vh;
  display: flex;
  gap: 2em;
}

/* ===========================
   Left: Large Stacked Words
   =========================== */

.misszio__words {
  flex: 1;
  overflow: visible;
  padding-left: 1em;
  display: flex;
  flex-direction: column;
  justify-content: center;
  height: 100%;
}

.misszio__line {
  font-family: var(--font-primary);
  font-size: clamp(6rem, 20vw, 18rem);
  font-weight: 400;
  line-height: 0.85;
  color: var(--color-black);
}

.misszio__line:nth-child(1) {
  text-align: right;
}

.misszio__line:nth-child(2) {
  text-align: left;
}

.misszio__line:nth-child(3) {
  text-align: center;
}

/* ===========================
   Word Swap
   =========================== */

.misszio__swap {
  display: inline-block;
  overflow-x: visible;
  overflow-y: clip;
  vertical-align: bottom;
}

.misszio__swap-track {
  position: relative;
  display: block;
  will-change: transform;
}

.misszio__swap-word {
  display: block;
}

.misszio__swap-word--alt {
  position: absolute;
  top: 100%;
  left: 0;
}

/* ===========================
   Right: Description
   =========================== */

.misszio__description {
  flex: 0 0 25%;
  padding-right: 3em;
  padding-top: 3em;
  font-family: var(--font-primary);
  font-size: clamp(1.2rem, 1.8vw, 1.6rem);
  font-weight: 400;
  line-height: 1.2;
  color: var(--color-black);
  will-change: transform;
  margin: 0;
}

/* ===========================
   Responsive
   =========================== */

@media (max-width: 768px) {
  .misszio__line {
    font-size: clamp(2.5rem, 10vw, 4rem);
  }

  .misszio__description {
    width: 40%;
    font-size: clamp(0.75rem, 2.5vw, 0.95rem);
  }
}