/*
 * Estilos que valem no site (front-end) para o Matter Ad Control: a classe que esconde espaços de anúncio,
 * o esconder do wrapper externo, o preloader em tela cheia (com spinner ou barra de progresso e contador de
 * porcentagem feito em CSS puro) e as travas de rolagem enquanto o preloader ou o anúncio rewarded cobrem a
 * tela.
 */

/* Classe que esconde um espaço de anúncio. */
.mc-ad-hidden { display: none !important; }

/* Esconde o wrapper externo de um espaço controlado quando o elemento interno está com .mc-ad-hidden (basta marcar o wrapper com data-mc-ad-wrapper); usa :has() e, em navegadores sem ele, o fallback em JS (ver syncWrapperHidden em ad-control.js). */
[data-mc-ad-wrapper]:has(.mc-ad-hidden) {
    display: none !important;
}
/* Mesma regra, acionada pelo JS em navegadores sem :has(). */
[data-mc-ad-wrapper].mc-ad-hidden-wrapper-fallback {
    display: none !important;
}

/* O esconder do gate por classe do body não fica aqui: os ids vêm da configuração do post, então a regra é impressa como estilo inline junto deste arquivo (ver mc_ad_control_gate_hide_css em config/functions.php); funciona mesmo quando o container entra no DOM depois do boot, e a classe .mc-ad-gate-override é a saída do JS para quando "vendeu" tem prioridade (ver forceReleaseHideForElementId em ad-control.js). */

/* Preloader em tela cheia enquanto o ad-control espera o gate decidir; é desenhado em PHP no wp_body_open e o JS adiciona mc-ad-preloader--hidden no estado final (o nó é removido após a transição de 350ms). */
.mc-ad-preloader {
    position: fixed;
    inset: 0;
    z-index: 999999;
    display: flex;
    align-items: center;
    justify-content: center;
    background: rgba(255, 255, 255, 0.92);
    -webkit-backdrop-filter: blur(8px);
    backdrop-filter: blur(8px);
    transition: opacity 0.3s ease-in-out;
    opacity: 1;
}
/* Preloader escondido (some com transição). */
.mc-ad-preloader--hidden {
    opacity: 0;
    pointer-events: none;
}
/* Círculo giratório do preloader. */
.mc-ad-preloader__spinner {
    width: 56px;
    height: 56px;
    border: 5px solid rgba(0, 0, 0, 0.1);
    border-top-color: #2271b1;
    border-radius: 50%;
    animation: mc-ad-preloader-spin 0.9s linear infinite;
}
/* Animação de giro do spinner. */
@keyframes mc-ad-preloader-spin {
    to { transform: rotate(360deg); }
}
/* Caixa central com o indicador (spinner ou barra). */
.mc-ad-preloader__box {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 16px;
    max-width: 320px;
    padding: 0 24px;
    text-align: center;
}
/* Barra de progresso: enche de 0 a cerca de 92% ao longo do tempo limite do gate (--mc-ad-preloader-duration, padrão 8s); não chega a 100% de propósito, para não parecer travada quando o overlay some. */
.mc-ad-preloader__progress {
    width: 220px;
    max-width: 70vw;
    height: 6px;
    border-radius: 999px;
    background: rgba(0, 0, 0, 0.08);
    overflow: hidden;
}
/* Preenchimento da barra de progresso. */
.mc-ad-preloader__progress > span {
    display: block;
    height: 100%;
    width: 0;
    border-radius: inherit;
    background: var(--mc-ad-preloader-accent, #2271b1);
    animation: mc-ad-preloader-fill var(--mc-ad-preloader-duration, 8s) cubic-bezier(0.15, 0.6, 0.3, 1) forwards;
}
/* Animação de preenchimento da barra (0 a 92%). */
@keyframes mc-ad-preloader-fill {
    0%   { width: 0; }
    100% { width: 92%; }
}
/* Número de porcentagem abaixo da barra, sincronizado com o preenchimento e feito sem JS (uma propriedade @property animada e lida por counter()); sem suporte a @property o número fica em 0% e a barra enche normalmente. */
@property --mc-ad-preloader-pct {
    syntax: '<integer>';
    inherits: false;
    initial-value: 0;
}
/* Texto da porcentagem. */
.mc-ad-preloader__percent {
    --mc-ad-preloader-pct: 0;
    min-height: 1em;
    font: 600 14px/1 -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Helvetica, Arial, sans-serif;
    color: var(--mc-ad-preloader-accent, #2271b1);
    font-variant-numeric: tabular-nums;
    counter-reset: mc-ad-pct var(--mc-ad-preloader-pct);
    animation: mc-ad-preloader-count var(--mc-ad-preloader-duration, 8s) cubic-bezier(0.15, 0.6, 0.3, 1) forwards;
}
/* Escreve o número da porcentagem com counter(). */
.mc-ad-preloader__percent::after {
    content: counter(mc-ad-pct) '%';
}
/* Animação do contador (0 a 92). */
@keyframes mc-ad-preloader-count {
    0%   { --mc-ad-preloader-pct: 0; }
    100% { --mc-ad-preloader-pct: 92; }
}
/* Para quem prefere menos movimento: animações mais lentas e lineares. */
@media (prefers-reduced-motion: reduce) {
    .mc-ad-preloader__spinner { animation-duration: 2.4s; }
    .mc-ad-preloader__progress > span,
    .mc-ad-preloader__percent { animation-timing-function: linear; }
}
/* Com o JS ativo (classe adicionada em preloaderProgress.begin), ele conduz a barra e o contador pelo relógio real do gate, então as animações de tempo fixo do CSS são desligadas; sem JS (adblock) elas continuam como plano B. */
.mc-ad-preloader--js .mc-ad-preloader__progress > span,
.mc-ad-preloader--js .mc-ad-preloader__percent {
    animation: none !important;
}
/* Suaviza os passos do JS na largura da barra. */
.mc-ad-preloader--js .mc-ad-preloader__progress > span {
    transition: width 0.25s linear;
}

/* Bloqueia a rolagem enquanto o preloader está visível (usa :has() e, sem ele, o fallback em JS com a classe no body). */
body:has(#mc-ad-preloader:not(.mc-ad-preloader--hidden)) {
    overflow: hidden !important;
}

/* Plano B da trava de rolagem para navegadores sem :has(). */
body.mc-ad-noscroll {
    overflow: hidden !important;
}

/* Trava a rolagem enquanto o vignette do rewarded (GPT) está na tela (ver lockScrollForReward/unlockScrollForReward em ad-control.js); usa position:fixed no <html> para manter a posição no celular, com classe própria para não acionar o observeQuizActiveClass(). */
html.mc-ad-reward-scroll-locked {
    overflow: hidden !important;
    position: fixed;
    width: 100%;
    top: var(--mc-ad-reward-scroll-y, 0px);
    left: 0;
}

/* Mesma trava enquanto o preloader de espera cobre a tela entre o fim do rewarded e o topo pintado (ver lockScrollForWait/unlockScrollForWait em ad-control.js); classe própria porque os dois podem estar ativos ao mesmo tempo, e sem ela a página rolaria por baixo do overlay no toque e o topo sairia da tela sem ser visto. */
html.mc-ad-wait-scroll-locked {
    overflow: hidden !important;
    position: fixed;
    width: 100%;
    top: var(--mc-ad-wait-scroll-y, 0px);
    left: 0;
}

/* O overlay não deve repassar o gesto de rolagem para a página. */
.mc-ad-preloader {
    touch-action: none;
    overscroll-behavior: contain;
}