/* ===========================================================================
 * premium-ui.css  —  2026 premium design layer for Vault
 * ---------------------------------------------------------------------------
 * A performance-first visual system layered ON TOP of the existing markup.
 * It preserves every class hook and CSS variable the app already uses, and
 * only elevates the look: per-page animated backgrounds, frosted glass,
 * gradient buttons, premium typography, motion and responsiveness.
 * GPU-accelerated (transform/opacity only) and honours reduced-motion.
 * ======================================================================== */

@import url('https://fonts.googleapis.com/css2?family=Manrope:wght@400;500;600;700;800&family=Inter:wght@400;500;600;700&display=swap');

:root{
  /* Premium palette */
  --px-ink:#05060d;            /* midnight base */
  --px-navy:#0a1024;           /* deep navy */
  --px-blue:#3b82f6;           /* royal blue */
  --px-electric:#2563eb;       /* electric blue */
  --px-indigo:#6366f1;
  --px-violet:#8b5cf6;
  --px-purple:#7c3aed;
  --px-cyan:#06b6d4;
  --px-emerald:#10b981;
  --px-frost:#f4f7ff;
  --px-pink:#ec4899;

  /* Surfaces & lines — kept airy/transparent so the aurora shows through */
  --px-glass:rgba(255,255,255,.03);
  --px-glass-2:rgba(255,255,255,.065);
  --px-border:rgba(255,255,255,.1);
  --px-border-strong:rgba(255,255,255,.18);

  /* Text (fallbacks; core css also defines these) */
  --px-t1:rgba(255,255,255,.95);
  --px-t2:rgba(255,255,255,.72);
  --px-t3:rgba(255,255,255,.5);

  /* Shadows */
  --px-shadow:0 24px 60px rgba(0,0,0,.45);
  --px-shadow-sm:0 10px 30px rgba(0,0,0,.3);
  --px-glow:0 0 40px rgba(99,102,241,.35);

  --px-radius:22px;
  --px-ease:cubic-bezier(.22,1,.36,1);
}

