/* DuoPro motion layer — inspirado nas movimentações do prompt "Aura".
   Camada isolada: remover este arquivo + motion.js desfaz tudo. */
:root { --ease-out: cubic-bezier(.22, 1, .36, 1); }

/* 1. Header: desce suave ao carregar, links em cascata */
@keyframes dp-nav-in { from { opacity: 0; transform: translateY(-12px); } to { opacity: 1; transform: none; } }
@keyframes dp-link-in { from { opacity: 0; transform: translateY(-8px); } to { opacity: 1; transform: none; } }
.site-header { animation: dp-nav-in .6s var(--ease-out) both; }
.main-nav a { animation: dp-link-in .6s var(--ease-out) both; }
.main-nav a:nth-child(1) { animation-delay: .10s; } .main-nav a:nth-child(2) { animation-delay: .15s; }
.main-nav a:nth-child(3) { animation-delay: .20s; } .main-nav a:nth-child(4) { animation-delay: .25s; }
.main-nav a:nth-child(5) { animation-delay: .30s; } .main-nav a:nth-child(6) { animation-delay: .35s; }
.main-nav a:nth-child(7) { animation-delay: .40s; } .main-nav a:nth-child(8) { animation-delay: .45s; }

/* 2. Barra de progresso de rolagem (dourada) */
.dp-progress { position: fixed; top: 0; left: 0; height: 3px; width: 100%; z-index: 9999;
  background: linear-gradient(90deg, var(--gold), var(--gold-light)); transform-origin: 0 50%;
  transform: scaleX(0); pointer-events: none; }

/* 3. Título do hero com brilho que corre (shiny) */
@keyframes dp-shiny { 0% { background-position: -200% center; } 100% { background-position: 200% center; } }
.hero h1 {
  background-image: linear-gradient(100deg, #fff 0%, #fff 35%, var(--gold-light) 50%, #fff 65%, #fff 100%);
  background-size: 200% auto;
  -webkit-background-clip: text; background-clip: text;
  color: transparent; -webkit-text-fill-color: transparent;
  animation: dp-shiny 7s linear infinite;
}

/* 4. Hero: entrada mais cinematográfica (easing da Aura). O fundo já tem Ken Burns no style.css */
.hero [data-aos] { transition-timing-function: var(--ease-out) !important; }


/* 4b. Foto do escritório com movimento bem visível */
@keyframes dp-office-pan {
  0%   { transform: scale(1.04) translate3d(0, 0, 0); }
  50%  { transform: scale(1.16) translate3d(-2.5%, -1.5%, 0); }
  100% { transform: scale(1.26) translate3d(2%, -3%, 0); }
}
.hero-bg img { animation: dp-office-pan 14s ease-in-out infinite alternate !important; will-change: transform; }

/* feixe de luz que atravessa a foto */
@keyframes dp-light-sweep { 0% { transform: translateX(-70%) skewX(-18deg); opacity: 0; } 15% { opacity: 1; } 60% { opacity: 1; } 100% { transform: translateX(170%) skewX(-18deg); opacity: 0; } }
.hero-bg::before { content: ""; position: absolute; top: -10%; bottom: -10%; left: 0; width: 38%; z-index: 1; pointer-events: none;
  background: linear-gradient(90deg, transparent, rgba(255,235,190,.22), transparent);
  mix-blend-mode: screen; animation: dp-light-sweep 9s ease-in-out infinite; }

/* partículas douradas flutuando */
@keyframes dp-float { 0% { transform: translate3d(0, 0, 0); opacity: 0; } 15% { opacity: .9; } 85% { opacity: .6; } 100% { transform: translate3d(var(--dx, 30px), -110vh, 0); opacity: 0; } }
.dp-particles { position: absolute; inset: 0; z-index: 1; pointer-events: none; overflow: hidden; }
.dp-particles i { position: absolute; bottom: -12px; border-radius: 50%; background: radial-gradient(circle, rgba(227,200,120,.95), rgba(201,164,76,0)); animation: dp-float linear infinite; }

.hero-bg { will-change: transform; }

/* 5. Vidro líquido nos selos do hero */
.hero .badges .badge {
  padding: 8px 16px; border-radius: 999px; background: rgba(255,255,255,.04);
  backdrop-filter: blur(4px); -webkit-backdrop-filter: blur(4px);
  box-shadow: inset 0 1px 1px rgba(255,255,255,.12);
  transition: transform .4s var(--ease-out), background .3s ease;
}
.hero .badges .badge:hover { transform: translateY(-3px); background: rgba(255,255,255,.09); }

/* 6. Cards: sobem mais, com brilho dourado que segue o mouse */
.card { position: relative; overflow: hidden; transition: transform .6s var(--ease-out), box-shadow .6s var(--ease-out), border-color .4s ease; }
.card:hover { transform: translateY(-10px) scale(1.01); border-color: rgba(201,164,76,.6); }
.card::before { content: ""; position: absolute; inset: 0; pointer-events: none; opacity: 0; transition: opacity .4s ease;
  background: radial-gradient(260px circle at var(--mx, 50%) var(--my, 0%), rgba(201,164,76,.16), transparent 70%); }
.card:hover::before { opacity: 1; }

/* 7. Botões: escala no hover, afunda no clique */
.btn { transition: transform .3s var(--ease-out), box-shadow .3s var(--ease-out), background .2s ease; }
.btn:hover { transform: translateY(-2px) scale(1.03); box-shadow: 0 10px 26px rgba(11,37,69,.22); }
.btn:active { transform: scale(.97); box-shadow: none; }
.btn-gold:hover { box-shadow: 0 10px 28px rgba(201,164,76,.38); }

/* 8. Respeita quem prefere menos movimento */
@media (prefers-reduced-motion: reduce) {
  .site-header, .main-nav a, .hero-bg img, .hero-bg::before, .dp-particles i { animation: none !important; }
  .hero h1 { animation: none; background: none; color: #fff; -webkit-text-fill-color: #fff; }
  .card, .btn, .hero .badges .badge { transition: none !important; }
  .dp-progress { display: none; }
}