/* tokn.id | moeda 3D feita só de CSS 3D (sem three.js, sem imagem pesada). Duas faces em SVG,
   a borda serrilhada é uma pilha de fatias finas, e o brilho acompanha o giro (js/moeda.js).
   O tamanho vem de --d na cena; o resto escala sozinho. */

/* === TOKENS DA MOEDA === */
:root {
  --m-fatia-a: #3a0a19;
  --m-fatia-b: #8b1434;
}

/* === CENA === */
/* o tamanho vem de --d, definido na própria cena ou num ancestral (as órbitas usam o mesmo) */
.moeda-cena {
  --e: calc(var(--d, 320px) * .03);   /* metade da espessura */
  display: block;                      /* vale também quando a cena é um <span> dentro de botão */
  position: relative; width: var(--d, 320px); height: var(--d, 320px); perspective: 1500px;
  touch-action: pan-y;               /* o dedo na horizontal gira, na vertical rola a página */
  -webkit-tap-highlight-color: transparent; user-select: none; -webkit-user-select: none; outline-offset: 10px;
}
.moeda-cena[data-arrasta] { cursor: grab; }
.moeda-cena.arrastando { cursor: grabbing; }
.moeda-brilho {
  position: absolute; inset: -38%; border-radius: 50%; pointer-events: none;
  background: radial-gradient(closest-side, var(--pink-glow), rgba(255, 0, 84, .07) 56%, transparent 74%);
}
.moeda { position: absolute; inset: 0; transform-style: preserve-3d; transform: rotateX(8deg) rotateY(-18deg); will-change: transform; }

/* === FACES E BORDA === */
.m-face, .m-fatia { position: absolute; inset: 0; border-radius: 50%; }
.m-face { overflow: hidden; backface-visibility: hidden; -webkit-backface-visibility: hidden; }
.m-frente { transform: translateZ(var(--e)); }
.m-verso { transform: rotateY(180deg) translateZ(var(--e)); }
.m-face svg { width: 100%; height: 100%; font-family: var(--fonte); }
/* a borda: cada fatia é um disco com listras radiais (o serrilhado), empilhadas de frente pra trás */
.m-fatia { transform: translateZ(var(--z)); background: repeating-conic-gradient(var(--m-fatia-a) 0 3deg, var(--m-fatia-b) 3deg 6deg); }
/* brilho que passeia e sombra que cresce quando a face vira de lado (--gl e --sombra vêm do js) */
.m-face::after {
  content: ''; position: absolute; inset: 0; border-radius: 50%; pointer-events: none;
  background:
    linear-gradient(115deg, transparent calc(var(--gl, 50%) - 16%), rgba(255, 255, 255, .17) var(--gl, 50%), transparent calc(var(--gl, 50%) + 16%)),
    linear-gradient(rgba(0, 0, 0, var(--sombra, 0)), rgba(0, 0, 0, var(--sombra, 0)));
}

/* sem script não há moeda: some a área dela e a dica, o texto do topo segue inteiro */
html:not(.js) .moeda-palco, html:not(.js) .moeda-dica { display: none; }

/* === ENTRADA (a moeda só existe com script, então pode nascer escondida) === */
.js .moeda-cena { opacity: 0; scale: .7; transition: opacity .9s ease, scale 1.4s var(--curva); }
.js .moeda-cena.pronta { opacity: 1; scale: 1; }

/* === DICA E ÓRBITAS (enfeite do hero A) === */
.moeda-palco { position: relative; display: grid; place-items: center; }
.moeda-dica {
  display: inline-flex; align-items: center; gap: 10px; margin-top: 34px; justify-self: center;
  font-size: 12.5px; font-weight: 700; letter-spacing: .14em; text-transform: uppercase; color: var(--ink-muted); white-space: nowrap;
  transition: opacity .6s ease;
}
.moeda-dica svg { width: 20px; height: 20px; }
.moeda-dica.some { opacity: 0; }
.orbita { position: absolute; left: 50%; top: 50%; border-radius: 50%; border: 1px solid rgba(255, 255, 255, .07); pointer-events: none; translate: -50% -50%; }
.orbita::after { content: ''; position: absolute; left: 50%; top: -3px; width: 6px; height: 6px; margin-left: -3px; border-radius: 50%; background: var(--pink); }
.orbita-1 { width: calc(var(--d, 320px) * 1.3); height: calc(var(--d, 320px) * 1.3); animation: orbitar 46s linear infinite; }
.orbita-2 { width: calc(var(--d, 320px) * 1.62); height: calc(var(--d, 320px) * 1.62); animation: orbitar 74s linear infinite reverse; }
.orbita-2::after { width: 4px; height: 4px; margin-left: -2px; top: -2px; background: var(--ink-dim); }
@keyframes orbitar { to { rotate: 360deg; } }