/* ============================================================
   MOTION & MODERN (v2.4) — shapes, depth, life, animation.
   Color-agnostic (uses --blue + existing gradients) — works on every skin.
   Loaded last. Fixes "плоско, древне, скучно, нет анимаций".
   ============================================================ */

/* ---------- 1. Modern buttons: pill, glow, springy press ---------- */
.btn,.btn-neutral,.btn-tinted,.btn-red{border-radius:16px;transition:transform .2s cubic-bezier(.34,1.56,.64,1),box-shadow .25s,filter .18s}
.btn-primary,.btn-green,.btn-red-solid,.slp-add,.slp-save,.obj-add,.rit-save,.trk-save,.wk-share,.foc-start-grad,.tt-mega-add{
  border-radius:100px !important;
  letter-spacing:.01em;
  transition:transform .2s cubic-bezier(.34,1.56,.64,1),box-shadow .25s,filter .18s;
}
button:active,.btn:active,.skin-opt:active,.seg-btn:active{transform:scale(.96)}
.module-row:active,.lvl-card:active,.trk-card:active,.obj-card:active,.rem-nudge:active,.wk-entry:active,.quests-card:active,.day-card:active,.anl-insight:active{transform:scale(.975)}
.btn-primary:active,.btn-green:active,.btn-red-solid:active,.slp-add:active,.slp-save:active,.obj-add:active,.rit-save:active,.trk-save:active,.wk-share:active,.foc-start-grad:active,.tt-mega-add:active{transform:scale(.94) translateY(1px);filter:brightness(1.1)}
/* circular + / − controls */
.tsk-add-btn,.trk-btn{border-radius:50% !important}

/* gentle breathing glow on the main call-to-action */
.btn-primary,.slp-add,.obj-add,.foc-start-grad,.rit-save{animation:ctaPulse 3.4s ease-in-out infinite}
@keyframes ctaPulse{0%,100%{filter:brightness(1)}50%{filter:brightness(1.09) saturate(1.08)}}

/* ---------- 2. Cards & rows feel alive ---------- */
.module-row,.lvl-card,.quests-card,.trk-card,.obj-card,.day-card,.rem-nudge,.wk-tile,.anl-card,.slp-tile,.wk-entry,.tsk-row,.rit-card,.dtx-card{transition:transform .2s cubic-bezier(.34,1.56,.64,1),box-shadow .25s,border-color .2s}
.module-row{position:relative}
/* a soft sheen sweep across module tiles, staggered, premium */
.module-row::after{content:"";position:absolute;inset:0;border-radius:inherit;pointer-events:none;background:linear-gradient(115deg,transparent 38%,rgba(255,255,255,.07) 50%,transparent 62%);opacity:0;transition:opacity .3s}
.module-row:active::after{opacity:1}

/* ---------- 3. Entrance: springy staggered rise ---------- */
.view.active .stagger,.view.enter-fwd .stagger{animation:riseIn .6s cubic-bezier(.22,.9,.3,1) both}
.view.active #levelCard{animation-delay:.05s}
.view.active #questsCard{animation-delay:.1s}
@keyframes riseIn{from{opacity:0;transform:translateY(22px) scale(.97)}to{opacity:1;transform:none}}

