/* ==========================================================================
   AZRA Motion — animation layer for Community, Hub, AZRA AI, Ultra Search,
   Workspace and Membership. Load AFTER azra-glass.css. Pure CSS part;
   azra-motion.js adds the streaming text reveal, ripples, like-burst and the
   top progress line.

   Rules of thumb used everywhere here:
   - only transform / opacity are animated (cheap, GPU friendly)
   - entrance animations use `backwards` fill so nothing keeps a lingering transform
   - everything is switched off under prefers-reduced-motion
   ========================================================================== */

:root{
  --azm-ease:cubic-bezier(.2,.9,.25,1);
  --azm-spring:cubic-bezier(.34,1.56,.5,1);
  --azm-gold:255,213,0;
}

/* ---------- shared keyframes ---------- */
@keyframes azm-drop{from{opacity:0;transform:translateY(-22px)}to{opacity:1;transform:none}}
@keyframes azm-rise{from{opacity:0;transform:translateY(22px)}to{opacity:1;transform:none}}
@keyframes azm-pop{0%{opacity:0;transform:translateY(18px) scale(.9)}60%{opacity:1;transform:translateY(-3px) scale(1.025)}100%{opacity:1;transform:none}}
@keyframes azm-slide-in{from{opacity:0;transform:translateX(calc(var(--azm-dir,1)*26px))}to{opacity:1;transform:none}}
@keyframes azm-fade{from{opacity:0}to{opacity:1}}
@keyframes azm-float{0%,100%{transform:translateY(0)}50%{transform:translateY(-9px)}}
@keyframes azm-glow{0%,100%{box-shadow:0 0 0 rgba(var(--azm-gold),0)}50%{box-shadow:0 0 44px rgba(var(--azm-gold),.20)}}
@keyframes azm-sweep{0%{background-position:210% 0}100%{background-position:-110% 0}}
@keyframes azm-halo{0%{transform:scale(.8);opacity:.65}100%{transform:scale(1.9);opacity:0}}
@keyframes azm-para{from{opacity:0;transform:translateY(12px);filter:blur(5px)}to{opacity:1;transform:none;filter:blur(0)}}
@keyframes azm-word{from{opacity:0;transform:translateY(3px);filter:blur(4px)}to{opacity:1;transform:none;filter:blur(0)}}
@keyframes azm-caret{0%,100%{opacity:1;box-shadow:0 0 14px 1px rgba(var(--azm-gold),.8)}50%{opacity:.25;box-shadow:0 0 4px rgba(var(--azm-gold),.2)}}
@keyframes azm-bubble{0%{opacity:0;transform:translateY(14px) scale(.82)}65%{opacity:1;transform:translateY(-2px) scale(1.02)}100%{opacity:1;transform:none}}
@keyframes azm-ripple{from{transform:scale(0);opacity:.5}to{transform:scale(1);opacity:0}}
@keyframes azm-burst{0%{opacity:1;transform:translate(0,0) scale(1)}100%{opacity:0;transform:translate(var(--bx),var(--by)) scale(.2)}}
@keyframes azm-like{0%{transform:scale(1)}30%{transform:scale(1.5) rotate(-8deg)}60%{transform:scale(.88) rotate(4deg)}100%{transform:scale(1)}}
@keyframes azm-view{from{opacity:0;transform:translateY(10px)}to{opacity:1;transform:none}}
@keyframes azm-bar{0%{transform:translateX(-100%)}100%{transform:translateX(100%)}}
@keyframes azm-orb{0%,100%{box-shadow:0 0 0 0 rgba(var(--azm-gold),.30)}60%{box-shadow:0 0 0 12px rgba(var(--azm-gold),0)}}
@keyframes azm-wipe{from{clip-path:inset(0 100% 0 0);opacity:.2}to{clip-path:inset(0 0 0 0);opacity:1}}
@keyframes azm-wipe-rtl{from{clip-path:inset(0 0 0 100%);opacity:.2}to{clip-path:inset(0 0 0 0);opacity:1}}

/* =====================================================================
   1) PAGE CHROME — bars drop in, heroes stagger up
   ===================================================================== */
.topbar,.hub-head.hub-top,.azn-header,.ai-top{animation:azm-drop .75s var(--azm-ease) backwards}
.hub-side,.rail-left{animation:azm-slide-in .8s var(--azm-ease) .12s backwards;--azm-dir:-1}
html[dir=rtl] .hub-side,html[dir=rtl] .rail-left{--azm-dir:1}
.rail:not(.rail-left){animation:azm-slide-in .8s var(--azm-ease) .2s backwards}
html[dir=rtl] .rail:not(.rail-left){--azm-dir:-1}

