/**
 * 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);
}

/* ── Shared buttons (matches @aelo/ui Button variants) ── */
.ae-btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 6px;
  border-radius: var(--radius-full);
  font-family: 'Instrument Sans', sans-serif;
  font-size: 14px;
  font-weight: 600;
  letter-spacing: 0.02em;
  line-height: 1;
  text-decoration: none;
  text-transform: lowercase;
  padding: 13px 28px;
  min-height: 44px;
  border: 0.5px solid transparent;
  cursor: pointer;
  user-select: none;
  -webkit-tap-highlight-color: transparent;
  transition:
    background 200ms var(--ease-enter),
    border-color 200ms var(--ease-enter),
    color 200ms var(--ease-enter),
    transform 200ms var(--ease-enter),
    box-shadow 250ms var(--ease-enter);
}

.ae-btn svg {
  flex-shrink: 0;
  display: block;
}

.ae-btn--ease {
  background: var(--ease);
  color: var(--ease-page);
  box-shadow: 0 0 0 0 color-mix(in srgb, var(--ease) 0%, transparent);
}

.ae-btn--ease:hover {
  background: var(--ease-active);
  transform: translateX(2px);
  box-shadow: 0 0 16px color-mix(in srgb, var(--ease) 45%, transparent);
}

.ae-btn--tend {
  background: linear-gradient(135deg, var(--gold-hi) 0%, var(--gold) 100%);
  color: var(--ink);
  box-shadow: 0 0 0 0 color-mix(in srgb, var(--gold) 0%, transparent);
}

.ae-btn--tend:hover {
  transform: translateX(2px);
  box-shadow: 0 0 16px color-mix(in srgb, var(--gold) 50%, transparent);
}

.ae-btn--ease-ghost {
  background: color-mix(in srgb, var(--ease) 12%, transparent);
  color: var(--ease-active);
  border-color: color-mix(in srgb, var(--ease) 20%, transparent);
  box-shadow: 0 0 0 0 color-mix(in srgb, var(--ease) 0%, transparent);
}

.ae-btn--ease-ghost:hover {
  background: color-mix(in srgb, var(--ease) 18%, transparent);
  transform: translateX(2px);
  box-shadow: 0 0 16px color-mix(in srgb, var(--ease) 35%, transparent);
}

.ae-btn--tend-ghost {
  background: color-mix(in srgb, var(--gold) 12%, transparent);
  color: var(--gold-hi);
  border-color: color-mix(in srgb, var(--gold) 25%, transparent);
  box-shadow: 0 0 0 0 color-mix(in srgb, var(--gold) 0%, transparent);
}

.ae-btn--tend-ghost:hover {
  background: color-mix(in srgb, var(--gold) 18%, transparent);
  transform: translateX(2px);
  box-shadow: 0 0 16px color-mix(in srgb, var(--gold) 40%, transparent);
}

.ae-btn--link {
  background: transparent;
  color: var(--text-muted);
  font-weight: 500;
  font-size: 13px;
  letter-spacing: 0.04em;
  padding: 12px 0;
  min-height: 44px;
  border-color: transparent;
  box-shadow: none;
}

.ae-btn--link:hover {
  color: var(--ease-active);
  transform: none;
  box-shadow: none;
}

.ae-btn--link svg {
  opacity: 0.75;
  transition: transform 200ms var(--ease-enter), opacity 200ms var(--ease-enter);
}

.ae-btn--link:hover svg {
  transform: translateY(2px);
  opacity: 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;
  }

  .ae-btn:hover {
    transform: none;
  }

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