/*!
 * tarot-motion.css — Camada de animação moderna (2025/2026)
 * Portal Tarot Online — Leonardo Ferraz
 *
 * Tudo aqui é PROGRESSIVE ENHANCEMENT: envolvido em @supports.
 * Navegadores antigos continuam usando o IntersectionObserver já existente
 * e nada quebra. Nenhuma biblioteca externa — zero JavaScript adicional.
 *
 * Técnicas usadas:
 *  · Scroll-driven animations nativas (animation-timeline: view()/scroll())
 *  · @property para gradientes e brilhos animáveis na GPU
 *  · @starting-style + transition-behavior: allow-discrete (entrada de menus)
 *  · interpolate-size: allow-keywords (acordeão com altura auto animada)
 *  · text-wrap: balance / pretty (tipografia)
 *  · Respeito total a prefers-reduced-motion
 */

/* ------------------------------------------------ 0. tipografia moderna */
h1, h2, h3, .section-title-premium { text-wrap: balance; }
p, li, .section-lead-premium { text-wrap: pretty; }

/* --------------------------------- 1. barra de progresso de leitura (CSS puro) */
@supports (animation-timeline: scroll()) {
  .tt-progress {
    position: fixed;
    inset: 0 0 auto 0;
    height: 3px;
    z-index: 60;
    transform-origin: 0 50%;
    background: linear-gradient(90deg, #b45309 0%, #f59e0b 45%, #fbbf24 100%);
    box-shadow: 0 0 12px rgba(245, 158, 11, .45);
    animation: tt-scaleX linear both;
    animation-timeline: scroll(root block);
  }
  @keyframes tt-scaleX { from { transform: scaleX(0); } to { transform: scaleX(1); } }
}
@supports not (animation-timeline: scroll()) {
  .tt-progress { display: none; }
}

/* ---------------------------- 2. reveal nativo ligado ao scroll (view timeline) */
@supports (animation-timeline: view()) {
  .reveal,
  .tt-reveal {
    opacity: 1;                 /* neutraliza o estado inicial do JS legado */
    transform: none;
    transition: none;
    animation: tt-rise linear both;
    animation-timeline: view();
    /* 'entry' (e não 'cover') porque blocos mais altos que a tela nunca
       completam um intervalo baseado em cover e ficariam semitransparentes. */
    animation-range: entry 0% entry 40%;
  }
  @keyframes tt-rise {
    from { opacity: 0; transform: translateY(34px) scale(.985); filter: blur(3px); }
    to   { opacity: 1; transform: none;                          filter: blur(0);  }
  }

  /* cascata: cartões filhos entram em sequência conforme sobem na viewport */
  .tt-stagger > * {
    animation: tt-rise linear both;
    animation-timeline: view();
    animation-range: entry 0% entry 35%;
  }

  /* parallax discreto para imagens de destaque */
  .tt-parallax {
    animation: tt-parallax linear both;
    animation-timeline: view();
    animation-range: entry 0% exit 100%;
    will-change: transform;
  }
  @keyframes tt-parallax {
    from { transform: translateY(3.5%) scale(1.03); }
    to   { transform: translateY(-3.5%) scale(1.03); }
  }
}

/* ------------------------------------- 3. brilho animável do CTA principal */
@property --tt-glow {
  syntax: '<percentage>';
  inherits: false;
  initial-value: 0%;
}
.tt-cta-glow {
  isolation: isolate;
  transition: --tt-glow .45s cubic-bezier(.16, 1, .3, 1),
              transform .25s cubic-bezier(.16, 1, .3, 1),
              box-shadow .3s ease;
}
/* IMPORTANTE: só cria contexto de posicionamento em elementos ainda estáticos.
   Sem o :not(), esta regra sobrescreveria o .fixed/.absolute do Tailwind
   (mesma especificidade, carregado depois) e o botão flutuante do WhatsApp
   deixaria de ficar preso na tela. */
.tt-cta-glow:not(.fixed):not(.absolute):not(.sticky) { position: relative; }
.tt-cta-glow::before {
  content: "";
  position: absolute;
  inset: -1px;
  z-index: -1;
  border-radius: inherit;
  background: radial-gradient(120% 140% at 50% 120%,
              rgba(251, 191, 36, .55) var(--tt-glow),
              rgba(251, 191, 36, 0) calc(var(--tt-glow) + 42%));
  opacity: .9;
}
.tt-cta-glow:hover,
.tt-cta-glow:focus-visible { --tt-glow: 34%; transform: translateY(-2px) scale(1.02); }
.tt-cta-glow:active { transform: translateY(0) scale(.99); }

/* pulso lento e discreto para chamar atenção sem irritar */
@keyframes tt-breathe {
  0%, 100% { box-shadow: 0 0 0 0 rgba(245, 158, 11, .34); }
  50%      { box-shadow: 0 0 0 12px rgba(245, 158, 11, 0); }
}
.tt-breathe { animation: tt-breathe 3.6s ease-out infinite; }

/* -------------------------------------- 4. acordeão com altura automática */
@supports (interpolate-size: allow-keywords) {
  :root { interpolate-size: allow-keywords; }
  .faq-content {
    max-height: none !important;
    height: 0;
    overflow: hidden;
    transition: height .38s cubic-bezier(.16, 1, .3, 1), opacity .28s ease;
  }
  .faq-content.max-h-faq-open,
  .faq-content.opacity-100 { height: auto; }
}

/* --------------------- 5. entrada suave de elementos que surgem via display */
@supports (transition-behavior: allow-discrete) {
  #mobile-menu {
    transition: opacity .24s ease, translate .24s cubic-bezier(.16, 1, .3, 1),
                display .24s allow-discrete;
    opacity: 1;
    translate: 0 0;
  }
  #mobile-menu.hidden { opacity: 0; translate: 0 -8px; }
  @starting-style {
    #mobile-menu.flex { opacity: 0; translate: 0 -8px; }
  }
}

