/**
 * Bloom – Supplemental Animations & Component CSS
 */

/* ─── Additional Keyframes ─────────────────────────────────── */

@keyframes accordionDown {
  from { height: 0; opacity: 0; }
  to   { height: var(--content-height, auto); opacity: 1; }
}

@keyframes accordionUp {
  from { height: var(--content-height, auto); opacity: 1; }
  to   { height: 0; opacity: 0; }
}

@keyframes shimmer {
  0%   { background-position: -200% 0; }
  100% { background-position:  200% 0; }
}

/* ─── Timeline Dot Pulse ───────────────────────────────────── */
@keyframes dotPulseOut {
  0%   { transform: scale(1); opacity: 0.6; }
  100% { transform: scale(2.4); opacity: 0; }
}

/* ─── Skeleton Loader (for news loading state) ─────────────── */
.skeleton {
  background: linear-gradient(90deg, var(--muted) 25%, hsl(80 8% 90%) 50%, var(--muted) 75%);
  background-size: 200% 100%;
  animation: shimmer 1.4s infinite;
  border-radius: 0.375rem;
}

/* ─── Scroll-Animation Variants (additional) ───────────────── */

/* Delay classes (for staggered children) */
.delay-0  { transition-delay: 0s; }
.delay-1  { transition-delay: 0.07s; }
.delay-2  { transition-delay: 0.14s; }
.delay-3  { transition-delay: 0.21s; }
.delay-4  { transition-delay: 0.28s; }
.delay-5  { transition-delay: 0.35s; }

/* ─── Responsive: Events & Social Grid ─────────────────────── */
@media (min-width: 1024px) {
  .events-social-grid {
    grid-template-columns: 1fr 1fr !important;
    align-items: start;
  }
}

/* ─── News Article Entry (Desktop page-aktuelles) ──────────── */
.news-list-article {
  animation-duration: 0.4s;
  animation-fill-mode: both;
}

/* ─── Events Sidebar Slide (Desktop) ───────────────────────── */
.events-list-slide {
  animation: evSlideIn 0.22s ease-in-out both;
}

@keyframes evSlideIn {
  from { opacity: 0; transform: translateX(24px); }
  to   { opacity: 1; transform: translateX(0); }
}

/* ─── Form Focus Ring ──────────────────────────────────────── */
.form-input:focus,
.form-textarea:focus {
  border-color: var(--accent);
  box-shadow: 0 0 0 3px hsl(82 85% 45% / .20);
}

/* ─── Mobile Nav smooth transition fix ─────────────────────── */
.mobile-sub {
  transition: max-height 0.28s cubic-bezier(0.4, 0, 0.2, 1);
}

/* ─── Page transition fade (optional body class) ───────────── */
.page-transition {
  animation: fadeIn 0.3s ease;
}

/* ─── Tab indicator spring ─────────────────────────────────── */
#tab-indicator {
  transition: left 0.35s cubic-bezier(0.34, 1.56, 0.64, 1),
              width 0.35s ease;
}

/* ─── Print ────────────────────────────────────────────────── */
@media print {
  .site-header,
  .site-footer,
  .hero-chevron,
  .carousel-controls,
  .mobile-toggle { display: none !important; }

  .hero-section { height: auto; padding: 2rem 0; }
  .animate-on-scroll { opacity: 1 !important; transform: none !important; }
}

/* ─── High-contrast / prefers-reduced-motion ───────────────── */
@media (prefers-reduced-motion: reduce) {
  .animate-on-scroll,
  .topic-card,
  .news-card,
  .value-card,
  .social-post-tile,
  .hero-badge,
  .hero-heading,
  .hero-chevron svg {
    transition: none !important;
    animation: none !important;
    opacity: 1 !important;
    transform: none !important;
  }
}