/* Lucrai v2 · materiais compartilhados (página de vendas + app).
 * Inspirados em Cult UI (MIT): texture-card (bordas em camadas), cosmic-button (borda cônica girando),
 * glow-button (luz que segue o mouse), texture-overlay (grão), edge-blur (desfoque em camadas).
 * Recriados em CSS puro. Só tokens de tokens.css.
 */

/* ---------- grão (ruído SVG) ---------- */
.grain-layer { position: fixed; inset: -50%; z-index: 9990; pointer-events: none; background-image: var(--grain); background-size: 180px 180px; opacity: .045; mix-blend-mode: overlay; }
.grain-local { position: relative; isolation: isolate; }
.grain-local::after { content: ""; position: absolute; inset: 0; border-radius: inherit; background-image: var(--grain); background-size: 160px 160px; opacity: .05; mix-blend-mode: overlay; pointer-events: none; z-index: 0; }

/* ---------- borda 1px em gradiente (máscara) ---------- */
.gb { position: relative; }
.gb::before {
  content: ""; position: absolute; inset: 0; border-radius: inherit; padding: 1px; pointer-events: none; z-index: 1;
  background: var(--gb, var(--border-gradient));
  -webkit-mask: linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0);
  -webkit-mask-composite: xor; mask-composite: exclude;
}
.gb-reward { --gb: var(--border-gradient-reward); }

/* borda cônica girando (cosmic) */
@property --ang { syntax: "<angle>"; inherits: false; initial-value: 0deg; }
.gb-spin::before {
  background: conic-gradient(from var(--ang), transparent 0deg, var(--brand-blue-hi) 60deg, transparent 120deg, transparent 180deg, var(--reward) 240deg, transparent 300deg), var(--border-gradient);
  padding: 1.5px;
  animation: ang-spin 5.5s linear infinite;
}
.gb-spin-hover::before { transition: opacity var(--dur-slow) var(--ease-out); }
@media (hover: hover) {
  .gb-spin-hover:hover::before {
    background: conic-gradient(from var(--ang), transparent 0deg, var(--brand-blue-hi) 70deg, transparent 140deg, transparent 180deg, var(--reward) 250deg, transparent 320deg), var(--border-gradient);
    animation: ang-spin 3.2s linear infinite;
  }
}
@keyframes ang-spin { to { --ang: 360deg; } }

/* ---------- spotlight que segue o ponteiro ---------- */
.spot { --mx: 50%; --my: -20%; overflow: hidden; }
.spot > .spot-light {
  position: absolute; inset: 0; border-radius: inherit; pointer-events: none; z-index: 0;
  background: radial-gradient(420px circle at var(--mx) var(--my), var(--spot-blue), transparent 60%);
  opacity: 0; transition: opacity var(--dur-slow) var(--ease-out);
}
.spot.spot-gold > .spot-light { background: radial-gradient(420px circle at var(--mx) var(--my), var(--spot-gold), transparent 60%); }
.spot.is-lit > .spot-light { opacity: 1; }
.spot > *:not(.spot-light) { position: relative; z-index: 1; }

/* ---------- vidro de verdade ---------- */
.glass { background: var(--nav-solid); }
@supports ((-webkit-backdrop-filter: blur(1px)) or (backdrop-filter: blur(1px))) {
  .glass { background: var(--glass); -webkit-backdrop-filter: blur(18px) saturate(140%); backdrop-filter: blur(18px) saturate(140%); }
  .glass-strong { background: var(--glass-strong); }
}

/* ---------- brilho que corre no botão (sheen) ---------- */
.btn-primary, .btn-sheen { overflow: hidden; isolation: isolate; }
.btn-primary > .btn-sheen-bar, .btn-sheen > .btn-sheen-bar {
  position: absolute; inset: 0; z-index: -1; pointer-events: none;
  background: linear-gradient(110deg, transparent 35%, rgba(255,255,255,.28) 50%, transparent 65%);
  transform: translateX(-120%);
}
@media (hover: hover) {
  .btn-primary:hover > .btn-sheen-bar, .btn-sheen:hover > .btn-sheen-bar { transform: translateX(120%); transition: transform 900ms var(--ease-in-out); }
}
.btn-primary { background-image: linear-gradient(180deg, rgba(255,255,255,.14), transparent 55%); box-shadow: inset 0 1px 0 rgba(255,255,255,.22), inset 0 -1px 0 rgba(0,0,0,.25); }

/* ---------- chip de ícone com brilho ---------- */
.ichip {
  position: relative; display: grid; place-items: center; flex: none;
  width: 44px; height: 44px; border-radius: 14px;
  color: var(--brand-blue-hi);
  background: linear-gradient(180deg, rgba(41,121,255,.20), rgba(41,121,255,.06));
  box-shadow: inset 0 0 0 1px rgba(97,160,255,.28), 0 8px 24px -10px rgba(41,121,255,.55);
}
.ichip.gold { color: var(--reward); background: linear-gradient(180deg, rgba(255,194,26,.18), rgba(255,194,26,.05)); box-shadow: inset 0 0 0 1px rgba(255,213,92,.3), 0 8px 24px -10px rgba(255,194,26,.45); }

/* ---------- skeleton com shimmer ---------- */
.skel { position: relative; overflow: hidden; background: var(--card-hi); border-radius: 10px; }
.skel::after { content: ""; position: absolute; inset: 0; background: linear-gradient(100deg, transparent 20%, rgba(255,255,255,.07) 50%, transparent 80%); transform: translateX(-100%); animation: shimmer 1.4s var(--ease-in-out) infinite; }
@keyframes shimmer { to { transform: translateX(100%); } }

/* ---------- texto em gradiente (só número herói e 1 palavra) ---------- */
.tgrad { background: var(--text-gradient); -webkit-background-clip: text; background-clip: text; color: transparent; }
.tgrad-blue { background: var(--text-gradient-blue); -webkit-background-clip: text; background-clip: text; color: transparent; }

/* ---------- palavra por palavra (receita c) ---------- */
.pal { display: inline-block; overflow: hidden; vertical-align: top; padding-bottom: .12em; margin-bottom: -.12em; }
.pal > i { display: inline-block; font-style: normal; transform: translateY(108%); }
.dentro .pal > i, .pal.dentro > i { transform: none; transition: transform 1.05s var(--ease-out); transition-delay: calc(var(--p, 0) * 55ms); }

/* revelar (receita b) */
.revelar { opacity: 0; transform: translateY(2rem); }
.revelar.dentro { opacity: 1; transform: none; transition: opacity .9s var(--ease-out), transform 1.05s var(--ease-out); transition-delay: var(--atraso, 0s); }

/* máscara que sobe (reveal por máscara) */
.mascara { display: block; overflow: hidden; }
.mascara > span { display: block; transform: translateY(105%); }
.dentro .mascara > span, .mascara.dentro > span { transform: none; transition: transform 1s var(--ease-out); transition-delay: var(--atraso, 0s); }

@media (prefers-reduced-motion: reduce) {
  .gb-spin::before, .gb-spin-hover:hover::before { animation: none; }
  .skel::after { animation: none; }
  .pal > i, .revelar, .mascara > span { transform: none !important; opacity: 1 !important; transition: opacity 150ms linear !important; }
  .btn-primary > .btn-sheen-bar { display: none; }
}