/* ============================================================================
   WarriorCRM — ANIMATION & POLISH LAYER
   Loaded after styles.css. Everything here is GPU-safe (transform/opacity/
   filter only) and fully disabled under prefers-reduced-motion at the bottom.

   Sections
     1. Typography system (display / body / numeric)
     2. Motion tokens
     3. Animated background (mesh + drifting orbs + starfield)
     4. Glitter / sparkle system
     5. Buttons (shine, ripple, glow, press)
     6. Cards, tiles & surfaces
     7. Navigation & sidebar
     8. Text effects (gradient, shimmer, reveal)
     9. Inputs & forms
    10. Tables, pills, kanban
    11. Modals, toasts, feedback
    12. Loading skeletons
    13. Scrollbar
    14. Reduced-motion + low-power guards
   ========================================================================== */

/* ── 1. TYPOGRAPHY ───────────────────────────────────────────────────────── */
:root{
  --font-display:'Sora',-apple-system,BlinkMacSystemFont,'Segoe UI',sans-serif;
  --font-body:'Plus Jakarta Sans',-apple-system,BlinkMacSystemFont,'Segoe UI',sans-serif;
  --font-mono:'JetBrains Mono',ui-monospace,SFMono-Regular,Menlo,monospace;
}
body{
  font-family:var(--font-body);
  font-size:14.5px;
  line-height:1.55;
  letter-spacing:-0.005em;
  text-rendering:optimizeLegibility;
}
/* display type — brand, headings, hero, section titles */
.brand-name,.crumb,.hero h2,.card-h,.dh-name,.modal-head h2,.tile-label,.nav-group,.section-title{
  font-family:var(--font-display);
  letter-spacing:-0.015em;
}
.brand-name{font-weight:800;letter-spacing:-0.02em}
.hero h2{font-weight:800;letter-spacing:-0.03em;line-height:1.15}
.card-h{font-weight:700;letter-spacing:0.01em}
.tile-label{font-weight:600;letter-spacing:0.04em;text-transform:uppercase;font-size:10.5px}
/* numeric / identifier type — tabular so columns never jitter */
.tile-val,.id-cell,.dh-id,.ch-stats b,.score-num,.target-txt,.funnel-bar,
table td,.ch-roi,.legend-v,.kcol-n,.count{
  font-family:var(--font-mono);
  font-variant-numeric:tabular-nums;
  font-feature-settings:"tnum" 1,"ss01" 1;
}
.tile-val{font-weight:700;letter-spacing:-0.03em}
/* body copy stays in the body face even inside data tables */
table td:not(:has(b)){font-family:var(--font-body)}
.ml-name,.tl-txt,.frow .fk{font-family:var(--font-body)}

/* ── 2. MOTION TOKENS ────────────────────────────────────────────────────── */
:root{
  --e-spring:cubic-bezier(.34,1.46,.44,1);
  --e-out:cubic-bezier(.22,1,.36,1);
  --e-in:cubic-bezier(.55,0,1,.45);
  --t-xs:120ms; --t-sm:180ms; --t-md:280ms; --t-lg:420ms; --t-xl:650ms;
}

/* ── 3. ANIMATED BACKGROUND ──────────────────────────────────────────────── */
@keyframes meshShift{
  0%,100%{transform:translate3d(0,0,0) scale(1)}
  33%{transform:translate3d(3%,-2%,0) scale(1.08)}
  66%{transform:translate3d(-2%,3%,0) scale(1.04)}
}
@keyframes orbFloat{
  0%,100%{transform:translate3d(0,0,0)}
  50%{transform:translate3d(-4%,-6%,0)}
}
@keyframes starTwinkle{
  0%,100%{opacity:.15}
  50%{opacity:.55}
}
/* layer C: fine starfield — pure CSS, no images, sits under everything */
#app::before{
  content:"";position:fixed;inset:0;z-index:0;pointer-events:none;
  background-image:
    radial-gradient(1.4px 1.4px at 12% 22%, rgba(255,255,255,.55), transparent),
    radial-gradient(1.2px 1.2px at 68% 14%, rgba(212,175,55,.5), transparent),
    radial-gradient(1.6px 1.6px at 84% 62%, rgba(255,255,255,.4), transparent),
    radial-gradient(1.2px 1.2px at 32% 78%, rgba(224,69,58,.45), transparent),
    radial-gradient(1.3px 1.3px at 54% 44%, rgba(255,255,255,.35), transparent),
    radial-gradient(1.1px 1.1px at 22% 56%, rgba(59,130,246,.45), transparent),
    radial-gradient(1.5px 1.5px at 91% 30%, rgba(255,255,255,.3), transparent),
    radial-gradient(1.2px 1.2px at 44% 90%, rgba(212,175,55,.4), transparent);
  animation:starTwinkle 5.5s ease-in-out infinite;
  will-change:opacity;
}
[data-theme="light"] #app::before{opacity:.25}
/* strengthen the existing aurora layers into a richer mesh */
body::before{animation:meshShift 24s ease-in-out infinite!important}
body::after{animation:orbFloat 19s ease-in-out infinite!important}