/* ---------- 4. Signature animated glass orb (hero) ---------- */
.hero{position:relative}
.hero-greeting,.hero-date,.hero-streak{position:relative;z-index:1}
.hero-orb{
  position:absolute;top:-34px;right:-42px;width:168px;height:168px;border-radius:50%;z-index:0;pointer-events:none;
  background:
    radial-gradient(circle at 33% 27%, rgba(255,255,255,.6), transparent 40%),
    conic-gradient(from 210deg, var(--blue), #9B6CFF, #22D3FF, #FF6CC4, var(--blue));
  box-shadow:0 0 80px 8px rgba(130,120,255,.3), inset 0 0 46px rgba(255,255,255,.18), inset -18px -22px 46px rgba(0,0,0,.36);
  filter:blur(.5px) saturate(140%);
  opacity:.9;
  animation:orbFloat 6.5s ease-in-out infinite;
}
.hero-orb::before{content:"";position:absolute;inset:12%;border-radius:50%;background:conic-gradient(from 0deg,transparent,rgba(255,255,255,.28),transparent 38%);mix-blend-mode:screen;animation:orbSpin 10s linear infinite}
.hero-orb::after{content:"";position:absolute;inset:30%;border-radius:50%;background:radial-gradient(circle at 38% 34%,rgba(255,255,255,.7),transparent 55%);filter:blur(2px)}
@keyframes orbFloat{0%,100%{transform:translateY(0) scale(1)}50%{transform:translateY(-16px) scale(1.045)}}
@keyframes orbSpin{to{transform:rotate(360deg)}}

/* ---------- 5. Streak pill + level badge gentle life ---------- */
.lvl-badge{animation:badgeBob 5s ease-in-out infinite}
@keyframes badgeBob{0%,100%{transform:translateY(0)}50%{transform:translateY(-3px)}}

/* ---------- reduced motion ---------- */
@media (prefers-reduced-motion:reduce){
  .hero-orb,.hero-orb::before,.btn-primary,.slp-add,.obj-add,.foc-start-grad,.rit-save,.lvl-badge,.view.active .stagger,.view.enter-fwd .stagger{animation:none}
}

/* ---------- COMPANION (placeholder spirit-orb; vision: companion-centric) ---------- */
.cmp-stage{position:relative;height:196px;display:flex;align-items:center;justify-content:center;margin:8px 0 2px}
.cmp-aura{position:absolute;width:252px;height:252px;border-radius:50%;background:radial-gradient(circle,rgba(124,77,255,.42),transparent 62%);filter:blur(26px);animation:cmpPulse 4.2s ease-in-out infinite}
.cmp-ring{position:absolute;width:190px;height:190px;border-radius:50%;border:1px solid rgba(150,120,255,.22);animation:cmpSpin 16s linear infinite}
.cmp-ring::before{content:"";position:absolute;top:-3.5px;left:50%;width:7px;height:7px;border-radius:50%;background:#A98CFF;box-shadow:0 0 14px 2px #8B5CFF;transform:translateX(-50%)}
.cmp-orb{position:relative;width:150px;height:150px;border-radius:50%;
  background:
    radial-gradient(circle at 34% 27%, rgba(255,255,255,.55), transparent 38%),
    radial-gradient(circle at 68% 76%, rgba(124,77,255,.55), transparent 56%),
    radial-gradient(circle at 50% 50%, #2A2150, #100A24 80%);
  box-shadow:0 0 64px rgba(124,77,255,.5), inset 0 0 42px rgba(124,77,255,.32), inset -12px -16px 38px rgba(0,0,0,.5), inset 10px 12px 30px rgba(255,255,255,.13);
  animation:cmpFloat 5.2s ease-in-out infinite}
.cmp-shine{position:absolute;top:13%;left:19%;width:46px;height:32px;border-radius:50%;background:radial-gradient(circle,rgba(255,255,255,.85),transparent 70%);filter:blur(2px)}
.cmp-eyes{position:absolute;top:45%;left:0;right:0;display:flex;justify-content:center;gap:28px}
.cmp-eye{width:16px;height:25px;border-radius:50%;background:radial-gradient(circle at 40% 32%,#fff,#BFD2FF 55%,#6E8CFF);box-shadow:0 0 16px rgba(130,160,255,.75);animation:cmpBlink 5.5s infinite}
@keyframes cmpFloat{0%,100%{transform:translateY(0)}50%{transform:translateY(-13px)}}
@keyframes cmpPulse{0%,100%{opacity:.7;transform:scale(1)}50%{opacity:1;transform:scale(1.07)}}
@keyframes cmpSpin{to{transform:rotate(360deg)}}
@keyframes cmpBlink{0%,93%,100%{transform:scaleY(1)}96.5%{transform:scaleY(.12)}}
@media (prefers-reduced-motion:reduce){.cmp-aura,.cmp-ring,.cmp-orb,.cmp-eye,.cmp-char{animation:none}}

/* companion: theme-adaptive ambient glow (accent), image characters, settings picker */
.cmp-aura{background:radial-gradient(circle,color-mix(in srgb,var(--blue,#7C4DFF) 42%,transparent),transparent 62%)}
.cmp-ring{border-color:color-mix(in srgb,var(--blue,#7C4DFF) 30%,transparent)}
.cmp-ring::before{background:var(--blue,#A98CFF);box-shadow:0 0 14px 2px var(--blue,#8B5CFF)}
.cmp-char{position:relative;z-index:1;width:160px;height:160px;object-fit:contain;filter:drop-shadow(0 10px 26px rgba(0,0,0,.42));animation:cmpFloat 5.2s ease-in-out infinite;pointer-events:none;-webkit-user-select:none;user-select:none}
.cmp-pick{display:flex;gap:8px;flex-wrap:wrap}
.cmp-opt{display:flex;flex-direction:column;align-items:center;gap:6px;padding:9px 8px;border-radius:15px;background:var(--glass-bg,rgba(255,255,255,.05));border:1.5px solid transparent;color:var(--text-2);font-size:11px;font-weight:600;cursor:pointer;min-width:62px;transition:transform .15s var(--ease-spring,ease),border-color .2s}
.cmp-opt:active{transform:scale(.95)}
.cmp-opt.active{border-color:var(--blue);color:var(--text-1)}
.cmp-thumb{width:46px;height:46px;border-radius:50%;display:flex;align-items:center;justify-content:center;overflow:hidden;background:radial-gradient(circle at 38% 32%,color-mix(in srgb,var(--blue,#7C4DFF) 50%,transparent),rgba(18,14,36,.7))}
.cmp-thumb img{width:100%;height:100%;object-fit:contain}
.cmp-thumb-spirit{background:radial-gradient(circle at 34% 30%,#fff,#9B6CFF 55%,#160f2c)}

/* ---------- HOME WIDGETS (customizable cards; theme-adaptive) ---------- */
#homeWidgets{display:flex;flex-direction:column}
.wgt-card{margin-bottom:10px}
.wgt-inner{display:flex;align-items:center;gap:12px;width:100%;padding:14px 16px;border-radius:18px;background:var(--glass-bg,rgba(255,255,255,.05));border:1px solid rgba(255,255,255,var(--glass-brd,.12));color:var(--text-1);cursor:pointer;text-align:left;-webkit-backdrop-filter:var(--glass-blur,blur(20px));backdrop-filter:var(--glass-blur,blur(20px));transition:transform .2s var(--ease-spring,ease),border-color .2s}
.wgt-inner:active{transform:scale(.98)}
.wgt-ic{width:42px;height:42px;flex:0 0 42px;border-radius:13px;display:flex;align-items:center;justify-content:center;background:color-mix(in srgb,var(--blue,#7C4DFF) 18%,transparent);color:var(--blue,#7C4DFF)}
.wgt-ic svg{width:22px;height:22px;fill:currentColor}
.wgt-body{flex:1 1 auto;min-width:0;display:flex;flex-direction:column;gap:2px}
.wgt-t{font-size:12px;font-weight:600;color:var(--text-2);letter-spacing:.01em}
.wgt-v{font-size:15px;font-weight:700;color:var(--text-1);white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.wgt-ch{flex:0 0 auto;color:var(--text-3);font-size:18px;font-weight:600}