/* === SCROLL PULL === */

.anim__scroll-pull {
  height: var(--pull-height, 200vh);
  display: flex;
  flex-direction: column;
  align-items: center;
}

.anim__scroll-pull .scroll-pull {
  position: sticky;
  top: 0;
  height: 100vh;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  will-change: transform, filter, opacity;
}

/* === SCROLL CARDS === */

.anim__scroll-cards {
  display: grid;
  grid-template-columns: 1fr 1fr;
  overflow: visible !important;
}

.scroll-cards__sticky-col {
  position: sticky;
  top: 0;
  height: 100vh;
  align-self: start;
  display: flex;
  justify-content: center;
  align-items: center;
}

.scroll-cards__sticky-element {
  width: 80%;
  max-width: 80vw;
  object-fit: contain;
}

.scroll-cards__card {
  display: flex;
  align-items: center;
  padding: 0 48px;
  will-change: transform, opacity;
  transition: none !important;
}

@media (max-width: 768px) {
  .anim__scroll-cards    { grid-template-columns: 1fr; }
  .scroll-cards__sticky-col { position: relative; height: 50vw; }
  .scroll-cards__card    { padding: 48px 24px; }
}

/* === MOUSE GRADIENT === */

.anim__mouse-gradient { position: relative; background-color: var(--main-dark); }
.anim__mouse-gradient::before {
  content: '';
  position: absolute;
  inset: 0;
  pointer-events: none;
  opacity: 0.4;
  background: radial-gradient(
    circle 33vh at var(--mouse-x, 50%) var(--mouse-y, 50%),
    var(--brand-color-main),
    transparent
  );
}