/* ── 4. GLITTER / SPARKLE SYSTEM ─────────────────────────────────────────── */
@keyframes sparklePop{
  0%{transform:translate(-50%,-50%) scale(0) rotate(0deg);opacity:0}
  35%{transform:translate(-50%,-50%) scale(1.15) rotate(90deg);opacity:1}
  100%{transform:translate(-50%,-50%) scale(0) rotate(200deg);opacity:0}
}
@keyframes sparkleDrift{
  0%{transform:translate(0,0) scale(0);opacity:0}
  25%{opacity:1}
  100%{transform:translate(var(--dx,0),var(--dy,-34px)) scale(1);opacity:0}
}
/* injected by effects.js — a 4-point star drawn in pure CSS */
.spark{
  position:fixed;width:12px;height:12px;pointer-events:none;z-index:9999;
  background:var(--spark-color,#d4af37);
  clip-path:polygon(50% 0%,58% 42%,100% 50%,58% 58%,50% 100%,42% 58%,0% 50%,42% 42%);
  animation:sparkleDrift var(--spark-dur,720ms) var(--e-out) forwards;
  will-change:transform,opacity;
}
/* ambient glitter on premium surfaces (hero + gold buttons) */
@keyframes glitterSweep{
  0%{background-position:-220% 0}
  100%{background-position:220% 0}
}
.hero::after{
  content:"";position:absolute;inset:0;pointer-events:none;border-radius:inherit;
  background:linear-gradient(105deg,
    transparent 38%,
    rgba(255,255,255,.10) 46%,
    rgba(212,175,55,.20) 50%,
    rgba(255,255,255,.10) 54%,
    transparent 62%);
  background-size:220% 100%;
  animation:glitterSweep 6.5s ease-in-out infinite;
  will-change:background-position;
}

/* ── 5. BUTTONS ──────────────────────────────────────────────────────────── */
.btn{
  position:relative;overflow:hidden;isolation:isolate;
  font-family:var(--font-body);font-weight:600;letter-spacing:.005em;
  transition:transform var(--t-sm) var(--e-spring),
             box-shadow var(--t-md) var(--e-out),
             filter var(--t-sm) var(--e-out);
  will-change:transform;
}
.btn:hover{transform:translateY(-2px)}
.btn:active{transform:translateY(0) scale(.96);transition-duration:80ms}
.btn-primary:hover{box-shadow:0 8px 26px -6px rgba(224,69,58,.65),0 0 0 1px rgba(224,69,58,.35)}
.btn-gold:hover{box-shadow:0 8px 26px -6px rgba(212,175,55,.6),0 0 0 1px rgba(212,175,55,.4)}
.btn-wa:hover{box-shadow:0 8px 26px -6px rgba(37,211,102,.55)}
/* click ripple (element injected by effects.js) */
@keyframes rippleOut{
  from{transform:translate(-50%,-50%) scale(0);opacity:.5}
  to{transform:translate(-50%,-50%) scale(2.6);opacity:0}
}
.ripple{
  position:absolute;border-radius:50%;pointer-events:none;
  background:radial-gradient(circle,rgba(255,255,255,.75),rgba(255,255,255,0) 70%);
  animation:rippleOut 620ms var(--e-out) forwards;
}
/* icon buttons + chips get the same tactile press */
.ic-btn,.iconbtn,.chip{transition:transform var(--t-xs) var(--e-spring),background var(--t-sm),color var(--t-sm),border-color var(--t-sm)}
.ic-btn:hover,.iconbtn:hover{transform:scale(1.14) rotate(-4deg)}
.ic-btn:active,.iconbtn:active,.chip:active{transform:scale(.9)}
.chip:hover{transform:translateY(-1px)}

/* ── 6. CARDS, TILES & SURFACES ──────────────────────────────────────────── */
@keyframes riseIn{
  from{opacity:0;transform:translateY(16px) scale(.985)}
  to{opacity:1;transform:none}
}
.tile,.card,.ch-card{animation:riseIn var(--t-lg) var(--e-out) both}
/* stagger the KPI grid + channel grid */
.tiles .tile:nth-child(1){animation-delay:.02s}   .tiles .tile:nth-child(2){animation-delay:.05s}
.tiles .tile:nth-child(3){animation-delay:.08s}   .tiles .tile:nth-child(4){animation-delay:.11s}
.tiles .tile:nth-child(5){animation-delay:.14s}   .tiles .tile:nth-child(6){animation-delay:.17s}
.tiles .tile:nth-child(7){animation-delay:.20s}   .tiles .tile:nth-child(8){animation-delay:.23s}
.tiles .tile:nth-child(9){animation-delay:.26s}   .tiles .tile:nth-child(10){animation-delay:.29s}
.tiles .tile:nth-child(n+11){animation-delay:.32s}
.ch-grid .ch-card:nth-child(2n){animation-delay:.06s}
.ch-grid .ch-card:nth-child(3n){animation-delay:.11s}
/* hover: lift + light-catch */
.tile:hover{transform:translateY(-6px) scale(1.015)}
.tile:hover .tile-ico{transform:scale(1.16) rotate(-7deg)}
.tile-ico{transition:transform var(--t-md) var(--e-spring)}
.ch-card{transition:transform var(--t-md) var(--e-out),box-shadow var(--t-md) var(--e-out)}
.ch-card:hover{transform:translateY(-4px)}
.ch-card:hover .ch-ico{transform:scale(1.2) rotate(6deg)}
.ch-ico{display:inline-block;transition:transform var(--t-md) var(--e-spring)}
/* moving accent bar on the left edge of a hovered tile */
.tile::after{transition:opacity var(--t-md) var(--e-out),transform var(--t-lg) var(--e-out)}
.tile:hover::after{opacity:1;transform:scale(1.5)}

/* ── 7. NAVIGATION ───────────────────────────────────────────────────────── */
.nav-item{
  transition:transform var(--t-sm) var(--e-out),background var(--t-sm),color var(--t-sm);
  position:relative;overflow:hidden;
}
.nav-item .ico{display:inline-block;transition:transform var(--t-md) var(--e-spring)}
.nav-item:hover{transform:translateX(5px)}
.nav-item:hover .ico{transform:scale(1.22) rotate(-8deg)}
.nav-item.active .ico{animation:navPulse 2.6s ease-in-out infinite}
@keyframes navPulse{0%,100%{transform:scale(1)}50%{transform:scale(1.12)}}
/* sweeping highlight when a nav item becomes active */
.nav-item.active::after{
  content:"";position:absolute;inset:0;pointer-events:none;
  background:linear-gradient(90deg,transparent,rgba(255,255,255,.07),transparent);
  background-size:200% 100%;animation:glitterSweep 3.2s ease-in-out infinite;
}
.brand-logo{transition:transform var(--t-lg) var(--e-spring)}
.brand:hover .brand-logo{transform:rotateY(180deg) scale(1.08)}

/* ── 8. TEXT EFFECTS ─────────────────────────────────────────────────────── */
@keyframes gradientPan{0%{background-position:0% 50%}100%{background-position:200% 50%}}
/* animated gradient on the greeting headline */
.hero h2{
  background:linear-gradient(100deg,var(--text) 20%,var(--gold) 42%,var(--primary) 58%,var(--text) 80%);
  background-size:220% auto;
  -webkit-background-clip:text;background-clip:text;
  -webkit-text-fill-color:transparent;color:transparent;
  animation:gradientPan 7s linear infinite;
}
/* KPI numbers get a soft glow that intensifies on hover */
.tile-val{transition:text-shadow var(--t-md) var(--e-out),transform var(--t-md) var(--e-spring)}
.tile:hover .tile-val{text-shadow:0 0 18px currentColor;transform:scale(1.03)}
/* section titles slide their underline in */
.card-h{position:relative}
.card-h::after{
  content:"";position:absolute;left:0;bottom:-5px;height:2px;width:0;border-radius:2px;
  background:linear-gradient(90deg,var(--primary),var(--gold));
  transition:width var(--t-lg) var(--e-out);
}
.card:hover .card-h::after{width:44px}

/* ── 9. INPUTS & FORMS ───────────────────────────────────────────────────── */
.field input,.field select,.field textarea,.search,#globalSearch,.spend-inp,.target-row input{
  font-family:var(--font-body);
  transition:border-color var(--t-sm) var(--e-out),
             box-shadow var(--t-sm) var(--e-out),
             transform var(--t-sm) var(--e-out),
             background var(--t-sm);
}
.field input:focus,.field select:focus,.field textarea:focus,
.search:focus,#globalSearch:focus,.spend-inp:focus,.target-row input:focus{
  outline:none;
  border-color:var(--primary);
  box-shadow:0 0 0 3px rgba(224,69,58,.16),0 4px 18px -6px rgba(224,69,58,.45);
  transform:translateY(-1px);
}
.field label{transition:color var(--t-sm) var(--e-out)}
.field:focus-within label{color:var(--primary)}
/* global search expands slightly on focus */
#globalSearch:focus{letter-spacing:.01em}

