/* ==========================================================
   CONFIGURAÇÃO — cores, fontes e tamanhos. Edite apenas este bloco.
   ========================================================== */
:root {
  /* Cores */
  --white: #ffffff;
  --black: #111111;
  --grey: #6b6b6b;                 /* textos secundários */
  --grey-light: #b3b3b3;           /* filtros inativos */
  --line: rgba(0, 0, 0, .12);      /* bordas finas */
  --purple: #6a2cff;               /* detalhe roxo (hover, foco) */
  --tile-bg: #e9e9ec;              /* fundo das miniaturas enquanto carregam */
  --niche-bg: linear-gradient(160deg, #2b2b30, #0d0d0f);  /* retângulo de nicho sem capa */

  /* Fontes */
  --font: "Montserrat", system-ui, sans-serif;

  /* Logo */
  --logo-width: min(88vw, 880px);  /* largura do logo na tela principal */
  --studios-size: clamp(1.05rem, 2.6vw, 1.6rem);

  /* Formas e espaços */
  --radius: 14px;                  /* arredondamento de cabeçalho, nichos e miniaturas */
  --gap: 8px;                      /* espaço entre as miniaturas */
  --edge: 12px;                    /* distância das bordas da tela */
  --header-h: 64px;                /* altura do cabeçalho */
  --gutter: clamp(1.25rem, 4vw, 3rem);

  /* Vídeo de fundo: enquadramento */
  --video-position: center center;
}


/* ---------- Base ---------- */
*, *::before, *::after { box-sizing: border-box; }
html { scroll-behavior: smooth; scroll-padding-top: calc(var(--edge) + var(--header-h) + var(--edge)); }
body {
  margin: 0;
  background: var(--white);
  color: var(--black);
  font-family: var(--font);
  -webkit-font-smoothing: antialiased;
}
img, video { display: block; }
a { color: inherit; }
.visually-hidden {
  position: absolute; width: 1px; height: 1px; overflow: hidden;
  clip: rect(0 0 0 0); white-space: nowrap;
}


/* ---------- Cabeçalho ---------- */
body.is-scrolled::before {         /* faixa branca atrás do cabeçalho e dos filtros (após o logo) */
  content: "";
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  z-index: 4;
  height: calc(var(--edge) + var(--header-h) + var(--gap) + env(safe-area-inset-top, 0px));
  background: var(--white);
  pointer-events: none;
}
.topbar {
  position: fixed;
  top: calc(var(--edge) + env(safe-area-inset-top, 0px));
  left: var(--edge);
  right: var(--edge);
  z-index: 10;
  display: grid;
  grid-template-columns: 1fr auto 1fr;
  align-items: center;
  height: var(--header-h);
  padding: 0 clamp(1rem, 2vw, 1.75rem);
  background: var(--white);
  border: 1px solid var(--line);
  border-radius: var(--radius);
}
.topbar__left, .topbar__right {
  display: flex;
  gap: clamp(1rem, 2.2vw, 2rem);
  font-size: .8125rem;
  font-weight: 500;
  letter-spacing: .04em;
  text-transform: uppercase;
}
.topbar__right { justify-content: flex-end; }
.topbar a { text-decoration: none; transition: color .2s ease; }
.topbar__left a:hover, .topbar__right a:hover,
.topbar__left a:focus-visible, .topbar__right a:focus-visible { color: var(--purple); outline: none; }

.topbar__logo {                    /* aparece depois que o logo grande sai da tela */
  grid-column: 2;
  opacity: 0;
  pointer-events: none;
  transform: translateY(4px);
  transition: opacity .3s ease, transform .3s ease;
}
.topbar__logo img { height: 40px; width: auto; mix-blend-mode: multiply; }
.is-scrolled .topbar__logo { opacity: 1; pointer-events: auto; transform: none; }


/* ---------- Menu ⋯ (celular) ---------- */
.menu { display: none; position: relative; grid-column: 3; justify-self: end; }

.menu__button {
  display: grid;
  place-items: center;
  width: 44px;
  height: 44px;
  padding: 0;
  background: none;
  border: 0;
  border-radius: 50%;
  color: var(--black);
  cursor: pointer;
  transition: color .2s ease;
}
.menu__button svg { width: 28px; height: 28px; fill: currentColor; }
.menu__button:hover,
.menu__button[aria-expanded="true"] { color: var(--purple); }
.menu__button:focus-visible { outline: 2px solid var(--purple); outline-offset: 2px; }

.menu__list {
  position: absolute;
  top: calc(100% + .75rem);
  right: 0;
  min-width: 12rem;
  margin: 0;
  padding: .5rem 0;
  list-style: none;
  background: var(--white);
  border: 1px solid var(--line);
  border-radius: var(--radius);
  opacity: 0;
  visibility: hidden;
  transform: translateY(-4px);
  transition: opacity .18s ease, transform .18s ease, visibility 0s linear .18s;
}
.menu__list.is-open { opacity: 1; visibility: visible; transform: none; transition-delay: 0s; }
.menu__list a {
  display: block;
  padding: .75rem 1.25rem;
  font-size: .8125rem;
  font-weight: 500;
  letter-spacing: .06em;
  text-transform: uppercase;
  text-decoration: none;
  border-left: 2px solid transparent;
}
.menu__list a:hover,
.menu__list a:focus-visible { color: var(--purple); border-left-color: var(--purple); outline: none; }

@media (max-width: 768px) {
  .topbar__left, .topbar__right { display: none; }
  .menu { display: block; }
}


/* ---------- Tela principal ---------- */
.hero {
  position: relative;
  min-height: 100svh;
  display: grid;
  place-items: center;
  padding: calc(var(--header-h) + var(--gutter)) var(--gutter) var(--gutter);
  overflow: hidden;
  isolation: isolate;
}
.hero__video {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: var(--video-position);
  z-index: -1;
}
.hero__title { display: grid; justify-items: center; margin: 0; font-weight: 400; }
.hero__logo {
  width: var(--logo-width);
  height: auto;
  mix-blend-mode: multiply;        /* o branco do arquivo some sobre o fundo */
}
.hero__studios {
  margin-top: -.5rem;
  font-size: var(--studios-size);
  font-weight: 500;
  letter-spacing: .6em;
  text-indent: .6em;               /* compensa o espaçamento da última letra */
  text-transform: uppercase;
}

.hero__cue {                       /* tracinho animado convidando a rolar */
  position: absolute;
  bottom: calc(1.75rem + env(safe-area-inset-bottom, 0px));
  left: 50%;
  width: 1px;
  height: 48px;
  overflow: hidden;
  background: var(--line);
  transform: translateX(-50%);
}
.hero__cue span {
  position: absolute;
  inset: 0;
  background: var(--black);
  animation: cue 2s ease-in-out infinite;
}
@keyframes cue {
  0%   { transform: translateY(-100%); }
  60%, 100% { transform: translateY(100%); }
}


/* ---------- Nichos (3 retângulos) ---------- */
.nichos { padding: 0 var(--edge) var(--edge); }
.nichos__grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: var(--gap);
}
.nicho {
  position: relative;
  display: block;
  height: clamp(380px, 72vh, 760px);
  overflow: hidden;
  border-radius: var(--radius);
  background: var(--niche-bg);
  color: var(--white);
  text-decoration: none;
  isolation: isolate;
}
.nicho__media {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  z-index: -2;
  transition: transform .8s cubic-bezier(.2, .7, .2, 1);
}
.nicho::after {                    /* escurece a base para o nome ficar legível */
  content: "";
  position: absolute;
  inset: 0;
  z-index: -1;
  background: linear-gradient(to top, rgba(0, 0, 0, .55), rgba(0, 0, 0, 0) 55%);
}
.nicho__nome {
  position: absolute;
  left: clamp(1.25rem, 2.2vw, 2rem);
  right: clamp(1.25rem, 2.2vw, 2rem);
  bottom: clamp(1.25rem, 2.2vw, 2rem);
  display: flex;
  justify-content: space-between;
  align-items: baseline;
  font-size: clamp(1.25rem, 2.2vw, 2rem);
  font-weight: 500;
  letter-spacing: .18em;
  text-transform: uppercase;
}
.nicho__seta { font-weight: 400; letter-spacing: 0; transform: translateX(-6px); opacity: 0; transition: opacity .3s ease, transform .3s ease; }
.nicho:hover .nicho__media,
.nicho:focus-visible .nicho__media { transform: scale(1.04); }
.nicho:hover .nicho__seta,
.nicho:focus-visible .nicho__seta { opacity: 1; transform: none; }
.nicho:focus-visible { outline: 2px solid var(--purple); outline-offset: 3px; }