/* --------------------------------------- 6. microinterações em cartões */
.tt-card-lift {
  transition: transform .35s cubic-bezier(.16, 1, .3, 1),
              box-shadow .35s ease,
              border-color .35s ease;
}
.tt-card-lift:hover {
  transform: translateY(-6px);
  box-shadow: 0 28px 60px rgba(0, 0, 0, .48);
  border-color: rgba(245, 158, 11, .42);
}

/* brilho que percorre a borda no hover (sem JS) */
.tt-shine { overflow: hidden; }
.tt-shine:not(.fixed):not(.absolute):not(.sticky) { position: relative; }
.tt-shine::after {
  content: "";
  position: absolute;
  inset: 0;
  background: linear-gradient(105deg, transparent 38%, rgba(255, 255, 255, .12) 50%, transparent 62%);
  transform: translateX(-120%);
  transition: transform .8s cubic-bezier(.16, 1, .3, 1);
  pointer-events: none;
}
.tt-shine:hover::after { transform: translateX(120%); }

/* ------------------------------------------------- 7. acessibilidade */
@media (prefers-reduced-motion: reduce) {
  .tt-progress,
  .reveal, .tt-reveal, .tt-stagger > *, .tt-parallax,
  .tt-cta-glow, .tt-breathe, .tt-card-lift, .tt-shine::after {
    animation: none !important;
    transition: none !important;
    transform: none !important;
    opacity: 1 !important;
    filter: none !important;
  }
}

/* Avaliações do Google via API: foto do autor e link de atribuição */
.reviews-ti-avatar-img{object-fit:cover;background:#1f2733}
.reviews-ti-author-link{color:inherit;text-decoration:none}
.reviews-ti-author-link:hover,.reviews-ti-author-link:focus-visible{text-decoration:underline}