/* ── 10. TABLES, PILLS, KANBAN ───────────────────────────────────────────── */
tr.row{transition:background var(--t-sm) var(--e-out),transform var(--t-sm) var(--e-out)}
tr.row:hover{transform:translateX(3px)}
tr.row td:first-child{transition:box-shadow var(--t-sm)}
tr.row:hover td:first-child{box-shadow:inset 3px 0 0 var(--primary)}
.pill{transition:transform var(--t-xs) var(--e-spring),box-shadow var(--t-sm) var(--e-out)}
.pill:hover{transform:scale(1.07)}
.mini-list li{transition:transform var(--t-sm) var(--e-out),background var(--t-sm)}
.mini-list li:hover{transform:translateX(6px)}
.mini-list li:hover .ava{transform:scale(1.12)}
.ava{transition:transform var(--t-md) var(--e-spring)}
/* kanban drag affordance */
.kc{transition:transform var(--t-sm) var(--e-spring),box-shadow var(--t-sm) var(--e-out),opacity var(--t-sm)}
.kc:hover{transform:translateY(-4px) rotate(-.6deg) scale(1.02)}
.kc.dragging{transform:rotate(3deg) scale(1.05);opacity:.85;cursor:grabbing}
.kcol-body.drop{animation:dropPulse 1.1s ease-in-out infinite}
@keyframes dropPulse{0%,100%{background:rgba(59,130,246,.10)}50%{background:rgba(59,130,246,.20)}}

