/* ============================================================
   Card fan — an arc of cards, hover spreads it, arrows page one.

   Ported from a React + GSAP component (21st.dev,
   aayush-duhan/card-fan-carousel). Nothing in this estate has a
   bundler, so the port keeps the ORIGINAL'S GEOMETRY VERBATIM —
   FAN_POSITIONS and the slot maths are the component's whole character —
   and replaces GSAP with one CSS transition. The spring below is doing
   the job of `elastic.out(1.05,.78)`.

   TWO THINGS THIS PORT FIXES over a naive one:

   1. It cannot overflow. The original scales x-offsets by viewport width
      through a table of breakpoint multipliers, which still overflows a
      narrow phone; a fixed px-per-unit constant overflows worse (a 74px
      card at 6.2px/unit spans ~446px, wider than any phone). Here the
      unit is DERIVED from the container: the outermost card's edge lands
      exactly on the container edge, at any width, by construction.

   2. Aspect is a variable, not an assumption. The original is built for
      portrait cards. Landscape cards at the same ±21° overlap into
      illegibility, so `tilt` scales rotation independently — a 16:9
      thumbnail with title text on it stays readable at ~0.45.

   Host binds:  --cfan-w  --cfan-h  --cfan-radius  --cfan-fg  --cfan-line
   ============================================================ */
.cfan {
  --cfan-w: 200px;
  --cfan-h: 350px;
  --cfan-radius: 12px;
  --cfan-fg: #111;
  --cfan-line: rgba(0,0,0,0.12);
  --cfan-shadow: 0 18px 40px -18px rgba(0,0,0,0.45);
  --cfan-ease: cubic-bezier(.2, 1.3, .4, 1);

  position: relative;
  display: flex; flex-direction: column; align-items: center;
  width: 100%;
}

.cfan-stage {
  position: relative;
  display: flex; align-items: center; justify-content: center;
  width: 100%;
  height: calc(var(--cfan-h) * 1.25);
  /* The arc lifts the outer cards; without the headroom they clip. */
}

.cfan-card {
  position: absolute;
  width: var(--cfan-w); height: var(--cfan-h);
  border-radius: var(--cfan-radius);
  overflow: hidden;
  border: 1px solid var(--cfan-line);
  box-shadow: var(--cfan-shadow);
  background: #0b0b0b;
  opacity: 0;
  transition: transform .5s var(--cfan-ease), opacity .4s ease;
  will-change: transform;
  text-decoration: none; color: inherit;
  cursor: pointer;
}
.cfan-card img {
  width: 100%; height: 100%; object-fit: cover; display: block;
}
/* The centre card is the one being offered; lift it out of the pack. */
.cfan-card[data-centre="1"] { box-shadow: 0 26px 60px -20px rgba(0,0,0,0.6); }

.cfan-cap {
  position: absolute; left: 0; right: 0; bottom: 0;
  padding: 10px 12px 11px;
  background: linear-gradient(to top, rgba(0,0,0,0.88), rgba(0,0,0,0.55) 55%, transparent);
  color: #fff; font-size: 12px; line-height: 1.3;
  display: grid; gap: 2px;
}
.cfan-cap b { font-weight: 600; font-size: 12.5px; }
.cfan-cap span { font-size: 10.5px; opacity: .78; letter-spacing: .04em; text-transform: uppercase; }

/* ---------- controls ---------- */
.cfan-bar {
  display: flex; align-items: center; justify-content: center; gap: 14px;
  margin-top: 14px;
}
.cfan-bar button {
  width: 40px; height: 40px; border-radius: 999px; flex: none;
  display: flex; align-items: center; justify-content: center;
  border: 1.5px solid var(--cfan-line); background: transparent;
  color: var(--cfan-fg); cursor: pointer; font: inherit;
  transition: border-color .25s ease, color .25s ease, transform .25s var(--cfan-ease);
}
.cfan-bar button:hover { transform: translateY(-1px); }
.cfan-bar button:focus-visible { outline: 2px solid currentColor; outline-offset: 3px; }
.cfan-bar svg { width: 17px; height: 17px; stroke: currentColor; fill: none; stroke-width: 2.4; stroke-linecap: round; stroke-linejoin: round; }

.cfan-dots { display: flex; align-items: center; gap: 7px; }
.cfan-dots i {
  width: 7px; height: 7px; border-radius: 999px; display: block;
  background: var(--cfan-line);
  transition: transform .3s var(--cfan-ease), background .3s ease;
}
.cfan-dots i.on { background: var(--cfan-fg); transform: scale(1.35); }

@media (prefers-reduced-motion: reduce) {
  .cfan-card, .cfan-bar button, .cfan-dots i { transition-duration: .01ms !important; }
}