/* ============================================================
   Rafael Rodoval — Branding
   Layout de referência: Portfólio Site Branding.pdf (1440 × 6258)
   Mesmo esquema da Social Media: texto à esquerda, parede de
   imagens à direita. Header, rodapé e tipografia base em site.css.
   ============================================================ */

.visually-hidden {
  position: absolute;
  width: 1px;
  height: 1px;
  overflow: hidden;
  clip: rect(0 0 0 0);
  white-space: nowrap;
}

/* grade começa a 155px do topo, como na Social Media */
.br { padding-top: 18px; }

.brand {
  display: grid;
  grid-template-columns: 390px minmax(0, 1fr);
  padding-right: 46px;
}

/* mesmo respiro entre marcas que entre clientes na Social Media; a
   tartaruga da CORA sobe 36px acima da primeira foto e cabe folgada */
.brand + .brand { margin-top: 120px; }

/* texto rola junto com as imagens, sem fixar (ver social-media.css).
   O título fica 512px abaixo do início das imagens, como no PDF */
.brand-aside {
  padding-left: 51px;
  padding-top: 494.5px;
}

/* como a intro da Social Media: o texto da RROD começa logo abaixo da
   primeira tela, então ao carregar só aparecem as imagens */
#rrod .brand-aside { padding-top: max(494.5px, calc(100vh - 115px)); }

.brand-text { max-width: 205px; }

.br h2 {
  font-family: "corporate-a-std-urw-cond", serif;
  font-weight: 300;
  font-size: 17px;
  line-height: 24px;
  letter-spacing: 0.3em;
}

.br p {
  font-size: 12px;
  line-height: 15px;
  text-wrap: pretty;
}

.brand-text p { margin-top: 15px; }
.brand-text h2 + p { margin-top: 15.5px; }

.br em { font-style: italic; }

/* ---------- Parede de imagens ---------- */

/* a parede é a referência dos ícones: cqw = 1% da largura dela, e o
   PDF mede 1008px de largura, então 1px do PDF = 100cqw / 1008 */
.wall {
  position: relative;
  container-type: inline-size;
}

.row {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
}

/* proporção fixa por linha: arquivos com 1–2px de diferença são
   aparados pelo cover e todas as fotos da linha encaixam */
.wall img {
  width: 100%;
  height: auto;
  object-fit: cover;
}

/* sem frestas durante o fade de entrada (ver social-media.css): cada
   foto avança 1px sobre a vizinha, e cada linha 1px sobre a de baixo.
   O corte fica na linha, não na parede, para os amuletos poderem
   passar da borda */
.row { overflow: hidden; }

.row img {
  width: calc(100% + 1px);
  margin-right: -1px;
}

.tiles > .row,
.tiles > img.wide { margin-bottom: -1px; }

.row img { aspect-ratio: 700 / 939; }
.row.tall img { aspect-ratio: 700 / 972; }
.row img.span-2 { grid-column: span 2; aspect-ratio: 1400 / 939; }
.wall img.wide { aspect-ratio: 2099 / 829; }

/* amuletos da CORA por cima das fotos, alguns passando da borda */
.wall img.charm {
  position: absolute;
  z-index: 1;
  left: calc(var(--x) * 100cqw / 1008);
  top: calc(var(--y) * 100cqw / 1008);
  width: calc(var(--w) * 100cqw / 1008);
  height: auto;
  object-fit: contain;
  pointer-events: none;
}

/* ---------- Legendas dos ícones ---------- */

.legend {
  list-style: none;
  text-align: center;
}

.legend-icon {
  display: flex;
  justify-content: center;
}

.legend img { height: auto; }

.legend p {
  font-size: 11px;
  line-height: 15px;
}

/* rrod: um ícone no centro de cada coluna da parede */
.legend-rrod {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  margin: 56px 0 55px;
}

.legend-rrod .legend-icon {
  height: 85px;
  align-items: center;
}

.legend-rrod p { margin-top: 22px; }

