/* WEVAL PREMIUM — Shared Visual Layer v1.0
   Injected across all platform pages for Apple/Vercel-tier UX
   Built by: WEVIA Master Multi-Agent (Groq+GLM5+Cerebras+Opus) */

/* === 1. PAGE LOAD STAGGER (Groq) === */
@keyframes fadeUpIn{from{opacity:0;transform:translateY(24px)}to{opacity:1;transform:translateY(0)}}
@keyframes fadeInScale{from{opacity:0;transform:scale(.96)}to{opacity:1;transform:scale(1)}}
@keyframes slideInLeft{from{opacity:0;transform:translateX(-20px)}to{opacity:1;transform:translateX(0)}}
@keyframes pulseGlow{0%,100%{box-shadow:0 0 20px rgba(99,102,241,.08)}50%{box-shadow:0 0 40px rgba(99,102,241,.15)}}
@keyframes shimmer{0%{background-position:-200% 0}100%{background-position:200% 0}}
@keyframes breathe{0%,100%{opacity:.6}50%{opacity:1}}
@keyframes countUp{from{opacity:0;transform:translateY(8px)}to{opacity:1;transform:translateY(0)}}

/* Stagger children */
nav{animation:fadeInScale .4s cubic-bezier(.16,1,.3,1) both}
main,section,.container{animation:fadeUpIn .6s cubic-bezier(.16,1,.3,1) both;animation-delay:.1s}
h1,h2{animation:fadeUpIn .5s cubic-bezier(.16,1,.3,1) both;animation-delay:.15s}
.kpi,.stage,.stream,.plan,.feat,.sso-btn,.lean-step,.waste-item{animation:fadeUpIn .5s cubic-bezier(.16,1,.3,1) both}
.kpi:nth-child(1),.stage:nth-child(1){animation-delay:.1s}
.kpi:nth-child(2),.stage:nth-child(2){animation-delay:.18s}
.kpi:nth-child(3),.stage:nth-child(3){animation-delay:.26s}
.kpi:nth-child(4),.stage:nth-child(4){animation-delay:.34s}
.kpi:nth-child(5),.stage:nth-child(5){animation-delay:.42s}
.kpi:nth-child(6){animation-delay:.5s}

/* === 2. HOVER PREMIUM (Groq+Cerebras) === */
nav a{transition:color .2s,text-shadow .3s}
nav a:hover{color:#e2e8f0!important;text-shadow:0 0 12px rgba(99,102,241,.4)}
.kpi,.stage,.stream,.plan,.form-card,.card,.panel{transition:transform .3s cubic-bezier(.16,1,.3,1),box-shadow .3s,border-color .3s}
.kpi:hover,.stage:hover,.stream:hover,.card:hover,.panel:hover{transform:translateY(-4px);box-shadow:0 16px 48px rgba(0,0,0,.2),0 0 0 1px rgba(99,102,241,.15)}

/* === 3. GRADIENT TEXT PREMIUM (Cerebras) === */
.hl,.text-gradient,h1 span{background:linear-gradient(135deg,#6366f1 0%,#06b6d4 50%,#8b5cf6 100%);background-size:200% auto;-webkit-background-clip:text;background-clip:text;-webkit-text-fill-color:transparent;animation:gradientShift 4s ease infinite}
@keyframes gradientShift{0%{background-position:0% 50%}50%{background-position:100% 50%}100%{background-position:0% 50%}}

/* === 4. BUTTON PREMIUM (GLM-5) === */
.btn-primary,button[class*="btn"]{position:relative;overflow:hidden;transition:all .3s cubic-bezier(.16,1,.3,1)}
.btn-primary:active,button[class*="btn"]:active{transform:scale(.97)}
.btn-primary::before{content:'';position:absolute;inset:0;background:linear-gradient(135deg,rgba(255,255,255,.1),transparent);opacity:0;transition:opacity .3s}
.btn-primary:hover::before{opacity:1}

/* === 5. AMBIENT GLOW (Cerebras) === */
.form-card,.stage:first-child,.kpi:first-child{animation:pulseGlow 4s ease-in-out infinite}

/* === 6. SHIMMER LOADING (GLM-5) === */
[data-loading]{background:linear-gradient(90deg,rgba(99,102,241,.05) 25%,rgba(99,102,241,.12) 50%,rgba(99,102,241,.05) 75%);background-size:200% 100%;animation:shimmer 1.5s ease infinite}

/* === 7. SCROLLBAR PREMIUM === */
::-webkit-scrollbar{width:6px;height:6px}
::-webkit-scrollbar-track{background:transparent}
::-webkit-scrollbar-thumb{background:rgba(99,102,241,.2);border-radius:3px}
::-webkit-scrollbar-thumb:hover{background:rgba(99,102,241,.4)}

/* === 8. SELECTION === */
::selection{background:rgba(99,102,241,.3);color:#e2e8f0}

/* === 9. FOCUS PREMIUM === */
input:focus,select:focus,textarea:focus{outline:none;box-shadow:0 0 0 2px rgba(99,102,241,.3),0 0 20px rgba(99,102,241,.08);border-color:rgba(99,102,241,.5)!important}

/* === 10. DIVIDER GLOW (Cerebras) === */
hr,.divider::before,.divider::after{background:linear-gradient(90deg,transparent,rgba(99,102,241,.3),transparent)!important;height:1px;border:none}

/* === 11. TOOLTIP STYLE === */
[title]{position:relative;cursor:help}

/* === 12. NUMBER COUNTER (GLM-5) === */
.metric,.value,[data-count]{animation:countUp .6s cubic-bezier(.16,1,.3,1) both}

/* === 13. RESPONSIVE POLISH === */
@media(max-width:768px){
  .kpi:hover,.stage:hover,.stream:hover{transform:none;box-shadow:none}
  nav .links{gap:8px;font-size:10px;flex-wrap:wrap}
}

/* === 14. PRINT === */
@media print{*{animation:none!important;transition:none!important;box-shadow:none!important}}