/* ============================================================================
   XENOR Server Files — coverflow carousel (cf-*). Self-contained; uses the
   theme CSS variables defined in site.css (same page). Compositor-friendly:
   transform / opacity / filter only. Blur limited to the side cards + bg.
   ========================================================================== */

.cf {
  position: relative;
  padding: 18px 0 6px;
  isolation: isolate;
}

/* blurred, darkened backdrop of the selected card's image (two crossfading layers) */
.cf-bg {
  position: absolute;
  inset: -40px -40px -20px;
  z-index: 0;
  overflow: hidden;
  border-radius: 16px;
  pointer-events: none;
}
.cf-bg-layer {
  position: absolute;
  inset: -8%;
  background-size: cover;
  background-position: center;
  filter: blur(30px) brightness(.4) saturate(1.1);
  opacity: 0;
  transition: opacity .55s ease;
  transform: scale(1.12);
}
.cf-bg-layer.on { opacity: .5; }
.cf-bg::after {
  content: "";
  position: absolute;
  inset: 0;
  background: radial-gradient(130% 100% at 50% 30%, rgba(11,10,7,.35), rgba(11,10,7,.9));
}

/* 3D stage */
.cf-stage {
  position: relative;
  height: 460px;
  z-index: 1;
  perspective: 1700px;
  transform-style: preserve-3d;
}

