/**
 * aelo marketing homepage — shared CSS infrastructure (v27+).
 * Linked from public/index.html before page-local styles.
 *
 * Shadow rgba(12,24,16,…) matches warm-tinted elevation from @aelo/ui shadow tokens.
 * Glow tokens resolve --ease / --gold at use-time (defined in page :root).
 */

:root {
  --shadow-card:
    0 1px 2px rgba(12, 24, 16, 0.05),
    0 4px 10px rgba(12, 24, 16, 0.07),
    0 16px 32px rgba(12, 24, 16, 0.09),
    0 32px 64px rgba(12, 24, 16, 0.07);
  --shadow-card-hover:
    0 2px 4px rgba(12, 24, 16, 0.06),
    0 8px 18px rgba(12, 24, 16, 0.10),
    0 24px 44px rgba(12, 24, 16, 0.13),
    0 44px 80px rgba(12, 24, 16, 0.10);
  --glow-ease:
    0 0 0 1px color-mix(in srgb, var(--ease) 8%, transparent),
    0 8px 32px color-mix(in srgb, var(--ease) 16%, transparent),
    0 24px 64px color-mix(in srgb, var(--ease) 10%, transparent);
  --glow-gold:
    0 0 0 1px color-mix(in srgb, var(--gold) 10%, transparent),
    0 8px 32px color-mix(in srgb, var(--gold) 20%, transparent),
    0 24px 64px color-mix(in srgb, var(--gold) 12%, transparent);

  --ease-enter: cubic-bezier(0.16, 1, 0.3, 1);
}

/* Scroll reveal — animation (not transition) to avoid colliding with hover transitions */
.reveal {
  opacity: 0;
  transform: translateY(22px);
}

.reveal.in {
  animation: reveal-in 700ms var(--ease-enter) forwards;
}

.reveal-stagger > * {
  opacity: 0;
  transform: translateY(22px);
}

.reveal-stagger.in > *:nth-child(1) {
  animation: reveal-in 600ms var(--ease-enter) forwards 0ms;
}

.reveal-stagger.in > *:nth-child(2) {
  animation: reveal-in 600ms var(--ease-enter) forwards 120ms;
}

.reveal-stagger.in > *:nth-child(3) {
  animation: reveal-in 600ms var(--ease-enter) forwards 240ms;
}

/* Keep hover transitions from fighting scroll-reveal transform animations */
.reveal-stagger > .pcard {
  transition: box-shadow 260ms var(--ease-enter);
}

.reveal-stagger.in > .pcard {
  transition: transform 260ms var(--ease-enter), box-shadow 260ms var(--ease-enter);
}

@keyframes reveal-in {
  from {
    opacity: 0;
    transform: translateY(22px);
  }
  to {
    opacity: 1;
    transform: translateY(0);
  }
}

@media (prefers-reduced-motion: reduce) {
  .reveal,
  .reveal.in,
  .reveal-stagger > * {
    opacity: 1 !important;
    transform: none !important;
    animation: none !important;
  }

  *,
  *::before,
  *::after {
    animation-duration: 0.01ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.01ms !important;
  }
}