/* ============================================================
   FINDABLE_STUDIO — Camada de animação
   Vocabulário da biblioteca "animacoes" implementado do zero,
   dentro do manual de marca: branco, calma, um toque de azul.

   Regras:
   - só transform / opacity / filter (sem layout thrash)
   - tudo desligável por prefers-reduced-motion (fim do arquivo)
   - azul entra como acento, nunca como fundo
   ============================================================ */

/* ── TOKENS DE MOVIMENTO ──────────────────────────────────── */
:root {
  --ease-out: cubic-bezier(0.16, 1, 0.3, 1);
  --ease-in-out: cubic-bezier(0.65, 0, 0.35, 1);
  --ease-spring: cubic-bezier(0.175, 0.885, 0.32, 1.275);

  --t-fast: 0.25s;
  --t-base: 0.5s;
  --t-slow: 0.9s;
}

/* ============================================================
   1. INTRO DE MARCA (blink · title-reveal · blur-out)
============================================================ */
.brand-intro {
  position: fixed;
  inset: 0;
  z-index: 4000;
  background: var(--canvas);
  display: flex;
  align-items: center;
  justify-content: center;
  transition: opacity 0.6s var(--ease-out), filter 0.6s var(--ease-out);
}

.brand-intro__mark {
  font-size: clamp(1.1rem, 3.4vw, 1.9rem);
  font-weight: var(--w-display);
  letter-spacing: 0.18em;
  color: var(--ink);
  display: flex;
  align-items: baseline;
  white-space: nowrap;
}

.brand-intro__mark span {
  opacity: 0;
  transform: translateY(0.45em);
  animation: intro-letter 0.5s var(--ease-out) forwards;
}

/* O underscore é o cursor de busca: pisca e é o único azul da tela */
.brand-intro__caret {
  color: var(--blue);
  animation: anim-blink 0.75s step-end infinite;
}

.brand-intro.is-done {
  opacity: 0;
  filter: blur(14px);
  pointer-events: none;
}

@keyframes intro-letter {
  to {
    opacity: 1;
    transform: translateY(0);
  }
}

@keyframes anim-blink {
  0%, 100% { opacity: 1; }
  50% { opacity: 0; }
}

/* ============================================================
   2. CURSOR CUSTOMIZADO (anim-cursor)
   Ponto azul + anel com atraso. Só em ponteiro fino.
============================================================ */
.cursor-dot,
.cursor-ring {
  position: fixed;
  top: 0;
  left: 0;
  border-radius: 50%;
  pointer-events: none;
  z-index: 3500;
  opacity: 0;
  transition: opacity 0.3s ease;
  will-change: transform;
}

.cursor-dot {
  width: 7px;
  height: 7px;
  background: var(--blue);
  margin: -3.5px 0 0 -3.5px;
}

.cursor-ring {
  width: 34px;
  height: 34px;
  border: 1.5px solid rgba(0, 113, 227, 0.45);
  margin: -17px 0 0 -17px;
  transition: opacity 0.3s ease, width 0.3s var(--ease-out),
              height 0.3s var(--ease-out), margin 0.3s var(--ease-out),
              background 0.3s ease, border-color 0.3s ease;
}

body.cursor-ready .cursor-dot,
body.cursor-ready .cursor-ring {
  opacity: 1;
}

/* Estado sobre elementos clicáveis: o anel engole o ponto */
body.cursor-hot .cursor-ring {
  width: 56px;
  height: 56px;
  margin: -28px 0 0 -28px;
  background: rgba(0, 113, 227, 0.07);
  border-color: var(--blue);
}

body.cursor-hot .cursor-dot {
  opacity: 0;
}

/* ============================================================
   3. REVEAL POR SCROLL (rise · blur-in · slide · scale)
   Uso: <div data-anim="rise" data-delay="120">
============================================================ */
[data-anim] {
  opacity: 0;
  will-change: transform, opacity;
  transition:
    opacity var(--t-slow) var(--ease-out),
    transform var(--t-slow) var(--ease-out),
    filter var(--t-slow) var(--ease-out);
}

[data-anim="rise"]        { transform: translateY(34px); }
[data-anim="fade-in"]     { transform: none; }
[data-anim="blur-in"]     { filter: blur(12px); transform: translateY(18px); }
[data-anim="slide-left"]  { transform: translateX(-40px); }
[data-anim="slide-right"] { transform: translateX(40px); }
[data-anim="scale"]       { transform: scale(0.94); }
[data-anim="descend"]     { transform: translateY(-26px); }
[data-anim="zoom-in"]     { transform: scale(0.86); filter: blur(6px); }

