/*
 * perf.css — Performance overrides for appiosvn.xyz
 * Loaded last on every page. No !important abuse.
 * Focus: remove layout thrash, reduce compositing cost, smooth 60fps.
 */

/* ── 1. Global: GPU-composit the scroll container ────────── */
html { scroll-behavior: smooth; }

body {
  /* background-attachment:fixed forces full repaint on scroll → remove */
  background-attachment: scroll !important;
  /* Prevent subpixel text from causing extra repaints */
  text-rendering: optimizeSpeed !important;
  -webkit-font-smoothing: subpixel-antialiased !important;
}

/* ── 2. Navbar: hint compositing once; keep blur low ─────── */
.navbar, .nav, .topbar {
  will-change: transform;
  backdrop-filter: blur(14px) saturate(140%) !important;
  -webkit-backdrop-filter: blur(14px) saturate(140%) !important;
}

/* ── 3. Disable heavy floating orb animations ────────────── */
.hero-glow, .hero-glow-1, .hero-glow-2 {
  animation: none !important;
  /* Keep the visual but as a static layer */
  will-change: auto !important;
}

/* ── 4. Disable gradient text animation (saves GPU) ──────── */
.gradient-text {
  animation: none !important;
  background-size: 100% !important;
}

/* ── 5. Remove preserve-3d + perspective hover on cards ──── */
.feature-card,
.step-card,
.pcard,
.card,
.stat-card,
.app-card,
.dash-stat,
.result-card,
.app-header-card {
  transform-style: flat !important;
}
.feature-card:hover {
  transform: translateY(-4px) !important;
  transition: transform 0.2s ease, box-shadow 0.2s ease, border-color 0.2s ease !important;
}
.step-card:hover { transform: translateY(-5px) !important; }
.pcard:hover     { transform: translateY(-4px) !important; }
.stat-card:hover { transform: translateY(-2px) !important; }
.app-card:hover  { transform: translateX(3px) !important; }

/* ── 6. Remove icon 3D rotation on hover ─────────────────── */
.feature-card:hover .feature-icon-wrap,
.step-card:hover .step-icon,
.app-card:hover .app-card-icon,
.logo:hover .logo-box,
.logo:hover .logo-icon,
.brand:hover .brand-box,
.nav-logo:hover .nav-logo-icon {
  transform: scale(1.06) !important;
  transition: transform 0.2s ease !important;
}

/* ── 7. Contain card layout to prevent reflow bubbling ───── */
.feature-card,
.fcard,
.pcard,
.card,
.stat-card,
.app-card,
.result-card,
.panel,
.login-card,
.modal-box {
  contain: layout style;
}

/* ── 8. Reduce blur on modals + dropdowns ────────────────── */
.modal-bg, .modal-overlay {
  backdrop-filter: blur(6px) !important;
  -webkit-backdrop-filter: blur(6px) !important;
}
.nav-user-dropdown, .nav-dropdown {
  backdrop-filter: blur(12px) !important;
  -webkit-backdrop-filter: blur(12px) !important;
}

/* ── 9. Reduce mobile-menu blur ──────────────────────────── */
.mobile-menu, .mmenu, .p-mobile-menu, .mmenu {
  backdrop-filter: blur(16px) !important;
  -webkit-backdrop-filter: blur(16px) !important;
}

/* ── 10. Login card: lower blur, GPU hint ────────────────── */
.login-card {
  backdrop-filter: blur(16px) !important;
  -webkit-backdrop-filter: blur(16px) !important;
}

/* ── 11. pulse animation — reduce to opacity only ───────── */
@keyframes pulse {
  0%, 100% { opacity: 1; }
  50%       { opacity: 0.6; }
}
.badge-dot { animation: pulse 3s ease infinite !important; }

/* ── 12. fadeSlideUp: use translate only (GPU) ───────────── */
@keyframes fadeSlideUp {
  from { opacity: 0; transform: translate3d(0, 14px, 0); }
  to   { opacity: 1; transform: translate3d(0, 0, 0); }
}

/* ── 13. Buttons: will-change only during interaction ───── */
.btn-cta-primary,
.btn-login,
.btn-plan-primary,
.btn-primary,
.cta-btn,
.upload-btn,
.empty-btn,
.btn-save {
  will-change: auto;
  /* Replace perspective shift with simple transform */
  transition: transform 0.18s ease, box-shadow 0.18s ease, opacity 0.18s ease !important;
}
.btn-cta-primary:hover,
.btn-login:hover,
.btn-plan-primary:hover,
.btn-primary:hover,
.cta-btn:hover {
  transform: translateY(-2px) !important;
}

/* ── 14. Remove hero grid 3D perspective (expensive) ─────── */
.hero-grid {
  transform: none !important;
  opacity: 0.4;
  background-image:
    linear-gradient(rgba(16,185,129,0.07) 1px, transparent 1px),
    linear-gradient(90deg, rgba(16,185,129,0.07) 1px, transparent 1px) !important;
  background-size: 60px 60px !important;
  mask-image: linear-gradient(180deg, transparent 20%, rgba(0,0,0,0.5) 80%, transparent) !important;
}