/* ------------------------------------------------------------------ BASE */
body{
  font-family:'Manrope','Inter',-apple-system,BlinkMacSystemFont,'Segoe UI',sans-serif;
  -webkit-font-smoothing:antialiased;
  text-rendering:optimizeLegibility;
  color:var(--px-t1);
}
::selection{background:rgba(99,102,241,.35);color:#fff}

/* Let the animated page background show through legacy wrappers */
.glass-ecosystem{background:transparent!important}

/* Content fade-in on load (feels instant, no navigation blocking) */
@keyframes pxIn{from{opacity:0;transform:translateY(14px)}to{opacity:1;transform:none}}
.glass-container,.welcome-container,.px-auth{animation:pxIn .55s var(--px-ease) both}

/* =====================================================================
 * PER-PAGE ANIMATED BACKGROUNDS  (each page = its own identity)
 * Two blurred drifting blobs (::before/::after) over a static mesh.
 * ================================================================= */
body[class*="pg-"]{position:relative;min-height:100vh;background-color:var(--px-ink)}
body[class*="pg-"]::before,
body[class*="pg-"]::after{
  content:'';position:fixed;z-index:-1;border-radius:50%;
  filter:blur(90px);opacity:.65;pointer-events:none;will-change:transform;
}

/* ---- Login : Aurora ---- */
body.pg-login{
  background-image:
    radial-gradient(1200px 700px at 15% -10%,rgba(99,102,241,.28),transparent 60%),
    radial-gradient(1000px 700px at 110% 10%,rgba(6,182,212,.20),transparent 55%),
    radial-gradient(900px 700px at 50% 120%,rgba(139,92,246,.22),transparent 60%),
    linear-gradient(160deg,#070a1a 0%,#0a0f24 45%,#0b0a1f 100%);
}
body.pg-login::before{width:46vw;height:46vw;left:-8vw;top:-10vw;
  background:radial-gradient(circle,rgba(99,102,241,.55),transparent 65%);
  animation:pxDrift1 22s ease-in-out infinite alternate}
body.pg-login::after{width:42vw;height:42vw;right:-8vw;bottom:-12vw;
  background:radial-gradient(circle,rgba(6,182,212,.5),transparent 65%);
  animation:pxDrift2 26s ease-in-out infinite alternate}

/* ---- Upload : Neon waves ---- */
body.pg-upload{
  background-image:
    radial-gradient(1000px 600px at 90% 0%,rgba(20,184,166,.22),transparent 55%),
    radial-gradient(1000px 700px at 0% 30%,rgba(99,102,241,.20),transparent 55%),
    conic-gradient(from 200deg at 50% 120%,rgba(124,58,237,.18),rgba(6,182,212,.14),rgba(59,130,246,.16),rgba(124,58,237,.18)),
    linear-gradient(160deg,#060913 0%,#081120 55%,#060a16 100%);
}
body.pg-upload::before{width:48vw;height:48vw;left:-12vw;top:-6vw;
  background:radial-gradient(circle,rgba(20,184,166,.45),transparent 65%);
  animation:pxDrift1 24s ease-in-out infinite alternate}
body.pg-upload::after{width:46vw;height:46vw;right:-14vw;bottom:-16vw;
  background:radial-gradient(circle,rgba(99,102,241,.5),transparent 65%);
  animation:pxDrift2 28s ease-in-out infinite alternate}

/* ---- Documents / download : Dark premium with subtle lighting ---- */
body.pg-documents{
  background-image:
    radial-gradient(900px 600px at 80% 8%,rgba(59,130,246,.16),transparent 55%),
    radial-gradient(900px 700px at 10% 90%,rgba(139,92,246,.16),transparent 55%),
    linear-gradient(160deg,#04050b 0%,#070a15 55%,#04050c 100%);
}
body.pg-documents::before{width:40vw;height:40vw;left:-6vw;top:-8vw;opacity:.6;
  background:radial-gradient(circle,rgba(59,130,246,.4),transparent 65%);
  animation:pxDrift1 30s ease-in-out infinite alternate}
body.pg-documents::after{width:38vw;height:38vw;right:-8vw;bottom:-10vw;opacity:.55;
  background:radial-gradient(circle,rgba(139,92,246,.42),transparent 65%);
  animation:pxDrift2 34s ease-in-out infinite alternate}

/* ---- Welcome : Mesh gradient + blobs ---- */
body.pg-welcome{
  background-image:
    radial-gradient(1000px 700px at 20% 0%,rgba(124,58,237,.26),transparent 55%),
    radial-gradient(1000px 700px at 100% 20%,rgba(6,182,212,.20),transparent 55%),
    radial-gradient(1000px 800px at 50% 120%,rgba(59,130,246,.22),transparent 60%),
    linear-gradient(160deg,#07081a 0%,#0a0b22 50%,#070716 100%);
}
body.pg-welcome::before{width:50vw;height:50vw;left:-10vw;top:-12vw;
  background:radial-gradient(circle,rgba(124,58,237,.5),transparent 65%);
  animation:pxDrift1 26s ease-in-out infinite alternate}
body.pg-welcome::after{width:44vw;height:44vw;right:-12vw;bottom:-14vw;
  background:radial-gradient(circle,rgba(6,182,212,.48),transparent 65%);
  animation:pxDrift2 30s ease-in-out infinite alternate}

@keyframes pxDrift1{0%{transform:translate3d(0,0,0) scale(1)}100%{transform:translate3d(6vw,4vw,0) scale(1.12)}}
@keyframes pxDrift2{0%{transform:translate3d(0,0,0) scale(1.05)}100%{transform:translate3d(-5vw,-4vw,0) scale(1)}}

/* Soft, light vignette for depth (kept subtle + aesthetic) */
body[class*="pg-"]{box-shadow:inset 0 0 200px rgba(0,0,0,.28)}

/* =====================================================================
 * GLASS SURFACES
 * ================================================================= */
.glass-card,.glass-portal{
  background:linear-gradient(160deg,var(--px-glass-2),var(--px-glass))!important;
  backdrop-filter:blur(36px) saturate(150%);
  -webkit-backdrop-filter:blur(36px) saturate(150%);
  border:1px solid var(--px-border)!important;
  border-radius:var(--px-radius)!important;
  box-shadow:inset 0 1px 0 rgba(255,255,255,.1),0 20px 60px rgba(0,0,0,.32)!important;
}

/* =====================================================================
 * TYPOGRAPHY
 * ================================================================= */
.ecosystem-title,.portal-title{
  font-family:'Manrope',sans-serif!important;font-weight:800!important;letter-spacing:-.02em!important;
  background:linear-gradient(120deg,#fff 0%,#c7d2fe 45%,#a5f3fc 100%);
  -webkit-background-clip:text;background-clip:text;-webkit-text-fill-color:transparent;
}
.ecosystem-subtitle,.portal-subtitle{color:var(--px-t2)!important;letter-spacing:.14em}
.section-title{font-family:'Manrope',sans-serif!important;font-weight:700!important;letter-spacing:-.01em}

/* =====================================================================
 * BUTTONS  (gradient, glow, ripple)
 * ================================================================= */
.ecosystem-button,.px-btn{
  position:relative;overflow:hidden;border-radius:14px!important;
  font-family:'Manrope',sans-serif!important;font-weight:600!important;letter-spacing:.2px;
  border:1px solid rgba(255,255,255,.14)!important;
  transition:transform .25s var(--px-ease),box-shadow .25s var(--px-ease),filter .25s var(--px-ease)!important;
  will-change:transform;
}
.ecosystem-button:hover,.px-btn:hover{transform:translateY(-2px);filter:brightness(1.06)}
.ecosystem-button:active,.px-btn:active{transform:translateY(0) scale(.99)}
.btn-upload,.px-btn-primary{background:linear-gradient(135deg,var(--px-indigo),var(--px-violet))!important;box-shadow:0 10px 30px rgba(99,102,241,.35)!important}
.btn-upload:hover,.px-btn-primary:hover{box-shadow:0 16px 40px rgba(99,102,241,.5)!important}
.btn-download{background:linear-gradient(135deg,var(--px-cyan),#0ea5e9)!important;box-shadow:0 10px 30px rgba(6,182,212,.32)!important}
.btn-view{background:linear-gradient(135deg,var(--px-violet),var(--px-indigo))!important}
.btn-logout{background:linear-gradient(135deg,#ef4444,#b91c1c)!important;box-shadow:0 10px 30px rgba(239,68,68,.28)!important}

/* Ripple (added by premium-ui.js) */
.px-ripple{position:absolute;border-radius:50%;transform:translate(-50%,-50%) scale(0);
  background:radial-gradient(circle,rgba(255,255,255,.45),transparent 70%);
  pointer-events:none;animation:pxRipple .6s ease-out forwards;will-change:transform,opacity}
@keyframes pxRipple{to{transform:translate(-50%,-50%) scale(1);opacity:0}}

/* =====================================================================
 * INPUTS
 * ================================================================= */
.glass-input,.px-input{
  border-radius:14px!important;background:rgba(255,255,255,.06)!important;
  border:1px solid var(--px-border)!important;color:var(--px-t1)!important;
  transition:border-color .2s,box-shadow .2s,background .2s!important;
}
.glass-input:focus,.px-input:focus{
  border-color:rgba(99,102,241,.7)!important;background:rgba(255,255,255,.09)!important;
  box-shadow:0 0 0 4px rgba(99,102,241,.18)!important;
}

/* =====================================================================
 * DOWNLOAD / DOCUMENTS  file cards
 * ================================================================= */
.file-ecosystem{
  background:linear-gradient(160deg,var(--px-glass-2),var(--px-glass))!important;
  border:1px solid var(--px-border)!important;border-radius:16px!important;
  transition:transform .25s var(--px-ease),border-color .25s,box-shadow .25s!important;
}
.file-ecosystem:hover{transform:translateY(-3px);border-color:rgba(99,102,241,.4)!important;box-shadow:var(--px-shadow-sm)!important}

/* Upload drop zone */
.upload-ecosystem{
  border:1.5px dashed rgba(255,255,255,.18)!important;border-radius:20px!important;
  background:rgba(255,255,255,.03)!important;transition:all .3s var(--px-ease)!important;
}
.upload-ecosystem:hover{border-color:rgba(99,102,241,.55)!important;background:rgba(99,102,241,.06)!important}

/* Card mouse-glow (premium-ui.js sets --mx/--my) */
.px-glow-card{position:relative}
.px-glow-card::after{
  content:'';position:absolute;inset:0;border-radius:inherit;pointer-events:none;opacity:0;
  background:radial-gradient(320px circle at var(--mx,50%) var(--my,50%),rgba(99,102,241,.18),transparent 60%);
  transition:opacity .35s ease;
}
.px-glow-card:hover::after{opacity:1}

/* =====================================================================
 * SCROLLBARS
 * ================================================================= */
::-webkit-scrollbar{width:8px;height:8px}
::-webkit-scrollbar-track{background:transparent}
::-webkit-scrollbar-thumb{background:linear-gradient(var(--px-indigo),var(--px-cyan));border-radius:8px}
::-webkit-scrollbar-thumb:hover{background:linear-gradient(var(--px-violet),var(--px-blue))}

/* =====================================================================
 * REDUCED MOTION + PERF
 * ================================================================= */
@media (prefers-reduced-motion:reduce){
  *,*::before,*::after{animation-duration:.001ms!important;animation-iteration-count:1!important;transition-duration:.01ms!important}
  body[class*="pg-"]::before,body[class*="pg-"]::after{animation:none!important}
}
/* Save battery: pause blob drift on small screens (still looks great, less GPU) */
@media (max-width:640px){
  body[class*="pg-"]::before,body[class*="pg-"]::after{filter:blur(55px);animation-duration:40s}
}