/* ============================================================
   RefPay — animated install demos (looping, pure CSS)
   Plays inside .phone-frame .screen  (iOS / Android)
   and .win-frame .win-screen          (Mac / Windows)
   ============================================================ */

.demo{position:absolute;inset:0;overflow:hidden;font-family:"Manrope",system-ui,sans-serif;
  -webkit-font-smoothing:antialiased}
.demo *{box-sizing:border-box}
.demo .scr{position:absolute;inset:0}

/* shared app icon (RefPay = orange tile + whistle) */
.appicon{border-radius:22%;background:linear-gradient(135deg,#FF8A1F,#E03A18);
  display:flex;align-items:center;justify-content:center;box-shadow:0 6px 14px -5px rgba(231,64,28,.7)}
.appicon svg{width:62%;height:62%;color:#fff;filter:drop-shadow(0 2px 3px rgba(0,0,0,.25))}

/* tap / click ripple */
.tap{position:absolute;width:26px;height:26px;border-radius:50%;background:rgba(255,255,255,.55);
  border:2px solid rgba(255,255,255,.9);margin:-13px 0 0 -13px;opacity:0;pointer-events:none;z-index:30;
  box-shadow:0 2px 8px rgba(0,0,0,.3)}
.demo.win .tap,.demo.mac .tap{background:rgba(40,50,70,.25);border-color:rgba(40,50,70,.5)}

/* desktop cursor */
.cursor{position:absolute;width:16px;height:16px;z-index:31;opacity:0;margin:-2px 0 0 -2px}
.cursor svg{width:100%;height:100%;filter:drop-shadow(0 1px 2px rgba(0,0,0,.4))}

/* =====================  PHONE: shared chrome  ===================== */
.demo .statusbar{position:absolute;top:0;left:0;right:0;height:22px;display:flex;align-items:center;
  justify-content:space-between;padding:0 12px;font-size:9px;font-weight:700;color:#1a1a1a;z-index:5}
.demo .statusbar .sig{display:flex;gap:3px;align-items:center}
.demo .statusbar .sig i{width:3px;height:8px;background:#1a1a1a;border-radius:1px;display:block}
.demo .pgwrap{position:absolute;top:22px;bottom:46px;left:0;right:0;background:#fff;
  display:flex;flex-direction:column;align-items:center;justify-content:center;gap:9px}
.demo .pglogo{height:22px;width:auto}
.demo .pgline{width:62%;height:7px;border-radius:4px;background:#eee}
.demo .pgline.s{width:42%}
.demo .pgbtn{margin-top:6px;font-size:8px;font-weight:700;color:#fff;background:linear-gradient(118deg,#FF8A1F,#E03A18);
  padding:5px 12px;border-radius:20px}

/* iOS Safari bottom bar */
.demo.ios .navbar{position:absolute;bottom:0;left:0;right:0;height:46px;background:#f4f4f5;
  border-top:1px solid #e2e2e4;display:flex;align-items:center;gap:8px;padding:0 12px;z-index:6}
.demo.ios .navbar .url{flex:1;height:26px;border-radius:8px;background:#e4e4e7;display:flex;align-items:center;
  justify-content:center;font-size:9px;color:#555;font-weight:600}
.demo.ios .navbar .ic{width:22px;height:22px;color:#0a84ff;flex-shrink:0;display:flex;align-items:center;justify-content:center}
.demo.ios .navbar .ic svg{width:18px;height:18px}

/* Android Chrome top bar */
.demo.android .navbar{position:absolute;top:22px;left:0;right:0;height:34px;background:#fff;border-bottom:1px solid #eee;
  display:flex;align-items:center;gap:8px;padding:0 10px;z-index:6}
.demo.android .navbar .url{flex:1;height:22px;border-radius:14px;background:#f1f3f4;display:flex;align-items:center;
  padding:0 10px;font-size:8.5px;color:#555;font-weight:600}
.demo.android .navbar .menu{width:18px;display:flex;flex-direction:column;gap:2.5px;align-items:center;flex-shrink:0}
.demo.android .navbar .menu i{width:3px;height:3px;border-radius:50%;background:#444;display:block}
.demo.android .pgwrap{top:56px}

/* =====================  bottom sheet (iOS)  ===================== */
.demo .sheet{position:absolute;left:6px;right:6px;bottom:6px;background:#fff;border-radius:16px;z-index:20;
  box-shadow:0 -8px 30px rgba(0,0,0,.18);padding:8px;transform:translateY(115%)}
.demo .sheet .grip{width:34px;height:4px;border-radius:3px;background:#d4d4d8;margin:2px auto 8px}
.demo .row{display:flex;align-items:center;justify-content:space-between;gap:8px;padding:8px 9px;border-radius:9px;
  font-size:9.5px;font-weight:600;color:#1a1a1a}
.demo .row .ic{width:18px;height:18px;color:#333;display:flex;align-items:center;justify-content:center}
.demo .row .ic svg{width:15px;height:15px}
.demo .row.hl{background:transparent}
.demo .row .nm{flex:1}

/* =====================  Android menu  ===================== */
.demo.android .menu-pop{position:absolute;top:58px;right:8px;width:62%;background:#fff;border-radius:8px;z-index:20;
  box-shadow:0 6px 24px rgba(0,0,0,.22);padding:5px;transform-origin:top right;transform:scale(.2);opacity:0}
.demo.android .menu-pop .row{padding:7px 8px;font-size:9px}

/* =====================  home screen (phone)  ===================== */
.demo .home{background:linear-gradient(160deg,#2a3550,#111830);opacity:0}
.demo .home .grid{position:absolute;top:38px;left:0;right:0;display:grid;grid-template-columns:repeat(4,1fr);
  gap:14px 8px;padding:0 14px}
.demo .home .cell{display:flex;flex-direction:column;align-items:center;gap:4px}
.demo .home .cell .ph{width:34px;height:34px;border-radius:9px;background:rgba(255,255,255,.16)}
.demo .home .cell .lbl{font-size:7px;color:#fff;opacity:.85}
.demo .home .appicon{width:34px;height:34px}
.demo .home .new{transform:scale(0)}
.demo .home .new .lbl{font-weight:700}
.demo .home .dock{position:absolute;bottom:10px;left:10px;right:10px;height:46px;border-radius:18px;
  background:rgba(255,255,255,.14);backdrop-filter:blur(6px)}

/* =====================  DESKTOP window chrome  ===================== */
.demo.mac .scr,.demo.win .scr{background:#e9eaee}
.demo .winbar{position:absolute;top:0;left:0;right:0;height:30px;display:flex;align-items:center;gap:8px;padding:0 10px;z-index:6}
.demo.mac .winbar{background:#e9eaee;border-bottom:1px solid #d6d7db}
.demo.win .winbar{background:#f3f3f3;border-bottom:1px solid #e2e2e2}
.demo .winbar .url{flex:1;height:18px;border-radius:6px;background:#fff;border:1px solid #dadbe0;display:flex;
  align-items:center;justify-content:center;gap:6px;font-size:8.5px;color:#555;font-weight:600;position:relative}
.demo .winbar .tool{width:16px;height:16px;color:#555;display:flex;align-items:center;justify-content:center;flex-shrink:0}
.demo .winbar .tool svg{width:14px;height:14px}
.demo .winbar .install-ic{position:absolute;right:5px;top:50%;transform:translateY(-50%);width:13px;height:13px;color:#2a6fdb}
.demo .winbar .install-ic svg{width:13px;height:13px}
.demo .winpage{position:absolute;top:30px;bottom:0;left:0;right:0;background:#fff;display:flex;flex-direction:column;
  align-items:center;justify-content:center;gap:10px}
.demo .winpage .pglogo{height:26px}

/* macOS share menu */
.demo.mac .menu-pop{position:absolute;top:30px;right:14px;width:46%;background:#fff;border-radius:8px;z-index:20;
  box-shadow:0 8px 26px rgba(0,0,0,.25);padding:5px;transform-origin:top right;transform:scale(.2);opacity:0}
.demo.mac .menu-pop .row{padding:6px 8px;font-size:9px}
/* macOS dock */
.demo.mac .dock{position:absolute;bottom:-60px;left:50%;transform:translateX(-50%);display:flex;gap:7px;align-items:flex-end;
  padding:6px 10px;background:rgba(255,255,255,.5);backdrop-filter:blur(8px);border:1px solid rgba(255,255,255,.6);
  border-radius:14px;z-index:18}
.demo.mac .dock .di{width:30px;height:30px;border-radius:8px;background:rgba(120,130,150,.4)}
.demo.mac .dock .appicon{width:32px;height:32px;transform:translateY(40px);opacity:0}

/* Windows install dialog + app window */
.demo.win .dialog{position:absolute;top:32px;left:50%;transform:translateX(-50%) scale(.7);transform-origin:top center;
  width:64%;background:#fff;border-radius:10px;z-index:20;box-shadow:0 12px 34px rgba(0,0,0,.28);padding:12px;opacity:0;
  border:1px solid #e2e2e2}
.demo.win .dialog .dh{display:flex;align-items:center;gap:8px}
.demo.win .dialog .appicon{width:26px;height:26px;flex-shrink:0}
.demo.win .dialog .dt{font-size:9.5px;font-weight:800;color:#1a1a1a}
.demo.win .dialog .ds{font-size:8px;color:#888;font-weight:600}
.demo.win .dialog .dbtn{margin-top:10px;text-align:center;font-size:9px;font-weight:700;color:#fff;
  background:#2a6fdb;border-radius:6px;padding:6px}
.demo.win .appwin{position:absolute;inset:18px;background:#fff;border-radius:10px;z-index:15;opacity:0;transform:scale(.85);
  box-shadow:0 18px 40px rgba(0,0,0,.3);border:1px solid #dcdce0;overflow:hidden}
.demo.win .appwin .ab{height:24px;background:linear-gradient(118deg,#FF8A1F,#E03A18);display:flex;align-items:center;padding:0 8px;gap:5px}
.demo.win .appwin .ab i{width:7px;height:7px;border-radius:50%;background:rgba(255,255,255,.6)}
.demo.win .appwin .abody{position:absolute;top:24px;bottom:0;left:0;right:0;display:flex;flex-direction:column;
  align-items:center;justify-content:center;gap:8px}
.demo.win .appwin .abody .pglogo{height:22px}
.demo.win .appwin .abody .ok{font-size:8px;font-weight:700;color:#159e68}

/* caption ribbon (what's happening) */
.demo .cap{position:absolute;left:0;right:0;bottom:0;z-index:40;text-align:center;font-size:9px;font-weight:700;
  color:#fff;background:linear-gradient(0deg,rgba(10,8,5,.82),transparent);padding:14px 8px 7px;letter-spacing:.01em}
.demo.android .cap,.demo.ios .cap{bottom:0}
.demo .cap span{position:absolute;left:0;right:0;bottom:7px;padding:0 10px;opacity:0}

/* ============================================================
   TIMELINES  (10s loops, infinite)
   ============================================================ */
@media (prefers-reduced-motion: no-preference){

/* ---------- iOS ---------- */
.demo.ios .browser{animation:iosBrowser 10s ease-in-out infinite}
.demo.ios .sheet{animation:iosSheet 10s cubic-bezier(.4,1,.3,1) infinite}
.demo.ios .row.hl{animation:rowHL 10s ease-in-out infinite}
.demo.ios .tap.t1{animation:tapA 10s ease-in-out infinite}
.demo.ios .tap.t2{animation:tapB 10s ease-in-out infinite}
.demo.ios .home{animation:phoneHome 10s ease-in-out infinite}
.demo.ios .home .new{animation:iconPop 10s cubic-bezier(.3,1.6,.5,1) infinite}
.demo.ios .cap .c1{animation:capWin 10s ease-in-out infinite}
.demo.ios .cap .c2{animation:capSheet 10s ease-in-out infinite}
.demo.ios .cap .c3{animation:capDone 10s ease-in-out infinite}

@keyframes iosBrowser{0%,52%{opacity:1}57%,92%{opacity:0}98%,100%{opacity:1}}
@keyframes iosSheet{0%,14%{transform:translateY(115%)}24%,44%{transform:translateY(0)}52%,100%{transform:translateY(115%)}}
@keyframes rowHL{0%,27%{background:transparent}33%,44%{background:#eef4ff}50%,100%{background:transparent}}
@keyframes phoneHome{0%,52%{opacity:0}58%,92%{opacity:1}97%,100%{opacity:0}}

/* ---------- Android ---------- */
.demo.android .browser{animation:iosBrowser 10s ease-in-out infinite}
.demo.android .menu-pop{animation:menuPop 10s cubic-bezier(.3,1.3,.4,1) infinite}
.demo.android .menu-pop .row.hl{animation:rowHLd 10s ease-in-out infinite}
.demo.android .tap.t1{animation:tapA 10s ease-in-out infinite}
.demo.android .tap.t2{animation:tapB 10s ease-in-out infinite}
.demo.android .home{animation:phoneHome 10s ease-in-out infinite}
.demo.android .home .new{animation:iconPop 10s cubic-bezier(.3,1.6,.5,1) infinite}
.demo.android .cap .c1{animation:capWin 10s ease-in-out infinite}
.demo.android .cap .c2{animation:capSheet 10s ease-in-out infinite}
.demo.android .cap .c3{animation:capDone 10s ease-in-out infinite}
@keyframes menuPop{0%,14%{transform:scale(.2);opacity:0}22%,44%{transform:scale(1);opacity:1}50%,100%{transform:scale(.2);opacity:0}}
@keyframes rowHLd{0%,27%{background:transparent}33%,44%{background:#fff1e8}50%,100%{background:transparent}}

/* ---------- shared phone taps / icon ---------- */
@keyframes tapA{0%,5%{opacity:0;transform:scale(.4)}9%{opacity:1;transform:scale(1)}13%{opacity:.5;transform:scale(1.5)}16%,100%{opacity:0;transform:scale(1.6)}}
@keyframes tapB{0%,33%{opacity:0;transform:scale(.4)}37%{opacity:1;transform:scale(1)}43%{opacity:.5;transform:scale(1.5)}47%,100%{opacity:0;transform:scale(1.6)}}
@keyframes iconPop{0%,60%{transform:scale(0)}70%{transform:scale(1.18)}76%,100%{transform:scale(1)}}

/* ---------- Mac ---------- */
.demo.mac .browser{animation:iosBrowser 10s ease-in-out infinite}
.demo.mac .menu-pop{animation:menuPop 10s cubic-bezier(.3,1.3,.4,1) infinite}
.demo.mac .menu-pop .row.hl{animation:rowHL 10s ease-in-out infinite}
.demo.mac .cursor.c1{animation:curA 10s ease-in-out infinite}
.demo.mac .cursor.c2{animation:curB 10s ease-in-out infinite}
.demo.mac .dock{animation:macDockBar 10s ease-in-out infinite}
.demo.mac .dock .appicon{animation:macDockIcon 10s cubic-bezier(.3,1.5,.4,1) infinite}
.demo.mac .cap .c1{animation:capWin 10s ease-in-out infinite}
.demo.mac .cap .c2{animation:capSheet 10s ease-in-out infinite}
.demo.mac .cap .c3{animation:capDone 10s ease-in-out infinite}
@keyframes macDockBar{0%,54%{transform:translate(-50%,80px);opacity:0}62%,92%{transform:translate(-50%,0);opacity:1}98%,100%{transform:translate(-50%,80px);opacity:0}}
@keyframes macDockIcon{0%,60%{transform:translateY(40px);opacity:0}70%{transform:translateY(-8px);opacity:1}78%,92%{transform:translateY(0);opacity:1}98%,100%{opacity:0}}

/* ---------- Windows ---------- */
.demo.win .browser{animation:iosBrowser 10s ease-in-out infinite}
.demo.win .dialog{animation:winDialog 10s cubic-bezier(.3,1.2,.4,1) infinite}
.demo.win .dialog .dbtn{animation:rowHLd 10s ease-in-out infinite}
.demo.win .cursor.c1{animation:curA 10s ease-in-out infinite}
.demo.win .cursor.c2{animation:curWinBtn 10s ease-in-out infinite}
.demo.win .appwin{animation:winApp 10s cubic-bezier(.3,1.2,.5,1) infinite}
.demo.win .cap .c1{animation:capWin 10s ease-in-out infinite}
.demo.win .cap .c2{animation:capSheet 10s ease-in-out infinite}
.demo.win .cap .c3{animation:capDone 10s ease-in-out infinite}
@keyframes winDialog{0%,14%{transform:translateX(-50%) scale(.7);opacity:0}22%,50%{transform:translateX(-50%) scale(1);opacity:1}56%,100%{transform:translateX(-50%) scale(.7);opacity:0}}
@keyframes winApp{0%,56%{opacity:0;transform:scale(.85)}64%,92%{opacity:1;transform:scale(1)}98%,100%{opacity:0;transform:scale(.85)}}

/* ---------- desktop cursors ---------- */
@keyframes curA{0%{opacity:0}4%{opacity:1}8%{opacity:1;transform:scale(.85)}11%{transform:scale(1)}16%,100%{opacity:0}}
@keyframes curB{0%,30%{opacity:0}34%{opacity:1}40%{opacity:1;transform:scale(.85)}43%{transform:scale(1)}48%,100%{opacity:0}}
@keyframes curWinBtn{0%,32%{opacity:0}38%{opacity:1}44%{opacity:1;transform:scale(.85)}48%{transform:scale(1)}54%,100%{opacity:0}}

/* ---------- captions ---------- */
@keyframes capWin{0%{opacity:0}4%,24%{opacity:1}30%,100%{opacity:0}}
@keyframes capSheet{0%,30%{opacity:0}36%,50%{opacity:1}56%,100%{opacity:0}}
@keyframes capDone{0%,60%{opacity:0}66%,92%{opacity:1}98%,100%{opacity:0}}
}

/* reduced motion: show the finished state (home/app) statically */
@media (prefers-reduced-motion: reduce){
  .demo .browser{opacity:0}
  .demo .home,.demo.win .appwin{opacity:1}
  .demo.win .appwin{transform:none}
  .demo .home .new{transform:scale(1)}
  .demo .cap .c3{opacity:1}
}