/* ── 15. Smooth scrollbar ────────────────────────────────── */
::-webkit-scrollbar { width: 4px; }
::-webkit-scrollbar-track { background: transparent; }
::-webkit-scrollbar-thumb { background: rgba(13,148,136,0.08); border-radius: 4px; }
::-webkit-scrollbar-thumb:hover { background: rgba(13,148,136,0.6); }

/* ── 16. Sidebar smooth open (admin) ─────────────────────── */
.sidebar {
  will-change: left;
  transition: left 0.22s cubic-bezier(0.4,0,0.2,1) !important;
}

/* ── 17. Stat card top-bar: contain ─────────────────────── */
.stats-grid { contain: layout; }

/* ── 18. Reduce storage-bar glow ─────────────────────────── */
.storage-fill, .progress-fill {
  box-shadow: none !important;
  /* glow causes layer repaint every % change */
}

/* ── 19. Drop box-shadow from body gradient layers ────────  */
/* Already handled by using a single radial-gradient */
.cta-inner {
  backdrop-filter: blur(16px) !important;
  -webkit-backdrop-filter: blur(16px) !important;
}

/* ── 20. Prefers-reduced-motion ──────────────────────────── */
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after {
    animation-duration: 0.01ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.01ms !important;
  }
}

/* ── Color scheme: Apple Light (blue) ─────────────────────── */
:root {
  --accent:  #0071e3;
  --accent2: #5e5ce6;
  --acc:     #0071e3;
  --acc2:    #5e5ce6;
}

/* Buttons — Apple blue */
.btn-cta-primary, .btn-login, .btn-plan-primary, .btn-primary,
.upload-btn, .empty-btn, .btn-save, .dl-direct, .btn-nav-cta {
  background: #0071e3 !important;
  box-shadow: 0 6px 20px rgba(0,113,227,0.28) !important;
}
.btn-cta-primary:hover, .btn-login:hover:not(:disabled),
.btn-plan-primary:hover, .btn-primary:hover,
.upload-btn:hover, .empty-btn:hover, .btn-save:hover {
  background: #0077ed !important;
  box-shadow: 0 12px 30px rgba(0,113,227,0.34) !important;
}

/* Logo icon boxes */
.logo-box, .nav-logo-icon, .brand-box, .logo-icon,
.logo-icon.nav-logo-icon {
  background: linear-gradient(135deg, #0a84ff, #0071e3) !important;
  box-shadow: 0 5px 16px rgba(0,113,227,0.30) !important;
}

/* Active nav item admin */
.nav-item.active {
  background: linear-gradient(135deg, #0a84ff, #0071e3) !important;
  box-shadow: 0 8px 22px rgba(0,113,227,0.26) !important;
}

/* Pricing badge — CHỈ badge "Phổ biến nhất" của thẻ Pro (tránh đè badge bảng admin) */
.card.popular .badge { background: #0071e3 !important; box-shadow: 0 6px 18px rgba(0,113,227,0.34) !important; }

/* Toggle active — pill trắng, chữ xanh */
.toggle-btn.active {
  background: #fff !important; color: #0071e3 !important;
  box-shadow: 0 1px 2px rgba(0,0,0,0.04), 0 1px 3px rgba(0,0,0,0.06) !important;
}

/* Scrollbar */
::-webkit-scrollbar-thumb { background: rgba(0,0,0,0.18) !important; }
::-webkit-scrollbar-thumb:hover { background: rgba(0,0,0,0.32) !important; }

/* Storage bar / progress */
.storage-fill, .progress-fill {
  background: linear-gradient(90deg, #0071e3, #5e5ce6) !important;
}

/* App card icon */
.app-card-icon, .upload-zone-icon {
  background: linear-gradient(135deg, #0a84ff, #0071e3) !important;
}

/* Hero orbs — light blue tint */
.hero-glow-1 {
  background: radial-gradient(circle, rgba(0,113,227,0.14) 0%, transparent 65%) !important;
}
.hero-glow-2 {
  background: radial-gradient(circle, rgba(94,92,230,0.10) 0%, transparent 65%) !important;
}

/* Gradient text — chỉ span nhấn ở hero */
.gradient-text {
  background: linear-gradient(120deg, #0071e3 0%, #42a5ff 45%, #af52de 100%) !important;
  -webkit-background-clip: text !important; background-clip: text !important;
  -webkit-text-fill-color: transparent !important;
}

/* Hero grid — nét mảnh tối nhạt */
.hero-grid {
  background-image:
    linear-gradient(rgba(0,0,0,0.03) 1px, transparent 1px),
    linear-gradient(90deg, rgba(0,0,0,0.03) 1px, transparent 1px) !important;
}

/* Body background tint — light */
body {
  background-image:
    radial-gradient(ellipse 80% 50% at 50% -8%, rgba(0,113,227,0.08) 0%, transparent 55%),
    radial-gradient(ellipse 40% 30% at 85% 105%, rgba(94,92,230,0.05) 0%, transparent 60%) !important;
}