/* Reusable FX Carousel (Apple-like) */
.fx-carousel { position: relative; width: 100%; margin: 0; overflow: hidden; background:transparent; min-height: 300px; display:block; }
.fx-viewport { --feather: 5%; width:100%; height: clamp(340px, 62vw, 560px); margin: 0 auto; position: relative; overflow: hidden; background:#000; contain: layout paint size; transition: opacity .28s ease; }
.fx-viewport::after {
	content: "";
	position: absolute;
	inset: 0;
	pointer-events: none;
	z-index: 15; /* above slides but below controls (controls are z-index:20) */
	/* Cinematic feather: slightly stronger edges + gentle letterbox */
	background:
		radial-gradient(120% 120% at 50% 50%, rgba(0,0,0,0) calc(55% - var(--feather)), rgba(0,0,0,0.14) calc(72% - var(--feather)/2), rgba(0,0,0,0.38) 100%),
		linear-gradient(to bottom, rgba(0,0,0,0.14), rgba(0,0,0,0) calc(12% + var(--feather)), rgba(0,0,0,0) calc(88% - var(--feather)), rgba(0,0,0,0.14));
}
.fx-viewport.fx-prep { opacity: 0; }
.fx-aspect-4x5 .fx-viewport { height: clamp(380px, 55vw, 640px); }
.fx-track { display:flex; height:100%; will-change: transform; transition: transform 950ms cubic-bezier(.22,.61,.36,1); transform: translate3d(0,0,0); backface-visibility:hidden; -webkit-backface-visibility:hidden; }
.fx-tight .fx-track { display:inline-flex; }
.fx-slide { position:relative; flex: 0 0 calc(100% / var(--fx-per, 3)); height:100%; overflow:hidden; border-radius:0; margin-left:0; contain: paint; backface-visibility:hidden; -webkit-backface-visibility:hidden; opacity:0; visibility:hidden; }
.fx-slide.active, .fx-slide.prev, .fx-slide.next, .fx-slide._vis { opacity:1; visibility:visible; }
.fx-track > .fx-slide[data-i^="-"] ,
.fx-track > .fx-slide[data-i^="+" ] { pointer-events:none; }
.fx-tight .fx-slide { flex: 0 0 auto; width:auto; }
.fx-slide:first-child { margin-left:0; }
.fx-img { width:100%; height:100%; object-fit:cover; display:block; transition:opacity .66s ease, filter .30s ease, transform .45s ease; will-change: transform, opacity; backface-visibility:hidden; -webkit-backface-visibility:hidden; transform: translate3d(0,0,0); }
.fx-slide.active { z-index:6; transform: scale(1.015); transition: transform .48s cubic-bezier(.22,.61,.36,1); box-shadow: 0 14px 38px -12px rgba(0,0,0,.65), 0 6px 16px -8px rgba(0,0,0,.55); }
.fx-slide .fx-img { cursor:pointer; }
.fx-slide.active .fx-img { filter: none; cursor:zoom-in; }
/* Neighbors: slightly dim + blur to push focus to active */
.fx-slide:not(.active) .fx-img { filter: brightness(.94) contrast(.995) saturate(.99) blur(.25px); }
.fx-slide.prev .fx-img, .fx-slide.next .fx-img { transform: scale(1.002); }
/* Push hidden slides out of view to avoid overlap artifacts */
.fx-slide:not(.active):not(.prev):not(.next) { pointer-events:none; }
.fx-img.fade-out { position:absolute; inset:0; width:100%; height:100%; pointer-events:none; opacity:1; transition:opacity .66s ease; z-index:5; }
.fx-img.fade-out.fading { opacity:0; }
.fx-img.fade-in { opacity:0; transition:opacity .66s ease; }
.fx-img.fade-in.fading { opacity:1; }

/* Vertical (portrait) images: show full image, keep slide flush with neighbors */
.fx-slide.is-vertical { position:relative; background:#050505; display:flex; align-items:center; justify-content:center; }
.fx-slide.is-vertical::before {
	content:"";
	position:absolute;
	inset:0;
	background-image: var(--fx-bg);
	background-size: cover;
	background-position: center;
	filter: blur(14px) brightness(0.60) saturate(1.05);
	transform: scale(1.04);
	z-index:0;
}
.fx-slide.is-vertical::after {
	content:"";
	position:absolute;
	inset:0;
	pointer-events:none;
	background: linear-gradient(90deg, rgba(0,0,0,0.75), rgba(0,0,0,0) 12%, rgba(0,0,0,0) 88%, rgba(0,0,0,0.75));
	opacity:.45; /* slightly reduced to balance with viewport vignette */
	z-index:1;
}
.fx-slide.is-vertical .fx-img { position:relative; z-index:1; width:auto; height:100%; object-fit:contain; }

/* Status message for empty/error states */
.fx-status { color:#fff; padding:20px; text-align:center; font: 500 16px/1.6 system-ui, -apple-system, Segoe UI, Roboto, "Helvetica Neue", Arial; opacity:.9; }

/* Controls */
.fx-arrow { position:absolute; top:50%; transform:translateY(-50%); width:48px; height:48px; border-radius:50%; border:1px solid rgba(255,255,255,.35); background:rgba(0,0,0,.28); color:#fff; font-size:24px; display:flex; align-items:center; justify-content:center; cursor:pointer; z-index:20; backdrop-filter:blur(4px); -webkit-backdrop-filter:blur(4px); box-shadow:0 0 0 1px rgba(255,255,255,.14), 0 4px 14px -8px rgba(0,0,0,.85); }
.fx-arrow.fx-prev { left:16px; }
.fx-arrow.fx-next { right:16px; }
.fx-dots { position:absolute; bottom:14px; left:50%; transform:translateX(-50%); display:flex; gap:10px; z-index:20; }
.fx-carousel .fx-dot, .fx-lightbox .fx-dot { width:10px; height:10px; border-radius:50%; background:rgba(255,255,255,.42); cursor:pointer; transition:transform .22s ease, background .22s ease, opacity .22s ease; opacity:.95; border:none; padding:0; display:inline-block; appearance:none; -webkit-appearance:none; }
.fx-carousel .fx-dot.active, .fx-lightbox .fx-dot.active { background:rgba(255,255,255,.98); transform:scale(1.6); opacity:1; }
.fx-carousel .fx-dot:focus-visible, .fx-lightbox .fx-dot:focus-visible { outline:2px solid rgba(255,255,255,.6); outline-offset:2px; }
.fx-play { position:absolute; right:16px; bottom:16px; width:44px; height:44px; border-radius:50%; border:1px solid rgba(255,255,255,.38); background:rgba(0,0,0,.2); color:#fff; display:flex; align-items:center; justify-content:center; z-index:20; }
.fx-play .icon { width:20px; height:20px; fill:#fff; }

/* Lightbox */
.fx-lightbox { --tint: rgba(0,0,0,.82); position:fixed; inset:0; z-index:5000; display:flex; align-items:center; justify-content:center; background:var(--tint); backdrop-filter:blur(6px) saturate(140%); -webkit-backdrop-filter:blur(6px) saturate(140%); opacity:0; pointer-events:none; transition:opacity .35s ease; }
.fx-lightbox.open { opacity:1; pointer-events:auto; }
.fx-lb-inner { position:relative; width:100%; height:100%; display:flex; align-items:center; justify-content:center; padding:clamp(16px,4vw,48px); box-sizing:border-box; }
.fx-lb-stage { position:relative; margin:0; max-width:90vw; max-height:86vh; display:flex; align-items:center; justify-content:center; }
.fx-lb-img { max-width:100%; max-height:86vh; width:auto; height:auto; object-fit:contain; opacity:0; transition:opacity .45s ease; background:#111; border-radius:10px; box-shadow:0 8px 32px -12px rgba(0,0,0,.9); }
.fx-lb-img.loaded { opacity:1; }
.fx-lb-close { position:absolute; top:12px; right:12px; width:36px; height:36px; border-radius:50%; border:1px solid rgba(255,255,255,.45); background:rgba(0,0,0,.38); color:#fff; font-size:18px; display:flex; align-items:center; justify-content:center; cursor:pointer; z-index:3; }
.fx-lb-prev, .fx-lb-next { position:absolute; top:50%; transform:translateY(-50%); width:52px; height:52px; border-radius:50%; border:1px solid rgba(255,255,255,.35); background:rgba(0,0,0,.28); color:#fff; font-size:30px; line-height:1; display:flex; align-items:center; justify-content:center; cursor:pointer; opacity:.25; }
.fx-lightbox:hover .fx-lb-prev, .fx-lightbox:hover .fx-lb-next { opacity:1; }
.fx-lb-prev { left:34px; } .fx-lb-next { right:34px; }
.fx-lb-counter { position:absolute; bottom:16px; right:20px; font-size:13px; color:#fff; background:rgba(0,0,0,.35); padding:4px 10px; border-radius:20px; }

/* Responsive */
@media (max-width: 900px){ .fx-slide { flex-basis: calc(100% / var(--fx-per-mobile, 1)); margin-left:0; } }

/* Mobile performance tuning */
@media (max-width: 600px){
	.fx-viewport{ height: clamp(280px, 85vw, 420px); }
	/* Lighter feather to reduce overdraw */
	.fx-viewport::after{ background:
		linear-gradient(to bottom, rgba(0,0,0,0.12), rgba(0,0,0,0) 16%, rgba(0,0,0,0) 84%, rgba(0,0,0,0.12)); }
	/* Remove blur on neighbors (expensive on mobile GPUs) */
	.fx-slide:not(.active) .fx-img { filter: brightness(.96) contrast(.995) saturate(.99); }
	/* Soften shadows and remove backdrop-filter on controls */
	.fx-slide.active{ box-shadow: 0 10px 26px -14px rgba(0,0,0,.55), 0 4px 12px -8px rgba(0,0,0,.5); }
	.fx-arrow{ backdrop-filter:none; -webkit-backdrop-filter:none; }
    /* Disable lightbox blur on small screens to prevent iOS GPU crashes */
    .fx-lightbox { backdrop-filter:none; -webkit-backdrop-filter:none; background: rgba(0,0,0,0.94); }
}
@media (prefers-reduced-motion: reduce){ .fx-track, .fx-img, .fx-slide { transition:none !important; } }
/* Prevent background scroll when lightbox is open */
body.fx-lightbox-open { overflow:hidden; }