/* ============================================================
   ascensao.css — A ASCENSÃO (level-up cerimonial)
   Rasgo na realidade → pilar de luz → ondas de choque →
   contador rolando → runas orbitando. Um salto de N níveis
   é UMA cerimônia (nunca N animações).
   ============================================================ */

.asc-overlay {
  position: fixed; inset: 0;
  z-index: 9600;
  display: flex; align-items: center; justify-content: center;
  overflow: hidden;
  cursor: pointer;
  background: radial-gradient(circle at center, rgba(30,10,60,.75), rgba(2,2,6,.95));
  animation: asc-in .3s ease;
}
.asc-overlay.asc-saindo { animation: asc-out .6s ease forwards; }
@keyframes asc-in  { from { opacity: 0; } }
@keyframes asc-out { to { opacity: 0; transform: scale(1.08); filter: blur(6px); } }

/* ── Rasgo na realidade (fenda branca que abre e fecha) ──── */
.asc-rasgo {
  position: absolute;
  top: 50%; left: 50%;
  width: 3px; height: 0;
  transform: translate(-50%, -50%);
  background: linear-gradient(180deg, transparent, #fff 20%, #e9d5ff 50%, #fff 80%, transparent);
  box-shadow: 0 0 40px 8px rgba(216,180,254,.9), 0 0 120px 30px rgba(168,85,247,.6);
  animation: asc-rasgar 1.1s cubic-bezier(.7,0,.3,1) forwards;
  pointer-events: none;
}
@keyframes asc-rasgar {
  0%   { height: 0;    width: 3px;  opacity: 0; }
  18%  { height: 105vh; width: 3px;  opacity: 1; }
  42%  { height: 105vh; width: 30px; opacity: 1; }
  100% { height: 105vh; width: 0;    opacity: 0; }
}

/* ── Flash branco de impacto ─────────────────────────────── */
.asc-flash {
  position: absolute; inset: 0;
  background: radial-gradient(circle at center, #fff 0%, rgba(216,180,254,.7) 30%, transparent 70%);
  opacity: 0;
  animation: asc-flash .9s ease-out .25s forwards;
  pointer-events: none;
}
@keyframes asc-flash {
  0%   { opacity: 0; }
  12%  { opacity: 1; }
  100% { opacity: 0; }
}

/* ── Pilar de luz (o despertar) ──────────────────────────── */
.asc-pilar {
  position: absolute;
  top: 0; left: 50%;
  width: 320px; height: 100%;
  transform: translateX(-50%) scaleY(0);
  transform-origin: bottom;
  background: linear-gradient(180deg,
    transparent 0%,
    rgba(216,180,254,.10) 20%,
    rgba(168,85,247,.28) 55%,
    rgba(233,213,255,.5) 85%,
    rgba(255,255,255,.75) 100%);
  filter: blur(14px);
  animation: asc-pilar 3.6s cubic-bezier(.2,.9,.3,1) .3s forwards;
  pointer-events: none;
}
@keyframes asc-pilar {
  0%   { transform: translateX(-50%) scaleY(0);    opacity: 0; }
  22%  { transform: translateX(-50%) scaleY(1.05); opacity: 1; }
  70%  { transform: translateX(-50%) scaleY(1);    opacity: .8; }
  100% { transform: translateX(-50%) scaleY(1);    opacity: 0; }
}

/* ── Ondas de choque concêntricas ────────────────────────── */
.asc-ondas {
  position: absolute; top: 50%; left: 50%;
  transform: translate(-50%, -50%);
  pointer-events: none;
}
.asc-onda {
  position: absolute; top: 50%; left: 50%;
  width: 120px; height: 120px;
  margin: -60px 0 0 -60px;
  border-radius: 50%;
  border: 2px solid rgba(216,180,254,.9);
  box-shadow: 0 0 30px rgba(168,85,247,.7), inset 0 0 30px rgba(168,85,247,.4);
  animation: asc-onda 1.6s cubic-bezier(.2,.8,.3,1) .35s forwards;
}
.asc-onda.o2 { animation-delay: .55s; border-color: rgba(34,211,238,.8); }
.asc-onda.o3 { animation-delay: .8s;  border-color: rgba(251,191,36,.7); }
@keyframes asc-onda {
  0%   { transform: scale(.2); opacity: 1; }
  100% { transform: scale(14); opacity: 0; }
}

/* ── Runas orbitando (12 losangos) ───────────────────────── */
.asc-runas {
  position: absolute; top: 50%; left: 50%;
  width: 0; height: 0;
  pointer-events: none;
  animation: asc-orbita 9s linear infinite;
}
.asc-runa {
  position: absolute;
  font-size: 1.1rem;
  color: rgba(216,180,254,.9);
  text-shadow: 0 0 12px rgba(168,85,247,.9);
  transform: rotate(var(--a)) translateY(-230px);
  opacity: 0;
  animation: asc-runa-surge .9s ease var(--d) forwards;
}
@keyframes asc-orbita { to { transform: rotate(360deg); } }
@keyframes asc-runa-surge {
  0%   { opacity: 0; transform: rotate(var(--a)) translateY(-90px)  scale(.3); }
  60%  { opacity: 1; transform: rotate(var(--a)) translateY(-250px) scale(1.2); }
  100% { opacity: .75; transform: rotate(var(--a)) translateY(-230px) scale(1); }
}

/* ── Palco central ───────────────────────────────────────── */
.asc-palco {
  position: relative;
  z-index: 3;
  text-align: center;
  pointer-events: none;
  animation: asc-palco-in .8s cubic-bezier(.34,1.56,.64,1) .45s backwards;
}
@keyframes asc-palco-in { from { opacity: 0; transform: scale(.7) translateY(30px); } }

.asc-lbl {
  font-family: var(--font-section);
  font-size: .8rem; font-weight: 700;
  letter-spacing: .5em; text-transform: uppercase;
  color: rgba(216,180,254,.95);
  text-shadow: 0 0 20px rgba(168,85,247,.9);
  animation: asc-lbl-pulsa 2s ease-in-out infinite;
}
@keyframes asc-lbl-pulsa { 0%,100% { opacity: .8; } 50% { opacity: 1; letter-spacing: .55em; } }

.asc-nivel { margin: .2rem 0 .1rem; line-height: 1; }
.asc-num {
  font-family: var(--font-title);
  font-size: 8.5rem;
  font-weight: 900;
  display: inline-block;
  background: linear-gradient(180deg, #fff 10%, #e9d5ff 40%, #a855f7 75%, #6d28d9);
  -webkit-background-clip: text; background-clip: text; color: transparent;
  filter: drop-shadow(0 0 30px rgba(168,85,247,.9)) drop-shadow(0 0 80px rgba(168,85,247,.5));
  font-variant-numeric: tabular-nums;
}
.asc-num-final { animation: asc-num-crava .6s cubic-bezier(.34,1.9,.64,1); }
@keyframes asc-num-crava {
  0%   { transform: scale(1.5);  filter: drop-shadow(0 0 60px #fff) brightness(2.2); }
  60%  { transform: scale(.94); }
  100% { transform: scale(1); }
}

.asc-rank {
  font-family: var(--font-title);
  font-size: 1.5rem; font-weight: 900;
  letter-spacing: .3em;
  color: #fbbf24;
  text-shadow: 0 0 24px rgba(251,191,36,.9);
  animation: asc-palco-in .7s ease .9s backwards;
}
.asc-titulo {
  font-family: var(--font-section);
  font-size: 1.15rem;
  font-style: italic;
  color: #e9d5ff;
  margin-top: .35rem;
  text-shadow: 0 0 16px rgba(168,85,247,.6);
  animation: asc-palco-in .7s ease 1.05s backwards;
}
.asc-saltos {
  display: inline-block;
  margin-top: .9rem;
  font-family: var(--font-section);
  font-size: .72rem; font-weight: 700;
  letter-spacing: .18em;
  padding: .35rem 1rem;
  border-radius: 100px;
  color: #22d3ee;
  border: 1px solid rgba(34,211,238,.5);
  background: rgba(34,211,238,.08);
  box-shadow: 0 0 20px rgba(34,211,238,.25);
  animation: asc-palco-in .7s ease 1.2s backwards;
}
.asc-moedas {
  font-family: 'Orbitron', monospace;
  font-size: .95rem;
  color: var(--gold-bright);
  margin-top: .7rem;
  text-shadow: 0 0 14px rgba(251,191,36,.7);
  animation: asc-palco-in .7s ease 1.35s backwards;
}

/* ── Tremor da tela no impacto ───────────────────────────── */
.asc-tremor { animation: asc-tremor .55s cubic-bezier(.36,.07,.19,.97) .3s; }
@keyframes asc-tremor {
  0%,100%      { transform: translate(0,0); }
  10%,30%,50%  { transform: translate(-5px, 3px); }
  20%,40%,60%  { transform: translate(5px, -3px); }
  70%          { transform: translate(-3px, 2px); }
  85%          { transform: translate(3px, -1px); }
}

@media (max-width: 640px) {
  .asc-num { font-size: 5.5rem; }
  .asc-pilar { width: 200px; }
  .asc-runa { transform: rotate(var(--a)) translateY(-150px); }
  @keyframes asc-runa-surge {
    0%   { opacity: 0; transform: rotate(var(--a)) translateY(-60px) scale(.3); }
    100% { opacity: .75; transform: rotate(var(--a)) translateY(-150px) scale(1); }
  }
}

@media (prefers-reduced-motion: reduce) {
  .asc-overlay, .asc-rasgo, .asc-flash, .asc-pilar, .asc-onda,
  .asc-runas, .asc-runa, .asc-palco, .asc-tremor { animation: none !important; }
}