/* "Press the remote" — photoreal system demo (real El Segundo install pair).
   The photo cross-fade + step lighting are CSS transitions; JS only sequences
   class changes. Frost overlay animates opacity only (GPU, zero CLS). */

.pdlc-real {
  display: grid;
  gap: var(--space-3);
  max-width: 1100px;
  margin-inline: auto;
}
.pdlc-real > * { min-width: 0; }

/* --- Steps: a row above the full-width video ------------------------- */
.pdlc-steps { display: grid; gap: var(--space-2); }
@media (min-width: 760px) {
  .pdlc-steps { grid-template-columns: repeat(3, 1fr); }
}

.pa-step {
  display: flex;
  gap: var(--space-2);
  align-items: flex-start;
  padding: var(--space-2) var(--space-3);
  opacity: 1;
  transition: box-shadow .45s;
}
.pa-step.lit {
  opacity: 1;
  transform: none;
  box-shadow: var(--shadow-float);
}
.pa-step h3 {
  font-size: var(--fs-400);
  margin-bottom: .25rem;
  display: flex;
  align-items: center;
  gap: .55rem;
}
.pa-step p { font-size: var(--fs-300); color: var(--deep-700); margin: 0; }

.pa-step-num {
  font-family: var(--font-display);
  font-size: var(--fs-500);
  font-weight: 700;
  color: var(--glass-500);
}

/* LED dot per step */
.pa-led-dot {
  flex: none;
  width: 12px;
  height: 12px;
  margin-top: .45rem;
  border-radius: 50%;
  background: var(--ice-300);
  box-shadow: 0 0 0 0 rgba(54, 194, 117, 0);
  transition: background .3s, box-shadow .5s;
}
.pa-step.lit .pa-led-dot {
  background: var(--glass-500);
  box-shadow: 0 0 10px 2px rgba(71, 150, 189, .5);
}
/* the transformer step's LED reads as POWER: amber standby -> green on */
.pa-led-dot.pa-led-power { background: #d9a93f; }
.pa-step.lit .pa-led-dot.pa-led-power {
  background: #36c275;
  box-shadow: 0 0 12px 3px rgba(54, 194, 117, .55);
}

.pa-switch { justify-self: start; margin-top: var(--space-1); }

/* --- Photo pane ------------------------------------------------------- */
.pa-photo-pane { aspect-ratio: 3 / 4; max-height: 640px; cursor: pointer; }
.pa-photo-pane > picture, .pa-photo-pane > picture img { width: 100%; height: 100%; object-fit: cover; display: block; }

/* frosted-state photo overlays the clear-state photo; opacity-only switch */
.pa-frost-photo {
  position: absolute;
  inset: 0;
  opacity: 1;
  /* frosting (power cut) is near-instant on real PDLC */
  transition: opacity .4s var(--ease-glass) .45s;
  pointer-events: none;
}
.pa-frost-photo picture, .pa-frost-photo img { width: 100%; height: 100%; object-fit: cover; display: block; }
/* clearing takes the full sequence: press -> transformer -> crystals align */
.pa-photo-pane.is-clear .pa-frost-photo {
  opacity: 0;
  transition: opacity .85s var(--ease-glass) 1.05s;
}

/* soft light bloom at the switch moment */
.pa-flash {
  position: absolute;
  inset: 0;
  background: radial-gradient(ellipse at 55% 45%, rgba(255,255,255,.9) 0%, rgba(255,255,255,0) 65%);
  opacity: 0;
  pointer-events: none;
}
.pa-flash.go { animation: pa-flash-anim .7s var(--ease-glass); }
@keyframes pa-flash-anim {
  0% { opacity: 0; }
  35% { opacity: .5; }
  100% { opacity: 0; }
}

.pa-photo-credit {
  margin-top: var(--space-1);
  font-size: var(--fs-200);
  color: var(--deep-700);
  text-align: center;
}

@media (prefers-reduced-motion: reduce) {
  .pa-step, .pa-led-dot, .pa-frost-photo { transition-duration: 1ms; transition-delay: 0ms; }
  .pa-flash.go { animation: none; }
}