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

/* ── Brand tokens ── */
:root {
  --cam-green:  #3bb78a;
  --cam-teal:   #20b0c7;
  --cam-purple: #784f9e;
  --cam-grey:   #7b7b7b;
  --cam-black:  #000000;
  --cam-white:  #ffffff;
}

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

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

/* ── iPad frame ── */
.cam-tablet {
  position: relative;
  width: min(860px, 88vw);
  aspect-ratio: 4 / 2.72;
  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;
}
.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);
}
.cam-tablet-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);
}
.cam-tablet-edge {
  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: var(--cam-white);
  transform: translateZ(2px);
}
.cam-glare {
  position: absolute;
  inset: 0;
  z-index: 6;
  pointer-events: none;
  background: linear-gradient(115deg,
    transparent 30%,
    rgba(255,255,255,.16) 44%,
    transparent 58%);
  transform: translateX(-130%);
}
#cam-client-shot {
  position: absolute;
  inset: 0;
  z-index: 5;
  width: 100%; height: 100%;
  object-fit: cover;
  object-position: top;
}

/* ── Demo UI shell ── */
.cam-ui {
  position: absolute;
  inset: 0;
  display: flex;
  font-size: clamp(7px, 1vw, 10.5px);
}

/* Sidebar */
.cam-ui-side {
  width: 27%;
  border-right: 1px solid rgba(0,0,0,.08);
  background: rgba(0,0,0,.015);
  padding: 1.6em;
  display: flex;
  flex-direction: column;
}
.cam-ui-logo {
  font-weight: 800;
  font-size: 1.3em;
  color: var(--cam-green);
  letter-spacing: -.01em;
  margin-bottom: 1em;
}
.cam-ui-process-title {
  font-weight: 800;
  font-size: 1.15em;
  color: var(--cam-black);
}
.cam-ui-prog {
  margin: .8em 0 .3em;
  height: .4em;
  border-radius: 99px;
  background: rgba(0,0,0,.06);
  overflow: hidden;
}
.cam-ui-prog i {
  display: block;
  height: 100%;
  border-radius: 99px;
  background: linear-gradient(90deg, var(--cam-green), var(--cam-teal));
  transition: width .8s cubic-bezier(.77,0,.18,1);
}
.cam-ui-stepcnt {
  font-size: .9em;
  color: var(--cam-grey);
  margin-bottom: 1.4em;
  font-weight: 600;
}
.cam-ui-steps {
  display: flex;
  flex-direction: column;
  gap: .35em;
}
.cam-ui-step {
  display: flex;
  align-items: center;
  gap: .8em;
  padding: .55em .7em;
  border-radius: .7em;
  transition: background .4s;
}
.cam-sn {
  flex: none;
  display: flex;
  align-items: center;
  justify-content: center;
  width: 1.5em; height: 1.5em;
  border-radius: 50%;
  background: rgba(0,0,0,.06);
  color: var(--cam-grey);
  font-size: .8em;
  font-weight: 800;
  transition: .4s;
}
.cam-sl {
  font-size: .95em;
  color: var(--cam-grey);
  opacity: .65;
  font-weight: 600;
  transition: .4s;
}
.cam-done .cam-sn  { background: var(--cam-green);  color: var(--cam-white); }
.cam-done .cam-sl  { opacity: 1; }
.cam-active        { background: rgba(120,79,158,.08); box-shadow: 0 0 0 1px rgba(120,79,158,.18) inset; }
.cam-active .cam-sn { background: var(--cam-purple); color: var(--cam-white); }
.cam-active .cam-sl { color: var(--cam-black); opacity: 1; font-weight: 800; }

/* Main panel */
.cam-ui-main {
  flex: 1;
  display: flex;
  flex-direction: column;
  min-width: 0;
}
.cam-ui-head {
  padding: 1.4em 1.8em;
  border-bottom: 1px solid rgba(0,0,0,.08);
}
.cam-ui-head h3 {
  font-size: 1.3em;
  font-weight: 800;
  color: var(--cam-black);
  margin: 0 0 .3em;
}
.cam-ui-head p {
  margin: 0;
  font-size: .92em;
  color: var(--cam-grey);
  line-height: 1.5;
}
.cam-ui-body {
  flex: 1;
  padding: 1.5em 1.8em;
  overflow: hidden;
}
.cam-ui-card {
  position: relative;
  border: 1px solid rgba(0,0,0,.08);
  border-radius: 1.1em;
  background: rgba(0,0,0,.015);
  padding: 1.4em;
}
.cam-card-title {
  font-weight: 800;
  font-size: 1.05em;
  margin-bottom: 1.1em;
  color: var(--cam-black);
}
.cam-ui-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 1em;
}
.cam-field label {
  display: block;
  font-size: .82em;
  font-weight: 600;
  color: var(--cam-grey);
  margin-bottom: .4em;
}
.cam-input {
  display: flex;
  align-items: center;
  justify-content: space-between;
  background: var(--cam-white);
  border: 1px solid rgba(0,0,0,.14);
  border-radius: .7em;
  padding: .7em .9em;
  font-size: .95em;
  font-weight: 600;
  color: var(--cam-black);
  transition: border .3s, box-shadow .3s;
}
.cam-input.lit {
  border-color: var(--cam-green);
  box-shadow: 0 0 0 3px rgba(59,183,138,.18);
}
.cam-input svg {
  width: 1em; height: 1em;
  stroke: var(--cam-grey);
  flex: none;
}
.cam-span2 { grid-column: 1 / -1; }

