/* ============================================================
   BHAGWATI TOOLS — ANIMATION SYSTEM
   Industrial Luxury Theme
   Depends on: design-system.css
   ============================================================ */

/* ============================================================
   SCROLL-REVEAL SYSTEM
   Add .ds-reveal to any block element.
   JS adds .ds-revealed when 15% is in viewport.
   ============================================================ */

.ds-reveal {
  opacity:   0;
  transform: translateY(16px);
  transition:
    opacity   var(--ds-duration-page) var(--ds-ease-decelerate),
    transform var(--ds-duration-page) var(--ds-ease-decelerate);
}

.ds-reveal.ds-revealed {
  opacity:   1;
  transform: translateY(0);
}

/* Stagger siblings via delay utility classes */
.ds-reveal[data-delay="1"] { transition-delay:  60ms; }
.ds-reveal[data-delay="2"] { transition-delay: 120ms; }
.ds-reveal[data-delay="3"] { transition-delay: 180ms; }
.ds-reveal[data-delay="4"] { transition-delay: 240ms; }
.ds-reveal[data-delay="5"] { transition-delay: 300ms; }
.ds-reveal[data-delay="6"] { transition-delay: 360ms; }

/* ============================================================
   BRAND CARD GRID STAGGER
   ============================================================ */

.ds-brands-grid .ds-card-brand {
  opacity:   0;
  transform: translateY(16px);
  transition:
    opacity   400ms var(--ds-ease-decelerate),
    transform 400ms var(--ds-ease-decelerate),
    box-shadow var(--ds-duration-base) var(--ds-ease-standard),
    border-color var(--ds-duration-base) var(--ds-ease-standard);
}

.ds-brands-grid .ds-card-brand.ds-revealed {
  opacity:   1;
  transform: translateY(0);
}

.ds-brands-grid .ds-card-brand:nth-child(1) { transition-delay:   0ms; }
.ds-brands-grid .ds-card-brand:nth-child(2) { transition-delay:  60ms; }
.ds-brands-grid .ds-card-brand:nth-child(3) { transition-delay: 120ms; }
.ds-brands-grid .ds-card-brand:nth-child(4) { transition-delay: 180ms; }
.ds-brands-grid .ds-card-brand:nth-child(5) { transition-delay: 240ms; }
.ds-brands-grid .ds-card-brand:nth-child(6) { transition-delay: 300ms; }
.ds-brands-grid .ds-card-brand:nth-child(7) { transition-delay: 360ms; }

/* ============================================================
   HERO ENTRY ANIMATIONS
   ============================================================ */

.ds-hero-title {
  opacity:   0;
  transform: translateY(24px);
  animation: ds-hero-in 600ms var(--ds-ease-decelerate) 200ms forwards;
}

.ds-hero-subtitle {
  opacity:   0;
  transform: translateY(24px);
  animation: ds-hero-in 600ms var(--ds-ease-decelerate) 380ms forwards;
}

.ds-hero-actions {
  opacity:   0;
  transform: translateY(24px);
  animation: ds-hero-in 600ms var(--ds-ease-decelerate) 540ms forwards;
}

@keyframes ds-hero-in {
  to { opacity: 1; transform: translateY(0); }
}

/* ============================================================
   SIDEBAR ACTIVE INDICATOR SLIDE
   ============================================================ */

/* The ::before pseudo on .ds-sidebar__item already handles
   height animation. This adds a smooth left-position slide
   for when the JS updates the active class. */

.ds-sidebar__indicator {
  position:   absolute;
  left:       calc(var(--ds-space-4) + 2px);
  top:        0;
  bottom:     0;
  width:      2px;
  background: var(--ds-color-red);
  border-radius: 1px;
  transition: top var(--ds-duration-base) var(--ds-ease-standard),
              bottom var(--ds-duration-base) var(--ds-ease-standard);
  pointer-events: none;
}

/* ============================================================
   PAGE TRANSITION (when navigating between brand pages)
   ============================================================ */

.ds-page-enter {
  opacity:   0;
  transform: translateY(8px);
  animation: ds-page-in 400ms var(--ds-ease-decelerate) forwards;
}

@keyframes ds-page-in {
  to { opacity: 1; transform: translateY(0); }
}

/* ============================================================
   REDUCED MOTION — disable all animations
   ============================================================ */

@media (prefers-reduced-motion: reduce) {
  .ds-reveal,
  .ds-brands-grid .ds-card-brand,
  .ds-hero-title,
  .ds-hero-subtitle,
  .ds-hero-actions {
    opacity:   1 !important;
    transform: none !important;
    animation: none !important;
    transition:none !important;
  }
}