/* ==========================================================================
   victoou.com — about.css   (escopo .page-about)
   Ordem vertical: hero · [reserved slot] · services · about-cta · footer
   ========================================================================== */

/* ==================================================== HERO (903px) ====== */
.page-about .hero {
  position: relative;
  min-height: min(903px, 100svh);
  height: 100svh;
  max-height: 1100px;
  display: flex;
  align-items: center;
  padding: clamp(150px, 20svh, 200px) 0 clamp(56px, 8svh, 80px);
}
.page-about .hero__inner { width: var(--container); }

/* o título recua 216px da borda esquerda do container (717 − 429 no arquivo) */
.page-about .hero__titleblock {
  position: relative;
  container-type: inline-size;
  /* largura + recuo não podem passar do container: o recuo é descontado */
  width: min(845px, 100% - min(216px, 12vw));
  margin-left: min(216px, 12vw);
}
/* Título — node 171:952: 262,95px com lh 71,29% e tracking −0,05em, num bloco
   de 1127x411 a partir de x=717 (o header nasce em x=429, daí o recuo de
   288 → 216px). Tudo convertido por 0,75. */
.page-about .hero__title {
  display: flex;
  flex-direction: column;
  align-items: flex-start;   /* mesma borda para ABOUT e ME, em qualquer largura */
  justify-content: center;
  width: 100%;
  min-height: 240px;
  font-family: var(--font-display);
  font-weight: var(--w-regular);
  font-size: min(var(--fs-hero), 42cqw);
  line-height: var(--lh-about-hero);   /* 71,29% */
  letter-spacing: var(--ls-hero);
  text-transform: uppercase;
  color: var(--text-about);
}
/* cada linha sobe em fade, uma após a outra */
.page-about .hero__line {
  display: block;
  opacity: 0;
  transform: translateY(0.34em);
  transition: opacity .9s var(--ease), transform .9s var(--ease);
}
.page-about .hero__title.is-in .hero__line { opacity: 1; transform: none; }
.page-about .hero__title.is-in .hero__line--me { transition-delay: .14s; }

/* A segunda linha é uma fileira: "ME" e, ao lado, a faixa preenchendo o vão
   até a borda direita do bloco. Em fluxo, não posicionada — era o
   posicionamento absoluto que fazia a faixa sobrar e subir sobre "ABOUT". */
.page-about .hero__line--me {
  position: relative;
  top: 14px;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 23.65px;
  width: min(658px, 100%);
}
/* A faixa abre como um recorte: o contorno cresce da esquerda para a direita
   (clip-path, sem mexer no espaço que ela ocupa) e a foto dá um zoom-out lento
   por dentro. Duas camadas porque uma só não permite recortar e escalar em
   tempos diferentes. */
.page-about .hero__strip {
  position: relative;
  flex: 0 1 auto;
  width: 345px;
  height: 112px;
  min-width: 0;
  border: 0;
  overflow: hidden;
  background: var(--bg);
  /* abre do centro para as duas bordas */
  clip-path: inset(0 50% 0 50%);
  transition: clip-path 1.1s var(--ease);
}
.page-about .hero__title.is-in .hero__strip {
  clip-path: inset(0);
  transition-delay: .34s;
}
.page-about .hero__strip::after { content: none; }

.page-about .hero__strip-img {
  position: absolute;
  inset: 0;
  background-image: url('../img/about-strip.webp');
  background-size: cover;
  background-position: center;
  background-repeat: no-repeat;
  transform: scale(1.22);
  transition: transform 5s var(--ease);
}
.page-about .hero__title.is-in .hero__strip-img {
  transform: none;
  transition-delay: .34s;
}

/* Frase — left 716 / top 829 / 1128 de largura, 64px com lh 61,6px e
   tracking −2px, alinhada à direita na mesma régua do título. */
.page-about .hero__phrase {
  /* mesma largura do bloco do título (medida em main.js): as duas colunas
     começam e terminam na mesma régua */
  position: relative;
  left: min(113px, 8vw);
  top: -15px;
  width: min(636px, 100% - min(216px, 12vw));
  margin-left: min(216px, 12vw);
  margin-top: 45.75px;            /* 829 − (357 + 411) */
  text-align: right;
  font-weight: var(--w-bold);
  font-size: var(--fs-manifesto);
  line-height: 35.46px;
  letter-spacing: -1.5px;         /* −2px no arquivo */
  color: var(--text-about);
}

/* ================================================= SERVICES (914px) ===== */
.page-about .services { min-height: 914px; padding: 100px 0; }

