/* =========================================================================
   PlayRox "Vibes" — homepage reel cards + full-screen reel viewer
   ========================================================================= */

/* ---- Homepage card tap target ------------------------------------------ */
.vibes-item .reel-thumb { position: relative; }
.vibes-item .reel-thumb iframe { pointer-events: none; } /* tap opens the viewer */
.vibes-item__open {
	position: absolute; inset: 0; z-index: 3;
	display: flex; align-items: center; justify-content: center;
	border: 0; padding: 0; margin: 0; cursor: pointer;
	background: linear-gradient( to bottom, rgba(0,0,0,0) 55%, rgba(0,0,0,0.28) 100% );
	-webkit-tap-highlight-color: transparent;
}
.vibes-item__play {
	width: 50px; height: 50px; border-radius: 50%;
	display: flex; align-items: center; justify-content: center;
	background: rgba(0,0,0,0.5); color: #fff; font-size: 17px;
	backdrop-filter: blur(2px);
	transition: transform 0.16s ease, background 0.16s ease;
}
.vibes-item__open:hover .vibes-item__play { transform: scale(1.08); background: rgba(0,0,0,0.68); }

/* ---- Full-screen viewer ------------------------------------------------- */
html.plxv-locked { overflow: hidden; }

.plxv-viewer {
	position: fixed; inset: 0; z-index: 2000000;
	background: #000;
	opacity: 0; visibility: hidden;
	transition: opacity 0.25s ease, visibility 0.25s ease;
}
.plxv-viewer.is-open { opacity: 1; visibility: visible; }

.plxv-viewer__track {
	position: absolute; inset: 0;
	overflow-y: auto; overflow-x: hidden;
	scroll-snap-type: y mandatory;
	-webkit-overflow-scrolling: touch;
	scrollbar-width: none;
}
.plxv-viewer__track::-webkit-scrollbar { display: none; }

.plxv-slide {
	position: relative; width: 100%; height: 100%;
	scroll-snap-align: start; scroll-snap-stop: always;
	display: flex; align-items: center; justify-content: center;
}
.plxv-slide__frame {
	position: relative;
	width: min( 100%, calc( 100vh * 9 / 16 ) );
	height: 100%;
	background: #000;
	overflow: hidden;
}

/*
 * 100vh on a phone measures the viewport *including* the browser chrome, so
 * the slide ran taller than the visible area and left a black band under the
 * video. dvh tracks the actual visible height as the URL bar hides.
 */
@supports ( height: 100dvh ) {
	.plxv-slide__frame { width: min( 100%, calc( 100dvh * 9 / 16 ) ); }
	.plxv-viewer__track { height: 100dvh; }
}
/*
 * Embeds are scaled from the centre when a zoom is set. The player's own
 * black bars are pixels it painted inside its document — unreachable from
 * out here because the iframe is cross-origin — so the only way to lose them
 * is to push them past the edge of the frame.
 */
.plxv-slide__frame iframe {
	position: absolute;
	/* Anchored to the top, not the centre: these players lay their video out
	   from the top of their document and leave the bars underneath, so
	   scaling from the middle pushed the picture up and made the gap worse.
	   Top-anchored, the overflow falls off the bottom where the bars are. */
	top: 0;
	left: 50%;
	width: calc( 100% * var( --plxv-zoom, 1 ) );
	height: calc( 100% * var( --plxv-zoom, 1 ) );
	transform: translateX( -50% );
	border: 0;
	display: block;
}
.plxv-slide__spin {
	position: absolute; top: 50%; left: 50%;
	width: 44px; height: 44px; margin: -22px 0 0 -22px;
	border: 4px solid rgba(255,255,255,0.18);
	border-top-color: #fff; border-radius: 50%;
	animation: plxv-spin 0.8s linear infinite;
}
@keyframes plxv-spin { to { transform: rotate(360deg); } }

.plxv-viewer__close {
	position: fixed; top: 16px; right: 16px; z-index: 5;
	width: 44px; height: 44px; border-radius: 50%;
	background: rgba(0,0,0,0.5); color: #fff; border: 0;
	font-size: 20px; cursor: pointer;
	display: flex; align-items: center; justify-content: center;
}
.plxv-viewer__close:hover { background: rgba(0,0,0,0.75); }

.plxv-viewer__nav {
	position: fixed; right: 22px; z-index: 5;
	width: 46px; height: 46px; border-radius: 50%;
	background: rgba(0,0,0,0.5); color: #fff; border: 0; cursor: pointer;
	display: none; align-items: center; justify-content: center; font-size: 18px;
}
.plxv-viewer__nav:hover { background: rgba(0,0,0,0.75); }
@media ( min-width: 900px ) {
	.plxv-viewer__nav { display: flex; }
	.plxv-viewer__nav--up { top: calc( 50% - 56px ); }
	.plxv-viewer__nav--down { top: calc( 50% + 10px ); }
}

/* -------------------------------------------------------------------------
   Self-hosted videos
   ---------------------------------------------------------------------- */

/* Card preview: fills the tile exactly like the platform iframes do. The
   overlay button above it stays the tap target. */
.vibes-item__vid {
	position: absolute;
	inset: 0;
	width: 100%;
	height: 100%;
	object-fit: cover;
	background: #000;
	border: 0;
	pointer-events: none;
}

/* Viewer: fit the whole frame in, never crop the subject out of a reel. */
.plxv-slide__video {
	position: absolute;
	inset: 0;
	width: 100%;
	height: 100%;
	/* Fill the frame like every other reel app. `contain` letterboxed
	   anything that was not exactly 9:16. */
	object-fit: cover;
	background: #000;
	display: block;
}


/* -------------------------------------------------------------------------
   First-run swipe hint
   ---------------------------------------------------------------------- */

.plxv-hint {
	position: absolute;
	left: 50%;
	bottom: 12%;
	transform: translateX(-50%) translateY(8px);
	z-index: 12;
	display: flex;
	flex-direction: column;
	align-items: center;
	gap: 10px;
	padding: 14px 20px;
	border-radius: 16px;
	background: rgba(0, 0, 0, 0.6);
	-webkit-backdrop-filter: blur(10px);
	backdrop-filter: blur(10px);
	color: #fff;
	text-align: center;
	pointer-events: none;
	opacity: 0;
	transition: opacity 0.3s ease, transform 0.3s ease;
}

.plxv-hint.is-on {
	opacity: 1;
	transform: translateX(-50%) translateY(0);
}

.plxv-hint__hand {
	display: grid;
	place-items: center;
	width: 40px;
	height: 40px;
	border-radius: 50%;
	border: 2px solid rgba(255, 255, 255, 0.85);
	font-size: 15px;
	animation: plxv-hint-rise 1.5s ease-in-out infinite;
}

.plxv-hint__text {
	font-size: 13.5px;
	font-weight: 700;
	letter-spacing: 0.01em;
}

@keyframes plxv-hint-rise {
	0%, 100% { transform: translateY(6px); opacity: 0.7; }
	50%      { transform: translateY(-6px); opacity: 1; }
}

@media (prefers-reduced-motion: reduce) {
	.plxv-hint__hand { animation: none; }
}