/* =========================================================
   V33 Demo Carousel 2.0
   Safe module, does not break old demo grid
   ========================================================= */

.v33-demo-carousel{
  margin-top:34px;
  position:relative;
}

.v33-demo-shell{
  position:relative;
  max-width:1120px;
  margin:0 auto;
  padding:18px;
  border-radius:30px;
  background:
    radial-gradient(circle at 20% 20%, rgba(0,229,255,.13), transparent 34%),
    radial-gradient(circle at 80% 30%, rgba(255,90,95,.13), transparent 36%),
    rgba(255,255,255,.045);
  border:1px solid rgba(255,255,255,.12);
  box-shadow:0 28px 90px rgba(0,0,0,.34);
  overflow:hidden;
}

.v33-demo-track{
  display:flex;
  gap:16px;
  overflow-x:auto;
  scroll-snap-type:x mandatory;
  -webkit-overflow-scrolling:touch;
  padding:8px 4px 18px;
  scrollbar-width:none;
}

.v33-demo-track::-webkit-scrollbar{
  display:none;
}

.v33-demo-card{
  flex:0 0 245px;
  scroll-snap-align:center;
  position:relative;
  min-height:260px;
  border-radius:26px;
  padding:18px;
  overflow:hidden;
  text-decoration:none;
  color:#fff;
  background:
    linear-gradient(180deg, rgba(15,18,32,.96), rgba(8,10,18,.98));
  border:1px solid rgba(255,255,255,.13);
  box-shadow:
    0 20px 60px rgba(0,0,0,.34),
    inset 0 0 36px rgba(255,255,255,.03);
  transition:
    transform .25s ease,
    border-color .25s ease,
    box-shadow .25s ease;
}

.v33-demo-card::before{
  content:"";
  position:absolute;
  inset:-35%;
  background:
    radial-gradient(circle at 25% 25%, rgba(0,229,255,.20), transparent 36%),
    radial-gradient(circle at 72% 35%, rgba(255,90,95,.18), transparent 38%),
    radial-gradient(circle at 50% 82%, rgba(255,122,24,.14), transparent 40%);
  opacity:.58;
  filter:blur(16px);
  transform:rotate(0deg);
  animation:v33DemoAura 10s linear infinite;
  pointer-events:none;
}

.v33-demo-card:hover{
  transform:translateY(-8px) scale(1.025);
  border-color:rgba(0,229,255,.42);
  box-shadow:
    0 28px 85px rgba(0,0,0,.42),
    0 0 34px rgba(0,229,255,.16);
}

.v33-demo-card > *{
  position:relative;
  z-index:1;
}

.v33-demo-icon{
  width:74px;
  height:74px;
  border-radius:24px;
  display:flex;
  align-items:center;
  justify-content:center;
  font-size:42px;
  margin-bottom:18px;
  background:rgba(255,255,255,.07);
  border:1px solid rgba(255,255,255,.13);
}

.v33-demo-card h3{
  font-size:22px;
  margin:0 0 8px;
}

.v33-demo-card p{
  margin:0;
  color:#cbd5e1;
  line-height:1.55;
  font-size:14px;
}

.v33-demo-tag{
  display:inline-flex;
  margin-top:16px;
  padding:7px 11px;
  border-radius:999px;
  font-size:12px;
  color:#fff;
  background:linear-gradient(135deg, rgba(0,229,255,.22), rgba(255,90,95,.18));
  border:1px solid rgba(255,255,255,.12);
}

.v33-demo-controls{
  display:flex;
  justify-content:center;
  gap:12px;
  margin-top:18px;
}

.v33-demo-btn{
  width:46px;
  height:46px;
  border-radius:999px;
  border:1px solid rgba(255,255,255,.14);
  background:rgba(255,255,255,.06);
  color:#fff;
  font-size:24px;
  cursor:pointer;
  transition:.22s ease;
}

.v33-demo-btn:hover{
  background:linear-gradient(135deg,#00E5FF,#6C63FF);
  box-shadow:0 0 24px rgba(0,229,255,.24);
}

@keyframes v33DemoAura{
  0%{transform:rotate(0deg) translate(-2%, -2%)}
  50%{transform:rotate(180deg) translate(3%, 2%)}
  100%{transform:rotate(360deg) translate(-2%, -2%)}
}

@media(max-width:768px){
  .v33-demo-shell{
    padding:14px;
    border-radius:24px;
  }

  .v33-demo-card{
    flex-basis:78vw;
    min-height:235px;
  }

  .v33-demo-card:hover{
    transform:none;
  }

  .v33-demo-card::before{
    animation:none;
    opacity:.42;
  }
}

/* =========================================================
   V33.1 Hide old demo grid after carousel is active
   ========================================================= */

section[data-v33-carousel-ready="1"] .demo-grid{
  display:none !important;
}