.page-about .services__intro {
  width: 631px;      /* 841 no arquivo */
  max-width: 100%;
  margin-left: auto;
}
/* entrelinha e tracking exatos do arquivo: 61,6px sobre 64px, −3,36px */
.page-about .services__title {
  line-height: 0.9625;
  letter-spacing: -2.52px;
}
.page-about .services__title {
  font-weight: var(--w-bold);
  font-size: var(--fs-manifesto);
  line-height: var(--lh-p);
  letter-spacing: var(--ls-manifesto);
  color: var(--text);
}
.page-about .services__copy {
  margin-top: 26px;
  font-size: var(--fs-p-24);
  line-height: var(--lh-p);
  color: var(--text);
}

.page-about .services__row {
  display: flex;
  flex-wrap: wrap;
  align-items: flex-end;
  justify-content: space-between;
  gap: 40px;
  margin-top: 97px;   /* 610 − (211 + 270) no arquivo */
}
.page-about .services__eyebrow { color: var(--text-eyebrow); flex: none; }

.page-about .services__cards { display: flex; flex-wrap: wrap; gap: 19.5px; min-width: 0; }
.page-about .service-card {
  width: 269px;
  max-width: 100%;
  height: 363px;
  border: 2px solid var(--stroke-soft);
  background: none;
  padding: 235px 66px 34px 24px;
  display: flex;
  align-items: flex-end;
}
.page-about .service-card__title {
  font-weight: var(--w-bold);
  font-size: var(--fs-manifesto);
  line-height: 0.9625;      /* 61,6px sobre 64px */
  letter-spacing: -2.52px;  /* −3,36px no arquivo */
  text-transform: uppercase;
  color: var(--text-soft);
}

/* ================================================ ABOUT-CTA (725px) ===== */
.page-about .about-cta {
  min-height: 725px;
  background-color: var(--bg);
  background-size: cover;
  background-position: center;
  display: flex;
  align-items: center;
  padding: 80px 0;
}
.page-about .about-cta__inner {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 64px;
  flex-wrap: wrap;
}
.page-about .about-cta__title {
  width: 560px;        /* 746 no arquivo */
  max-width: 100%;
  font-weight: var(--w-bold);
  font-size: var(--fs-section);
  line-height: 0.8984;  /* 115px sobre 128px */
  letter-spacing: var(--ls-section);
  text-transform: uppercase;
  color: var(--text-soft);
}
.page-about .about-cta__copy {
  /* 704 no arquivo → 528px como teto em 1920; abaixo disso encolhe, senão
     o parágrafo estoura o container e é cortado pelo overflow-x: clip */
  flex: 0 1 528px;
  min-width: 0;
  font-size: var(--fs-p-24);
  line-height: var(--lh-p);   /* 95,72% */
  color: var(--text-soft);
  text-align: justify;
  color: var(--text);
}

/* fundo do CTA final: o jpg entra por cima do placeholder quando existir */
.page-about .about-cta { position: relative; }
.page-about .about-cta__bg {
  position: absolute;
  inset: 0;
  height: 100%;
  border: 0;
  background-color: var(--bg);
  background-image: url('../img/about-cta-bg.webp');
  background-size: cover;
  background-position: center;
  background-repeat: no-repeat;
}
.page-about .about-cta__inner { position: relative; z-index: 1; }

/* --------------------------------------------------------------------------
   Frase do hero: entra linha a linha, depois do título e da faixa.
   -------------------------------------------------------------------------- */
.page-about .hero__phrase .l {
  display: inline-block;
  opacity: 0;
  transform: translateY(0.4em);
  transition: opacity .8s var(--ease), transform .8s var(--ease);
}
.page-about .hero__phrase.is-in .l { opacity: 1; transform: none; }
.page-about .hero__phrase.is-in .l:nth-child(1) { transition-delay: .55s; }
.page-about .hero__phrase.is-in .l:nth-child(2) { transition-delay: .67s; }
.page-about .hero__phrase.is-in .l:nth-child(3) { transition-delay: .79s; }
.page-about .hero__phrase.is-in .l:nth-child(4) { transition-delay: .91s; }

/* o deslocamento lateral é descontado da largura, para a frase não passar da
   coluna de conteúdo */
.page-about .hero__phrase {
  width: min(636px, 100% - min(216px, 12vw) - min(113px, 8vw));
}

/* --------------------------------------------------------------------------
   Cards de serviço — hover
   Mesmo clarão da seção de serviços da home (branco quente → vermelho →
   preto, nascendo na base) e, junto dele, o parágrafo da entrega.
   -------------------------------------------------------------------------- */
