/*!
 * 3D Rotating Image Carousel - front-end styles
 * All key values are CSS custom properties (see --tdc-*).
 */
.tdc-section {
	--tdc-bg: #050505;
	--tdc-text: #fff;
	--tdc-h: 380px;
	--tdc-cw: 340px;
	--tdc-ch: 230px;
	--tdc-radius: 14px;
	--tdc-inset: 32px;
	--tdc-frame-line: rgba(255, 255, 255, .09);
	--tdc-glow: #ff4fd8;
	--tdc-glow-rgb: 255, 79, 216;
	--tdc-glow-i: 1;
	--tdc-glow-w: 2px;
	--tdc-glow-blur: 26px;
	--tdc-beam-h: 92%;
	--tdc-mono: 1;
	--tdc-dither: .55;
	--tdc-side-blur: 0px;
	--tdc-p-opacity: .65;

	position: relative;
	box-sizing: border-box;
	width: 100%;
	max-width: 100%;
	margin: 0;
	padding: 56px 0 40px;
	background: var(--tdc-bg);
	color: var(--tdc-text);
	overflow: hidden;
	isolation: isolate;
	line-height: 1.4;
	-webkit-tap-highlight-color: transparent;
}
.tdc-section *,
.tdc-section *::before,
.tdc-section *::after { box-sizing: border-box; }
.tdc-section:focus { outline: none; }
.tdc-section:focus-visible { outline: 2px solid rgba(var(--tdc-glow-rgb), .8); outline-offset: -4px; }

