/* Fan Card Carousel — frontend styles
   Adapted 1:1 from the supplied truus-clone-v3 design, made multi-instance
   safe (fcc- prefix) and driven by per-widget CSS custom properties. */

.fcc-section {
	--fcc-ribbon: #b0473f;
	--fcc-card-w: 300px;
	--fcc-card-h: 420px;
	--fcc-dur: 850ms;
	--fcc-ease: cubic-bezier(.19,1,.22,1);

	position: relative;
	background: #000000;
	color: #ffffff;
	padding: clamp(2.5rem, 7vw, 6rem) 0;
	overflow: hidden;
	font-family: inherit;
}

.fcc-container {
	position: relative;
	max-width: 1200px;
	margin: 0 auto;
	padding: 0 1.25rem;
}

/* ---------- decorative doodles ---------- */

.fcc-hash {
	position: absolute;
	left: 3%;
	top: 4%;
	width: clamp(48px, 6vw, 78px);
	color: rgba(255,255,255,.85);
	z-index: 3;
}
.fcc-scribble {
	position: absolute;
	right: 6%;
	top: -2%;
	width: clamp(56px, 7vw, 96px);
	color: #ff6a3d;
	z-index: 3;
	transform: rotate(6deg);
}

/* ---------- corner badge ---------- */

.fcc-corner-badge {
	position: absolute;
	right: 3%;
	bottom: 14%;
	z-index: 6;
	display: flex;
	align-items: center;
	gap: .45rem;
	background: #f4f1ea;
	color: #111;
	font-weight: 700;
	font-size: .95rem;
	padding: .55rem 1.1rem .55rem .6rem;
	border-radius: 999px;
	box-shadow: 0 10px 24px -10px rgba(0,0,0,.6);
}
.fcc-corner-badge__img {
	width: 26px;
	height: 26px;
	object-fit: contain;
	border-radius: 50%;
	background: #1671e0;
	padding: 4px;
}

/* ---------- stage / fan-stack ---------- */

