/* ============================================================
   CFM motion — reveal on scroll, hero entrance, card hovers
   Hidden states only apply after JS adds .cfm-motion-enabled
   ============================================================ */

:root {
  --cfm-motion-ease: cubic-bezier(0.22, 1, 0.36, 1);
  --cfm-motion-duration: 0.65s;
  --cfm-motion-distance: 22px;
  --cfm-motion-stagger: 80ms;
}

/* --- Initial / in-view states --- */
html.cfm-motion-enabled .cfm-motion-item:not(.is-inview) {
  opacity: 0;
  transform: translate3d(0, var(--cfm-motion-distance), 0);
}

.cfm-motion-item {
  transition:
    opacity var(--cfm-motion-duration) var(--cfm-motion-ease),
    transform var(--cfm-motion-duration) var(--cfm-motion-ease);
  transition-delay: calc(var(--cfm-motion-delay, 0) * 1ms);
}

.cfm-motion-item.is-inview {
  opacity: 1;
  transform: translate3d(0, 0, 0);
}

/* --- Hero entrance (keyframes = confiável no load) --- */
@keyframes cfm-hero-enter {
  from {
    opacity: 0;
    transform: translate3d(0, 32px, 0);
  }
  to {
    opacity: 1;
    transform: translate3d(0, 0, 0);
  }
}

@keyframes cfm-hero-enter-visual {
  from {
    opacity: 0;
    filter: blur(4px);
  }
  to {
    opacity: 1;
    filter: blur(0);
  }
}

@keyframes cfm-hero-float {
  0%,
  100% {
    transform: translate3d(0, 0, 0);
  }
  50% {
    transform: translate3d(0, -6px, 0);
  }
}

@keyframes cfm-hero-float-soft {
  0%,
  100% {
    transform: translate3d(0, 0, 0);
  }
  50% {
    transform: translate3d(0, -4px, 0);
  }
}

/* Antes de animar: esconde (só com motion enabled) */
html.cfm-motion-enabled [data-motion-hero]:not(.is-ready) .cfm-motion-hero-item {
  opacity: 0;
  transform: translate3d(0, 32px, 0);
}

html.cfm-motion-enabled [data-motion-hero]:not(.is-ready) .cfm-hero-visual.cfm-motion-hero-item,
html.cfm-motion-enabled [data-motion-hero]:not(.is-ready) .rdc-hero__stage.cfm-motion-hero-item {
  transform: none;
  filter: blur(4px);
}

html.cfm-motion-enabled [data-motion-hero].is-ready .cfm-motion-hero-item {
  animation: cfm-hero-enter 0.85s var(--cfm-motion-ease) both;
  animation-delay: calc(var(--cfm-hero-delay, 0) * 1ms);
}

/* Visual do hero: só entrada (sem float — foto/ilustração fica parada) */
html.cfm-motion-enabled [data-motion-hero].is-ready .cfm-hero-visual.cfm-motion-hero-item,
html.cfm-motion-enabled [data-motion-hero].is-ready .rdc-hero__stage.cfm-motion-hero-item {
  animation: cfm-hero-enter-visual 0.65s var(--cfm-motion-ease) both;
  animation-delay: calc(var(--cfm-hero-delay, 0) * 1ms);
}

/* Float só em card/chips marcados */
html.cfm-motion-enabled [data-motion-hero].is-ready [data-motion-float] {
  animation: cfm-hero-float 5.5s ease-in-out 0.9s infinite;
}

html.cfm-motion-enabled [data-motion-hero].is-ready .cfm-hero-visual > [data-motion-float]:last-child {
  animation-name: cfm-hero-float-soft;
  animation-delay: 1.35s;
}

/* --- Unified card / CTA hovers --- */
.cfm-step-card,
.cfm-benefit-card,
.rdc-about-card,
.rdc-mini-card,
.rdc-change-card,
.rdc-physical-card,
.rdc-sncr-card,
.rdc-cfm-card {
  transition:
    transform 0.22s var(--cfm-motion-ease),
    box-shadow 0.22s var(--cfm-motion-ease),
    border-color 0.22s ease;
}

.cfm-step-card:hover,
.cfm-benefit-card:hover,
.rdc-about-card:hover,
.rdc-mini-card:hover,
.rdc-change-card:hover,
.rdc-physical-card:hover,
.rdc-sncr-card:hover,
.rdc-cfm-card:hover {
  transform: translateY(-4px);
}

.cfm-step-card:hover {
  box-shadow: 0 20px 40px -18px rgba(0, 33, 18, 0.28);
}

.cfm-benefit-card:hover {
  box-shadow: 0 18px 36px -16px rgba(0, 33, 18, 0.22);
  border-color: #e5e7eb;
}

.rdc-hero__btn,
a[data-platform-link],
.rdc-cta__btn {
  transition:
    transform 0.2s var(--cfm-motion-ease),
    box-shadow 0.2s ease,
    background-color 0.15s ease,
    border-color 0.15s ease,
    opacity 0.15s ease;
}

.rdc-hero__btn:hover,
a[data-platform-link]:hover,
.rdc-cta__btn:hover {
  transform: translateY(-2px);
}

.rdc-hero__btn:active,
a[data-platform-link]:active,
.rdc-cta__btn:active {
  transform: translateY(0);
}

/* --- Reduced motion --- */
@media (prefers-reduced-motion: reduce) {
  html.cfm-motion-enabled .cfm-motion-item:not(.is-inview),
  html.cfm-motion-enabled [data-motion-hero]:not(.is-ready) .cfm-motion-hero-item {
    opacity: 1 !important;
    transform: none !important;
  }

  .cfm-motion-item {
    transition: none !important;
  }

  html.cfm-motion-enabled [data-motion-hero].is-ready .cfm-motion-hero-item,
  html.cfm-motion-enabled [data-motion-hero].is-ready [data-motion-float] {
    animation: none !important;
  }

  .cfm-step-card:hover,
  .cfm-benefit-card:hover,
  .rdc-about-card:hover,
  .rdc-mini-card:hover,
  .rdc-change-card:hover,
  .rdc-physical-card:hover,
  .rdc-sncr-card:hover,
  .rdc-cfm-card:hover,
  .rdc-hero__btn:hover,
  a[data-platform-link]:hover,
  .rdc-cta__btn:hover {
    transform: none;
  }
}