/* Abertura: ecrã laranja com o logótipo branco, como a do site Covialvi (intro.js cria o elemento) */
html.intro-on { overflow: hidden; }
.intro {
  position: fixed; inset: 0; z-index: 200;
  display: flex; flex-direction: column; align-items: center; justify-content: center;
  background: #FF6B1A; will-change: transform;
}
.intro.out { transform: translateY(-100%); transition: transform .8s cubic-bezier(.76, 0, .24, 1); }   /* sobe e revela o site */
.intro-logo { animation: intro-logo-in .8s cubic-bezier(.22, 1, .36, 1) both; }
.intro-logo img { display: block; width: clamp(240px, 64vw, 480px); height: auto; }
.intro-line { margin-top: 40px; width: 208px; height: 1px; overflow: hidden; background: rgba(255, 255, 255, .35); }
.intro-bar { width: 100%; height: 100%; background: #fff; transform-origin: left; animation: intro-bar-fill 1.3s cubic-bezier(.65, 0, .35, 1) both; }
@media (min-width: 768px) { .intro-line { width: 288px; } }
@keyframes intro-logo-in { 0% { opacity: 0; transform: translateY(14px) scale(.94); } 100% { opacity: 1; transform: translateY(0) scale(1); } }
@keyframes intro-logo-fade { 0% { opacity: 0; } 100% { opacity: 1; } }
@keyframes intro-bar-fill { 0% { transform: scaleX(0); } 100% { transform: scaleX(1); } }

/* Ao sair, o logótipo sobe um pouco e esbate-se enquanto o ecrã laranja desaparece para cima */
.intro-logo, .intro-line { transition: opacity .45s ease, translate .8s cubic-bezier(.76, 0, .24, 1); }
.intro.out .intro-logo { opacity: 0; translate: 0 -40px; }
.intro.out .intro-line { opacity: 0; }

/* Menos movimento: o logótipo só aparece com um fade; o ecrã continua a subir (é o efeito de saída pedido) */
@media (prefers-reduced-motion: reduce) {
  .intro-logo { animation-name: intro-logo-fade; }
}