/* Kwaba v2026 — seção "O que você ganha": palco com cubo (soft UI)
   Um card por vez na frente; o cubo gira ao fundo conforme o scroll.
   Protótipo: lab-ganhos-cubo.html (conceito C) */

/* ============ TOKENS SOFT UI ============
   Superfície e fundo têm a mesma cor; o volume vem só da luz:
   realce claro em cima/esquerda, sombra lilás embaixo/direita.
   Cor de destaque só em anéis, arcos e traços de ícone. */
:root { --bg-soft: #ebe6f1; }
body[data-bg="soft"] { background-color: var(--bg-soft); }

.palco {
    --nm: var(--bg-soft);
    --nm-top: #f6f3fa;
    --nm-side: #dcd4e6;
    --nm-hi: rgba(255, 255, 255, .92);
    --nm-lo: rgba(112, 88, 142, .30);
    --nm-lo-2: rgba(112, 88, 142, .16);

    --raise: -9px -9px 20px var(--nm-hi), 11px 11px 26px var(--nm-lo);
    --raise-up: -14px -14px 30px var(--nm-hi), 18px 18px 40px var(--nm-lo);
    --raise-sm: -4px -4px 9px var(--nm-hi), 5px 5px 12px var(--nm-lo);
    --dip: inset 6px 6px 12px var(--nm-lo), inset -6px -6px 12px var(--nm-hi);
    --dip-sm: inset 2px 2px 5px var(--nm-lo), inset -2px -2px 5px var(--nm-hi);
    --rim: inset 1px 1px 0 rgba(255, 255, 255, .7), inset -1px -1px 0 var(--nm-lo-2);

    --acc-a: var(--purple-3);
    --acc-b: var(--purple);
}
.palco .is-orange { --acc-a: #f8b07a; --acc-b: var(--orange-2); }

/* ============ TRILHA DE SCROLL + BLOCO PRESO ============ */
/* a trilha tem a altura definida no JS; o bloco fica preso na tela enquanto ela passa */
.palco .scrolly { position: relative; }
.carrossel { --S: clamp(300px, 36vw, 540px); position: sticky; top: 90px; padding-block: clamp(8px, 2vw, 32px); }

/* a camada do conteúdo deixa o mouse passar nos vazios, para o cubo poder ser girado por trás */
.stage-main { position: relative; z-index: 2; max-width: 100%; pointer-events: none; }
.stage-main .section-head, .stage-arrow, .stage-foot { pointer-events: auto; }
.carrossel .section-head { margin-bottom: clamp(72px, 8vw, 120px); }
.stage-viz {
    position: relative; display: grid; align-items: center;
    grid-template-columns: auto minmax(0, 1fr) auto; grid-template-areas: "prev card next" ". foot .";
    column-gap: clamp(20px, 2.4vw, 32px); padding-bottom: 12px; margin-top: 100px;
}

/* ============ CUBO ============ */
.carrossel .scene {
    /* paleta cinza só para o cubo (sem o tom lilás do resto da seção) */
    --nm: #f6f6f8; --nm-top: #ffffff; --nm-side: #eaeaed;
    --nm-hi: rgba(255, 255, 255, .95); --nm-lo: rgba(70, 70, 78, .28); --nm-lo-2: rgba(70, 70, 78, .14);
    --dip: inset 6px 6px 12px var(--nm-lo), inset -6px -6px 12px var(--nm-hi);
    --rim: inset 1px 1px 0 rgba(255, 255, 255, .7), inset -1px -1px 0 var(--nm-lo-2);

    --s: var(--S); --h: calc(var(--s) / 2); --r: calc(var(--S) * .055);
    position: absolute; left: 74%; top: 38%; translate: -50% calc(-50% + 100px); z-index: 1;
    width: var(--s); height: calc(var(--s) * 1.55);
    display: grid; place-items: center;
    perspective: calc(var(--S) * 4); touch-action: none; cursor: grab; user-select: none;
    /* --lift (0–1) vem do JS, pela velocidade do giro: o dado "pula" e borra um pouco */
    filter: blur(calc(var(--lift, 0) * 2.2px));
}
.carrossel .scene.is-dragging { cursor: grabbing; }
.dado-float { animation: dado-bob 5s ease-in-out infinite; transform-style: preserve-3d; scale: calc(1 + var(--lift, 0) * .07); }
.carrossel .pose { transform: rotateX(20deg) rotateY(26deg); transform-style: preserve-3d; }
.dado { width: var(--s); height: var(--s); position: relative; transform-style: preserve-3d; }

/* núcleo: cubo interno sólido, um pouco menor, que preenche os furos dos cantos arredondados */
.nucleo { position: absolute; inset: 0; transform-style: preserve-3d; pointer-events: none; }
.nucleo i { position: absolute; inset: calc(var(--r) * .08); background: var(--nm-side); }
.nucleo i:nth-child(1) { transform: translateZ(calc(var(--h) - var(--r) * .08)); }
.nucleo i:nth-child(2) { transform: rotateY(90deg) translateZ(calc(var(--h) - var(--r) * .08)); }
.nucleo i:nth-child(3) { transform: rotateX(90deg) translateZ(calc(var(--h) - var(--r) * .08)); }
.nucleo i:nth-child(4) { transform: rotateX(-90deg) translateZ(calc(var(--h) - var(--r) * .08)); }
.nucleo i:nth-child(5) { transform: rotateY(-90deg) translateZ(calc(var(--h) - var(--r) * .08)); }
.nucleo i:nth-child(6) { transform: rotateY(180deg) translateZ(calc(var(--h) - var(--r) * .08)); }

/* faces: só o relevo do mostrador e os furos do dado */
.dado .face {
    --acc-a: #c4c4c9; --acc-b: #8e8e96;
    --glow: var(--purple-3); --glow-2: var(--purple);
    position: absolute; inset: 0; border-radius: var(--r);
    display: grid; place-items: center;
    background: linear-gradient(145deg, var(--nm-top), var(--nm) 55%, #eeeef1);
    /* chanfro: borda clara em cima/esquerda, escura embaixo/direita */
    box-shadow:
        inset 3px 3px 5px rgba(255, 255, 255, .95),
        inset -5px -5px 12px var(--nm-lo-2),
        inset 0 0 0 1px rgba(255, 255, 255, .5);
    backface-visibility: hidden; overflow: hidden;
    transition: box-shadow .5s ease;
}
.dado .face.is-orange { --glow: #f8a35f; --glow-2: var(--orange-2); }
/* luz calculada no JS (--shade e --spec por face) */
.dado .face::after {
    content: ""; position: absolute; inset: 0; border-radius: inherit; pointer-events: none;
    background:
        radial-gradient(110% 80% at 18% 0%, rgba(255, 255, 255, calc(.3 + var(--spec, 0) * .7)), transparent 65%),
        rgba(30, 30, 36, calc(var(--shade, 0) * .2));
}
.dado .face[data-face="1"] { transform: translateZ(var(--h)); }
.dado .face[data-face="2"] { transform: rotateY(90deg) translateZ(var(--h)); }
.dado .face[data-face="3"] { transform: rotateX(90deg) translateZ(var(--h)); }
.dado .face[data-face="4"] { transform: rotateX(-90deg) translateZ(var(--h)); }
.dado .face[data-face="5"] { transform: rotateY(-90deg) translateZ(var(--h)); }
.dado .face[data-face="6"] { transform: rotateY(180deg) translateZ(var(--h)); }

/* mostrador: poço rebaixado + arco (face n de 6) + botão saliente com o ícone */
.dado .dial {
    position: relative; width: 50%; aspect-ratio: 1; border-radius: 50%;
    box-shadow: var(--dip); display: grid; place-items: center;
}
.dado .dial::before {
    content: ""; position: absolute; inset: 5px; border-radius: 50%; opacity: .6;
    background: conic-gradient(var(--acc-a), var(--acc-b) calc(var(--n) / 6 * 100%), transparent 0);
    -webkit-mask: radial-gradient(farthest-side, transparent calc(100% - 5px), #000 calc(100% - 4.5px));
    mask: radial-gradient(farthest-side, transparent calc(100% - 5px), #000 calc(100% - 4.5px));
}
.dado .dial-knob {
    width: 68%; aspect-ratio: 1; border-radius: 50%; display: grid; place-items: center;
    background: linear-gradient(145deg, var(--nm-top), #e2e2e5);
    box-shadow: -4px -4px 9px var(--nm-hi), 6px 6px 12px var(--nm-lo), var(--rim);
    color: #a6a6ad;
}
.dado .dial-knob svg { width: 42%; height: 42%; stroke-width: 1.6; }
.dado .face .pips {
    position: absolute; top: 9%; left: 9%;
    grid-template-columns: repeat(3, calc(var(--S) * .032)); grid-template-rows: repeat(3, calc(var(--S) * .032)); gap: calc(var(--S) * .014);
}
.dado .face .pips i.on { background: #dcdce0; box-shadow: inset 1.5px 1.5px 2px rgba(40, 40, 46, .45), inset -1px -1px 1px #fff; }

/* face virada para a frente: contornos do desenho acesos em roxo ou laranja */
.dado .dial, .dado .dial::before, .dado .dial-knob, .dado .dial-knob svg, .dado .pips i.on {
    transition: opacity .5s ease, color .5s ease, filter .5s ease, background .5s ease, box-shadow .5s ease;
}
.dado .face.is-front {
    box-shadow:
        inset 3px 3px 5px rgba(255, 255, 255, .95),
        inset -5px -5px 12px var(--nm-lo-2),
        inset 0 0 0 2px var(--glow),
        inset 0 0 calc(var(--S) * .09) color-mix(in srgb, var(--glow) 40%, transparent);
}
.dado .face.is-front .dial { box-shadow: var(--dip), 0 0 0 2px color-mix(in srgb, var(--glow) 55%, transparent); }
.dado .face.is-front .dial::before {
    opacity: 1;
    background: conic-gradient(var(--glow), var(--glow-2) calc(var(--n) / 6 * 100%), transparent 0);
    filter: drop-shadow(0 0 6px var(--glow));
}
.dado .face.is-front .dial-knob { color: var(--glow-2); box-shadow: -4px -4px 9px var(--nm-hi), 6px 6px 12px var(--nm-lo), inset 0 0 0 1.5px var(--glow); }
.dado .face.is-front .dial-knob svg { filter: drop-shadow(0 0 3px var(--glow)); }
.dado .face.is-front .pips i.on { background: radial-gradient(circle at 35% 35%, var(--glow), var(--glow-2)); box-shadow: 0 0 6px var(--glow); }

/* sombra no chão: encolhe e clareia quando o dado "pula" */
.dado-chao {
    position: absolute; bottom: -2%; left: 50%; width: 96%; height: calc(var(--S) * .16); translate: -50% 0;
    background: radial-gradient(closest-side, rgba(40, 40, 46, .5), rgba(40, 40, 46, .16) 55%, transparent);
    filter: blur(5px); animation: dado-chao 5s ease-in-out infinite; pointer-events: none;
    transform: scale(calc(1 - var(--lift, 0) * .35)); opacity: calc(1 - var(--lift, 0) * .45);
}
@keyframes dado-bob { 0%, 100% { translate: 0 -7px; } 50% { translate: 0 8px; } }
@keyframes dado-chao { 0%, 100% { scale: .84; } 50% { scale: 1; } }

/* ============ PIPS: furos rebaixados, como num dado de verdade ============ */
.palco .pips { display: grid; grid-template-columns: repeat(3, 7px); grid-template-rows: repeat(3, 7px); gap: 3px; }
.palco .pips i { border-radius: 50%; }
.palco .gain .pips i.on {
    background: radial-gradient(circle at 35% 35%, var(--acc-a), var(--acc-b));
    box-shadow: inset 1.5px 1.5px 2px rgba(80, 58, 110, .5), inset -1px -1px 1px rgba(255, 255, 255, .9);
}
.palco .gain > .pips { position: absolute; top: 24px; right: 24px; z-index: 1; }

/* ============ CARDS: saliente, com anel de destaque ============ */
.palco .gain {
    background: var(--nm); box-shadow: var(--raise-up), var(--rim); border-radius: 26px;
    transition: transform .35s ease, box-shadow .35s ease;
}
.palco .gain::after { display: none; }
.palco .gain::before {
    /* anel em gradiente, só a borda (técnica de máscara) */
    inset: 0; padding: 2px; z-index: 0; translate: none; pointer-events: none;
    background: linear-gradient(135deg, var(--acc-a), var(--acc-b));
    -webkit-mask: linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0); -webkit-mask-composite: xor;
    mask: linear-gradient(#000 0 0) content-box exclude, linear-gradient(#000 0 0);
}
.palco .gain:hover::before { translate: none; }

/* ícone no estilo "intent": botão saliente com poço rebaixado e traço fino */
.palco .gain-icon {
    position: relative; width: 66px; height: 66px; border-radius: 50%;
    background: var(--nm); box-shadow: var(--raise-sm), var(--rim); color: var(--acc-b);
}
.palco .gain-icon::before { content: ""; position: absolute; inset: 8px; border-radius: 50%; box-shadow: var(--dip-sm); }
.palco .gain-icon svg { position: relative; width: 26px; height: 26px; stroke-width: 1.6; }

/* prova: canaleta rebaixada; selo: pílula saliente */
.palco .evidence-inner { background: var(--nm); box-shadow: var(--dip-sm); border-radius: 16px; }
.palco .evidence-inner .pin { background: var(--nm); box-shadow: -2px -2px 5px var(--nm-hi), 3px 3px 6px var(--nm-lo); color: var(--acc-b); }

/* cards empilhados na mesma célula; só um fica visível, e entra/sai com rastro */
.stage-cards { grid-area: card; position: relative; z-index: 3; width: 100%; display: grid; perspective: 1400px; }
.stage-cards[data-dir="next"] { --from: 180px; --to: -180px; --rot: -18deg; }
.stage-cards[data-dir="prev"] { --from: -180px; --to: 180px; --rot: 18deg; }
.palco .stage-cards .gain {
    grid-area: 1 / 1; opacity: 0; visibility: hidden; pointer-events: none;
    transform: translateX(var(--from)) rotateY(var(--rot)) scale(.92);
    filter: blur(8px);
    transition: opacity .45s ease, transform .75s cubic-bezier(.2, .85, .25, 1), filter .5s ease, visibility 0s linear .75s, box-shadow .35s ease;
}
.palco .stage-cards .gain.is-leaving {
    visibility: visible; opacity: 0; filter: blur(8px);
    transform: translateX(var(--to)) rotateY(calc(var(--rot) * -1)) scale(.92);
    transition: opacity .45s ease .05s, transform .6s cubic-bezier(.5, 0, .75, 0), filter .4s ease, visibility 0s linear .6s;
}
.palco .stage-cards .gain.is-current {
    visibility: visible; opacity: 1; transform: none; filter: none; pointer-events: auto;
    transition: opacity .5s ease .25s, transform .9s cubic-bezier(.2, .85, .25, 1) .25s, filter .6s ease .25s, visibility 0s, box-shadow .35s ease;
}
.palco .stage-cards .gain.is-current:hover { transform: translateY(-4px); transition-delay: 0s; }

/* em tela larga o card deita: ícone | título + texto | prova */
@media (min-width: 1001px) {
    .palco .stage-cards .gain {
        display: grid; align-items: start; column-gap: clamp(28px, 3vw, 48px);
        grid-template-columns: auto minmax(0, 1fr) minmax(260px, 380px);
        grid-template-areas: "icon title ev" "pips text ev";
        padding: 52px 52px 50px;
    }
    .palco .stage-cards .gain-icon { grid-area: icon; margin-bottom: 0; }
    .palco .stage-cards .gain > .pips { grid-area: pips; position: static; justify-self: center; margin-top: 18px; }
    .palco .stage-cards .gain h3 { grid-area: title; font-size: 22px; line-height: 1.3; }
    .palco .stage-cards .gain p { grid-area: text; margin-top: 16px; line-height: 1.7; }
    .palco .stage-cards .gain .evidence { grid-area: ev; align-self: center; margin-top: 0; padding-top: 0; }
    .palco .stage-cards .gain .evidence-inner { padding: 20px; line-height: 1.55; }
}
@media (max-width: 1000px) {
    .stage-cards { justify-self: center; max-width: 460px; }
}

/* ============ SETAS + RODAPÉ ============ */
.stage-arrow {
    position: relative; z-index: 3; width: 68px; height: 68px; border-radius: 50%; border: 0; padding: 0; cursor: pointer;
    display: grid; place-items: center; color: var(--purple);
    background: var(--nm); box-shadow: var(--raise), var(--rim);
    transition: box-shadow .2s ease, transform .2s ease;
}
.stage-arrow::before { content: ""; position: absolute; inset: 9px; border-radius: 50%; box-shadow: var(--dip-sm); }
.stage-arrow svg { position: relative; width: 24px; height: 24px; transition: translate .2s ease; }
.stage-arrow[data-go="-1"] { grid-area: prev; }
.stage-arrow[data-go="1"] { grid-area: next; }
.stage-arrow:hover { box-shadow: var(--raise-up), var(--rim); }
.stage-arrow:active { box-shadow: var(--dip); transform: scale(.97); }
.stage-arrow:hover[data-go="-1"] svg { translate: -2px 0; }
.stage-arrow:hover[data-go="1"] svg { translate: 2px 0; }
.stage-arrow:focus-visible { outline: 2px solid var(--purple-3); outline-offset: 4px; }
.stage-arrow:disabled { cursor: default; opacity: .45; box-shadow: var(--dip-sm); }
.stage-arrow:disabled[data-go] svg { translate: none; }

/* contador + barra de progresso do scroll */
.stage-foot { grid-area: foot; display: flex; align-items: center; justify-content: center; gap: 16px; margin-top: 34px; font-family: var(--mono); font-size: 13px; color: var(--ink-2); }
.stage-count b { color: var(--purple); }
.stage-progress { width: min(260px, 50%); height: 8px; border-radius: 99px; background: var(--nm); box-shadow: var(--dip-sm); overflow: hidden; }
.stage-progress i { display: block; height: 100%; width: 0; border-radius: inherit; background: linear-gradient(90deg, var(--purple-3), var(--orange)); transition: width .15s linear; }

@media (max-width: 900px) {
    .carrossel { --S: min(70vw, 400px); }
    /* no celular o cubo vai para trás do título, no canto direito */
    .carrossel .scene { left: 80%; top: 0; translate: -50% -18%; }
    /* e as setas descem para baixo do card */
    .stage-viz {
        grid-template-columns: 1fr 1fr; grid-template-areas: "card card" "foot foot" "prev next";
        row-gap: 26px;
    }
    .stage-arrow { width: 58px; height: 58px; }
    .stage-arrow[data-go="-1"] { justify-self: end; margin-right: 14px; }
    .stage-arrow[data-go="1"] { justify-self: start; margin-left: 14px; }
}
@media (prefers-reduced-motion: reduce) {
    .dado-float, .dado-chao { animation: none; }
}