/* =========================================================================
   DoCEIS 2027 — variantes com animações (escrito à mão; não é gerado).
   <html data-anim="subtil"> ou <html data-anim="rica">, posto por js/animacoes.js
   (?anim=subtil|rica no URL, ou o seletor). Sem atributo = sem animações (como a proposta).
   Tudo fica desligado com "reduzir movimento" do sistema, e sem JS o conteúdo aparece normal.
   ========================================================================= */

@media (prefers-reduced-motion: no-preference) {

  /* ---------- 1. Entrada do hero (Subtil e Rica) ---------------------------- */
  html[data-anim] .hero .wrap > *,
  html[data-anim] .hero .display > span:not(.sr-only),
  html[data-anim] .hero .hero-meta-row > * {
    animation: anim-up .8s cubic-bezier(.2, .7, .2, 1) both;
  }
  html[data-anim] .hero .wrap > *:nth-child(1) { animation-delay: .05s; }
  html[data-anim] .hero .wrap > *:nth-child(2) { animation-delay: .12s; }
  html[data-anim] .hero .wrap > *:nth-child(3) { animation-delay: .2s; }
  html[data-anim] .hero .wrap > *:nth-child(4) { animation-delay: .32s; }
  html[data-anim] .hero .wrap > *:nth-child(5) { animation-delay: .44s; }
  html[data-anim] .hero .wrap > *:nth-child(6) { animation-delay: .56s; }
  html[data-anim] .hero .display > span:nth-of-type(2) { animation-delay: .22s; }
  html[data-anim] .hero .display > span:nth-of-type(3) { animation-delay: .34s; }
  html[data-anim] .hero .display > span:nth-of-type(4) { animation-delay: .46s; }
  html[data-anim] .hero .hero-meta-row > *:nth-child(2) { animation-delay: .5s; }
  html[data-anim] .hero-photo { animation: anim-fade 1.4s ease both; }

  /* ---------- 2. Aparecer ao fazer scroll (Subtil e Rica) ------------------- */
  /* js/animacoes.js marca os blocos com .anim-rev e acrescenta .is-in quando entram no ecrã */
  html[data-anim] .anim-rev {
    opacity: 0; transform: translateY(22px);
    transition: opacity .7s ease, transform .7s cubic-bezier(.2, .7, .2, 1);
    transition-delay: calc(var(--anim-i, 0) * 70ms);
  }
  html[data-anim] .anim-rev.is-in { opacity: 1; transform: none; }

  /* Rica: deslocação maior e um pouco de escala */
  html[data-anim="rica"] .anim-rev { transform: translateY(36px) scale(.97); }
  html[data-anim="rica"] .anim-rev.is-in { transform: none; }

  /* ---------- 3. Interação (Subtil e Rica) -------------------------------- */
  html[data-anim] .card,
  html[data-anim] .person,
  html[data-anim] .hof-year,
  html[data-anim] .cd-unit { transition: transform .25s ease, box-shadow .25s ease, border-color .25s ease; }
  @media (hover: hover) {
    html[data-anim] .person:hover,
    html[data-anim] .card:hover { transform: translateY(-4px); box-shadow: 0 24px 50px rgba(0, 0, 0, .28); }
    html[data-anim] .pills li { transition: transform .2s ease, background-color .2s ease; }
    html[data-anim] .pills li:hover { transform: translateY(-2px); background: rgba(var(--rgb-accent), .16); }
  }
  /* toque no telemóvel: resposta imediata */
  html[data-anim] .btn:active,
  html[data-anim] .ico-link:active,
  html[data-anim] .edition a:active { transform: scale(.96); }

  /* ---------- 4. Contagem: o número que muda "salta" (Subtil e Rica) -------- */
  html[data-anim] .cd-num.anim-tick { animation: anim-tick .6s cubic-bezier(.2, .7, .2, 1); }

  /* ================= Só na variante RICA ================================= */

  /* foto do hero: aproximação lenta (Ken Burns) + paralaxe (posta pelo JS em --anim-par) */
  html[data-anim="rica"] .hero-photo {
    animation: anim-fade 1.4s ease both, anim-kenburns 26s ease-in-out 1.4s infinite alternate;
    transform: translateY(var(--anim-par, 0px));
    will-change: transform;
  }

  /* título: palavra de destaque com brilho a passar */
  html[data-anim="rica"] .hero .display > span.gold:not(.sr-only) {
    background: linear-gradient(100deg, var(--gold) 40%, #fff 50%, var(--gold) 60%) 0 0 / 300% 100% no-repeat;
    -webkit-background-clip: text; background-clip: text; color: transparent;
    animation: anim-up .8s cubic-bezier(.2, .7, .2, 1) .34s both, anim-shine 6s ease-in-out 1.6s infinite;
  }

  html[data-anim="rica"][data-claro] .hero .display > span.gold:not(.sr-only) { background-image: linear-gradient(100deg, var(--gold) 40%, var(--accent-hover) 50%, var(--gold) 60%); }

  /* botão principal: reflexo a passar */
  html[data-anim="rica"] .btn--gold { position: relative; overflow: hidden; }
  html[data-anim="rica"] .btn--gold::after {
    content: ""; position: absolute; inset: 0; transform: translateX(-120%);
    background: linear-gradient(100deg, transparent 30%, rgba(255, 255, 255, .45) 50%, transparent 70%);
    animation: anim-sweep 4.5s ease-in-out 2s infinite;
  }

  /* linha cronológica: os quadrados entram com "mola" e a linha desenha-se */
  html[data-anim="rica"] .dates .date.anim-rev { transform: translateY(30px) scale(.8); }
  html[data-anim="rica"] .dates .date.anim-rev.is-in { transform: none; transition-timing-function: cubic-bezier(.34, 1.56, .64, 1); }
  html[data-anim="rica"] .dates .date::before,
  html[data-anim="rica"] .dates .date::after { transform-origin: left center; transform: scaleX(0); transition: transform .5s ease calc(var(--anim-i, 0) * 70ms + .2s); }
  html[data-anim="rica"] .dates .date.is-in::before,
  html[data-anim="rica"] .dates .date.is-in::after { transform: scaleX(1); }
  @media (max-width: 760px) {
    html[data-anim="rica"] .dates .date::before,
    html[data-anim="rica"] .dates .date::after { transform-origin: center top; transform: scaleY(0); }
    html[data-anim="rica"] .dates .date.is-in::before,
    html[data-anim="rica"] .dates .date.is-in::after { transform: scaleY(1); }
  }

  /* pontos decorativos a flutuar */
  html[data-anim="rica"] .dots::after { animation: anim-float 9s ease-in-out infinite alternate; }

  /* fotos das pessoas: aproximação ao passar o rato */
  @media (hover: hover) {
    html[data-anim="rica"] .person__photo img,
    html[data-anim="rica"] .keynote img { transition: transform .5s ease; }
    html[data-anim="rica"] .person:hover .person__photo img { transform: scale(1.06); }
    html[data-anim="rica"] .keynote:hover img { transform: scale(1.06) rotate(-1deg); }
    /* cartões com inclinação 3D a seguir o rato (valores postos pelo JS) */
    html[data-anim="rica"] .anim-tilt { transform: perspective(900px) rotateX(var(--rx, 0deg)) rotateY(var(--ry, 0deg)) translateY(var(--ty, 0px)); }
  }

  /* logótipos dos patrocinadores: ligeiro balanço ao entrar */
  html[data-anim="rica"] .logos li.anim-rev { transform: translateY(16px) rotate(-3deg); }
  html[data-anim="rica"] .logos li.anim-rev.is-in { transform: none; }
}

/* barra de progresso da leitura (Rica), por cima do cabeçalho */
.anim-progress { display: none; }
@media (prefers-reduced-motion: no-preference) {
  html[data-anim="rica"] .anim-progress {
    display: block; position: fixed; z-index: 150; top: 0; left: 0; right: 0; height: 3px;
    background: var(--gold); transform-origin: 0 50%; transform: scaleX(var(--anim-prog, 0));
    pointer-events: none;
  }
}

@keyframes anim-up { from { opacity: 0; transform: translateY(26px); } to { opacity: 1; transform: none; } }
@keyframes anim-fade { from { opacity: 0; } }
@keyframes anim-kenburns { from { scale: 1; } to { scale: 1.08; } }
@keyframes anim-shine { 0%, 70% { background-position: 100% 0; } 100% { background-position: -100% 0; } }
@keyframes anim-sweep { 0%, 60% { transform: translateX(-120%); } 100% { transform: translateX(120%); } }
@keyframes anim-tick { 0% { transform: translateY(-40%); opacity: 0; } 100% { transform: none; opacity: 1; } }
@keyframes anim-float { from { transform: translate(0, 0); } to { transform: translate(-14px, 10px); } }