/* Reelio — frontend. Lightweight, no dependencies, inherits theme fonts. */

.reelio {
	--reelio-accent: #6C5CE7;
	--reelio-gap: 16px;
	--reelio-radius: 18px;
	/* Active column count derives from per-device vars set inline. */
	--reelio-cols-d: 3;
	--reelio-cols-t: 2;
	--reelio-cols-m: 1;
	--reelio-cols: var(--reelio-cols-d);
	--reelio-card-bg: #0d0f14;
	--reelio-ring: color-mix(in srgb, var(--reelio-accent) 45%, transparent);
	position: relative;
	width: 100%;
	box-sizing: border-box;
	-webkit-tap-highlight-color: transparent;
}
.reelio *,
.reelio *::before,
.reelio *::after { box-sizing: border-box; }

/* ---------- Grid ---------- */
.reelio--grid .reelio-grid {
	display: grid;
	grid-template-columns: repeat(var(--reelio-cols), minmax(0, 1fr));
	gap: var(--reelio-gap);
}

/* ---------- Masonry (CSS columns) ---------- */
.reelio--masonry .reelio-grid {
	column-count: var(--reelio-cols);
	column-gap: var(--reelio-gap);
}
.reelio--masonry .reelio-card {
	break-inside: avoid;
	margin-bottom: var(--reelio-gap);
	display: inline-block;
	width: 100%;
}

/* ---------- Carousel ---------- */
.reelio--carousel .reelio-track {
	display: flex;
	gap: var(--reelio-gap);
	overflow-x: auto;
	scroll-snap-type: x mandatory;
	scroll-behavior: smooth;
	padding-bottom: 6px;
	scrollbar-width: none;
}
.reelio--carousel .reelio-track::-webkit-scrollbar { display: none; }
.reelio--carousel .reelio-card {
	flex: 0 0 calc((100% - (var(--reelio-cols) - 1) * var(--reelio-gap)) / var(--reelio-cols));
	scroll-snap-align: start;
}
.reelio-nav {
	position: absolute;
	top: 50%;
	transform: translateY(-50%);
	width: 44px;
	height: 44px;
	border: 0;
	border-radius: 50%;
	background: rgba(255,255,255,.92);
	color: #111;
	display: grid;
	place-items: center;
	cursor: pointer;
	box-shadow: 0 6px 22px rgba(0,0,0,.18);
	z-index: 3;
	transition: opacity .2s ease, transform .2s ease;
	backdrop-filter: blur(6px);
}
.reelio-nav:hover { transform: translateY(-50%) scale(1.06); }
.reelio-nav--prev { left: 8px; }
.reelio-nav--next { right: 8px; }
.reelio-nav[hidden] { display: none; }

/* ---------- Reel (vertical, full-bleed feed) ---------- */
.reelio--reel .reelio-grid {
	display: flex;
	flex-direction: column;
	align-items: center;
	gap: var(--reelio-gap);
}
.reelio--reel .reelio-card {
	width: min(420px, 100%);
}
.reelio--reel .reelio-card--youtube.reelio-card--landscape { width: min(720px, 100%); }

/* ---------- Card ---------- */
.reelio-card {
	position: relative;
	cursor: pointer;
	outline: none;
	transition: transform .35s cubic-bezier(.2,.7,.2,1);
}
.reelio.has-shadow .reelio-card .reelio-media {
	box-shadow: 0 10px 30px -12px rgba(0,0,0,.35);
}
.reelio-card:focus-visible { border-radius: var(--reelio-radius); box-shadow: 0 0 0 3px var(--reelio-ring); }
@media (hover: hover) {
	.reelio-card:hover { transform: translateY(-3px); }
}