/* Tooltip */
.cam-tip {
  position: absolute;
  top: -3.4em;
  right: 6%;
  z-index: 3;
  background: var(--cam-purple);
  color: var(--cam-white);
  border-radius: .8em;
  padding: .7em 1em;
  font-size: .85em;
  font-weight: 600;
  line-height: 1.35;
  opacity: 0;
  transform: translateY(8px) scale(.94);
  transform-origin: bottom right;
  pointer-events: none;
}
.cam-tip::after {
  content: '';
  position: absolute;
  bottom: -.4em;
  right: 2.2em;
  width: .9em; height: .9em;
  background: var(--cam-purple);
  transform: rotate(45deg);
}

/* Notes row */
.cam-ui-notes {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 1em;
  margin-top: 1.2em;
}
.cam-note {
  border-radius: .9em;
  padding: 1em;
  border: 1px solid;
}
.cam-note-g { border-color: rgba(59,183,138,.3);  background: rgba(59,183,138,.07); }
.cam-note-p { border-color: rgba(120,79,158,.3); background: rgba(120,79,158,.07); }
.cam-note b  { display: block; font-size: .9em; margin-bottom: .3em; }
.cam-note-g b { color: var(--cam-green); }
.cam-note-p b { color: var(--cam-purple); }
.cam-note span { font-size: .82em; color: var(--cam-grey); line-height: 1.45; }

/* Footer bar */
.cam-ui-foot {
  display: flex;
  align-items: center;
  gap: 1.2em;
  padding: 1.1em 1.8em;
  border-top: 1px solid rgba(0,0,0,.08);
}
.cam-ui-btn {
  display: inline-flex;
  align-items: center;
  gap: .5em;
  border-radius: .7em;
  padding: .6em 1.1em;
  font-size: .9em;
  font-weight: 700;
  border: 1px solid rgba(0,0,0,.14);
  background: var(--cam-white);
  color: var(--cam-grey);
  white-space: nowrap;
}
.cam-btn-next {
  border: 0;
  background: var(--cam-purple);
  color: var(--cam-white);
}
.cam-foot-bar {
  flex: 1;
  height: .45em;
  border-radius: 99px;
  background: rgba(0,0,0,.06);
  overflow: hidden;
}
.cam-foot-bar i {
  display: block;
  height: 100%;
  border-radius: 99px;
  background: linear-gradient(90deg, var(--cam-green), var(--cam-teal));
  transition: width .8s cubic-bezier(.77,0,.18,1);
}
.cam-foot-pct {
  font-size: .85em;
  font-weight: 600;
  color: var(--cam-grey);
  min-width: 7.5em;
  text-align: right;
  white-space: nowrap;
}

/* ── Animated cursor ── */
#cam-cursor {
  position: absolute;
  z-index: 7;
  width: 2.2em; height: 2.2em;
  left: 0; top: 0;
  opacity: 0;
  pointer-events: none;
  filter: drop-shadow(0 3px 6px rgba(0,0,0,.3));
}
#cam-cursor svg { width: 100%; height: 100%; }
.cam-click {
  position: absolute;
  inset: -40%;
  border-radius: 50%;
  border: 2px solid var(--cam-purple);
  opacity: 0;
  transform: scale(.4);
}

/* ── Replay button ── */
.cam-play-wrap {
  position: absolute;
  inset: 0;
  z-index: 8;
  display: flex;
  align-items: center;
  justify-content: center;
  pointer-events: none;
}
.cam-play-btn {
  pointer-events: auto;
  display: flex;
  align-items: center;
  justify-content: center;
  width: 5.4em; height: 5.4em;
  border-radius: 50%;
  border: 0;
  cursor: pointer;
  background: rgba(255,255,255,.92);
  backdrop-filter: blur(6px);
  box-shadow: 0 18px 50px rgba(0,0,0,.25);
  opacity: 0;
  transform: scale(.6);
}
.cam-play-btn svg {
  width: 2em; height: 2em;
  fill: var(--cam-green);
  margin-left: .3em;
}

/* ── Floating chips ── */
.cam-chip {
  position: absolute;
  z-index: 11;
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 12px 18px;
  border-radius: 16px;
  background: rgba(255,255,255,.8);
  backdrop-filter: blur(16px);
  -webkit-backdrop-filter: blur(16px);
  border: 1px solid rgba(255,255,255,.9);
  box-shadow: 0 18px 50px rgba(0,0,0,.12);
  font-size: 13px;
  font-weight: 700;
  color: var(--cam-black);
  will-change: transform;
  white-space: nowrap;
}
.cam-chip-ic {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 30px; height: 30px;
  border-radius: 10px;
  flex-shrink: 0;
}
.cam-chip-ic svg { width: 15px; height: 15px; }
.cam-chip small  { display: block; font-size: 10.5px; font-weight: 600; color: var(--cam-grey); }

.cam-chip-c1 { top: 12%; left: max(2vw, calc(50% - 620px)); }
.cam-chip-c2 { top: 24%; right: max(2vw, calc(50% - 640px)); }
.cam-chip-c3 { bottom: 16%; left: max(4vw, calc(50% - 560px)); }

/* ── Mobile ── */
@media (max-width: 1100px) { .cam-chip { display: none; } }
@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-tablet         { transform: none !important; width: min(96vw, 480px); }
  .cam-tablet::after  { display: none; }
}
@media (max-width: 680px) {
  .cam-ui-side  { display: none; }
  .cam-ui-grid  { grid-template-columns: 1fr; }
  .cam-ui-notes { grid-template-columns: 1fr; }
}