/* azaslab Live Voices — front-end. Variable-driven themes; "LIVE SIGNAL" treatment. */

.alv-proof{
  /* theme tokens (overridden per data-theme below) */
  --alv-bg:#121014;
  --alv-ink:#f4f1ea;
  --alv-dim:#928d86;
  --alv-accent:#ff5a5f;            /* single signal colour: live dot, hearts, hot */
  --alv-meta:var(--alv-accent);    /* small accent metadata; light themes darken it for AA */
  --alv-glow:rgba(255,90,95,.16);
  --alv-line:rgba(244,241,234,.10);
  --alv-surface:rgba(255,255,255,.05);
  --alv-font:system-ui,-apple-system,"Segoe UI",Roboto,"Hiragino Sans",sans-serif;
  --alv-mono:ui-monospace,SFMono-Regular,"SF Mono",Menlo,Consolas,"Liberation Mono",monospace;

  position:relative;overflow:hidden;padding:0 0 4px;
  font-family:var(--alv-font);color:var(--alv-ink);
  /* one faint accent glow on a flat ground — no multi-colour mesh */
  background:radial-gradient(680px 300px at 50% -140px, var(--alv-glow), transparent 70%), var(--alv-bg);
}
.alv-proof *{box-sizing:border-box;}

/* screen-reader-only equivalent of the animated voices (visually hidden) */
.alv-sr-only{position:absolute;width:1px;height:1px;padding:0;margin:-1px;overflow:hidden;
  clip:rect(0 0 0 0);clip-path:inset(50%);white-space:nowrap;border:0;}

/* free: Black / White. --alv-meta = small accent metadata (hearts / verified / stars):
   it defaults to the accent, but light grounds darken it for WCAG AA. A custom Pro
   accent overrides --alv-meta inline too, so it carries through to the small metadata. */
