/*프로그레스 바 : transform-origin은 기준점을 정하기 위한 코드*/
	.progress-bar {
		position:fixed;
		top:0;
		left:0;
		width:100%;
		height:5px;
		background:var(--color-w);
		transform-origin:0 50%;
		z-index:1000;
		transform:scaleX(0);
		
		
		/*핵심: 스크롤 진행도에 따라 가로 길이 조절*/
		animation:scroll-progress linear;
		animation-timeline: scroll();
			
	}
	
	@keyframes scroll-progress {
		from{
			transform:scaleX(0);
		}
		to {
			transform:scaleX(1);
		}
	}

/* 커서 원 따라다니는 효과 */
	.cursor {
		width: 32px;
		height: 32px;
		background: #fff;
		border-radius: 50%;
		position: fixed;
		top: 0;
		left: 0;
		pointer-events: none;
		z-index: 9999;
		transform: translate(-50%, -50%);
		mix-blend-mode: difference;
		transition: width 0.3s ease, height 0.3s ease;

		/* ✅ 추가: 터치 미디어쿼리로 CSS 레벨에서도 숨김 */
		display: none; /* 기본 숨김 */
	}

	.cursor.is-hover {
		width: 80px;
		height: 80px;
	}


/*글자 fade 애니메이션*/
	.fade-up, .fade-up2, .fade-left, .fade-right, .fade-up-heavy, .fade-up-heavy2 {
		opacity: 0;
		will-change: auto; /* 기본은 auto, 트리거 직전에만 변경 */
	}

	.fade-up {
		transform: translateY(50px);
		transition: opacity 1s ease-out, transform 0.5s ease-out;
	}

	.fade-up.is-visible {
		opacity: 1;
		transform: translateY(0);
	}
	
	.fade-up2 {
		transform: translateY(50px);
		transition: opacity 1.2s ease-out, transform 0.7s ease-out;
	}

	.fade-up2.is-visible {
		opacity: 1;
		transform: translateY(0);
	}
		
	
	.fade-left {
		transform: translateX(-20px);
		transition: opacity 1s ease-in-out, transform 0.5s ease-in-out;
	}

	.fade-left.is-visible {
		opacity: 1;
		transform: translateY(0);
	}
	.fade-right {
		transform: translateX(20px);
		transition: opacity 1s ease-in-out, transform 0.5s ease-in-out;
	}

	.fade-right.is-visible {
		opacity: 1;
		transform: translateY(0);
	}

	/* ── fade-up-heavy : 이미지·무거운 블록 전용 ── */
	.fade-up-heavy {
	  transform: translateY(20px); /* 이동 거리 최소화 */
	  transition: opacity 1s ease-out, transform 0.3s ease-out;
	}
	.fade-up-heavy.is-visible {
	  opacity: 1;
	  transform: translateY(0);
	}
	
	.fade-up-heavy2 {
	  transform: translateY(20px); /* 이동 거리 최소화 */
	  transition: opacity 1s ease-out, transform 0.3s ease-out;
	}
	.fade-up-heavy2.is-visible {
	  opacity: 1;
	  transform: translateY(0);
	}

/*글자 아래에서 위로 올라오는 효과*/
	.text-up {
	  display: block;
	  transform: translateY(100%); /* 부모 overflow:hidden 안에서 딱 숨겨지게 */
	  transition: opacity 0.5s ease-out, transform 0.5s ease-out;
	}

	.text-up.is-visible {
	  transform: translateY(0);
	}


