/* ============================================================
   Rafael Rodoval — Portfolio Home
   Layout de referência: Portfólio Site Banners.pdf (1440 × 1024)
   ============================================================ */

:root {
  --highlight: #EDFF00;
  --text: #FFFAEE;   /* logo e textos em creme, como o menu das páginas internas */
  --fade: 0.5s;
}

/* texto selecionado: o amarelo do site com o texto quase preto, como
   nas páginas internas (site.css) */
::selection { background: var(--highlight); color: #1D1D1B; }

/* cruzamento suave entre páginas, feito pelo próprio navegador;
   quem não suporta apenas navega normalmente */
@view-transition { navigation: auto; }

::view-transition-old(root),
::view-transition-new(root) {
  animation-duration: 0.42s;
  animation-timing-function: ease;
}

@media (prefers-reduced-motion: reduce) {
  ::view-transition-old(root),
  ::view-transition-new(root) { animation-duration: 0.01s; }
}

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

html, body {
  width: 100%;
  height: 100%;
  overflow: hidden;
  background: #000;
}

/* ---------- Banners de fundo (full-bleed, crossfade) ---------- */

.banners { position: fixed; inset: 0; z-index: 0; }

.banner {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  opacity: 0;
  transition: opacity var(--fade) ease;
  /* um pouco mais escuras: o creme contrasta menos que o branco */
  filter: brightness(0.95);
}

.banner.is-active { opacity: 1; }

/* a área sob a logo neste banner é um cinza-claro chapado: a logo
   branca ficava em 2.38 de contraste, único abaixo do mínimo de 3 */
.banner[data-banner="social-media"] {
  filter: brightness(0.65);
  object-position: center 44%;
}

/* o "rrod" fica a 32% da altura da imagem; centralizado, ele subia
   demais em janelas largas e encostava na logo */
.banner[data-banner="branding"] { object-position: center 28%; }

/* o lenço ocupa de 17% a 77% da altura da imagem; centralizado, o
   topo dele era cortado em janelas largas e baixas */
.banner[data-banner="print-design"] { object-position: center 42%; }

/* Fashion: véu leve só nas faixas onde ficam a logo e o menu, para o
   meio da foto não perder nada. O caso crítico é o amarelo do hover,
   que por ser claríssimo precisa de fundo mais escuro que o branco. */
.banners::after {
  content: "";
  position: absolute;
  inset: 0;
  pointer-events: none;
  opacity: 0;
  transition: opacity var(--fade) ease;
  background:
    linear-gradient(to bottom, rgba(0,0,0,0.22) 0%, rgba(0,0,0,0.17) 9%, rgba(0,0,0,0) 20%),
    linear-gradient(to top,    rgba(0,0,0,0.22) 0%, rgba(0,0,0,0.20) 20%, rgba(0,0,0,0) 34%);
}

body[data-banner="fashion"] .banners::after { opacity: 1; }

/* ---------- Logo (fixo, não muda com hover) ---------- */

/* Posições e tamanhos em vh/vw = frações exatas do artboard do PDF
   (1440 × 1024): logo em (50, 64), menu com baseline do FASHION a
   188px do rodapé, About/Contact com baseline a 91px do rodapé. */

.logo {
  position: fixed;
  top: 3.4vh;
  left: 2.2vw;
  z-index: 2;
}

.logo a { display: block; }

.logo img {
  display: block;
  width: 19vw;
  height: auto;
}

/* ---------- Menu de categorias ---------- */

.menu {
  position: fixed;
  right: 2.2vw;
  bottom: calc(12.6vh - 0.52vw);
  z-index: 2;
  display: flex;
  flex-direction: column;
  align-items: flex-end;
  text-align: right;
}

.menu-item {
  font-family: "azo-sans-web", sans-serif;
  font-weight: 200;
  font-style: normal;
  font-size: 2.4vw;
  line-height: 2.24vw;
  color: var(--text);
  text-decoration: none;
  white-space: nowrap;
  transition: color var(--fade) ease;
}

.menu-item:hover { color: var(--highlight); }

/* Itálico letra a letra + letter-spacing por segmento (replica Menu.svg) */
.it    { font-style: italic; }
.ls-16 { letter-spacing: -0.16em; }
.ls-12 { letter-spacing: -0.12em; }
.ls-10 { letter-spacing: -0.10em; }
.ls-07 { letter-spacing: -0.07em; }
.ls-04 { letter-spacing: -0.04em; }
.ls-0  { letter-spacing: 0; }

/* ---------- About / Contact ---------- */

.secondary {
  position: fixed;
  right: 2.2vw;
  bottom: calc(4.8vh - 0.32vw);
  z-index: 2;
  display: flex;
  gap: 5.6vw;
  /* compensa o letter-spacing após a última letra, mantendo a borda
     direita alinhada com o menu */
  margin-right: -0.3em;
  font-size: 1.25vw;
}

.secondary-item {
  font-family: "corporate-a-std-urw-cond", serif;
  font-weight: 300;
  font-style: normal;
  font-size: 1.25vw;
  line-height: 1.25vw;
  letter-spacing: 0.3em;
  color: var(--text);
  text-decoration: none;
  white-space: nowrap;
  transition: color var(--fade) ease;
}

/* No PDF, o hover em About OU Contact acende os dois */
.secondary:hover .secondary-item { color: var(--highlight); }

/* ---------- Toque: fotos se alternam sozinhas (script.js) ----------
   Sem hover, a categoria da foto que está na tela acende no menu. */

.menu-item.is-lit,
.secondary-item.is-lit { color: var(--highlight); }

/* ---------- Celular ---------- */

@media (max-width: 767px) {
  .logo {
    top: 22px;
    left: 16px;
  }

  .logo img { width: 150px; }

  /* menu mais perto do ABOUT/CONTACT */
  .menu {
    right: 16px;
    bottom: 64px;
  }

  .menu-item {
    font-size: 34px;
    line-height: 31px;
  }

  .secondary {
    right: 16px;
    bottom: 30px;
    gap: 28px;
    font-size: 12px;
  }

  .secondary-item {
    font-size: 12px;
    line-height: 12px;
    font-weight: 400;
  }

  /* véu escuro só embaixo (menu) e em cima (logo), em todas as fotos:
     no celular o menu fica sobre a parte mais movimentada da imagem */
  body::before {
    content: "";
    position: fixed;
    inset: 0;
    z-index: 1;
    pointer-events: none;
    background:
      linear-gradient(to bottom, rgba(0,0,0,0.28) 0%, rgba(0,0,0,0) 16%),
      linear-gradient(to top, rgba(0,0,0,0.5) 0%, rgba(0,0,0,0.32) 22%, rgba(0,0,0,0) 44%);
  }

  /* About: a roupa clara fica atrás do menu, então o véu é mais forte */
  body[data-banner="about-contact"]::before {
    background:
      linear-gradient(to bottom, rgba(0,0,0,0.28) 0%, rgba(0,0,0,0) 16%),
      linear-gradient(to top, rgba(0,0,0,0.74) 0%, rgba(0,0,0,0.54) 26%, rgba(0,0,0,0) 55%);
  }

  /* recortes para a tela em pé, que mostra só um terço da largura:
     o rosto fica à direita do logo, sobre o céu */
  .banner[data-banner="home"] { object-position: 30% center; }

  /* About: o rosto à direita do logo, sem a modelo ir para trás do menu */
  .banner[data-banner="about-contact"] {
    object-position: 33% center;
    /* sobe um pouquinho */
    top: -9%;
    height: 109%;
  }

  /* o lenço menor e no alto, longe do menu, em qualquer altura de tela.
     A foto tem 2,5× a largura da tela e sobe além do topo; o que sobra
     embaixo recebe a cor lisa do céu da base da imagem, então a emenda
     não aparece. A cor é o fundo da própria foto, não da página: entra
     e sai junto com ela no fade da troca, sem faixa aparecendo */
  .banner[data-banner="print-design"] {
    left: -75%;
    width: 250%;
    top: -10vw;
    height: calc(100% + 10vw);
    object-fit: contain;
    object-position: 50% 0;
    background: rgb(95, 135, 156);
  }

  .banner[data-banner="social-media"] { filter: brightness(0.55); }

  /* os rrod ficam à esquerda, longe do menu; podem sair um pouco da
     borda da tela */
  .banner[data-banner="branding"] {
    object-position: 30% center;
    /* sobe um pouco: a foto passa 8% da borda de cima */
    top: -8%;
    height: 108%;
  }
}