/* --------------------------------------------------------------------------------
 shine
-------------------------------------------------------------------------------- */
#sleepingmaskcp {
	.js-shiny {
		position: relative;
		overflow: hidden;
		&.is-inview {
			&::after {
				content: '';
				width: 100%;
				height: 100%;
				animation: 4s .5s shine linear 2;
				background: linear-gradient(to right, rgba(255,255,255,0) 0%, rgba(255,255,255,.5) 30%,rgba(255,255,255,0) 32%,rgba(255,255,255,0) 70%,rgba(255,255,255,.25) 85%,rgba(255,255,255,0) 100%);
				position: absolute;
				top: 0;
				left: -100%;
				transform: skewX(35deg);
			}
		}
		&.shiny-done::after {
			content: none;
		}
	}
}
@keyframes shine {
	30% { left: 150%; }
	100% { left: 150%; }
}

/* --------------------------------------------------------------------------------
 badge
-------------------------------------------------------------------------------- */
#sleepingmaskcp {
	.clip_ldk {
		width: 100%;
		height: 100%;
		position: absolute !important;
		top: 0;
		left: 0;
		clip-path: url(#clip_ldk);
		z-index: 20;
	}
	.clip_pococe {
		width: 100%;
		height: 100%;
		position: absolute !important;
		top: 0;
		left: 0;
		clip-path: url(#clip_pococe);
		z-index: 20;
	}
	.clip_pococe_bestbuy202505 {
		width: 100%;
		height: 100%;
		position: absolute !important;
		top: 0;
		left: 0;
		clip-path: url(#clip_pococe_bestbuy202505);
		z-index: 20;
	}
	.clip_pococe_bba2025h1 {
		width: 100%;
		height: 100%;
		position: absolute !important;
		top: 0;
		left: 0;
		clip-path: url(#clip_pococe_bba2025h1);
		z-index: 20;
	}
}

/* --------------------------------------------------------------------------------
 animation
-------------------------------------------------------------------------------- */
#sleepingmaskcp {
	.js-fadeIn {
		opacity: 0;
		transform: scale(0.98);
		transition: opacity 2s ease, transform 2s ease;
		will-change: opacity, transform;
		&.is-inview {
			opacity: 1;
			transform: scale(1);
		}
	}
	.js-fadeInUp {
		opacity: 0;
		transition: transform 2.25s ease, opacity 1s ease;
		will-change: transform, opacity;
		transform: translateY(1.5rem);
		&.is-inview {
			opacity: 1;
			transform: translateY(0);
		}
	}
	.js-fadeInDown {
		opacity: 0;
		transition: transform 2.25s ease, opacity 1s ease;
		will-change: transform, opacity;
		transform: translateY(-1.5rem);
		&.is-inview {
			opacity: 1;
			transform: translateY(0);
		}
	}
	.js-fadeInLeft {
		opacity: 0;
		transition: transform 2.25s ease, opacity 1s ease;
		will-change: transform, opacity;
		transform: translateX(-3rem);
		&.is-inview {
			transform: translateX(0);
			opacity: 1;
		}
	}
	.js-fadeInRight {
		opacity: 0;
		transition: transform 2.25s ease, opacity 1s ease;
		will-change: transform, opacity;
		transform: translateX(3rem);
		&.is-inview {
			transform: translateX(0);
			opacity: 1;
		}
	}
	.delay_01 { transition-delay: .1s; }
	.delay_02 { transition-delay: .2s; }
	.delay_03 { transition-delay: .3s; }
	.delay_04 { transition-delay: .4s; }
	.delay_05 { transition-delay: .5s; }
	.delay_06 { transition-delay: .6s; }
	.delay_08 { transition-delay: .8s; }
	.delay_10 { transition-delay: 1.0s; }
	.delay_20 { transition-delay: 2.0s; }
	.js-vib.is-inview {
		animation: vibration 2.3s ease 0s 2 normal !important;
		will-change: transform;
	}
	.js-shake.is-inview {
		animation: shake 1s ease 0s 1 normal !important;
		will-change: transform;
	}
}
@keyframes vibration {
	from { transform: translateX(0); }
	5% { transform: translateX(.25rem); }
	10% { transform: translateX(0); }
	to { transform: translateX(0); }
}
@keyframes shake {
	from { transform: translateX(0); }
	12.5% { transform: translateX(.25rem); }
	37.5% { transform: translateX(-0.25rem); }
	62.5% { transform: translateX(.25rem); }
	87.5% { transform: translateX(-0.25rem); }
	to { transform: translateX(0); }
}