/* ==========================================================================
   Animações — Multiserviços S/L Madeira

   Cada secção tem a sua entrada e a sua saída, e nenhuma repete a de outra.
   Não é variedade por variedade: a geometria de cada uma diz o que a secção
   é. A narrativa abre-se ao meio, os serviços são distribuídos como cartas,
   o processo desenha a régua da esquerda para a direita porque tem ordem,
   a faixa de clientes abre como um obturador, as perguntas desdobram-se e
   os contactos sobem.

   O JS marca cada secção com três estados: .is-before (ainda por chegar),
   .is-in (à vista) e .is-after (já passou). Entrada e saída são estados
   diferentes, por isso a saída não é a entrada ao contrário.
   A saída corre a ~60% do tempo da entrada: sair depressa parece resposta,
   sair devagar parece atraso.

   Sem JS ou com prefers-reduced-motion, tudo isto desaparece e a página
   fica estática e completa.
   ========================================================================== */

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

  /* ===== Banner: Ken Burns lento ===== */
  .hero-media img {
    animation: kenburns 22s ease-in-out infinite alternate;
    will-change: transform;
  }
  /* Fora do ecrã não há nada a ver: parar poupa GPU e bateria. */
  .hero.paused .hero-media img { animation-play-state: paused; }
  @keyframes kenburns {
    from { transform: scale(1) translateX(0); }
    to   { transform: scale(1.09) translateX(-1.5%); }
  }

  /* ===== Banner: entrada na carga da página ===== */
  .js .hero-title .line span {
    transform: translateY(110%);
    animation: riseIn 0.9s cubic-bezier(0.16, 1, 0.3, 1) forwards;
  }
  .js .hero-title .line:nth-child(2) span { animation-delay: 0.12s; }
  @keyframes riseIn { to { transform: translateY(0); } }

  .js .hero-eyebrow, .js .hero-sub, .js .hero-ctas, .js .hero-proof {
    opacity: 0;
    transform: translateY(18px);
    animation: fadeUp 0.8s cubic-bezier(0.16, 1, 0.3, 1) forwards;
  }
  .js .hero-eyebrow { animation-delay: 0.05s; }
  .js .hero-sub { animation-delay: 0.35s; }
  .js .hero-ctas { animation-delay: 0.5s; }
  .js .hero-proof { animation-delay: 0.62s; }
  @keyframes fadeUp { to { opacity: 1; transform: translateY(0); } }

  /* ===== Banner: saída «depart» =====
     O conteúdo levanta e desfoca, como quem sai de uma sala iluminada. */
  .js [data-anim="depart"] .hero-content {
    transition: opacity 0.5s ease-in, transform 0.5s ease-in, filter 0.5s ease-in;
  }
  .js [data-anim="depart"].is-after .hero-content {
    opacity: 0;
    transform: translateY(-60px);
    filter: blur(9px);
  }

  /* ===== Problema: «split» =====
     Entra aberto ao meio — a narrativa pela esquerda, a citação pela
     direita. Sai a fechar-se sobre si própria, desfocada. */
  .js [data-anim="split"] .prose,
  .js [data-anim="split"] .pull-quote,
  .js [data-anim="split"] .section-title {
    transition: opacity 0.75s var(--ease), transform 0.75s var(--ease),
                clip-path 0.85s var(--ease), filter 0.6s var(--ease);
  }
  .js [data-anim="split"].is-before .section-title { opacity: 0; transform: translateY(24px); }
  .js [data-anim="split"].is-before .prose {
    opacity: 0;
    transform: translateX(-60px);
    clip-path: inset(0 100% 0 0);
  }
  .js [data-anim="split"].is-before .pull-quote { opacity: 0; transform: translateX(60px); }

  .js [data-anim="split"].is-after .section-title,
  .js [data-anim="split"].is-after .prose,
  .js [data-anim="split"].is-after .pull-quote {
    transition-duration: 0.45s;
    opacity: 0;
    filter: blur(5px);
  }
  .js [data-anim="split"].is-after .prose { transform: translateX(44px); }
  .js [data-anim="split"].is-after .pull-quote { transform: translateX(-44px); }

  /* ===== Serviços: «deal» =====
     As células chegam de baixo, ligeiramente deitadas, como cartas
     distribuídas. Saem a encolher pela ordem inversa. */
  .js [data-anim="deal"] .bento { perspective: 900px; }
  .js [data-anim="deal"] .cell,
  .js [data-anim="deal"] .division-title,
  .js [data-anim="deal"] .section-title,
  .js [data-anim="deal"] .section-lead {
    transition: opacity 0.65s var(--ease), transform 0.65s var(--ease);
    transition-delay: calc(var(--i, 0) * 80ms);
  }
  .js [data-anim="deal"].is-before .cell {
    opacity: 0;
    transform: translateY(60px) rotateX(-12deg);
  }
  .js [data-anim="deal"].is-before .division-title { opacity: 0; transform: translateX(-28px); }
  .js [data-anim="deal"].is-before .section-title,
  .js [data-anim="deal"].is-before .section-lead { opacity: 0; transform: translateY(24px); }

  .js [data-anim="deal"].is-after .cell {
    transition-duration: 0.4s;
    transition-delay: calc((2 - var(--i, 0)) * 45ms);
    opacity: 0;
    transform: translateY(-26px) scale(0.9);
  }
  .js [data-anim="deal"].is-after .division-title,
  .js [data-anim="deal"].is-after .section-title,
  .js [data-anim="deal"].is-after .section-lead {
    transition-duration: 0.4s;
    opacity: 0;
    transform: translateY(-20px);
  }

  /* ===== Processo: «draw» =====
     A régua desenha-se da esquerda para a direita porque os três passos têm
     ordem. Ao sair recolhe pela direita, e o texto escorrega no mesmo
     sentido: a sequência desfaz-se pelo fim, não pelo princípio. */
  .js [data-anim="draw"] .step::after {
    transition: transform 0.6s var(--ease);
    transition-delay: calc(var(--i, 0) * 120ms);
  }
  .js [data-anim="draw"] .step > *,
  .js [data-anim="draw"] .step::before {
    transition: opacity 0.6s var(--ease), transform 0.6s var(--ease);
    transition-delay: calc(var(--i, 0) * 120ms + 140ms);
  }
  .js [data-anim="draw"] .section-title {
    transition: opacity 0.6s var(--ease), transform 0.6s var(--ease);
  }
  .js [data-anim="draw"].is-before .step::after { transform: scaleX(0); }
  .js [data-anim="draw"].is-before .step > *,
  .js [data-anim="draw"].is-before .step::before { opacity: 0; transform: translateY(18px); }
  .js [data-anim="draw"].is-before .section-title { opacity: 0; transform: translateY(24px); }

  .js [data-anim="draw"].is-after .step::after {
    transition-duration: 0.35s;
    transform-origin: 100% 50%;
    transform: scaleX(0);
  }
  .js [data-anim="draw"].is-after .step > *,
  .js [data-anim="draw"].is-after .step::before {
    transition-duration: 0.35s;
    transition-delay: 0s;
    opacity: 0;
    transform: translateX(30px);
  }
  .js [data-anim="draw"].is-after .section-title {
    transition-duration: 0.35s;
    opacity: 0;
    transform: translateX(30px);
  }

  /* ===== Faixa de clientes: «shutter» =====
     Abre pelos lados, fecha por cima e por baixo. */
  .js [data-anim="shutter"] { transition: clip-path 0.7s var(--ease); }
  .js [data-anim="shutter"].is-before { clip-path: inset(0 50% 0 50%); }
  .js [data-anim="shutter"].is-after { transition-duration: 0.4s; clip-path: inset(50% 0 50% 0); }

  .marquee-track { animation: marquee 28s linear infinite; }
  /* :focus-within dá a quem navega por teclado a mesma pausa que o rato tem
     (WCAG 2.2.2). A classe .paused é aplicada pelo IntersectionObserver. */
  .clients-marquee:hover .marquee-track,
  .clients-marquee:focus-within .marquee-track,
  .clients-marquee.paused .marquee-track { animation-play-state: paused; }
  @keyframes marquee {
    from { transform: translateX(0); }
    to   { transform: translateX(-50%); }
  }

  /* ===== Perguntas: «unfold» =====
     Cada resposta desdobra-se de cima para baixo, uma a seguir à outra.
     Ao sair limpam-se da direita para a esquerda, como uma folha virada. */
  .js [data-anim="unfold"] .faq details {
    transition: opacity 0.55s var(--ease), transform 0.55s var(--ease), clip-path 0.6s var(--ease);
  }
  .js [data-anim="unfold"] .faq details:nth-child(1) { transition-delay: 0ms; }
  .js [data-anim="unfold"] .faq details:nth-child(2) { transition-delay: 70ms; }
  .js [data-anim="unfold"] .faq details:nth-child(3) { transition-delay: 140ms; }
  .js [data-anim="unfold"] .faq details:nth-child(4) { transition-delay: 210ms; }
  .js [data-anim="unfold"] .faq details:nth-child(5) { transition-delay: 280ms; }
  .js [data-anim="unfold"] .faq-intro {
    transition: opacity 0.6s var(--ease), transform 0.6s var(--ease);
  }
  .js [data-anim="unfold"].is-before .faq details {
    opacity: 0;
    transform: translateY(16px);
    clip-path: inset(0 0 100% 0);
  }
  .js [data-anim="unfold"].is-before .faq-intro { opacity: 0; transform: translateY(26px); }

  .js [data-anim="unfold"].is-after .faq details {
    transition-duration: 0.35s;
    transition-delay: 0s;
    opacity: 0;
    clip-path: inset(0 100% 0 0);
  }
  .js [data-anim="unfold"].is-after .faq-intro {
    transition-duration: 0.35s;
    opacity: 0;
    transform: translateX(-30px);
  }

  /* ===== Contacto: «lift» =====
     Os cartões sobem e assentam. Ao sair afundam e desfocam, como se a
     página os pousasse. */
  .js [data-anim="lift"] .contact-info > .section-title,
  .js [data-anim="lift"] .contact-info > .section-lead,
  .js [data-anim="lift"] .person-card,
  .js [data-anim="lift"] .contact-extra li,
  .js [data-anim="lift"] .quick,
  .js [data-anim="lift"] .contact-map {
    transition: opacity 0.7s var(--ease), transform 0.7s var(--ease), filter 0.5s var(--ease);
  }
  .js [data-anim="lift"] .person-card:nth-of-type(2) { transition-delay: 80ms; }
  .js [data-anim="lift"] .contact-extra li { transition-delay: 160ms; }
  .js [data-anim="lift"] .quick { transition-delay: 60ms; }
  .js [data-anim="lift"] .contact-map { transition-delay: 150ms; }
  .js [data-anim="lift"].is-before .contact-info > .section-title,
  .js [data-anim="lift"].is-before .contact-info > .section-lead,
  .js [data-anim="lift"].is-before .person-card,
  .js [data-anim="lift"].is-before .contact-extra li,
  .js [data-anim="lift"].is-before .quick,
  .js [data-anim="lift"].is-before .contact-map {
    opacity: 0;
    transform: translateY(46px) scale(0.97);
  }
  .js [data-anim="lift"].is-after .contact-info > .section-title,
  .js [data-anim="lift"].is-after .contact-info > .section-lead,
  .js [data-anim="lift"].is-after .person-card,
  .js [data-anim="lift"].is-after .contact-extra li,
  .js [data-anim="lift"].is-after .quick,
  .js [data-anim="lift"].is-after .contact-map {
    transition-duration: 0.4s;
    transition-delay: 0s;
    opacity: 0;
    transform: translateY(34px) scale(1.02);
    filter: blur(6px);
  }

  /* ===== Rodapé: «settle» =====
     As colunas assentam uma a seguir à outra. É a última secção da página:
     só se chega a ela por cima, por isso entrada e saída partilham a mesma
     geometria — fingir o contrário seria uma animação a mentir. */
  .js [data-anim="settle"] .footer-grid > * {
    transition: opacity 0.6s var(--ease), transform 0.6s var(--ease);
  }
  .js [data-anim="settle"] .footer-grid > *:nth-child(2) { transition-delay: 70ms; }
  .js [data-anim="settle"] .footer-grid > *:nth-child(3) { transition-delay: 140ms; }
  .js [data-anim="settle"] .footer-grid > *:nth-child(4) { transition-delay: 210ms; }
  .js [data-anim="settle"].is-before .footer-grid > * { opacity: 0; transform: translateY(28px); }

  /* ===== Folha do menu: os itens entram em cascata ===== */
  .js .nav-sheet a {
    opacity: 0;
    translate: -8px 0;
    transition: opacity 0.3s var(--ease), translate 0.3s var(--ease),
                color 0.2s, background-color 0.2s;
  }
  .js .nav-sheet.open a { opacity: 1; translate: 0 0; }
  .js .nav-sheet.open a:nth-child(1) { transition-delay: 0.04s; }
  .js .nav-sheet.open a:nth-child(2) { transition-delay: 0.085s; }
  .js .nav-sheet.open a:nth-child(3) { transition-delay: 0.13s; }
  .js .nav-sheet.open a:nth-child(4) { transition-delay: 0.175s; }
  .js .nav-sheet.open a:nth-child(5) { transition-delay: 0.22s; }

  /* ===== Brilho direcional no botão primário ===== */
  .btn-primary::before {
    background: linear-gradient(110deg, transparent 32%, rgb(var(--sheen) / 0.4) 50%, transparent 68%);
    background-repeat: no-repeat;
    background-size: 100% 100%;
    background-position: -140% 0;
    transition: background-position 0.7s ease;
  }
  .btn-primary:hover::before { background-position: 240% 0; }
}