/* ============================================================
   OptiWolf marketing-site — animated app-screen renders.
   Markup: server/renders.js · animation engine: /js/renders.js.
   The engine drives state via classes: .play (in view) and .done
   (finished / reduced-motion final state). Everything transitions
   from a resting state to .done, so prefers-reduced-motion users
   simply get .done with transitions disabled (see the media query
   at the bottom).
   ============================================================ */

/* shared bits */
.rc-live{display:inline-flex;align-items:center;gap:7px;font-size:.8rem;font-weight:600;color:var(--teal-700);}
.rc-live .dot{width:8px;height:8px;border-radius:50%;background:var(--teal-500);box-shadow:0 0 0 4px rgba(47,217,194,.2);animation:r-pulse 1.8s infinite;}
.rc-name{font-size:.82rem;color:var(--muted);font-weight:500;}
@keyframes r-pulse{0%{box-shadow:0 0 0 0 rgba(47,217,194,.45);}70%{box-shadow:0 0 0 7px rgba(47,217,194,0);}100%{box-shadow:0 0 0 0 rgba(47,217,194,0);}}

/* ---- ab-card: the hero experiment card ---------------------------------- */
.r-abcard{width:100%;max-width:440px;background:var(--surface);border:1px solid var(--border);border-radius:20px;padding:24px;box-shadow:var(--sh-lg);}
.r-abcard .rc-top{display:flex;align-items:center;justify-content:space-between;margin-bottom:20px;}
.r-abcard .rc-rows{display:flex;flex-direction:column;gap:15px;}
.r-abcard .rc-row{display:flex;align-items:center;gap:12px;}
.rc-tag{flex:none;width:28px;height:28px;border-radius:8px;display:grid;place-content:center;font-family:var(--display);font-weight:700;font-size:.9rem;background:var(--navy-50);color:var(--navy-700);border:1px solid var(--border);}
.rc-tag.b{background:var(--grad-teal);color:var(--navy-900);border-color:transparent;}
.rc-bar{flex:1;height:10px;border-radius:999px;background:var(--navy-50);overflow:hidden;}
.rc-bar i{display:block;height:100%;width:0;border-radius:999px;background:var(--navy-300);transition:width 1.6s cubic-bezier(.22,.8,.36,1);}
.rc-bar i.teal{background:var(--grad-teal);}
.rc-rate{flex:none;min-width:48px;text-align:right;font-family:var(--display);font-weight:700;font-size:1.02rem;color:var(--navy-900);font-variant-numeric:tabular-nums;}
.r-abcard .rc-b .rc-rate{color:var(--teal-700);}
.rc-meta{display:flex;justify-content:space-between;margin-top:16px;font-size:.82rem;color:var(--muted);}
.rc-meta b{color:var(--navy-800);font-variant-numeric:tabular-nums;font-weight:600;}
.r-abcard .rc-foot{display:flex;align-items:center;justify-content:space-between;gap:10px;margin-top:18px;padding-top:16px;border-top:1px solid var(--border);opacity:0;transform:translateY(6px);transition:.5s ease;}
.r-abcard.done .rc-foot{opacity:1;transform:none;}
.rc-verdict{display:inline-flex;align-items:center;gap:7px;font-family:var(--display);font-weight:700;font-size:.9rem;color:var(--navy-900);background:var(--navy-50);border:1px solid var(--border);padding:6px 13px;border-radius:999px;}
.rc-verdict::before{content:"";width:11px;height:6px;border:2px solid var(--teal-600);border-top:0;border-right:0;transform:rotate(-45deg) translateY(-1px);}
.rc-rpv{font-size:.84rem;font-weight:700;color:var(--teal-700);}