.alv-proof[data-theme="light"]{--alv-bg:#ffffff;--alv-ink:#0c0c12;--alv-dim:#6b6b72;--alv-accent:#e0455a;--alv-meta:#c0334a;--alv-glow:rgba(224,69,90,.08);--alv-line:rgba(0,0,0,.09);--alv-surface:#ffffff;
  border-top:1px solid #ececf0;border-bottom:1px solid #ececf0;}
/* pro: full curated palettes — each its own ground (not just an accent swap),
   a deliberate mix of dark and light. */
.alv-proof[data-theme="ocean"]{--alv-bg:#0c1622;--alv-ink:#e9f1fb;--alv-dim:#8da6c0;--alv-accent:#4aa3ff;--alv-glow:rgba(74,163,255,.18);--alv-line:rgba(233,241,251,.10);--alv-surface:rgba(255,255,255,.05);}
.alv-proof[data-theme="sunset"]{--alv-bg:#1a1014;--alv-ink:#fbe9e2;--alv-dim:#bd9a90;--alv-accent:#ff9d3d;--alv-glow:rgba(255,157,61,.18);--alv-line:rgba(251,233,226,.10);--alv-surface:rgba(255,255,255,.05);}
.alv-proof[data-theme="forest"]{--alv-bg:#0d1713;--alv-ink:#e7f2ea;--alv-dim:#8eae9c;--alv-accent:#3fcf91;--alv-glow:rgba(63,207,145,.18);--alv-line:rgba(231,242,234,.10);--alv-surface:rgba(255,255,255,.05);}
.alv-proof[data-theme="mist"]{--alv-bg:#eef3f8;--alv-ink:#13202e;--alv-dim:#566677;--alv-accent:#2f6fd0;--alv-meta:#2a63bd;--alv-glow:rgba(47,111,208,.10);--alv-line:rgba(0,0,0,.08);--alv-surface:#ffffff;
  border-top:1px solid #e2e8f0;border-bottom:1px solid #e2e8f0;}
.alv-proof[data-theme="paper"]{--alv-bg:#faf6ef;--alv-ink:#1c1714;--alv-dim:#6f685f;--alv-accent:#e0455a;--alv-meta:#c0334a;--alv-glow:rgba(224,69,90,.08);--alv-line:rgba(0,0,0,.09);--alv-surface:#ffffff;
  border-top:1px solid #ece7df;border-bottom:1px solid #ece7df;}

/* width: full-bleed (break out of the content container to the viewport) */
.alv-proof.alv-full{width:100vw;max-width:100vw;margin-left:calc(50% - 50vw);margin-right:calc(50% - 50vw);}

/* blend into the host page top/bottom */
.alv-proof::before,.alv-proof::after{content:"";position:absolute;left:0;right:0;height:56px;z-index:6;pointer-events:none;}
.alv-proof::before{top:0;background:linear-gradient(var(--alv-bg),transparent);}
.alv-proof::after{bottom:0;background:linear-gradient(transparent,var(--alv-bg));}

/* head */
.alv-head{position:relative;z-index:7;max-width:860px;margin:0 auto;padding:54px 24px 8px;text-align:center;}
.alv-pill{display:inline-flex;align-items:center;gap:8px;font-family:var(--alv-mono);font-size:12px;letter-spacing:.06em;font-weight:600;
  padding:7px 14px;border-radius:999px;margin-bottom:20px;color:var(--alv-ink);background:transparent;border:1px solid var(--alv-line);}
.alv-pill b{font-weight:700;}
.alv-pill .alv-count:empty{display:none;}
.alv-clock{color:var(--alv-dim);font-variant-numeric:tabular-nums;}
.alv-blink{width:7px;height:7px;border-radius:50%;background:var(--alv-accent);box-shadow:0 0 0 0 var(--alv-glow);animation:alv-blink 1.6s infinite;}
@keyframes alv-blink{70%{box-shadow:0 0 0 9px transparent;}100%{box-shadow:0 0 0 0 transparent;}}
.alv-head h2{font-size:clamp(34px,5.2vw,60px);font-weight:800;letter-spacing:-.03em;line-height:1.02;margin:0 0 12px;}
.alv-head p{font-size:15px;line-height:1.55;max-width:480px;margin:0 auto;color:var(--alv-dim);}

/* stage */
.alv-stage{position:relative;height:440px;margin-top:26px;overflow:hidden;z-index:5;isolation:isolate;
  -webkit-mask-image:linear-gradient(90deg,transparent,#000 4%,#000 96%,transparent);
          mask-image:linear-gradient(90deg,transparent,#000 4%,#000 96%,transparent);}

/* comment = a live feed row: [time] [avatar] name text ♥n */
.alv-cmt{position:absolute;left:100%;white-space:nowrap;z-index:2;display:inline-flex;align-items:center;gap:9px;
  font-size:18px;font-weight:500;will-change:transform;animation:alv-flow linear forwards;text-shadow:0 1px 2px var(--alv-bg);}
@keyframes alv-flow{to{transform:translateX(var(--alv-end));}}
.alv-cmt .alv-time{font-family:var(--alv-mono);font-size:.62em;color:var(--alv-dim);letter-spacing:.02em;text-shadow:none;}
.alv-cmt .alv-ava{width:22px;height:22px;border-radius:50%;flex:0 0 auto;display:grid;place-items:center;color:#fff;font-weight:800;font-size:10px;text-shadow:none;}
.alv-cmt .alv-nm{font-weight:700;color:var(--alv-ink);}
.alv-cmt .alv-vf{font-family:var(--alv-mono);color:var(--alv-meta);font-size:.7em;margin-left:2px;}
.alv-cmt .alv-hn{font-family:var(--alv-mono);font-size:.72em;color:var(--alv-dim);}
.alv-cmt .alv-tx{color:var(--alv-ink);font-weight:500;}
.alv-cmt .alv-lk{font-family:var(--alv-mono);font-size:.7em;font-weight:600;color:var(--alv-meta);}
.alv-cmt.alv-hot{font-weight:600;}
.alv-cmt.alv-hot .alv-nm{color:var(--alv-accent);}

/* spotlight (ue/shita) — single accent, no rainbow gradient */
.alv-fixed{position:absolute;left:50%;z-index:5;transform:translateX(-50%);text-align:center;white-space:nowrap;pointer-events:none;
  animation:alv-pop 3.8s cubic-bezier(.2,1.25,.3,1) forwards;}
.alv-fixed.alv-ue{top:18px;}
.alv-fixed.alv-shita{bottom:16px;}
.alv-fixed .alv-ftx{display:block;font-size:clamp(30px,4.2vw,48px);font-weight:800;letter-spacing:-.03em;line-height:1.05;
  color:var(--alv-accent);filter:drop-shadow(0 6px 22px var(--alv-glow));}
.alv-fixed .alv-fby{display:block;margin-top:7px;font-family:var(--alv-mono);font-size:13px;color:var(--alv-dim);}
@keyframes alv-pop{
  0%{opacity:0;transform:translateX(-50%) scale(.72);}
  9%{opacity:1;transform:translateX(-50%) scale(1.05);}
  15%{transform:translateX(-50%) scale(1);}
  86%{opacity:1;transform:translateX(-50%) scale(1);}
  100%{opacity:0;transform:translateX(-50%) scale(1.03);}
}

/* foot / branding */
.alv-foot{position:relative;z-index:7;text-align:center;padding:14px 0 38px;font-family:var(--alv-mono);font-size:12px;color:var(--alv-dim);letter-spacing:.03em;}
.alv-foot a{color:inherit;}

/* cards mode — formal testimonial marquee (two opposite-scrolling rows) */
.alv-cards{position:relative;z-index:5;display:flex;flex-direction:column;gap:16px;padding:10px 0 8px;
  width:100%;overflow:hidden;
  -webkit-mask-image:linear-gradient(90deg,transparent,#000 5%,#000 95%,transparent);
          mask-image:linear-gradient(90deg,transparent,#000 5%,#000 95%,transparent);}
.alv-track{display:flex;gap:16px;width:max-content;animation:alv-slide 64s linear infinite;}
.alv-track-rev{animation-direction:reverse;animation-duration:80s;}
@keyframes alv-slide{to{transform:translateX(-50%);}}
.alv-card{flex:0 0 auto;width:330px;border-radius:14px;padding:18px 18px 16px;background:var(--alv-surface);border:1px solid var(--alv-line);}
.alv-proof[data-theme="light"] .alv-card,
.alv-proof[data-theme="mist"] .alv-card,
.alv-proof[data-theme="paper"] .alv-card{box-shadow:0 2px 12px rgba(0,0,0,.06);}
.alv-card-stars{display:block;color:var(--alv-meta);font-size:13px;letter-spacing:2px;margin-bottom:10px;}
.alv-card-body{margin:0 0 14px;font-size:15px;line-height:1.6;color:var(--alv-ink);white-space:normal;}
.alv-card-foot{display:flex;align-items:center;gap:10px;}
.alv-card-ava{width:34px;height:34px;border-radius:50%;flex:0 0 auto;display:grid;place-items:center;color:#fff;font-weight:800;font-size:13px;}
.alv-card-who{line-height:1.3;}
.alv-card-nm{font-weight:700;color:var(--alv-ink);font-size:14px;}
.alv-card-hn{font-family:var(--alv-mono);font-size:12px;color:var(--alv-dim);}
.alv-card.alv-hot{border-color:var(--alv-accent);}
@media (max-width:560px){.alv-card{width:270px;}}
@media (prefers-reduced-motion:reduce){.alv-track{animation:none;}}

/* reduced motion: static stack */
.alv-cmt.alv-static{animation:none;left:18px;transform:none;}
@media (prefers-reduced-motion: reduce){
  .alv-cmt{animation-duration:0s;}
  .alv-fixed{display:none;}
}