.page-about .service-card {
  position: relative;
  overflow: hidden;
  transition: border-color .6s var(--ease);
}
.page-about .service-card__glow {
  position: absolute;
  inset: 0;
  background: radial-gradient(1090px 400px at 50% 108%,
    var(--accent-grad-1) 0%, var(--accent-grad-2) 34%, var(--bg) 82%);
  opacity: 0;
  transition: opacity .8s var(--ease);
  pointer-events: none;
}
.page-about .service-card:hover .service-card__glow,
.page-about .service-card:focus-within .service-card__glow { opacity: 1; }

.page-about .service-card__copy {
  position: relative;
  z-index: 1;
  margin-bottom: 18px;
  font-weight: var(--w-regular);
  font-size: var(--fs-ui-18);
  line-height: 1.24;
  color: var(--text);
  opacity: 0;
  transform: translateY(0.5em);
  transition: opacity .7s var(--ease), transform .7s var(--ease);
}
.page-about .service-card:hover .service-card__copy,
.page-about .service-card:focus-within .service-card__copy {
  opacity: 1;
  transform: none;
  transition-delay: .12s;
}
.page-about .service-card__title { position: relative; z-index: 1; }

/* o padding alto do topo dá lugar ao parágrafo no hover */
.page-about .service-card { padding-top: 235px; transition: padding-top .7s var(--ease), border-color .6s var(--ease); }
.page-about .service-card:hover,
.page-about .service-card:focus-within { padding-top: 96px; border-color: var(--accent); }

/* o conteúdo do card empilha: parágrafo acima, título ancorado na base
   (a regra anterior era uma fileira, e o texto ficava esmagado ao lado) */
.page-about .service-card {
  flex-direction: column;
  align-items: stretch;
  justify-content: flex-end;
  padding-right: 24px;
}
.page-about .service-card:hover,
.page-about .service-card:focus-within { padding-top: 34px; }
.page-about .service-card__copy { margin-bottom: 16px; font-size: var(--fs-p-19); line-height: 1.2; }

/* o parágrafo fica abaixo do título, e o clarão sobe da base em movimento */
.page-about .service-card { justify-content: flex-end; }
.page-about .service-card__copy { order: 2; margin: 16px 0 0; }
.page-about .service-card__title { order: 1; }

.page-about .service-card__glow {
  transform: translateY(24%) scale(0.9);
  transition: opacity .8s var(--ease), transform 1.1s var(--ease);
}
.page-about .service-card:hover .service-card__glow,
.page-about .service-card:focus-within .service-card__glow {
  transform: none;
}

/* O título volta à posição de antes: o parágrafo não reserva altura em
   repouso — ele expande no hover e é isso que empurra o título para cima. */
.page-about .service-card { padding-right: 66px; }
.page-about .service-card__copy {
  order: 2;
  margin: 0;
  max-height: 0;
  overflow: hidden;
  opacity: 0;
  transform: none;
  transition: max-height .75s var(--ease), margin-top .75s var(--ease), opacity .6s var(--ease);
}
.page-about .service-card:hover .service-card__copy,
.page-about .service-card:focus-within .service-card__copy {
  max-height: 240px;
  margin-top: 16px;
  opacity: 1;
}

/* parágrafo menor */
.page-about .service-card__copy { font-size: var(--fs-ui-18); line-height: 1.18; }

/* O clarão sobe da base ao entrar e depois fica pulsando. O zoom anterior
   distorcia o gradiente; aqui o movimento é só vertical. */
.page-about .service-card__glow {
  transform: translateY(100%);
  transition: opacity .6s var(--ease), transform .9s var(--ease);
  animation: none;
}
.page-about .service-card:hover .service-card__glow,
.page-about .service-card:focus-within .service-card__glow {
  transform: translateY(0);
  animation: card-glow-pulse 2.6s var(--ease) .9s infinite;
}
@keyframes card-glow-pulse {
  0%, 100% { opacity: 0.72; }
  50%      { opacity: 1; }
}

/* intro da seção de serviços: título e parágrafo ajustados */
.page-about .services__title { font-size: 42px; }
.page-about .services__copy { font-size: 23px; line-height: 31.62px; }

/* cascata do parágrafo da intro: uma linha por vez, de baixo para cima */
.page-about .services__copy .l {
  display: inline-block;
  opacity: 0;
  transform: translateY(0.5em);
  transition: opacity .75s var(--ease), transform .75s var(--ease);
}
.page-about [data-reveal-lines].is-in .services__copy .l { opacity: 1; transform: none; }
.page-about [data-reveal-lines].is-in .services__copy .l:nth-child(1) { transition-delay: .10s; }
.page-about [data-reveal-lines].is-in .services__copy .l:nth-child(2) { transition-delay: .20s; }
.page-about [data-reveal-lines].is-in .services__copy .l:nth-child(3) { transition-delay: .30s; }
.page-about [data-reveal-lines].is-in .services__copy .l:nth-child(4) { transition-delay: .40s; }
.page-about [data-reveal-lines].is-in .services__copy .l:nth-child(5) { transition-delay: .50s; }
.page-about [data-reveal-lines].is-in .services__copy .l:nth-child(6) { transition-delay: .60s; }