[data-anim].is-in {
  opacity: 1;
  transform: none;
  filter: none;
}

/* ============================================================
   4. TÍTULO EM MÁSCARA (title-reveal · title-slide)
   Cada linha sobe por trás de uma máscara. Split feito no JS.
============================================================ */
.split-line {
  display: block;
  overflow: hidden;
  padding-bottom: 0.08em;
  margin-bottom: -0.08em;
}

.split-line > span {
  display: block;
  transform: translateY(105%);
  transition: transform 0.95s var(--ease-out);
}

.split-ready.is-in .split-line > span {
  transform: translateY(0);
}

.split-ready.is-in .split-line:nth-child(2) > span { transition-delay: 0.09s; }
.split-ready.is-in .split-line:nth-child(3) > span { transition-delay: 0.18s; }
.split-ready.is-in .split-line:nth-child(4) > span { transition-delay: 0.27s; }

/* ============================================================
   5. TRAÇO AZUL (underline-grow)
   Elemento gráfico do manual: risco azul abrindo o bloco.
============================================================ */
.eyebrow {
  position: relative;
  padding-bottom: 0.55rem;
}

.eyebrow::after {
  content: '';
  position: absolute;
  left: 0;
  bottom: 0;
  height: 2px;
  width: 0;
  background: var(--blue);
  border-radius: 2px;
  transition: width 0.8s var(--ease-out) 0.15s;
}

.is-in .eyebrow::after,
.eyebrow.is-in::after {
  width: 42px;
}

/* Centralizado no hero e no CTA final */
.hero .eyebrow::after,
.cta-box .eyebrow::after {
  left: 50%;
  transform: translateX(-50%);
}

/* ============================================================
   6. LINK COM SUBLINHADO (underline-slide)
============================================================ */
.nav-links a:not(.nav-cta),
.footer-links a {
  position: relative;
}

.nav-links a:not(.nav-cta)::after,
.footer-links a::after {
  content: '';
  position: absolute;
  left: 0;
  bottom: -4px;
  width: 100%;
  height: 1.5px;
  background: var(--blue);
  border-radius: 2px;
  transform: scaleX(0);
  transform-origin: right;
  transition: transform 0.4s var(--ease-out);
}

.nav-links a:not(.nav-cta):hover::after,
.nav-links a.active::after,
.footer-links a:hover::after {
  transform: scaleX(1);
  transform-origin: left;
}

/* ============================================================
   7. BOTÕES (button-hover · shine · button-press)
============================================================ */
.btn {
  isolation: isolate;
}

.btn::after {
  content: '';
  position: absolute;
  inset: 0;
  z-index: -1;
  background: linear-gradient(
    100deg,
    transparent 20%,
    rgba(255, 255, 255, 0.55) 50%,
    transparent 80%
  );
  transform: translateX(-120%);
  transition: transform 0.75s var(--ease-out);
}

.btn-primary:hover::after {
  transform: translateX(120%);
}

.btn-ghost::after {
  background: linear-gradient(
    100deg,
    transparent 20%,
    rgba(0, 113, 227, 0.12) 50%,
    transparent 80%
  );
}

.btn-ghost:hover::after {
  transform: translateX(120%);
}

/* Micro-interação padrão do sistema Apple: press = scale(0.95) */
.btn:active,
.nav-cta:active,
.footer-social a:active {
  transform: scale(0.95) !important;
  transition: transform 0.1s ease;
}

/* Seta do CTA principal ganha impulso */
.btn-primary svg {
  transition: transform 0.4s var(--ease-out);
}

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

/* ============================================================
   8. SPOTLIGHT NOS CARDS (border-glow · card-hover)
   Um brilho azul muito baixo segue o cursor dentro do card.
   Coordenadas vêm do JS em --mx / --my.
============================================================ */
.glass-card,
.project-card {
  --mx: 50%;
  --my: 50%;
}

.glass-card::after,
.project-card::after {
  content: '';
  position: absolute;
  inset: 0;
  pointer-events: none;
  opacity: 0;
  transition: opacity 0.45s ease;
  background: radial-gradient(
    380px circle at var(--mx) var(--my),
    rgba(0, 113, 227, 0.09),
    transparent 62%
  );
}

.glass-card:hover::after,
.project-card:hover::after {
  opacity: 1;
}

/* ============================================================
   9. ÍCONES (icon-pop · icon-rotate)
============================================================ */
.service-icon {
  transition: transform 0.5s var(--ease-spring), border-color 0.4s ease,
              background 0.4s ease, color 0.4s ease;
}

