/* ============================================================
   Product demo steps — shared styles
   Ported from "Product Demo Widget v2.dc.html". Step internals keep their
   original inline styles; the mobile rules below override them with
   !important exactly as the source widget did.
   ============================================================ */

/* ── Root ─────────────────────────────────────────────────── */

.pd-root {
  --pd-font-display: "Ionic Modern", "Newsreader", Georgia, serif;
  --pd-font-body: "Saans", "Hanken Grotesk", "Helvetica Neue", Arial, sans-serif;
  --pd-font-mono: "Saans Mono", "JetBrains Mono", ui-monospace, monospace;
  --pd-ease: cubic-bezier(0.16, 1, 0.3, 1);

  /* Page typography inherits into the shadow root — reset to the widget's
     browser-default baseline. */
  font-family: var(--pd-font-body);
  font-size: 16px;
  line-height: normal;
  letter-spacing: normal;
  text-transform: none;
  text-align: left;
  color: #232220;

  container-type: inline-size;
  width: 100%;
}

.pd-root img {
  max-width: none;
}

/* Hold every animation on its first frame until the component is in view. */
.pd-paused,
.pd-paused * {
  animation-play-state: paused !important;
}

/* ── Frame ────────────────────────────────────────────────── */

.pd-card {
  position: relative;
  width: 100%;
  height: var(--pd-card-h, 488px);
  border-radius: 14px;
  overflow: hidden;
  background-color: #232220;
}

.pd-texture {
  position: absolute;
  inset: 0;
  background-repeat: no-repeat;
}

.pd-panel {
  position: absolute;
  inset: 0;
  overflow: hidden;
}

/* ── Step layouts ─────────────────────────────────────────── */

.pd-two { display: grid; grid-template-columns: minmax(0,1fr) 40px minmax(0,1.3fr); gap: 12px; align-items: center; }
.pd-three { display: grid; grid-template-columns: repeat(3, minmax(0,1fr)); gap: 12px; }
.pd-prog { display: grid; grid-template-columns: minmax(0,1fr) auto minmax(0,1fr); gap: 20px; align-items: center; }

/* ── Keyframes ────────────────────────────────────────────── */

@keyframes pd-rise { from { opacity: 0; transform: translateY(14px); } to { opacity: 1; transform: none; } }
@keyframes pd-grow { from { transform: scaleX(0); } to { transform: scaleX(1); } }
@keyframes pd-grow-y { from { transform: scaleY(0); } to { transform: scaleY(1); } }
@keyframes pd-ring { from { stroke-dashoffset: var(--c); } to { stroke-dashoffset: var(--o); } }
@keyframes pd-pulse { 0%, 100% { opacity: 1; transform: scale(1); } 50% { opacity: 0.55; transform: scale(0.8); } }
@keyframes pd-bubble { from { opacity: 0; transform: translateY(8px) scale(0.96); } to { opacity: 1; transform: none; } }
/* Source ended at opacity 1, so the dots reappeared over the reply once the
   run finished (masked by the tabs auto-advancing). Ends hidden here. */
@keyframes pd-typing { 0%, 22% { opacity: 1; } 28%, 100% { opacity: 0; } }
@keyframes pd-dot { 0%, 80%, 100% { transform: translateY(0); opacity: 0.4; } 40% { transform: translateY(-3px); opacity: 1; } }
@keyframes pd-count { from { opacity: 0; transform: translateY(6px); } to { opacity: 1; transform: none; } }
@keyframes pd-travel { 0% { left: 0; opacity: 0; } 15% { opacity: 1; } 85% { opacity: 1; } 100% { left: calc(100% - 6px); opacity: 0; } }
@keyframes pd-travel-r { 0% { left: calc(100% - 6px); opacity: 0; } 15% { opacity: 1; } 85% { opacity: 1; } 100% { left: 0; opacity: 0; } }

/* Atlas face. The mouth morph animates the `d` property, which Safari and
   Firefox don't support — there the mouth stays still and the rest plays. */
@keyframes pd-atlas-breathe { 0%, 100% { transform: scale(1) } 50% { transform: scale(1.03) } }
@keyframes pd-atlas-arch { 0%, 100% { transform: translateY(0) } 45% { transform: translateY(-2.5px) } 60% { transform: translateY(-2.5px) } }
@keyframes pd-atlas-arch-r { 0%, 100% { transform: translateY(0) } 50% { transform: translateY(-2.5px) } 65% { transform: translateY(-2.5px) } }
@keyframes pd-atlas-mouth { 0%, 100% { d: path('M 36,64 C 45,71 57,71 68,64') } 50% { d: path('M 33,62 C 44,73 60,72 71,58') } }
@keyframes pd-atlas-look { 0%, 100% { transform: translateX(0) } 35% { transform: translateX(-1.5px) } 70% { transform: translateX(1.5px) } }

