/* ============================================================
   Product demo steps — shared styles
   Ported from "Product Demo Widget v3.dc.html". Step internals keep their
   original inline styles. As in v3 there is no separate mobile layout:
   each step is drawn on a fixed 640×488 canvas (.pd-scale) and scaled to
   fill the component's width by StepFrame.
   ============================================================ */

/* ── 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;

  width: 100%;
  /* Never let the card's size feed back into a flex/grid parent's minimum —
     the container decides the width, the design scales to match. */
  min-width: 0;
}

.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 ────────────────────────────────────────────────── */

/* The card is sized by .pd-sizer; the scaled canvas inside is absolutely
   positioned, so it adds nothing to the card's size. */
.pd-card {
  position: relative;
  border-radius: 14px;
  overflow: hidden;
  background-color: #232220;
}

/* An invisible 640×488 image, sized like a responsive image (width: 100%,
   height: auto). Like any image, it can shrink to fit a narrow flex or grid
   column, but where the layout sizes items by their content (a flex column
   with align-items: center or flex-start, for example) it reports its
   natural 640px width instead of collapsing to nothing. */
.pd-sizer {
  display: block;
  width: 100%;
  height: auto;
  visibility: hidden;
}

.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;
  }
}