/* ============================================================
   scratch-reveal.css
   Bloco "Scratch" (Template Especial, ver core/scratch-reveal.js) —
   scratch card com 4 camadas sobrepostas (position:absolute; inset:0):

     .scratch__bottom       nível de baixo (imagem ou vídeo), z-index 1
     .scratch__top-content  arte de fundo do nível de cima, z-index 2
     .scratch__canvas       canvas 2D que pinta/apaga o nível de cima, z-index 3
     .scratch__hint         ícone de mão + texto "Raspa", z-index 4

   Cópia gémea desta folha existe em js/core/export-html.js (EXPORT_CSS) —
   mantida em sincronia manualmente (sem build step, ver convenção geral
   do projeto).
   ============================================================ */

.scratch {
    position: relative;
    width: 100%;
    height: 100%;
    overflow: hidden;
    touch-action: none;
}

.scratch__bottom {
    position: absolute;
    inset: 0;
    z-index: 1;
}

.scratch__bottom img,
.scratch__bottom video {
    width: 100%;
    height: 100%;
    object-fit: cover;
    display: block;
}

/* Overlay items do Nível de baixo — posicionamento livre em % do bloco,
   mesmo padrão do overlay item do Slider (ver split-slider.css:
   .split-slider__overlay-item). Simples CSS/DOM normal: ao contrário dos
   do Nível de cima, estes NUNCA são raspáveis (ficam já revelados assim
   que o buraco do canvas os expõe, junto com o resto do Nível de baixo). */
.scratch__overlay-items {
    position: absolute;
    inset: 0;
    pointer-events: none;
}

.scratch__overlay-item {
    position: absolute;
    object-fit: contain;
    object-position: left top;
    pointer-events: none;
}

.scratch__top-content {
    position: absolute;
    inset: 0;
    z-index: 2;
    background-size: cover;
    background-position: center;
    pointer-events: none;
}

.scratch__canvas {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    z-index: 3;
    cursor: pointer;
    touch-action: none;
}

.scratch__hint {
    position: absolute;
    inset: 0;
    z-index: 4;
    pointer-events: none;
    transition: opacity .3s ease;
}

.scratch__hint--hidden {
    opacity: 0;
}

/* Ícone + texto ficam JUNTOS (mesmo wrapper, centrados no bloco) — o
   texto fica sempre "ao pé da mão". Um wiggle pequeno e suave, sem
   percurso amplo (nada de "andar por aí" — só o gesto natural de quem
   está a começar a raspar). */
.scratch__hint-group {
    position: absolute;
    left: 50%;
    top: 50%;
    transform: translate(-50%, -50%);
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 6px;
}

.scratch__hint-icon {
    display: block;
    font-size: 40px;
    color: #fff;
    text-shadow: 0 2px 6px rgba(0, 0, 0, .5);
    animation: scratchHandWiggle 1.1s ease-in-out infinite;
}

.scratch__hint-text {
    font-size: 16px;
    font-weight: 700;
    color: #fff;
    text-shadow: 0 1px 3px rgba(0, 0, 0, .4);
    white-space: nowrap;
}

@keyframes scratchHandWiggle {
    0%, 100% { transform: translate(-6px, 6px) rotate(-8deg); }
    50% { transform: translate(6px, -6px) rotate(8deg); }
}