@media (max-width: 768px) {
  .nichos__grid { grid-template-columns: 1fr; }
  .nicho { height: clamp(260px, 52vh, 460px); }
  .nicho__seta { opacity: 1; transform: none; }
}

/* Entrada suave ao rolar (classe adicionada pelo script) */
.reveal {
  opacity: 0;
  transform: translateY(40px);
  transition: opacity .9s ease, transform .9s cubic-bezier(.2, .7, .2, 1);
  transition-delay: calc(var(--i, 0) * 120ms);
}
.reveal.is-visible { opacity: 1; transform: none; }


/* ---------- Trabalhos: filtros ---------- */
.trabalhos { padding: 0 var(--edge); }
.filtros {
  position: sticky;
  top: calc(var(--edge) + var(--header-h) + var(--gap) + env(safe-area-inset-top, 0px));
  z-index: 5;
  display: flex;
  align-items: center;
  min-height: 56px;
  overflow-x: auto;                /* no celular, rola para o lado em vez de quebrar linha */
  scrollbar-width: none;
  margin-bottom: var(--gap);
  padding: .5rem clamp(1rem, 2vw, 1.75rem);
  background: var(--white);
  border: 1px solid var(--line);
  border-radius: var(--radius);
}
.filtros::-webkit-scrollbar { display: none; }
.filtro {
  flex-shrink: 0;
  white-space: nowrap;
  padding: .5rem 0;
  background: none;
  border: 0;
  color: var(--grey-light);
  font: inherit;
  font-size: .8125rem;
  font-weight: 400;
  letter-spacing: .04em;
  text-transform: uppercase;
  cursor: pointer;
  transition: color .2s ease;
}
.filtro + .filtro::before {        /* bolinha separadora */
  content: "•";
  margin: 0 .6rem;
  color: var(--grey-light);
}
.filtro:hover { color: var(--black); }
.filtro[aria-selected="true"] { color: var(--black); font-weight: 500; }
.filtro:focus-visible { outline: 2px solid var(--purple); outline-offset: 2px; }

