/*
  DiviMetrics — Motion system
  Subtelne wejścia, hover i stagger. prefers-reduced-motion = wyłączone.
*/

:root {
  --ease-out: cubic-bezier(0.22, 1, 0.36, 1);
  --ease-in-out: cubic-bezier(0.45, 0, 0.55, 1);
  --motion-duration-xs: 0.18s;
  --motion-duration-sm: 0.32s;
  --motion-duration-md: 0.48s;
  --motion-duration-lg: 0.65s;
  --motion-distance: 14px;
  --motion-distance-sm: 8px;
}

/* ── Keyframes (shared across app + landing + report) ── */
@keyframes dm-fade-up {
  from { opacity: 0; transform: translateY(var(--motion-distance)); }
  to   { opacity: 1; transform: translateY(0); }
}

@keyframes dm-fade-in {
  from { opacity: 0; }
  to   { opacity: 1; }
}

@keyframes dm-scale-in {
  from { opacity: 0; transform: scale(0.97); }
  to   { opacity: 1; transform: scale(1); }
}

@keyframes dm-slide-down {
  from { opacity: 0; transform: translateY(-10px); }
  to   { opacity: 1; transform: translateY(0); }
}

@keyframes dm-pulse-glow {
  0%, 100% {
    box-shadow: 0 0 0 0 var(--signal-color, var(--accent)),
                0 0 6px 1px color-mix(in srgb, var(--signal-color, var(--accent)) 40%, transparent);
  }
  50% {
    box-shadow: 0 0 0 5px transparent,
                0 0 12px 3px color-mix(in srgb, var(--signal-color, var(--accent)) 25%, transparent);
  }
}

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

@keyframes dm-bar-grow {
  from { width: 0; }
}

@keyframes dm-float {
  0%, 100% { transform: translateY(0); }
  50%      { transform: translateY(-4px); }
}

/* ── Scroll reveal ── */
.motion-reveal {
  opacity: 0;
  transform: translateY(var(--motion-distance-sm));
  transition:
    opacity var(--motion-duration-md) var(--ease-out),
    transform var(--motion-duration-md) var(--ease-out);
  will-change: opacity, transform;
}

.motion-reveal.is-visible {
  opacity: 1;
  transform: translateY(0);
}

.motion-reveal-fade {
  transform: none;
}

.motion-reveal-scale {
  transform: scale(0.98);
}

.motion-reveal-scale.is-visible {
  transform: scale(1);
}

.motion-reveal-delay-1 { transition-delay: 0.08s; }
.motion-reveal-delay-2 { transition-delay: 0.16s; }
.motion-reveal-delay-3 { transition-delay: 0.24s; }

/* ── Hero — animacja od razu po load ── */
.motion-hero {
  opacity: 0;
  animation: dm-fade-up var(--motion-duration-lg) var(--ease-out) forwards;
}

.motion-hero-delay-1 { animation-delay: 0.1s; }
.motion-hero-delay-2 { animation-delay: 0.2s; }
.motion-hero-delay-3 { animation-delay: 0.32s; }

/* ── Stagger dzieci po wejściu rodzica ── */
.motion-stagger > * {
  opacity: 0;
  transform: translateY(10px);
  transition:
    opacity var(--motion-duration-sm) var(--ease-out),
    transform var(--motion-duration-sm) var(--ease-out);
}

.motion-stagger.is-visible > * {
  opacity: 1;
  transform: translateY(0);
}

.motion-stagger.is-visible > *:nth-child(1)  { transition-delay: 0.03s; }
.motion-stagger.is-visible > *:nth-child(2)  { transition-delay: 0.07s; }
.motion-stagger.is-visible > *:nth-child(3)  { transition-delay: 0.11s; }
.motion-stagger.is-visible > *:nth-child(4)  { transition-delay: 0.15s; }
.motion-stagger.is-visible > *:nth-child(5)  { transition-delay: 0.19s; }
.motion-stagger.is-visible > *:nth-child(6)  { transition-delay: 0.23s; }
.motion-stagger.is-visible > *:nth-child(7)  { transition-delay: 0.27s; }
.motion-stagger.is-visible > *:nth-child(8)  { transition-delay: 0.31s; }
.motion-stagger.is-visible > *:nth-child(n+9) { transition-delay: 0.35s; }

