/* A página do concierge para eventos (/concierge-ia/eventos): só o que as
   peças do site não trazem. A grelha dos temas que o público pergunta, os
   tipos de evento em pílulas, a nota por baixo da grelha, os botões por
   baixo dos números do Rock & Dão e o link da linha da fonte.

   O âmbar fica nos pontos e nos filetes, nunca em texto pequeno sobre o
   papel (a regra da marca); o texto é sempre navy ou --ink-soft.

   No fim, o fundo de festival do herói (partials/fundo-festival). */

/* os tipos de evento, por baixo da entrada da secção */
.ev-tipos{list-style:none;display:flex;flex-wrap:wrap;gap:8px;margin:1.4rem 0 0;padding:0}
.ev-tipos li{font-size:.84rem;font-weight:600;line-height:1.3;color:var(--ink);background:#fff;border:1px solid var(--line-l);border-radius:999px;padding:.45em 1em}

/* os seis temas: o .card do site, com três perguntas de exemplo */
.ev-temas{display:grid;grid-template-columns:repeat(3,1fr);gap:18px}
.ev-tema h3{margin-bottom:.95rem}
.ev-tema ul{list-style:none;display:flex;flex-direction:column;gap:.6rem;margin:0;padding:0}
.ev-tema li{position:relative;padding-left:1.1rem;font-size:.95rem;line-height:1.45;color:var(--ink-soft)}
.ev-tema li::before{content:"";position:absolute;left:0;top:.6em;width:6px;height:6px;border-radius:50%;background:var(--amber)}
@media(max-width:920px){.ev-temas{grid-template-columns:repeat(2,1fr)}}
@media(max-width:600px){.ev-temas{grid-template-columns:1fr}}

/* o que muda de evento para evento: um aparte com o filete âmbar */
.ev-nota{max-width:70ch;margin:clamp(28px,3.6vw,42px) 0 0;padding-left:clamp(14px,1.8vw,20px);border-left:2px solid var(--amber);font-size:1rem;color:var(--ink-soft)}

/* a prova: o link da fonte e os dois botões */
.ev-prova .numeros-fonte a{color:var(--marine-dk);font-weight:600;border-bottom:1px solid rgba(44,111,179,.35)}
.ev-prova .numeros-fonte a:hover{color:var(--navy)}
.ev-acoes{display:flex;flex-wrap:wrap;gap:.85rem;margin-top:clamp(24px,3vw,34px)}
@media(max-width:480px){.ev-acoes .btn{white-space:normal}}

/* O fundo de festival do herói (31-10-2026). O céu é o azul do herói; por
   cima, a luz do palco, seis feixes a varrer devagar, o público em
   silhueta em baixo e os balões que sobem dos telemóveis. Só se animam
   transform e opacity, que o navegador faz fora da linha principal. Com
   «reduzir movimento» o bevantai.css desliga as animações todas e fica a
   cena parada: os feixes em leque e dois balões à vista. */

/* espaço em baixo para o público: os botões ficam por cima dos telemóveis */
.phero-fundo-festival .phero-in{padding-bottom:calc(clamp(48px,6vw,80px) + 130px)}

.festa{position:absolute;inset:0;z-index:0;overflow:hidden;pointer-events:none;contain:layout paint}

/* a luz do palco, por trás do público, a respirar */
.festa-palco{position:absolute;left:0;right:0;bottom:0;height:min(70%,420px);
  background:radial-gradient(ellipse 34% 60% at 30% 100%,rgba(246,168,96,.2),transparent 70%),
    radial-gradient(ellipse 34% 60% at 72% 100%,rgba(127,180,230,.24),transparent 70%),
    radial-gradient(ellipse 80% 55% at 50% 100%,rgba(127,180,230,.14),transparent 75%);
  animation:festa-palco 7s ease-in-out infinite alternate}
@keyframes festa-palco{from{opacity:.72}to{opacity:1}}

/* os feixes: uma cunha de luz que nasce atrás do público e se apaga para
   cima (a máscara), a rodar à volta do pé, cada um ao seu ritmo */
.festa-feixe{position:absolute;bottom:70px;width:300px;height:115%;margin-left:-150px;transform-origin:50% 100%;
  --cor:rgba(214,232,248,.15);
  background:conic-gradient(from -9deg at 50% 100%,transparent 0deg,var(--cor) 5deg,var(--cor) 13deg,transparent 18deg,transparent 360deg);
  -webkit-mask-image:linear-gradient(to top,#000,rgba(0,0,0,.55) 40%,transparent 88%);
  mask-image:linear-gradient(to top,#000,rgba(0,0,0,.55) 40%,transparent 88%);
  animation:11s ease-in-out infinite alternate}
.festa-feixe.f1{left:28%;transform:rotate(-22deg);animation-name:festa-f1;animation-delay:-2s}
.festa-feixe.f2{left:28%;--cor:rgba(246,168,96,.13);transform:rotate(14deg);animation-name:festa-f2;animation-duration:13s;animation-delay:-6s}
.festa-feixe.f3{left:50%;width:360px;margin-left:-180px;--cor:rgba(214,232,248,.1);transform:rotate(-4deg);animation-name:festa-f3;animation-duration:15s;animation-delay:-4s}
.festa-feixe.f4{left:72%;transform:rotate(22deg);animation-name:festa-f4;animation-duration:12s;animation-delay:-3s}
.festa-feixe.f5{left:72%;--cor:rgba(246,168,96,.13);transform:rotate(-14deg);animation-name:festa-f5;animation-duration:14s;animation-delay:-8s}
.festa-feixe.f6{left:88%;--cor:rgba(214,232,248,.1);transform:rotate(30deg);animation-name:festa-f6;animation-duration:10s;animation-delay:-5s}
@keyframes festa-f1{from{transform:rotate(-30deg)}to{transform:rotate(-6deg)}}
@keyframes festa-f2{from{transform:rotate(8deg)}to{transform:rotate(30deg)}}
@keyframes festa-f3{from{transform:rotate(-14deg)}to{transform:rotate(12deg)}}
@keyframes festa-f4{from{transform:rotate(30deg)}to{transform:rotate(6deg)}}
@keyframes festa-f5{from{transform:rotate(-8deg)}to{transform:rotate(-30deg)}}
@keyframes festa-f6{from{transform:rotate(36deg)}to{transform:rotate(16deg)}}

/* o público: 2800 x 230 px, ao centro, sem escalar com o ecrã */
.festa-publico{position:absolute;left:50%;bottom:0;width:2800px;height:230px;margin-left:-1400px;transform-origin:50% 100%}
.festa-publico svg{display:block}
.festa-corpo,.festa-tlm,.festa-mao{fill:#061524}
.festa-corpo.tras,.festa-tlm.tras,.festa-mao.tras{fill:#0B2239}
.festa-bracos{fill:none;stroke:#061524;stroke-width:11;stroke-linecap:round}
.festa-bracos.tras{stroke:#0B2239;stroke-width:7}
.festa-ecra{fill:#D6E8F8;opacity:.9}

/* os balões (a peça .balao-escrita do bevantai.css): aparecem em cima do
   telemóvel, sobem e apagam-se, cada um ao seu ritmo */
.festa-balao{animation:festa-balao 9s infinite}
.festa-balao.b1{animation-duration:8.6s;animation-delay:-1.2s}
.festa-balao.b2{animation-duration:9.4s;animation-delay:-4.6s}
.festa-balao.b3{animation-duration:8.2s;animation-delay:-6.8s}
.festa-balao.b4{animation-duration:10.2s;animation-delay:-2.9s}
.festa-balao.b5{animation-duration:9s;animation-delay:-8.1s}
.festa-balao.b6{animation-duration:8.8s;animation-delay:-3.7s}
.festa-balao.b7{animation-duration:9.8s;animation-delay:-5.9s}
/* a entrada com a curva do site (--ease), a subida a direito */
@keyframes festa-balao{
  0%{opacity:0;transform:translateY(10px) scale(.9);animation-timing-function:cubic-bezier(.22,.61,.36,1)}
  6%{opacity:1;transform:translateY(0) scale(1);animation-timing-function:linear}
  40%{opacity:1;transform:translateY(-26px) scale(1);animation-timing-function:linear}
  58%,100%{opacity:0;transform:translateY(-40px) scale(1)}
}

@media(max-width:1000px){
  .festa-publico{transform:scale(.85)}
  .phero-fundo-festival .phero-in{padding-bottom:calc(clamp(48px,6vw,80px) + 125px)}
}
/* no telemóvel, menos feixes, que chegam mais acima (o público fica
   abaixo da dobra e são eles que mostram o festival no primeiro ecrã), e
   o público mais pequeno */
@media(max-width:600px){
  .festa-feixe.f3,.festa-feixe.f6{display:none}
  .festa-feixe{bottom:50px;-webkit-mask-image:linear-gradient(to top,#000,rgba(0,0,0,.7) 45%,transparent 96%);
    mask-image:linear-gradient(to top,#000,rgba(0,0,0,.7) 45%,transparent 96%)}
  .festa-publico{transform:scale(.7)}
  .phero-fundo-festival .phero-in{padding-bottom:150px}
}
/* parado: dois balões à vista, para a cena se perceber sem movimento */
@media(prefers-reduced-motion:reduce){.festa-balao.b3,.festa-balao.b4{opacity:1}}