/* ---- results-table: funnel goals + revenue verdict ----------------------- */
.r-table{width:100%;max-width:480px;background:var(--surface);border:1px solid var(--border);border-radius:18px;padding:20px 22px;box-shadow:var(--sh-lg);font-size:.86rem;}
.rt-title{display:flex;align-items:center;justify-content:space-between;margin-bottom:14px;}
.rt-head,.rt-row{display:grid;grid-template-columns:1.15fr 1fr 1fr .95fr;gap:10px;align-items:center;}
.rt-head{font-size:.68rem;text-transform:uppercase;letter-spacing:.08em;color:var(--muted);font-weight:700;padding-bottom:8px;border-bottom:1px solid var(--border);}
.rt-row{padding:10px 0;border-bottom:1px solid var(--border);opacity:.35;transition:opacity .5s;}
.rt-row.on{opacity:1;}
.rt-goal{font-weight:600;color:var(--navy-900);font-size:.84rem;}
.rt-cell{display:flex;align-items:center;gap:7px;min-width:0;}
.rt-cell b{font-family:var(--display);font-weight:700;color:var(--navy-800);font-variant-numeric:tabular-nums;font-size:.84rem;}
.rt-bar{flex:1;max-width:44px;height:7px;border-radius:999px;background:var(--navy-50);position:relative;overflow:hidden;}
.rt-bar::after{content:"";position:absolute;inset:0;width:var(--w,0%);background:var(--navy-300);border-radius:999px;transition:width 1.1s cubic-bezier(.22,.8,.36,1);}
.rt-bar.teal::after{background:var(--grad-teal);}
.rt-chip{justify-self:end;font-size:.7rem;font-weight:700;padding:3px 9px;border-radius:999px;background:var(--surface-2);color:var(--muted);white-space:nowrap;transition:.3s;}
.rt-row.sig .rt-chip{background:var(--ow-success-bg);color:var(--ow-success);}
.rt-verdict{margin-top:14px;padding:11px 14px;border-radius:12px;background:var(--navy-50);border:1px solid var(--navy-100);color:var(--ink-soft);font-size:.86rem;opacity:0;transform:translateY(6px);transition:.5s ease;}
.r-table.done .rt-verdict{opacity:1;transform:none;}
.rt-verdict b{color:var(--navy-900);}
.rt-badge{display:inline-block;background:var(--grad-teal);color:var(--navy-900);font-family:var(--display);font-weight:700;font-size:.72rem;padding:2px 9px;border-radius:999px;margin-right:4px;}

