/* =========================================================
   Sell&Tell — scoped animations & dashboards
   Hosts: .sell-host (Capture) · .tell-host (Analyze) ·
          .act-host (Act / Monday Briefing) · .zaza-host (Talk to Data)
   Each replays when its [data-animate] host gains .is-playing
   ========================================================= */

/* shared frame for animated visuals */
.viz-frame {
  position:relative; background:var(--surface); border:1px solid var(--border);
  border-radius:var(--r-xl); box-shadow:var(--shadow-lg); padding:clamp(16px,2.4vw,26px);
  overflow:hidden;
}
.viz-frame::before {
  content:""; position:absolute; inset:0; pointer-events:none;
  background:radial-gradient(ellipse at top right,rgba(232,90,138,.07),transparent 55%);
}
.viz-caption { display:flex; align-items:center; gap:8px; font-size:12px; font-weight:700; letter-spacing:.04em; color:var(--text-soft); margin-bottom:14px; }
.viz-live { display:inline-flex; align-items:center; gap:6px; margin-left:auto; font-size:11px; font-weight:700; color:var(--rose-600); }
.viz-live .dot { width:7px; height:7px; border-radius:50%; background:var(--rose-600); animation:pulseDot 1.6s ease-in-out infinite; }
@keyframes pulseDot { 0%,100%{ box-shadow:0 0 0 0 rgba(214,51,108,.5); } 50%{ box-shadow:0 0 0 5px rgba(214,51,108,0); } }

/* =========================================================
   1 · CAPTURE — the Sell Widget on a product page
   ========================================================= */