/* CORA: legenda centrada sob a parede, 4 + 3 amuletos */
.caption {
  width: 440px;
  margin: 45px auto 0;
}

.caption p + p { margin-top: 15px; }

.legend-cora { margin: 40px 0 57px; }

.legend-cora .legend {
  display: flex;
  justify-content: center;
}

.legend-cora .legend + .legend { margin-top: 15px; }

.legend-cora li { width: 210px; }

.legend-cora .legend-icon {
  height: 64px;
  align-items: flex-end;
}

.legend-cora p { margin-top: 12px; }

/* ---------- Entrada ---------- */

/* só fade, quando a imagem entra na tela e já carregou; dentro da
   linha, uma coluna um pouco depois da outra */
.js .wall img,
.js .legend img {
  opacity: 0;
  transition: opacity 0.9s ease;
}

.js .row img:nth-child(3n+2) { transition-delay: 0.08s; }
.js .row img:nth-child(3n) { transition-delay: 0.16s; }

/* amuletos entram depois das fotos embaixo deles */
.js .wall img.charm { transition-delay: 0.3s; }

.js .wall img.is-loaded,
.js .legend img.is-loaded { opacity: 1; }

@media (prefers-reduced-motion: reduce) {
  .js .wall img,
  .js .legend img { opacity: 1; transition: none; }
}

/* fotos de estúdio com fundo claro (CORA: as duas modelos e os quatro
   looks): o fundo se mistura ao creme da página (multiply), como na
   abertura da Fashion. A parede recebe o creme como fundo porque isola
   a mesclagem */
.wall { background: var(--page); }
.wall img.blend { mix-blend-mode: multiply; }

/* a foto mesclada avança 1px sobre a de cima (anti-fresta, ver acima),
   e ali a mesclagem multiplica as duas fotos: uma linha escura. Esse
   1px de cima é cortado, e a foto de cima aparece inteira ali */
.wall img.blend { clip-path: inset(1px 0 0 0); }

/* recortes dos quatro looks da CORA: só no celular */
.looks-m { display: none; }

/* ============================================================
   Celular
   ============================================================ */

