/* ===================================
   AWYB Photo Reel Widget
   =================================== */

.awyb-photo-reel {
	--awyb-card-width: 245px;
	--awyb-card-aspect: 245 / 325;
	--awyb-reel-vertical-range: 80px;

	background-color: #fffdf9;
	width: 100%;
	overflow: hidden;
	position: relative;
	padding: calc( var(--awyb-reel-vertical-range) + 32px ) 0;
}

.awyb-photo-reel__track {
	display: flex;
	width: max-content;
	animation: awyb-photo-reel-scroll 60s linear infinite;
	will-change: transform;
}

/*
 * Use margin-left instead of `gap` so the spacing can go negative and the
 * cards overlap (CSS `gap` does not allow negative values). The selector
 * applies to every card except the very first, so the duplicate set's first
 * card also overlaps the original set's last card — keeping the seamless
 * loop intact.
 */
.awyb-photo-reel__item + .awyb-photo-reel__item {
	margin-left: var(--awyb-card-spacing, -24px);
}

.awyb-photo-reel__track.is-paused {
	animation-play-state: paused;
}

@keyframes awyb-photo-reel-scroll {
	from { transform: translate3d(0, 0, 0); }
	to   { transform: translate3d(-50%, 0, 0); }
}

/* Reverse direction (left to right). */
.awyb-photo-reel-dir-right .awyb-photo-reel__track {
	animation-direction: reverse;
}

@media (prefers-reduced-motion: reduce) {
	.awyb-photo-reel__track {
		animation: none;
	}
}

/* ----- Card ----- */

.awyb-photo-reel__item {
	flex: 0 0 var(--awyb-card-width);
	position: relative;
	transform: translateY(var(--awyb-reel-offset, 0)) rotate(var(--awyb-reel-tilt, 0));
	transition: transform 0.25s ease;
	cursor: pointer;
}

.awyb-photo-reel__card {
	width: var(--awyb-card-width);
	aspect-ratio: var(--awyb-card-aspect);
	background-color: #ffffff;
	border-style: solid;
	border-color: #ffffff;
	border-width: 8px;
	box-shadow: 0 4px 6px rgba(0, 0, 0, 0.25);
	overflow: hidden;
	box-sizing: content-box;
}

.awyb-photo-reel__image {
	display: block;
	width: 100%;
	height: 100% !important;
	min-height: 100%;
	object-fit: cover;
	user-select: none;
	-webkit-user-drag: none;
	pointer-events: none;
}

.awyb-photo-reel__item.is-active {
	transform: translateY(var(--awyb-reel-offset, 0)) rotate(0) scale(1.04);
	z-index: 5;
}

/* Variation per card (cycles every 7 items, mirroring the Figma rotations). */
.awyb-photo-reel__item--v1 { --awyb-reel-offset: -22px;   --awyb-reel-tilt: -0.92deg; }
.awyb-photo-reel__item--v2 { --awyb-reel-offset: 18px;   --awyb-reel-tilt:  0.86deg; }
.awyb-photo-reel__item--v3 { --awyb-reel-offset: -21px;   --awyb-reel-tilt: -0.09deg; }
.awyb-photo-reel__item--v4 { --awyb-reel-offset: 20px;   --awyb-reel-tilt:  1.01deg; }
.awyb-photo-reel__item--v5 { --awyb-reel-offset: 12px;   --awyb-reel-tilt:  0.79deg; }
.awyb-photo-reel__item--v6 { --awyb-reel-offset: 0;      --awyb-reel-tilt: -0.39deg; }
.awyb-photo-reel__item--v7 { --awyb-reel-offset: -15px;   --awyb-reel-tilt:  1.28deg; }

/* ----- Tooltip ----- */

.awyb-photo-reel__tooltip {
	position: absolute;
	left: 50%;
	bottom: 16px;
	transform: translate(-50%, 100%);
	background-color: #111827;
	color: #fafafa;
	padding: 10px 16px;
	display: flex;
	flex-direction: column;
	gap: 2px;
	white-space: nowrap;
	font-family: var(--font-family-body);
	opacity: 0;
	visibility: hidden;
	pointer-events: none;
	transition: opacity 0.18s ease, visibility 0.18s ease;
	z-index: 10;
	box-shadow: 0 6px 16px rgba(0, 0, 0, 0.18);
}

.awyb-photo-reel__tooltip::before {
	content: "";
	position: absolute;
	top: -4px;
	left: 50%;
	width: 10px;
	height: 10px;
	background-color: #111827;
	transform: translateX(-50%) rotate(45deg);
	z-index: -1;
}

.awyb-photo-reel__tooltip-title {
	font-weight: 600;
	font-size: 12px;
	line-height: 16px;
}

.awyb-photo-reel__tooltip-subtitle {
	font-weight: 700;
	font-size: 14px;
	line-height: 1;
}

.awyb-photo-reel__item.is-active .awyb-photo-reel__tooltip {
	opacity: 1;
	visibility: visible;
}

/* ----- Responsive ----- */

@media (max-width: 768px) {
	.awyb-photo-reel {
		--awyb-card-width: 160px;
		--awyb-reel-vertical-range: 56px;
	}

	.awyb-photo-reel__item--v1 { --awyb-reel-offset: 8px;  }
	.awyb-photo-reel__item--v2 { --awyb-reel-offset: -12px; }
	.awyb-photo-reel__item--v3 { --awyb-reel-offset: 23px; }
	.awyb-photo-reel__item--v4 { --awyb-reel-offset: 5px; }
	.awyb-photo-reel__item--v5 { --awyb-reel-offset: 16px; }
	.awyb-photo-reel__item--v6 { --awyb-reel-offset: 0;    }
	.awyb-photo-reel__item--v7 { --awyb-reel-offset: -10px; }
}