/* CHPoki theme – motion layer (arcade-portal micro-interactions).
   Everything here is decorative: it degrades to a static page when JS is off
   and switches itself off under prefers-reduced-motion. */

:root{
	--ease-out:cubic-bezier(.22,.61,.36,1);
	--ease-back:cubic-bezier(.34,1.36,.64,1);
	--dur-1:.16s;
	--dur-2:.28s;
	--dur-3:.45s;
}

/* ---------- 1. Thumbnails fade in instead of popping ---------- */
.chpt-fade .tile__thumb img,
.chpt-fade .post-card__img img{
	opacity:0;
	transform:scale(1.03);
	transition:opacity var(--dur-3) var(--ease-out),transform var(--dur-3) var(--ease-out);
}
.chpt-fade .tile__thumb img.is-loaded,
.chpt-fade .post-card__img img.is-loaded{opacity:1;transform:none}

/* Shimmer placeholder behind an image that has not arrived yet.
   NOTE: never set `position` here – the classic skin positions .tile__thumb
   absolutely and overriding it collapses every thumbnail. Both skins already
   give it a positioned ancestor, which is all ::before needs. */
.tile__thumb{isolation:isolate}
.chpt-fade .tile__thumb::before{
	content:"";
	position:absolute;inset:0;z-index:-1;
	background:linear-gradient(100deg,rgba(255,255,255,0) 20%,rgba(255,255,255,.55) 50%,rgba(255,255,255,0) 80%),var(--bg-2,#e5e7ee);
	background-size:220% 100%,100% 100%;
	animation:chpt-shimmer 1.4s linear infinite;
	opacity:1;
	transition:opacity var(--dur-2) linear;
}
.tile__thumb.is-ready::before{opacity:0;animation:none}
@keyframes chpt-shimmer{from{background-position:180% 0,0 0}to{background-position:-80% 0,0 0}}

/* ---------- 2. Tiles: lift the card, zoom the art ---------- */
.tile{transition:transform var(--dur-1) var(--ease-out)}
.skin-rows .tile__thumb{
	transition:transform var(--dur-2) var(--ease-out),box-shadow var(--dur-2) var(--ease-out);
	will-change:transform;
}
.skin-rows .tile__thumb img{transition:opacity var(--dur-3) var(--ease-out),transform var(--dur-3) var(--ease-out)}
.skin-rows .tile:hover .tile__thumb,
.skin-rows .tile:focus-visible .tile__thumb{transform:translateY(-5px) scale(1.015)}
.skin-rows .tile:hover .tile__thumb img.is-loaded,
.skin-rows .tile:focus-visible .tile__thumb img.is-loaded{transform:scale(1.07)}
.skin-rows .tile:active .tile__thumb{transform:translateY(-1px) scale(.985);transition-duration:.08s}
.skin-rows .tile__title{transition:color var(--dur-1) var(--ease-out)}
.skin-rows .tile:hover .tile__title{color:var(--accent,#e8412b)}
.tile:focus-visible{outline:3px solid var(--accent,#e8412b);outline-offset:3px;border-radius:4px}

/* A soft glow ring that grows out of the thumbnail on hover */
.skin-rows .tile__thumb::after{
	content:"";
	position:absolute;inset:0;
	border-radius:inherit;
	box-shadow:inset 0 0 0 0 rgba(255,255,255,.85);
	transition:box-shadow var(--dur-2) var(--ease-out);
	pointer-events:none;
}
.skin-rows .tile:hover .tile__thumb::after{box-shadow:inset 0 0 0 3px rgba(255,255,255,.9)}

/* ---------- 3. Category blocks: sheen sweep + icon bounce ---------- */
.crow__cat{position:relative;overflow:hidden;transition:transform var(--dur-2) var(--ease-back),filter var(--dur-2) linear}
.crow__cat::after{
	content:"";
	position:absolute;top:-60%;left:-120%;
	width:60%;height:220%;
	background:linear-gradient(100deg,rgba(255,255,255,0),rgba(255,255,255,.35),rgba(255,255,255,0));
	transform:rotate(18deg);
	transition:left .55s var(--ease-out);
	pointer-events:none;
}
.crow__cat:hover::after{left:140%}
.crow__cat:hover{transform:translateY(-3px)}
.crow__icon{display:inline-block;transition:transform var(--dur-2) var(--ease-back)}
.crow__cat:hover .crow__icon{transform:translateY(-3px) rotate(-8deg) scale(1.12)}

/* ---------- 4. Rows reveal as you scroll ---------- */
/* Opt-in: the hidden state only exists once JS has confirmed it can reveal them. */
.chpt-reveal .crow,.chpt-reveal .section,.chpt-reveal .seo-text,.chpt-reveal .faq{
	opacity:0;
	transform:translateY(14px);
	transition:opacity var(--dur-3) var(--ease-out),transform var(--dur-3) var(--ease-out);
}
.chpt-reveal .crow.is-in,.chpt-reveal .section.is-in,.chpt-reveal .seo-text.is-in,.chpt-reveal .faq.is-in{opacity:1;transform:none}

/* ---------- 5. Scroll strips: nicer arrows + drag cursor ---------- */
.crow__strip{scroll-behavior:smooth;cursor:grab}
.crow__strip.is-dragging{cursor:grabbing;scroll-behavior:auto;scroll-snap-type:none}
.crow__strip.is-dragging .tile{pointer-events:none}
.crow__nav{
	opacity:0;
	transform:scale(.86);
	transition:opacity var(--dur-2) var(--ease-out),transform var(--dur-2) var(--ease-back),background var(--dur-1) linear,color var(--dur-1) linear;
}
.crow__wrap:hover .crow__nav,.crow__nav:focus-visible{opacity:1;transform:none}
.crow__nav:hover{background:var(--accent,#e8412b);color:#fff;transform:scale(1.08)}
.crow__wrap.at-start .crow__nav--prev,.crow__wrap.at-end .crow__nav--next{opacity:0;transform:scale(.8);pointer-events:none}
/* soft fade at the edges so the strip reads as continuing */
.crow__wrap::before,.crow__wrap::after{
	content:"";position:absolute;top:0;bottom:6px;width:40px;z-index:2;pointer-events:none;
	transition:opacity var(--dur-2) linear;
}
.crow__wrap::before{left:0;background:linear-gradient(90deg,var(--bg,#f2f3f6),transparent)}
.crow__wrap::after{right:0;background:linear-gradient(270deg,var(--bg,#f2f3f6),transparent)}
.crow__wrap.at-start::before{opacity:0}
.crow__wrap.at-end::after{opacity:0}

/* ---------- 6. Header ---------- */
.site-header{transition:box-shadow var(--dur-2) var(--ease-out),background var(--dur-2) linear}
.site-header.is-stuck{box-shadow:0 6px 24px rgba(0,0,0,.32)}
.search input{transition:background var(--dur-2) var(--ease-out),box-shadow var(--dur-2) var(--ease-out),border-color var(--dur-2) linear}
.skin-rows .search input:focus{box-shadow:0 0 0 3px rgba(232,65,43,.35)}
.icon-btn,.brand{transition:transform var(--dur-1) var(--ease-out),background var(--dur-1) linear}
.icon-btn:hover{transform:translateY(-2px)}
.brand:hover .brand__mark{transform:rotate(-6deg) scale(1.06)}
.brand__mark{transition:transform var(--dur-2) var(--ease-back)}

/* ---------- 7. Drawer ---------- */
.drawer__scrim{animation:chpt-fade var(--dur-2) var(--ease-out)}
.drawer__panel{animation:chpt-drawer-in var(--dur-3) var(--ease-out)}
@keyframes chpt-fade{from{opacity:0}to{opacity:1}}
@keyframes chpt-drawer-in{from{transform:translateX(-22px);opacity:0}to{transform:none;opacity:1}}
.drawer__list li{animation:chpt-row-in .32s var(--ease-out) both}
.drawer__list li:nth-child(1){animation-delay:.02s}
.drawer__list li:nth-child(2){animation-delay:.04s}
.drawer__list li:nth-child(3){animation-delay:.06s}
.drawer__list li:nth-child(4){animation-delay:.08s}
.drawer__list li:nth-child(5){animation-delay:.10s}
.drawer__list li:nth-child(6){animation-delay:.12s}
.drawer__list li:nth-child(7){animation-delay:.14s}
.drawer__list li:nth-child(8){animation-delay:.16s}
.drawer__list li:nth-child(n+9){animation-delay:.18s}
@keyframes chpt-row-in{from{opacity:0;transform:translateX(-10px)}to{opacity:1;transform:none}}
.drawer__list a{transition:background var(--dur-1) linear,transform var(--dur-1) var(--ease-out),color var(--dur-1) linear}
.drawer__list a:hover{transform:translateX(4px)}

/* ---------- 8. Player ---------- */
.chp-player__play{position:relative;transition:transform var(--dur-1) var(--ease-out),box-shadow var(--dur-1) var(--ease-out)}
.chp-player__play::after{
	content:"";
	position:absolute;inset:-10px;
	border-radius:999px;
	border:2px solid rgba(255,255,255,.5);
	opacity:0;
	animation:chpt-pulse 2.4s var(--ease-out) infinite;
	pointer-events:none;
}
@keyframes chpt-pulse{0%{transform:scale(.92);opacity:.55}70%{transform:scale(1.18);opacity:0}100%{opacity:0}}
.chp-player__play:hover{transform:translateY(-3px) scale(1.04)}
.chp-player__play:active{transform:translateY(1px) scale(.98)}
.chp-player__cover{transition:opacity var(--dur-3) var(--ease-out),transform var(--dur-3) var(--ease-out)}
.chp-player.is-starting .chp-player__cover{opacity:0;transform:scale(1.04)}
.chp-player__thumb{animation:chpt-float 5s ease-in-out infinite}
@keyframes chpt-float{0%,100%{transform:translateY(0)}50%{transform:translateY(-6px)}}
.chp-player__btn,.chp-player__close{transition:transform var(--dur-1) var(--ease-out),background var(--dur-1) linear}
.chp-player__btn:hover,.chp-player__close:hover{transform:scale(1.08)}

/* ---------- 9. Navigation progress bar ---------- */
#chpt-progress{
	position:fixed;top:0;left:0;height:3px;width:0;z-index:9999;
	background:linear-gradient(90deg,var(--accent,#e8412b),var(--accent-2,#ff8a3d));
	box-shadow:0 0 10px rgba(232,65,43,.6);
	opacity:0;
	transition:width .2s var(--ease-out),opacity .25s linear;
	pointer-events:none;
}
#chpt-progress.is-on{opacity:1}

/* ---------- 10. Chips, tags, buttons, pager ---------- */
.chip,.tag,.pager a,.section__more,.sort-tabs a,.cat-cloud a{
	transition:transform var(--dur-1) var(--ease-out),background var(--dur-1) linear,color var(--dur-1) linear,box-shadow var(--dur-1) var(--ease-out);
}
.chip:hover,.tag:hover,.pager a:hover,.section__more:hover,.sort-tabs a:hover,.cat-cloud a:hover{transform:translateY(-2px)}
.chip:active,.tag:active,.pager a:active,.section__more:active{transform:translateY(0)}

/* ---------- 11. FAQ accordion ---------- */
.faq{margin-top:22px}
.faq__item{border-bottom:1px solid var(--line,#e2e4ea)}
.faq__item:last-child{border-bottom:0}
.faq__q{
	display:flex;align-items:center;gap:12px;
	padding:16px 4px;cursor:pointer;list-style:none;
	font-weight:800;font-size:16.5px;line-height:1.35;color:var(--ink,#15171c);
	transition:color var(--dur-1) linear;
}
.faq__q::-webkit-details-marker{display:none}
.faq__q:hover{color:var(--accent,#e8412b)}
.faq__q::after{
	content:"";margin-left:auto;flex:0 0 auto;
	width:10px;height:10px;border-right:2.5px solid currentColor;border-bottom:2.5px solid currentColor;
	transform:rotate(45deg) translateY(-2px);
	transition:transform var(--dur-2) var(--ease-back);
}
.faq__item[open] .faq__q::after{transform:rotate(-135deg) translateY(2px)}
.faq__item[open] .faq__a{animation:chpt-acc var(--dur-3) var(--ease-out)}
@keyframes chpt-acc{from{opacity:0;transform:translateY(-8px)}to{opacity:1;transform:none}}
.faq__a p{margin:0 0 16px;color:var(--ink-2,#4a4f5c);line-height:1.65}

/* ---------- 12. Back to top ---------- */
#chpt-top{
	position:fixed;right:18px;bottom:18px;z-index:60;
	width:44px;height:44px;display:grid;place-items:center;
	border:0;border-radius:50%;cursor:pointer;
	background:var(--accent,#e8412b);color:#fff;font-size:20px;line-height:1;
	box-shadow:0 8px 22px rgba(20,22,30,.3);
	opacity:0;transform:translateY(14px) scale(.9);pointer-events:none;
	transition:opacity var(--dur-2) var(--ease-out),transform var(--dur-2) var(--ease-back);
}
#chpt-top.is-on{opacity:1;transform:none;pointer-events:auto}
#chpt-top:hover{transform:translateY(-3px) scale(1.06)}

/* ---------- Respect the user's motion setting ---------- */
@media (prefers-reduced-motion:reduce){
	*,*::before,*::after{
		animation-duration:.001ms !important;
		animation-iteration-count:1 !important;
		transition-duration:.001ms !important;
		scroll-behavior:auto !important;
	}
	.chpt-reveal .crow,.chpt-reveal .section,.chpt-reveal .seo-text,.chpt-reveal .faq{opacity:1;transform:none}
	.chpt-fade .tile__thumb img,.chpt-fade .post-card__img img{opacity:1;transform:none}
	.chpt-fade .tile__thumb::before{display:none}
	.crow__nav{opacity:1;transform:none}
}