/* each card */
.cf-card {
  position: absolute;
  top: 50%;
  left: 50%;
  width: 430px;
  height: 430px;
  margin: 0;
  border-radius: 14px;
  overflow: hidden;
  border: 1px solid var(--line-2);
  background: var(--card);
  cursor: pointer;
  transform: translate(-50%, -50%);
  transition: transform .52s cubic-bezier(.22, .61, .36, 1),
              opacity .52s ease,
              filter .52s ease,
              box-shadow .52s ease;
  will-change: transform, opacity, filter;
}
.cf-card-inner {
  position: absolute;
  inset: 0;
  background-size: cover;
  background-position: center;
  display: flex;
  flex-direction: column;
  justify-content: flex-end;
}
.cf-card-inner::before {
  content: "";
  position: absolute;
  inset: 0;
  background: linear-gradient(180deg, rgba(8,7,4,.15) 0%, rgba(8,7,4,.55) 55%, rgba(8,7,4,.94) 100%);
}
.cf-card.no-img .cf-card-inner { background: radial-gradient(120% 120% at 50% 15%, var(--card-2, #1e1a11), #0c0a06); }

.cf-badge {
  position: absolute;
  top: 16px;
  left: 16px;
  z-index: 2;
  font-family: var(--ff-display);
  font-size: 10.5px;
  letter-spacing: .2em;
  text-transform: uppercase;
  color: var(--gold-lt);
  border: 1px solid var(--gold-dk);
  border-radius: 999px;
  padding: 4px 12px;
  background: rgba(8,7,4,.6);
}
.cf-card-body {
  position: relative;
  z-index: 2;
  padding: 22px 24px 24px;
}
.cf-card-body h3 {
  font-family: var(--ff-display);
  color: var(--ink);
  font-size: 1.7rem;
  line-height: 1.1;
  margin: 0;
}
.cf-short { color: var(--ink-soft, #cfc6b2); font-size: 13.5px; margin: 10px 0 16px; max-width: 32ch; }
.cf-cta {
  display: inline-block;
  font-size: 13px;
  color: var(--ink);
  border: 1px solid var(--line-2);
  border-radius: 6px;
  padding: 9px 16px;
  background: rgba(17,14,9,.65);
  transition: .18s;
}
.cf-cta:hover { border-color: var(--gold); color: var(--gold-lt); }

/* ---- positions (set by carousel.js via data-pos) ---- */
.cf-card[data-pos="center"] {
  transform: translate(-50%, -54%) scale(1);
  opacity: 1;
  filter: none;
  z-index: 6;
  border-color: var(--gold-dk);
  box-shadow: 0 0 0 1px rgba(200,155,84,.45), 0 0 38px -6px rgba(200,155,84,.45), 0 40px 70px -28px rgba(0,0,0,.9);
  cursor: default;
}
.cf-card[data-pos="left"] {
  transform: translate(-50%, -50%) translateX(-64%) scale(.78) rotateY(30deg);
  opacity: .5;
  filter: blur(2.5px);
  z-index: 4;
}
.cf-card[data-pos="right"] {
  transform: translate(-50%, -50%) translateX(64%) scale(.78) rotateY(-30deg);
  opacity: .5;
  filter: blur(2.5px);
  z-index: 4;
}
.cf-card[data-pos="far-left"] {
  transform: translate(-50%, -50%) translateX(-104%) scale(.62) rotateY(38deg);
  opacity: .18;
  filter: blur(4px);
  z-index: 2;
}
.cf-card[data-pos="far-right"] {
  transform: translate(-50%, -50%) translateX(104%) scale(.62) rotateY(-38deg);
  opacity: .18;
  filter: blur(4px);
  z-index: 2;
}
.cf-card[data-pos="hidden"] {
  transform: translate(-50%, -50%) scale(.5);
  opacity: 0;
  pointer-events: none;
  z-index: 1;
}

/* side cards show only the name (hide badge, short text, cta) */
.cf-card:not([data-pos="center"]) .cf-badge,
.cf-card:not([data-pos="center"]) .cf-short,
.cf-card:not([data-pos="center"]) .cf-cta { opacity: 0; pointer-events: none; }
.cf-card:not([data-pos="center"]) .cf-card-body h3 { font-size: 1.4rem; }

/* nav arrows + dots */
.cf-nav {
  position: absolute;
  top: 50%;
  transform: translateY(-50%);
  z-index: 10;
  width: 46px;
  height: 46px;
  border-radius: 50%;
  border: 1px solid var(--line-2);
  background: rgba(17,14,9,.85);
  color: var(--ink);
  font-size: 23px;
  line-height: 1;
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
  transition: .15s;
}
.cf-nav:hover { border-color: var(--gold); color: var(--gold-lt); }
.cf-prev { left: 8px; }
.cf-next { right: 8px; }
.cf-dots { display: flex; gap: 8px; justify-content: center; margin-top: 14px; position: relative; z-index: 2; }
.cf-dot {
  width: 8px; height: 8px; border-radius: 50%; border: 0;
  background: var(--line-2); cursor: pointer; padding: 0; transition: .15s;
}
.cf-dot.on { background: var(--gold); width: 24px; border-radius: 4px; }
.cf:focus-visible { outline: 1px solid var(--gold-dk); outline-offset: 10px; border-radius: 16px; }

/* ---- mobile (<=640px): selected card wide, side cards' edges peek ---- */
@media (max-width: 640px) {
  .cf-stage { height: 420px; }
  .cf-card { width: 80vw; max-width: 340px; height: 400px; }
  .cf-card[data-pos="left"]  { transform: translate(-50%, -50%) translateX(-78%) scale(.82) rotateY(16deg); filter: blur(1.5px); opacity: .4; }
  .cf-card[data-pos="right"] { transform: translate(-50%, -50%) translateX(78%) scale(.82) rotateY(-16deg); filter: blur(1.5px); opacity: .4; }
  .cf-card[data-pos="far-left"], .cf-card[data-pos="far-right"] { opacity: 0; }
  .cf-nav { width: 38px; height: 38px; font-size: 20px; }
  .cf-prev { left: 2px; } .cf-next { right: 2px; }
  .cf-card-body h3 { font-size: 1.45rem; }
}

/* ---- reduced motion: instant, no blur / perspective, layout kept ---- */
@media (prefers-reduced-motion: reduce) {
  .cf-card, .cf-bg-layer { transition: none !important; }
  .cf-card[data-pos="left"]  { transform: translate(-50%, -50%) translateX(-64%) scale(.78); filter: none; }
  .cf-card[data-pos="right"] { transform: translate(-50%, -50%) translateX(64%) scale(.78); filter: none; }
  .cf-card[data-pos="far-left"]  { transform: translate(-50%, -50%) translateX(-104%) scale(.62); filter: none; }
  .cf-card[data-pos="far-right"] { transform: translate(-50%, -50%) translateX(104%) scale(.62); filter: none; }
  .cf-bg-layer { filter: blur(30px) brightness(.4); }
}