/* ABOUTME: Styles for the Céljaink (Our Goals) scroll-locked section.
   ABOUTME: Handles sticky container, scroll-driven image slideshow, and alternating text animations. */

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

.celjaink {
  position: relative;
  height: 500vh;
}

.celjaink__sticky {
  position: sticky;
  top: 0;
  height: 100vh;
  padding: 1em;
  display: flex;
  flex-direction: column;
  overflow: hidden;
}

/* ===========================
   Content Area
   =========================== */

.celjaink__content {
  position: relative;
  flex: 1;
  min-height: 0;
  display: flex;
  align-items: center;
  justify-content: center;
}

/* ===========================
   Slideshow (vertical curtain clip-path)
   =========================== */

.celjaink__slideshow {
  position: relative;
  width: 42%;
  height: 85%;
}

.celjaink__slide {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  clip-path: inset(0 0 100% 0);
  transition: clip-path 0.8s cubic-bezier(0.77, 0, 0.175, 1);
}

.celjaink__slide--active {
  clip-path: inset(0 0 0 0);
}

.celjaink__slide--exit {
  clip-path: inset(100% 0 0 0);
  transition: clip-path 0.8s cubic-bezier(0.77, 0, 0.175, 1);
}

/* ===========================
   Flower Pattern (cross-stitch SVG)
   =========================== */

.celjaink__pattern {
  position: absolute;
  right: 55%;
  top: 50%;
  transform: translateY(-50%);
  width: 38%;
  height: 110%;
  pointer-events: none;
  z-index: 1;
}

.celjaink__pattern svg {
  width: 100%;
  height: 100%;
}

/* ===========================
   Text Items
   =========================== */

.celjaink__text {
  position: absolute;
  top: 50%;
  will-change: transform;
}

.celjaink__text p {
  font-family: var(--font-primary);
  font-size: clamp(1.8rem, 3.2vw, 2.8rem);
  line-height: 1.15;
  margin: 0;
}

/* Image is 42% wide and centered → occupies 29%–71%. Text sits to the right. */
.celjaink__text--right {
  left: 73%;
  right: 2%;
}


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

@media (max-width: 768px) {
  .celjaink__slideshow {
    width: 70%;
    height: 50%;
  }

  .celjaink__text,
  .celjaink__text--right {
    left: 10%;
    right: 10%;
  }

  .celjaink__text p {
    font-size: clamp(1.4rem, 5vw, 2rem);
  }
}

@media (max-width: 480px) {
  .celjaink__slideshow {
    width: 85%;
    height: 45%;
  }

  .celjaink__text,
  .celjaink__text--right {
    left: 5%;
    right: 5%;
  }
}