.service-card:hover .service-icon {
  transform: translateY(-4px) scale(1.06);
  background: var(--blue-wash);
  border-color: var(--blue-light);
}

.card-features li .bullet,
.package-features li .bullet {
  display: inline-block;
  transition: transform 0.35s var(--ease-spring);
}

.glass-card:hover .card-features li .bullet,
.glass-card:hover .package-features li .bullet {
  transform: scale(1.25);
}

.footer-social a svg {
  transition: transform 0.4s var(--ease-spring);
}

.footer-social a:hover svg {
  transform: scale(1.15) rotate(-6deg);
}

/* ============================================================
   10. PORTFÓLIO (image-zoom · shine)
============================================================ */
.project-card-thumb {
  position: relative;
}

.project-card-thumb .thumb-bg {
  transform: scale(1.02);
  transition: transform 0.9s var(--ease-out), filter 0.9s var(--ease-out);
}

.project-card:hover .thumb-bg {
  transform: scale(1.09);
}

.project-card-thumb::after {
  content: '';
  position: absolute;
  inset: 0;
  background: linear-gradient(
    100deg,
    transparent 35%,
    rgba(255, 255, 255, 0.28) 50%,
    transparent 65%
  );
  transform: translateX(-110%);
  transition: transform 0.9s var(--ease-out);
}

.project-card:hover .project-card-thumb::after {
  transform: translateX(110%);
}

/* ============================================================
   11. LINHA DO PROCESSO (progress-fill)
   O traço entre as etapas se preenche conforme o scroll.
============================================================ */
.process-steps::before {
  background: var(--border) !important;
}

.process-line-fill {
  position: absolute;
  top: 50px;
  left: 10%;
  height: 2px;
  width: 0;
  max-width: 80%;
  background: linear-gradient(90deg, var(--blue-light), var(--blue));
  transition: width 0.2s linear;
  z-index: 1;
}

.process-step .step-dot {
  transform: scale(0.6);
  opacity: 0.35;
  transition: transform 0.5s var(--ease-spring), opacity 0.5s ease,
              box-shadow 0.5s ease;
}

.process-step.is-live .step-dot {
  transform: scale(1);
  opacity: 1;
}

.process-step .step-number {
  transition: color 0.4s ease;
  color: var(--soft);
}

.process-step.is-live .step-number {
  color: var(--blue);
}

/* ============================================================
   12. STATS (counter · pulse)
============================================================ */
.stat-card .stat-number {
  font-variant-numeric: tabular-nums;
}

.stat-card::after {
  content: '';
  position: absolute;
  left: 50%;
  bottom: 0;
  width: 0;
  height: 2px;
  background: var(--blue);
  transform: translateX(-50%);
  transition: width 0.9s var(--ease-out);
}

.stat-card.is-in::after {
  width: 46px;
}

/* ============================================================
   13. MOCK DO GOOGLE (typing · text-glitch · flash)
============================================================ */
.google-search-mock {
  transition: transform 0.6s var(--ease-out), box-shadow 0.6s var(--ease-out);
}

.google-search-mock:hover {
  transform: translateY(-4px);
  box-shadow: 0 22px 44px rgba(0, 0, 0, 0.08);
}

.google-result {
  transition: transform 0.4s var(--ease-out), box-shadow 0.4s var(--ease-out);
}

.google-result:hover {
  transform: translateX(4px);
}

/* O resultado que não existe treme e falha, como sinal ruim */
.google-result.invisible-result {
  animation: anim-glitch 5.5s var(--ease-in-out) infinite;
}

@keyframes anim-glitch {
  0%, 88%, 100% { transform: translate(0, 0); opacity: 1; }
  90% { transform: translate(-2px, 1px); opacity: 0.7; }
  92% { transform: translate(3px, -1px); opacity: 1; }
  94% { transform: translate(-1px, 0); opacity: 0.85; }
  96% { transform: translate(0, 0); opacity: 1; }
}

/* Troca de nicho: some e volta */
.google-results.is-swapping {
  opacity: 0;
  transform: translateY(8px);
}

.google-results {
  transition: opacity 0.35s var(--ease-out), transform 0.35s var(--ease-out);
}

/* ============================================================
   14. ROTADOR DE PALAVRAS DO HERO (text-wave · typing)
============================================================ */
.rotator {
  display: inline-block;
  position: relative;
  color: var(--blue);
  white-space: nowrap;
}