.sell-host { position:relative; }
.pdp {
  position:relative; background:var(--surface-2); border:1px solid var(--border);
  border-radius:var(--r-lg); overflow:hidden; min-height:380px;
}
.pdp-top { display:flex; gap:14px; padding:16px; }
.pdp-photo { width:120px; flex-shrink:0; border-radius:var(--r-md); overflow:hidden; }
.pdp-photo .ph { min-height:150px; border-radius:var(--r-md); }
.pdp-info { flex:1; min-width:0; }
.pdp-cat { font-size:11px; font-weight:700; letter-spacing:.14em; text-transform:uppercase; color:var(--rose-600); }
.pdp-title { font-family:'Fraunces',serif; font-size:1.2rem; font-weight:600; margin:5px 0 4px; color:var(--text); }
.pdp-price { font-size:1.05rem; font-weight:700; color:var(--text); }
.pdp-stars { color:var(--gold-500); font-size:13px; margin:6px 0 10px; letter-spacing:2px; }
.pdp-variants { display:flex; gap:7px; flex-wrap:wrap; }
.pdp-variant { width:30px; height:30px; border-radius:8px; border:1.5px solid var(--border-strong); display:grid; place-items:center; font-size:11px; font-weight:700; color:var(--text-soft); }
.pdp-variant.sel { border-color:var(--rose-600); color:var(--rose-700); }
.pdp-cta { margin:16px; padding:13px; border-radius:var(--r-pill); background:var(--ink-900); color:#fff; text-align:center; font-weight:600; font-size:14px; }
html[data-theme="dark"] .pdp-cta { background:var(--rose-600); }

/* the slide-out widget */
.sell-widget {
  position:absolute; left:14px; right:14px; bottom:14px;
  background:var(--surface); border:1px solid var(--border-strong);
  border-radius:var(--r-lg); box-shadow:var(--shadow-lg); padding:16px;
  transform:translateY(120%); opacity:0;
}
.is-playing .sell-widget { animation:widgetIn .6s var(--ease) .3s forwards; }
@keyframes widgetIn { to{ transform:translateY(0); opacity:1; } }
/* Mobile: the widget's chips wrap into many rows and the bubble adds height,
   so it grows taller than the .pdp's fixed 380px. Anchored absolute + bottom +
   overflow:hidden, the top (head + question + first chips) gets clipped.
   Below 760px, drop it into normal flow so the card grows to fit it. */
@media (max-width:760px){
  .pdp { min-height:0; }
  .sell-widget { position:relative; left:auto; right:auto; bottom:auto; margin:0 14px 14px; }
}
.sw-head { display:flex; align-items:center; gap:10px; margin-bottom:12px; }
.sw-avatar { width:34px; height:34px; border-radius:50%; background:var(--grad-rose); display:grid; place-items:center; color:#fff; font-family:'Fraunces',serif; font-weight:600; font-size:15px; }
.sw-name { font-size:13px; font-weight:700; color:var(--text); }
.sw-sub { font-size:11px; color:var(--text-soft); }
.sw-online { margin-left:auto; width:8px; height:8px; border-radius:50%; background:#37c98b; box-shadow:0 0 0 3px rgba(55,201,139,.2); }
.sw-q { font-size:14px; font-weight:600; color:var(--text); margin-bottom:12px; line-height:1.4; }
.sw-chips { display:flex; flex-wrap:wrap; gap:8px; }
.sw-chip {
  font-size:12.5px; padding:8px 13px; border-radius:var(--r-pill);
  background:var(--surface-2); border:1px solid var(--border); color:var(--text-muted);
  opacity:0; transform:translateY(8px);
}
.is-playing .sw-chip { animation:chipIn .4s var(--ease) forwards; }
.is-playing .sw-chip:nth-child(1){ animation-delay:.7s; }
.is-playing .sw-chip:nth-child(2){ animation-delay:.82s; }
.is-playing .sw-chip:nth-child(3){ animation-delay:.94s; }
.is-playing .sw-chip:nth-child(4){ animation-delay:1.06s; }
.is-playing .sw-chip:nth-child(5){ animation-delay:1.18s; }
.sw-chip.is-picked { background:var(--rose-600); border-color:var(--rose-600); color:#fff; }
.is-playing .sw-chip.is-picked { animation:chipIn .4s var(--ease) 1.18s forwards, chipPick .4s var(--ease) 1.9s forwards; }
@keyframes chipIn { to{ opacity:1; transform:none; } }
@keyframes chipPick { 0%{ transform:scale(1); } 50%{ transform:scale(1.06); } 100%{ transform:scale(1); } }
.sw-reply { margin-top:14px; opacity:0; }
.is-playing .sw-reply { animation:chipIn .5s var(--ease) 2.3s forwards; }
.sw-divider { height:1px; background:var(--border); margin-bottom:12px; }
.sw-bubble { font-size:13px; line-height:1.5; color:var(--text-muted); background:var(--rose-50); border:1px solid var(--rose-100); padding:11px 13px; border-radius:12px 12px 12px 4px; }
html[data-theme="dark"] .sw-bubble { background:rgba(232,90,138,.1); border-color:rgba(232,90,138,.22); }
.sw-bubble strong { color:var(--rose-700); }
.sw-followups { display:flex; flex-wrap:wrap; gap:7px; margin-top:11px; }
.sw-fu { font-size:12px; padding:7px 12px; border-radius:var(--r-pill); border:1px solid var(--border-strong); color:var(--text-muted); opacity:0; }
.sw-fu.primary { background:var(--rose-600); border-color:var(--rose-600); color:#fff; }
.is-playing .sw-fu { animation:chipIn .4s var(--ease) forwards; }
.is-playing .sw-fu:nth-child(1){ animation-delay:2.6s; }
.is-playing .sw-fu:nth-child(2){ animation-delay:2.72s; }
.is-playing .sw-fu:nth-child(3){ animation-delay:2.84s; }

/* =========================================================
   2 · ANALYZE — animated SVG dashboard
   ========================================================= */
.tell-host { position:relative; }
.tell-banner { display:flex; align-items:center; flex-wrap:wrap; gap:8px; margin-bottom:16px; font-size:12.5px; }
.tb-chip { padding:5px 11px; border-radius:var(--r-pill); font-weight:700; }
.tb-chip.taps { background:var(--rose-50); color:var(--rose-700); }
.tb-chip.pos { background:var(--gold-100); color:var(--gold-600); }
html[data-theme="dark"] .tb-chip.taps { background:rgba(232,90,138,.14); }
html[data-theme="dark"] .tb-chip.pos { background:rgba(201,163,106,.16); color:var(--gold-300); }
.tb-plus { color:var(--text-dim); font-weight:700; }
.tb-eq { color:var(--text-soft); font-style:italic; font-family:'Fraunces',serif; }

/* SVG element animations */
.st-bar { transform:scaleY(0); transition:none; }
.is-playing .st-bar { animation:barGrow .8s var(--ease) forwards; }
@keyframes barGrow { to{ transform:scaleY(1); } }
.st-barh { transform:scaleX(0); }
.is-playing .st-barh { animation:barGrowH .9s var(--ease) forwards; }
@keyframes barGrowH { to{ transform:scaleX(1); } }
.st-line { stroke-dasharray:1400; stroke-dashoffset:1400; }
.is-playing .st-line { animation:lineDraw 1.6s var(--ease) forwards; }
@keyframes lineDraw { to{ stroke-dashoffset:0; } }
.st-area { opacity:0; }
.is-playing .st-area { animation:fadeIn 1s ease 1s forwards; }
.st-fade { opacity:0; }
.is-playing .st-fade { animation:fadeRise .6s var(--ease) forwards; }
@keyframes fadeIn { to{ opacity:1; } }
@keyframes fadeRise { from{ opacity:0; transform:translateY(6px);} to{ opacity:1; transform:none; } }
.st-dot { opacity:0; }
.is-playing .st-dot { animation:dotPulse 1.4s ease 1.6s infinite; }
@keyframes dotPulse { 0%{ opacity:1; transform:scale(.8);} 50%{ opacity:.6; transform:scale(1.25);} 100%{ opacity:1; transform:scale(.8);} }
/* per-element stagger */
.is-playing [data-d="1"]{ animation-delay:.15s; }
.is-playing [data-d="2"]{ animation-delay:.3s; }
.is-playing [data-d="3"]{ animation-delay:.45s; }
.is-playing [data-d="4"]{ animation-delay:.6s; }
.is-playing [data-d="5"]{ animation-delay:.75s; }
.is-playing [data-d="6"]{ animation-delay:.9s; }
.is-playing [data-d="7"]{ animation-delay:1.05s; }
.is-playing [data-d="8"]{ animation-delay:1.2s; }
.is-playing [data-d="cap"]{ animation-delay:1.4s; }
.is-playing [data-d="ribbon"]{ animation-delay:1.7s; }

/* =========================================================
   3 · ACT — the Monday Briefing
   ========================================================= */
.act-host { position:relative; }
.act-card { background:var(--surface); border:1px solid var(--border); border-radius:var(--r-xl); box-shadow:var(--shadow-lg); overflow:hidden; }
.act-banner { display:flex; align-items:center; gap:13px; padding:18px 22px; background:var(--plum-900); color:#fbeef3; }
.act-pulse { width:11px; height:11px; border-radius:50%; background:var(--rose-500); box-shadow:0 0 0 0 rgba(232,90,138,.5); animation:pulseDot 1.8s infinite; }
.act-banner-label { font-size:10.5px; font-weight:800; letter-spacing:.16em; text-transform:uppercase; color:var(--rose-300); }
.act-banner-main { font-family:'Fraunces',serif; font-size:1.1rem; font-weight:600; }
.act-banner-sub { font-size:11.5px; color:rgba(251,238,243,.6); }
.act-body { padding:22px; }
.act-headline { display:flex; gap:13px; align-items:flex-start; margin-bottom:20px; }
.act-emoji { font-size:1.5rem; }
.act-cat { font-size:11px; font-weight:800; letter-spacing:.12em; text-transform:uppercase; color:var(--rose-600); }
.act-title { font-family:'Fraunces',serif; font-size:1.2rem; font-weight:600; color:var(--text); line-height:1.25; }

.act-segs { background:var(--surface-2); border:1px solid var(--border); border-radius:var(--r-md); padding:16px; margin-bottom:20px; }
.act-segs-label { font-size:11px; font-weight:800; letter-spacing:.12em; text-transform:uppercase; color:var(--text-dim); margin-bottom:12px; }
.act-seg { display:grid; grid-template-columns:1.4fr 1fr auto; align-items:center; gap:12px; padding:8px 0; opacity:0; }
.is-playing .act-seg { animation:fadeRise .5s var(--ease) forwards; }
.is-playing .act-seg:nth-child(2){ animation-delay:.2s; }
.is-playing .act-seg:nth-child(3){ animation-delay:.34s; }
.is-playing .act-seg:nth-child(4){ animation-delay:.48s; }
.is-playing .act-seg:nth-child(5){ animation-delay:.62s; }
.act-seg-name { display:flex; align-items:center; gap:9px; font-size:13px; color:var(--text-muted); }
.act-seg-dot { width:9px; height:9px; border-radius:50%; flex-shrink:0; }
.act-seg-track { display:block; height:8px; background:var(--surface-3); border-radius:var(--r-pill); overflow:hidden; }
/* reliable fill: track is full-width at --w, inner bar scales 0→1 (display:block so width/transform apply on <span>) */
.act-seg-fill { display:block; height:100%; border-radius:var(--r-pill); width:var(--w); transform:scaleX(0); transform-origin:left center; }
.is-playing .act-seg-fill { animation:fillGrow 1s var(--ease) forwards; }
@keyframes fillGrow { to{ transform:scaleX(1); } }
.act-seg-val { font-size:12.5px; font-weight:700; text-align:right; }
.act-seg-val.bad { color:var(--rose-600); }
.act-seg-val.warn { color:var(--gold-600); }

.act-actions { display:grid; gap:11px; }
.act-action { display:flex; gap:13px; align-items:flex-start; padding:14px; border-radius:var(--r-md); background:var(--surface-2); border:1px solid var(--border); opacity:0; }
.is-playing .act-action { animation:fadeRise .5s var(--ease) forwards; }
.is-playing .act-action:nth-child(1){ animation-delay:.7s; }
.is-playing .act-action:nth-child(2){ animation-delay:.85s; }
.is-playing .act-action:nth-child(3){ animation-delay:1s; }
.act-pill { flex-shrink:0; font-size:11px; font-weight:800; letter-spacing:.04em; padding:6px 11px; border-radius:var(--r-pill); white-space:nowrap; }
.act-pill.fix { background:var(--rose-600); color:#fff; }
.act-pill.do { background:var(--gold-300); color:var(--plum-900); }
.act-pill.stop { background:var(--surface-3); color:var(--text-muted); border:1px solid var(--border-strong); }
.act-action-text { font-size:13px; color:var(--text-muted); line-height:1.5; }
.act-roi { display:block; margin-top:5px; font-weight:700; }
.act-roi.green { color:#1f9d6b; }
.act-roi.amber { color:var(--gold-600); }
.act-roi.red { color:var(--rose-600); }

/* =========================================================
   4 · ZAZA — Talk to Your Data (dashboard + chat)
   ========================================================= */
.zaza-host { display:grid; grid-template-columns:1fr; gap:18px; }
@media (min-width:1000px){ .zaza-host{ grid-template-columns:1.05fr .95fr; } }
.zaza-dash { display:grid; gap:14px; }
.zaza-stats { display:grid; grid-template-columns:repeat(2,1fr); gap:10px; }
@media (min-width:520px){ .zaza-stats{ grid-template-columns:repeat(4,1fr); } }
.zstat { background:var(--surface); border:1px solid var(--border); border-radius:var(--r-md); padding:14px; box-shadow:var(--shadow-sm); opacity:0; }
.is-playing .zstat { animation:fadeRise .5s var(--ease) forwards; }
.is-playing .zstat:nth-child(1){ animation-delay:.05s; }
.is-playing .zstat:nth-child(2){ animation-delay:.13s; }
.is-playing .zstat:nth-child(3){ animation-delay:.21s; }
.is-playing .zstat:nth-child(4){ animation-delay:.29s; }
.zstat .zl { font-size:11px; color:var(--text-soft); }
.zstat .zn { font-family:'Fraunces',serif; font-size:1.35rem; font-weight:600; color:var(--text); line-height:1.1; margin-top:3px; }
.zstat .zd { font-size:11px; font-weight:700; margin-top:2px; }
.zd.up { color:#1f9d6b; } .zd.down { color:var(--rose-600); }
.zaza-panel { background:var(--surface); border:1px solid var(--border); border-radius:var(--r-lg); padding:16px; box-shadow:var(--shadow-sm); }
.zaza-panel h5 { font-size:12px; font-weight:700; color:var(--text-soft); margin:0 0 12px; letter-spacing:.02em; }
.zcat { display:grid; gap:9px; }
.zcat-row { display:grid; grid-template-columns:78px 1fr 38px; align-items:center; gap:10px; font-size:12px; color:var(--text-muted); opacity:0; transform:translateY(6px); }
.is-playing .zcat-row { animation:fadeRise .5s var(--ease) forwards; }
.is-playing .zcat-row:nth-child(1){ animation-delay:.05s; }
.is-playing .zcat-row:nth-child(2){ animation-delay:.17s; }
.is-playing .zcat-row:nth-child(3){ animation-delay:.29s; }
.is-playing .zcat-row:nth-child(4){ animation-delay:.41s; }
.is-playing .zcat-row:nth-child(5){ animation-delay:.53s; }
.zcat-track { display:block; height:8px; background:var(--surface-3); border-radius:var(--r-pill); overflow:hidden; }
.zcat-fill { display:block; height:100%; border-radius:var(--r-pill); background:var(--grad-rose); width:var(--w); transform:scaleX(0); transform-origin:left center; }
.is-playing .zcat-fill { animation:fillGrow 1.1s var(--ease) forwards; }
.is-playing .zcat-row:nth-child(2) .zcat-fill{ animation-delay:.2s; }
.is-playing .zcat-row:nth-child(3) .zcat-fill{ animation-delay:.32s; }
.is-playing .zcat-row:nth-child(4) .zcat-fill{ animation-delay:.44s; }
.is-playing .zcat-row:nth-child(5) .zcat-fill{ animation-delay:.56s; }
.zcat-val { text-align:right; font-weight:700; font-size:11.5px; color:var(--text); }

/* chat side */
.zaza-chat { background:var(--surface); border:1px solid var(--border); border-radius:var(--r-lg); box-shadow:var(--shadow-md); display:flex; flex-direction:column; overflow:hidden; }
.zaza-chat-head { display:flex; align-items:center; gap:10px; padding:14px 16px; border-bottom:1px solid var(--border); background:var(--surface-2); }
.zaza-mark { width:30px; height:30px; border-radius:9px; background:var(--grad-rose); display:grid; place-items:center; color:#fff; font-family:'Fraunces',serif; font-weight:600; }
.zaza-chat-head .nm { font-weight:700; font-size:13px; color:var(--text); }
.zaza-chat-head .sb { font-size:11px; color:var(--text-soft); }
.zaza-feed { padding:16px; display:flex; flex-direction:column; gap:12px; min-height:300px; }
.z-msg { max-width:88%; opacity:0; }
.is-playing .z-msg { animation:fadeRise .5s var(--ease) forwards; }
.z-ask { align-self:flex-end; background:var(--ink-900); color:#fff; padding:10px 14px; border-radius:14px 14px 4px 14px; font-size:13px; }
html[data-theme="dark"] .z-ask { background:var(--surface-3); }
.is-playing .z-ask.q1 { animation-delay:.3s; }
.z-typing { align-self:flex-start; display:flex; gap:4px; padding:12px 14px; background:var(--surface-2); border-radius:14px 14px 14px 4px; opacity:0; }
.is-playing .z-typing { animation:fadeIn .3s ease .9s forwards, fadeOut .3s ease 2.1s forwards; }
@keyframes fadeOut { to{ opacity:0; display:none; } }
.z-typing span { width:7px; height:7px; border-radius:50%; background:var(--text-dim); animation:typingBounce 1.2s infinite; }
.z-typing span:nth-child(2){ animation-delay:.2s; } .z-typing span:nth-child(3){ animation-delay:.4s; }
@keyframes typingBounce { 0%,60%,100%{ transform:translateY(0); opacity:.5; } 30%{ transform:translateY(-5px); opacity:1; } }
.z-answer { align-self:flex-start; background:var(--rose-50); border:1px solid var(--rose-100); border-radius:14px 14px 14px 4px; padding:14px; font-size:13px; color:var(--text-muted); line-height:1.5; }
html[data-theme="dark"] .z-answer { background:rgba(232,90,138,.09); border-color:rgba(232,90,138,.2); }
.is-playing .z-answer { animation-delay:2.2s; }
.z-answer .z-lead { font-family:'Fraunces',serif; font-size:1.02rem; color:var(--text); margin-bottom:8px; }
.z-answer strong { color:var(--rose-700); }
.z-minibars { display:grid; gap:7px; margin:12px 0; }
.z-minibar { display:grid; grid-template-columns:64px 1fr 52px; align-items:center; gap:9px; font-size:11.5px; }
.z-minibar .mt { display:block; height:18px; background:var(--surface-3); border-radius:5px; overflow:hidden; }
.z-minibar .mf { display:block; height:100%; width:var(--w); border-radius:5px; transform:scaleX(0); transform-origin:left center; }
.is-playing .z-answer .mf { animation:fillGrow .9s var(--ease) 2.6s forwards; }
.z-fix { margin-top:10px; padding:10px 12px; border-radius:9px; background:var(--plum-900); color:#fbeef3; font-size:12.5px; font-weight:600; display:flex; gap:8px; align-items:flex-start; }
.z-fix .tag { color:var(--gold-300); font-weight:800; }
.zaza-input { display:flex; align-items:center; gap:10px; padding:12px 14px; border-top:1px solid var(--border); }
.zaza-input .fake { flex:1; font-size:13px; color:var(--text-dim); }
.zaza-input .send { width:32px; height:32px; border-radius:50%; background:var(--grad-rose); color:#fff; display:grid; place-items:center; }

/* =========================================================
   Reduced motion — show final state
   ========================================================= */
@media (prefers-reduced-motion:reduce){
  .sell-widget,.sw-chip,.sw-chip.is-picked,.sw-reply,.sw-fu,
  .st-bar,.st-barh,.st-area,.st-fade,.st-dot,
  .act-seg,.act-action,.zstat,.z-msg,.z-answer,.zcat-row { animation:none !important; opacity:1 !important; transform:none !important; }
  .sell-widget { transform:none !important; }
  .st-bar { transform:scaleY(1) !important; } .st-barh { transform:scaleX(1) !important; }
  .st-line { stroke-dashoffset:0 !important; }
  .act-seg-fill,.zcat-fill,.z-minibar .mf { transform:scaleX(1) !important; animation:none !important; }
  .z-typing { display:none !important; }
}

/* =========================================================
   Iris mascot (branded SVG) · used everywhere Iris appears
   ========================================================= */
.iris-mascot { display:block; width:100%; height:100%; }
.iris-avatar { width:40px; height:40px; border-radius:50%; overflow:hidden; flex-shrink:0; background:var(--rose-50); display:grid; place-items:center; }
html[data-theme="dark"] .iris-avatar { background:rgba(232,90,138,.14); }
.iris-avatar.lg { width:52px; height:52px; }

/* =========================================================
   Real images in placeholders (img.ph-img)
   ========================================================= */
img.ph-img { width:100%; height:100%; object-fit:cover; display:block; border-radius:inherit; }
.pdp-photo img.ph-img, .vert-media img.ph-img { border-radius:inherit; }

/* =========================================================
   Hero video — poster + play, opens lightbox
   ========================================================= */
.video-poster { position:relative; cursor:pointer; }
.video-poster .vp-play {
  position:absolute; inset:0; margin:auto; width:74px; height:74px; border-radius:50%;
  background:var(--grad-rose); color:#fff; display:grid; place-items:center;
  box-shadow:0 10px 30px rgba(214,51,108,.45); transition:transform .25s var(--ease);
}
.video-poster .vp-play svg { width:30px; height:30px; margin-left:4px; }
.video-poster:hover .vp-play { transform:scale(1.08); }
.video-poster .vp-label {
  position:absolute; left:0; right:0; bottom:18px; text-align:center; color:#fff;
  font-weight:700; font-size:14px; text-shadow:0 2px 12px rgba(22,15,26,.6);
}
.video-modal {
  position:fixed; inset:0; z-index:200; display:none; place-items:center; padding:24px;
  background:rgba(22,15,26,.82); backdrop-filter:blur(6px);
}
.video-modal.is-open { display:grid; }