/* ============================================================
   TOKENS
   ============================================================ */
:root {
  --navy:       #0F1629;
  --navy-mid:   #162040;
  --navy-card:  #1C2A52;
  --gold:       #60a5fa;
  --gold-soft:  #93c5fd;
  --gold-dim:   rgba(59,130,246,0.18);
  --white:      #F5F0EA;
  --muted:      #8492B4;

  /* All slots are sized to active; side slots are scaled down via transform */
  --size-active: 180px;
  --scale-side:  0.61;       /* 110 / 180 ≈ 0.61  */
  --overlap:     38px;

  --speed: 520ms;
  --ease:  cubic-bezier(0.38, 0.02, 0.18, 1.0);
}

/* ============================================================
   RESET / BASE
   ============================================================ */
*, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; }



/* ============================================================
   PAGE WRAPPER
   ============================================================ */
.my-custom-carousel .page-wrapper {
  display: flex;
  flex-direction: column;
  align-items: center;
  width: 100%;
  max-width: 620px;
  margin: 0 auto;
  
}

.my-custom-carousel .eyebrow {
  font-size: 0.7rem;
  font-weight: 600;
  letter-spacing: 0.22em;
  text-transform: uppercase;
  color: var(--gold);
  margin-bottom: 8px;
}

.my-custom-carousel .headline {
  font-size: clamp(2rem, 5vw, 3rem);
  font-weight: 700;
  letter-spacing: -0.03em;
  color: var(--white);
  margin-bottom: 44px;
  text-align: center;
}

/* ============================================================
   CAROUSEL CONTAINER
   ============================================================ */
.my-custom-carousel .carousel-container {
  position: relative;
  width: 100%;
  max-width: 560px;
  height: 260px;
  
  background-color: rgba(255, 255, 255, 0.027);
  backdrop-filter: blur(8px);
  -webkit-backdrop-filter: blur(8px); 

  border-radius: 24px;
  margin-left: auto;
  margin-right: auto;
  
  border: 1px solid rgba(255, 255, 255, 0.2); 
  
  box-shadow: none; 
    
  display: flex;
  align-items: center;
  justify-content: center;
}

/* ============================================================
   TRACK
   The track clips overflow so off-screen slots are invisible.
   ============================================================ */
.my-custom-carousel .carousel-track {
  position: relative;
  width: 100%;
  height: 100%;
  overflow: hidden;
  border-radius: 24px;
  margin-left: auto;
  margin-right: auto;
}

/* ============================================================
   SLOTS
   Every slot is the same rendered size (--size-active × --size-active).
   Position is controlled exclusively by translateX + scale.
   This means CSS transitions only need to animate transform — the
   smoothest, GPU-accelerated property — nothing else.
   ============================================================ */
.my-custom-carousel .slot {
  position: absolute;
  top: 50%;
  left: 50%;
  width: var(--size-active);
  height: var(--size-active);
  /* Center the element on its own origin point */
  margin-left: calc(var(--size-active) / -2);
  margin-top:  calc(var(--size-active) / -2);

  display: flex;
  align-items: center;
  justify-content: center;

  /* All movement is via transform only */
  transition: transform var(--speed) var(--ease),
              opacity  var(--speed) var(--ease);
  will-change: transform;
}

/*
  Position tokens — computed once, reused:
    active  →  translateX(0)           scale(1)
    prev    →  translateX(Xprev)       scale(--scale-side)
    next    →  translateX(Xnext)       scale(--scale-side)
    far-left → translateX(Xfar-left)  scale(--scale-side)   [invisible, off-screen]
    far-right→ translateX(Xfar-right) scale(--scale-side)   [invisible, off-screen]

  Xprev  = -(active/2 + side/2 - overlap)
         = -(90 + 55 - 38) = -107px
  Xnext  = +(active/2 + side/2 - overlap)
         = +(90 + 55 - 38) = +107px
  The off-screen positions just push further in the same direction.
*/
.my-custom-carousel .slot--active {
  transform: translateX(0) scale(1);
  z-index: 3;
  opacity: 1;
}