/*텍스트 그라데이션*/
	.text-overlay {
		background:linear-gradient(45deg, #ff0055, #00fbff);
		-webkit-background-clip:text;
		-webkit-text-fill-color:transparent;
	}


/*서서히 변하는 텍스트 그라데이션*/
	.text-overlay-2 {
		background: linear-gradient(45deg, #ff0055, #00fbff);
		background-clip: text;
		-webkit-background-clip: text;
		background-size: 200%;
		background-position: 100%;
		color: white;
		/* transition 제거 → 스크롤에 직접 연동되니까 필요 없음 */
	}



/* 오른쪽에서 왼쪽으로 무한하게 이동하는 효과*/

	/* 보이는 영역 */
	.marquee-wrapper {
		overflow: hidden; /* 넘치는 부분 숨기기 */
		width: 100%;
	}

	/* 전체 트랙 */
	.marquee-track {
		display: flex;
		width: max-content; /* 내용물 크기에 맞게 늘어남 */
		animation: marquee 100s linear infinite; /* 20s ← 속도 조절 */
	}

	/* 각 박스 */
	.marquee-item {
		width: var(--width-4);
		height: var(--height-3);
		flex-shrink: 0; /* 크기 줄어들지 않게 */
		display: flex;
		align-items: center;
		justify-content: center;
	}

	.marquee-item2 {
		width: 240px;
		height: 240px;
		flex-shrink: 0; /* 크기 줄어들지 않게 */
	}
	
	.marquee-item img {
		width: var(--width-4);
		height: var(--height-3);
	}
	
	.marquee-wrapper:hover .marquee-track {
		animation-play-state: paused;
	}

	/* 핵심: 원본 길이만큼만 이동 후 처음으로 돌아옴 */
	@keyframes marquee {
		from { transform: translateX(0); }
		to   { transform: translateX(-50%); } /* 복사본이 있으니 50%만 이동 */
	}

	
	/* 카운트 다운에 + 붙히기 */
	.count-plus {
		opacity: 0;
		transition: opacity 0.5s ease-out; /* 서서히 나타남 */
	}

	.count-plus.is-visible {
		opacity: 1;
	}


/*등장 애니메이션*/
	.reveal-box-1 {
		width: 80%;
		max-width: 600px;
		height: 300px;
		background: url("https://images.unsplash.com/photo-1640963269654-3fe248c5fba6?q=80&w=1632&auto=format&fit=crop&ixlib=rb-4.1.0&ixid=M3wxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8fA%3D%3D") no-repeat center;
		background-size: cover;
		border-radius: 20px;
		margin: 100px 0;

		/* 초기 상태 */
		opacity: 0;
		transform: translateY(100px) scale(0.1) rotate(-25deg);
		filter: blur(10px);
	}
	
/*한번만 등장 애니메이션*/
	.reveal-box-3 {
		width:80%;
		max-width:600px;
		height:300px;
		background: url("https://images.unsplash.com/photo-1640963269654-3fe248c5fba6?q=80&w=1632&auto=format&fit=crop&ixlib=rb-4.1.0&ixid=M3wxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8fA%3D%3D") no-repeat center; background-size:cover;
		border-radius:20px;
		margin:100px 0;
		opacity:0;
		transform:translateY(100px) scale(0.8) rotate(-25deg);
		
		/*핵심: 요소가 화면에 보일 떄 애니메이션 실행 명령*/
		view-timeline-name:--reveal; /*타임라인 선언*/
		view-timeline-axis: y;
		animation:show-up linear forwards;
		animation-timeline:--reveal;
		
		/*언제 시작하고 끝날지 정교하게 조절*/
		animation-range:entry 10% cover 80%;

	}


/* ================================================
   mask-wrap / zoom-target / zoom-text / zoom-svg
================================================ */

	.mask-wrap {
		position: absolute;
		inset: 0;
		z-index: 2;
		background: var(--color-mask-bg);   /* 검정 오버레이 */
		/* mix-blend-mode: multiply;   */         /* 흰색 텍스트 영역 = 구멍 */
		display: flex;
		align-items: center;
		justify-content: center;
	}

	.zoom-section-wrapper {
		position: relative;
		/* height는 JS에서 --scroll-duration 기반으로 설정 */
	}

	.zoom-section {
		position: sticky;
		top: 0;
		width: 100%;
		height: 100vh;
		overflow: hidden;       /* clip → hidden으로 변경 */
		background: var(--color-inner-bg);
		isolation: isolate;
	}

	.zoom-target {
		transform-origin: var(--zoom-origin-x) var(--zoom-origin-y);
		color: var(--color-text-zoom);      /* 반드시 흰색 유지 */
	}

	.zoom-text {
		font-size: clamp(2.5rem, 8vw, 7rem);
		font-weight: 700;
		letter-spacing: -0.02em;
		text-align: center;
		line-height: 1;
		white-space: nowrap;
		text-transform: uppercase;
	}

	.zoom-svg {
		width: clamp(120px, 25vw, 320px);
		height: auto;
	}



/* 마우스가 있는 기기에서만 표시 */
@media (hover: hover) and (pointer: fine) {
    .cursor {
        display: block;
    }
}




/* 모바일 */
@media all and (max-width: 768px) {

	.marquee-item {
        width: auto;
        height: auto;
    }
	
	.marquee-item img {
		width: 160px;
		height: auto;
	}
	
	.text-stop .text-up,
    .text-up.text-stop {
        transform: translateY(0);
        opacity: 1;
    }

	.zoom-target {
	  padding:var(--space-5);
	}
	
}