.fcc-stage {
	position: relative;
	height: clamp(380px, 54vw, 560px);
	display: flex;
	align-items: center;
	justify-content: center;
	touch-action: pan-y;
	-webkit-user-select: none;
	user-select: none;
	z-index: 2;
	outline: none;
	cursor: none;
	perspective: 1400px;
}
.fcc-stage:focus-visible { box-shadow: 0 0 0 2px #f4d54a; border-radius: 14px; }
.fcc-section[data-show-cursor="0"] .fcc-stage { cursor: grab; }

.fcc-list { position: relative; width: var(--fcc-card-w); height: var(--fcc-card-h); }

.fcc-card {
	position: absolute;
	inset: 0;
	margin: auto;
	width: var(--fcc-card-w);
	height: var(--fcc-card-h);
	border-radius: 14px;
	background: #fff;
	padding: 12px 12px 46px 12px;
	box-shadow: 0 30px 60px -22px rgba(0,0,0,.7);
	will-change: transform, opacity;
	transition: opacity .4s var(--fcc-ease);
}
.fcc-card.is-settling { transition: transform var(--fcc-dur) var(--fcc-ease), opacity .4s var(--fcc-ease); }

.fcc-card__frame {
	position: relative;
	width: 100%;
	height: 100%;
	border-radius: 6px;
	overflow: hidden;
	background: #ddd;
}
.fcc-card__media {
	position: absolute;
	inset: 0;
	margin: auto;
	max-width: 100%;
	max-height: 100%;
	object-fit: cover;
	pointer-events: none;
	transition: opacity .4s var(--fcc-ease), transform 8s linear;
}
.fcc-card__img { z-index: 1; }
.fcc-card__video { z-index: 2; }
.fcc-card[data-hover="1"] .fcc-card__img,
.fcc-card[data-state="active"] .fcc-card__img { transform: scale(1.05); }

/* logos — position/size are set inline per card via PHP */
.fcc-logo {
	position: absolute;
	z-index: 4;
	pointer-events: none;
}
.fcc-logo img {
	width: 100%;
	height: 100%;
	object-fit: contain;
	display: block;
	filter: drop-shadow(0 4px 8px rgba(0,0,0,.35));
}

/* arrow (per-card, toggleable, positionable via modifier class) */
.fcc-arrow {
	position: absolute;
	z-index: 6;
	display: flex;
	align-items: center;
	justify-content: center;
	width: 44px;
	height: 44px;
	border-radius: 50%;
	background: #f4d54a;
	color: #111;
	text-decoration: none;
	box-shadow: 0 10px 20px -8px rgba(0,0,0,.5);
	opacity: 0;
	transform: translateY(6px);
	transition: opacity .35s var(--fcc-ease), transform .35s var(--fcc-ease);
	pointer-events: none;
}
.fcc-card[data-state="active"] .fcc-arrow { opacity: 1; transform: translateY(0); pointer-events: auto; }
.fcc-arrow--bottom-right { right: 14px; bottom: 14px; }
.fcc-arrow--bottom-left  { left: 14px;  bottom: 14px; }
.fcc-arrow--top-right    { right: 14px; top: 14px; }
.fcc-arrow--top-left     { left: 14px;  top: 14px; }

/* ribbon tag */
.fcc-ribbon {
	position: absolute;
	left: 50%;
	bottom: 8px;
	transform: translateX(-50%);
	background: var(--fcc-ribbon);
	color: #fff;
	font-weight: 800;
	font-size: 1.05rem;
	padding: .55rem 1.4rem;
	border-radius: 3px;
	white-space: nowrap;
	box-shadow: 0 10px 20px -8px rgba(0,0,0,.5);
	z-index: 5;
	opacity: 0;
	transition: opacity .35s var(--fcc-ease);
}
.fcc-card[data-state="active"] .fcc-ribbon { opacity: 1; }

/* ---------- info panel (title + description under the stage) ---------- */

.fcc-info { position: relative; z-index: 2; margin-top: 2rem; min-height: 70px; }
.fcc-info__item {
	position: absolute; inset: 0;
	display: flex; flex-direction: column; align-items: center; text-align: center; gap: .35rem;
	opacity: 0;
	pointer-events: none;
	transition: opacity .4s var(--fcc-ease);
}
.fcc-info__item.is-active { opacity: 1; pointer-events: auto; }
.fcc-info__title { font-size: clamp(1.1rem, 2.4vw, 1.5rem); font-weight: 600; margin: 0; color: rgba(255,255,255,.92); }
.fcc-info__desc { font-size: clamp(.85rem, 1.6vw, .98rem); font-weight: 400; margin: 0; max-width: 44ch; color: rgba(255,255,255,.68); }

/* ---------- nav ---------- */

.fcc-nav { position: relative; z-index: 2; display: flex; align-items: center; justify-content: center; gap: 1.1rem; margin-top: 1.5rem; }
.fcc-navbtn {
	width: 38px; height: 38px; border-radius: 50%;
	border: 1px solid rgba(255,255,255,.25); background: transparent; color: #fff;
	font-size: 1.05rem; cursor: pointer;
	transition: background .25s var(--fcc-ease), transform .25s var(--fcc-ease), border-color .25s var(--fcc-ease);
}
.fcc-navbtn:hover { background: rgba(255,255,255,.08); border-color: rgba(255,255,255,.5); }
.fcc-navbtn:active { transform: scale(.9); }
.fcc-dots { display: flex; gap: .4rem; }
.fcc-dot { width: 6px; height: 6px; border-radius: 50%; background: rgba(255,255,255,.3); border: none; padding: 0; cursor: pointer; transition: background .3s var(--fcc-ease), transform .3s var(--fcc-ease); }
.fcc-dot.is-active { background: #f4d54a; transform: scale(1.4); }

/* ---------- custom cursor ---------- */

.fcc-cursor {
	position: fixed; top: 0; left: 0;
	min-width: 60px;
	padding: 10px 22px;
	border-radius: 24px;
	background: #f0c3dc;
	color: #161616;
	display: inline-flex; align-items: center; justify-content: center;
	font-size: 1rem; font-weight: 800; letter-spacing: 0; text-transform: none;
	pointer-events: none; z-index: 9999; opacity: 0;
	box-shadow: 0 8px 20px rgba(0,0,0,.22);
	transform: translate3d(-100px,-100px,0) translate(-50%,-50%) scale(.6);
	transition: opacity .25s var(--fcc-ease), transform .1s linear, background-color .2s ease;
	will-change: transform, opacity;
}
.fcc-cursor__tail {
	position: absolute;
	left: 26px; bottom: -9px;
	width: 18px; height: 18px;
	background: inherit;
	clip-path: polygon(0 0, 100% 0, 0 100%);
	border-bottom-left-radius: 5px;
}
.fcc-cursor.is-visible { opacity: 1; }
.fcc-cursor.is-dragging { background: #fff; }

@media (hover: none) {
	.fcc-cursor { display: none; }
	.fcc-stage { cursor: grab; }
}

/* Cursor label switched off in the widget settings — collapse the speech
   bubble down to a plain small dot; the "drag" text and its tail hide. */
.fcc-section[data-show-cursor-label="0"] .fcc-cursor {
	min-width: 0;
	width: 16px; height: 16px;
	padding: 0;
	border-radius: 50%;
	box-shadow: 0 4px 10px rgba(0,0,0,.22);
}
.fcc-section[data-show-cursor-label="0"] .fcc-cursor__label,
.fcc-section[data-show-cursor-label="0"] .fcc-cursor__tail {
	display: none;
}

@media (max-width: 900px) {
	.fcc-section { --fcc-card-w: 230px; --fcc-card-h: 330px; }
}
@media (max-width: 560px) {
	.fcc-section { --fcc-card-w: 180px; --fcc-card-h: 260px; --fcc-dur: 650ms; }
	.fcc-ribbon { font-size: .85rem; padding: .4rem 1rem; }
	.fcc-corner-badge { font-size: .8rem; padding: .4rem .8rem .4rem .4rem; bottom: 10%; }
	.fcc-arrow { width: 36px; height: 36px; }
}
@media (prefers-reduced-motion: reduce) {
	.fcc-section * { transition-duration: .01ms !important; animation-duration: .01ms !important; }
}

/* Additional subtitle layer */
.fcc-info__subtitle{margin:0.35rem 0;font-size:clamp(1rem,2vw,1.35rem);line-height:1.4;opacity:.85;}
.fcc-logo{z-index:10;transition:transform .45s cubic-bezier(.19,1,.22,1);}
.fcc-card:hover .fcc-logo{transform:translateY(-4px) scale(1.04);}
.fcc-card__media{transition:transform .8s cubic-bezier(.19,1,.22,1);}
.fcc-card:hover .fcc-card__media{transform:scale(1.03);}