@media (max-width: 767px) {
  .br { padding-top: 10px; }

  /* como na Social Media: o trabalho vem primeiro e o texto da marca
     logo abaixo dele; a próxima marca começa depois de um respiro maior */
  .brand {
    display: flex;
    flex-direction: column;
    padding-right: 0;
  }

  .brand-aside { order: 1; }

  .brand + .brand { margin-top: 80px; }

  /* texto no esquema da Print Design e da Fashion: 24px nas laterais,
     alinhado à esquerda e centralizado pela linha mais longa (gallery.js) */
  .brand-aside,
  #rrod .brand-aside { padding: 26px 24px 0; }

  .brand-text { max-width: none; }

  .brand-text p,
  .caption p {
    font-size: 13.5px;
    line-height: 18px;
  }

  .brand-text p { margin-top: 16px; }
  .brand-text h2 + p { margin-top: 20px; }

  /* 16px nas laterais, para os amuletos que passam da borda caberem */
  .brand-body { padding: 0 16px; }

  /* ---------- Mosaico em duas colunas ----------
     As linhas de três viram duas por linha: .row some (contents) e as
     fotos entram direto na grade. As largas ocupam a linha inteira,
     cortadas nas laterais para a altura de uma linha de fotos 3/4. */
  .tiles {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    overflow: hidden;
  }

  .tiles > .row,
  .looks-m { display: contents; }

  /* anti-fresta (ver acima): cada foto avança 1px sobre a vizinha e
     sobre a de baixo; a grade corta o que passa da borda */
  .tiles img {
    width: calc(100% + 1px);
    margin: 0 -1px -1px 0;
  }

  .tiles > img.wide,
  .row img.span-2 {
    grid-column: 1 / -1;
    aspect-ratio: 1400 / 939;
  }

  /* thinking, printed: o texto não cabe no corte, fica inteira por
     enquanto */
  .tiles > img.wide[src*="rrod-04"] { aspect-ratio: 2099 / 829; }

  /* os quatro looks: cada célula mostra um quarto da foto larga */
  .looks-m img {
    aspect-ratio: 524.75 / 829;
    object-position: 0 50%;
  }

  .looks-m img:nth-child(2) { object-position: 33.333% 50%; }
  .looks-m img:nth-child(3) { object-position: 66.667% 50%; }
  .looks-m img:nth-child(4) { object-position: 100% 50%; }

  /* fotos mescladas: em vez de cortar 1px no topo (ver acima), a foto
     comum da frente cobre a borda da mesclada. O corte caía numa fração
     de pixel, e nesse pixel a mesclagem multiplicava as duas fotos: uma
     linha escura sob o banner rosa. Os looks usam uma versão com o fundo
     branco puro (cora-10-m), que no multiply vira exatamente o creme:
     sem emenda nem diferença de tom entre eles */
  .wall img.blend { clip-path: none; }

  .tiles img:not(.blend) {
    position: relative;
    z-index: 1;
  }

  .wall img.charm { z-index: 2; }

  .tiles > img.wide.blend { display: none; }

  /* ordem das duplas: cores alternadas e sem duas fotos parecidas lado
     a lado. rrod: 01 02 / thinking, printed / 03 06 / 05 07.
     CORA: 07 08 / 09 13 / quatro looks / 11 12 */
  .tiles img[src*="rrod-04"] { order: 1; }
  .tiles img[src*="rrod-03"] { order: 2; }
  .tiles img[src*="rrod-06"] { order: 3; }
  .tiles img[src*="rrod-05"] { order: 4; }
  .tiles img[src*="rrod-07"] { order: 5; }

  .tiles img[src*="cora-13"] { order: 1; }
  .looks-m img { order: 2; }
  .tiles img[src*="cora-11"] { order: 3; }
  .tiles img[src*="cora-12"] { order: 4; }

  /* amuletos: posição própria no celular (--mx, --my, em % da largura
     do mosaico) e 1,5× o tamanho do desktop, como as fotos, que passam
     de três para duas colunas. Os que passariam da tela param na borda */
  .wall img.charm {
    --cw: calc(var(--w) * 1.5cqw * 100 / 1008);
    width: var(--cw);
    top: calc(var(--my) * 1cqw);
    left: clamp(-16px, calc(var(--mx) * 1cqw), calc(100cqw + 16px - var(--cw)));
  }

  /* ---------- Legendas ---------- */

  /* ícones da rrod na metade do tamanho anterior (35% do desktop) */
  .legend-rrod { margin: 36px 0 40px; }
  .legend-rrod .legend-icon { height: 30px; }
  .legend-rrod img { transform: scale(0.35); }
  .legend p { font-size: 10px; line-height: 13px; }
  .legend-rrod p { margin-top: 10px; }

  .caption {
    width: auto;
    margin-top: 40px;
    padding: 0 8px;
  }

  .caption p + p { margin-top: 16px; }

  /* amuletos da CORA em galeria: um por tela, com a legenda embaixo,
     deslizando como as galerias das outras páginas. Bullets em
     branding.js, no desenho de gallery.css */
  .legend-cora {
    display: flex;
    margin: 36px -16px 0;
    overflow-x: auto;
    scroll-snap-type: x mandatory;
    overscroll-behavior-x: contain;
    scrollbar-width: none;
  }

  .legend-cora::-webkit-scrollbar { display: none; }

  .legend-cora .legend { display: contents; }

  .legend-cora li {
    flex: none;
    width: 100%;
    scroll-snap-align: start;
    scroll-snap-stop: always;
  }

  /* ícones 1,65× o tamanho do desktop, crescendo a partir da base */
  .legend-cora .legend-icon { height: 112px; }

  .legend-cora img {
    transform: scale(1.65);
    transform-origin: 50% 100%;
  }

  .legend-cora p {
    margin-top: 14px;
    font-size: 11px;
    line-height: 15px;
  }

  .legend-cora + .dots { margin: 14px auto 48px; }
}