/* ============================================================================
   Go Notifier — animated product demo for the "See it in action" slot.
   Pure CSS/JS motion (no video). Reuses the hero .phone device frame + brand
   tokens. Driven by demo.js, which sets [data-panel] + classes on .demo-stage.
   ============================================================================ */

.demo-stage {
  position: absolute; inset: 0; z-index: 1;
  display: flex; align-items: center; justify-content: center; gap: clamp(18px, 4vw, 56px);
  padding: clamp(18px, 3vw, 40px);
}
/* soft brand glow behind the phone, fills the wide desktop frame */
.demo-stage::before {
  content: ""; position: absolute; width: 60%; height: 80%; left: 50%; top: 50%; transform: translate(-50%,-50%);
  background: radial-gradient(circle, rgba(59,125,245,.22), transparent 62%); filter: blur(50px); pointer-events: none; z-index: 0;
}

/* ---- narration side (left on desktop) ---- */
.demo-side { position: relative; z-index: 2; flex: 1 1 38%; max-width: 360px; min-width: 0; }
.demo-eyebrow { display: inline-block; font-size: .74rem; font-weight: 700; letter-spacing: .12em; text-transform: uppercase;
  color: var(--teal); background: rgba(52,219,199,.12); border: 1px solid rgba(52,219,199,.22); padding: 5px 12px; border-radius: 999px; margin-bottom: 16px; }