.my-custom-carousel .slot--prev {
  transform: translateX(-107px) scale(var(--scale-side));
  z-index: 2;
  opacity: 1;
}

.my-custom-carousel .slot--next {
  transform: translateX(107px) scale(var(--scale-side));
  z-index: 2;
  opacity: 1;
}

/* Waiting off-screen right (the "next-next", pre-staged) */
.my-custom-carousel .slot--far-right {
  transform: translateX(300px) scale(var(--scale-side));
  z-index: 1;
  opacity: 0;
}

/* Waiting off-screen left (the "prev-prev", pre-staged) */
.my-custom-carousel .slot--far-left {
  transform: translateX(-300px) scale(var(--scale-side));
  z-index: 1;
  opacity: 0;
}

/* During transition: no transition (instant reposition for pre-staging) */
.my-custom-carousel .slot--no-transition {
  transition: none !important;
}

/* ============================================================
   AVATAR CIRCLES
   ============================================================ */
.my-custom-carousel .avatar {
  width: 100%;
  height: 100%;
  border-radius: 50%;
  background: var(--navy-card);
  border: 3px solid rgba(59,130,246,0.25);
  display: flex;
  align-items: center;
  justify-content: center;
  font-weight: 700;
  font-size: 2.4rem;
  color: var(--gold);
  letter-spacing: 0.04em;
  user-select: none;
  position: relative;
  overflow: hidden;
  /* Avatar styling transitions separately */
  transition:
    border-color var(--speed) var(--ease),
    box-shadow   var(--speed) var(--ease),
    filter       var(--speed) var(--ease);
}

.my-custom-carousel .avatar img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  border-radius: 50%;
  display: block;
}

/* Active avatar — gold ring + glow */
.my-custom-carousel .slot--active .avatar {
  border-color: var(--gold);
  filter: brightness(1);
  box-shadow:
    0 0 0 5px rgba(59,130,246,0.15),
    0 0 36px rgba(59,130,246,0.28),
    0 8px 32px rgba(0,0,0,0.6);
}

/* Pulse halo on active */
.my-custom-carousel .slot--active .avatar::after {
  content: '';
  position: absolute;
  inset: -8px;
  border-radius: 50%;
  border: 2px solid rgba(59,130,246,0.3);
  animation: halo-pulse 2.6s ease-in-out infinite;
  pointer-events: none;
}

@keyframes halo-pulse {
  0%, 100% { opacity: 0.6; transform: scale(1); }
  50%       { opacity: 0.15; transform: scale(1.08); }
}

/* Side avatars — dimmed */
.my-custom-carousel .slot--prev .avatar,
.my-custom-carousel .slot--next .avatar {
  border-color: rgba(59,130,246,0.2);
  filter: brightness(0.65);
  box-shadow: none;
}

/* ============================================================
   FADE EDGES
   ============================================================ */
.my-custom-carousel .carousel-track::before,
.my-custom-carousel .carousel-track::after {
  content: '';
  position: absolute;
  top: 0; bottom: 0;
  width: 68px;
  z-index: 10;
  pointer-events: none;
}
.my-custom-carousel .carousel-track::before {
  display: none;
  left: 0;
  background: linear-gradient(to right, var(--navy-mid), transparent);
}
.my-custom-carousel .carousel-track::after {
  display: none;
  right: 0;
  background: linear-gradient(to left, var(--navy-mid), transparent);
}

/* ============================================================
   NAV ARROWS
   ============================================================ */
.my-custom-carousel .nav-arrow {
  position: absolute;
  top: 50%;
  transform: translateY(-50%);
  z-index: 20;
  width: 40px;
  height: 40px;
  border-radius: 50%;
  border: 1px solid rgba(59,130,246,0.25);
  background: rgba(22,32,64,0.85);
  color: var(--gold);
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
  backdrop-filter: blur(8px);
  transition: background 0.2s ease, border-color 0.2s ease, transform 0.2s ease;
}
.my-custom-carousel .nav-arrow svg { width: 18px; height: 18px; }
.my-custom-carousel .nav-arrow--left  { left: -20px; }
.my-custom-carousel .nav-arrow--right { right: -20px; }
.my-custom-carousel .nav-arrow:hover {
  background: rgba(59,130,246,0.18);
  border-color: var(--gold);
  transform: translateY(-50%) scale(1.1);
}
.my-custom-carousel .nav-arrow:active { transform: translateY(-50%) scale(0.96); }

