/*   CSS FILE HEADER #
 *
 *   File:         [fx-ambientes2.css]
 *   Author(s):    ['Pedro H.F Matias']
 *   Date:         ['06.10.2026']
 *   Version:      ['0.5.0']
 *   Description:  ['DOM overlays of the cast animations in js/fx/ambientes2.js. Motion lives in GSAP; here only looks. [data-tom="claro"] = light papyrus (ink colors, no glow).']
 */

/* ---------- Direcionar ---------- */
.a2-direcao .fx-svg { filter: drop-shadow(0 0 6px rgba(95, 235, 205, .8)); }
.a2-direcao path { fill: none; stroke-linecap: round; stroke-linejoin: round; }
.a2-direcao .aura { stroke: rgba(90, 230, 200, .45); stroke-width: 16; }
.a2-direcao .trilha { stroke-width: 3.5; }
.a2-direcao .cometa { stroke: #f4fffc; stroke-width: 6; }
.a2-direcao .seta path { stroke: #bffcf0; stroke-width: 6; }
.a2-direcao .seta .miolo { stroke: #fff; stroke-width: 2.2; }
[data-tom="claro"] .a2-direcao .fx-svg { filter: drop-shadow(0 1px 1px rgba(40, 20, 5, .35)); }
[data-tom="claro"] .a2-direcao .aura { stroke: rgba(20, 120, 100, .18); }
[data-tom="claro"] .a2-direcao .trilha { stroke: #137a68; }
[data-tom="claro"] .a2-direcao .cometa { stroke: #0b5a4c; }
[data-tom="claro"] .a2-direcao .seta path { stroke: #0f5e52; }
[data-tom="claro"] .a2-direcao .seta .miolo { stroke: #7fe0cc; }

/* ---------- Transportar I ---------- */
.a2-transporte .caixote { filter: drop-shadow(0 4px 6px rgba(0, 0, 0, .45)) drop-shadow(0 0 10px rgba(150, 230, 255, .55)); }
.a2-transporte .scan { border-radius: 4px; background: linear-gradient(90deg, transparent, #bff0ff 20%, #fff 50%, #bff0ff 80%, transparent); box-shadow: 0 0 12px 4px rgba(150, 230, 255, .8); margin-top: -2px; }
[data-tom="claro"] .a2-transporte .caixote { filter: drop-shadow(0 3px 4px rgba(60, 35, 10, .45)); }
[data-tom="claro"] .a2-transporte .scan { background: linear-gradient(90deg, transparent, #2a7fa0 20%, #134e66 50%, #2a7fa0 80%, transparent); box-shadow: 0 0 6px rgba(20, 80, 110, .5); }

/* ---------- Transportar II: runic circle on the floor (fixed to the viewport, outside the card) ---------- */
.a2-solo { position: fixed; pointer-events: none; z-index: 899; }
.a2-solo > svg { display: block; width: 100%; height: 100%; overflow: visible; }
.a2-runico svg { filter: drop-shadow(0 0 3px rgba(255, 200, 110, .9)) drop-shadow(0 0 10px rgba(255, 170, 70, .5)); }
.a2-runico path, .a2-runico ellipse { fill: none; stroke: #ffd79a; stroke-width: 1.4; stroke-linecap: round; stroke-linejoin: round; transition: stroke .3s, stroke-width .3s; }
.a2-runico .forte { stroke-width: 2.4; }
.a2-runico .fino, .a2-runico .tiques { stroke-width: 1; opacity: .8; }
.a2-runico .marca { stroke-width: 1.6; }
.a2-runico.aceso path, .a2-runico.aceso ellipse { stroke: #fff4dc; }
.a2-runico.aceso .forte { stroke-width: 3; }
[data-tom="claro"] .a2-runico svg { filter: drop-shadow(0 1px 1px rgba(60, 35, 10, .35)); }
[data-tom="claro"] .a2-runico path, [data-tom="claro"] .a2-runico ellipse { stroke: #7a4a12; }
[data-tom="claro"] .a2-runico.aceso path, [data-tom="claro"] .a2-runico.aceso ellipse { stroke: #a8600a; }

/* ---------- Projetar: astral body and silver cord ---------- */
.a2-astral .fx-copia { opacity: 0; transform-origin: 50% 50%; mix-blend-mode: screen; filter: sepia(1) hue-rotate(170deg) saturate(2.4) brightness(1.25) drop-shadow(0 0 14px rgba(140, 200, 255, .9)); }
[data-tom="claro"] .a2-astral .fx-copia { mix-blend-mode: multiply; filter: sepia(1) hue-rotate(175deg) saturate(2.2) brightness(.95) drop-shadow(0 0 6px rgba(30, 70, 140, .5)); }
.a2-cordao { z-index: 1; }
.a2-cordao .fx-svg { filter: drop-shadow(0 0 5px rgba(170, 215, 255, .95)); }
.a2-cordao path { fill: none; stroke-linecap: round; }
.a2-cordao .aura { stroke: rgba(190, 225, 255, .45); stroke-width: 5; }
.a2-cordao .fio { stroke: #fff; stroke-width: 1.6; stroke-dasharray: 6 4; }
[data-tom="claro"] .a2-cordao .fx-svg { filter: none; }
[data-tom="claro"] .a2-cordao .aura { stroke: rgba(40, 80, 140, .25); }
[data-tom="claro"] .a2-cordao .fio { stroke: #2b4f86; }

/* ---------- Ativar: magic circle ---------- */
.a2-selo .fx-svg { filter: drop-shadow(0 0 4px rgba(150, 205, 255, .95)) drop-shadow(0 0 12px rgba(110, 170, 255, .6)); }
.a2-selo .aro, .a2-selo .petalas path, .a2-selo .marca, .a2-selo .tiques path { fill: none; stroke: #bfe2ff; stroke-linecap: round; }
.a2-selo .aro { stroke-width: 1.4; }
.a2-selo .aro.forte { stroke-width: 2.6; stroke: #e6f4ff; }
.a2-selo .aro.fino { stroke-width: 1; stroke-dasharray: 2 4; }
.a2-selo .tiques path { stroke-width: 1.2; }
.a2-selo .petalas path { stroke-width: 1.2; opacity: .85; }
.a2-selo .marca { stroke-width: 1.4; }
.a2-selo .marca .ponto { fill: #e6f4ff; stroke: none; }
.a2-selo.aceso .aro, .a2-selo.aceso .petalas path, .a2-selo.aceso .marca { stroke: #fff; }
.a2-selo.aceso .fx-svg { filter: drop-shadow(0 0 5px #fff) drop-shadow(0 0 16px rgba(130, 190, 255, .9)); transition: filter .2s; }
[data-tom="claro"] .a2-selo .fx-svg, [data-tom="claro"] .a2-selo.aceso .fx-svg { filter: drop-shadow(0 0 1px rgba(20, 40, 90, .4)); }
[data-tom="claro"] .a2-selo .aro, [data-tom="claro"] .a2-selo .petalas path, [data-tom="claro"] .a2-selo .marca, [data-tom="claro"] .a2-selo .tiques path { stroke: #1f3f7a; }
[data-tom="claro"] .a2-selo .aro.forte { stroke: #142c5c; }
[data-tom="claro"] .a2-selo .marca .ponto { fill: #142c5c; }

/* ---------- Imagem: illusory painting ---------- */
.a2-imagem .pintura { filter: drop-shadow(0 6px 10px rgba(0, 0, 0, .5)) drop-shadow(0 0 14px rgba(255, 210, 140, .35)); }
[data-tom="claro"] .a2-imagem .pintura { filter: drop-shadow(0 4px 6px rgba(60, 35, 10, .45)); }

/* ---------- Encantar: heart ---------- */
.a2-encanto .coracao { filter: drop-shadow(0 0 10px rgba(255, 110, 160, .9)) drop-shadow(0 0 26px rgba(255, 80, 140, .55)); }
.a2-encanto .reflexo { fill: none; stroke: rgba(255, 255, 255, .85); stroke-width: 4; stroke-linecap: round; }
[data-tom="claro"] .a2-encanto .coracao { filter: drop-shadow(0 3px 4px rgba(90, 10, 30, .4)); }

/* ---------- Memórias: 3D carousel of oil paintings in carved gilt frames ---------- */
.a2-memorias .a2-sepia {
    position: absolute; inset: 0; border-radius: inherit; opacity: 0;
    background: radial-gradient(ellipse at 50% 50%, rgba(255, 215, 150, .18), rgba(120, 80, 30, .35) 100%);
    mix-blend-mode: soft-light;
}
.a2-carrossel { position: absolute; left: 50%; top: 50%; width: 0; height: 0; perspective: 640px; }
.a2-carrossel .roda { position: absolute; left: 0; top: 0; transform-style: preserve-3d; }
.a2-carrossel .quadro {
    position: absolute; left: -36px; top: -44px; width: 72px; height: 88px; box-sizing: border-box; padding: 8px; border-radius: 3px;
    background: linear-gradient(135deg, #ffe7a0 0%, #c18f2e 16%, #f7d77c 32%, #8a5c16 50%, #e8bf5e 68%, #7a4e10 84%, #f2d27a 100%);
    box-shadow: inset 0 0 0 1px #4a2e06, inset 0 0 0 2.5px #f6dd8c, inset 0 0 0 4px #7a5010, inset 0 0 0 6px #d9ae4f, inset 0 0 0 7.5px #3a2404,
        0 5px 12px rgba(0, 0, 0, .5), 0 0 14px rgba(255, 200, 120, .3);
    opacity: var(--frente, 1); filter: brightness(calc(.55 + var(--frente, 1) * .45));
}
.a2-carrossel .quadro.oval { border-radius: 50%; padding: 9px; }
.a2-carrossel .quadro svg { display: block; width: 100%; height: 100%; border-radius: 1px; }
.a2-carrossel .quadro.oval svg { border-radius: 50%; }
/* carved ornaments: rosettes on the corners and shells in the middle of each side */
.a2-carrossel .quadro::before {
    content: ''; position: absolute; inset: 0; border-radius: inherit; pointer-events: none;
    background:
        radial-gradient(circle at 5px 5px, #fff3c0 0 1.4px, #8a5c16 2px 3.2px, transparent 3.8px),
        radial-gradient(circle at calc(100% - 5px) 5px, #fff3c0 0 1.4px, #8a5c16 2px 3.2px, transparent 3.8px),
        radial-gradient(circle at 5px calc(100% - 5px), #fff3c0 0 1.4px, #8a5c16 2px 3.2px, transparent 3.8px),
        radial-gradient(circle at calc(100% - 5px) calc(100% - 5px), #fff3c0 0 1.4px, #8a5c16 2px 3.2px, transparent 3.8px),
        radial-gradient(ellipse 7px 4px at 50% 4px, #fff3c0 0 30%, #7a4e10 55%, transparent 70%),
        radial-gradient(ellipse 7px 4px at 50% calc(100% - 4px), #fff3c0 0 30%, #7a4e10 55%, transparent 70%),
        radial-gradient(ellipse 4px 7px at 4px 50%, #fff3c0 0 30%, #7a4e10 55%, transparent 70%),
        radial-gradient(ellipse 4px 7px at calc(100% - 4px) 50%, #fff3c0 0 30%, #7a4e10 55%, transparent 70%);
}
.a2-carrossel .quadro.oval::before { background-size: 0 0, 0 0, 0 0, 0 0, auto, auto, auto, auto; }
/* the canvas sits deep inside the frame */
.a2-carrossel .quadro::after { content: ''; position: absolute; inset: 8px; border-radius: inherit; box-shadow: inset 0 0 5px 1px rgba(20, 10, 0, .75); }
.a2-carrossel .quadro.oval::after { inset: 9px; }
[data-tom="claro"] .a2-carrossel .quadro { box-shadow: inset 0 0 0 1px #4a2e06, inset 0 0 0 2.5px #f6dd8c, inset 0 0 0 4px #7a5010, inset 0 0 0 6px #d9ae4f, inset 0 0 0 7.5px #3a2404, 0 3px 7px rgba(60, 35, 10, .45); }

/* Memórias II: the memory wavers and is erased */
.a2-vacilo { overflow: hidden; z-index: 3; }
.a2-vacilo .faixa { position: absolute; left: -4%; width: 108%; top: 0; height: 6px; backdrop-filter: sepia(.9) blur(1.5px) brightness(.75); background: rgba(90, 60, 25, .12); }
.a2-duplo .fx-copia { mix-blend-mode: screen; opacity: .45; }
.a2-duplo.escuro .fx-copia { filter: sepia(1) saturate(1.6) brightness(.8); }
.a2-duplo.claro .fx-copia { filter: sepia(1) saturate(.6) brightness(1.2); }
[data-tom="claro"] .a2-duplo .fx-copia { mix-blend-mode: multiply; }
.a2-apagar { z-index: 3; }
.a2-apagar .vazio { position: absolute; inset: 0; border-radius: inherit; background: var(--painel, #241638); opacity: .92; }
.a2-apagar .barra { position: absolute; top: -6px; bottom: -6px; width: 6px; margin-left: -3px; border-radius: 3px; background: #fff6e0; box-shadow: 0 0 10px 3px rgba(255, 220, 160, .95), 0 0 30px 8px rgba(255, 170, 80, .55); }
[data-tom="claro"] .a2-apagar .barra { background: #5a3a14; box-shadow: 0 0 6px rgba(60, 35, 10, .6); }

/* ---------- Maquiagem ---------- */
.a2-maquiagem .blush { fill: none; stroke-width: 26; stroke-linecap: round; opacity: .7; mix-blend-mode: screen; }
.a2-maquiagem .blush.fino { stroke-width: 16; opacity: .6; }
.a2-maquiagem .luz { fill: none; stroke: #fff; stroke-width: 3; stroke-linecap: round; filter: drop-shadow(0 0 4px #ffd0e6); }
.a2-maquiagem .cabo { fill: #5a2d3a; stroke: #2e1018; stroke-width: .8; }
.a2-maquiagem .anel { fill: #e7c36a; stroke: #7a5a12; stroke-width: .8; }
.a2-maquiagem .cerdas { fill: #f6c9b6; stroke: #b07a68; stroke-width: .8; }
.a2-maquiagem .pincel { filter: drop-shadow(0 3px 4px rgba(0, 0, 0, .45)); }
[data-tom="claro"] .a2-maquiagem .blush { mix-blend-mode: multiply; opacity: .55; }
[data-tom="claro"] .a2-maquiagem .luz { stroke: #c0577f; filter: none; }
.a2-cutis { background: linear-gradient(115deg, transparent 35%, rgba(255, 225, 240, .55) 50%, transparent 65%) -150% 0 / 250% 100% no-repeat; mix-blend-mode: screen; }
[data-tom="claro"] .a2-cutis { mix-blend-mode: normal; background-image: linear-gradient(115deg, transparent 35%, rgba(255, 255, 255, .55) 50%, transparent 65%); }

/* ---------- Médico: healer's mortar, herbs and a flask of balm ---------- */
.a2-curandeiro .fx-peca { filter: drop-shadow(0 4px 6px rgba(0, 0, 0, .45)) drop-shadow(0 0 14px rgba(190, 230, 120, .35)); }
.a2-curandeiro .boca { fill: #3e352a; }
.a2-curandeiro .pedra { stroke: #3b3226; stroke-width: 1.4; }
.a2-curandeiro .labio { fill: none; stroke: #e6dcc6; stroke-width: 1.6; opacity: .7; }
.a2-curandeiro .lasca { fill: none; stroke: #4a4033; stroke-width: 1.2; opacity: .5; }
.a2-curandeiro .vidro { fill: rgba(225, 245, 235, .22); }
.a2-curandeiro .contorno { fill: none; stroke: #e8f4ec; stroke-width: 1.6; opacity: .85; }
.a2-curandeiro .reflexo { fill: none; stroke: #fff; stroke-width: 2; stroke-linecap: round; opacity: .7; }
.a2-curandeiro .rolha { fill: #9a6a3a; stroke: #4e3014; stroke-width: 1; }
[data-tom="claro"] .a2-curandeiro .fx-peca { filter: drop-shadow(0 3px 4px rgba(60, 35, 10, .45)); }
[data-tom="claro"] .a2-curandeiro .vidro { fill: rgba(120, 160, 140, .2); }
[data-tom="claro"] .a2-curandeiro .contorno { stroke: #3c5a48; }

/* ---------- Estabilizar: candle flame and a pulsing light ---------- */
.a2-vela .clarao { mix-blend-mode: screen; }
.a2-vela .cera { stroke: #6e5a38; stroke-width: 1; }
.a2-vela .escorre { fill: #fff3dc; opacity: .8; }
.a2-vela .topo { fill: #f4e6c8; stroke: #8a7550; stroke-width: .8; }
.a2-vela .pavio { fill: none; stroke: #2a1a0c; stroke-width: 1.8; stroke-linecap: round; }
.a2-vela .chama { filter: drop-shadow(0 0 6px rgba(255, 190, 90, .9)) drop-shadow(0 0 16px rgba(255, 140, 40, .6)); }
.a2-vela .veu { opacity: .35; filter: blur(3px); }
.a2-vela .miolo { fill: #fffdf2; opacity: .9; }
.a2-vela .azul { fill: #4f7cff; opacity: .55; }
[data-tom="claro"] .a2-vela .clarao { mix-blend-mode: multiply; }
[data-tom="claro"] .a2-vela .chama { filter: drop-shadow(0 0 3px rgba(200, 90, 20, .6)); }
[data-tom="claro"] .a2-vela .vela { filter: drop-shadow(0 2px 3px rgba(60, 35, 10, .4)); }

/* ---------- Tratar: linen bandages with ointment, tied off over a sprig of herbs ---------- */
.a2-bandagem path { fill: none; stroke-linecap: butt; }
.a2-bandagem .sombra { stroke: rgba(0, 0, 0, .45); stroke-width: 26; }
.a2-bandagem .borda { stroke: #c4ad80; stroke-width: 27; }
.a2-bandagem .gaze { stroke-width: 23; }
.a2-bandagem .unguento { stroke: rgba(196, 160, 60, .5); stroke-width: 13; stroke-linecap: round; mix-blend-mode: multiply; }
.a2-bandagem .costura { stroke: rgba(150, 115, 70, .6); stroke-width: 1.2; stroke-dasharray: 5 4; }
.a2-bandagem .rolo { stroke: #a08a62; stroke-width: 1; }
.a2-bandagem .no { filter: drop-shadow(0 3px 3px rgba(0, 0, 0, .45)); }
.a2-bandagem .laco { fill: #efe2c2; stroke: #a08a62; stroke-width: 1.2; }
.a2-bandagem .folha { fill: #6f9a40; stroke: #3e5a20; stroke-width: .8; }
[data-tom="claro"] .a2-bandagem .sombra { stroke: rgba(60, 35, 10, .3); }
[data-tom="claro"] .a2-bandagem .no { filter: drop-shadow(0 2px 2px rgba(60, 35, 10, .35)); }

/* ---------- Cicatrizar: the wound sewn shut with golden thread ---------- */
.a2-sutura .ferida { filter: drop-shadow(0 0 6px rgba(255, 60, 80, .8)); transition: opacity .4s; }
.a2-sutura .nucleo { fill: #3a0108; opacity: .85; }
.a2-sutura .cicatriz { fill: none; stroke: rgba(255, 200, 140, 0); stroke-width: 2.5; stroke-linecap: round; transition: stroke .5s; }
.a2-sutura .fio { fill: none; stroke: #ffd98a; stroke-width: 1.8; stroke-linecap: round; stroke-linejoin: round; filter: drop-shadow(0 1px 1px rgba(0, 0, 0, .6)); transition: stroke .5s; }
.a2-sutura .brilho-fio { fill: none; stroke: rgba(255, 190, 90, .45); stroke-width: 6; stroke-linecap: round; stroke-linejoin: round; filter: blur(2px); transition: stroke .5s, stroke-width .5s; }
.a2-sutura .aco { stroke: #f2cf72; stroke-width: 2; stroke-linecap: round; }
.a2-sutura .olho { fill: none; stroke: #8a6418; stroke-width: .8; }
.a2-sutura .agulha { filter: drop-shadow(0 0 3px rgba(255, 210, 120, .9)); }
.a2-sutura.curado .ferida { opacity: .4; }
.a2-sutura.curado .cicatriz { stroke: rgba(255, 210, 150, .8); }
.a2-sutura.curado .fio { stroke: #fff2cf; }
.a2-sutura.curado .brilho-fio { stroke: rgba(255, 200, 110, .8); stroke-width: 10; }
[data-tom="claro"] .a2-sutura .ferida { filter: drop-shadow(0 1px 2px rgba(90, 0, 10, .5)); }
[data-tom="claro"] .a2-sutura .fio { stroke: #9a6a10; filter: none; }
[data-tom="claro"] .a2-sutura .brilho-fio { stroke: rgba(200, 140, 40, .25); }
[data-tom="claro"] .a2-sutura .aco { stroke: #8a6418; }
[data-tom="claro"] .a2-sutura .agulha { filter: none; }
[data-tom="claro"] .a2-sutura.curado .cicatriz { stroke: rgba(150, 90, 30, .7); }
[data-tom="claro"] .a2-sutura.curado .fio { stroke: #b07a10; }
[data-tom="claro"] .a2-sutura.curado .brilho-fio { stroke: rgba(220, 160, 50, .35); }

/* ---------- Entropia: clock and aging ---------- */
.a2-entropia .relogio { filter: drop-shadow(0 5px 8px rgba(0, 0, 0, .5)) drop-shadow(0 0 12px rgba(255, 200, 120, .35)); }
.a2-entropia .tiques line { stroke: #4a3410; }
.a2-entropia .tiques .min { stroke-width: 1; }
.a2-entropia .tiques .hora { stroke-width: 2.6; }
.a2-entropia .ponteiro { stroke-linecap: round; }
.a2-entropia .horas { stroke: #3a2608; stroke-width: 4; }
.a2-entropia .minutos { stroke: #3a2608; stroke-width: 2.6; }
.a2-entropia .segundos { stroke: #a8231f; stroke-width: 1.2; }
.a2-entropia .rachas path { fill: none; stroke-linecap: round; stroke-linejoin: round; }
.a2-entropia .rachas .racha path { stroke: #2a1a06; stroke-width: 1.6; }
.a2-entropia .rachas .racha-brilho path { stroke: rgba(255, 220, 150, .5); stroke-width: 4; }
.a2-entropia .a2-velho {
    position: absolute; inset: 0; border-radius: inherit; opacity: 0; mix-blend-mode: multiply;
    background:
        radial-gradient(ellipse at 50% 50%, rgba(200, 160, 100, .15) 25%, rgba(90, 60, 25, .65) 100%),
        repeating-radial-gradient(circle at 30% 40%, rgba(80, 55, 25, .08) 0 1px, transparent 1px 3px);
}
[data-tom="claro"] .a2-entropia .relogio { filter: drop-shadow(0 4px 5px rgba(60, 35, 10, .45)); }