/* =========================================================
   Portfólio — Francisco Sá
   Layout mobile-first. O desenho original tem 810 unidades de
   largura; --u converte "unidades do design" em píxeis reais,
   para que tudo escale de forma proporcional em qualquer telemóvel.
   ========================================================= */

:root {
  --largura: min(100vw, 600px);          /* largura útil do site */
  --u: calc(var(--largura) / 810);       /* 1 unidade do design */
  --preto: #000;
  --ease-out: cubic-bezier(.22, 1, .36, 1);
  --ease-back: cubic-bezier(.34, 1.56, .64, 1);
}

*, *::before, *::after { box-sizing: border-box; }

html {
  background: var(--preto);
  -webkit-text-size-adjust: 100%;
  scroll-behavior: smooth;
}

body {
  margin: 0;
  background: var(--preto);
  overflow-x: hidden;
  -webkit-tap-highlight-color: transparent;
}

.site {
  width: 100%;
  max-width: 600px;
  margin: 0 auto;
  overflow-x: clip;
  background: var(--preto);
}

img { display: block; max-width: 100%; height: auto; }

.bloco { position: relative; width: 100%; }
.bloco > img { width: 100%; height: auto; }

/* =========================================================
   ANIMAÇÕES DE ENTRADA (ativadas ao fazer scroll)
   ========================================================= */

.js .bloco { opacity: 0; will-change: opacity, transform; }
.js .bloco.in { opacity: 1; }

/* --- Hero: zoom suave + desfoque a desaparecer, depois "respira" --- */
.js .anim-hero { overflow: hidden; }
.js .anim-hero.in > img {
  animation:
    hero-entrada 1.6s var(--ease-out) both,
    hero-respirar 14s ease-in-out 1.6s infinite alternate;
}
@keyframes hero-entrada {
  from { opacity: 0; transform: scale(1.14); filter: blur(14px); }
  to   { opacity: 1; transform: scale(1);    filter: blur(0); }
}
@keyframes hero-respirar {
  from { transform: scale(1); }
  to   { transform: scale(1.05); }
}

/* --- Crachá: entrada elegante e suave com foco cinematográfico --- */
.js .anim-cracha {
  transform: translateY(calc(40 * var(--u))) scale(0.96);
  filter: blur(10px);
  transition: opacity 1.1s cubic-bezier(0.16, 1, 0.3, 1),
              transform 1.1s cubic-bezier(0.16, 1, 0.3, 1),
              filter 0.9s cubic-bezier(0.16, 1, 0.3, 1);
}
.js .anim-cracha.in {
  opacity: 1;
  transform: translateY(0) scale(1);
  filter: blur(0);
}

/* --- Textos: sobem e aparecem --- */
.js .anim-subir { transform: translateY(calc(60 * var(--u))); transition: opacity 1s var(--ease-out), transform 1s var(--ease-out); }
.js .anim-subir.in { transform: none; }

/* --- Títulos: sobem com zoom + desfoque --- */
.js .anim-titulo {
  transform: translateY(calc(70 * var(--u))) scale(.9);
  filter: blur(8px);
  transition: opacity .9s var(--ease-out), transform 1s var(--ease-out), filter .9s var(--ease-out);
}
.js .anim-titulo.in { transform: none; filter: blur(0); }

/* --- Cartões "O que eu entrego": entram alternadamente da esquerda / direita --- */
.js .anim-cartao { transition: opacity .9s var(--ease-out), transform 1s var(--ease-out); }
.js .anim-cartao.esq { transform: translateX(calc(-120 * var(--u))); }
.js .anim-cartao.dir { transform: translateX(calc(120 * var(--u))); }
.js .anim-cartao.in { transform: none; }

/* --- Telemóvel: sobe e flutua --- */
.js .anim-telemovel { transform: translateY(calc(140 * var(--u))) scale(.92); transition: opacity 1.1s var(--ease-out), transform 1.2s var(--ease-out); }
.js .anim-telemovel.in { transform: none; }
.js .anim-telemovel.in > img { animation: flutuar 5s ease-in-out 1.2s infinite alternate; }
@keyframes flutuar {
  from { transform: translateY(0); }
  to   { transform: translateY(calc(-14 * var(--u))); }
}

/* --- Passos "Como funciona" --- */
.js .anim-passo { transform: translateY(calc(70 * var(--u))) scale(.96); transition: opacity .9s var(--ease-out), transform 1s var(--ease-out); }
.js .anim-passo.in { transform: none; }

/* --- Skills: "pop" em cascata --- */
.skills { width: 100%; }
.skills-linha { display: flex; width: 100%; }
.skills-linha .s-a { width: calc(410 / 810 * 100%); }
.skills-linha .s-b { width: calc(400 / 810 * 100%); }
.js .anim-skill { transform: scale(.55) translateY(calc(40 * var(--u))); transition: opacity .8s var(--ease-out), transform .9s var(--ease-back); }
.js .anim-skill.s-b { transition-delay: .15s; }
.js .anim-skill.in { transform: none; }

/* --- Rodapé --- */
.js .anim-rodape { transition: opacity 1.4s ease; }

/* =========================================================
   PORTFÓLIO — fotos em loop infinito da direita para a esquerda
   (substitui as molduras vazias do desenho original: mesma altura,
   mesmas linhas e mesmo espaçamento)
   ========================================================= */

.portfolio {
  position: relative;
  width: 100%;
  aspect-ratio: 810 / 1545;
  overflow: hidden;
  contain: layout paint;
}

.pf-linha {
  position: absolute;
  left: 0;
  right: 0;
  height: calc(640 * var(--u));
  overflow: hidden;
}
.pf-1 { top: calc(57 * var(--u)); }
.pf-2 { top: calc(725 * var(--u)); }