/* ============================================================
   INFO PANEL
   ============================================================ */
.my-custom-carousel .info-panel {
  margin-top: 36px;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 20px;
  min-height: 60px;
}

.my-custom-carousel .info-inner {
  display: flex;
  align-items: baseline;
  gap: 12px;
  text-align: center;
  flex-wrap: wrap;
  justify-content: center;
}

.my-custom-carousel .info-name {
  font-size: 1.35rem;
  font-weight: 700;
  color: #f1f5f9;
  letter-spacing: -0.01em;
}

.my-custom-carousel .info-divider {
  color: var(--gold);
  font-size: 1.1rem;
  opacity: 0.6;
}

.my-custom-carousel .info-position {
  font-size: 0.82rem;
  font-weight: 500;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--muted);
}

.my-custom-carousel .info-inner.fade-out .info-name,
.my-custom-carousel .info-inner.fade-out .info-position,
.my-custom-carousel .info-inner.fade-out .info-divider {
  opacity: 0;
  transform: translateY(5px);
  transition: opacity 0.18s ease, transform 0.18s ease;
}

.my-custom-carousel .info-inner.fade-in .info-name,
.my-custom-carousel .info-inner.fade-in .info-position,
.my-custom-carousel .info-inner.fade-in .info-divider {
  opacity: 1;
  transform: translateY(0);
  transition: opacity 0.28s ease 0.04s, transform 0.28s ease 0.04s;
}

/* ============================================================
   DOTS
   ============================================================ */
.my-custom-carousel .info-dots {
  display: flex;
  gap: 7px;
  align-items: center;
}

.my-custom-carousel .dot {
  width: 6px;
  height: 6px;
  border-radius: 50%;
  background: rgba(132,146,180,0.35);
  transition: background 0.3s ease, width 0.3s ease;
  cursor: pointer;
  border: none;
  padding: 0;
}

.my-custom-carousel .dot.dot--active {
  background: var(--gold);
  width: 20px;
  border-radius: 3px;
}

/* ============================================================
   PROGRESS BAR
   ============================================================ */
.my-custom-carousel .progress-bar {
  position: absolute;
  bottom: 0;
  left: 0;
  height: 2px;
  border-radius: 0 2px 2px 0;
  background: var(--gold);
  opacity: 0.5;
  width: 0;
}

.my-custom-carousel .progress-bar.running {
  animation: progress-fill 3s linear forwards;
}

@keyframes progress-fill {
  from { width: 0; }
  to   { width: 100%; }
}

/* ============================================================
   RESPONSIVE
   ============================================================ */
@media (max-width: 480px) {
  :root {
    --size-active: 140px;
    --scale-side: 0.64;
  }
  .my-custom-carousel .carousel-container { height: 210px; }
  .my-custom-carousel .slot--prev  { transform: translateX(-84px) scale(var(--scale-side)); }
  .my-custom-carousel .slot--next  { transform: translateX(84px)  scale(var(--scale-side)); }
  .my-custom-carousel .slot--far-left  { transform: translateX(-240px) scale(var(--scale-side)); }
  .my-custom-carousel .slot--far-right { transform: translateX(240px)  scale(var(--scale-side)); }
  .my-custom-carousel .nav-arrow--left  { left: -16px; }
  .nav-arrow--right { right: -16px; }
}

/* Reduced motion */
@media (prefers-reduced-motion: reduce) {
  .slot, .avatar { transition: none !important; }
  .slot--active .avatar::after { animation: none; }
  .progress-bar.running { animation: none; }
}