/* ── Dynamiczne wejście (JS: radar, listy) ── */
.motion-enter {
  animation: dm-fade-up var(--motion-duration-sm) var(--ease-out) both;
  animation-delay: calc(var(--motion-i, 0) * 42ms);
}

.motion-tab-enter {
  animation: dm-fade-in var(--motion-duration-xs) var(--ease-out) both;
}

/* ── Shell ── */
.top-bar {
  animation: dm-slide-down var(--motion-duration-md) var(--ease-out) both;
}

.app-mobile-nav {
  animation: dm-fade-up var(--motion-duration-sm) var(--ease-out) both;
  animation-delay: 0.08s;
}

/* ── Interakcje — karty i panele ── */
.product-card,
.radar-card,
.radar-missed-card,
.landing-feature-card,
.landing-layer-card,
.landing-radar-card,
.landing-price-card,
.research-panel,
.pricing-card,
.dashboard-card,
.watchlist-row,
.compare-panel,
.radar-catalyst-row {
  transition:
    transform var(--motion-duration-xs) var(--ease-out),
    border-color var(--transition-base),
    box-shadow var(--transition-base),
    background var(--transition-base);
}

@media (hover: hover) {
  .product-card:hover,
  .radar-card:hover,
  .radar-missed-card:hover,
  .landing-feature-card:hover,
  .landing-layer-card:hover,
  .landing-radar-card:hover,
  .landing-price-card:hover,
  .research-panel:hover,
  .pricing-card:hover,
  .dashboard-card:hover {
    transform: translateY(-2px);
    border-color: var(--border-strong);
    box-shadow: var(--shadow-md);
  }

  .radar-catalyst-row:hover {
    transform: translateX(3px);
    background: var(--bg-inset);
  }
}

/* ── Przyciski i chipy ── */
.btn,
.btn-marketing,
.search-btn,
.filter-chip,
.nav-tab,
.radar-analyze-btn,
.landing-radar-chip {
  transition:
    transform var(--motion-duration-xs) var(--ease-out),
    color var(--transition-base),
    background var(--transition-base),
    border-color var(--transition-base),
    box-shadow var(--transition-base);
}

.btn:active,
.btn-marketing:active,
.search-btn:active,
.filter-chip:active,
.radar-analyze-btn:active {
  transform: scale(0.98);
}

.filter-chip.active,
.landing-radar-chip.active {
  transition:
    transform var(--motion-duration-xs) var(--ease-out),
    color var(--motion-duration-sm) var(--ease-out),
    background var(--motion-duration-sm) var(--ease-out),
    border-color var(--motion-duration-sm) var(--ease-out);
}

.nav-tab.active {
  transition:
    color var(--motion-duration-sm) var(--ease-out),
    border-color var(--motion-duration-sm) var(--ease-out);
}

/* ── Landing ── */
.landing-hero .hero-watermark {
  animation: dm-float 8s var(--ease-in-out) infinite;
}

.landing-nav {
  animation: dm-slide-down var(--motion-duration-md) var(--ease-out) both;
}

.landing-trust .trust-item {
  transition: transform var(--motion-duration-xs) var(--ease-out), opacity var(--transition-base);
}

@media (hover: hover) {
  .landing-trust .trust-item:hover {
    transform: translateY(-2px);
  }
}

/* ── Modal / toast (wsparcie istniejących klas) ── */
.modal-overlay.visible .modal-content {
  animation: dm-scale-in var(--motion-duration-sm) var(--ease-out) both;
}

/* ── Reduced motion ── */
@media (prefers-reduced-motion: reduce) {
  .motion-reveal,
  .motion-stagger > *,
  .motion-hero,
  .motion-enter,
  .motion-tab-enter,
  .top-bar,
  .app-mobile-nav,
  .landing-nav,
  .landing-hero .hero-watermark {
    animation: none !important;
    transition: none !important;
    opacity: 1 !important;
    transform: none !important;
  }

  .product-card:hover,
  .radar-card:hover,
  .landing-feature-card:hover,
  .btn:active,
  .btn-marketing:active {
    transform: none !important;
  }
}