.featured-carousel {
  position: relative;
  min-height: clamp(290px, 38vw, 410px);
  overflow: hidden;
  border: 1px solid #473650;
  background: #08060d;
  isolation: isolate;
}
.featured-carousel::after {
  content: "";
  position: absolute;
  z-index: 2;
  inset: 0;
  pointer-events: none;
  border-left: 5px solid var(--cyan);
  box-shadow: inset 0 0 0 1px rgba(255,255,255,.05);
}
.featured-carousel-art {
  position: absolute;
  z-index: 0;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  image-rendering: pixelated;
  animation: featured-enter .45s ease-out both;
}
.featured-carousel-shade {
  position: absolute;
  z-index: 1;
  inset: 0;
  background: linear-gradient(90deg, rgba(6,4,12,.98) 0%, rgba(6,4,12,.9) 35%, rgba(6,4,12,.25) 75%, rgba(6,4,12,.08) 100%), linear-gradient(0deg, rgba(6,4,12,.78), transparent 55%);
}
.featured-carousel-copy {
  position: relative;
  z-index: 3;
  width: min(570px, 68%);
  padding: clamp(26px, 4vw, 48px) clamp(30px, 5vw, 58px) 68px;
}
.featured-carousel-copy h1 {
  margin: 10px 0 4px;
  color: var(--ink);
  font-size: clamp(46px, 7vw, 84px);
  line-height: .92;
  letter-spacing: 0;
  text-shadow: 6px 6px 0 color-mix(in srgb, currentColor 25%, #3b102f);
}
.featured-carousel-copy > small { color: var(--amber); font-size: 11px; font-weight: 900; }
.featured-carousel-copy > p:not(.eyebrow) { color: #c5b8ca; font-size: 14px; line-height: 1.65; }
.featured-carousel-controls {
  position: absolute;
  z-index: 4;
  right: 22px;
  bottom: 20px;
  left: 22px;
  display: grid;
  grid-template-columns: 38px 1fr 38px;
  gap: 12px;
  align-items: center;
}
.featured-carousel-controls > button {
  width: 38px;
  height: 38px;
  border: 1px solid var(--cyan);
  background: rgba(4,14,18,.9);
  color: var(--cyan);
  font-size: 24px;
  cursor: pointer;
}
.featured-carousel-controls > div { display: flex; justify-content: center; gap: 8px; }
.featured-carousel-controls > div button {
  width: 28px;
  height: 6px;
  padding: 0;
  border: 0;
  background: #62566b;
  cursor: pointer;
}
.featured-carousel-controls > div button.active { background: var(--cyan); box-shadow: 0 0 9px var(--cyan); }
@keyframes featured-enter { from { opacity: .35; transform: scale(1.025); } to { opacity: 1; transform: scale(1); } }
@media (prefers-reduced-motion: reduce) { .featured-carousel-art { animation: none; } }
@media (max-width: 650px) {
  .featured-carousel { min-height: 400px; }
  .featured-carousel-shade { background: linear-gradient(0deg, rgba(6,4,12,.98) 0 52%, rgba(6,4,12,.2) 100%); }
  .featured-carousel-copy { position: absolute; inset: auto 0 0; width: 100%; padding: 24px 22px 72px; }
  .featured-carousel-copy h1 { font-size: 44px; }
  .featured-carousel-copy > p:not(.eyebrow) { font-size: 12px; }
  .featured-carousel-controls { right: 12px; bottom: 12px; left: 12px; grid-template-columns: 34px 1fr 34px; }
  .featured-carousel-controls > button { width: 34px; height: 34px; }
  .featured-carousel-controls > div { gap: 5px; }
  .featured-carousel-controls > div button { width: 16px; }
}

/* ==========================================================
   Featured carousel swipe-in transition
   ========================================================== */

.featured-carousel-art{
 animation:featured-art-swipe .62s cubic-bezier(.2,.75,.2,1) both;
}

.featured-carousel-copy{
 animation:featured-copy-swipe .58s cubic-bezier(.2,.75,.2,1) both;
}

.featured-carousel-shade{
 animation:featured-shade-in .5s ease-out both;
}

.featured-carousel-controls{
 animation:featured-controls-in .48s ease-out both;
}

@keyframes featured-art-swipe{
 from{
  opacity:.18;
  transform:translateX(7%) scale(1.035);
 }
 to{
  opacity:1;
  transform:translateX(0) scale(1);
 }
}

@keyframes featured-copy-swipe{
 from{
  opacity:0;
  transform:translateX(-34px);
 }
 to{
  opacity:1;
  transform:translateX(0);
 }
}

@keyframes featured-shade-in{
 from{opacity:.45}
 to{opacity:1}
}

@keyframes featured-controls-in{
 from{
  opacity:0;
  transform:translateY(8px);
 }
 to{
  opacity:1;
  transform:translateY(0);
 }
}

@media (prefers-reduced-motion:reduce){
 .featured-carousel-art,
 .featured-carousel-copy,
 .featured-carousel-shade,
 .featured-carousel-controls{
  animation:none!important;
 }
}