/* ── 11. MODALS, TOASTS, FEEDBACK ────────────────────────────────────────── */
@keyframes modalIn{
  from{opacity:0;transform:translate(-50%,-46%) scale(.94)}
  to{opacity:1;transform:translate(-50%,-50%) scale(1)}
}
@keyframes overlayIn{from{opacity:0}to{opacity:1}}
.modal{animation:modalIn var(--t-md) var(--e-spring) both}
#overlay:not(.hidden){animation:overlayIn var(--t-sm) var(--e-out) both}
@keyframes toastIn{
  from{opacity:0;transform:translateX(-50%) translateY(26px) scale(.9)}
  to{opacity:1;transform:translateX(-50%) translateY(-4px) scale(1)}
}
#toast.show{animation:toastIn var(--t-md) var(--e-spring) both}
/* sync badge breathes while saving */
.sync{transition:color var(--t-md) var(--e-out)}
.sync:not(.ok):not(.warn){animation:syncPulse 1.3s ease-in-out infinite}
@keyframes syncPulse{0%,100%{opacity:.55}50%{opacity:1}}

/* ── 12. LOADING SKELETON ────────────────────────────────────────────────── */
@keyframes shimmer{0%{background-position:-180% 0}100%{background-position:180% 0}}
.skeleton{
  background:linear-gradient(90deg,var(--surface2) 25%,var(--border2) 50%,var(--surface2) 75%);
  background-size:180% 100%;
  animation:shimmer 1.5s linear infinite;
  border-radius:8px;color:transparent!important;
}

