/* ==========================================================================
   RENDIMIENTO v6.1 — se carga el último y manda sobre todo lo anterior.
   Regla: nada que repinte (blur, background-position, box-shadow, filter) puede
   animarse en bucle. Solo transform y opacity, que van por la GPU sin repintar.
   ========================================================================== */

/* ---- 1. Fuera el backdrop-filter en todo (era el mayor consumo en scroll) ---- */
body.roblox-theme *, body.roblox-theme *::before, body.roblox-theme *::after {
  backdrop-filter: none !important;
  -webkit-backdrop-filter: none !important;
}
body.roblox-theme .roblox-topbar { background: rgba(8, 10, 16, 0.96); }
body.roblox-theme .section-tabs { background: rgba(8, 10, 16, 0.94); }
body.roblox-theme .modal-backdrop, body.roblox-theme .fullscreen-promo-modal { background: rgba(3, 5, 9, 0.88); }
body.roblox-theme .live-toast { background: rgba(14, 18, 26, 0.98); }
body.roblox-theme .goal-card, body.roblox-theme .badges-card, body.roblox-theme .step-card,
body.roblox-theme .order-card, body.roblox-theme .empty-state, body.roblox-theme .wallet-card,
body.roblox-theme .stat-pill { background-color: #11151f; }

/* ---- 2. Fondo: capas estáticas (antes: blur(20px) de pantalla completa animándose + cuadrícula en movimiento) ---- */
body.roblox-theme::before { filter: none !important; animation: none !important; inset: 0 !important; opacity: 1; will-change: auto; }
body.roblox-theme::after { animation: none !important; will-change: auto; }

/* Aurora suave con SOLO transform: una capa aparte que se mueve por la GPU */
.aurora-drift {
  position: fixed; inset: -10%; z-index: 0; pointer-events: none;
  background:
    radial-gradient(35% 30% at 20% 25%, rgba(0, 255, 157, 0.12), transparent 70%),
    radial-gradient(30% 30% at 80% 20%, rgba(0, 179, 255, 0.14), transparent 70%),
    radial-gradient(35% 35% at 65% 80%, rgba(168, 85, 247, 0.12), transparent 70%);
  animation: driftA 26s ease-in-out infinite alternate;
  will-change: transform;
}
@keyframes driftA { to { transform: translate3d(3%, -2%, 0) scale(1.06); } }

/* ---- 3. Bordes y textos que repintaban cada fotograma -> estáticos ---- */
.hero-x::before, body.roblox-theme .task-card.rarity-legendary:not(.completed)::before {
  animation: none !important;
  background: linear-gradient(135deg, #00ff9d, #00b3ff 35%, #a855f7 65%, #ffc400);
}
body.roblox-theme .task-card.rarity-legendary:not(.completed)::before { background: linear-gradient(135deg, #ffd000, #ff6a00 55%, #fff3b0); }

/* Brillo que cruza el borde del hero con transform (barato) */
.hero-x::after {
  content: ""; position: absolute; top: 0; bottom: 0; left: 0; width: 28%; pointer-events: none; z-index: 0;
  background: linear-gradient(100deg, transparent, rgba(255, 255, 255, 0.07), transparent);
  transform: translate3d(-120%, 0, 0) skewX(-18deg);
  animation: heroSweep 7s ease-in-out infinite; will-change: transform;
}
@keyframes heroSweep { 0%, 60% { transform: translate3d(-120%, 0, 0) skewX(-18deg); } 100% { transform: translate3d(420%, 0, 0) skewX(-18deg); } }

.hero-x-copy h1 span { animation: none !important; background-size: 100% 100% !important; filter: none !important; background-image: linear-gradient(100deg, #00ff9d, #00e0ff 45%, #ffd000); }
.xp-fill, body.roblox-theme .progress-bar-fill { animation: none !important; background-size: 100% 100%, 100% 100%; box-shadow: 0 0 10px rgba(0, 255, 157, 0.5); }
.xp-fill { box-shadow: 0 0 10px rgba(168, 85, 247, 0.5); }

/* Brillo vivo de la barra con transform: un destello que recorre la barra */
.progress-bar-bg, .xp-track { position: relative; overflow: hidden; }
.progress-bar-bg::after, .xp-track::after {
  content: ""; position: absolute; top: 0; bottom: 0; left: 0; width: 30%; pointer-events: none;
  background: linear-gradient(90deg, transparent, rgba(255, 255, 255, 0.35), transparent);
  transform: translate3d(-100%, 0, 0); animation: barGlint 3.6s ease-in-out infinite; will-change: transform;
}
@keyframes barGlint { 0%, 55% { transform: translate3d(-100%, 0, 0); } 100% { transform: translate3d(430%, 0, 0); } }

/* ---- 4. Pulsos de box-shadow (repintan) -> pulso de opacity sobre un anillo ---- */
.live-dot { animation: none !important; box-shadow: 0 0 8px var(--g); }
.streak-pill.ready { animation: none !important; box-shadow: 0 0 0 2px rgba(255, 138, 0, 0.7); }
.streak-pill.ready::before {
  content: ""; position: absolute; inset: -3px; border-radius: inherit; border: 2px solid #ff8a00; pointer-events: none;
  animation: ringPulse 1.4s ease-out infinite; will-change: transform, opacity;
}
@keyframes ringPulse { 0% { transform: scale(0.95); opacity: 0.9; } 100% { transform: scale(1.35); opacity: 0; } }
body.roblox-theme .badge-item.unlocked { animation: none !important; box-shadow: 0 0 14px rgba(255, 196, 0, 0.45); }
.inbox-card.hot { animation: none !important; }

/* ---- 5. Brillos de botones: SOLO el CTA principal en bucle; el resto en hover ---- */
body.roblox-theme .btn-task:not(:disabled)::after,
body.roblox-theme .roblox-btn-green::after,
body.roblox-theme .btn-redeem.ready::after { animation: none !important; transform: translateX(-160%) skewX(-20deg); opacity: 0; transition: none; }
body.roblox-theme .btn-task:not(:disabled):hover::after,
body.roblox-theme .roblox-btn-green:hover::after,
body.roblox-theme .btn-redeem.ready:hover::after { opacity: 1; animation: shineX 0.9s ease-out 1 !important; }
.cta-mega::after { animation: shineX 4.2s ease-in-out infinite !important; will-change: transform; }

/* Halo del CTA: ya era opacity/transform, se deja */
.wallet-card { animation: none !important; transition: transform 0.4s var(--ease-out); }
.wallet-card:hover { transform: translate3d(0, -4px, 0); }

/* ---- 6. Sombras muy pesadas -> más ligeras (cuestan al pintar y al hacer scroll) ---- */
body.roblox-theme .hero-banner-card, body.roblox-theme .hero-x { box-shadow: 0 18px 40px rgba(0, 0, 0, 0.45); }
body.roblox-theme .task-card, body.roblox-theme .reward-item, body.roblox-theme .goal-card,
body.roblox-theme .badges-card, body.roblox-theme .portal-card { box-shadow: 0 8px 18px rgba(0, 0, 0, 0.35); }
body.roblox-theme .task-card:hover { box-shadow: 0 12px 24px rgba(0, 0, 0, 0.45); }
.gift-card-mini { filter: none !important; }

/* ---- 7. Transiciones solo de propiedades baratas ---- */
body.roblox-theme .task-card, body.roblox-theme .portal-card, body.roblox-theme .reward-item, body.roblox-theme .step-card {
  transition: transform 0.25s var(--ease-out), border-color 0.2s;
}
body.roblox-theme .btn-task, body.roblox-theme .roblox-btn-green, body.roblox-theme .btn-redeem { transition: transform 0.15s var(--ease-spring), filter 0.15s; }

/* ---- 8. Aislar capas: el repintado de una tarjeta no toca a las demás ---- */
.task-card, .reward-item, .portal-card, .goal-card, .badges-card, .step-card, .wallet-card, .order-card { contain: layout paint; }
.hero-x { contain: paint; }
.sheet-open { contain: layout style; }

/* ---- 9. Modo "lite": lo activa el vigilante de fps en equipos lentos ---- */
html.lite .aurora-drift, html.lite .ambient-canvas, html.lite .hero-x::after,
html.lite .progress-bar-bg::after, html.lite .xp-track::after { display: none !important; }
html.lite body.roblox-theme::after { display: none !important; }
html.lite .cta-mega::after, html.lite .hero-x-ctas::before, html.lite .streak-pill.ready::before { animation: none !important; }
html.lite .reveal { transition-duration: 0.2s; }