/* Efeitos e movimento (ver js/motion.js). Tudo é desligado quando o sistema pede "reduzir movimento". */

/* revelar ao rolar */
.rv { opacity: 0; transform: translateY(26px) scale(.985); }
.rv.in { opacity: 1; transform: none; transition: opacity .6s ease, transform .7s cubic-bezier(.2, .8, .25, 1); }

/* cards: inclinação e brilho que segue o mouse */
.fx-tilt { position: relative; will-change: transform; }
.fx-tilt::after { content: ""; position: absolute; inset: 0; border-radius: inherit; pointer-events: none; opacity: 0; transition: opacity .25s ease; background: radial-gradient(280px circle at var(--mx, 50%) var(--my, 50%), rgba(255, 255, 255, .11), transparent 62%); }
.fx-tilt:hover::after { opacity: 1; }

/* ondinha nos botões */
.fx-rip-host { position: relative; overflow: hidden; }
.fx-ripple { position: absolute; border-radius: 50%; background: rgba(255, 255, 255, .35); transform: scale(0); animation: fxRipple .6s ease-out forwards; pointer-events: none; }
@keyframes fxRipple { to { transform: scale(1); opacity: 0; } }

/* confete */
.fx-confetti { position: fixed; inset: 0; width: 100vw; height: 100vh; pointer-events: none; z-index: 7000; }

/* menu lateral: entrada em cascata (só ao abrir o site) */
.menu-intro > * { animation: fxSlideIn .55s cubic-bezier(.2, .8, .25, 1) both; }
.menu-intro > *:nth-child(1) { animation-delay: .02s; } .menu-intro > *:nth-child(2) { animation-delay: .07s; } .menu-intro > *:nth-child(3) { animation-delay: .12s; }
.menu-intro > *:nth-child(4) { animation-delay: .17s; } .menu-intro > *:nth-child(5) { animation-delay: .22s; } .menu-intro > *:nth-child(6) { animation-delay: .27s; }
.menu-intro > *:nth-child(7) { animation-delay: .32s; } .menu-intro > *:nth-child(8) { animation-delay: .37s; } .menu-intro > *:nth-child(n+9) { animation-delay: .42s; }
@keyframes fxSlideIn { from { opacity: 0; transform: translateX(-18px); } to { opacity: 1; transform: none; } }

/* faixa de luz passando no destaque da página inicial */
.hero::before { content: ""; position: absolute; top: -40%; left: -30%; width: 22%; height: 180%; background: linear-gradient(100deg, transparent, rgba(255, 255, 255, .13), transparent); transform: rotate(14deg) translateX(-160%); animation: fxSheen 7s ease-in-out 1.2s infinite; pointer-events: none; }
@keyframes fxSheen { 0% { transform: rotate(14deg) translateX(-160%); } 40%, 100% { transform: rotate(14deg) translateX(900%); } }

/* título das páginas: sublinhado que cresce */
.page-head h1, .article > h1 { background-image: linear-gradient(90deg, #e2b04f, transparent); background-repeat: no-repeat; background-size: 0 3px; background-position: 0 100%; padding-bottom: .2rem; animation: fxUnderline .9s .25s cubic-bezier(.2, .8, .25, 1) forwards; }
@keyframes fxUnderline { to { background-size: 90px 3px; } }

/* alternativas das questões e botão principal: brilho ao passar */
.qopt:not(:disabled):hover { box-shadow: 0 0 0 1px var(--primaria, #8eaef0), 0 6px 18px rgba(0, 0, 0, .25); }
.btn-primary:not(:disabled):hover { box-shadow: 0 6px 20px color-mix(in srgb, var(--bs-primary, #4f7be8) 45%, transparent); }

/* pontos de nota e anéis */
.red-score { animation: fxPopIn .7s cubic-bezier(.2, 1.2, .4, 1) both; }
@keyframes fxPopIn { from { transform: scale(.6); opacity: 0; } to { transform: none; opacity: 1; } }
.red-comp .red-pts { transition: transform .2s ease; }
.red-comp:hover .red-pts { transform: scale(1.12); }

/* link da barra lateral ativo: brilho suave pulsando */
.menu-item.active { animation: fxGlow 3.2s ease-in-out infinite; }
@keyframes fxGlow { 0%, 100% { box-shadow: inset 3px 0 0 #e2b04f, 0 0 0 rgba(226, 176, 79, 0); } 50% { box-shadow: inset 3px 0 0 #e2b04f, 0 0 18px rgba(226, 176, 79, .22); } }

@media (prefers-reduced-motion: reduce) {
  .rv { opacity: 1 !important; transform: none !important; }
  .fx-tilt::after, .hero::before { display: none; }
}

/* impressão: nada fica escondido pelo efeito de revelar */
@media print { .rv { opacity: 1 !important; transform: none !important; } .fx-confetti, .pn-trash, .pn-undo { display: none !important; } }

/* retratos lado a lado (modo "portrait" nas imagens do conteúdo) */
.fig-inline.portrait { float: none; display: inline-block; vertical-align: top; width: calc(33.33% - 14px); min-width: 150px; max-width: 230px; margin: .3rem 10px .9rem 0; }
.fig-inline.portrait img { width: 100%; height: 230px; object-fit: cover; object-position: center 18%; border-radius: 10px; }
.fig-inline.portrait figcaption { font-size: .74rem; line-height: 1.3; }
.fig-inline.portrait .credit { display: block; opacity: .65; font-size: .66rem; }