/* =============================================================
   CamEleon Scroll Stage — CSS
   File: /wp-content/themes/your-child-theme/assets/cameleon-scroll-stage.css
   ============================================================= */

/* ── Stage wrapper ── */
.cam-stage {
  position: relative;
/*   z-index: 10; */
  height: 210vh;
  margin-top: clamp(34px, 6vh, 64px);
}

.cam-stage-pin {
  position: sticky;
  top: 0;
  height: 100vh;
  display: flex;
  align-items: center;
  justify-content: center;
  perspective: 1400px;
}

/* ── Tablet shell ── */
.cam-tablet {
  position: relative;
  width: min(940px, 92vw);
  aspect-ratio: 1.69;
  border-radius: clamp(22px, 3vw, 38px);
  background: linear-gradient(165deg, #222, #000 60%);
  padding: clamp(10px, 1.2vw, 16px);
  box-shadow: 0 2px 0 rgba(255,255,255,.18) inset;
  transform-style: preserve-3d;
  will-change: transform;
}

/* Bottom shadow */
.cam-tablet::after {
  content: "";
  position: absolute;
  left: 6%; right: 6%;
  bottom: -26px;
  height: 60px;
  z-index: -1;
  border-radius: 50%;
  background: radial-gradient(ellipse at center, rgba(30,25,50,.28), rgba(30,25,50,.12) 45%, transparent 72%);
  filter: blur(22px);
}

/* Camera dot */
.cam-tablet .cam-dot {
  position: absolute;
  top: 50%;
  left: 7px;
  transform: translateY(-50%);
  width: 5px;
  height: 5px;
  border-radius: 50%;
  background: radial-gradient(circle at 35% 35%, #555, #000 70%);
  box-shadow: 0 0 4px rgba(32,176,199,.6);
}

/* Edge gloss */
.cam-tablet .cam-edge-light {
  position: absolute;
  inset: 0;
  border-radius: inherit;
  pointer-events: none;
  background: linear-gradient(110deg, rgba(255,255,255,.16), transparent 28%, transparent 72%, rgba(255,255,255,.1));
  mix-blend-mode: screen;
}

/* ── Screen ── */
.cam-screen {
  position: relative;
  width: 100%;
  height: 100%;
  border-radius: clamp(13px, 1.8vw, 24px);
  overflow: hidden;
  background: #fff;
  transform: translateZ(2px);
}

/* Glare sweep */
.cam-glare {
  position: absolute;
  inset: 0;
  z-index: 6;
  pointer-events: none;
  background: linear-gradient(105deg, transparent 38%, rgba(255,255,255,.28) 50%, transparent 62%);
  transform: translateX(-130%);
}

/* ── Video inside screen ── */
.cam-stage-video {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: contain;
  object-position: center;
  display: block;
  background: #05070a;
  z-index: 8;
}

/* ── Floating chips ── */
.cam-chip {
  position: absolute;
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 10px 16px 10px 10px;
  border-radius: 40px;
  background: rgba(255,255,255,.82);
  backdrop-filter: blur(14px);
  -webkit-backdrop-filter: blur(14px);
  border: 1px solid rgba(255,255,255,.9);
  box-shadow: 0 16px 48px rgba(20,30,45,.16);
  font-family: Inter, sans-serif;
  font-size: 13px;
  font-weight: 700;
  color: #000;
  white-space: nowrap;
  pointer-events: none;
}
.cam-chip small {
  display: block;
  font-size: 11px;
  font-weight: 500;
  color: #7b7b7b;
  margin-top: 1px;
}
.cam-chip .cam-ic {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 36px;
  height: 36px;
  border-radius: 50%;
  flex-shrink: 0;
}
.cam-chip .cam-ic svg {
  width: 18px;
  height: 18px;
}

/* Chip positions */
.cam-chip.c1 { top: 18%;  left: -2%; }
.cam-chip.c2 { top: 10%;  right: -2%; }
.cam-chip.c3 { bottom: 18%; left: 2%; }

/* ── Mobile ── */
@media (max-width: 768px) {
  .cam-stage {
    height: auto !important;
    margin-top: clamp(20px, 4vh, 40px);
  }
  .cam-stage-pin {
    position: relative;
    top: auto;
    height: auto;
    padding: clamp(24px, 5vw, 48px) 0;
  }
  .cam-chip { display: none; }
  .cam-tablet {
    transform: none !important;
    width: min(96vw, 480px);
  }
  .cam-tablet::after { display: none; }
  .cam-stage-mobile-ready .cam-tablet {
    opacity: 1 !important;
  }
}