/*   CSS FILE HEADER #
 *
 *   File:         [circulo.css]
 *   Author(s):    ['Pedro H.F Matias']
 *   Date:         ['06.10.2026']
 *   Version:      ['0.2.0']
 *   Description:  ['Casting circle (js/circulo.js): dark veil, white-line layers of the drawing, their paint in the hemisphere colours, threads and the glow of the lit hemispheres.']
 */

.circulo-conjuracao { position: fixed; inset: 0; z-index: 950; display: grid; place-items: center; cursor: pointer; }
.circulo-conjuracao.cc-card { position: absolute; z-index: 40; border-radius: inherit; overflow: hidden; pointer-events: auto; }
/* no black box: a soft round shadow behind the circle, fading out to the page (blurred under it) */
.cc-veu {
    position: absolute; inset: 0; border-radius: inherit;
    background: radial-gradient(circle at center, rgba(6, 3, 14, .82) 0, rgba(6, 3, 14, .62) 30%, rgba(4, 2, 10, .3) 55%, rgba(0, 0, 0, .08) 80%, transparent);
    -webkit-backdrop-filter: blur(5px); backdrop-filter: blur(5px);
}
.cc-card .cc-veu {
    background: radial-gradient(circle at center, rgba(6, 3, 14, .8) 0, rgba(6, 3, 14, .55) 34%, rgba(6, 3, 14, .22) 56%, rgba(6, 3, 14, .08) 80%);
    -webkit-backdrop-filter: blur(3px) saturate(.7); backdrop-filter: blur(3px) saturate(.7);
}
[data-animacao="leve"] .cc-veu { -webkit-backdrop-filter: none; backdrop-filter: none; }

/* the wheel: square of side --lado; --varre traces it around while it appears */
.cc-roda {
    position: relative; width: var(--lado, 600px); height: var(--lado, 600px); will-change: transform, opacity;
    -webkit-mask-image: conic-gradient(from 0deg, #000 var(--varre), transparent calc(var(--varre) + 20deg));
    mask-image: conic-gradient(from 0deg, #000 var(--varre), transparent calc(var(--varre) + 20deg));
}
.cc-roda > img, .cc-meio, .cc-meio > img, .cc-nucleo, .cc-nucleo > img { position: absolute; inset: 0; width: 100%; height: 100%; }
.cc-roda img { display: block; user-select: none; pointer-events: none; }
/* the glow is baked into the images (ferramentas/gerarCirculo.py): no CSS filters on these big layers */
.cc-anel, .cc-meio > img, .cc-nucleo > img { opacity: .25; }
/* paint of the lines in the colours of the spell: canvases stencilled by the drawing (js/circulo.js, pintar) */
.cc-tinta-roda, .cc-corrida, .cc-tinta, .cc-eco { position: absolute; inset: 0; width: 100%; height: 100%; pointer-events: none; }
/* the comet: a bright head with a fading tail, turned by --corre (a gradient mask works on file://, an image mask does not) */
.cc-corrida {
    -webkit-mask-image: conic-gradient(from var(--corre, 0deg), transparent 0deg, #000 50deg, transparent 51deg);
    mask-image: conic-gradient(from var(--corre, 0deg), transparent 0deg, #000 50deg, transparent 51deg);
}
/* hidden (not only transparent) until used: masks under the tracing mask of the wheel are heavy to paint */
.cc-tinta-roda, .cc-corrida, .cc-eco { opacity: 0; visibility: hidden; }
.cc-tinta { opacity: .85; }

/* threads of light between the lit hemispheres (drawn with stroke-dashoffset, pathLength = 1) */
.cc-fios { position: absolute; inset: 0; width: 100%; height: 100%; overflow: visible; pointer-events: none; }
.cc-fio { fill: none; stroke-width: .55; stroke-linecap: round; stroke-dasharray: 1; stroke-dashoffset: 1; }
.cc-fio.largo { stroke-width: 2.4; opacity: .32; }
.cc-card .cc-fio { stroke-width: .8; }
.cc-card .cc-fio.largo { stroke-width: 3; }

/* one hemisphere slot, centred on its place of the drawing */
.cc-hemi { position: absolute; aspect-ratio: 1; translate: -50% -50%; opacity: 0; visibility: hidden; }
.cc-corpo, .cc-hemi img { position: absolute; inset: 0; width: 100%; height: 100%; }
.cc-corpo { display: block; }
.cc-luz { position: absolute; inset: -18%; border-radius: 50%; opacity: 0; mix-blend-mode: screen; }
/* the corporeal light is a dark core: it beats in shadow, not in light */
.cc-hemi[data-hemi="corporeo"] .cc-luz { mix-blend-mode: normal; }

/* light of the whole circle while it locks, and the final flash */
.cc-halo { position: absolute; inset: -6%; border-radius: 50%; opacity: 0; background: radial-gradient(circle, rgba(var(--cor, 200, 180, 255), .26), rgba(var(--cor, 150, 110, 255), .12) 45%, transparent 68%); }
.cc-clarao { position: absolute; inset: 10%; border-radius: 50%; opacity: 0; background: radial-gradient(circle, #fff, rgba(var(--cor, 235, 225, 255), .85) 25%, rgba(var(--cor, 170, 140, 255), .35) 50%, transparent 70%); mix-blend-mode: screen; }