/* -----------------------------------------------------------
   SLIDE 4 — PRODUCT FLOW
   ═══════════════════════════════════════════════════════════ */
.flow-slide .lead {
  font-size: 21px !important;
  margin-top: 8px !important;
}

.flow-canvas {
  position: relative;
  display: grid;
  grid-template-columns: 240px 1fr 258px;
  gap: 24px;
  align-items: center;
  margin-top: 20px; /* Reduced to save space */
}

/* Global Persistent Watermark */
.global-watermark {
  position: absolute;
  bottom: 40px;
  left: 140px;
  z-index: 100;
  display: flex;
  align-items: center;
  gap: 12px;
  color: var(--ink);
  font-size: 24px;
  font-weight: 900;
  opacity: 1;
  transition: opacity 0.4s ease;
  pointer-events: none; /* Let clicks pass through */
}

/* Hide watermark on the cover slide */
.reveal:has(.cover-slide.present) .global-watermark {
  opacity: 0;
}

.mascot-watermark {
  width: 54px;
  height: 54px;
  border: 2px solid rgba(37, 99, 235, 0.36);
  border-radius: 50%;
  background: white;
  object-fit: contain;
  box-shadow: 0 4px 12px rgba(37, 99, 235, 0.15);
}

/* Phone mockup */
.phone-visual {
  position: relative;
  display: flex;
  flex-direction: column;
  width: 190px;
  min-height: 380px;
  justify-self: end;
  border: 10px solid #1e293b; /* sleek charcoal border */
  border-radius: 24px;
  background: #1e293b;
  box-shadow: 
    0 4px 6px -1px rgba(0, 0, 0, 0.05),
    0 20px 40px -10px rgba(15, 23, 42, 0.15);
  overflow: hidden;
  font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif;
}

.phone-notch {
  position: absolute;
  top: 8px;
  left: 50%;
  transform: translateX(-50%);
  width: 56px;
  height: 14px;
  border-radius: 10px;
  background: #000000;
  z-index: 10;
  display: flex;
  align-items: center;
  justify-content: flex-end;
  padding-right: 5px;
  box-sizing: border-box;
}

/* Tiny camera lens reflection dot inside dynamic island */
.phone-notch::after {
  content: "";
  width: 3.5px;
  height: 3.5px;
  border-radius: 50%;
  background: #111827;
  border: 0.5px solid #374151;
}

.phone-screen {
  flex: 1;
  display: flex;
  flex-direction: column;
  padding: 30px 10px 10px 10px;
  box-sizing: border-box;
  background: #1e293b; /* Sleek dark theme screen */
  color: #e2e8f0;
  font-size: 8px;
}

.phone-status-bar {
  display: flex;
  justify-content: space-between;
  border-bottom: 1px solid rgba(255, 255, 255, 0.12);
  padding-bottom: 4px;
  margin-bottom: 8px;
  font-size: 7.5px;
  font-weight: 600;
  color: #94a3b8;
  font-family: monospace;
}

.phone-feed {
  flex: 1;
  position: relative;
  background: 
    linear-gradient(rgba(56, 189, 248, 0.08) 1px, transparent 1px),
    linear-gradient(90deg, rgba(56, 189, 248, 0.08) 1px, transparent 1px),
    #334155; /* Medium dark slate camera feed background so colors stand out but aren't pitch black */
  background-size: 14px 14px;
  border: 1px solid rgba(56, 189, 248, 0.18);
  border-radius: 8px;
}

.yolo-box {
  position: absolute;
  width: 44px;
  height: 44px;
  display: flex;
  align-items: center;
  justify-content: center;
  box-sizing: border-box;
}

.yolo-label {
  position: absolute;
  top: -10px;
  left: -1px;
  color: #ffffff;
  font-size: 5px;
  font-weight: bold;
  padding: 1px 2px;
  white-space: nowrap;
  font-family: monospace;
}

.yolo-cap-target {
  width: 42px;
  height: 42px;
  border-radius: 50%;
  box-sizing: border-box;
}

