/* ═══════════════════════════════════════════════════════════
   SKELETON LOADERS + AI TYPING DOTS + PAGE TRANSITIONS
   ═══════════════════════════════════════════════════════════ */

/* ── 1. SKELETON ───────────────────────────────────────── */
@keyframes skeletonShimmer{
  0%   {background-position:-200% 0;}
  100% {background-position:200% 0;}
}
.sk{
  display:block;
  background:linear-gradient(
    90deg,
    rgba(255,255,255,.04) 0%,
    rgba(255,255,255,.08) 50%,
    rgba(255,255,255,.04) 100%);
  background-size:200% 100%;
  border-radius:8px;
  animation:skeletonShimmer 1.2s var(--p-ease, ease) infinite;
  position:relative;
  overflow:hidden;
}

/* Размеры */
.sk-line{height:14px;margin-bottom:10px;}
.sk-line-sm{height:10px;}
.sk-line-lg{height:18px;}
.sk-title{height:24px;width:60%;margin-bottom:14px;}
.sk-circle{border-radius:50%;}
.sk-poster{aspect-ratio:2/3;width:100%;border-radius:12px;}
.sk-card{
  display:flex;flex-direction:column;gap:10px;
  padding:14px;background:var(--p-surface);
  border:1px solid var(--p-line);border-radius:14px;
}

/* Готовые блоки */
.sk-row-poster{
  display:flex;gap:14px;align-items:flex-start;
  padding:14px 0;border-bottom:1px solid var(--p-line);
}
.sk-row-poster .sk-thumb{
  width:48px;height:72px;flex-shrink:0;border-radius:6px;
}
.sk-row-poster .sk-text{flex:1;min-width:0;}

.sk-grid-cards{
  display:grid;
  grid-template-columns:repeat(auto-fill,minmax(160px,1fr));
  gap:14px;
}
.sk-grid-cards > .sk{
  aspect-ratio:2/3;border-radius:12px;
}

.sk-list-rows{
  display:flex;flex-direction:column;
}

@media (prefers-reduced-motion: reduce){
  .sk{animation:none;background:rgba(255,255,255,.05);}
}

/* ── 2. AI TYPING DOTS ───────────────────────────────── */
.ai-typing{
  display:inline-flex;
  align-items:center;
  gap:6px;
  padding:14px 18px;
  background:var(--p-surface);
  border:1px solid var(--p-line);
  border-radius:9999px;
  color:var(--p-ink-mute);
  font-size:13px;
  font-family:'Inter',sans-serif;
}
.ai-typing-dots{
  display:inline-flex;
  gap:4px;
  align-items:center;
}
.ai-typing-dots span{
  width:6px;height:6px;
  background:var(--p-accent);
  border-radius:50%;
  animation:aiBounce 1.4s var(--p-ease, ease) infinite;
  opacity:.4;
}
.ai-typing-dots span:nth-child(1){animation-delay:0s;}
.ai-typing-dots span:nth-child(2){animation-delay:.18s;}
.ai-typing-dots span:nth-child(3){animation-delay:.36s;}
@keyframes aiBounce{
  0%,80%,100% {transform:translateY(0);opacity:.3;}
  40% {transform:translateY(-6px);opacity:1;}
}
@media (prefers-reduced-motion: reduce){
  .ai-typing-dots span{animation:none;opacity:.8;}
}

/* Полностраничный вариант (в AI-модалке) */
.ai-typing-full{
  display:flex;
  flex-direction:column;
  align-items:center;
  justify-content:center;
  padding:60px 24px;
  gap:20px;
  text-align:center;
}
.ai-typing-full .ai-typing-dots span{
  width:10px;height:10px;
}
.ai-typing-full .ai-typing-label{
  font-size:14px;
  color:var(--p-ink-mute);
  letter-spacing:.5px;
}

/* ── 3. PAGE TRANSITIONS ─────────────────────────────── */
/* SPA pages: cross-fade с лёгким slide.
   .active → видна; .out → исчезает с противоположным slide.
   Тайминги синхронизированы с go() в app.js (140мс swap). */
.page.active{
  animation:pageIn 240ms var(--p-ease, cubic-bezier(.23,1,.32,1)) both;
}
.page.out{
  animation:pageOut 140ms var(--p-ease, cubic-bezier(.23,1,.32,1)) both;
}
@keyframes pageIn{
  from{opacity:0;transform:translateY(6px);}
  to{opacity:1;transform:translateY(0);}
}
@keyframes pageOut{
  from{opacity:1;transform:translateY(0);}
  to{opacity:0;transform:translateY(-4px);}
}
@media (prefers-reduced-motion: reduce){
  .page,.page.active{
    animation:none !important;
    transition:none !important;
    transform:none !important;
  }
}

/* Модалки тоже получают плавный entrance */
.ai-modal.open,
#auth-modal.open,
#cart-modal.open,
#diary-modal,
#club-modal,
#share-menu,
.dm-msg-menu{
  animation:modalIn 220ms var(--p-ease, cubic-bezier(.23,1,.32,1));
}
@keyframes modalIn{
  from{opacity:0;transform:scale(.98);}
  to{opacity:1;transform:scale(1);}
}
@media (prefers-reduced-motion: reduce){
  .ai-modal.open,#auth-modal.open,#cart-modal.open,
  #diary-modal,#club-modal,#share-menu,.dm-msg-menu{animation:none !important;}
}