/* Camada de interatividade: brilho que segue o cursor, aura global, ripple e easing fluido.
   Tudo aqui é progressivo: sem JavaScript ou com "reduzir movimento", o site fica como antes. */
:root {
  --ease-fluid: cubic-bezier(.22, 1, .36, 1);
  --glow: 157 92 255;
  --glow-fill: .15;
  --glow-edge: .9;
  --glow-size: 300px;
}
html[data-motion=on] { scroll-behavior: smooth; }

/* Transições mais longas e suaves nos elementos que respondem ao usuário */
html[data-motion=on] :is(.partner, .category, .hero-link, .light-button, .text-button, .primary, .secondary, .profile-button span, .search, .select-wrap, .hero-partner, .edit-button, .status-tabs button, .stats > div) {
  transition-timing-function: var(--ease-fluid);
  transition-duration: .45s;
}
html[data-motion=on] .partner:hover { translate: 0 -4px; box-shadow: 0 22px 50px -18px #5b2a9a40; }
html[data-motion=on] .search:focus-within { box-shadow: 0 0 0 4px #a36bff26, 0 12px 34px -14px #7c3fd060; }

/* Brilho que acompanha o ponteiro: preenchimento suave + borda luminosa */
.glow-layer {
  position: absolute; inset: 0; z-index: 0; border-radius: inherit;
  pointer-events: none; opacity: 0;
  transition: opacity .5s var(--ease-fluid);
}
.glow-on > .glow-layer { opacity: 1; }
.glow-layer::before, .glow-layer::after { content: ''; position: absolute; inset: 0; border-radius: inherit; }
.glow-layer::before {
  background: radial-gradient(var(--glow-size) circle at var(--gx, 50%) var(--gy, 50%), rgb(var(--glow) / var(--glow-fill)), transparent 70%);
}
.glow-layer::after {
  padding: 1.5px;
  background: radial-gradient(calc(var(--glow-size) * .75) circle at var(--gx, 50%) var(--gy, 50%), rgb(var(--glow) / var(--glow-edge)), transparent 70%);
  -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;
}
/* Superfícies coloridas/escuras recebem brilho claro */
:is(.hero-link, .primary, .supplier-cta, .light-button) { --glow: 255 246 255; --glow-fill: .3; --glow-size: 180px; }
:is(.supplier-banner, .program-banner) { --glow: 205 160 255; --glow-fill: .2; --glow-size: 520px; }
:is(.category, .profile-button, .edit-button, .status-tabs button, .secondary) { --glow-size: 160px; --glow-fill: .2; }
:is(.filter-panel, .join-card, .list-panel, .auth-box) { --glow-size: 520px; --glow-fill: .08; --glow-edge: .7; }
.hero-partner { --glow-size: 240px; --glow-fill: .22; }
/* O brilho novo substitui o reflexo antigo dos cartões */
.partner::after, .supplier-banner::before { display: none; }

/* Aura que segue o cursor por todo o site */
.cursor-aura {
  position: fixed; left: 0; top: 0; z-index: 30;
  width: 520px; height: 520px; margin: -260px 0 0 -260px; border-radius: 50%;
  pointer-events: none; opacity: 0; will-change: transform;
  background: radial-gradient(circle, rgb(170 105 255 / .11), rgb(120 110 255 / .04) 42%, transparent 68%);
  transition: opacity .6s var(--ease-fluid);
}
.cursor-aura.visible { opacity: 1; }
.cursor-aura.on-dark {
  mix-blend-mode: screen;
  background: radial-gradient(circle, rgb(205 145 255 / .34), rgb(125 130 255 / .12) 42%, transparent 68%);
}

/* Onda de clique */
.ripple-host { overflow: hidden; }
.ripple {
  position: absolute; z-index: 0; border-radius: 50%; pointer-events: none;
  width: 16px; height: 16px; margin: -8px 0 0 -8px;
  background: radial-gradient(circle, rgb(var(--glow) / .55), rgb(var(--glow) / 0) 70%);
}

/* Hero: brilho do fundo mais intenso quando o ponteiro está sobre ele */
html[data-motion=on] .hero.pointer-lit .hero-glow {
  background: radial-gradient(ellipse, #d692ffc0, #9a55ff66 38%, transparent 68%);
}
.hero-partner { transform-style: preserve-3d; }

@media (prefers-reduced-motion: reduce), (hover: none) {
  .cursor-aura { display: none; }
}
@media (prefers-reduced-motion: reduce) {
  .glow-layer, .ripple { display: none; }
}
.partner { --glow-fill: .2; }

/* ---- Profundidade, resposta ao cursor e luz com vida própria ---- */

/* Perspectiva real: sem ela o rotateX/rotateY dos destaques so achata o cartao */
html[data-motion=on] #hero-partners { perspective: 1100px; perspective-origin: 50% 40%; }

/* As camadas internas do cartao se descolam em profundidade sob o cursor */
html[data-motion=on] .hero-partner > * { transition: transform .45s cubic-bezier(.22,.68,.32,1); }
html[data-motion=on] .hero-partner:hover > :first-child { transform: translateZ(54px); }
html[data-motion=on] .hero-partner:hover .hero-mark { transform: translateZ(34px) scale(1.06); }
html[data-motion=on] .hero-partner:hover > span:not([class]) { transform: translateZ(20px); }
html[data-motion=on] .hero-partner:hover .hero-arrow { transform: translateZ(48px) translate(3px, -3px); }

/* Os outros destaques recuam enquanto um esta sob o cursor */
html[data-motion=on] #hero-partners.lit .hero-partner { transition: opacity .4s ease, filter .4s ease; }
html[data-motion=on] #hero-partners.lit .hero-partner:not(:hover) { opacity: .62; filter: saturate(.72); }

/* Luz de fundo do topo respira sozinha. Usa translate/scale porque
   uma regra anterior trava transform com !important. */
@keyframes heroBreathe {
  0%   { translate: -2% -1%; scale: 1;    opacity: .72; }
  50%  { translate: 4% 2%;   scale: 1.12; opacity: .96; }
  100% { translate: -2% -1%; scale: 1;    opacity: .72; }
}
html[data-motion=on] .hero-glow { animation: heroBreathe 19s ease-in-out infinite; will-change: translate, scale, opacity; }
html[data-motion=on] .hero.pointer-lit .hero-glow { animation-duration: 11s; }

/* Cartoes do catalogo passam a brilhar na cor da propria marca */
html[data-motion=on] .partner { transition: box-shadow .35s ease, translate .35s cubic-bezier(.22,.68,.32,1), border-color .35s ease; }
html[data-motion=on] .partner:hover {
  translate: 0 -6px;
  border-color: color-mix(in srgb, var(--logo, #7545a0) 45%, #e9e6ed);
  box-shadow: 0 26px 60px -22px color-mix(in srgb, var(--logo, #7545a0) 55%, transparent), 0 2px 8px #0b012a10;
}
html[data-motion=on] .partner:hover .partner-logo,
html[data-motion=on] .partner:hover .wordmark img { transition: transform .45s cubic-bezier(.22,.68,.32,1); transform: scale(1.06); }

@media (prefers-reduced-motion: reduce), (hover: none) {
  html .hero-glow { animation: none; }
  html .hero-partner > *, html .partner { transition: none; }
}