/* === claude-blog: animations.css ===
   View Transitions, scroll-driven, container queries.
*/

/* View Transitions для перехода между страницами */
@view-transition {
  navigation: auto;
}

::view-transition-old(root),
::view-transition-new(root) {
  animation-duration: 0.25s;
  animation-timing-function: var(--ease-out-quart, cubic-bezier(0.25, 1, 0.5, 1));
}

/* Анимация appearing для карточек на главной */
@keyframes card-rise {
  from {
    opacity: 0;
    transform: translateY(12px);
  }
  to {
    opacity: 1;
    transform: translateY(0);
  }
}
.featured-card,
.post-card {
  animation: card-rise 0.5s var(--ease-out-quart, cubic-bezier(0.25, 1, 0.5, 1)) backwards;
}
.post-grid .post-card:nth-child(1) { animation-delay: 0.05s; }
.post-grid .post-card:nth-child(2) { animation-delay: 0.1s; }
.post-grid .post-card:nth-child(3) { animation-delay: 0.15s; }
.post-grid .post-card:nth-child(4) { animation-delay: 0.2s; }
.post-grid .post-card:nth-child(5) { animation-delay: 0.25s; }
.post-grid .post-card:nth-child(6) { animation-delay: 0.3s; }

/* Drift orbs в hero */
@keyframes orb-drift-1 {
  0%, 100% { transform: translate(0, 0) scale(1); }
  50% { transform: translate(40px, -30px) scale(1.1); }
}
@keyframes orb-drift-2 {
  0%, 100% { transform: translate(0, 0) scale(1); }
  50% { transform: translate(-30px, 20px) scale(0.95); }
}
.hero-orb-1 { animation: orb-drift-1 18s ease-in-out infinite; }
.hero-orb-2 { animation: orb-drift-2 22s ease-in-out infinite; }

/* Scroll-driven reading progress (только в Chromium на текущий момент) */
@supports (animation-timeline: scroll()) {
  .reading-progress {
    width: 100%;
    transform-origin: left center;
    transform: scaleX(0);
    animation: progress-grow linear;
    animation-timeline: scroll(root);
  }
  @keyframes progress-grow {
    to { transform: scaleX(1); }
  }
}

/* @starting-style для появления при загрузке */
.hero-tag, .hero-title, .hero-lead, .hero-meta {
  animation: fade-up 0.6s var(--ease-out-quart) backwards;
}
.hero-title { animation-delay: 0.1s; }
.hero-lead { animation-delay: 0.2s; }
.hero-meta { animation-delay: 0.3s; }
@keyframes fade-up {
  from {
    opacity: 0;
    transform: translateY(16px);
  }
  to {
    opacity: 1;
    transform: translateY(0);
  }
}

/* Container Queries для адаптивности card */
@container (max-width: 380px) {
  .card-title { font-size: 16px; }
  .card-desc { font-size: 13px; }
}
.post-card { container-type: inline-size; }

/* Reduced motion overrides */
@media (prefers-reduced-motion: reduce) {
  .hero-orb-1, .hero-orb-2 { animation: none !important; }
  .featured-card, .post-card { animation: none !important; }
  .hero-tag, .hero-title, .hero-lead, .hero-meta { animation: none !important; }
}