/* ============================================================
   site.css — portfólio Thaís Oliveira
   O layout vem do design (Portfolio Thais.dc.html): os estilos
   estão inline no HTML, exatamente como saíram de lá. Aqui fica
   só o que atributo inline não dá conta:
     · o que o runtime do canvas fazia (marquee, hover, reveal)
     · o menu do celular, que o design não tinha
     · as fotos com fundo borrado
   ============================================================ */

/* ---------- base (do próprio design) ---------- */

* { margin: 0; padding: 0; box-sizing: border-box; }

html { scroll-behavior: smooth; -webkit-text-size-adjust: 100%; }

body {
  background: #0A0711;
  color: #F2EEF8;
  font-family: 'Space Grotesk', system-ui, -apple-system, 'Segoe UI', sans-serif;
  line-height: 1.5;
  -webkit-font-smoothing: antialiased;
}

a { color: #F2EEF8; text-decoration: none; }
a:hover { color: #FFD93D; }

img { display: block; }

::selection { background: #9D5CFF; color: #07050C; }

:focus-visible { outline: 2px solid #FFD93D; outline-offset: 3px; border-radius: 2px; }

/* pula pro conteúdo — só aparece com Tab */
.skip {
  position: absolute;
  left: -9999px;
  top: 0;
  z-index: 200;
  background: #FFD93D;
  color: #07050C;
  padding: .75rem 1.25rem;
  font-family: 'JetBrains Mono', monospace;
  font-size: .8rem;
}
.skip:focus { left: 0; }

/* ---------- carrossel de marcas ---------- */

@keyframes marquee {
  from { transform: translateX(0); }
  to   { transform: translateX(-50%); }
}

/* pausa quando o ponteiro está em cima — dá tempo de ler um logo */
.marquee:hover > div { animation-play-state: paused; }

/* ---------- menu do celular ----------
   O design tem só a nav horizontal; abaixo de 760px os 5 links
   espremem, então o hambúrguer entra no lugar deles. */

.burger {
  display: none;
  width: 40px;
  height: 36px;
  flex: none;
  background: transparent;
  border: 1px solid #241A38;
  border-radius: 7px;
  cursor: pointer;
  position: relative;
}
.burger span,
.burger span::before,
.burger span::after {
  position: absolute;
  left: 50%;
  width: 17px;
  height: 1.5px;
  background: #F2EEF8;
  transform: translateX(-50%);
  transition: transform .2s ease;
}
.burger span { top: 50%; margin-top: -.75px; }
.burger span::before { content: ''; top: -6px; left: 0; transform: none; }
.burger span::after  { content: ''; top:  6px; left: 0; transform: none; }

.burger[aria-expanded="true"] span { background: transparent; }
.burger[aria-expanded="true"] span::before { transform: translateY(6px) rotate(45deg); }
.burger[aria-expanded="true"] span::after  { transform: translateY(-6px) rotate(-45deg); }

@media (max-width: 760px) {
  .burger { display: block; }

  /* o display:flex inline perde pro !important quando o menu está fechado */
  .menu[hidden] { display: none !important; }

  .menu {
    position: absolute;
    top: 100%;
    left: 0;
    right: 0;
    flex-direction: column !important;
    align-items: stretch;
    gap: 0 !important;
    background: #0D0916;
    border-bottom: 1px solid #241A38;
    padding: 4px clamp(20px, 5vw, 48px) 16px;
  }
  .menu a {
    display: block;
    padding: 14px 0;
    border-bottom: 1px solid #241A38;
  }
  .menu a:last-child { border-bottom: 0; }
}

/* ---------- fotos ----------
   No design isto era <image-slot>, do runtime do canvas. Virou HTML
   estático (fica na página, sem depender de JS).

   `cover`: a foto enche o espaço, com zoom e corte nas beiradas. As
   fotos vão de 0.55 a 1.5 de proporção e os espaços são 4/5, então as
   verticais quase não perdem nada e as horizontais perdem das laterais.
   Onde o corte tira algo importante, dá pra reenquadrar sem mexer no
   arquivo: `object-position` na foto (ver .ph--alto / .ph--baixo). */

.ph {
  position: absolute;
  inset: 0;
  overflow: hidden;
  background: #140D20;   /* --slot-bg do design */
}

.ph__img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: center;
}

/* reenquadramento por foto, quando o centro não é o que interessa */
.ph--alto   .ph__img { object-position: center 22%; }
.ph--baixo  .ph__img { object-position: center 78%; }
.ph--esq    .ph__img { object-position: 25% center; }
.ph--dir    .ph__img { object-position: 75% center; }

/* avatar de banca: círculo, recorte central */
.ph-circle {
  border-radius: 50%;
  object-fit: cover;
  background: #140D20;
}

/* ---------- fechamento: título + retrato ----------
   O título é a chamada final e continua mandando no espaço; o retrato
   entra ao lado, alinhado pela base, como uma assinatura. */

.fecho {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  gap: clamp(24px, 4vw, 56px);
  align-items: stretch;   /* a foto acompanha a altura do título */
}

.fecho h2 { margin: 0; }

/* A altura vem da linha do grid, ou seja, do título — assim o topo e a base
   batem com o texto. Alinhar só pela base deixava a foto 24px mais alta,
   sobrando acima da primeira linha, e era isso que parecia torto.
   O `min-height` protege o enquadramento quando o título fica curto. */
.retrato {
  position: relative;
  margin: 0;
  /* encolhe bastante no celular pra caber ao lado do título sem espremê-lo */
  width: clamp(92px, 26vw, 260px);
  min-height: clamp(130px, 26vw, 300px);
  border-radius: 6px;
  overflow: hidden;
  background: #140D20;
}

/* posicionamento absoluto porque porcentagem de altura não resolve contra
   altura vinda do grid — o mesmo problema que deu trabalho nos logos */
.retrato img {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: center 28%;   /* mantém o rosto quando o corte aperta */
}

/* No celular o retrato continua AO LADO do título, não embaixo. A foto
   encolhe pra caber; o título é que manda no espaço restante. */
@media (max-width: 720px) {
  .fecho { gap: clamp(12px, 3.5vw, 24px); }
}

/* ---------- ordem dos cases no celular ----------
   No design, cada case é um grid de duas colunas
   `repeat(auto-fit, minmax(300px,1fr))`, e o lado da foto alterna com
   `order` inline. Numa coluna só, esse `order` continua valendo — e em
   metade dos cases jogava a foto ANTES da marca, dando
   foto → marca → foto → foto.

   Aqui o texto (marca, título, talentos) vem sempre primeiro, e todas as
   fotos ficam juntas depois: marca → foto → foto → foto.

   Os pontos de virada não são arbitrários: o padding de #cases é 5vw,
   então o card mede 0.9 × viewport, e o grid quebra para uma coluna
   quando isso fica abaixo do que ele exige. Como o card em destaque usa
   `minmax(320px)` e os demais `minmax(300px)`, eles quebram em larguras
   diferentes — daí as duas regras. Acima disso, o layout de duas colunas
   do design segue intacto, com a alternação de lados preservada. */

/* demais cases: 300px × 2 = 600 -> quebra abaixo de 667px */
@media (max-width: 666px) {
  /* !important porque o `order` do design está no atributo style */
  .c-txt { order: -1 !important; }
  .c-mid { order:  0 !important; }
}

/* destaque: 320px × 2 = 640 -> quebra abaixo de 711px */
@media (max-width: 710px) {
  .c-feat .c-txt { order: -1 !important; }
  .c-feat .c-mid { order:  0 !important; }
}

/* ---------- hover ----------
   No design isto vinha em `style-hover="…"`, um atributo do runtime do
   canvas. Cada valor distinto virou uma classe; as declarações são as
   mesmas, palavra por palavra. */

.hv-link:hover { color: #A77CFF; }                 /* @ dos talentos e das bancas */
.hv-lift:hover { transform: translateY(-4px); }    /* avatar de banca             */
.hv-tile:hover { background: #140D20; }            /* card de "o que eu faço"     */
.hv-row:hover  { background: #150B22; }            /* linha de contato            */

.hv-card:hover {                                   /* card de case                */
  border-color: #A77CFF;
  transform: translateY(-4px);
}

/* o <a> herda a cor do pai; sem isto o a:hover global (amarelo) venceria */
.hv-link:hover { color: #A77CFF !important; }

/* ---------- entrada das seções (o runtime do canvas fazia isso) ---------- */

[data-reveal] {
  opacity: 0;
  transform: translateY(16px);
  transition: opacity .7s cubic-bezier(.2,.7,.2,1), transform .7s cubic-bezier(.2,.7,.2,1);
}
[data-reveal].is-in { opacity: 1; transform: none; }

/* ---------- acessibilidade: movimento reduzido ---------- */

@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  .marquee > div { animation: none !important; }
  [data-reveal] { opacity: 1; transform: none; transition: none; }
  * { animation-duration: .01ms !important; transition-duration: .01ms !important; }
}