/* Ceremonies of the sheet (js/cerimonia.js): level up on the Evolução page and the character ready over the page turn.
   Every piece is decorative (aria-hidden), takes no clicks and moves only by transform/opacity (GSAP). */

.evolucao { position: relative; }

.cer-camada { position: absolute; inset: 0; z-index: 5; pointer-events: none; overflow: visible; }
.cer-camada > *, .cer-palco * { pointer-events: none; }

/* ---------- gold thread on the level track ---------- */
.cer-fio {
    position: absolute; height: 3px; border-radius: 2px; transform-origin: 0 50%;
    background: linear-gradient(90deg, var(--e-ouro-escuro, #6d4f17), var(--e-ouro, #d9b25a) 40%, var(--e-ouro-claro, #f3d98e) 85%, #fff4cf);
    box-shadow: 0 0 6px rgba(217, 178, 90, .55);
    will-change: transform, opacity;
}
.cer-brilho {
    position: absolute; width: 18px; height: 18px; border-radius: 50%;
    background: radial-gradient(circle, #fffaf0 0, var(--e-ouro-claro, #f3d98e) 30%, rgba(217, 178, 90, .45) 55%, transparent 72%);
    will-change: transform, opacity;
}
.cer-anel {
    position: absolute; width: 30px; height: 30px; border-radius: 50%;
    border: 2px solid var(--e-ouro, #d9b25a); box-shadow: 0 0 8px rgba(217, 178, 90, .5);
    opacity: 0; will-change: transform, opacity;
}

/* ---------- wax seal ---------- */
.cer-selo {
    position: absolute; transform-origin: 50% 55%;
    filter: drop-shadow(0 2px 2px rgba(40, 12, 4, .45)) drop-shadow(0 6px 10px rgba(40, 12, 4, .25));
    will-change: transform, opacity;
}
.cer-selo-svg { display: block; width: 100%; height: 100%; overflow: visible; }
.cer-selo-texto, .cer-selo-luz { font-size: 46px; }
.cer-selo-texto { fill: #5a0e0f; }
.cer-selo-luz { fill: rgba(255, 196, 176, .4); }
.cer-selo-svg.numero text { font-family: var(--serif); }
.cer-selo-svg.monograma text { font-family: var(--gotico); font-size: 54px; }
.cer-aura {
    position: absolute; border-radius: 50%; opacity: 0;
    box-shadow: 0 0 0 2px var(--e-ouro-tinta, #a47a22), 0 0 18px rgba(217, 178, 90, .55);
    will-change: transform, opacity;
}

/* ---------- impact: spotlight, rays, shockwave, shadow, gold dust, light on the wax ---------- */
.cer-foco {
    position: absolute; width: 1400px; height: 1400px; border-radius: 50%; opacity: 0;
    background: radial-gradient(circle, rgba(255, 244, 214, .35) 0, rgba(255, 244, 214, 0) 6%, rgba(46, 26, 8, 0) 12%, rgba(46, 26, 8, .22) 32%, rgba(46, 26, 8, .3) 60%, rgba(46, 26, 8, 0) 72%);
    will-change: opacity;
}
.cer-raios { position: absolute; opacity: 0; will-change: transform, opacity; }
.cer-raios svg { display: block; width: 100%; height: 100%; }
.cer-choque { position: absolute; border-radius: 50%; border: 2px solid rgba(58, 36, 20, .55); opacity: 0; will-change: transform, opacity; }
.cer-sombra { position: absolute; border-radius: 50%; background: radial-gradient(circle, rgba(40, 14, 4, .55) 0, rgba(40, 14, 4, .25) 45%, rgba(40, 14, 4, 0) 70%); opacity: 0; will-change: transform, opacity; }
.cer-po {
    position: absolute; width: 6px; height: 6px; border-radius: 50%; opacity: 0;
    background: radial-gradient(circle, #fff6d8 0, #e8c46a 45%, rgba(164, 122, 34, 0) 75%);
    will-change: transform, opacity;
}
.cer-lustro { position: absolute; inset: 8%; border-radius: 50%; overflow: hidden; }
.cer-lustro i {
    position: absolute; top: -20%; bottom: -20%; left: 35%; width: 30%; rotate: 22deg;
    background: linear-gradient(90deg, rgba(255, 236, 220, 0), rgba(255, 236, 220, .38), rgba(255, 236, 220, 0));
    will-change: transform;
}

/* ---------- title card: "nível N", the flourish and the gains ---------- */
.cer-titulo { position: absolute; display: flex; flex-direction: column; align-items: stretch; padding: 0 24px 4px 4px; will-change: transform, opacity; }
.cer-titulo-linha { display: flex; align-items: baseline; gap: 22px; }
.cer-titulo::before {
    content: ''; position: absolute; inset: -10px -36px -8px -24px; z-index: -1;
    background: radial-gradient(closest-side, var(--cer-halo, rgba(240, 228, 192, .7)), rgba(240, 228, 192, 0));
}
.cer-titulo-texto { font: 36px/1 var(--uncial); color: var(--tinta-vermelha, #b0261b); white-space: nowrap; text-shadow: 0 1px 0 rgba(255, 248, 228, .5); }
.cer-titulo-texto .cer-letra { transform-origin: 50% 80%; }
.cer-floreio { display: block; width: 100%; height: 14px; margin-top: 1px; overflow: visible; }
.cer-floreio path { vector-effect: non-scaling-stroke; fill: none; stroke: var(--e-ouro-tinta, #a47a22); stroke-width: 1.6; stroke-linecap: round; }

/* ---------- HP/MP gains in ink ---------- */
.cer-ganhos { position: relative; display: flex; gap: 18px; white-space: nowrap; }
.cer-ganho { position: relative; display: inline-block; font: 1.35em var(--serif); line-height: 1.1; font-variant-numeric: lining-nums; will-change: transform, opacity; }
.cer-ganho.hp { color: var(--tinta-vermelha, #b0261b); }
.cer-ganho.mp { color: var(--e-tinta-azul, #23407a); }
.cer-letra { display: inline-block; transform-origin: 50% 0; }
.cer-gota {
    position: absolute; left: 30%; top: 92%; width: 5px; height: 9px; transform-origin: 50% 0;
    border-radius: 50% 50% 50% 50% / 30% 30% 70% 70%; background: currentColor; opacity: 0;
}
.cer-ganho.mp .cer-gota { left: 34%; }
.cer-legenda {
    position: absolute; white-space: nowrap;
    font: italic 15px/1.35 var(--serif); color: var(--e-tinta-suave, #5c4629);
}

/* ---------- quill on the history line ---------- */
.cer-pena { position: absolute; width: 40px; height: 40px; translate: 0 2px; will-change: transform, opacity; }
.cer-pena svg { display: block; width: 100%; height: 100%; overflow: visible; }
.cer-pena-vane { fill: #f3e7c6; stroke: var(--tinta, #3a2414); stroke-width: 1.2; stroke-linejoin: round; }
.cer-pena-haste { fill: none; stroke: var(--tinta, #3a2414); stroke-width: 1.4; stroke-linecap: round; }
.cer-pena-ponta { fill: var(--tinta, #3a2414); }
.cer-traco { position: absolute; height: 1.5px; transform-origin: 0 50%; background: var(--tinta-vermelha, #b0261b); opacity: 0; will-change: transform, opacity; }

/* ---------- character ready (over the whole page) ---------- */
.cer-palco { position: fixed; inset: 0; z-index: 905; pointer-events: none; }
.cer-vinheta { position: absolute; inset: 0; opacity: 0; background: radial-gradient(ellipse 60% 55% at 50% 48%, rgba(30, 16, 4, .12), rgba(30, 16, 4, .55)); will-change: opacity; }
.cer-centro { position: absolute; left: 50%; top: 46%; translate: -50% -50%; display: flex; flex-direction: column; align-items: center; gap: 14px; }
.cer-selo-caixa { position: relative; width: 150px; height: 150px; }
.cer-selo-caixa .cer-raios { inset: -100%; }
.cer-selo.grande { position: relative; width: 150px; height: 150px; }
.cer-faixa {
    display: flex; flex-direction: column; align-items: center; gap: 2px; padding: 12px 48px 14px;
    background: linear-gradient(180deg, #f3e7c6, #e9dab3 60%, #dcc89a);
    border: 1px solid var(--e-papel-borda, #b99a64); border-radius: 2px;
    box-shadow: 0 2px 4px rgba(58, 34, 10, .22), 0 12px 28px rgba(58, 34, 10, .24);
    clip-path: polygon(0 0, 100% 0, calc(100% - 16px) 50%, 100% 100%, 0 100%, 16px 50%);
    color: var(--e-tinta, #3a2414); will-change: transform, opacity;
}
.cer-nome { font: 44px/1.05 var(--gotico); max-width: 70vw; text-align: center; text-wrap: balance; }
.cer-sub { font: italic 15px/1.3 var(--serif); color: var(--e-tinta-suave, #5c4629); }

/* dark (bathed) sheets: the ink turns to pale light */
[data-tom="escuro"] .cer-titulo { --cer-halo: rgba(28, 18, 12, .7); }
[data-tom="escuro"] .cer-ganho.mp { color: var(--e-tinta-azul-escuro, #9cc0ff); }
[data-tom="escuro"] .cer-legenda { color: var(--e-tinta-escuro, #ecdcb6); }
[data-tom="escuro"] .cer-pena-vane { fill: #ecdcb6; stroke: #1c120a; }

/* screen readers only */
.cer-aviso { position: absolute; width: 1px; height: 1px; margin: -1px; overflow: hidden; clip-path: inset(50%); white-space: nowrap; }

@media (prefers-reduced-motion: reduce) {
    .cer-fio, .cer-brilho, .cer-anel, .cer-aura, .cer-foco, .cer-raios, .cer-choque, .cer-sombra, .cer-po { display: none; }
}