/* Recurl LP microinteractions
 * Progressive enhancement only: the page remains fully visible/usable without JS.
 * Motion is automatically disabled for prefers-reduced-motion users.
 */

@keyframes recurl-reveal-in {
  from { opacity: .2; transform: translateY(14px); }
  to { opacity: 1; transform: translateY(0); }
}

html.motion-enabled .motion-reveal.is-visible {
  animation: recurl-reveal-in 520ms cubic-bezier(.2,.8,.2,1) both;
  animation-delay: var(--reveal-delay, 0ms);
}

.phone,
.task,
.p-card,
.step,
.f-card,
.tone-point,
.price-card,
.faq details,
.btn-primary,
.header-cta,
.done-btn {
  transition:
    transform 180ms ease,
    box-shadow 180ms ease,
    border-color 180ms ease,
    background-color 180ms ease,
    opacity 180ms ease;
}

.phone .task.is-demo-focus {
  transform: scale(1.015);
  background: var(--white);
  box-shadow: 0 7px 20px rgba(43,42,38,.10);
}

.btn-primary:active,
.header-cta:active,
.done-btn:active {
  transform: scale(.98);
}

.btn-primary:focus-visible,
.header-cta:focus-visible,
.done-btn:focus-visible,
.faq summary:focus-visible,
.lang-select:focus-visible {
  outline: 3px solid rgba(14,107,84,.28);
  outline-offset: 3px;
}

@media (hover:hover) and (pointer:fine) {
  .p-card:hover,
  .step:hover,
  .f-card:hover,
  .tone-point:hover,
  .price-card:hover {
    transform: translateY(-3px);
    box-shadow: 0 12px 32px rgba(43,42,38,.13);
  }

  .phone:hover {
    transform: translateY(-2px);
    box-shadow: 0 14px 36px rgba(43,42,38,.14);
  }
}

@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto !important; }

  html.motion-enabled .motion-reveal.is-visible,
  .phone,
  .task,
  .p-card,
  .step,
  .f-card,
  .tone-point,
  .price-card,
  .faq details,
  .btn-primary,
  .header-cta,
  .done-btn {
    opacity: 1 !important;
    transform: none !important;
    transition: none !important;
    animation: none !important;
  }
}