/* =============================================================================
   PCM Visualization Showcase — Chart & Animation Styles
   Prefix: .pd- (pcm-demo)
   Fonts: freight-text-pro + franklin-gothic-* (loaded at page level)
   ============================================================================= */

/* ── Shared Card ── */
.pd-card{background:#fff;border:1px solid #e8e4db;border-radius:8px;padding:28px 32px;margin:32px 0;position:relative;overflow:hidden}
.pd-card-title{font-family:franklin-gothic-compressed,sans-serif;font-size:12px;letter-spacing:1.8px;text-transform:uppercase;color:#a69162;margin-bottom:6px}
.pd-card-label{font-family:freight-text-pro,Georgia,serif;font-size:15px;color:#444;margin-bottom:24px;line-height:1.5}
.pd-chart-note{font-family:freight-text-pro,Georgia,serif;font-size:13px;font-style:italic;color:#999;margin-top:16px;line-height:1.5}
.pd-source{font-family:franklin-gothic-compressed,sans-serif;font-size:11px;letter-spacing:1px;text-transform:uppercase;color:#bbb;margin-top:8px}

/* ── 1. Donut / Ring Chart ── */
.pd-donut-wrap{display:flex;align-items:center;gap:40px;flex-wrap:wrap}
.pd-donut-svg-wrap{position:relative;width:160px;height:160px;flex-shrink:0}
.pd-donut-svg-wrap svg{width:160px;height:160px;transform:rotate(-90deg)}
.pd-donut-track{fill:none;stroke:#f0ece3;stroke-width:14}
.pd-donut-fill{fill:none;stroke:url(#pd-donut-grad);stroke-width:14;stroke-linecap:round;stroke-dasharray:314.16;stroke-dashoffset:314.16;transition:stroke-dashoffset 1.8s cubic-bezier(.22,1,.36,1)}
.pd-donut-center{position:absolute;top:50%;left:50%;transform:translate(-50%,-50%);text-align:center;pointer-events:none}
.pd-donut-pct{font-family:franklin-gothic-condensed,sans-serif;font-size:42px;font-weight:700;color:#a69162;line-height:1;display:block}
.pd-donut-pct-label{font-family:franklin-gothic-compressed,sans-serif;font-size:11px;letter-spacing:1.2px;text-transform:uppercase;color:#888;display:block;margin-top:2px}
.pd-donut-meta{flex:1;min-width:200px}
.pd-donut-meta .pd-big-stat{font-family:franklin-gothic-condensed,sans-serif;font-size:56px;font-weight:700;color:#a69162;line-height:1;display:block}
.pd-donut-meta p{font-family:freight-text-pro,Georgia,serif;font-size:16px;color:#555;line-height:1.65;margin-top:8px}
.pd-donut-legend{display:flex;gap:20px;margin-top:16px;flex-wrap:wrap}
.pd-legend-item{display:flex;align-items:center;gap:8px;font-family:franklin-gothic-condensed,sans-serif;font-size:13px;color:#666;text-transform:uppercase;letter-spacing:.5px}
.pd-legend-dot{width:10px;height:10px;border-radius:50%;flex-shrink:0}
.pd-legend-dot.gold{background:#a69162}
.pd-legend-dot.light{background:#f0ece3;border:1px solid #ddd}

/* ── 2. Line / Area Chart ── */
.pd-line-chart-wrap{margin:4px 0}
.pd-line-chart-wrap svg{width:100%;height:auto;overflow:visible}
.pd-grid-line{stroke:#f0ece3;stroke-width:1}
.pd-axis-line{stroke:#dcd7ca;stroke-width:1}
.pd-axis-label{font-family:franklin-gothic-compressed,sans-serif;font-size:11px;fill:#999;letter-spacing:.5px}
.pd-area-path{fill:url(#pd-area-grad);opacity:.6}
.pd-line-path{fill:none;stroke:#a69162;stroke-width:2.5;stroke-linecap:round;stroke-linejoin:round}
.pd-line-dot{fill:#fff;stroke:#a69162;stroke-width:2;r:5;opacity:0;transition:opacity .3s}
.pd-line-dot.pd-visible{opacity:1}
.pd-line-dot-label{font-family:franklin-gothic-condensed,sans-serif;font-size:12px;fill:#a69162;font-weight:700;text-anchor:middle;opacity:0;transition:opacity .3s .2s}
.pd-line-dot-label.pd-visible{opacity:1}

/* ── 3. Dot Matrix ── */
.pd-dot-matrix{display:grid;grid-template-columns:repeat(10,1fr);gap:6px;max-width:340px;margin:20px 0}
.pd-dot{width:24px;height:24px;border-radius:50%;background:#f0ece3;transition:background .25s,transform .25s cubic-bezier(.34,1.56,.64,1);transform:scale(.6);opacity:.4}
.pd-dot.pd-dot-lit{background:#a69162;transform:scale(1);opacity:1}
.pd-dot-matrix-wrap{display:flex;align-items:flex-start;gap:40px;flex-wrap:wrap}
.pd-dot-matrix-meta{flex:1;min-width:180px;padding-top:8px}
.pd-dot-matrix-meta .pd-big-num{font-family:franklin-gothic-condensed,sans-serif;font-size:72px;font-weight:700;color:#a69162;line-height:1;display:block}
.pd-dot-matrix-meta .pd-big-unit{font-family:franklin-gothic-compressed,sans-serif;font-size:13px;letter-spacing:1px;text-transform:uppercase;color:#888;display:block;margin-bottom:8px}
.pd-dot-matrix-meta p{font-family:freight-text-pro,Georgia,serif;font-size:15px;color:#555;line-height:1.65}

/* ── 4. Staggered Bars ── */
.pd-bar-list{display:flex;flex-direction:column;gap:16px;margin:4px 0}
.pd-bar-row{}
.pd-bar-header{display:flex;justify-content:space-between;align-items:baseline;margin-bottom:6px}
.pd-bar-name{font-family:franklin-gothic-condensed,sans-serif;font-size:15px;font-weight:600;color:#1a1a1a}
.pd-bar-pct{font-family:franklin-gothic-condensed,sans-serif;font-size:20px;font-weight:700;color:#a69162}
.pd-bar-track{height:12px;background:#f0ece3;border-radius:6px;overflow:hidden}
.pd-bar-fill{height:100%;border-radius:6px;width:0;background:linear-gradient(90deg,#a69162,#c4a96e);transition:width 1.4s cubic-bezier(.22,1,.36,1)}
.pd-bar-fill.pd-gray{background:linear-gradient(90deg,#ccc,#ddd)}
.pd-bar-row.pd-stagger-1 .pd-bar-fill{transition-delay:.05s}
.pd-bar-row.pd-stagger-2 .pd-bar-fill{transition-delay:.12s}
.pd-bar-row.pd-stagger-3 .pd-bar-fill{transition-delay:.19s}
.pd-bar-row.pd-stagger-4 .pd-bar-fill{transition-delay:.26s}
.pd-bar-row.pd-stagger-5 .pd-bar-fill{transition-delay:.33s}
.pd-bar-row.pd-stagger-6 .pd-bar-fill{transition-delay:.40s}

/* ── 5. Gauge ── */
.pd-gauge-wrap{display:flex;align-items:flex-start;gap:40px;flex-wrap:wrap}
.pd-gauge-svg-wrap{position:relative;width:200px;height:110px;flex-shrink:0}
.pd-gauge-svg-wrap svg{width:200px;height:110px;overflow:visible}
.pd-gauge-track{fill:none;stroke:#f0ece3;stroke-width:16;stroke-linecap:round}
.pd-gauge-fill{fill:none;stroke:url(#pd-gauge-grad);stroke-width:16;stroke-linecap:round;stroke-dasharray:251.33;stroke-dashoffset:251.33;transition:stroke-dashoffset 2s cubic-bezier(.22,1,.36,1)}
.pd-gauge-zones text{font-family:franklin-gothic-compressed,sans-serif;font-size:9px;letter-spacing:.5px;text-transform:uppercase;fill:#bbb}
.pd-gauge-center{position:absolute;bottom:0;left:50%;transform:translateX(-50%);text-align:center;width:120px}
.pd-gauge-score{font-family:franklin-gothic-condensed,sans-serif;font-size:44px;font-weight:700;color:#a69162;line-height:1;display:block}
.pd-gauge-score-label{font-family:franklin-gothic-compressed,sans-serif;font-size:11px;letter-spacing:1px;text-transform:uppercase;color:#888;display:block}
.pd-gauge-meta{flex:1;min-width:180px;padding-top:4px}
.pd-gauge-meta p{font-family:freight-text-pro,Georgia,serif;font-size:15px;color:#555;line-height:1.7;margin-bottom:16px}
.pd-gauge-benchmarks{display:flex;flex-direction:column;gap:8px}
.pd-gauge-bench{display:flex;align-items:center;gap:10px}
.pd-gauge-bench-dot{width:8px;height:8px;border-radius:50%;flex-shrink:0}
.pd-gauge-bench-text{font-family:franklin-gothic-condensed,sans-serif;font-size:13px;color:#666}
.pd-gauge-bench-text strong{color:#1a1a1a}

/* ── 6. Funnel ── */
.pd-funnel{display:flex;flex-direction:column;gap:4px;margin:8px 0;max-width:480px}
.pd-funnel-step{position:relative;opacity:0;transform:translateY(12px);transition:opacity .5s,transform .5s cubic-bezier(.22,1,.36,1)}
.pd-funnel-step.pd-visible{opacity:1;transform:none}
.pd-funnel-bar{display:flex;align-items:center;padding:12px 20px;border-radius:4px;position:relative;overflow:hidden;min-height:52px}
.pd-funnel-bar::before{content:'';position:absolute;top:0;left:0;right:0;height:3px;background:linear-gradient(90deg,#a69162,#c4a96e);opacity:0;transition:opacity .3s .3s}
.pd-funnel-step.pd-visible .pd-funnel-bar::before{opacity:1}
.pd-funnel-bar-fill{position:absolute;top:0;left:0;bottom:0;background:rgba(166,145,98,.08);width:0;transition:width 1s cubic-bezier(.22,1,.36,1) .2s}
.pd-funnel-step.pd-visible .pd-funnel-bar-fill{width:var(--pd-funnel-w)}
.pd-funnel-label{font-family:franklin-gothic-condensed,sans-serif;font-size:15px;font-weight:600;color:#1a1a1a;position:relative;z-index:1;flex:1}
.pd-funnel-count{font-family:franklin-gothic-condensed,sans-serif;font-size:22px;font-weight:700;color:#a69162;position:relative;z-index:1;margin-left:auto;padding-left:16px}
.pd-funnel-rate{font-family:franklin-gothic-compressed,sans-serif;font-size:11px;letter-spacing:1px;text-transform:uppercase;color:#999;position:relative;z-index:1;padding-left:12px;white-space:nowrap}
.pd-funnel-connector{width:2px;height:8px;background:linear-gradient(#e8e4db,#ddd);margin:0 auto;opacity:.6}

/* ── 7. Timeline ── */
.pd-timeline{position:relative;padding:28px 0 8px;margin:8px 0;overflow-x:auto}
.pd-timeline-track{position:relative;display:flex;align-items:flex-start;gap:0;min-width:520px}
.pd-timeline-line{position:absolute;top:20px;left:20px;right:20px;height:2px;background:#e8e4db;z-index:0}
.pd-timeline-line-fill{height:100%;background:linear-gradient(90deg,#a69162,#c4a96e);width:0;transition:width 1.6s cubic-bezier(.22,1,.36,1)}
.pd-timeline-item{flex:1;display:flex;flex-direction:column;align-items:center;position:relative;z-index:1;opacity:0;transform:translateY(8px);transition:opacity .4s,transform .4s cubic-bezier(.34,1.56,.64,1)}
.pd-timeline-item.pd-visible{opacity:1;transform:none}
.pd-timeline-dot{width:40px;height:40px;border-radius:50%;background:#fff;border:2px solid #e8e4db;display:flex;align-items:center;justify-content:center;transition:border-color .3s,background .3s;flex-shrink:0}
.pd-timeline-item.pd-visible .pd-timeline-dot{border-color:#a69162;background:#a69162}
.pd-timeline-dot svg{width:16px;height:16px;fill:#ccc;transition:fill .3s}
.pd-timeline-item.pd-visible .pd-timeline-dot svg{fill:#fff}
.pd-timeline-year{font-family:franklin-gothic-condensed,sans-serif;font-size:15px;font-weight:700;color:#1a1a1a;margin-top:10px;text-align:center}
.pd-timeline-desc{font-family:freight-text-pro,Georgia,serif;font-size:12px;color:#666;margin-top:4px;text-align:center;line-height:1.4;padding:0 4px}

/* ── 8. Bubble Chart ── */
.pd-bubble-wrap{position:relative;height:240px;margin:8px 0}
.pd-bubble-wrap svg{width:100%;height:240px}
.pd-bubble{opacity:0;transform-origin:center;transition:opacity .5s,r .8s cubic-bezier(.34,1.56,.64,1)}
.pd-bubble.pd-visible{opacity:1}
.pd-bubble-fill{fill:rgba(166,145,98,.15);stroke:#a69162;stroke-width:1.5;transition:fill .2s}
.pd-bubble-fill.dark{fill:rgba(26,26,26,.08);stroke:#444}
.pd-bubble circle:hover + .pd-bubble-fill{fill:rgba(166,145,98,.3)}
.pd-bubble-label{font-family:franklin-gothic-condensed,sans-serif;font-size:12px;fill:#1a1a1a;text-anchor:middle;font-weight:600;pointer-events:none}
.pd-bubble-value{font-family:franklin-gothic-condensed,sans-serif;font-size:11px;fill:#a69162;text-anchor:middle;font-weight:700;pointer-events:none}

/* ── 9. Scroll-Driven Progress ── */
.pd-scroll-section{position:relative;background:linear-gradient(135deg,#1a1a1a 0%,#1F3C50 100%);border-radius:8px;padding:40px 36px;margin:32px 0;overflow:hidden}
.pd-scroll-section::before{content:'';position:absolute;top:0;left:0;right:0;height:3px;background:linear-gradient(90deg,#a69162,#c4a96e)}
.pd-scroll-progress-track{position:absolute;top:0;left:0;right:0;height:3px;background:#333;z-index:0}
.pd-scroll-progress-fill{height:100%;background:linear-gradient(90deg,#a69162,#c4a96e);width:0;transition:width .1s linear;z-index:1;position:relative}
.pd-scroll-heading{font-family:franklin-gothic-condensed,sans-serif;font-size:13px;letter-spacing:2px;text-transform:uppercase;color:#a69162;margin-bottom:24px}
.pd-scroll-stats{display:grid;grid-template-columns:repeat(3,1fr);gap:24px;flex-wrap:wrap}
.pd-scroll-stat{text-align:center}
.pd-scroll-stat-num{font-family:franklin-gothic-condensed,sans-serif;font-size:52px;font-weight:700;color:#fff;line-height:1;display:block;opacity:0;transform:translateY(10px);transition:opacity .5s,transform .5s cubic-bezier(.22,1,.36,1)}
.pd-scroll-stat-num.pd-visible{opacity:1;transform:none}
.pd-scroll-stat-label{font-family:freight-text-pro,Georgia,serif;font-size:13px;color:rgba(255,255,255,.55);margin-top:6px;line-height:1.4}
.pd-scroll-callout{margin-top:32px;padding-top:24px;border-top:1px solid rgba(255,255,255,.1);font-family:freight-text-pro,Georgia,serif;font-size:18px;font-style:italic;color:rgba(255,255,255,.7);line-height:1.7;text-align:center;opacity:0;transition:opacity .8s .4s}
.pd-scroll-callout.pd-visible{opacity:1}

/* ── Reduced Motion ── */
@media (prefers-reduced-motion:reduce){
  .pd-donut-fill,.pd-gauge-fill,.pd-bar-fill,.pd-timeline-line-fill{transition:none}
  .pd-funnel-step,.pd-timeline-item,.pd-bubble{transition:none;opacity:1;transform:none}
  .pd-dot{transition:none}
  .pd-scroll-stat-num,.pd-scroll-callout{transition:none;opacity:1;transform:none}
}

/* ── Responsive ── */
@media(max-width:600px){
  .pd-donut-wrap,.pd-gauge-wrap,.pd-dot-matrix-wrap{flex-direction:column}
  .pd-scroll-stats{grid-template-columns:1fr 1fr}
  .pd-funnel-rate{display:none}
  .pd-card{padding:20px 16px}
}