/* ── 13. SCROLLBAR ───────────────────────────────────────────────────────── */
/* Deliberately understated: a data tool should never have a scrollbar louder
   than its data. Brand colour only appears on hover. */
*::-webkit-scrollbar{width:8px;height:8px}
*::-webkit-scrollbar-track{background:transparent}
*::-webkit-scrollbar-thumb{
  background:var(--border2);
  border-radius:8px;
  transition:background var(--t-sm) var(--e-out);
}
*::-webkit-scrollbar-thumb:hover{background:var(--primary)}
*::-webkit-scrollbar-corner{background:transparent}
*{scrollbar-width:thin;scrollbar-color:var(--border2) transparent}

/* ── 13b. AUTH GATE ──────────────────────────────────────────────────────── */
#authGate{
  position:fixed;inset:0;z-index:200;display:flex;align-items:center;justify-content:center;
  padding:20px;background:var(--bg);
  background-image:
    radial-gradient(closest-side at 20% 25%, rgba(224,69,58,.20), transparent 70%),
    radial-gradient(closest-side at 80% 75%, rgba(59,130,246,.18), transparent 70%);
}
#authCard{
  width:100%;max-width:390px;padding:28px 26px;border-radius:18px;
  background:var(--glass-bg);backdrop-filter:blur(18px);-webkit-backdrop-filter:blur(18px);
  border:1px solid var(--glass-border);box-shadow:0 24px 60px rgba(0,0,0,.5);
  animation:riseIn var(--t-lg) var(--e-out) both;
}
.auth-brand{display:flex;gap:11px;align-items:center;margin-bottom:22px}
.auth-logo{font-size:22px;width:42px;height:42px;display:flex;align-items:center;justify-content:center;
  background:var(--grad);border-radius:12px;box-shadow:0 4px 16px rgba(224,69,58,.45)}
.auth-name{font-family:var(--font-display);font-weight:800;font-size:17px;color:var(--text)}
.auth-name b{color:var(--gold)}
.auth-sub{font-size:10px;color:var(--muted)}
#authTitle{font-family:var(--font-display);font-size:21px;font-weight:800;color:var(--text);margin-bottom:5px}
.auth-hint{font-size:12.5px;color:var(--muted);margin-bottom:18px;line-height:1.5}
#authCard label{display:block;font-size:12px;font-weight:600;color:var(--muted);margin:12px 0 5px}
#authCard input{width:100%;padding:11px 12px;border:1px solid var(--border2);border-radius:9px;
  background:var(--bg);color:var(--text);font-size:16px;font-family:var(--font-body);
  transition:border-color var(--t-sm),box-shadow var(--t-sm)}
#authCard input:focus{outline:none;border-color:var(--primary);
  box-shadow:0 0 0 3px rgba(224,69,58,.16)}
.auth-submit{width:100%;justify-content:center;margin-top:20px;padding:12px}
.auth-submit[disabled]{opacity:.6;cursor:not-allowed}
.auth-err{margin-top:14px;padding:10px 12px;border-radius:9px;font-size:12.5px;
  background:var(--red-bg);color:var(--red);border:1px solid rgba(239,68,68,.3)}
.auth-ok{background:var(--green-bg)!important;color:var(--green)!important;
  border-color:rgba(34,197,94,.35)!important}
.auth-alt{text-align:center;margin-top:16px}
.auth-link{background:none;border:none;color:var(--muted);font-size:12.5px;cursor:pointer;
  font-family:var(--font-body);text-decoration:underline;text-underline-offset:3px}
.auth-link:hover{color:var(--primary)}

/* ── 14. GUARDS ──────────────────────────────────────────────────────────── */
/* small screens: drop the heaviest ambient layers (budget-GPU safety) */
@media(max-width:640px){
  #app::before{display:none}
  .hero::after{animation:none}
}
/* accessibility + battery: kill all motion, keep every element readable */
@media(prefers-reduced-motion:reduce){
  *,*::before,*::after{
    animation-duration:.001ms!important;
    animation-iteration-count:1!important;
    transition-duration:.001ms!important;
    scroll-behavior:auto!important;
  }
  #app::before,.hero::after{animation:none!important}
  .hero h2{
    -webkit-text-fill-color:var(--text);color:var(--text);
    background:none;animation:none;
  }
  .spark,.ripple{display:none!important}
}