.demo-caption { font-size: clamp(1.5rem, 2.6vw, 2.1rem); font-weight: 700; line-height: 1.12; letter-spacing: -.025em; color: #fff; min-height: 2.3em; }
.demo-sub { color: var(--text-muted); font-size: clamp(.92rem, 1.5vw, 1.05rem); margin-top: 12px; min-height: 2.6em; }
.demo-caption, .demo-sub { transition: opacity .4s var(--ease), transform .4s var(--ease); }
.demo-stage.swap .demo-caption, .demo-stage.swap .demo-sub { opacity: 0; transform: translateY(8px); }
/* progress dots */
.demo-dots { display: flex; gap: 8px; margin-top: 26px; }
.demo-dots i { width: 8px; height: 8px; border-radius: 50%; background: var(--line-strong); transition: background .3s, width .3s; }
.demo-dots i.on { width: 22px; border-radius: 999px; background: var(--gradient); }

/* ---- the demo phone (reuses .phone frame; compact + steady) ---- */
.demo-phone { position: relative; z-index: 2; width: clamp(230px, 30vw, 266px); flex: 0 0 auto; margin: 0; }
.demo-phone .phone-screen { padding: 30px 15px 18px; min-height: 388px; }
.demo-phone .phone-island { top: 20px; width: 70px; height: 19px; }
.demo-phone .phone-top { margin-bottom: 12px; }
.demo-phone .phone-top .dot { width: 24px; height: 24px; border-radius: 8px; }
.demo-phone .phone-top b { font-size: .9rem; }

/* panels stacked; active one fades/slides in via [data-panel] */
.demo-panel { position: absolute; inset: 30px 15px 18px; opacity: 0; transform: translateY(10px); pointer-events: none;
  transition: opacity .45s var(--ease), transform .45s var(--ease); }
.demo-stage[data-panel="rollcall"] .demo-rollcall,
.demo-stage[data-panel="schedule"] .demo-schedule,
.demo-stage[data-panel="message"]  .demo-message { opacity: 1; transform: none; }

/* ---- roll-call panel ---- */
.demo-q { font-weight: 700; font-size: 1.06rem; color: #fff; margin-bottom: 10px; }
.demo-tally { display: inline-flex; align-items: baseline; gap: 5px; font-size: .82rem; color: var(--text-muted); margin-bottom: 12px;
  background: rgba(255,255,255,.04); border: 1px solid var(--line); border-radius: 999px; padding: 4px 11px; }
.demo-count { font-size: 1.05rem; font-weight: 800; color: var(--teal); font-variant-numeric: tabular-nums; transition: color .3s; }
.demo-stage.allin .demo-count { color: #fff; }
.demo-roster { display: flex; flex-direction: column; }
.demo-row { display: flex; align-items: center; gap: 9px; padding: 8px 8px; margin: 0 -8px; border-top: 1px solid var(--line); font-size: .88rem; color: var(--text);
  border-radius: 10px; transition: background .3s, box-shadow .3s; }
.demo-row .avatar { width: 25px; height: 25px; flex: 0 0 auto; }
.demo-row .nm { flex: 1; min-width: 0; }
.demo-row .tk { font-weight: 700; font-size: .82rem; display: inline-flex; align-items: center; gap: 4px; transition: color .3s, opacity .3s; white-space: nowrap; }
.demo-row .tk.wait { color: #67727f; }
.demo-row .tk.yes { color: var(--teal); }
.demo-row .tk .ico { display: inline-grid; place-items: center; width: 17px; height: 17px; border-radius: 50%; font-size: .7rem; }
.demo-row .tk.yes .ico { background: rgba(52,219,199,.16); }
/* a fresh "yes" pops in */
.demo-row.just .tk.yes { animation: tkpop .45s var(--ease); }
@keyframes tkpop { 0% { transform: scale(.6); opacity: 0; } 60% { transform: scale(1.12); } 100% { transform: scale(1); opacity: 1; } }
/* the straggler */
.demo-row.missing { background: rgba(245,158,11,.10); box-shadow: inset 0 0 0 1px rgba(245,158,11,.35); animation: misspulse 1.3s ease-in-out infinite; }
.demo-row.missing .tk { color: #f59e0b; }
@keyframes misspulse { 0%,100% { box-shadow: inset 0 0 0 1px rgba(245,158,11,.30); } 50% { box-shadow: inset 0 0 0 1px rgba(245,158,11,.65), 0 0 16px rgba(245,158,11,.25); } }
/* buzz target row, while buzzing */
.demo-row.zapped { background: rgba(59,125,245,.12); box-shadow: inset 0 0 0 1px rgba(59,125,245,.5); }

/* ---- buzz moment: rings emanate from the phone + a brief flash ---- */
.demo-rings { position: absolute; inset: 0; display: grid; place-items: center; z-index: 1; pointer-events: none; opacity: 0; transition: opacity .2s; }
.demo-stage.buzzing .demo-rings { opacity: 1; }
.demo-rings span { position: absolute; width: 240px; aspect-ratio: 1; border-radius: 50%; border: 2px solid transparent;
  background: var(--gradient) border-box; -webkit-mask: linear-gradient(#000 0 0) padding-box, linear-gradient(#000 0 0);
  -webkit-mask-composite: xor; mask-composite: exclude; opacity: 0; }
.demo-stage.buzzing .demo-rings span { animation: demoring 1.5s ease-out infinite; }
.demo-stage.buzzing .demo-rings span:nth-child(2) { animation-delay: .4s; }
.demo-stage.buzzing .demo-rings span:nth-child(3) { animation-delay: .8s; }
@keyframes demoring { 0% { transform: scale(.55); opacity: .55; } 100% { transform: scale(2.1); opacity: 0; } }
/* a "Buzzing…" badge that pops on the phone during the buzz */
.demo-buzzbadge { position: absolute; z-index: 4; inset-inline-end: -14px; bottom: 70px; background: #161d25; border: 1px solid var(--line-strong);
  border-radius: 13px; box-shadow: var(--shadow); padding: 8px 12px; display: flex; align-items: center; gap: 8px; font-weight: 700; font-size: .82rem; color: #fff;
  opacity: 0; transform: scale(.8) translateY(6px); transition: opacity .25s var(--ease), transform .25s var(--ease); }
.demo-stage.buzzing .demo-buzzbadge { opacity: 1; transform: none; }
.demo-buzzbadge .b { width: 26px; height: 26px; border-radius: 8px; background: var(--gradient); display: grid; place-items: center; box-shadow: 0 0 16px rgba(52,180,210,.6); }
/* brand blue↔cyan flash over the phone screen at the buzz peak */
.demo-flash { position: absolute; inset: 0; border-radius: 38px; pointer-events: none; opacity: 0; z-index: 3;
  background: radial-gradient(circle, rgba(43,182,220,.55), rgba(59,125,245,.35) 60%, transparent 75%); }
.demo-stage.flash .demo-flash { animation: demoflash .6s ease-out; }
@keyframes demoflash { 0% { opacity: 0; } 25% { opacity: 1; } 100% { opacity: 0; } }

/* ---- schedule panel ---- */
.demo-secthead { display: flex; align-items: center; gap: 8px; margin-bottom: 14px; }
.demo-secthead .dot { width: 24px; height: 24px; border-radius: 8px; background: var(--gradient); flex: 0 0 auto; }
.demo-secthead b { color: #fff; font-size: .9rem; }
.demo-sched-item { display: flex; align-items: center; gap: 11px; padding: 10px 0; border-top: 1px solid var(--line); }
.demo-sched-item:first-of-type { border-top: 0; }
.demo-sched-item .tm { font-variant-numeric: tabular-nums; font-weight: 700; color: var(--teal); font-size: .82rem; width: 42px; flex: 0 0 auto; }
.demo-sched-item .lb { color: var(--text); font-size: .88rem; }
.demo-sched-item .pin { width: 9px; height: 9px; border-radius: 50%; flex: 0 0 auto; }

/* ---- message panel ---- */
.demo-msg { background: linear-gradient(165deg, rgba(52,219,199,.14), rgba(59,125,245,.12)); border: 1px solid rgba(52,180,210,.3);
  border-radius: 14px 14px 14px 4px; padding: 13px 15px; margin-top: 6px; }
.demo-msg .who { color: var(--teal); font-weight: 700; font-size: .76rem; margin-bottom: 4px; }
.demo-msg .tx { color: #fff; font-size: .9rem; line-height: 1.45; }
.demo-msg-meta { color: var(--text-muted); font-size: .74rem; margin-top: 8px; }

/* ---- responsive: stack on narrow screens, frame goes taller so the phone fits ---- */
@media (max-width: 760px) {
  #video .video-frame { aspect-ratio: 3 / 4; }       /* taller so the whole phone (5 rows) fits */
  .demo-stage { flex-direction: column; gap: 12px; justify-content: flex-start; padding: clamp(14px, 4vw, 24px) 14px; }
  .demo-side { flex: 0 0 auto; max-width: 92%; text-align: center; }
  .demo-caption { font-size: clamp(1.3rem, 6vw, 1.7rem); min-height: 0; }
  .demo-sub { display: none; }
  .demo-eyebrow { margin-bottom: 10px; }
  .demo-dots { justify-content: center; margin-top: 12px; }
  .demo-phone { width: min(230px, 62vw); }
  .demo-phone .phone-screen { min-height: 358px; padding: 26px 13px 14px; }
  .demo-phone .demo-panel { inset: 26px 13px 14px; }
  .demo-row { padding: 7px 8px; font-size: .84rem; }
  .demo-phone .demo-q { font-size: 1rem; margin-bottom: 8px; }
  .demo-tally { margin-bottom: 9px; }
}
@media (max-width: 420px) { .demo-dots { display: none; } }

/* ---- RTL: mirror the message speech-bubble tail (the one physical corner); .demo-buzzbadge already uses inset-inline-end ---- */
[dir="rtl"] .demo-msg { border-radius: 14px 14px 4px 14px; }

/* ---- reduced motion: freeze on a representative frame, no looping animation ---- */
@media (prefers-reduced-motion: reduce) {
  .demo-row.missing, .demo-stage.buzzing .demo-rings span, .demo-flash, .demo-row.just .tk.yes { animation: none !important; }
  .demo-caption, .demo-sub, .demo-panel { transition: none !important; }
}