/* título da intro: entrada de baixo para cima, bem lenta (5s) */
.page-about .services__title {
  opacity: 0;
  transform: translateY(0.4em);
  transition: opacity 5s var(--ease), transform 5s var(--ease);
}
.page-about .services__intro.is-in .services__title { opacity: 1; transform: none; }

/* fundo do CTA — node 171:905 "SERVICES": enquadramento do arquivo,
   background-position 49.972% 1.723% e tamanho 121.766% 181.327% */
.page-about .about-cta__bg {
  position: absolute;
  inset: 0;
  border: 0;
  background-color: var(--bg);
  background-image: url('../img/about-cta-bg.webp');
  background-position: 49.972% 1.723%;
  background-size: 121.766% 181.327%;
  background-repeat: no-repeat;
}
.page-about .about-cta__bg::after { content: none; }

/* proporção preservada (cover em vez do tamanho esticado do arquivo) e
   entrada suave: leve zoom-out com fade quando a seção aparece */
.page-about .about-cta__bg {
  background-position: center 8%;
  background-size: cover;
  opacity: 0;
  transform: scale(1.12);
  transition: opacity 1.4s var(--ease), transform 2.6s var(--ease);
}
.page-about .about-cta.is-in .about-cta__bg { opacity: 1; transform: none; }

/* título e parágrafo alinhados no eixo vertical */
.page-about .about-cta__inner { align-items: center; }

/* --------------------------------------------------------------------------
   Selos de festival sobre o parágrafo do CTO — dois por linha, e o conjunto
   desce um pouco em relação ao topo da lâmina. Fundo mais escuro para os
   selos claros lerem sobre a foto.
   -------------------------------------------------------------------------- */
.page-about .about-cta__bg { filter: brightness(0.62); }
.page-about .about-cta__inner { align-items: flex-end; padding-bottom: 76px; }
.page-about .about-cta__title { margin-bottom: 6px; }

.page-about .about-cta__aside {
  display: flex;
  flex-direction: column;
  gap: 26px;
  width: min(528px, 100%);
}
.page-about .about-cta__laurels[hidden] { display: none; }
.page-about .about-cta__laurels {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  justify-content: start;
  gap: 18px 28px;
}
.page-about .laurel { justify-self: start; width: 100%; max-width: 280px; height: 92px; }
.page-about .laurel {
  display: block;
  height: 88px;
  background-position: center;
  background-size: contain;
  background-repeat: no-repeat;
  opacity: 0.92;
}
.page-about .about-cta__copy { width: 100%; }

/* seção mais baixa, parágrafo alinhado à base como o título, e a imagem de
   fundo sem exagero de escala */
.page-about .about-cta { min-height: 560px; }
.page-about .about-cta__inner { padding-bottom: 60px; }
.page-about .about-cta__aside { gap: 18px; }
.page-about .laurel { height: 72px; }
.page-about .about-cta__bg { background-size: 108% auto; background-position: center 12%; }
.page-about .about-cta.is-in .about-cta__bg { transform: none; }

.page-about .about-cta__copy { line-height: 36.32px; }

/* título e parágrafo com a MESMA base: o parágrafo estava esticado pela
   altura do bloco lateral, então a base dele descolava do título */
.page-about .about-cta__aside { justify-content: flex-end; height: auto; }
.page-about .about-cta__copy { flex: none; }
.page-about .about-cta__title { margin-bottom: 0; }

/* frase do hero: corpo e entrelinha ajustados, em duas linhas */
.page-about .hero__phrase { font-size: 40.9px; line-height: 44.91px; }
/* a linha de "ME" acompanha a largura do bloco, com a faixa encostada no texto */
/* a linha de ME ocupa a largura do bloco: a faixa preenche o vão até a borda
   direita, e o "M" fica no prumo do "A" */
.page-about .hero__line--me { width: 100%; justify-content: flex-start; }

/* o parágrafo encosta no prumo do "T" de ABOUT (--about-rule vem de main.js) */
.page-about .hero__phrase {
  left: auto;
  margin-left: auto;
  margin-right: var(--about-rule, 0px);
}

/* a faixa fica com a medida definida no editor, ancorada no topo do vão */
.page-about .hero__strip { width: 375px; height: 112px; }
.page-about .hero__strip-img { inset: 0 auto auto 0; width: 375px; height: 112px; }