/* Tema "pintura" — fundo de obra de domínio público, com overlay suave
 * pra preservar legibilidade. Convive com fx-layers do styles.css. */

.painting-bg{
  position:fixed; inset:0;
  z-index:-1;
  pointer-events:none;
  background-position:center;
  background-size:cover;
  background-repeat:no-repeat;
  opacity:0;
  transition:opacity 1.8s ease;
  filter:saturate(.88) contrast(.95);
}
.painting-bg.is-visible{opacity:.28}

/* Pequeno overlay branco-papel pra clarear leitura sem matar a pintura */
.painting-bg::after{
  content:"";
  position:absolute; inset:0;
  background:
    linear-gradient(180deg, rgba(244,236,223,.46) 0%, rgba(244,236,223,.22) 35%, rgba(244,236,223,.62) 100%);
}

/* Atribuição discreta da pintura — canto inferior esquerdo */
.painting-credit{
  position:fixed;
  left:14px; bottom:14px;
  z-index:5;
  font-family:'Cormorant Garamond', serif;
  font-style:italic;
  font-size:13px;
  color:rgba(31,53,82,.55);
  background:rgba(255,250,240,.62);
  border:1px solid rgba(53,78,112,.10);
  padding:5px 11px;
  border-radius:12px;
  backdrop-filter:blur(8px);
  -webkit-backdrop-filter:blur(8px);
  max-width:240px;
  line-height:1.35;
  pointer-events:auto;
  cursor:pointer;
  user-select:none;
  transition:opacity .2s ease, background .2s ease;
  opacity:.78;
}
.painting-credit:hover{opacity:1; background:rgba(255,250,240,.92)}
.painting-credit strong{font-weight:600; color:rgba(31,53,82,.78)}
.painting-credit .painting-credit__hint{display:block; font-size:10px; opacity:.55; margin-top:2px; font-style:normal}

@media(max-width:600px){
  .painting-credit{font-size:11px; left:8px; bottom:8px; max-width:200px}
}

/* Botão de troca manual — flutuante discreto, topo direito */
.painting-cycle-btn{
  position:fixed;
  top:14px; right:14px;
  z-index:5;
  border:1px solid rgba(53,78,112,.15);
  background:rgba(255,250,240,.58);
  color:rgba(31,53,82,.6);
  padding:6px 10px;
  font-size:16px;
  border-radius:50%;
  cursor:pointer;
  backdrop-filter:blur(8px);
  -webkit-backdrop-filter:blur(8px);
  transition:opacity .2s, background .2s, transform .2s;
  opacity:.55;
  line-height:1;
}
.painting-cycle-btn:hover{opacity:1; background:rgba(255,250,240,.94); transform:rotate(45deg)}

/* No demo.html (área do aluno) o efeito é mais discreto pra não competir
 * com cards de conteúdo */
.demo-page .painting-bg.is-visible{opacity:.18}