#p_top .scroll-anime.is-pending {
	opacity: 0;
	translate: 0 20px;
}
#p_top .scroll-anime.is-revealed {
	opacity: 1;
	translate: 0 0;
	transition: opacity .6s ease-out, translate .6s ease-out;
	transition-delay: var(--scroll-delay, 0ms);
}
#p_top .scroll-anime.has-pop.is-pending {
	translate: 0 30px;
	scale: .92;
}
#p_top .scroll-anime.has-pop.is-revealed {
	transition: none;
	animation: scroll-pop .9s ease-out both;
	animation-delay: var(--scroll-delay, 0ms);
}
#p_top .scroll-anime.has-photo-pop.is-pending {
	opacity: 1;
	translate: none;
}
#p_top .scroll-anime.has-quick-pop.is-pending {
	translate: 0 12px;
	scale: .92;
}
#p_top .scroll-anime.has-quick-pop.is-revealed {
	transition: opacity .2s ease-out, translate .35s cubic-bezier(.2, .8, .2, 1);
	transition-delay: var(--scroll-delay, 0ms);
	animation: scroll-photo-pop .65s cubic-bezier(.2, .8, .2, 1) both;
	animation-delay: var(--scroll-delay, 0ms);
}
#p_top .scroll-anime.has-photo-pop.is-revealed {
	translate: none;
	transition: none;
}
#p_top .scroll-anime.has-photo-pop.is-pending > ul {
	opacity: 0;
	scale: .92;
}
#p_top .scroll-anime.has-photo-pop.is-revealed > ul {
	opacity: 1;
	transition: opacity .2s ease-out;
	animation: scroll-photo-pop .65s cubic-bezier(.2, .8, .2, 1) both;
	animation-delay: var(--scroll-delay, 0ms);
}
#p_top .scroll-anime.has-photo-pop.is-pending > dl > dt,
#p_top .scroll-anime.has-photo-pop.is-pending > dl > dd {
	opacity: 0;
}
#p_top .scroll-anime.has-photo-pop.is-revealed > dl > dt,
#p_top .scroll-anime.has-photo-pop.is-revealed > dl > dd {
	opacity: 1;
	transition: opacity .4s ease-out;
	transition-delay: .15s;
}
#p_top .scroll-anime.has-photo-pop.is-revealed > dl > dd {
	transition-delay: .25s;
}
#p_top .scroll-anime.has-concern.is-pending {
	translate: 0 8px;
}
#p_top .scroll-anime.has-concern.is-revealed {
	transition: opacity .25s ease-out, translate .35s ease-out;
	transition-delay: var(--scroll-delay, 0ms);
}
#p_top .scroll-anime.has-icon-pop.is-pending {
	translate: none;
	scale: .92;
}
#p_top .scroll-anime.has-icon-pop.is-revealed {
	translate: none;
	transition: opacity .2s ease-out;
	animation: scroll-photo-pop .55s ease-out both;
}
#p_top .scroll-anime.has-concern.is-pending > a::after {
	scale: .92;
}
#p_top .scroll-anime.has-concern.is-revealed > a::after {
	animation: scroll-photo-pop .55s ease-out both;
	animation-delay: var(--scroll-delay, 0ms);
}
#p_top .scroll-anime.has-trainer.is-pending,
#p_top .scroll-anime.has-trainer.is-revealed {
	opacity: 1;
	translate: none;
	transition: none;
}
#p_top .scroll-anime.has-trainer.is-pending .photo .img {
	opacity: 0;
	scale: .97;
}
#p_top .scroll-anime.has-trainer.is-revealed .photo .img {
	opacity: 1;
	scale: 1;
	transition: opacity .4s ease-out, scale .6s ease-out;
}
#p_top .scroll-anime.has-trainer.is-pending :is(.photo h3, .photo .button, .text h4, .text p, .text > dl) {
	opacity: 0;
}
#p_top .scroll-anime.has-trainer.is-revealed :is(.photo h3, .text h4) {
	opacity: 1;
	transition: opacity .4s ease-out;
	transition-delay: .15s;
}
#p_top .scroll-anime.has-trainer.is-revealed :is(.photo .button, .text p, .text > dl) {
	opacity: 1;
	transition: opacity .4s ease-out;
	transition-delay: .25s;
}
@keyframes scroll-pop {
	0% {
		opacity: 0;
		translate: 0 30px;
		scale: .92;
	}
	50% {
		opacity: 1;
		translate: 0 -8px;
		scale: 1.04;
	}
	75% {
		opacity: 1;
		translate: 0 3px;
		scale: .99;
	}
	100% {
		opacity: 1;
		translate: 0 0;
		scale: 1;
	}
}
@keyframes scroll-photo-pop {
	0% {
		scale: .92;
	}
	40% {
		scale: 1.04;
	}
	70% {
		scale: .99;
	}
	100% {
		scale: 1;
	}
}
#p_top #main.is-main-pending > .photo,
#p_top #main.is-main-pending .catch > :is(.sub, h2, .text),
#p_top #main.is-main-pending .catch::after,
#p_top #main.is-main-pending::after {
	opacity: 0;
}
#p_top #main.is-main-revealed > .photo {
	animation: main-fade .6s ease-out both;
}
#p_top #main.is-main-revealed > .photo img {
	animation: main-photo .9s ease-out both;
}
#p_top #main.is-main-revealed .catch > .sub {
	animation: main-curtain .8s cubic-bezier(.4, 0, .2, 1) .2s both;
}
#p_top #main.is-main-revealed .catch > h2 {
	animation: main-fade .45s ease-out .35s both;
}
#p_top #main.is-main-revealed .catch > .text {
	animation: main-fade .45s ease-out .5s both;
}
#p_top #main.has-main-paws .catch::after,
#p_top #main.has-main-paws::after {
	opacity: 0;
}
#p_top #main .main-paw-trail {
	width: 200px;
	height: 330px;
	position: absolute;
	z-index: 1;
	pointer-events: none;
}
#p_top #main .main-paw-top {
	top: -100px;
	right: 50px;
}
#p_top #main .main-paw-bottom {
	left: calc(52% - 104px);
	bottom: 10px;
}
#p_top #main .main-paw-trail .step {
	opacity: 0;
	transform-box: fill-box;
	transform-origin: center;
}
#p_top #main.is-main-revealed .main-paw-trail .step {
	animation-name: main-step;
	animation-duration: .24s;
	animation-timing-function: ease-out;
	animation-fill-mode: both;
}
@media only screen and (max-width: 679px) {
	#p_top #main .main-paw-trail {
		display: none;
	}
}
@keyframes main-step {
	0% {
		opacity: 0;
		scale: .75;
	}
	65% {
		opacity: 1;
		scale: 1.05;
	}
	100% {
		opacity: 1;
		scale: 1;
	}
}
@keyframes main-curtain {
	from {
		clip-path: inset(0 100% 0 0);
	}
	to {
		clip-path: inset(0);
	}
}
@keyframes main-fade {
	from {
		opacity: 0;
	}
	to {
		opacity: 1;
	}
}
@keyframes main-photo {
	from {
		scale: 1.035;
	}
	to {
		scale: 1;
	}
}
@keyframes main-paw {
	0% {
		opacity: 0;
		scale: .92;
	}
	60% {
		opacity: 1;
		scale: 1.03;
	}
	100% {
		opacity: 1;
		scale: 1;
	}
}
@media (prefers-reduced-motion: reduce) {
	#p_top #main .main-paw-trail {
		display: none;
	}
	#p_top #main.has-main-paws .catch::after,
	#p_top #main.has-main-paws::after {
		opacity: 1;
	}
	#p_top #main:is(.is-main-pending, .is-main-revealed) > .photo,
	#p_top #main:is(.is-main-pending, .is-main-revealed) > .photo img,
	#p_top #main:is(.is-main-pending, .is-main-revealed) .catch > :is(.sub, h2, .text),
	#p_top #main:is(.is-main-pending, .is-main-revealed) .catch::after,
	#p_top #main:is(.is-main-pending, .is-main-revealed)::after {
		opacity: 1;
		clip-path: none;
		translate: none;
		scale: none;
		animation: none;
	}
	#p_top .scroll-anime.is-pending,
	#p_top .scroll-anime.is-revealed,
	#p_top .scroll-anime.has-pop.is-pending,
	#p_top .scroll-anime.has-pop.is-revealed,
	#p_top .scroll-anime.has-quick-pop.is-pending,
	#p_top .scroll-anime.has-quick-pop.is-revealed,
	#p_top .scroll-anime.has-concern.is-pending,
	#p_top .scroll-anime.has-concern.is-revealed,
	#p_top .scroll-anime.has-icon-pop.is-pending,
	#p_top .scroll-anime.has-icon-pop.is-revealed,
	#p_top .scroll-anime.has-trainer.is-pending,
	#p_top .scroll-anime.has-trainer.is-revealed,
	#p_top .scroll-anime.has-trainer.is-pending :is(.photo .img, .photo h3, .photo .button, .text h4, .text p, .text > dl),
	#p_top .scroll-anime.has-trainer.is-revealed :is(.photo .img, .photo h3, .photo .button, .text h4, .text p, .text > dl),
	#p_top .scroll-anime.has-concern.is-pending > a::after,
	#p_top .scroll-anime.has-concern.is-revealed > a::after,
	#p_top .scroll-anime.has-photo-pop.is-pending,
	#p_top .scroll-anime.has-photo-pop.is-revealed,
	#p_top .scroll-anime.has-photo-pop.is-pending > ul,
	#p_top .scroll-anime.has-photo-pop.is-revealed > ul,
	#p_top .scroll-anime.has-photo-pop.is-pending > dl > dt,
	#p_top .scroll-anime.has-photo-pop.is-pending > dl > dd,
	#p_top .scroll-anime.has-photo-pop.is-revealed > dl > dt,
	#p_top .scroll-anime.has-photo-pop.is-revealed > dl > dd {
		opacity: 1;
		translate: none;
		scale: none;
		transition: none;
		animation: none;
	}
}