/* ===== Portugal UnderCup — efeitos partilhados (scroll, hover, cursor) ===== */

/* barra de progresso de leitura */
.scroll-progress {
  position: fixed; top: 0; left: 0; height: 3px; width: 0;
  background: linear-gradient(90deg, #0f9e55, #30ed86);
  z-index: 9999; transition: width .1s linear;
}

/* reveal ao scroll — só ativo quando o JS corre (nunca esconde conteúdo sem JS) */
.has-fx .reveal {
  opacity: 0; transform: translateY(28px);
  transition: opacity .8s cubic-bezier(.2,.7,.2,1), transform .8s cubic-bezier(.2,.7,.2,1);
  will-change: opacity, transform;
}
.has-fx .reveal.visible { opacity: 1; transform: none; }

/* hover — cartões sobem */
.home-card, .filosofia-valores > div, .fds-caixa, .vila-card, .cerimonia, .campeao {
  transition: transform .34s cubic-bezier(.2,.7,.2,1), box-shadow .34s cubic-bezier(.2,.7,.2,1);
}
.home-card:hover, .filosofia-valores > div:hover, .fds-caixa:hover,
.vila-card:hover, .cerimonia:hover, .campeao:hover {
  transform: translateY(-7px);
  box-shadow: 0 26px 52px -30px rgba(15, 158, 85, .55);
}
/* hover — imagens dos cartões fazem zoom suave */
.vila-card .vila-card-img, .cerimonia .cerimonia-img { transition: transform .6s cubic-bezier(.2,.7,.2,1); }
.vila-card:hover .vila-card-img, .cerimonia:hover .cerimonia-img { transform: scale(1.06); }

/* cursor bolinha verde — só desktop com rato */
@media (hover: hover) and (pointer: fine) {
  html.has-fx, html.has-fx * { cursor: none !important; }
  .cursor-dot, .cursor-ring {
    position: fixed; top: 0; left: 0; border-radius: 50%;
    pointer-events: none; z-index: 100000; transform: translate(-50%, -50%);
  }
  .cursor-dot {
    width: 12px; height: 12px; background: #30ed86;
    box-shadow: 0 0 0 1px rgba(11,13,12,.12), 0 0 14px rgba(48,237,134,.6);
    transition: width .18s, height .18s, background .18s, opacity .25s;
  }
  .cursor-ring {
    width: 38px; height: 38px; border: 1.5px solid rgba(48,237,134,.55);
    transition: width .22s, height .22s, border-color .22s, opacity .25s;
  }
  .cursor-dot.hot { width: 20px; height: 20px; }
  .cursor-ring.hot { width: 58px; height: 58px; border-color: rgba(48,237,134,.9); }
  .cursor-hidden { opacity: 0 !important; }
}

@media (prefers-reduced-motion: reduce) {
  .has-fx .reveal { opacity: 1 !important; transform: none !important; transition: none; }
  .scroll-progress, .cursor-dot, .cursor-ring { display: none !important; }
  html.has-fx, html.has-fx * { cursor: auto !important; }
}