/* Blue cap styling */
.yolo-blue { border: 1px dashed #38bdf8; }
.yolo-blue .yolo-label { background: #0284c7; }
.yolo-blue .yolo-cap-target { background: #0284c7; box-shadow: 0 0 8px rgba(2, 132, 199, 0.4); }

/* Red cap styling */
.yolo-red { border: 1px dashed #f87171; }
.yolo-red .yolo-label { background: #ef4444; }
.yolo-red .yolo-cap-target { background: #ef4444; box-shadow: 0 0 8px rgba(239, 68, 68, 0.4); }

/* Green cap styling */
.yolo-green { border: 1px dashed #4ade80; }
.yolo-green .yolo-label { background: #22c55e; }
.yolo-green .yolo-cap-target { background: #22c55e; box-shadow: 0 0 8px rgba(34, 197, 94, 0.4); }

/* White cap styling */
.yolo-white { border: 1px dashed #94a3b8; }
.yolo-white .yolo-label { background: #64748b; }
.yolo-white .yolo-cap-target { 
  background: #ffffff; 
  border: 1px solid #cbd5e1;
  box-shadow: 0 0 8px rgba(255, 255, 255, 0.8);
}

.phone-telemetry {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-top: 8px;
  font-size: 7.5px;
  font-weight: 600;
  color: #94a3b8;
  font-family: monospace;
}

.phone-telemetry strong {
  color: #38bdf8;
}

.robot-line-card {
  position: relative;
  display: grid;
  place-items: center;
  min-height: 355px;
  border: 1px solid rgba(2, 132, 199, 0.15);
  border-radius: var(--radius-lg);
  background: #f0f9ff; /* Light sky blue background to prevent blending with slide */
  box-shadow: var(--shadow-md);
}

.robot-line-card p {
  position: absolute;
  bottom: 16px;
  left: 50%;
  transform: translateX(-50%);
  white-space: nowrap;
  color: var(--blue-deep);
  font-size: 17px;
  font-weight: 800;
}

/* Object icon inside detect box */
.object-icon {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 3px;
  pointer-events: none;
}

.object-icon svg {
  width: 28px;
  height: 28px;
  flex-shrink: 0;
}

.object-icon-label {
  font-family: 'Plus Jakarta Sans', sans-serif;
  font-size: 10px;
  font-weight: 800;
  letter-spacing: 0.04em;
  text-transform: uppercase;
}

.box-red  .object-icon-label { color: #dc2626; }
.box-blue .object-icon-label { color: var(--blue-deep); }

/* Flow pipeline */
.flow-lane {
  position: relative;
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 14px;
  align-items: center;
  min-height: 320px;
}

.flow-lane::before {
  content: "";
  position: absolute;
  left: -8px;
  right: -8px;
  top: 50%;
  height: 4px;
  border-radius: 999px;
  background: linear-gradient(90deg, rgba(37, 99, 235, 0.14), var(--blue), rgba(37, 99, 235, 0.14));
}

.flow-node {
  position: relative;
  z-index: 1;
  min-height: 148px;
  padding: 22px 18px;
  border: 1px solid rgba(37, 99, 235, 0.22);
  border-radius: var(--radius-md);
  background: var(--card);
  text-align: center;
  box-shadow: var(--shadow-md);
  transition: transform 0.3s cubic-bezier(0.32, 0.72, 0, 1),
              box-shadow 0.3s cubic-bezier(0.32, 0.72, 0, 1);
}

.flow-node:hover {
  transform: translateY(-3px);
  box-shadow: var(--shadow-lg);
}

.flow-icon {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 44px;
  height: 44px;
  margin: 0 auto 16px;
  border: 2px solid var(--blue);
  border-radius: 50%;
  background: var(--blue-soft);
  color: var(--blue);
}

.flow-icon svg {
  width: 22px;
  height: 22px;
  stroke: var(--blue);
}

.flow-node span {
  display: block;
  color: var(--blue);
  font-size: 17px;
  font-weight: 800;
}

.flow-node strong {
  display: block;
  margin-top: 5px;
  color: var(--ink);
  font-size: 22px;
  line-height: 1.12;
  font-weight: 800;
}

.robot-arm-svg {
  width: 100%;
  max-width: 250px;
  height: auto;
  max-height: 250px;
  margin-bottom: 25px;
  display: block;
}

/* 2D Animated Robot Arm Keyframe Classes */
.shoulder-joint {
  transform-origin: 0px 0px;
  animation: shoulder-move 7s cubic-bezier(0.4, 0, 0.2, 1) infinite;
}

.elbow-joint {
  transform-origin: 0px 0px;
  animation: elbow-move 7s cubic-bezier(0.4, 0, 0.2, 1) infinite;
}

.wrist-joint {
  transform-origin: 0px 0px;
  animation: wrist-move 7s cubic-bezier(0.4, 0, 0.2, 1) infinite;
}

.suction-glow {
  animation: suction-glow-move 7s ease infinite;
}

.box-pick {
  animation: box-pick-move 7s ease infinite;
}

.box-carried {
  animation: box-carried-move 7s ease infinite;
}

.box-place {
  animation: box-place-move 7s ease infinite;
}

@keyframes shoulder-move {
  0%, 100% { transform: rotate(25deg); }
  22% { transform: rotate(41.5deg); }   /* reach down to pick */
  34% { transform: rotate(41.5deg); }   /* pick pause */
  46% { transform: rotate(25deg); }     /* swing up */
  62% { transform: rotate(-41.5deg); }  /* reach down to place */
  74% { transform: rotate(-41.5deg); }  /* place pause */
  86% { transform: rotate(25deg); }     /* swing back empty */
}

@keyframes elbow-move {
  0%, 100% { transform: rotate(-140deg); }
  22% { transform: rotate(-21deg); }
  34% { transform: rotate(-21deg); }
  46% { transform: rotate(-140deg); }
  62% { transform: rotate(-159deg); }
  74% { transform: rotate(-159deg); }
  86% { transform: rotate(-140deg); }
}

@keyframes wrist-move {
  0%, 100% { transform: rotate(115deg); }
  22% { transform: rotate(-20.5deg); }
  34% { transform: rotate(-20.5deg); }
  46% { transform: rotate(115deg); }
  62% { transform: rotate(200.5deg); }
  74% { transform: rotate(200.5deg); }
  86% { transform: rotate(115deg); }
}

@keyframes suction-glow-move {
  0%, 16% { opacity: 0; }
  18%, 34% { opacity: 1; }
  36%, 58% { opacity: 0; }
  60%, 74% { opacity: 1; }
  76%, 100% { opacity: 0; }
}

@keyframes box-pick-move {
  0%, 28% { opacity: 1; }
  29%, 100% { opacity: 0; }
}

@keyframes box-carried-move {
  0%, 28% { opacity: 0; }
  29%, 68% { opacity: 1; }
  69%, 100% { opacity: 0; }
}

@keyframes box-place-move {
  0%, 68% { opacity: 0; }
  69%, 86% { opacity: 1; }
  92%, 100% { opacity: 0; } /* fades away/conveyor moves it */
}

/* ═══════════════════════════════════════════════════════════