/* ---------- Trabalhos: grade ---------- */
.grade {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: var(--gap);
}
@media (max-width: 900px) { .grade { grid-template-columns: repeat(2, 1fr); } }
@media (max-width: 560px) { .grade { grid-template-columns: 1fr; } }

.work {
  position: relative;
  display: block;
  width: 100%;
  aspect-ratio: 16 / 9;
  margin: 0;
  padding: 0;
  overflow: hidden;
  background: var(--tile-bg);
  border: 0;
  border-radius: var(--radius);
  color: var(--white);
  font: inherit;
  text-align: left;
  cursor: pointer;
}
.work__thumb {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  transition: transform .6s cubic-bezier(.2, .7, .2, 1);
}
.work__info {
  position: absolute;
  inset: auto 0 0 0;
  padding: 2.5rem 1.25rem 1rem;
  background: linear-gradient(to top, rgba(0, 0, 0, .6), rgba(0, 0, 0, 0));
  opacity: 0;
  transition: opacity .25s ease;
}
.work__title, .work__credit { display: block; font-size: .8125rem; line-height: 1.45; }
.work__title { font-weight: 500; letter-spacing: .02em; }
.work__credit { color: rgba(255, 255, 255, .75); }
.work__play {                      /* ícone de play nos vídeos */
  position: absolute;
  top: 1rem;
  right: 1rem;
  width: 28px;
  height: 28px;
  fill: var(--white);
  opacity: 0;
  transition: opacity .25s ease;
  filter: drop-shadow(0 1px 4px rgba(0, 0, 0, .4));
}
.work:hover .work__thumb, .work:focus-visible .work__thumb { transform: scale(1.03); }
.work:hover .work__info, .work:focus-visible .work__info,
.work:hover .work__play, .work:focus-visible .work__play { opacity: 1; }
.work:focus-visible { outline: 2px solid var(--purple); outline-offset: 3px; }
@media (hover: none) {             /* no celular não há "passar o mouse": mostra sempre */
  .work__info, .work__play { opacity: 1; }
}

