/* ════════════════════════════════════════════════════════════════
   TOKVAULT — PREMIUM EFFECTS LAYER
   Loaded after app.css. Adds depth, motion, and signature touches
   without altering the base component contracts.
   ════════════════════════════════════════════════════════════════ */

/* ── PARTICLE CANVAS HOST ──────────────────────────────────────── */
.particle-host{position:absolute;inset:0;overflow:hidden;pointer-events:none;border-radius:inherit;z-index:0}
.particle-host canvas{position:absolute;inset:0;width:100%;height:100%;display:block;mix-blend-mode:screen;opacity:.9}
.particle-host:after{content:"";position:absolute;inset:0;background:radial-gradient(ellipse 70% 60% at 50% 0%,transparent 0%,var(--bg,#06070b) 92%);opacity:.0}
.hero .particle-host,.auth-stage .particle-host{z-index:0}
.hero-inner,.hero-content{position:relative;z-index:2}

/* ── CURSOR GLOW TRAIL (desktop) ──────────────────────────────── */
.cursor-glow{
  position:fixed;top:0;left:0;width:520px;height:520px;margin:-260px 0 0 -260px;
  border-radius:50%;pointer-events:none;z-index:2;
  background:radial-gradient(circle,rgba(37,244,238,.05) 0%,rgba(254,44,85,.025) 45%,transparent 72%);
  will-change:transform;mix-blend-mode:plus-lighter;
}
.glow-hover{position:relative}
.glow-hover:after{
  content:"";position:absolute;inset:0;border-radius:inherit;pointer-events:none;opacity:0;
  background:radial-gradient(circle 220px at var(--mx,50%) var(--my,50%),rgba(110,231,226,.10),transparent 70%);
  transition:opacity .35s ease;z-index:1;
}
.glow-hover:hover:after{opacity:1}
.account-card.glow-hover:after,.stat-card.glow-hover:after{border-radius:inherit}

/* ── SCROLL REVEAL ─────────────────────────────────────────────── */
[data-reveal]{
  opacity:0;
  transform:translateY(22px) scale(.985);
  filter:blur(4px);
  transition:
    opacity .7s cubic-bezier(.16,1,.3,1),
    transform .7s cubic-bezier(.16,1,.3,1),
    filter .7s cubic-bezier(.16,1,.3,1);
  transition-delay:calc(var(--reveal-i,0) * 70ms);
}
[data-reveal].is-revealed{opacity:1;transform:none;filter:blur(0)}
[data-reveal="left"]{transform:translateX(-26px) scale(.985)}
[data-reveal="left"].is-revealed{transform:none}
[data-reveal="right"]{transform:translateX(26px) scale(.985)}
[data-reveal="right"].is-revealed{transform:none}
[data-reveal="zoom"]{transform:scale(.9);filter:blur(6px)}
[data-reveal="zoom"].is-revealed{transform:scale(1);filter:blur(0)}

/* ── PAGE LOAD CHOREOGRAPHY ───────────────────────────────────── */
.sidebar{opacity:0;transform:translateX(-18px)}
.topbar,.mobile-header{opacity:0;transform:translateY(-10px)}
body.app-ready .sidebar{opacity:1;transform:none;transition:opacity .55s cubic-bezier(.16,1,.3,1),transform .55s cubic-bezier(.16,1,.3,1)}
body.app-ready .topbar,body.app-ready .mobile-header{opacity:1;transform:none;transition:opacity .5s ease .08s,transform .5s cubic-bezier(.16,1,.3,1) .08s}

/* ── MAGNETIC BUTTONS ──────────────────────────────────────────── */
.btn:not(.ghost):not(.danger){transition:transform .18s cubic-bezier(.2,.8,.3,1.3),box-shadow .22s ease,background-position .4s ease}

/* ── RIPPLE ON CLICK ───────────────────────────────────────────── */
.btn,.pill,.region-card,.admin-tabs button{position:relative;overflow:hidden}
.ripple-fx{
  position:absolute;border-radius:50%;background:radial-gradient(circle,rgba(255,255,255,.35),rgba(255,255,255,0) 70%);
  transform:scale(0);pointer-events:none;animation:rippleOut .6s ease-out forwards;z-index:0;
}
@keyframes rippleOut{to{transform:scale(1);opacity:0}}

/* ── DEEPER GLASS / DEPTH POLISH ──────────────────────────────── */
.panel,.stat-card,.account-card,.modal,.region-card{
  position:relative;
  backdrop-filter:blur(18px) saturate(1.3);
}
.panel:before,.stat-card:before{box-shadow:inset 0 1px 0 rgba(255,255,255,.045),inset 0 -1px 0 rgba(0,0,0,.25)}
.account-card,.panel{will-change:transform}
.stat-card,.account-card,.panel,.quick,.region-card{transition:transform .35s cubic-bezier(.16,1,.3,1),border-color .3s ease,box-shadow .35s ease,background .3s ease}

/* Edge-lit border sheen sweeping on hover for primary surfaces */
.panel,.account-card,.stat-card{
  background-clip:padding-box;
}
.panel::after,.account-card::after{
  content:"";position:absolute;inset:0;border-radius:inherit;pointer-events:none;
  background:linear-gradient(120deg,transparent 30%,rgba(255,255,255,.05) 48%,transparent 66%);
  background-size:240% 240%;background-position:120% 0;
  opacity:0;transition:opacity .4s ease,background-position .9s ease;
}
.panel:hover::after,.account-card:hover::after{opacity:1;background-position:-20% 100%}

/* ── STAT CARD NUMBER GLOW ON REVEAL ──────────────────────────── */
.stat-card h3{text-shadow:0 0 24px currentColor;opacity:.97}

/* ── PREMIUM HERO ENHANCEMENTS ────────────────────────────────── */
.hero{isolation:isolate}
.hero .grad{background-size:200% auto;animation:gradShift 6s ease-in-out infinite}
@keyframes gradShift{0%,100%{background-position:0% 50%}50%{background-position:100% 50%}}

/* ── SIDEBAR ACTIVE LINK LIQUID INDICATOR ─────────────────────── */
.side-nav a{position:relative}
.side-nav a.active{animation:navGlowIn .4s cubic-bezier(.16,1,.3,1) both}
@keyframes navGlowIn{from{box-shadow:inset 0 1px 0 rgba(255,255,255,.035),0 0 0 rgba(110,231,226,0)}to{box-shadow:inset 0 1px 0 rgba(255,255,255,.035),0 0 22px rgba(110,231,226,.08)}}

/* ── TOPBAR LIVE PULSE — extra ring ──────────────────────────── */
.topbar-live i{box-shadow:0 0 0 0 rgba(74,222,154,.5)}

/* ── SKELETON SHIMMER (for any future async loading) ──────────── */
.skeleton{position:relative;overflow:hidden;background:rgba(255,255,255,.04);border-radius:10px}
.skeleton:after{content:"";position:absolute;inset:0;background:linear-gradient(100deg,transparent 30%,rgba(255,255,255,.06) 50%,transparent 70%);animation:shimmer 1.6s linear infinite}

/* ── BUTTON SHEEN GRADIENT MOTION ─────────────────────────────── */
.btn:not(.ghost):not(.danger){background-size:160% 160%;background-position:0% 50%}
.btn:not(.ghost):not(.danger):hover{background-position:100% 50%}

/* ── ACCOUNT CARD AVATAR GLOW RING ────────────────────────────── */
.avatar{box-shadow:0 0 0 0 rgba(110,231,226,0),0 8px 25px rgba(0,0,0,.28);transition:box-shadow .4s ease}
.account-card:hover .avatar{box-shadow:0 0 0 5px rgba(110,231,226,.07),0 8px 25px rgba(0,0,0,.28)}

/* ── REDUCED MOTION SAFETY NET ────────────────────────────────── */
@media (prefers-reduced-motion: reduce){
  .cursor-glow{display:none}
  .particle-host{display:none}
  [data-reveal]{opacity:1!important;transform:none!important;filter:none!important;transition:none!important}
  .sidebar,.topbar,.mobile-header{opacity:1!important;transform:none!important}
}

/* ── MOBILE: trim heavy effects for performance ───────────────── */
@media (max-width:760px){
  .cursor-glow{display:none}
  .particle-host canvas{opacity:.55}
}
@media (pointer:coarse){
  .cursor-glow{display:none}
}