/* The Crux Marketing — motion layer (scroll reveals, hovers, logo wall) */

/* ── Reduced motion: disable transforms / animations ── */
html.reduce-motion .reveal-section > *:not(script),
html.reduce-motion .reveal-item,
html.reduce-motion .stat-anim {
  opacity: 1 !important;
  transform: none !important;
  animation: none !important;
  transition: none !important;
}

html.reduce-motion .logo-wall--active .logo-slot img {
  animation: none !important;
}

/* ── Scroll reveals: section children (skip grids + .reveal-item rows like .biz-project) ── */
.reveal-section > *:not(script):not(.has-stagger-children):not(.reveal-item) {
  opacity: 0;
  transform: translateY(1.75rem);
  will-change: opacity, transform;
}

.reveal-section.is-inview > *:not(script):not(.has-stagger-children):not(.reveal-item) {
  opacity: 1;
  transform: none;
  transition:
    opacity 0.85s cubic-bezier(0.22, 1, 0.36, 1),
    transform 0.85s cubic-bezier(0.22, 1, 0.36, 1);
}

.reveal-section.is-inview > *:not(script):not(.has-stagger-children):not(.reveal-item):nth-child(1) { transition-delay: 0.04s; }
.reveal-section.is-inview > *:not(script):not(.has-stagger-children):not(.reveal-item):nth-child(2) { transition-delay: 0.1s; }
.reveal-section.is-inview > *:not(script):not(.has-stagger-children):not(.reveal-item):nth-child(3) { transition-delay: 0.16s; }
.reveal-section.is-inview > *:not(script):not(.has-stagger-children):not(.reveal-item):nth-child(4) { transition-delay: 0.22s; }
.reveal-section.is-inview > *:not(script):not(.has-stagger-children):not(.reveal-item):nth-child(5) { transition-delay: 0.28s; }
.reveal-section.is-inview > *:not(script):not(.has-stagger-children):not(.reveal-item):nth-child(6) { transition-delay: 0.34s; }
.reveal-section.is-inview > *:not(script):not(.has-stagger-children):not(.reveal-item):nth-child(7) { transition-delay: 0.4s; }
.reveal-section.is-inview > *:not(script):not(.has-stagger-children):not(.reveal-item):nth-child(8) { transition-delay: 0.46s; }

.reveal-section > .has-stagger-children {
  opacity: 1;
  transform: none;
}

/* ── Staggered grid / list cells ── */
.reveal-item {
  opacity: 0;
  transform: translateY(1.25rem);
  will-change: opacity, transform;
}

.reveal-item.is-inview {
  opacity: 1;
  transform: none;
  transition:
    opacity 0.7s cubic-bezier(0.22, 1, 0.36, 1),
    transform 0.7s cubic-bezier(0.22, 1, 0.36, 1);
  transition-delay: var(--reveal-delay, 0s);
}

/* ── Refined CTAs ── */
.btn {
  transition:
    background 0.25s cubic-bezier(0.22, 1, 0.36, 1),
    color 0.25s,
    border-color 0.25s,
    transform 0.25s cubic-bezier(0.22, 1, 0.36, 1),
    box-shadow 0.35s cubic-bezier(0.22, 1, 0.36, 1);
}

.btn-gold {
  box-shadow: 0 4px 18px rgba(27, 42, 66, 0.1);
}

.btn-gold:hover {
  box-shadow: 0 12px 32px rgba(201, 168, 76, 0.38);
  transform: translateY(-3px);
}

.btn-navy:hover {
  box-shadow: 0 12px 28px rgba(27, 42, 66, 0.25);
  transform: translateY(-3px);
}

.btn-outline:hover {
  box-shadow: 0 10px 28px rgba(27, 42, 66, 0.12);
  transform: translateY(-2px);
}

.btn-outline-light:hover {
  transform: translateY(-2px);
  box-shadow: 0 8px 24px rgba(0, 0, 0, 0.12);
}

/* ── Cards ── */
.problem-card {
  transition:
    border-color 0.28s,
    background 0.28s,
    transform 0.35s cubic-bezier(0.22, 1, 0.36, 1),
    box-shadow 0.35s cubic-bezier(0.22, 1, 0.36, 1);
}

.problem-card:hover {
  transform: translateY(-4px);
  box-shadow: 0 16px 40px rgba(0, 0, 0, 0.18);
}

.bucket-card {
  transition:
    border-color 0.28s,
    background 0.28s,
    transform 0.35s cubic-bezier(0.22, 1, 0.36, 1),
    box-shadow 0.35s cubic-bezier(0.22, 1, 0.36, 1);
}

.bucket-card:hover {
  transform: translateY(-3px);
  box-shadow: 0 14px 36px rgba(27, 42, 66, 0.1);
}

.plan-step {
  transition: transform 0.35s cubic-bezier(0.22, 1, 0.36, 1);
}

.plan-step:hover {
  transform: translateY(-3px);
}

.metric-card {
  transition:
    transform 0.35s cubic-bezier(0.22, 1, 0.36, 1),
    box-shadow 0.35s cubic-bezier(0.22, 1, 0.36, 1);
}

.metric-card:hover {
  transform: translateY(-4px);
  box-shadow: 0 18px 44px rgba(0, 0, 0, 0.2);
}

.proof-card {
  transition:
    transform 0.35s cubic-bezier(0.22, 1, 0.36, 1),
    box-shadow 0.35s cubic-bezier(0.22, 1, 0.36, 1);
}

.proof-card:hover {
  transform: translateY(-3px);
  box-shadow: 0 14px 36px rgba(27, 42, 66, 0.1);
}

.case-study {
  transition: transform 0.4s cubic-bezier(0.22, 1, 0.36, 1);
}

.case-study:hover {
  transform: translateY(-2px);
}

.biz-project {
  transition:
    transform 0.4s cubic-bezier(0.22, 1, 0.36, 1),
    box-shadow 0.4s cubic-bezier(0.22, 1, 0.36, 1);
}

.biz-project:hover {
  transform: translateY(-3px);
  box-shadow: 0 20px 48px rgba(27, 42, 66, 0.08);
}

/* ── Logo wall (after section in view) ── */
@keyframes crux-logo-float {
  0%, 100% { transform: translateY(0); }
  50% { transform: translateY(-5px); }
}

.logo-wall.logo-wall--active .logo-slot img {
  animation: crux-logo-float 5s ease-in-out infinite;
}

.logo-wall.logo-wall--active .logo-slot:nth-child(1) img { animation-delay: 0s; }
.logo-wall.logo-wall--active .logo-slot:nth-child(2) img { animation-delay: 0.12s; }
.logo-wall.logo-wall--active .logo-slot:nth-child(3) img { animation-delay: 0.24s; }
.logo-wall.logo-wall--active .logo-slot:nth-child(4) img { animation-delay: 0.36s; }
.logo-wall.logo-wall--active .logo-slot:nth-child(5) img { animation-delay: 0.48s; }
.logo-wall.logo-wall--active .logo-slot:nth-child(6) img { animation-delay: 0.6s; }
.logo-wall.logo-wall--active .logo-slot:nth-child(7) img { animation-delay: 0.72s; }
.logo-wall.logo-wall--active .logo-slot:nth-child(8) img { animation-delay: 0.84s; }
.logo-wall.logo-wall--active .logo-slot:nth-child(9) img { animation-delay: 0.96s; }

/* ── Homepage scroll-driven hero (JS sets inline styles; class for will-change) ── */
.hero.hero--home-scroll .hero-ghost-x,
.hero.hero--home-scroll .hero-content {
  will-change: transform, opacity;
}