/* ---------- Text ---------- */
.tdc-content { max-width: 760px; margin: 0 auto; padding: 0 20px 30px; text-align: center; position: relative; z-index: 8; }
.tdc-section .tdc-eyebrow { margin: 0 0 10px; font-size: 12px; font-weight: 600; letter-spacing: .2em; text-transform: uppercase; color: var(--tdc-glow); }
.tdc-section .tdc-title { margin: 0 0 12px; padding: 0; font-size: clamp(28px, 4.2vw, 52px); font-weight: 600; line-height: 1.1; letter-spacing: -.02em; color: var(--tdc-text); }
.tdc-section .tdc-desc { margin: 0 0 22px; font-size: 16px; line-height: 1.55; color: rgba(255, 255, 255, .62); }
.tdc-section .tdc-cta {
	display: inline-flex; align-items: center; gap: 10px; padding: 12px 26px; border-radius: 999px;
	background: #262626; border: 1px solid rgba(255, 255, 255, .09); color: #fff; font-size: 14px; font-weight: 600;
	text-decoration: none; box-shadow: 0 6px 24px rgba(0, 0, 0, .45); transition: background .2s, transform .2s;
}
.tdc-section .tdc-cta:hover { background: #333; transform: translateY(-1px); color: #fff; }
.tdc-section .tdc-cta:focus-visible { outline: 2px solid rgba(var(--tdc-glow-rgb), .9); outline-offset: 3px; }

/* ---------- Stage ---------- */
.tdc-stage {
	position: relative;
	height: var(--tdc-h);
	margin: 0 var(--tdc-inset);
	border-left: 1px solid var(--tdc-frame-line);
	border-right: 1px solid var(--tdc-frame-line);
	overflow: hidden;
	touch-action: pan-y;
	cursor: grab;
	-webkit-user-select: none;
	user-select: none;
}
.tdc-stage.is-dragging { cursor: grabbing; }

.tdc-scene { position: absolute; inset: 0; perspective: var(--tdc-perspective, 1800px); perspective-origin: 50% 50%; }
.tdc-track { position: absolute; left: 50%; top: 50%; width: 0; height: 0; transform-style: preserve-3d; }

/* Mono layer: everything left of the beam is grayscale + dither. */
.tdc-scene--mono { clip-path: inset(0 50% 0 0); pointer-events: none; }
.tdc-no-mono .tdc-scene--mono { display: none; }

/* ---------- Cards ---------- */
.tdc-card {
	position: absolute;
	left: calc(var(--tdc-cw) / -2);
	top: calc(var(--tdc-ch) / -2);
	width: var(--tdc-cw);
	height: var(--tdc-ch);
	margin: 0;
	padding: 0;
	border-radius: var(--tdc-radius);
	overflow: hidden;
	background: #0d0d0d;
	visibility: hidden;
	backface-visibility: hidden;
	-webkit-backface-visibility: hidden;
	will-change: transform, opacity;
	box-shadow: 0 14px 36px rgba(0, 0, 0, .55);
}
.tdc-section:not([data-tdc-ready]) .tdc-card:first-child { visibility: visible; transform: none; }
.tdc-card::after {
	content: ""; position: absolute; inset: 0; border-radius: inherit; pointer-events: none;
	border: 1px solid rgba(255, 255, 255, .11);
}
.tdc-section .tdc-card img,
.tdc-section .tdc-card .tdc-img {
	display: block; width: 100%; height: 100%; max-width: none; margin: 0; padding: 0; border: 0; border-radius: 0;
	object-fit: cover; pointer-events: none; -webkit-user-drag: none; box-shadow: none;
}
.tdc-card__link { display: block; width: 100%; height: 100%; color: inherit; text-decoration: none; }
.tdc-card__link:focus-visible { outline: 2px solid rgba(var(--tdc-glow-rgb), .9); outline-offset: -3px; }
.tdc-shade { position: absolute; inset: 0; background: #000; opacity: 0; pointer-events: none; }
.tdc-card.tdc-far { filter: blur(var(--tdc-side-blur)); }

.tdc-card--mono .tdc-img { filter: grayscale(var(--tdc-mono)) contrast(1.55) brightness(1.18); }
.tdc-dither {
	position: absolute; inset: 0; pointer-events: none; opacity: var(--tdc-dither);
	background:
		radial-gradient(circle at 50% 50%, transparent 0, transparent .55px, rgba(0, 0, 0, .85) 1.1px) 0 0 / 3px 3px,
		radial-gradient(circle at 50% 50%, transparent 0, transparent .4px, rgba(0, 0, 0, .55) .9px) 1.5px 1.5px / 3px 3px;
}

/* ---------- Beam ---------- */
.tdc-beam {
	position: absolute; left: 50%; top: 50%; z-index: 5; pointer-events: none;
	width: calc(var(--tdc-glow-blur) * 6 + 80px);
	height: var(--tdc-beam-h);
	transform: translate(-50%, -50%);
	-webkit-mask-image: linear-gradient(to bottom, transparent 0, #000 24%, #000 76%, transparent 100%);
	mask-image: linear-gradient(to bottom, transparent 0, #000 24%, #000 76%, transparent 100%);
}
.tdc-beam > span { position: absolute; }
.tdc-beam__halo {
	inset: 0; opacity: var(--tdc-glow-i);
	background: linear-gradient(to right, transparent 0, rgba(var(--tdc-glow-rgb), .06) 30%, rgba(var(--tdc-glow-rgb), .26) 50%, rgba(var(--tdc-glow-rgb), .06) 70%, transparent 100%);
}
.tdc-beam__bloom {
	inset: 0; opacity: var(--tdc-glow-i);
	background: radial-gradient(ellipse 34% 26% at 50% 50%, rgba(var(--tdc-glow-rgb), .38), rgba(var(--tdc-glow-rgb), 0) 100%);
}
.tdc-beam__core {
	left: 50%; top: 0; bottom: 0; width: var(--tdc-glow-w); transform: translateX(-50%);
	border-radius: 50% / 50%;
	background: linear-gradient(to bottom, rgba(255, 255, 255, .55), #fff 30%, #fff 70%, rgba(255, 255, 255, .55));
	box-shadow:
		0 0 calc(var(--tdc-glow-blur) * .35) calc(var(--tdc-glow-w) * .6) rgba(var(--tdc-glow-rgb), .95),
		0 0 var(--tdc-glow-blur) calc(var(--tdc-glow-w) * 1.4) rgba(var(--tdc-glow-rgb), .6),
		0 0 calc(var(--tdc-glow-blur) * 2) var(--tdc-glow-w) rgba(var(--tdc-glow-rgb), .3);
}

/* ---------- Particles ---------- */
.tdc-particles { position: absolute; inset: 0; z-index: 4; pointer-events: none; overflow: hidden; }
.tdc-p {
	position: absolute; border-radius: 50%; background: #fff; opacity: 0;
	box-shadow: 0 0 6px 1px rgba(var(--tdc-glow-rgb), .85);
	will-change: transform, opacity;
	animation: tdc-float var(--d, 8s) ease-in-out var(--dl, 0s) infinite;
}
.tdc-paused .tdc-p { animation-play-state: paused; }
@keyframes tdc-float {
	0%   { opacity: 0; transform: translate3d(0, 0, 0); }
	20%  { opacity: var(--o, .5); }
	80%  { opacity: var(--o, .5); }
	100% { opacity: 0; transform: translate3d(var(--dx, 0), var(--dy, -30px), 0); }
}

/* ---------- Controls ---------- */
.tdc-controls { position: absolute; left: 50%; bottom: 10px; z-index: 9; display: flex; gap: 8px; transform: translateX(-50%); }
.tdc-controls--sr { opacity: 0; pointer-events: none; }
.tdc-controls--sr:focus-within { opacity: 1; pointer-events: auto; }
.tdc-section .tdc-ctl {
	display: grid; place-items: center; width: 34px; height: 34px; margin: 0; padding: 0; border-radius: 50%;
	border: 1px solid rgba(255, 255, 255, .2); background: rgba(10, 10, 10, .65); color: #fff; cursor: pointer;
	-webkit-backdrop-filter: blur(6px); backdrop-filter: blur(6px); transition: background .2s, border-color .2s;
}
.tdc-section .tdc-ctl:hover { background: rgba(40, 40, 40, .85); border-color: rgba(255, 255, 255, .4); }
.tdc-section .tdc-ctl:focus-visible { outline: 2px solid rgba(var(--tdc-glow-rgb), .95); outline-offset: 2px; }
.tdc-toggle .i-play { display: none; }
.tdc-toggle[aria-pressed="true"] .i-play { display: block; }
.tdc-toggle[aria-pressed="true"] .i-pause { display: none; }

/* ---------- Reduced motion ---------- */
@media (prefers-reduced-motion: reduce) {
	.tdc-p { animation: none; opacity: 0; }
}

/* ---------- Small screens ---------- */
@media (max-width: 640px) {
	.tdc-section { padding-top: 40px; padding-bottom: 28px; }
	.tdc-content { padding-bottom: 22px; }
	.tdc-section .tdc-desc { font-size: 15px; }
}