/* staggered hero children */
:is(.us-hero,.ai-empty,.lp-hero,.hub-hero)>*{animation:azm-rise .9s var(--azm-ease) backwards}
:is(.us-hero,.ai-empty,.lp-hero,.hub-hero)>*:nth-child(1){animation-delay:.10s}
:is(.us-hero,.ai-empty,.lp-hero,.hub-hero)>*:nth-child(2){animation-delay:.20s}
:is(.us-hero,.ai-empty,.lp-hero,.hub-hero)>*:nth-child(3){animation-delay:.30s}
:is(.us-hero,.ai-empty,.lp-hero,.hub-hero)>*:nth-child(4){animation-delay:.40s}
:is(.us-hero,.ai-empty,.lp-hero,.hub-hero)>*:nth-child(5){animation-delay:.50s}
:is(.us-hero,.ai-empty,.lp-hero,.hub-hero)>*:nth-child(n+6){animation-delay:.60s}

/* AI hero logo floats gently */
.ai-flame{animation:azm-float 6s ease-in-out infinite}
.ai-empty h1{background:linear-gradient(100deg,#fff 20%,rgba(var(--azm-gold),1) 48%,#fff 76%);background-size:240% 100%;-webkit-background-clip:text;background-clip:text;-webkit-text-fill-color:transparent;animation:azm-rise .9s var(--azm-ease) .1s backwards,azm-sweep 7s linear 1.2s infinite}

/* suggestion tiles: spring pop, one after another */
.ai-tiles>*{animation:azm-pop .75s var(--azm-spring) backwards;transition:transform .35s var(--azm-spring),border-color .25s,background .25s,box-shadow .3s}
.ai-tiles>*:nth-child(1){animation-delay:.45s}.ai-tiles>*:nth-child(2){animation-delay:.55s}
.ai-tiles>*:nth-child(3){animation-delay:.65s}.ai-tiles>*:nth-child(4){animation-delay:.75s}
.ai-tiles>*:nth-child(n+5){animation-delay:.85s}
@media(hover:hover){
  .ai-tiles>*:hover{transform:translateY(-5px) scale(1.015);box-shadow:0 18px 40px rgba(0,0,0,.55),0 0 0 1px rgba(var(--azm-gold),.30),0 0 34px rgba(var(--azm-gold),.12)}
}
.ai-tiles>*:active{transform:scale(.97)}

/* =====================================================================
   2) AZRA AI — conversation motion
   ===================================================================== */
/* your message flies in like a bubble */
.ai-q-bubble{transform-origin:100% 100%;animation:azm-bubble .55s var(--azm-spring) backwards}
html[dir=rtl] .ai-q-bubble{transform-origin:0 100%}

/* the avatar wakes up and "speaks" while thinking / writing */
.ai-a .ai-avatar{position:relative;animation:azm-pop .7s var(--azm-spring) backwards}
.ai-a:has(.ai-think) .ai-avatar::after,
.ai-a:has(.ai-caret) .ai-avatar::after{
  content:"";position:absolute;inset:-2px;border-radius:inherit;border:2px solid rgba(var(--azm-gold),.7);
  animation:azm-halo 1.5s ease-out infinite;pointer-events:none;
}
.ai-a:has(.ai-caret) .ai-avatar{box-shadow:0 0 22px rgba(var(--azm-gold),.35)}

/* thinking state: aura, faster gold sweep, chips popping in */
.ai-think-mark::after{content:"";position:absolute;inset:-14px;border-radius:50%;
  background:radial-gradient(circle,rgba(var(--azm-gold),.30),transparent 68%);animation:breathe 2.2s ease-in-out infinite;z-index:-1}
.ai-think-bars i{
  background:linear-gradient(100deg,rgba(255,255,255,.05) 20%,rgba(var(--azm-gold),.30) 45%,rgba(255,255,255,.05) 70%)!important;
  background-size:240% 100%!important;animation:azm-sweep 1.5s linear infinite!important;
}
.ai-think-bars i:nth-child(2){animation-delay:.18s!important}
.ai-think-bars i:nth-child(3){animation-delay:.36s!important}
.ai-think [data-live]>*{animation:azm-pop .5s var(--azm-spring) backwards}
.ai-think [data-live]>*:nth-child(2){animation-delay:.07s}.ai-think [data-live]>*:nth-child(3){animation-delay:.14s}
.ai-think [data-live]>*:nth-child(4){animation-delay:.21s}.ai-think [data-live]>*:nth-child(5){animation-delay:.28s}
.ai-think [data-live]>*:nth-child(n+6){animation-delay:.35s}

/* streamed answer: new paragraphs melt in, new words fade in, caret glows */
.azm-p-new{animation:azm-para .7s var(--azm-ease) both}
.azm-w{animation:azm-word .55s ease-out both}
.ai-caret{background:rgb(var(--azm-gold))!important;animation:azm-caret .9s ease-in-out infinite!important;border-radius:3px}
.ai-a-title{animation:azm-wipe .8s var(--azm-ease) backwards}
html[dir=rtl] .ai-a-title{animation-name:azm-wipe-rtl}

/* finished answer: sources, follow-ups and actions cascade in */
[data-rest]>*{animation:azm-rise .7s var(--azm-ease) backwards}
[data-rest]>*:nth-child(2){animation-delay:.12s}[data-rest]>*:nth-child(3){animation-delay:.24s}
[data-rest]>*:nth-child(4){animation-delay:.36s}[data-rest]>*:nth-child(n+5){animation-delay:.48s}
.ai-src{animation:azm-pop .6s var(--azm-spring) backwards}
.ai-src:nth-child(2){animation-delay:.06s}.ai-src:nth-child(3){animation-delay:.12s}.ai-src:nth-child(4){animation-delay:.18s}
.ai-src:nth-child(5){animation-delay:.24s}.ai-src:nth-child(n+6){animation-delay:.30s}
.ai-src{transition:transform .3s var(--azm-spring),border-color .2s,box-shadow .3s}
.ai-src:hover{transform:translateY(-4px)!important;box-shadow:0 14px 34px rgba(0,0,0,.5),0 0 24px rgba(var(--azm-gold),.10)}
.ai-follow button{animation:azm-slide-in .55s var(--azm-ease) backwards;--azm-dir:1;transition:transform .25s var(--azm-spring),border-color .2s,background .2s}
html[dir=rtl] .ai-follow button{--azm-dir:-1}
.ai-follow button:nth-child(2){animation-delay:.08s}.ai-follow button:nth-child(3){animation-delay:.16s}
.ai-follow button:nth-child(n+4){animation-delay:.24s}
.ai-follow button:hover{transform:translateX(5px)}
html[dir=rtl] .ai-follow button:hover{transform:translateX(-5px)}
.ai-act{transition:transform .25s var(--azm-spring),background .2s,border-color .2s}
.ai-act:active{transform:scale(.92)}

/* history drawer items cascade when the list renders / drawer opens */
.ai-hitem{animation:azm-slide-in .5s var(--azm-ease) backwards;--azm-dir:-1}
html[dir=rtl] .ai-hitem{--azm-dir:1}
.ai-hitem:nth-child(2){animation-delay:.04s}.ai-hitem:nth-child(3){animation-delay:.08s}.ai-hitem:nth-child(4){animation-delay:.12s}
.ai-hitem:nth-child(5){animation-delay:.16s}.ai-hitem:nth-child(6){animation-delay:.20s}.ai-hitem:nth-child(n+7){animation-delay:.24s}

/* composer: pressing send squeezes, mode pills spring */
.ai-send{transition:transform .3s var(--azm-spring),filter .2s,opacity .2s}
.ai-send:not(:disabled){animation:azm-orb 2.6s ease-out infinite}
.ai-send.busy{animation:none}
.ai-send.busy::after{content:"";position:absolute;inset:-4px;border-radius:50%;border:2px solid transparent;border-top-color:rgba(255,255,255,.85);animation:spin 1s linear infinite}
.ai-send{position:relative}
.ai-mode{transition:transform .3s var(--azm-spring),background .2s,color .2s,border-color .2s}
.ai-mode:active{transform:scale(.92)}
.ai-mode[aria-pressed=true]{animation:azm-pop .45s var(--azm-spring)}
.ai-jump:not([hidden]){animation:azm-pop .5s var(--azm-spring) backwards}

/* =====================================================================
   3) ULTRA SEARCH
   ===================================================================== */
.us-search{animation:azm-rise .8s var(--azm-ease) .25s backwards;transition:transform .35s var(--azm-spring),box-shadow .3s,border-color .3s}
.us-search:focus-within{transform:scale(1.012)}
.us-search button{transition:transform .3s var(--azm-spring),filter .2s}
.us-search button:active{transform:scale(.93)}
.us-filter-row button{animation:azm-pop .55s var(--azm-spring) backwards;transition:transform .3s var(--azm-spring),background .2s,border-color .2s,color .2s}
.us-filter-row button:nth-child(1){animation-delay:.35s}.us-filter-row button:nth-child(2){animation-delay:.40s}
.us-filter-row button:nth-child(3){animation-delay:.45s}.us-filter-row button:nth-child(4){animation-delay:.50s}
.us-filter-row button:nth-child(5){animation-delay:.55s}.us-filter-row button:nth-child(6){animation-delay:.60s}
.us-filter-row button:nth-child(7){animation-delay:.65s}.us-filter-row button:nth-child(8){animation-delay:.70s}
.us-filter-row button:nth-child(n+9){animation-delay:.75s}
.us-filter-row button:hover{transform:translateY(-2px)}
.us-filter-row button:active{transform:scale(.93)}
.us-filter-row button.active{box-shadow:0 0 22px rgba(var(--azm-gold),.18)}
.us-spinner{animation-duration:.8s}
.us-status{animation:azm-fade .6s ease .3s backwards}
.us-signature-rail>span{animation:azm-rise .7s var(--azm-ease) backwards}
.us-signature-rail>span:nth-child(1){animation-delay:.5s}.us-signature-rail>span:nth-child(2){animation-delay:.6s}.us-signature-rail>span:nth-child(3){animation-delay:.7s}
.us-rail-dot{display:inline-block;vertical-align:middle;margin-inline-end:7px;animation:azm-orb 2.4s ease-out infinite}

/* results */
.us-result{position:relative;transition:transform .3s var(--azm-ease),background .25s}
@media(hover:hover){
  .us-result:hover{transform:translateX(4px);background:linear-gradient(90deg,rgba(var(--azm-gold),.05),transparent 60%)}
  html[dir=rtl] .us-result:hover{transform:translateX(-4px);background:linear-gradient(270deg,rgba(var(--azm-gold),.05),transparent 60%)}
}
.us-empty{animation:azm-fade .6s ease both}
.us-image-card,.us-image-thumb{transition:transform .35s var(--azm-spring)}
@media(hover:hover){.us-image-card:hover{transform:translateY(-4px) scale(1.02)}}
.us-side-card,.us-direct-panel{transition:transform .3s var(--azm-ease),box-shadow .3s}
@media(hover:hover){.us-side-card:hover{transform:translateY(-3px);box-shadow:0 16px 40px rgba(0,0,0,.45)!important}}

/* the AI answer panel: blooms in, glows while generating, orb pulses */
.us-ai-answer-panel:not([hidden]){animation:azm-pop .8s var(--azm-ease) backwards}
.us-ai-answer-panel[data-ai-status=generating]{animation:azm-pop .8s var(--azm-ease) backwards,azm-glow 2.4s ease-in-out .8s infinite}
.us-ai-orb{animation:azm-orb 2.4s ease-out infinite}
.us-ai-answer-panel[data-ai-status=generating] .us-ai-orb img{animation:azm-float 2.2s ease-in-out infinite}
.us-ai-source-pills>*,.us-source-pill{animation:azm-pop .55s var(--azm-spring) backwards}
.us-source-pill:nth-child(2){animation-delay:.06s}.us-source-pill:nth-child(3){animation-delay:.12s}
.us-source-pill:nth-child(4){animation-delay:.18s}.us-source-pill:nth-child(n+5){animation-delay:.24s}
.us-ai-answer-copy>*{animation:azm-para .8s var(--azm-ease) backwards}
.us-ai-answer-copy>*:nth-child(2){animation-delay:.15s}.us-ai-answer-copy>*:nth-child(3){animation-delay:.3s}
.us-ai-answer-copy>*:nth-child(n+4){animation-delay:.45s}

/* =====================================================================
   4) COMMUNITY / HUB / WORKSPACE / MEMBERSHIP
   ===================================================================== */
/* every section switch crossfades in (class added by azra-motion.js) */
.azm-view-in{animation:azm-view .45s var(--azm-ease) backwards}

/* tabs / nav items */
.navlist>*,.hub .hub-side #tabs .tab{transition:transform .25s var(--azm-ease),background .2s,color .2s}
@media(hover:hover){.navlist>*:hover,.hub .hub-side #tabs .tab:hover{transform:translateX(4px)}
  html[dir=rtl] .navlist>*:hover,html[dir=rtl] .hub .hub-side #tabs .tab:hover{transform:translateX(-4px)}}

/* post cards (desktop): lift on hover */
@media(hover:hover) and (min-width:1021px){
  .post{transition:border-color .2s,transform .35s var(--azm-ease),box-shadow .35s}
  .post:hover{transform:translateY(-3px);box-shadow:0 18px 44px rgba(0,0,0,.5),0 0 0 1px rgba(var(--azm-gold),.10)}
  .hx-card:hover{box-shadow:0 18px 44px rgba(0,0,0,.5)!important}
}

/* buttons: springy press */
.btn,.us-button,.ai-btn,.ai-new,.icon-btn,.hub-ic,.ai-icon{transition:transform .28s var(--azm-spring),background .2s,border-color .2s,box-shadow .25s,filter .2s}
.btn:active,.us-button:active,.ai-btn:active,.ai-new:active,.icon-btn:active,.hub-ic:active,.ai-icon:active{transform:scale(.92)}
@media(hover:hover){.btn:hover,.us-button:hover,.ai-btn:hover,.ai-new:hover{transform:translateY(-2px)}}
.btn-primary,.ai-btn,.ai-new,.us-search button{position:relative;overflow:hidden}
.btn-primary::after,.ai-new::after{content:"";position:absolute;inset:0;pointer-events:none;
  background:linear-gradient(105deg,transparent 35%,rgba(255,255,255,.45) 50%,transparent 65%);transform:translateX(-120%);transition:transform .8s var(--azm-ease)}
.btn-primary:hover::after,.ai-new:hover::after{transform:translateX(120%)}

/* notification badges breathe */
.dot:not(.hidden),.cnt{animation:azm-pop .5s var(--azm-spring) backwards}

/* modals & sheets */
.modal{animation:azm-pop .5s var(--azm-spring)!important}
.hxm-panel{transition:transform .45s var(--azm-spring)!important}
.hx-pal-box{animation:azm-pop .45s var(--azm-spring)}
.results:not([hidden]){animation:azm-pop .35s var(--azm-ease)}
.toasts>*{animation:azm-pop .5s var(--azm-spring)}

/* ---------- ripple + like burst + progress line (elements created by JS) ---------- */
.azm-ripple{position:absolute;inset:0;border-radius:inherit;overflow:hidden;pointer-events:none;z-index:0}
.azm-ripple i{position:absolute;left:var(--rx);top:var(--ry);width:var(--rs);height:var(--rs);margin:calc(var(--rs)/-2) 0 0 calc(var(--rs)/-2);
  border-radius:50%;background:radial-gradient(circle,rgba(255,255,255,.55),rgba(255,255,255,0) 70%);animation:azm-ripple .65s ease-out forwards}
.azm-burst{position:fixed;z-index:2147483000;pointer-events:none;width:7px;height:7px;margin:-3.5px 0 0 -3.5px;border-radius:50%;
  background:rgb(var(--azm-gold));box-shadow:0 0 10px rgba(var(--azm-gold),.9);animation:azm-burst .7s cubic-bezier(.2,.7,.3,1) forwards}
.azm-burst:nth-child(3n){background:#fff;box-shadow:0 0 10px rgba(255,255,255,.8)}
.azm-burst:nth-child(3n+1){background:#ff7a9c;box-shadow:0 0 10px rgba(255,122,156,.8)}
.azm-liked{animation:azm-like .55s var(--azm-spring)}

.azm-progress{position:fixed;z-index:2147483001;top:0;left:0;right:0;height:3px;overflow:hidden;pointer-events:none;opacity:0;transition:opacity .3s}
.azm-progress.on{opacity:1}
.azm-progress::before{content:"";position:absolute;inset:0;width:45%;
  background:linear-gradient(90deg,transparent,rgb(var(--azm-gold)),#fff,rgb(var(--azm-gold)),transparent);
  box-shadow:0 0 16px rgba(var(--azm-gold),.9);animation:azm-bar 1.1s cubic-bezier(.5,0,.3,1) infinite}

/* =====================================================================
   5) ACCESSIBILITY
   ===================================================================== */
@media(prefers-reduced-motion:reduce){
  *,*::before,*::after{animation-duration:.001ms!important;animation-delay:0s!important;animation-iteration-count:1!important;transition-duration:.001ms!important}
  .azm-progress::before{animation:none;width:100%}
  .ai-empty h1{-webkit-text-fill-color:#fff;background:none}
}