.work {
  position: relative;
  isolation: isolate;
  overflow: hidden;
  color: #f6f2ff;
  background:
    radial-gradient(circle at 18% 16%, #7e3dff45 0 1px, transparent 26%),
    radial-gradient(circle at 82% 78%, #fe62d638 0 1px, transparent 31%),
    linear-gradient(135deg, #05050c 0%, #101126 50%, #080611 100%);
}

.work::before,
.work::after {
  content: '';
  position: absolute;
  z-index: -1;
  width: 34rem;
  height: 34rem;
  border-radius: 48% 52% 53% 47% / 55% 42% 58% 45%;
  filter: blur(22px);
  opacity: .5;
  animation: liquidDrift 15s ease-in-out infinite alternate;
}

.work::before { background: #7133ff; top: -25rem; right: -14rem; }
.work::after { background: #ee4ec3; bottom: -29rem; left: -15rem; animation-delay: -8s; }
.work .eyebrow { color: #d9c3ff; }
.work .horizontal > p { color: #b8b2c7; }

.work-stage {
  perspective: 1200px;
  height: 490px;
}

.work-stage .project {
  overflow: visible;
  width: min(330px, 72vw);
  height: 390px;
  border: 1px solid #ffffff55;
  border-radius: 28px;
  color: #fff;
  background: linear-gradient(140deg, #ffffff24, #ffffff08 48%, #a152ff20);
  box-shadow: inset 0 1px #fff8, inset -2px -3px 15px #20104a55, 0 22px 60px #0008;
  backdrop-filter: blur(20px) saturate(145%);
  transform: translateX(calc(var(--offset) * 74%)) rotateY(calc(var(--offset) * -14deg)) rotateZ(calc(var(--offset) * 2deg));
  filter: none;
  opacity: .55;
}

.work-stage .project::before {
  content: '';
  position: absolute;
  inset: -2px;
  z-index: -1;
  border-radius: inherit;
  background: conic-gradient(from var(--spin), #7538ff, #ff68df, #73e8ff, #7538ff);
  filter: blur(10px);
  opacity: .62;
  animation: neonSpin 7s linear infinite;
}

.work-stage .project::after {
  content: '';
  position: absolute;
  width: 105px;
  height: 105px;
  top: 26px;
  left: 26px;
  border-radius: 48% 52% 42% 58%;
  background: radial-gradient(circle at 32% 28%, #fff9, #9a52ff60 42%, #ff61cf20 70%);
  box-shadow: inset 9px 9px 14px #fff5, 0 0 42px #a860ff99;
  animation: liquidBlob 6s ease-in-out infinite;
}

.work-stage .project:hover,
.work-stage .project.active:hover {
  opacity: 1;
  transform: translateX(calc(var(--offset) * 74%)) translateY(-20px) scale(1.08) rotateY(calc(var(--offset) * -7deg)) rotateZ(calc(var(--offset) * 2deg));
  box-shadow: inset 0 1px #fff9, 0 32px 85px #5e24d988, 0 0 48px #e55ddc55;
}

.work-stage .project.active {
  opacity: 1;
  transform: translateX(0) scale(1.07) rotateY(0) rotateZ(-2deg);
  z-index: 4;
  box-shadow: inset 0 1px #fff9, 0 30px 80px #5e24d988, 0 0 46px #a95aff55;
}

.project-shape span {
  position: relative;
  z-index: 1;
  color: #fff;
  text-shadow: 0 0 24px #cb95ff, 0 0 55px #ff83de;
}

.project-info { position: relative; z-index: 1; }
.project-info p { color: #e5d9fb; }
.work-stage { touch-action: pan-y; }
.work-stage .behance-project { text-decoration: none; padding: 12px; gap: 16px; user-select: none; }
.work-stage .behance-project::after { display: none; }
.project-cover { display: block; width: 100%; height: auto; aspect-ratio: 404 / 316; object-fit: contain; border-radius: 18px; background: #0b0915; pointer-events: none; }
.behance-project .project-info { direction: rtl; padding: 0 7px 8px; gap: 10px; flex: 1; align-items: center; }
.behance-project .project-info > div { min-width: 0; }
.behance-project .project-info svg { flex-shrink: 0; }
.behance-project h3 { font-size: 17px; line-height: 1.4; letter-spacing: 0; overflow-wrap: anywhere; }
.behance-project p { font-size: 14px; }
.behance-project:focus-visible { outline: 3px solid #8ceaff; outline-offset: 6px; }
@media (max-width: 760px) {
  .work-stage .behance-project { height: 325px; }
  .behance-project h3 { font-size: 15px; }
}
@media (prefers-reduced-motion: reduce) {
  .work-stage .project, .work-stage .project::before, .work::before, .work::after { animation: none; transition: none; }
}
.work-controls { color: #d6cfeb; }
.work-controls button { color: #fff; border-color: #ffffff55; background: #ffffff10; backdrop-filter: blur(12px); }
.work-controls button:hover { background: #b36cff; color: #18082d; }

@property --spin { syntax: '<angle>'; inherits: false; initial-value: 0deg; }
@keyframes neonSpin { to { --spin: 360deg; } }
@keyframes liquidDrift { to { transform: translate3d(5rem, 3rem, 0) scale(1.15) rotate(24deg); } }
@keyframes liquidBlob { 50% { border-radius: 63% 37% 62% 38%; transform: rotate(25deg) scale(1.12); } }
@media (max-width: 760px) {
  .work-stage { height: 360px; }
  .work-stage .project { height: 285px; width: 225px; }
  .work-stage .project::after { width: 72px; height: 72px; }
}

/* Opaque card surfaces keep the overlapping project covers hidden. */
.work-stage .behance-project {
  background: linear-gradient(140deg, #30243f, #171426 48%, #281a40);
  isolation: isolate;
  opacity: 1;
}
.work-stage .behance-project.active {
  transform: translateX(0) scale(1.07);
}
.work-stage .behance-project.active:hover {
  transform: translateX(0) scale(1.17);
}


/* A horizontal wheel: large center cover and progressively smaller side cards. */
.work-stage.wheel-stage { height: 490px; cursor: grab; }
.work-stage.wheel-stage.dragging { cursor: grabbing; }
.work-stage.wheel-stage .behance-project,
.work-stage.wheel-stage .behance-project.active,
.work-stage.wheel-stage .behance-project:hover {
  width: min(290px, 62vw); height: 360px; padding: 0; gap: 0;
  overflow: hidden; border-radius: 20px; border: 1px solid #ffffff25;
  transform: translateX(calc(var(--offset) * 86%)) scale(var(--wheel-scale)) rotateY(var(--wheel-turn));
  transition: transform 850ms cubic-bezier(.25,.1,.25,1), box-shadow 600ms ease;
  box-shadow: 0 15px 40px #0008;
}
.work-stage.wheel-stage .behance-project.active { box-shadow: 0 0 70px #8e40d94d, 0 20px 45px #0009; }
.work-stage.wheel-stage .behance-project.active:hover { transform: translateX(calc(var(--offset) * 86%)) scale(calc(var(--wheel-scale) + .05)) rotateY(var(--wheel-turn)); }
.work-stage.wheel-stage.dragging .behance-project { transition: none; }
.wheel-stage .project-cover { height: auto; width: 100%; aspect-ratio: 404 / 316; object-fit: contain; border-radius: 0; flex-shrink: 0; background: #141124; }
.wheel-stage .project-info { position: relative; inset: auto; padding: 12px 16px 16px; background: #171426; width: 100%; flex: 1; align-items: center; }
.wheel-stage .project-info h3 { font-size: 16px; }
.wheel-stage .project-info p { font-size: 12px; }
.work-stage.wheel-stage .behance-project::before { display: none; }
@media(max-width:760px) { .work-stage.wheel-stage { height: 390px; } .work-stage.wheel-stage .behance-project { height: 290px; width: 210px; } }
@media(prefers-reduced-motion:reduce) { .work-stage.wheel-stage .behance-project { transition: none; } }

@media(max-width:760px) { .wheel-stage .project-info { padding: 10px 12px 12px; } .wheel-stage .project-info h3 { font-size: 14px; line-height: 1.4; } }

/* Reserve layout space for the scaled card and keep controls outside it. */
.work-stage.wheel-stage .behance-project { min-height: 0; backface-visibility: hidden; }
.work-controls { position: relative; margin-top: 32px; align-items: center; padding-bottom: 8px; }
@media(max-width:760px) { .work-stage.wheel-stage { height: 390px; } .work-controls { margin-top: 30px; } }