/* ---- personalize: rules match → headline swap → holdback lift ------------ */
.r-pers{width:100%;max-width:470px;display:grid;grid-template-columns:1fr 1.25fr;gap:12px;}
.rp-rules{background:var(--surface);border:1px solid var(--border);border-radius:16px;padding:16px;box-shadow:var(--sh-md);display:flex;flex-direction:column;gap:8px;}
.rp-cap{font-size:.66rem;text-transform:uppercase;letter-spacing:.1em;font-weight:700;color:var(--muted);}
.rp-rule{position:relative;font-size:.8rem;font-weight:500;color:var(--ink-soft);background:var(--surface-2);border:1px solid var(--border);border-radius:9px;padding:7px 9px 7px 28px;transition:.35s;}
.rp-rule::before{content:"";position:absolute;left:9px;top:50%;width:11px;height:11px;margin-top:-6px;border-radius:50%;border:1.5px solid var(--border-strong);transition:.35s;}
.rp-rule::after{content:"";position:absolute;left:12px;top:50%;width:6px;height:3px;margin-top:-3px;border:1.5px solid #fff;border-top:0;border-right:0;transform:rotate(-45deg) scale(0);transition:.25s;}
.rp-rule.ok{border-color:var(--teal-500);color:var(--navy-900);background:var(--surface);}
.rp-rule.ok::before{background:var(--teal-500);border-color:var(--teal-500);}
.rp-rule.ok::after{transform:rotate(-45deg) scale(1);}
.rp-match{margin-top:auto;text-align:center;font-size:.74rem;font-weight:700;color:var(--teal-700);background:var(--ow-success-bg);border-radius:999px;padding:6px 8px;opacity:0;transform:scale(.9);transition:.35s;}
.r-pers.matched .rp-match{opacity:1;transform:none;}
.rp-page{background:var(--surface);border:1px solid var(--border);border-radius:16px;box-shadow:var(--sh-lg);overflow:hidden;display:flex;flex-direction:column;}
.rp-chrome,.pp-chrome{display:flex;gap:5px;padding:9px 12px;border-bottom:1px solid var(--border);background:var(--surface-2);}
.rp-chrome i,.pp-chrome i{width:8px;height:8px;border-radius:50%;background:var(--navy-200);}
.rp-body{padding:18px 16px 20px;display:flex;flex-direction:column;gap:9px;}
.rp-h{position:relative;font-family:var(--display);font-weight:700;font-size:.98rem;line-height:1.3;color:var(--navy-900);min-height:2.6em;}
.rp-h span{position:absolute;inset:0;transition:opacity .45s;}
.rp-h-b{opacity:0;color:var(--teal-700);}
.r-pers.swapped .rp-h-a{opacity:0;}
.r-pers.swapped .rp-h-b{opacity:1;}
.rp-line{height:8px;border-radius:999px;background:var(--navy-50);width:92%;}
.rp-line.short{width:64%;}
.rp-btn{position:relative;margin-top:6px;align-self:flex-start;font-size:.74rem;font-weight:700;color:var(--navy-900);background:var(--grad-teal);border-radius:9px;padding:7px 14px;transition:.3s;}
.rp-btn span{transition:opacity .35s;}
.rp-btn-b{position:absolute;left:14px;top:7px;white-space:nowrap;opacity:0;}
.r-pers.swapped .rp-btn-a{opacity:0;}
.r-pers.swapped .rp-btn-b{opacity:1;}
.rp-foot{grid-column:1/-1;display:flex;align-items:center;gap:14px;background:var(--surface);border:1px solid var(--border);border-radius:14px;padding:12px 16px;box-shadow:var(--sh-sm);}
.rp-split{flex:1;min-width:0;}
.rp-split-bar{display:block;height:8px;border-radius:999px;background:var(--navy-100);overflow:hidden;}
.rp-split-bar i{display:block;height:100%;width:0;background:var(--grad-teal);border-radius:999px;transition:width 1.2s cubic-bezier(.22,.8,.36,1);}
.rp-split-lbl{display:block;font-size:.7rem;color:var(--muted);margin-top:5px;font-weight:500;}
.rp-lift{flex:none;font-size:.8rem;font-weight:700;color:var(--teal-700);opacity:0;transform:translateY(5px);transition:.45s;}
.r-pers.done .rp-lift{opacity:1;transform:none;}

/* ---- popup-flow: teaser → popup → lead ----------------------------------- */
.r-popup{width:100%;max-width:440px;}
.pp-site{position:relative;background:var(--surface);border:1px solid var(--border);border-radius:16px;box-shadow:var(--sh-lg);overflow:hidden;height:268px;}
.pp-lines{padding:20px 18px;display:flex;flex-direction:column;gap:11px;}
.pp-lines span{height:9px;border-radius:999px;background:var(--navy-50);}
.pp-lines .w60{width:60%;}.pp-lines .w80{width:80%;}.pp-lines .w40{width:40%;}.pp-lines .w70{width:70%;}
.pp-teaser{position:absolute;right:12px;bottom:12px;background:var(--navy-900);color:#fff;font-size:.74rem;font-weight:600;padding:8px 14px;border-radius:999px;box-shadow:var(--sh-md);opacity:0;transform:translateY(14px);transition:.4s cubic-bezier(.22,.8,.36,1);}
.r-popup.teased .pp-teaser{opacity:1;transform:none;}
.r-popup.opened .pp-teaser{opacity:0;transform:translateY(14px);}
.pp-modal{position:absolute;left:50%;top:50%;width:78%;transform:translate(-50%,-42%) scale(.94);opacity:0;background:var(--surface);border:1px solid var(--border);border-radius:14px;box-shadow:var(--sh-lg);padding:18px 18px 16px;transition:.4s cubic-bezier(.22,.8,.36,1);}
.r-popup.opened .pp-modal{opacity:1;transform:translate(-50%,-50%) scale(1);}
.pp-x{position:absolute;right:10px;top:6px;color:var(--muted);font-size:1rem;line-height:1;}
.pp-screen{display:flex;flex-direction:column;gap:8px;align-items:flex-start;}
.pp-screen b{font-family:var(--display);font-size:.95rem;color:var(--navy-900);line-height:1.25;}
.pp-screen>span{font-size:.76rem;color:var(--muted);}
.pp-s2{display:none;align-items:center;text-align:center;gap:6px;}
.r-popup.success .pp-s1{display:none;}
.r-popup.success .pp-s2{display:flex;width:100%;}
.pp-field{width:100%;display:flex;align-items:center;border:1.5px solid var(--border-strong);border-radius:9px;padding:8px 10px;font-size:.78rem;color:var(--ink);min-height:34px;background:#fff;}
.pp-typed:empty::before{content:"you@company.com";color:var(--ow-muted-2);}
.pp-caret{width:1.5px;height:14px;background:var(--navy-800);margin-left:2px;opacity:0;}
.r-popup.typing .pp-caret{opacity:1;animation:r-blink .9s steps(2,start) infinite;}
@keyframes r-blink{50%{opacity:.1;}}
.pp-cta{width:100%;text-align:center;background:var(--teal-500);color:var(--navy-900);font-size:.8rem;font-weight:700;border-radius:9px;padding:9px 0;transition:.15s;}
.r-popup.pressing .pp-cta{transform:scale(.97);background:var(--teal-600);}
.pp-check{width:30px;height:30px;border-radius:50%;background:var(--ow-success-bg);position:relative;margin:0 auto;}
.pp-check::after{content:"";position:absolute;left:9px;top:9px;width:11px;height:6px;border:2.5px solid var(--ow-success);border-top:0;border-right:0;transform:rotate(-45deg);}
.pp-lead{display:flex;align-items:center;gap:9px;margin-top:12px;background:var(--surface);border:1px solid var(--border);border-radius:12px;padding:10px 14px;box-shadow:var(--sh-sm);font-size:.78rem;opacity:0;transform:translateY(8px);transition:.45s cubic-bezier(.22,.8,.36,1);}
.r-popup.done .pp-lead{opacity:1;transform:none;}
.pp-lead-dot{flex:none;width:8px;height:8px;border-radius:50%;background:var(--ow-success);}
.pp-lead-txt{flex:1;min-width:0;color:var(--ink-soft);font-weight:600;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;}
.pp-lead-st{flex:none;margin-left:auto;font-size:.68rem;font-weight:700;color:var(--ow-success);background:var(--ow-success-bg);padding:3px 9px;border-radius:999px;}

/* ---- spine: pillars → spine → proof (ambient, CSS-only) ------------------ */
.r-spine{width:100%;max-width:560px;margin:0 auto;text-align:center;}
.sp-pillars{display:flex;justify-content:center;gap:10px;flex-wrap:wrap;}
.sp-pillars span{background:rgba(255,255,255,.07);border:1px solid rgba(255,255,255,.16);color:#fff;font-family:var(--display);font-weight:600;font-size:.84rem;padding:8px 16px;border-radius:999px;}
.sp-flow{position:relative;height:44px;}
.sp-flow::before{content:"";position:absolute;left:50%;top:0;bottom:0;width:0;border-left:1px dashed rgba(255,255,255,.25);}
.sp-flow .sp-drop{position:absolute;top:-4px;left:50%;width:7px;height:7px;margin-left:-3.5px;border-radius:50%;background:var(--teal-400);opacity:0;}
.sp-flow .d1{animation-delay:0s;}
.sp-flow .d2{animation-delay:.55s;}
.sp-flow .d3{animation-delay:1.1s;}
.sp-flow.one{height:38px;}
.r-spine.play .sp-drop{animation:sp-fall 1.65s ease-in infinite;}
@keyframes sp-fall{0%{transform:translateY(0);opacity:0;}15%{opacity:1;}85%{opacity:1;}100%{transform:translateY(42px);opacity:0;}}
.sp-bar{background:rgba(255,255,255,.06);border:1px solid rgba(94,244,223,.35);border-radius:14px;padding:14px 18px;box-shadow:0 0 34px rgba(47,217,194,.14);}
.sp-bar b{display:block;font-family:var(--display);color:#fff;font-size:1rem;}
.sp-bar span{display:block;color:var(--navy-200);font-size:.8rem;margin-top:3px;}
.sp-verdict{display:inline-block;background:var(--grad-teal);color:var(--navy-900);font-weight:600;font-size:.88rem;padding:9px 18px;border-radius:999px;box-shadow:0 8px 24px rgba(47,217,194,.3);}
.sp-verdict b{font-weight:700;}

/* placement helper: a soft glow panel behind renders used in section rows */
.render-panel{position:relative;display:flex;align-items:center;justify-content:center;padding:26px 18px;}
.render-panel::before{content:"";position:absolute;inset:0;background:radial-gradient(420px 300px at 55% 45%,rgba(47,217,194,.16),transparent 68%);border-radius:24px;}
.render-panel>*{position:relative;}

/* ---- reduced motion: no loops, no transitions — final states only -------- */
@media (prefers-reduced-motion: reduce){
  .rc-live .dot,.r-popup .pp-caret,.r-spine .sp-drop{animation:none !important;}
  .r-abcard *,.r-table *,.r-pers *,.r-popup *,.r-popup .pp-modal{transition:none !important;}
  .rt-row{opacity:1;}
}
@media (max-width:520px){
  .r-pers{grid-template-columns:1fr;}
  .rp-match{margin-top:2px;}
}