/* ============================================================
   INSTITUTO ARETÉ — Quiet Luxury Animations v1
   Princípio: lento, suave, inevitável. Nunca chamativo.
   ============================================================ */

/* Reduz ou zera animações para quem preferir menos movimento */
@media (prefers-reduced-motion: reduce) {
  .ql-reveal,
  .hero .logoWrap,
  .hero .textblock,
  .hero .brandTitle,
  .hero .tagline,
  .hero .inst,
  .hero .arete {
    animation: none !important;
    transition: none !important;
    opacity: 1 !important;
    transform: none !important;
  }
}

/* ── Keyframes ─────────────────────────────────────────── */

@keyframes ql-fade-in {
  from { opacity: 0; }
  to   { opacity: 1; }
}

@keyframes ql-rise {
  from {
    opacity: 0;
    transform: translateY(22px);
  }
  to {
    opacity: 1;
    transform: translateY(0);
  }
}

/* ── Hero: cascata de entrada ───────────────────────────── */
/* Logo aparece primeiro, devagar */
.hero .logoWrap {
  animation: ql-fade-in 1.6s cubic-bezier(0.25, 0.46, 0.45, 0.94) both;
}

/* "INSTITUTO" sobe logo depois */
.hero .inst {
  display: block;
  animation: ql-rise 1.1s 0.5s cubic-bezier(0.25, 0.46, 0.45, 0.94) both;
}

/* "ARETÉ" sobe um momento depois de INSTITUTO */
.hero .arete {
  display: block;
  animation: ql-rise 1.1s 0.72s cubic-bezier(0.25, 0.46, 0.45, 0.94) both;
}

/* Tagline entra por último, mais devagar ainda */
.hero .tagline {
  animation: ql-rise 1.2s 1.05s cubic-bezier(0.25, 0.46, 0.45, 0.94) both;
}

/* ── Scroll reveal: estado inicial ──────────────────────── */
/* O JS adiciona esta classe; quando .is-visible é adicionada, anima */
.ql-reveal {
  opacity: 0;
  transform: translateY(20px);
  transition:
    opacity  0.85s cubic-bezier(0.25, 0.46, 0.45, 0.94),
    transform 0.85s cubic-bezier(0.25, 0.46, 0.45, 0.94);
  will-change: opacity, transform;
}

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



.topbar {
  transition:
    background   0.5s cubic-bezier(0.25, 0.46, 0.45, 0.94),
    border-color 0.5s cubic-bezier(0.25, 0.46, 0.45, 0.94),
    backdrop-filter 0.5s cubic-bezier(0.25, 0.46, 0.45, 0.94) !important;
}

/* ── Foto do médico: emerge com leve atraso editorial ───── */
.medico-photo {
  opacity: 0;
  transform: translateY(18px);
  transition:
    opacity  1.1s 0.15s cubic-bezier(0.25, 0.46, 0.45, 0.94),
    transform 1.1s 0.15s cubic-bezier(0.25, 0.46, 0.45, 0.94);
  will-change: opacity, transform;
}

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

/* ── Links de nav: underline instantâneo (sem animação de crescimento) ── */
.nav a:not(.nav__cta) {
  position: relative;
}

.nav a:not(.nav__cta)::after {
  content: '';
  position: absolute;
  bottom: -5px;
  left: 0; right: 0;
  height: 1px;
  background: rgba(244,246,246,.75);
  opacity: 0;
}

.nav a:not(.nav__cta):hover::after,
.nav a:not(.nav__cta):focus-visible::after {
  opacity: 1;
}

/* ── Cadernos index: cards em stagger ───────────────────── */
.caderno-card {
  opacity: 0;
  transform: translateY(16px);
  transition:
    opacity  0.75s cubic-bezier(0.25, 0.46, 0.45, 0.94),
    transform 0.75s cubic-bezier(0.25, 0.46, 0.45, 0.94);
  will-change: opacity, transform;
}

.cadernos-grid.is-visible .caderno-card:nth-child(1) { transition-delay: 0s;    opacity: 1; transform: none; }
.cadernos-grid.is-visible .caderno-card:nth-child(2) { transition-delay: 0.11s; opacity: 1; transform: none; }
.cadernos-grid.is-visible .caderno-card:nth-child(3) { transition-delay: 0.22s; opacity: 1; transform: none; }
.cadernos-grid.is-visible .caderno-card:nth-child(4) { transition-delay: 0.33s; opacity: 1; transform: none; }
.cadernos-grid.is-visible .caderno-card:nth-child(5) { transition-delay: 0.44s; opacity: 1; transform: none; }

/* ── Caderno artigo + Atendimento: hero entrada ─────────── */
.page-hero .caderno-label {
  animation: ql-rise 0.9s 0.55s cubic-bezier(0.25, 0.46, 0.45, 0.94) both;
}

.page-hero h1 {
  animation: ql-rise 1.1s 0.3s cubic-bezier(0.25, 0.46, 0.45, 0.94) both;
}

.page-hero .subtitle {
  animation: ql-rise 1.1s 0.55s cubic-bezier(0.25, 0.46, 0.45, 0.94) both;
}

/* ── Atendimento: areas-grid em stagger ─────────────────── */
.area-item {
  opacity: 0;
  transform: translateY(24px);
  transition:
    opacity  1.05s cubic-bezier(0.25, 0.46, 0.45, 0.94),
    transform 1.05s cubic-bezier(0.25, 0.46, 0.45, 0.94);
  will-change: opacity, transform;
}

.area-item.is-visible {
  opacity: 1;
  transform: none;
}

/* ── Caderno artigo: imagem mineral ─────────────────────── */
.caderno-imagem {
  animation: ql-fade-in 1.4s 0.7s cubic-bezier(0.25, 0.46, 0.45, 0.94) both;
}

/* ── Caderno artigo: blocos especiais ao scrollar ───────── */
.ql-reveal-article {
  opacity: 0;
  transform: translateY(24px);
  transition:
    opacity  1.05s cubic-bezier(0.25, 0.46, 0.45, 0.94),
    transform 1.05s cubic-bezier(0.25, 0.46, 0.45, 0.94);
  will-change: opacity, transform;
}

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