.rotator__word {
  display: inline-block;
  animation: rotator-in 0.55s var(--ease-out);
}

.rotator__word.is-out {
  animation: rotator-out 0.4s var(--ease-out) forwards;
}

@keyframes rotator-in {
  from { opacity: 0; transform: translateY(0.55em) rotateX(-40deg); filter: blur(5px); }
  to   { opacity: 1; transform: translateY(0) rotateX(0); filter: blur(0); }
}

@keyframes rotator-out {
  from { opacity: 1; transform: translateY(0); filter: blur(0); }
  to   { opacity: 0; transform: translateY(-0.55em); filter: blur(5px); }
}

/* O underscore do wordmark NÃO pisca: no manual ele é fixo e sempre azul.
   O piscar de cursor fica restrito à intro de marca. */

/* ============================================================
   15. MARQUEE (loop) · pausa no hover
============================================================ */
.marquee-section:hover .marquee-track {
  animation-play-state: paused;
}

.marquee-track span {
  transition: opacity 0.4s ease, color 0.4s ease;
}

.marquee-section:hover .marquee-track span {
  opacity: 0.35;
}

.marquee-track span:hover {
  opacity: 1 !important;
  color: var(--blue);
}

/* ============================================================
   16. NAVBAR (blur-in ao entrar)
============================================================ */
.navbar {
  transform: translateY(-100%);
  animation: nav-drop 0.7s var(--ease-out) 0.25s forwards;
}

@keyframes nav-drop {
  to { transform: translateY(0); }
}

/* ============================================================
   17. WHATSAPP FLUTUANTE (float · pulse)
============================================================ */
.whatsapp-float {
  animation: anim-float 3.5s var(--ease-in-out) infinite;
}

.whatsapp-float::before {
  content: '';
  position: absolute;
  inset: 0;
  border-radius: 50%;
  border: 2px solid #25d366;
  animation: anim-ripple 2.6s var(--ease-out) infinite;
}

@keyframes anim-float {
  0%, 100% { transform: translateY(0); }
  50% { transform: translateY(-6px); }
}

@keyframes anim-ripple {
  0% { transform: scale(1); opacity: 0.6; }
  100% { transform: scale(1.65); opacity: 0; }
}

.whatsapp-float:hover {
  animation-play-state: paused;
}

/* ============================================================
   18. CARD EM DESTAQUE (border-move)
   Só o plano Pro ganha a borda viva. Um destaque, não vários.
============================================================ */
.package-card.featured {
  position: relative;
  /* .glass-card corta o conteúdo; a borda viva precisa escapar 2px */
  overflow: visible;
}

.package-card.featured::before {
  content: '';
  position: absolute;
  inset: -2px;
  border-radius: inherit;
  padding: 2px;
  background: conic-gradient(
    from var(--angle, 0deg),
    transparent 0%,
    var(--blue) 12%,
    var(--blue-light) 20%,
    transparent 34%,
    transparent 100%
  );
  -webkit-mask: linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0);
  -webkit-mask-composite: xor;
  mask: linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0);
  mask-composite: exclude;
  animation: anim-border-move 5s linear infinite;
  pointer-events: none;
}

@property --angle {
  syntax: '<angle>';
  initial-value: 0deg;
  inherits: false;
}

@keyframes anim-border-move {
  to { --angle: 360deg; }
}

/* ============================================================
   19. MODAL DO PORTFÓLIO (zoom-bounce)
============================================================ */
.mock-browser {
  transform: scale(0.94) translateY(12px);
}

.project-modal.active .mock-browser {
  transform: scale(1) translateY(0);
  transition: transform 0.55s var(--ease-spring);
}

/* ============================================================
   20. MOVIMENTO REDUZIDO
   Tudo volta ao estado final, sem animação.
============================================================ */
@media (prefers-reduced-motion: reduce) {
  .brand-intro { display: none; }

  .cursor-dot,
  .cursor-ring { display: none; }

  [data-anim],
  [data-anim].is-in {
    opacity: 1 !important;
    transform: none !important;
    filter: none !important;
  }

  .split-line > span { transform: none !important; }

  .eyebrow::after { width: 42px; }

  .navbar {
    transform: none;
    animation: none;
  }

  .process-step .step-dot {
    transform: none;
    opacity: 1;
  }

  .process-step .step-number { color: var(--blue); }

  .whatsapp-float,
  .whatsapp-float::before,
  .package-card.featured::before,
  .google-result.invisible-result,
  .brandrow .name .u {
    animation: none !important;
  }

  .whatsapp-float::before { display: none; }
}