.reelio-media {
	position: relative;
	width: 100%;
	aspect-ratio: var(--reelio-aspect, var(--reelio-card-aspect, 16/9));
	border-radius: var(--reelio-radius);
	overflow: hidden;
	background: var(--reelio-card-bg);
	isolation: isolate;
}
.reelio-thumb {
	position: absolute;
	inset: 0;
	width: 100%;
	height: 100%;
	object-fit: cover;
	display: block;
	transition: transform .6s cubic-bezier(.2,.7,.2,1), filter .3s ease;
}
.reelio-thumb--empty {
	display: grid;
	place-items: center;
	color: rgba(255,255,255,.5);
	background: linear-gradient(135deg, #12141b, #1c1f2a);
}
@media (hover: hover) {
	.reelio-card:hover .reelio-thumb { transform: scale(1.05); }
}

/* Play affordance */
.reelio-play {
	position: absolute;
	left: 50%;
	top: 50%;
	transform: translate(-50%, -50%);
	width: 58px;
	height: 58px;
	border-radius: 50%;
	display: grid;
	place-items: center;
	color: #fff;
	background: color-mix(in srgb, var(--reelio-accent) 88%, #000 12%);
	box-shadow: 0 8px 24px color-mix(in srgb, var(--reelio-accent) 45%, transparent);
	z-index: 2;
	transition: transform .25s ease, opacity .25s ease;
	padding-left: 3px;
}
.reelio-play svg { display: block; }
@media (hover: hover) {
	.reelio-card:hover .reelio-play { transform: translate(-50%, -50%) scale(1.08); }
}

/* Platform badge */
.reelio-badge {
	position: absolute;
	top: 10px;
	right: 10px;
	width: 30px;
	height: 30px;
	border-radius: 9px;
	display: grid;
	place-items: center;
	color: #fff;
	background: rgba(10,10,12,.42);
	backdrop-filter: blur(8px);
	z-index: 2;
}

/* Scroll-play live slot */
.reelio-live {
	position: absolute;
	inset: 0;
	z-index: 1;
	opacity: 0;
	transition: opacity .35s ease;
	pointer-events: none;
}
.reelio-live iframe,
.reelio-live video {
	position: absolute;
	inset: 0;
	width: 100%;
	height: 100%;
	border: 0;
	object-fit: cover;
}
/* Self-hosted first-frame poster used when no featured image is set. */
.reelio-thumb--video {
	position: absolute;
	inset: 0;
	width: 100%;
	height: 100%;
	object-fit: cover;
}
.reelio-card.is-playing .reelio-live { opacity: 1; }
.reelio-card.is-playing .reelio-play,
.reelio-card.is-playing .reelio-thumb { opacity: 0; }

/* Titles / captions (below media, never over it) */
.reelio-title {
	margin: .7em 0 .1em;
	font-size: .98rem;
	line-height: 1.3;
	font-weight: 600;
}
.reelio-caption {
	margin: 0;
	font-size: .86rem;
	line-height: 1.45;
	opacity: .72;
}

.reelio-empty {
	padding: 16px 18px;
	border: 1px dashed rgba(120,120,140,.5);
	border-radius: 12px;
	font-size: .9rem;
	opacity: .8;
}

/* ---------- Lightbox ---------- */
.reelio-lightbox {
	position: fixed;
	inset: 0;
	z-index: 999999;
	display: block;
	background: #000;
	opacity: 0;
	visibility: hidden;         /* fully out of the way when closed */
	pointer-events: none;       /* <-- the fix: never trap taps/scroll when closed */
	transition: opacity .3s ease, visibility .3s ease;
	padding: 0;
}
.reelio-lightbox.is-open {
	opacity: 1;
	visibility: visible;
	pointer-events: auto;
}
.reelio-lightbox__stage {
	position: relative;
	width: auto;
	max-width: min(96vw, 1200px);
	max-height: 88vh;
	transform: scale(.96);
	transition: transform .32s cubic-bezier(.2,.8,.2,1);
	border-radius: 20px;
	overflow: hidden;
	background: #000;
	box-shadow: 0 30px 80px -20px rgba(0,0,0,.7);
}
.reelio-lightbox.is-open .reelio-lightbox__stage { transform: scale(1); }

/* Portrait player: tall and narrow, like the app */
.reelio-lightbox__stage[data-orientation="portrait"] {
	width: min(440px, 94vw);
	aspect-ratio: 9 / 16;
	height: min(88vh, calc(94vw * 16 / 9));
}
/* Landscape player */
.reelio-lightbox__stage[data-orientation="landscape"] {
	width: min(1100px, 94vw);
	aspect-ratio: 16 / 9;
}
.reelio-lightbox__stage iframe {
	position: absolute;
	inset: 0;
	width: 100%;
	height: 100%;
	border: 0;
}

.reelio-lightbox__close {
	position: fixed;
	top: max(14px, env(safe-area-inset-top));
	right: 14px;
	width: 38px;
	height: 38px;
	border: 0;
	border-radius: 50%;
	background: rgba(20,20,26,.55);
	color: #fff;
	display: grid;
	place-items: center;
	cursor: pointer;
	z-index: 6;
	backdrop-filter: blur(8px);
	transition: background .2s ease, transform .2s ease;
}
.reelio-lightbox__close:hover { background: rgba(20,20,26,.85); transform: scale(1.06); }
.reelio-lightbox__close svg { width: 18px; height: 18px; }

/* Progress dots on the side (which video in the feed) */
.reelio-lightbox__dots {
	position: fixed;
	right: 12px;
	top: 50%;
	transform: translateY(-50%);
	display: flex;
	flex-direction: column;
	gap: 7px;
	z-index: 5;
}
.reelio-lightbox__dots i {
	width: 6px; height: 6px; border-radius: 50%;
	background: rgba(255,255,255,.35);
	transition: background .25s ease, transform .25s ease;
}
.reelio-lightbox__dots i.is-active { background: #fff; transform: scale(1.5); }
@media (max-width: 600px) { .reelio-lightbox__dots { display: none; } }

/* Action rail (fullscreen / rotate) — appears for landscape on small screens */
.reelio-lightbox__actions {
	position: absolute;
	right: 12px;
	bottom: 12px;
	display: flex;
	gap: 8px;
	z-index: 4;
}
.reelio-act {
	width: 40px;
	height: 40px;
	border: 0;
	border-radius: 12px;
	background: rgba(20,20,26,.55);
	color: #fff;
	display: grid;
	place-items: center;
	cursor: pointer;
	backdrop-filter: blur(8px);
	transition: background .2s ease, transform .2s ease;
}
.reelio-act:hover { background: rgba(20,20,26,.8); transform: translateY(-2px); }

/* Rotate hint pill for landscape on portrait viewports */
.reelio-rotate-hint {
	position: absolute;
	left: 50%;
	bottom: 14px;
	transform: translateX(-50%);
	display: inline-flex;
	align-items: center;
	gap: 8px;
	padding: 8px 14px;
	border-radius: 999px;
	background: rgba(20,20,26,.66);
	color: #fff;
	font-size: .82rem;
	backdrop-filter: blur(8px);
	z-index: 4;
	animation: reelio-pulse 2.4s ease-in-out infinite;
	max-width: 84%;
}
.reelio-rotate-hint svg { animation: reelio-tip 2.4s ease-in-out infinite; }
@keyframes reelio-pulse { 0%,100% { opacity: .85; } 50% { opacity: 1; } }
@keyframes reelio-tip { 0%,70%,100% { transform: rotate(0); } 82% { transform: rotate(90deg); } }

/* ---------- Responsive columns (per device) ----------
   The author sets how many columns show on tablet and phone.
   Redefining --reelio-cols cascades to grid, masonry AND carousel. */
@media (max-width: 1024px) {
	.reelio { --reelio-cols: var(--reelio-cols-t); }
	.reelio-play { width: 52px; height: 52px; }
}
@media (max-width: 767px) {
	.reelio { --reelio-cols: var(--reelio-cols-m); }
	.reelio-play { width: 48px; height: 48px; }
	.reelio-nav { display: none; }
}

/* ---------- Per-device layout overrides ----------
   Both the grid and the carousel share the .reelio-items hook, so a base
   layout can switch to another form at a breakpoint with no markup change.
   Mobile rules come after tablet rules, so a phone inherits the tablet
   choice unless it sets its own. */

/* -- to carousel -- */
.reelio--to-carousel {
	display: flex;
	flex-direction: row;
	align-items: flex-start;
	gap: var(--reelio-gap);
	column-count: auto;
	grid-template-columns: none;
	overflow-x: auto;
	scroll-snap-type: x mandatory;
	scroll-behavior: smooth;
	-webkit-overflow-scrolling: touch;
	scrollbar-width: none;
	padding-bottom: 4px;
}
.reelio--to-carousel::-webkit-scrollbar { display: none; }
.reelio--to-carousel > .reelio-card {
	flex: 0 0 calc((100% - (var(--reelio-cols) - 1) * var(--reelio-gap)) / var(--reelio-cols));
	width: auto;
	margin-bottom: 0;
	scroll-snap-align: start;
	display: block;
}
/* -- to grid -- */
.reelio--to-grid {
	display: grid;
	grid-template-columns: repeat(var(--reelio-cols), minmax(0, 1fr));
	gap: var(--reelio-gap);
	column-count: auto;
	overflow: visible;
	scroll-snap-type: none;
}
.reelio--to-grid > .reelio-card { flex: none; width: auto; margin-bottom: 0; display: block; }
/* -- to reel -- */
.reelio--to-reel {
	display: flex;
	flex-direction: column;
	align-items: center;
	gap: var(--reelio-gap);
	column-count: auto;
	grid-template-columns: none;
	overflow: visible;
	scroll-snap-type: none;
}
.reelio--to-reel > .reelio-card { flex: none; width: min(440px, 100%); margin-bottom: 0; display: block; }

@media (max-width: 1024px) {
	.reelio-t--carousel .reelio-items { display: flex; flex-direction: row; align-items: flex-start; gap: var(--reelio-gap); column-count: auto; grid-template-columns: none; overflow-x: auto; scroll-snap-type: x mandatory; -webkit-overflow-scrolling: touch; scrollbar-width: none; padding-bottom: 4px; }
	.reelio-t--carousel .reelio-items::-webkit-scrollbar { display: none; }
	.reelio-t--carousel .reelio-items > .reelio-card { flex: 0 0 calc((100% - (var(--reelio-cols) - 1) * var(--reelio-gap)) / var(--reelio-cols)); width: auto; margin-bottom: 0; scroll-snap-align: start; display: block; }
	.reelio-t--grid .reelio-items { display: grid; grid-template-columns: repeat(var(--reelio-cols), minmax(0,1fr)); gap: var(--reelio-gap); column-count: auto; overflow: visible; scroll-snap-type: none; }
	.reelio-t--grid .reelio-items > .reelio-card { flex: none; width: auto; margin-bottom: 0; display: block; }
	.reelio-t--reel .reelio-items { display: flex; flex-direction: column; align-items: center; gap: var(--reelio-gap); column-count: auto; grid-template-columns: none; overflow: visible; scroll-snap-type: none; }
	.reelio-t--reel .reelio-items > .reelio-card { flex: none; width: min(440px,100%); margin-bottom: 0; display: block; }
}
@media (max-width: 767px) {
	.reelio-m--carousel .reelio-items { display: flex; flex-direction: row; align-items: flex-start; gap: var(--reelio-gap); column-count: auto; grid-template-columns: none; overflow-x: auto; scroll-snap-type: x mandatory; -webkit-overflow-scrolling: touch; scrollbar-width: none; padding-bottom: 4px; }
	.reelio-m--carousel .reelio-items::-webkit-scrollbar { display: none; }
	.reelio-m--carousel .reelio-items > .reelio-card { flex: 0 0 calc((100% - (var(--reelio-cols) - 1) * var(--reelio-gap)) / var(--reelio-cols)); width: auto; margin-bottom: 0; scroll-snap-align: start; display: block; }
	.reelio-m--grid .reelio-items { display: grid; grid-template-columns: repeat(var(--reelio-cols), minmax(0,1fr)); gap: var(--reelio-gap); column-count: auto; overflow: visible; scroll-snap-type: none; }
	.reelio-m--grid .reelio-items > .reelio-card { flex: none; width: auto; margin-bottom: 0; display: block; }
	.reelio-m--reel .reelio-items { display: flex; flex-direction: column; align-items: center; gap: var(--reelio-gap); column-count: auto; grid-template-columns: none; overflow: visible; scroll-snap-type: none; }
	.reelio-m--reel .reelio-items > .reelio-card { flex: none; width: min(440px,100%); margin-bottom: 0; display: block; }
}

/* ---------- Lightbox reel feed ---------- */
.reelio-lightbox { padding: 0; display: block; }
.reelio-lightbox__feed {
	position: absolute;
	inset: 0;
	height: 100%;
	overflow-y: auto;
	overflow-x: hidden;
	scroll-snap-type: y mandatory;
	overscroll-behavior: contain;
	-webkit-overflow-scrolling: touch;
	scrollbar-width: none;
}
.reelio-lightbox__feed::-webkit-scrollbar { display: none; }
.reelio-slide {
	position: relative;
	height: 100%;
	min-height: 100%;
	scroll-snap-align: start;
	scroll-snap-stop: always;
	display: grid;
	place-items: center;
	padding: 0;
	box-sizing: border-box;
}
/* Each slide fills the screen on black; the stage matches the video's shape
   (9:16 or 16:9) and is centered — like Facebook / Instagram, never stretched. */
.reelio-slide__stage {
	position: relative;
	background: #000;
	border-radius: 0;
	overflow: hidden;
	opacity: 1;
	transition: opacity .35s ease;
}
.reelio-slide:not(.is-active) .reelio-slide__stage { opacity: .45; }
.reelio-slide__stage[data-orientation="portrait"] {
	aspect-ratio: 9 / 16;
	height: min(100dvh, calc(100vw * 16 / 9));
	width: auto;
	max-width: 100vw;
}
.reelio-slide__stage[data-orientation="landscape"] {
	aspect-ratio: 16 / 9;
	width: min(100vw, calc(100dvh * 16 / 9));
	height: auto;
	max-height: 100dvh;
}
.reelio-slide__stage iframe { position: absolute; inset: 0; width: 100%; height: 100%; border: 0; }
.reelio-slide__mount { position: absolute; inset: 0; z-index: 1; }
.reelio-slide__mount iframe { position: absolute; inset: 0; width: 100%; height: 100%; border: 0; }
.reelio-video { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: contain; background: #000; }
/* Facebook SDK player fills the aspect-correct stage */
.reelio-slide__mount .fb-video { position: absolute; inset: 0; display: grid; place-items: center; width: 100%; height: 100%; }
.reelio-slide__mount .fb-video > span,
.reelio-slide__mount .fb-video iframe { width: 100% !important; height: 100% !important; }

/* Placeholder shown before the active slide's player mounts. */
.reelio-slide__poster {
	position: absolute; inset: 0;
	background-size: cover; background-position: center;
	display: grid; place-items: center;
	z-index: 2;
	transition: opacity .35s ease;
}
.reelio-slide__poster::after {
	content: ""; position: absolute; inset: 0; background: rgba(0,0,0,.25);
}
.reelio-slide.is-ready .reelio-slide__poster,
.reelio-slide.is-ready .reelio-slide__spin { opacity: 0; pointer-events: none; }

/* Loading spinner */
.reelio-slide__spin {
	position: absolute; inset: 0; z-index: 2;
	display: grid; place-items: center;
	transition: opacity .3s ease;
}
.reelio-slide__spin span {
	width: 38px; height: 38px; border-radius: 50%;
	border: 3px solid rgba(255,255,255,.25);
	border-top-color: #fff;
	animation: reelio-spin .8s linear infinite;
}
@keyframes reelio-spin { to { transform: rotate(360deg); } }

/* Title / caption overlay (reels-style) */
.reelio-slide__meta {
	position: absolute; left: 0; right: 0; bottom: 0; z-index: 3;
	padding: 40px 16px calc(16px + env(safe-area-inset-bottom));
	background: linear-gradient(to top, rgba(0,0,0,.72), rgba(0,0,0,0));
	color: #fff; pointer-events: none;
	opacity: 0; transform: translateY(6px);
	transition: opacity .4s ease .1s, transform .4s ease .1s;
}
.reelio-slide.is-active .reelio-slide__meta { opacity: 1; transform: none; }
/* Self-hosted player has a control bar; lift the caption above it. */
.reelio-slide.is-native .reelio-slide__meta { bottom: calc(44px + env(safe-area-inset-bottom)); padding-bottom: 10px; background: none; }
.reelio-slide__title { margin: 0 0 3px; font-size: .98rem; font-weight: 600; line-height: 1.3; text-shadow: 0 1px 6px rgba(0,0,0,.5); }
.reelio-slide__caption { margin: 0; font-size: .85rem; line-height: 1.4; opacity: .82; text-shadow: 0 1px 6px rgba(0,0,0,.5);
	display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; }

/* Mute / unmute toggle */
/* Top-left tools cluster: Auto + Mute */
.reelio-lightbox__tools {
	position: fixed;
	top: max(14px, env(safe-area-inset-top));
	left: 14px;
	display: flex;
	align-items: center;
	gap: 8px;
	z-index: 6;
}
.reelio-lightbox__mute {
	width: 38px; height: 38px;
	border: 0; border-radius: 50%;
	background: rgba(20,20,26,.55); color: #fff;
	display: grid; place-items: center; cursor: pointer;
	backdrop-filter: blur(8px);
	transition: background .2s ease, transform .2s ease;
}
.reelio-lightbox__mute:hover { background: rgba(20,20,26,.85); transform: scale(1.06); }
.reelio-lightbox__mute svg { width: 20px; height: 20px; }

.reelio-lightbox__auto {
	height: 38px;
	padding: 0 13px;
	border: 0; border-radius: 20px;
	background: rgba(20,20,26,.55); color: #fff;
	display: inline-flex; align-items: center; gap: 8px; cursor: pointer;
	font: 600 12px/1 inherit;
	backdrop-filter: blur(8px);
	transition: background .2s ease;
}
.reelio-lightbox__auto b { font-weight: 600; letter-spacing: .02em; opacity: .9; }
.reelio-switch {
	position: relative; display: inline-block;
	width: 32px; height: 18px; border-radius: 10px;
	background: rgba(255,255,255,.28);
	transition: background .2s ease;
	flex: 0 0 auto;
}
.reelio-switch i {
	position: absolute; top: 2px; left: 2px;
	width: 14px; height: 14px; border-radius: 50%;
	background: #fff;
	transition: transform .2s ease;
}
.reelio-lightbox__auto.is-on .reelio-switch { background: var(--reelio-accent, #6C5CE7); }
.reelio-lightbox__auto.is-on .reelio-switch i { transform: translateX(14px); }
.reelio-lightbox__auto.is-on b { opacity: 1; }

/* ---------- Custom self-hosted video player ---------- */
.reelio-vc__tap {
	position: absolute; inset: 0; z-index: 3;
	background: transparent; border: 0; cursor: pointer;
	-webkit-tap-highlight-color: transparent;
}
.reelio-vc__center {
	position: absolute; top: 50%; left: 50%;
	transform: translate(-50%, -50%) scale(1);
	width: 74px; height: 74px; border-radius: 50%;
	background: rgba(15,16,22,.42); color: #fff;
	display: grid; place-items: center; z-index: 4;
	backdrop-filter: blur(6px);
	opacity: 0; pointer-events: none;
	transition: opacity .25s ease, transform .25s ease;
}
.reelio-vc__center svg { width: 34px; height: 34px; margin-left: 3px; }
/* Center glyph only while paused */
.reelio-slide:not(.is-playing) .reelio-vc__center { opacity: 1; }

.reelio-vc__bar {
	position: absolute; left: 0; right: 0; bottom: 0; z-index: 5;
	display: flex; align-items: center; gap: 10px;
	padding: 22px 14px calc(12px + env(safe-area-inset-bottom));
	background: linear-gradient(to top, rgba(0,0,0,.55), rgba(0,0,0,0));
	opacity: 0; transform: translateY(6px);
	transition: opacity .25s ease, transform .25s ease;
	pointer-events: none;
}
.reelio-slide.is-controls .reelio-vc__bar,
.reelio-slide:not(.is-playing) .reelio-vc__bar { opacity: 1; transform: none; pointer-events: auto; }
.reelio-vc__bar button {
	border: 0; background: transparent; color: #fff; cursor: pointer;
	display: grid; place-items: center; padding: 0; flex: 0 0 auto;
}
.reelio-vc__play svg { width: 22px; height: 22px; }
.reelio-vc__fs svg { width: 19px; height: 19px; opacity: .9; }
.reelio-vc__time { color: #fff; font: 500 12px/1 inherit; opacity: .9; flex: 0 0 auto; font-variant-numeric: tabular-nums; }
.reelio-vc__prog {
	position: relative; flex: 1 1 auto; height: 16px;
	display: flex; align-items: center; cursor: pointer; touch-action: none;
}
.reelio-vc__prog::before {
	content: ""; position: absolute; left: 0; right: 0; height: 3px; border-radius: 3px;
	background: rgba(255,255,255,.3);
}
.reelio-vc__fill {
	position: absolute; left: 0; height: 3px; width: 0; border-radius: 3px;
	background: #fff;
}
.reelio-vc__knob {
	position: absolute; top: 50%; left: 0; width: 12px; height: 12px; border-radius: 50%;
	background: #fff; transform: translate(-50%, -50%);
	box-shadow: 0 1px 4px rgba(0,0,0,.4);
	opacity: 0; transition: opacity .2s ease;
}
.reelio-slide.is-controls .reelio-vc__knob { opacity: 1; }

/* ---------- Swipe-up-for-next hint ---------- */
.reelio-swipehint {
	position: absolute; left: 0; right: 0; bottom: 92px; z-index: 5;
	display: flex; flex-direction: column; align-items: center; gap: 2px;
	color: #fff; pointer-events: none;
	text-shadow: 0 1px 6px rgba(0,0,0,.5);
	opacity: 1; transition: opacity .5s ease;
	animation: reelio-swipe 1.4s ease-in-out infinite;
}
.reelio-swipehint.is-out { opacity: 0; }
.reelio-swipehint svg { width: 26px; height: 26px; }
.reelio-swipehint span { font: 600 12px/1 inherit; letter-spacing: .02em; }
@keyframes reelio-swipe {
	0%, 100% { transform: translateY(0); }
	50% { transform: translateY(-7px); }
}
@media (prefers-reduced-motion: reduce) { .reelio-swipehint { animation: none; } }

/* Reduced-motion: don't scale/fade slides */
@media (prefers-reduced-motion: reduce) {
	.reelio-slide__stage { transition: none; opacity: 1; transform: none; }
}

/* ---------- Reduced motion / a11y ---------- */
@media (prefers-reduced-motion: reduce) {
	.reelio-card,
	.reelio-thumb,
	.reelio-play,
	.reelio-lightbox,
	.reelio-lightbox__stage { transition: none; }
	.reelio-rotate-hint,
	.reelio-rotate-hint svg { animation: none; }
}