/* Content carousel — timeline + slides.
   Behaviour: assets/js/components/carousel.js
   Notes: docs/component-carousel-notes.md */

/* Reduced motion. */
@media (prefers-reduced-motion:reduce){
  .carousel-label,
.carousel-node{
      opacity:1!important;
      transform:none!important;
      transition:none!important;
      animation:none!important;
  }
}
/* No-JS fallback. */
.no-js .carousel-label,
.no-js .carousel-node{
  opacity:1!important;
  transform:none!important;
}

.carousel{
  background:#faf9f6;
  position:relative;z-index:6;
  margin-top:-3rem;
  padding:0;
  overflow:hidden;
}
.carousel::before{
  content:'';position:absolute;top:0;left:0;right:0;
  height:120px;
  background:linear-gradient(180deg,#000 0%,#faf9f6 100%);
  pointer-events:none;
}
.carousel-inner{
  max-width:1100px;margin:0 auto;
  padding:10rem 3rem 6rem;
  text-align:center;
}
.carousel-label{
  font-family:var(--display);font-size:.8rem;font-weight:600;
  letter-spacing:.3em;text-transform:uppercase;
  color:#999;margin-bottom:3rem;
  opacity:0;transform:translateY(20px);
  transition:opacity .8s ease,transform .8s ease;
}
.carousel-label.visible{opacity:1;transform:translateY(0)}
.carousel-timeline{
  display:flex;align-items:center;justify-content:center;
  max-width:750px;margin:0 auto 3.5rem;
  position:relative;
  padding:0 1rem;
}
.carousel-timeline::before{
  content:'';position:absolute;
  top:50%;left:40px;right:40px;
  height:1px;
  background:linear-gradient(90deg,
    transparent,
    rgba(230,173,31,.3) 15%,
    rgba(230,173,31,.45) 50%,
    rgba(230,173,31,.3) 85%,
    transparent
  );
}
.carousel-node{
  display:flex;flex-direction:column;align-items:center;
  flex:1;position:relative;z-index:1;
  opacity:0;transform:translateY(20px);
  transition:opacity .6s ease,transform .6s ease;
  background:none;border:none;cursor:pointer;padding:0;
}
.carousel-node.visible{opacity:1;transform:translateY(0)}
.carousel-dot{
  width:12px;height:12px;border-radius:50%;
  background:var(--gold);
  margin-bottom:12px;
  position:relative;
  transition:transform .4s ease;
}
.carousel-dot::after{
  content:'';position:absolute;inset:-5px;
  border-radius:50%;
  border:1px solid rgba(230,173,31,.2);
}
.carousel-node:hover .carousel-dot{transform:scale(1.3)}
.carousel-node-label{
  font-family:var(--display);font-size:clamp(.6rem,1.2vw,.75rem);
  font-weight:600;letter-spacing:.12em;text-transform:uppercase;
  color:#999;white-space:nowrap;
  transition:color .4s ease;
}
.carousel-node--active .carousel-dot{
  width:16px;height:16px;
  box-shadow:0 0 0 5px rgba(230,173,31,.12);
}
.carousel-node--active .carousel-dot::after{
  inset:-7px;
  border-color:rgba(230,173,31,.25);
}
.carousel-node--active .carousel-node-label{color:var(--gold-dark);font-weight:600;}
.carousel-track{
  position:relative;
  min-height:280px;
  display:flex;align-items:center;justify-content:center;
}
.carousel-slide{
  position:absolute;inset:0;
  display:flex;flex-direction:column;
  align-items:center;justify-content:center;
  text-align:center;
  opacity:0;
  transform:translateY(15px);
  transition:opacity .8s ease,transform .8s ease;
  pointer-events:none;
}
.carousel-slide--active{
  opacity:1;transform:translateY(0);
  pointer-events:auto;
}
.carousel-headline{
  font-family:var(--display);
  font-size:clamp(2rem,5vw,3.8rem);
  font-weight:400;letter-spacing:.03em;
  text-transform:uppercase;line-height:1.15;
  color:var(--charcoal);
  margin-bottom:1.2rem;
}
.carousel-headline .gold{color:var(--gold-dark)}
.carousel-sub{
  font-family:var(--body);
  font-size:clamp(1rem,1.4vw,1.15rem);
  font-weight:400;line-height:1.7;
  color:#999;
  max-width:520px;margin:0 auto;
}

@media(max-width:768px){
  .carousel-inner{padding:8rem 1.5rem 4rem}
  .carousel-timeline{flex-wrap:nowrap;gap:0;padding:0}
  .carousel-node-label{font-size:.5rem;letter-spacing:.1em}
  .carousel-timeline::before{left:20px;right:20px}
}

@media(max-width:480px){
  .carousel-timeline{gap:0}
  .carousel-node-label{font-size:.45rem;letter-spacing:.08em}
}

/* Cross-fade only; .carousel-slide is not in the global force list. */
@media (prefers-reduced-motion:reduce){
  .carousel-slide{transition:none!important;animation:none!important}
}