.pf-pista {
  display: flex;
  width: max-content;
  height: 100%;
  will-change: transform;
  animation: pf-mover var(--dur, 48s) linear infinite;
}
.pf-1 .pf-pista { --dur: 50s; }
.pf-2 .pf-pista { --dur: 46s; animation-delay: -18s; }   /* arranca desfasada da 1.ª linha */

.pf-grupo {
  display: flex;
  flex: none;
  gap: calc(28 * var(--u));
  padding-right: calc(28 * var(--u));
  height: 100%;
}
.pf-grupo img {
  flex: none;
  height: 100%;
  width: auto;
  aspect-ratio: 3 / 4;
  object-fit: cover;
  border-radius: calc(12 * var(--u));
  background: #0b0b0b;
}

/* movimento: direita -> esquerda; -50% = exatamente 1 grupo => loop sem saltos */
@keyframes pf-mover {
  from { transform: translate3d(0, 0, 0); }
  to   { transform: translate3d(-50%, 0, 0); }
}

/* =========================================================
   BOTÃO WHATSAPP (retângulo liquid glass do design)
   ========================================================= */

.contacto-botao {
  display: flex;
  justify-content: center;
  align-items: center;
  width: 100%;
  height: calc(320 * var(--u));           /* espaço livre que existia no design */
}

.btn-whatsapp {
  position: relative;
  display: block;
  width: calc(546 * var(--u));
  height: calc(138 * var(--u));
  color: #fff;
  text-decoration: none;
  -webkit-user-select: none;
  user-select: none;
  touch-action: manipulation;
  transform-origin: center;
  transition: transform .35s var(--ease-back), filter .35s ease;
}
.btn-glass { position: absolute; inset: 0; width: 100%; height: 100%; pointer-events: none; }

/* brilho que atravessa o vidro */
.btn-brilho {
  position: absolute;
  left: calc(7 * var(--u));
  top: calc(5 * var(--u));
  width: calc(525 * var(--u));
  height: calc(116 * var(--u));
  border-radius: calc(26 * var(--u));
  overflow: hidden;
  pointer-events: none;
}
.btn-brilho::before {
  content: "";
  position: absolute;
  top: -20%;
  bottom: -20%;
  width: 28%;
  left: -40%;
  background: linear-gradient(100deg, transparent, rgba(255, 255, 255, .28), transparent);
  transform: skewX(-18deg);
  animation: btn-brilho 4.2s ease-in-out 1.8s infinite;
}
@keyframes btn-brilho {
  0%   { left: -40%; }
  45%, 100% { left: 130%; }
}

.btn-conteudo {
  position: absolute;
  left: calc(7 * var(--u));
  top: calc(5 * var(--u));
  width: calc(525 * var(--u));
  height: calc(116 * var(--u));
  display: flex;
  align-items: center;
  justify-content: center;
  gap: calc(18 * var(--u));
}
.btn-icone {
  width: calc(46 * var(--u));
  height: calc(46 * var(--u));
  color: #25d366;
  flex: none;
  filter: drop-shadow(0 0 calc(10 * var(--u)) rgba(37, 211, 102, .55));
  animation: btn-icone 2.4s ease-in-out infinite;
}
@keyframes btn-icone {
  0%, 100% { transform: scale(1) rotate(0); }
  50%      { transform: scale(1.14) rotate(-8deg); }
}
.btn-texto {
  font-family: "Outfit", "Quicksand", system-ui, -apple-system, "Segoe UI", sans-serif;
  font-weight: 400;
  font-size: calc(33 * var(--u));
  line-height: 1;
  letter-spacing: .01em;
  white-space: nowrap;
}

/* pulsar suave de luz à volta do botão */
.btn-whatsapp::after {
  content: "";
  position: absolute;
  left: calc(7 * var(--u));
  top: calc(5 * var(--u));
  width: calc(525 * var(--u));
  height: calc(116 * var(--u));
  border-radius: calc(26 * var(--u));
  pointer-events: none;
  animation: btn-pulso 2.8s ease-out infinite;
}
@keyframes btn-pulso {
  0%   { box-shadow: 0 0 0 0 rgba(37, 211, 102, .45); }
  70%  { box-shadow: 0 0 0 calc(26 * var(--u)) rgba(37, 211, 102, 0); }
  100% { box-shadow: 0 0 0 0 rgba(37, 211, 102, 0); }
}

.js .contacto-botao .btn-whatsapp {
  opacity: 0;
  transform: translateY(calc(60 * var(--u))) scale(.8);
}
.js .contacto-botao.in .btn-whatsapp {
  opacity: 1;
  transform: none;
  transition: opacity .8s var(--ease-out), transform 1s var(--ease-back), filter .35s ease;
}
.btn-whatsapp:hover { transform: scale(1.04); filter: brightness(1.12); }
.btn-whatsapp:active { transform: scale(.96); }
.btn-whatsapp:focus-visible { outline: 2px solid #25d366; outline-offset: 6px; border-radius: calc(30 * var(--u)); }

/* =========================================================
   Acessibilidade: respeitar "reduzir movimento"
   ========================================================= */
@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  .js .bloco, .js .contacto-botao .btn-whatsapp { opacity: 1 !important; transform: none !important; filter: none !important; transition: none !important; }
  .js .bloco > img, .btn-brilho::before, .btn-icone, .btn-whatsapp::after { animation: none !important; }
  /* o portfólio continua a mover-se de forma lenta (é o conteúdo principal pedido) */
  .pf-1 .pf-pista { --dur: 90s; }
  .pf-2 .pf-pista { --dur: 84s; }
}