/* Conveyor Belt Scroll 3D — extracted from Claude Design */

/* Progressive enhancement:
   - Before/without WebGL: keep [data-cb-legacy] visible
   - html.cb3d-ok: show 3D stage, hide legacy belt
   - html.cb3d-fallback: hide 3D stage, show legacy belt
*/
.cb3d-root {
  background: #0A0A0A;
  color: #F0F0F0;
  font-family: "DM Sans", sans-serif;
  overflow-x: hidden;
}

/* Hidden until WebGL boots (also use HTML [hidden] so missing CSS can't leak remnants) */
.cb3d-root[hidden],
.cb3d-root.is-fallback {
  display: none !important;
}

html.cb3d-ok .cb3d-root:not([hidden]):not(.is-fallback) {
  display: block;
}

html.cb3d-ok [data-cb-legacy]:not([data-cb-scroll3d]) {
  display: none !important;
}

.cb3d-stage {
  position: relative;
  height: 820vh;
}

.cb3d-inner {
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  height: 100vh;
  width: 100%;
  overflow: hidden;
  background: #0A0A0A;
}

.cb3d-canvas {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  display: block;
}

.cb3d-canvas.is-hide {
  display: none;
}

.cb3d-scanlines,
.cb3d-vignette {
  position: absolute;
  inset: 0;
  pointer-events: none;
}

.cb3d-scanlines {
  opacity: 0.25;
  background: repeating-linear-gradient(
    180deg,
    rgba(255, 255, 255, 0.028) 0 1px,
    transparent 1px 3px
  );
}

.cb3d-vignette {
  background: radial-gradient(
    ellipse at 50% 45%,
    transparent 45%,
    rgba(10, 10, 10, 0.72) 100%
  );
}

.cb3d-fallback {
  position: absolute;
  inset: 0;
  display: none;
  align-items: center;
  justify-content: center;
  padding: 40px;
  text-align: center;
}

.cb3d-fallback.is-show {
  display: flex;
}

.cb3d-hud {
  position: absolute;
  left: clamp(20px, 4vw, 56px);
  bottom: clamp(84px, 12vh, 128px);
  max-width: 420px;
  pointer-events: none;
}

.cb3d-hud.is-hide {
  display: none;
}

.cb3d-rail {
  position: absolute;
  right: clamp(20px, 3vw, 44px);
  top: 50%;
  transform: translateY(-50%);
  display: flex;
  flex-direction: column;
  gap: 2px;
  pointer-events: none;
}

.cb3d-rail-item {
  display: flex;
  align-items: center;
  gap: 12px;
  justify-content: flex-end;
  height: 30px;
  opacity: 0.42;
}

.cb3d-rail-item b {
  font-family: "Oswald", sans-serif;
  font-size: 10.5px;
  font-weight: 600;
  letter-spacing: 2.2px;
  text-transform: uppercase;
  color: #b0b0b0;
  font-style: normal;
}

.cb3d-rail-item i {
  display: block;
  width: 26px;
  height: 2px;
  background: #787878;
  font-style: normal;
}

.cb3d-prog {
  position: absolute;
  left: clamp(20px, 4vw, 56px);
  right: clamp(20px, 4vw, 56px);
  bottom: 38px;
  pointer-events: none;
}

.cb3d-prog-track {
  height: 2px;
  background: #1e1e1e;
  position: relative;
}

.cb3d-prog-fill {
  position: absolute;
  left: 0;
  top: 0;
  height: 100%;
  width: 0%;
  background: #d4e600;
  box-shadow: 0 0 12px rgba(212, 230, 0, 0.6);
}

.cb3d-prog-ticks {
  display: flex;
  margin-top: 9px;
}

.cb3d-prog-ticks span {
  flex: 1;
  font-family: "Oswald", sans-serif;
  font-size: 8.5px;
  font-weight: 600;
  letter-spacing: 2px;
  color: #3a3a3a;
}

@media (max-width: 720px) {
  .cb3d-rail {
    display: none;
  }
  .cb3d-hud {
    max-width: min(420px, calc(100% - 40px));
    bottom: clamp(72px, 14vh, 110px);
  }
}

@media (prefers-reduced-motion: reduce) {
  .cb3d-hint-drip {
    animation: none !important;
  }
}