.grade__vazio {
  grid-column: 1 / -1;
  margin: 0;
  padding: 4rem 0;
  color: var(--grey);
  font-size: .875rem;
  text-align: center;
}


/* ---------- Sobre e Contato ---------- */
.sobre, .contato {
  display: grid;
  grid-template-columns: minmax(8rem, 1fr) 3fr;
  gap: 1.5rem var(--gutter);
  padding: clamp(4rem, 10vw, 8rem) var(--gutter);
}
.contato { border-top: 1px solid var(--line); margin: 0 var(--edge); padding-left: calc(var(--gutter) - var(--edge)); padding-right: calc(var(--gutter) - var(--edge)); }
@media (max-width: 768px) {
  .sobre, .contato { grid-template-columns: 1fr; }
}

.rotulo {
  margin: .5rem 0 0;
  font-size: .8125rem;
  font-weight: 500;
  letter-spacing: .04em;
  text-transform: uppercase;
}
.sobre__texto, .contato__chamada {
  max-width: 34ch;
  margin: 0;
  font-size: clamp(1.4rem, 2.6vw, 2.25rem);
  font-weight: 400;
  line-height: 1.3;
  letter-spacing: -.01em;
}
.sobre__servicos, .contato__links {
  display: flex;
  flex-wrap: wrap;
  gap: .5rem 1.75rem;
  margin: 2rem 0 0;
  padding: 0;
  list-style: none;
  font-size: .8125rem;
  font-weight: 500;
  letter-spacing: .04em;
  text-transform: uppercase;
}
.sobre__servicos { color: var(--grey); }
.contato__links a { text-decoration: none; border-bottom: 1px solid currentColor; transition: color .2s ease; }
.contato__links a:hover, .contato__links a:focus-visible { color: var(--purple); outline: none; }
.contato__rodape {
  grid-column: 1 / -1;
  margin: 3rem 0 0;
  color: var(--grey);
  font-size: .75rem;
  letter-spacing: .04em;
}


/* ---------- Player (abre ao clicar num trabalho) ---------- */
.player {
  position: fixed;
  inset: 0;
  z-index: 30;
  display: grid;
  place-items: center;
  padding: 4.5rem var(--gutter) var(--gutter);
  background: #000;
  opacity: 0;
  visibility: hidden;
  transition: opacity .2s ease, visibility 0s linear .2s;
}
.player.is-open { opacity: 1; visibility: visible; transition-delay: 0s; }
.player__slot { width: 100%; height: 100%; display: grid; place-items: center; }
.player__media { width: 100%; max-height: 100%; aspect-ratio: 16 / 9; border: 0; background: #000; }
img.player__media { width: auto; max-width: 100%; aspect-ratio: auto; object-fit: contain; }
.player__close {
  position: fixed;
  top: calc(1.5rem + env(safe-area-inset-top, 0px));
  right: 1.75rem;
  display: grid;
  place-items: center;
  width: 44px;
  height: 44px;
  padding: 0;
  background: none;
  border: 0;
  border-radius: 50%;
  color: var(--white);
  cursor: pointer;
  transition: color .2s ease;
}
.player__close svg { width: 24px; height: 24px; stroke: currentColor; stroke-width: 1.5; fill: none; }
.player__close:hover { color: var(--purple); }
.player__close:focus-visible { outline: 2px solid var(--purple); outline-offset: 2px; }


/* ---------- Movimento reduzido (acessibilidade) ---------- */
@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  *, *::before, *::after { transition: none !important; animation: none !important; }
  .reveal { opacity: 1; transform: none; }
}