/* Microinterações e elevação — moderno, discreto, acessível */

:root {
  --shadow-card: 0 2px 10px rgba(26, 26, 26, 0.06), 0 1px 3px rgba(26, 26, 26, 0.04);
  --shadow-card-hover: 0 14px 32px rgba(74, 41, 179, 0.14), 0 6px 16px rgba(26, 26, 26, 0.08);
  --shadow-soft: 0 8px 24px rgba(50, 185, 71, 0.12);
  --ease-smooth: cubic-bezier(0.22, 1, 0.36, 1);
  --motion-base: 0.5s;
  --motion-fast: 0.28s;
}

[data-theme="dark"] {
  --shadow-card: 0 2px 14px rgba(0, 0, 0, 0.32), 0 1px 4px rgba(0, 0, 0, 0.2);
  --shadow-card-hover: 0 16px 36px rgba(0, 0, 0, 0.45), 0 4px 12px rgba(50, 185, 71, 0.15);
}

/* Cards e superfícies interativas */
.quick-item,
.diff-card,
.info-card,
.gallery-tile,
.gallery-more-tile,
.service-block,
.convenio-box,
.faq-item,
.hero-card,
.hero-figure,
.about-photo {
  box-shadow: var(--shadow-card);
  transition:
    transform var(--motion-fast) var(--ease-smooth),
    box-shadow var(--motion-base) var(--ease-smooth),
    border-color var(--motion-fast) ease;
}

.quick-item:hover,
.quick-item:focus-visible,
.diff-card:hover,
.info-card:hover,
.gallery-tile:hover,
.gallery-more-tile:hover,
.service-block:hover,
.convenio-box:hover,
.faq-item:hover {
  transform: translateY(-5px);
  box-shadow: var(--shadow-card-hover);
}

.gallery-tile:hover,
.gallery-more-tile:hover,
.gallery-tile:focus-visible {
  outline-color: var(--color-brand-purple);
}

.diff-card:hover {
  border-color: rgba(74, 41, 179, 0.35);
}

.quick-item:hover,
.quick-item:focus-visible {
  border-color: rgba(74, 41, 179, 0.3);
}

/* Hero / sobre — sombra estática, leve zoom só na foto */
.hero-figure:hover {
  transform: none;
  box-shadow: var(--shadow-card-hover);
}

.about-photo:hover {
  box-shadow: var(--shadow-card-hover);
}

/* Botões */
.btn {
  transition:
    transform 0.2s var(--ease-smooth),
    box-shadow var(--motion-fast) var(--ease-smooth),
    background var(--motion-fast) ease,
    border-color var(--motion-fast) ease,
    color var(--motion-fast) ease;
}

.btn-primary:hover {
  box-shadow: 0 8px 22px rgba(74, 41, 179, 0.28);
}

.btn-secondary:hover,
.btn-whatsapp:hover {
  box-shadow: var(--shadow-soft);
}

.btn:active {
  transform: scale(0.98);
}

.nav-pill {
  transition:
    background var(--motion-fast) ease,
    color var(--motion-fast) ease,
    border-color var(--motion-fast) ease,
    box-shadow var(--motion-fast) var(--ease-smooth),
    transform 0.2s var(--ease-smooth);
}

.nav-pill:hover {
  box-shadow: 0 4px 14px rgba(74, 41, 179, 0.12);
}

.nav-pill.is-active {
  box-shadow: 0 6px 18px rgba(74, 41, 179, 0.22);
}

/* Revelar ao rolar — mais fluido */
.reveal {
  opacity: 0;
  transform: translateY(20px);
  transition:
    opacity 0.7s var(--ease-smooth),
    transform 0.7s var(--ease-smooth);
  will-change: opacity, transform;
}

.reveal.is-visible {
  opacity: 1;
  transform: translateY(0);
}

/* Painéis que não devem “pular” no hover */
.results-panel,
.cta-band,
.mobile-menu-btn,
.bottom-bar-item,
.lightbox-shell {
  transition: none;
}

.results-panel {
  box-shadow: var(--shadow-lg);
}

@media (prefers-reduced-motion: reduce) {
  .reveal {
    opacity: 1;
    transform: none;
    transition: none;
    will-change: auto;
  }

  .quick-item,
  .diff-card,
  .info-card,
  .gallery-tile,
.gallery-more-tile,
  .service-block,
  .convenio-box,
  .faq-item,
  .hero-figure,
  .about-photo,
  .btn,
  .nav-pill {
    transition: none;
  }

  .quick-item:hover,
  .diff-card:hover,
  .info-card:hover,
  .gallery-tile:hover,
.gallery-more-tile:hover,
  .service-block:hover,
  .convenio-box:hover,
  .faq-item:hover,
  .about-photo:hover {
    transform: none;
  }
}