/* aos-custom관련 */

[data-aos="blur"] {
    opacity: 0;
    filter: blur(16px);
    transform: translateY(18px);
    transition-property: opacity, filter, transform;
}

[data-aos="blur"].aos-animate {
    opacity: 1;
    filter: blur(0);
    transform: translateY(0);
}

/* 마스크 안에서 한 줄씩 올라오는 텍스트 리빌 (자식 요소가 움직임)
   duration은 자식에 고정, delay는 부모(data-aos-delay)에서 상속 */
[data-aos="mask-up"] {
    overflow: hidden;
}

[data-aos="mask-up"] > * {
    display: inline-block;
    opacity: 0;
    transform: translateY(100%);
    transition-property: opacity, transform;
    transition-duration: 0.7s;
    transition-delay: inherit;
    transition-timing-function: cubic-bezier(0.17, 0.84, 0.44, 1);
}

[data-aos="mask-up"].aos-animate > * {
    opacity: 1;
    transform: translateY(0);
}

/* 아래에서 위로 열리는 clip-path 리빌 */
[data-aos="clip-up"] {
    opacity: 0;
    -webkit-clip-path: inset(100% 0 0 0);
    clip-path: inset(100% 0 0 0);
    transition-property: opacity, clip-path, -webkit-clip-path;
}

[data-aos="clip-up"].aos-animate {
    opacity: 1;
    -webkit-clip-path: inset(0);
    clip-path: inset(0);
}

/* 흐린 상태로 대기했다가 선명해지는 스텝 리빌 */
[data-aos="step-in"] {
    opacity: 0.35;
    transform: translateY(10px);
    transition-property: opacity, transform;
}

[data-aos="step-in"].aos-animate {
    opacity: 1;
    transform: translateY(0);
}

/* 메인 공통 리빌: 아래에서 올라오며 나타나고, 내부 mask/clip 요소를 함께 구동 */
[data-aos="reveal"] {
    opacity: 0;
    transform: translateY(28px);
    transition-property: opacity, transform;
}

[data-aos="reveal"].aos-animate {
    opacity: 1;
    transform: none;
}

@keyframes reveal-slide-up {
    0% {
        opacity: 0;
        transform: translateY(100%);
    }
    100% {
        opacity: 1;
        transform: translateY(0);
    }
}

[data-aos="reveal"] .mask .text {
    opacity: 0;
    transform: translateY(100%);
}

[data-aos="reveal"].aos-animate .mask .text {
    animation: reveal-slide-up 0.65s cubic-bezier(0.17, 0.84, 0.44, 1) forwards;
}

[data-aos="reveal"].aos-animate .mask:nth-child(n + 2) .text {
    animation-delay: 0.12s;
}

[data-aos="reveal"].aos-animate .mask:nth-child(n + 4) .text {
    animation-delay: 0.24s;
}

[data-aos="reveal"] .clip-reveal {
    opacity: 0;
    -webkit-clip-path: inset(100% 0 0 0);
    clip-path: inset(100% 0 0 0);
    transition: opacity 1.2s cubic-bezier(0.17, 0.84, 0.44, 1), clip-path 1.2s cubic-bezier(0.17, 0.84, 0.44, 1);
}

[data-aos="reveal"] .clip-reveal--delay {
    transition-delay: 0.18s;
}

[data-aos="reveal"].aos-animate .clip-reveal {
    opacity: 1;
    -webkit-clip-path: inset(0);
    clip-path: inset(0);
}

@media (prefers-reduced-motion: reduce) {
    [data-aos="blur"],
    [data-aos="clip-up"],
    [data-aos="step-in"],
    [data-aos="reveal"],
    [data-aos="reveal"] .mask .text,
    [data-aos="reveal"] .clip-reveal,
    [data-aos="mask-up"] > * {
        opacity: 1;
        filter: none;
        transform: none;
        transition: none;
        animation: none;
        -webkit-clip-path: none;
        clip-path: none;
    }
}

    .scroll-reveal {
  clip-path: inset(0% 100% 0% 0%);
  -webkit-clip-path: inset(0% 100% 0% 0%);
  will-change: clip-path;
  overflow: hidden;
  width: 100%;
  height: auto;
  max-height: var(--reveal-max-h);
  aspect-ratio:1920/1080;
}

.scroll-reveal img,
.scroll-reveal video {
  display: block;
  color: transparent;
  object-fit: cover;
  width: 100%;
  height: 100%;
}