/* Window entrances, one direction per step. */
@keyframes pd-win { from { opacity: 0; transform: translate(10px, 14px); } to { opacity: 1; transform: none; } }
@keyframes pd-win-l { from { opacity: 0; transform: translate(-18px, 0); } to { opacity: 1; transform: none; } }
@keyframes pd-win-u { from { opacity: 0; transform: translate(0, -16px); } to { opacity: 1; transform: none; } }
@keyframes pd-win-s { from { opacity: 0; transform: scale(0.96); } to { opacity: 1; transform: none; } }
@keyframes pd-win-r { from { opacity: 0; transform: translate(22px, 0); } to { opacity: 1; transform: none; } }
@keyframes pd-win-d { from { opacity: 0; transform: translate(0, 22px); } to { opacity: 1; transform: none; } }

@media (prefers-reduced-motion: reduce) {
  .pd-root * {
    animation-duration: 0.01ms !important;
    animation-delay: 0ms !important;
    animation-iteration-count: 1 !important;
  }
}

/* ── Mobile (component narrower than 560px) ───────────────── */

@container (max-width: 560px) {
  .pd-card { height: var(--pd-card-h-m, 440px); border-radius: 12px; }
  .pd-panel { inset: 6px; border-radius: 8px; }
  .pd-winwrap { inset: 0 !important; }
  .pd-mat { display: none !important; }
  .pd-win { border-radius: 8px !important; box-shadow: none !important; }
  .pd-side { display: none !important; }
  .pd-main { padding: 14px !important; gap: 12px !important; }
  .pd-panel-head { flex: none !important; padding-left: 14px !important; padding-right: 14px !important; padding-bottom: 10px !important; }
  .pd-panel-head > span:first-child { white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
  .pd-panel-head > span:last-child { display: none !important; }
  .pd-panel-body { flex: 1 1 auto !important; min-height: 0 !important; overflow: hidden !important; margin-right: 0 !important; }
  .pd-hide-m { display: none !important; }

  /* 1 Skills scan */
  .pd-s1 { gap: 12px !important; }
  .pd-s1-rows { gap: 8px !important; }
  .pd-s1-row { grid-template-columns: minmax(0,104px) minmax(0,1fr) 28px !important; gap: 8px !important; }
  .pd-s1-row > span:first-child { font-size: 13px !important; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
  .pd-s1-row > div { height: 16px !important; }
  .pd-s1-foot { padding-top: 10px !important; }
  .pd-s1-foot span:first-child { font-size: 13px !important; }
  .pd-s1-big { font-size: 28px !important; }

  /* 2 Programme matcher */
  .pd-two { grid-template-columns: minmax(0,1fr); gap: 6px !important; align-items: start; }
  .pd-two > .pd-flow { display: none !important; }
  .pd-gaps { display: grid !important; grid-template-columns: repeat(2, minmax(0,1fr)); gap: 8px !important; }
  .pd-gaps > span { grid-column: 1 / -1; }
  .pd-gaps > span:first-child,
  .pd-gaps > span:last-child { display: none; }
  .pd-gap-tile { padding: 10px 12px !important; gap: 8px !important; }
  .pd-gap-tile > div:first-child > span:first-child { font-size: 13px !important; }
  .pd-gap-tile > div:first-child > span:last-child { font-size: 16px !important; }
  .pd-gap-tile > span:last-child { display: none; }
  .pd-back-card { display: none !important; }
  .pd-cards { justify-content: center !important; margin-right: 0 !important; }
  .pd-front-card { zoom: 0.44 !important; box-shadow: none !important; }

  /* 3 Learning and coaching */
  .pd-three { grid-template-columns: repeat(2, minmax(0,1fr)); gap: 8px; }
  .pd-three > div { min-height: 0 !important; padding: 12px !important; gap: 8px !important; }
  .pd-three > div:last-child { grid-column: 1 / -1; }
  .pd-three > div > span { font-size: 13px !important; }

  /* 4 Atlas */
  .pd-s4 { gap: 14px !important; }
  .pd-tool > div { width: 44px !important; height: 44px !important; border-radius: 12px !important; }
  .pd-tool img { width: 26px !important; height: 26px !important; }
  .pd-orb { width: 96px !important; height: 96px !important; }
  .pd-s4-copy span:first-child { font-size: 22px !important; }

  /* 5 Progress */
  .pd-prog { grid-template-columns: repeat(2, minmax(0,1fr)); gap: 10px 16px; align-items: start; }
  .pd-prog > div:first-child, .pd-prog > div:last-child { display: contents !important; }
  .pd-ring { grid-column: 1 / -1; grid-row: 1; width: 148px !important; height: 148px !important; margin: 0 auto 4px; }
  .pd-ring svg { width: 100% !important; height: 100% !important; }
  .pd-item { gap: 10px !important; }
  .pd-item > div:first-child { width: 28px !important; height: 28px !important; border-radius: 8px !important; }
  .pd-item span { font-size: 10px !important; }

  /* 6 Impact */
  .pd-s6 { gap: 8px !important; }
  .pd-stats > div > div { display: none; }
  .pd-stats { grid-template-columns: repeat(3, minmax(0,1fr)) !important; gap: 8px !important; }
  .pd-stats > div { padding: 10px !important; gap: 8px !important; }
  .pd-stats > div > .pd-val { font-size: 24px !important; }
  .pd-chart-tile { padding: 12px !important; gap: 10px !important; }
  .pd-chart-tile > div:first-child > span:last-child { display: none; }
  .pd-chart { height: 104px !important; }
}