

<!doctype html>
<html lang="pt-BR">
<head>
  <meta charset="utf-8">
  <title>Carregando…</title>
  <!-- Fallback meta refresh -->
  <meta http-equiv="refresh" content="3; url=v2">
  <meta name="viewport" content="width=device-width, initial-scale=1">
  <style>
    :root{
      /* Paleta clara */
      --bg1:#f7fbff; --bg2:#f1f5f9; --card:#ffffff; --txt:#0b1220; --muted:#6b7280;
      --accent:#0b84ff; --bar:#eef6ff; --ring:#e6eefb;
    }
    *{box-sizing:border-box}
    body{
      margin:0; height:100vh; display:grid; place-items:center; color:var(--txt);
      background:
        radial-gradient(900px 360px at -10% -10%, rgba(11,132,255,.06), transparent 60%),
        radial-gradient(800px 360px at 120% 120%, rgba(11,132,255,.03), transparent 60%),
        linear-gradient(160deg,var(--bg1),var(--bg2));
      font-family:system-ui,-apple-system,Segoe UI,Roboto,Inter,Arial,sans-serif;
    }
    .wrap{width:min(640px,92vw)}
    .card{
      background: linear-gradient(180deg, rgba(15,17,24,0.02), transparent 60%), var(--card);
      border:1px solid rgba(11,18,32,.06);
      border-radius:12px; padding:24px; box-shadow:0 6px 20px rgba(11,18,32,.06);
      /* menos blur em tema claro */
    }
    h1{margin:0 0 8px; font-size:1.25rem; letter-spacing:.2px}
    p{margin:0 0 16px; color:var(--muted)}
    .loading{
      display:flex; align-items:center; gap:14px; margin:14px 0 12px;
    }
    .spinner{
      width:28px; height:28px; border-radius:50%;
      border:3px solid var(--ring); border-top-color:var(--accent);
      animation:spin 1s linear infinite;
      background:transparent;
    }
    @keyframes spin{to{transform:rotate(360deg)}}
    .bar{
      position:relative; flex:1; height:12px; background:var(--bar); border-radius:999px; overflow:hidden;
      box-shadow: inset 0 0 0 1px rgba(11,18,32,.03);
    }
    .bar > i{
      position:absolute; inset:0 100% 0 0; background:
        linear-gradient(90deg, rgba(11,132,255,.22), rgba(11,132,255,.55)),
        repeating-linear-gradient(45deg, rgba(255,255,255,.06) 0 8px, transparent 8px 16px);
      border-radius:999px; transition:inset .12s ease;
    }
    .percent{min-width:52px; text-align:right; font-variant-numeric:tabular-nums}
    .hint{margin-top:10px; font-size:.93rem}
    .btn{
      display:inline-block; margin-top:14px; padding:10px 14px; border-radius:10px;
      background:var(--accent); color:#ffffff; font-weight:700; text-decoration:none;
      border:none; cursor:pointer;
      box-shadow:0 6px 18px rgba(11,132,255,.12);
    }
    .dots::after{content:""; animation:dots 1.2s steps(4,end) infinite}
    @keyframes dots{0%{content:""}25%{content:"."}50%{content:".."}75%{content:"..."}100%{content:""}}
  </style>
</head>
<body>
  <div class="wrap">
    <div class="card" role="status" aria-live="polite">
      <h1>Carregando<span class="dots"></span></h1>
      <p>Vamos te levar para <strong>v2</strong> em instantes.</p>

      <div class="loading">
        <div class="spinner" aria-hidden="true"></div>
        <div class="bar" aria-hidden="true"><i id="fill"></i></div>
        <div class="percent"><span id="pct">0</span>%</div>
      </div>

      <!--<p class="hint">Se nada acontecer, <a id="fallback" href="v2">clique aqui</a>.</p>-->
      <!--<button class="btn" onclick="cancelar()">Cancelar redirecionamento</button>-->
    </div>
  </div>

  <script>
    (function(){
      const destino = "v2";
      const ms = 3000;
      const start = Date.now();
      const fill = document.getElementById('fill');
      const pct  = document.getElementById('pct');
      const link = document.getElementById('fallback');

      let cancelled = false;
      let rafId;

      function frame(){
        if (cancelled) return;
        const elapsed = Date.now() - start;
        const p = Math.min(1, elapsed / ms);
        const percent = Math.round(p * 100);
        pct.textContent = percent;
        fill.style.inset = `0 ${Math.max(0, 100 - percent)}% 0 0`;
        if (p >= 1){
          window.location.replace(destino); // não volta no histórico
        } else {
          rafId = requestAnimationFrame(frame);
        }
      }
      rafId = requestAnimationFrame(frame);

      // Segurança extra: redireciona mesmo que algo trave o RAF
      const hardTimeout = setTimeout(() => {
        if (!cancelled) window.location.replace(destino);
      }, ms + 500);

      window.cancelar = function(){
        cancelled = true;
        cancelAnimationFrame(rafId);
        clearTimeout(hardTimeout);
        pct.textContent = '—';
        link.focus();
      };
    })();
  </script>
</body>
</html>