/* kai-misc.css: loaded after kai.css */

/* --------------------------------------------------------------------------
   Home slider image.
   The reference paints the backdrop on the slide with background-size 85% / 90% / 110% by 100%,
   anchored top right, which stretches it. Here the backdrop is a layer with the same
   box (same width, full height, anchored right) filled with cover, so nothing distorts.
   -------------------------------------------------------------------------- */
#featured .swiper-slide { background: var(--kai-bg) none !important; }
#featured .swiper-slide > .slide-bg {
	position: absolute;
	top: 0;
	right: 0;
	z-index: 0;
	width: 85%;
	height: 100%;
	background-color: #000;
	background-repeat: no-repeat;
	background-position: 50% 0;
	background-size: cover;
	pointer-events: none;
}
#featured .swiper-slide::before,
#featured .swiper-slide::after { z-index: 1; }
@media (max-width: 1617.9px) { #featured .swiper-slide > .slide-bg { width: 90%; } }
@media (max-width: 1259.9px) { #featured .swiper-slide > .slide-bg { width: 110%; } }
@media (max-width: 991.98px) { #featured .swiper-slide > .slide-bg { width: 140%; } }
@media (max-width: 767.98px) {
	/* Reference: 150% auto at 0 0 (already undistorted) */
	#featured .swiper-slide > .slide-bg { right: auto; left: 0; width: 150%; background-size: 100% auto; background-position: 0 0; }
}
@media (min-width: 2299.9px) { #featured .swiper-slide > .slide-bg { left: 50%; right: auto; width: 2000px; transform: translateX(-50%); } }

/* --------------------------------------------------------------------------
   Top Trending: the reference's claw (assets/images/claw-kai.svg) behind ranks 1-3.
   -------------------------------------------------------------------------- */
/* Reference: min-width 8rem, min-height 100%, top -1rem, left -.5rem, opacity .1;
   hover: opacity 1, top 0, left -1.5rem. No background-size, so the SVG (no width/height,
   only a viewBox) is fitted into the 8rem x row-height box like `contain`. */
.top-anime:not(.reco) .aitem:nth-child(-n+3)::after {
	top: calc(var(--kr, 14px) * -1);
	left: calc(var(--kr, 14px) * -.5);
	min-width: calc(var(--kr, 14px) * 8);
	min-height: 100%;
	background: url(../images/claw-kai.svg) no-repeat;
	background-size: auto;
	opacity: .1;
	transition: opacity .1s, left .1s, top .1s;
}
.top-anime:not(.reco) .aitem:nth-child(-n+3):hover::after { opacity: 1; top: 0; left: calc(var(--kr, 14px) * -1.5); }

/* --------------------------------------------------------------------------
   Home hero bookmark button (button.hero-bookmark, was a link to the series page)
   -------------------------------------------------------------------------- */
#featured button.info-btn.hero-bookmark { border: 0; border-radius: 0; box-shadow: none; cursor: pointer; line-height: 1.5; -webkit-appearance: none; appearance: none; }
#featured .hero-bookmark i { pointer-events: none; }
/* Reference .btn box on desktop: padding .5rem 1.5rem around a 1.5 line-height (58.8 x 47.6), 1rem gap after Watch Now. */
@media (min-width: 768px) {
	#featured button.info-btn.hero-bookmark { margin-left: 14px; padding: 12.6px 21px; }
}
#featured .hero-bookmark.marked { color: var(--kai-primary); }
#featured .hero-bookmark.marked:hover { color: var(--kai-green); }
#featured .hero-bookmark:focus-visible { outline: 2px solid var(--kai-green); outline-offset: 2px; }
@media (max-width: 767.98px) {
	#featured button.info-btn.hero-bookmark { border-radius: 8px; color: #fff; }
	#featured .hero-bookmark.marked { color: #fff; background: var(--kai-primary); }
	#featured .hero-bookmark.marked:hover { color: #fff; }
}

/* QA: member list folder tabs scroll instead of overflowing the page on tablets (6 tabs need ~810px) */
@media (max-width: 899.98px) {
	#user-folder { justify-content: flex-start; overflow-x: auto; scrollbar-width: none; }
	#user-folder::-webkit-scrollbar { display: none; }
	#user-folder > div { padding: 1rem; }
}

/* QA: keyboard focus ring for every interactive element that has no focus style of its own (kai.css never set one) */
a:focus-visible, button:focus-visible, summary:focus-visible, select:focus-visible, [role="button"]:focus-visible, [role="radio"]:focus-visible, [tabindex]:not(input):not(textarea):not([tabindex="-1"]):focus-visible {
	outline: 2px solid var(--kai-green) !important;
	outline-offset: 2px;
}
#header.kai-header #search .search-content:focus-within { box-shadow: 0 0 0 2px var(--kai-green); }
#header.kai-header #search .filter-link:focus-visible { outline-offset: -3px; border-radius: 10px; }
#header.kai-header #search .search-input:focus-visible { outline: 0; }