:root{
  --cf-accent: hsl(199 89% 48%);
  --cf-bg: hsl(222.2 84% 4.9%);
  --cf-text: hsl(210 40% 98%);
  --cf-muted: hsl(215 20.2% 65.1%);
}

.cf-main-wrapper{
  position:relative;width:100%;min-height:600px;display:flex;flex-direction:column;align-items:center;justify-content:center;overflow:hidden;padding:48px 0;
}

.cf-ambient-light{
  position:absolute;inset:0;opacity:.5;
  background:radial-gradient(ellipse at center, hsl(199 89% 48% / .1) 0%, transparent 60%);
  pointer-events:none;
}

.cf-heading{font-size:2.25rem;font-weight:700;color:#000;margin-bottom:48px;text-align:center;z-index:10;}
@media(min-width:768px){.cf-heading{font-size:2.5rem;}}

.cf-viewport{position:relative;width:100%;max-width:72rem;perspective:1000px;padding:0 16px;}
.cf-slides-container{position:relative;height:420px;display:flex;align-items:center;justify-content:center;}

.cf-card{
  position:absolute;width:256px;height:384px;cursor:pointer;
  transition:transform .5s cubic-bezier(.25,.46,.45,.94),opacity .5s;
  transform-style:preserve-3d;left:50%;margin-left:-128px;will-change:transform,opacity;outline:none;
}
@media(min-width:768px){.cf-card{width:288px;height:400px;margin-left:-144px;}}

.cf-card-body{position:relative;width:100%;height:100%;border-radius:16px;overflow:hidden;background:var(--cf-bg);box-shadow:0 25px 50px -12px rgba(0,0,0,.5);}
.cf-card-img{width:100%;height:100%;object-fit:cover;transition:transform .7s ease;display:block;}
.cf-card:hover .cf-card-img{transform:scale(1.08);}

.cf-card-gradient{position:absolute;inset:0;background:linear-gradient(to top,hsl(220 25% 10%/.95) 0%, hsl(220 25% 10%/.2) 40%, transparent 100%);}
.cf-card-info{position:absolute;bottom:0;left:0;right:0;padding:24px;}
.cf-card-label{font-size:1.25rem;font-weight:700;color:var(--cf-text);text-align:center;text-shadow:0 2px 4px rgba(0,0,0,.5);margin:0;}
@media(min-width:768px){.cf-card-label{font-size:1.5rem;}}

.cf-card-outline{position:absolute;inset:0;border-radius:16px;border:2px solid var(--cf-accent);opacity:0;transition:opacity .25s ease;pointer-events:none;}
.cf-card.cf-selected .cf-card-outline,.cf-card:hover .cf-card-outline{opacity:1;}
.cf-card:not(.cf-selected) .cf-card-outline{border-color:hsl(199 89% 48% / .3);}

@keyframes cf-glow-anim{
  0%,100%{box-shadow:0 0 20px hsl(199 89% 48%/.3),0 25px 50px -12px rgba(0,0,0,.5);}
  50%{box-shadow:0 0 40px hsl(199 89% 48%/.5),0 25px 50px -12px rgba(0,0,0,.5);}
}
.cf-card.cf-selected .cf-card-body{animation:cf-glow-anim 2s ease-in-out infinite;}

.cf-controls{display:flex;gap:16px;margin-top:32px;z-index:10;}
.cf-arrow-btn{
  padding:12px;border-radius:50%;
  background:hsl(217.2 32.6% 17.5% / .8);
  color:var(--cf-text);border:none;cursor:pointer;
  transition:transform .2s ease,background .2s ease;
  backdrop-filter:blur(8px);display:flex;align-items:center;justify-content:center;
}
.cf-arrow-btn:hover{background:hsl(217.2 32.6% 17.5%);transform:scale(1.06);}
.cf-arrow-btn:focus-visible{outline:3px solid hsl(199 89% 48% / .55);outline-offset:3px;}
.cf-arrow-btn svg{width:24px;height:24px;rotate:180deg;}

.cf-pagination{margin-top:24px;z-index:10;color:var(--cf-muted);font-size:1.125rem;}
.cf-pagination-active{color:var(--cf-accent);font-weight:700;}
.cf-pagination-divider{margin:0 8px;}

@media (prefers-reduced-motion: reduce){
  .cf-card,.cf-card-img,.cf-card.cf-selected .cf-card-body{transition:none !important;animation:none !important;}
}