/* ==========================================================================
   INSTITUTO REVIVER: LUXURY ANIMATIONS SYSTEM
   Movimento Editorial Suave, Sensação Cinematográfica, GPU 60fps
   Easing Natural: cubic-bezier(0.22, 1, 0.36, 1) • Zero Layout Shift
   ========================================================================== */

:root {
  --ease-spring-luxury: cubic-bezier(0.22, 1, 0.36, 1);
  --ease-smooth-out: cubic-bezier(0.16, 1, 0.3, 1);
  --anim-duration-base: 800ms;
}

/* 1. TÍTULOS: SEM ANIMAÇÕES (ESTABILIDADE TOTAL E RENDERIZAÇÃO DIRETA) */
.title-mask,
.title-word {
  display: inline !important;
  overflow: visible !important;
  transform: none !important;
  opacity: 1 !important;
  transition: none !important;
  animation: none !important;
}

h1, h2, h3, h4, h5, h6,
.specialty-hero-title,
.page-hero-title,
.section-title {
  /* Títulos com renderização estática imediata e sem animação */
  animation: none !important;
}

/* 2. PARÁGRAFOS E BLOCOS DE TEXTO: FADE-IN COM DESLOCAMENTO CURTO (20px) */
.reveal-on-scroll,
.reveal-text {
  opacity: 0;
  transform: translateY(20px);
  transition: opacity 800ms var(--ease-spring-luxury),
              transform 800ms var(--ease-spring-luxury);
  will-change: opacity, transform;
}

.reveal-on-scroll.is-revealed,
.reveal-text.is-revealed {
  opacity: 1;
  transform: translateY(0);
}

.delay-1 { transition-delay: 120ms; }
.delay-2 { transition-delay: 240ms; }
.delay-3 { transition-delay: 360ms; }
.delay-4 { transition-delay: 480ms; }

/* 3. DESTAQUES: MARCA-TEXTO / SUBLINHADO DESENHADO EM ELEMENTOS ESPECÍFICOS */
.highlight-draw {
  position: relative;
  display: inline-block;
  background-image: linear-gradient(120deg, rgba(201, 161, 87, 0.22) 0%, rgba(201, 161, 87, 0.35) 100%);
  background-repeat: no-repeat;
  background-size: 0% 32%;
  background-position: 0 88%;
  transition: background-size 850ms var(--ease-spring-luxury);
}

.is-revealed .highlight-draw {
  background-size: 100% 32%;
  transition-delay: 320ms;
}

/* Linha Divisória Dourada que se desenha da esquerda para a direita */
.divider-gold {
  transform: scaleX(0);
  transform-origin: left;
  transition: transform 850ms var(--ease-spring-luxury);
}

.divider-gold.divider-gold-center {
  transform-origin: center;
}

.is-revealed .divider-gold,
.divider-gold.is-revealed {
  transform: scaleX(1);
  transition-delay: 200ms;
}

/* 4. NÚMEROS E ESTATÍSTICAS */
.counter-number {
  display: inline-block;
  font-variant-numeric: tabular-nums;
  font-weight: 500;
  color: var(--color-gold-dark);
  will-change: contents;
}

/* 5. CARDS E IMAGENS: ENTRADA COM LEVE ESCALA (0.96 para 1) E ELEVAÇÃO NO HOVER */
.specialty-pillar-card,
.specialty-card,
.tech-card,
.doctor-profile-card,
.intro-main-image,
.intro-visual,
.hero-visual-frame,
.faq-item {
  opacity: 0;
  transform: scale(0.96) translateY(22px);
  transition: opacity 850ms var(--ease-spring-luxury),
              transform 850ms var(--ease-spring-luxury),
              box-shadow 450ms var(--ease-spring-luxury);
  will-change: opacity, transform;
}

.is-revealed.specialty-pillar-card,
.is-revealed.specialty-card,
.is-revealed.tech-card,
.is-revealed.doctor-profile-card,
.is-revealed.intro-main-image,
.is-revealed.intro-visual,
.is-revealed.faq-item,
.reveal-on-scroll.is-revealed .specialty-pillar-card,
.reveal-on-scroll.is-revealed .specialty-card,
.reveal-on-scroll.is-revealed .tech-card,
.reveal-on-scroll.is-revealed .doctor-profile-card,
.reveal-on-scroll.is-revealed .intro-main-image,
.reveal-on-scroll.is-revealed .intro-visual,
.reveal-on-scroll.is-revealed .faq-item {
  opacity: 1;
  transform: scale(1) translateY(0);
}

/* Elevação Suave no Hover com Sombra Multicamadas */
.specialty-pillar-card:hover,
.specialty-card:hover,
.tech-card:hover,
.doctor-profile-card:hover {
  transform: translateY(-8px) scale(1.008);
  box-shadow: 0 20px 42px rgba(28, 25, 23, 0.09) !important;
}

.intro-main-image img,
.specialty-pillar-visual img,
.tech-image {
  transition: transform 900ms var(--ease-spring-luxury);
}

.intro-main-image:hover img,
.specialty-pillar-card:hover .specialty-pillar-visual img,
.tech-card:hover .tech-image {
  transform: scale(1.04);
}

/* 6. SEÇÕES: PARALLAX DISCRETO NO FUNDO E TRANSIÇÕES */
.section {
  position: relative;
}

.section-bg-ambient {
  position: absolute;
  inset: 0;
  pointer-events: none;
  z-index: 0;
  transform: translateY(var(--parallax-y, 0px));
  will-change: transform;
}

/* 7. BOTÕES E LINKS: MICROINTERAÇÕES NO HOVER */
.btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 0.65rem;
  transition: transform 380ms var(--ease-spring-luxury),
              background-color 380ms var(--ease-spring-luxury),
              color 380ms var(--ease-spring-luxury),
              border-color 380ms var(--ease-spring-luxury),
              box-shadow 380ms var(--ease-spring-luxury);
  will-change: transform;
}

.btn:hover {
  transform: translateY(-2px);
  box-shadow: 0 10px 24px rgba(201, 161, 87, 0.32);
}

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

.btn svg,
.btn .btn-icon {
  transition: transform 380ms var(--ease-spring-luxury);
}

.btn:hover svg,
.btn:hover .btn-icon {
  transform: translateX(4px);
}

/* Links com Seta */
.link-arrow {
  display: inline-flex;
  align-items: center;
  gap: 0.55rem;
  transition: color 300ms var(--ease-spring-luxury),
              transform 300ms var(--ease-spring-luxury);
}

.link-arrow svg {
  transition: transform 380ms var(--ease-spring-luxury);
}

.link-arrow:hover {
  transform: translateX(3px);
  color: var(--color-gold-dark);
}

.link-arrow:hover svg {
  transform: translateX(6px);
}

/* ACESSIBILIDADE: PREFERS-REDUCED-MOTION */
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after {
    animation-duration: 0.01ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.01ms !important;
    scroll-behavior: auto !important;
  }
  .title-word {
    transform: none !important;
    opacity: 1 !important;
  }
  .reveal-on-scroll,
  .reveal-text,
  .specialty-pillar-card,
  .specialty-card,
  .tech-card,
  .doctor-profile-card,
  .intro-main-image,
  .intro-visual,
  .faq-item {
    transform: none !important;
    opacity: 1 !important;
  }
  .highlight-draw,
  em {
    background-size: 100% 32% !important;
  }
  .divider-gold {
    transform: none !important;
  }
  .btn:hover,
  .link-arrow:hover,
  .link-arrow:hover svg {
    transform: none !important;
  }
}