/* 기본 텍스트: 이미지 뒤 */
.typo-scroll__h {
  position: relative;
  z-index: 0;
}

/* 호버한 텍스트: 이미지 위 */
:is(.wf-design-mode, .wf-editor) [data-typo-scroll-item]:hover .typo-scroll__h,
[data-typo-scroll-item="active"] .typo-scroll__h {
  z-index: 2;
  color: #6b6b6b;
  mix-blend-mode: difference;
}

/* 이미지: 중간 레이어 */
.typo-scroll__media {
  z-index: 1;
  --po: 1.5em;
  /* Path offset */
  transition: clip-path 1.2s cubic-bezier(0.16, 1, 0.3, 1);
  clip-path: polygon(calc(0% + var(--po)) calc(0% + var(--po)),
      calc(100% - var(--po)) calc(0% + var(--po)),
      calc(100% - var(--po)) calc(100% - var(--po)),
      calc(0% + var(--po)) calc(100% - var(--po)));
  opacity: 0;
}

:is(.wf-design-mode, .wf-editor) [data-typo-scroll-item]:hover .typo-scroll__media,
[data-typo-scroll-item="active"] .typo-scroll__media {
  clip-path: polygon(0% 0%, 100% 0%, 100% 100%, 0% 100%);
  opacity: 1;
}

@media (hover: none) and (pointer: coarse) {
  [data-typo-scroll-item="active"] .typo-scroll__media {
    pointer-events: all;
  }
}

[data-typo-scroll-init] {
  -webkit-overflow-scrolling: touch;
  transform: translateZ(0);
}

/* 기본: 낮은 z-index */
[data-typo-scroll-item] {
  position: relative;
  z-index: 0;
  will-change: transform, opacity;
  transform: translateZ(0);
}

/* 호버된 항목: 높은 z-index로 다른 항목들 위로 */
:is(.wf-design-mode, .wf-editor) [data-typo-scroll-item]:hover,
[data-typo-scroll-item="active"] {
  z-index: 10;
}

.typo-scroll__link {
  /* 흰색(#ffffff) + 투명도 15%(26) */
  border-bottom: 1px solid #c6a56a;
}

.typo-scroll__year {
  position: absolute;
  right: 0;
  top: 30%;
  transform: translateY(-50%);
}