/* ==========================================================================
   base.css — reset, escala e utilitários compartilhados
   Pi Mídias + Pi Filmes
   Não contém cor de marca. As cores vivem em pimidias.css / pifilmes.css.
   ========================================================================== */

/* --------------------------------------------------------------------------
   1. Tokens estruturais (compartilhados pelas duas páginas)
   -------------------------------------------------------------------------- */
:root {
  /* Largura de leitura */
  --container: 1180px;
  --container-wide: 1400px;
  --container-narrow: 760px;
  --gutter: clamp(1.25rem, 4vw, 2.5rem);

  /* Escala tipográfica fluida (320px → 1440px) */
  --fs-xs: 0.8125rem;                                  /* 13px  — rótulos */
  --fs-sm: 0.875rem;                                   /* 14px  — apoio */
  --fs-base: clamp(1rem, 0.97rem + 0.15vw, 1.0625rem); /* 16→17 — corpo */
  --fs-lg: clamp(1.0625rem, 1rem + 0.3vw, 1.1875rem);  /* 17→19 — lead */
  --fs-xl: clamp(1.25rem, 1.15rem + 0.5vw, 1.5rem);    /* 20→24 — h4/h3 */
  --fs-2xl: clamp(1.5rem, 1.3rem + 1vw, 2rem);         /* 24→32 — h3 */
  --fs-3xl: clamp(1.875rem, 1.5rem + 1.9vw, 2.875rem); /* 30→46 — h2 */
  --fs-4xl: clamp(2.25rem, 1.55rem + 3.5vw, 4.25rem);  /* 36→68 — h1 */

  /* Ritmo vertical */
  --space-1: 0.25rem;
  --space-2: 0.5rem;
  --space-3: 0.75rem;
  --space-4: 1rem;
  --space-5: 1.5rem;
  --space-6: 2rem;
  --space-7: 3rem;
  --space-8: 4rem;
  --section-y: clamp(4rem, 9vw, 7.5rem);

  /* Formas */
  /* Cantos generosos: o site não é feito de caixas retas empilhadas.
     --radius-blob é o canto assimétrico, para formas que precisam parecer
     desenhadas à mão em vez de calculadas. */
  --radius-sm: 10px;
  --radius: 20px;
  --radius-lg: 32px;
  --radius-xl: 48px;
  --radius-pill: 999px;
  --radius-blob: 62% 38% 46% 54% / 54% 46% 54% 46%;

  /* Movimento */
  --ease: cubic-bezier(0.22, 0.61, 0.36, 1);
  --dur: 0.28s;
  --dur-slow: 0.7s;

  /* Cores de sistema (não são cores de marca).
     Cada página sobrescreve --focus / --on-focus com o seu acento. */
  --focus: #FFFFFF;
  --on-focus: #000000;
  --shadow-rgb: 0, 0, 0;
  --mask-solid: #000000;
  --print-bg: #FFFFFF;
  --print-fg: #000000;

  /* Camadas */
  --z-header: 100;
  --z-menu: 110;
  --z-float: 90;
}

/* --------------------------------------------------------------------------
   2. Reset
   -------------------------------------------------------------------------- */
*,
*::before,
*::after { box-sizing: border-box; }

* { margin: 0; }

html {
  -webkit-text-size-adjust: 100%;
  scroll-behavior: smooth;
  /* compensa o header fixo ao pular por âncora */
  scroll-padding-top: 6rem;
}

body {
  min-height: 100%;
  font-size: var(--fs-base);
  line-height: 1.65;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  text-rendering: optimizeLegibility;
  /* trava definitiva contra scroll horizontal em qualquer largura */
  overflow-x: hidden;
}

img,
picture,
video,
canvas,
svg {
  display: block;
  max-width: 100%;
}

img { height: auto; }

input,
button,
textarea,
select {
  font: inherit;
  color: inherit;
}

button { background: none; border: none; cursor: pointer; }

p,
h1,
h2,
h3,
h4,
h5,
h6 { overflow-wrap: break-word; }

h1,
h2,
h3,
h4 {
  line-height: 1.12;
  font-weight: 600;
  text-wrap: balance;
}

ul,
ol { list-style: none; padding: 0; }

a { color: inherit; text-decoration: none; }

address { font-style: normal; }

table { border-collapse: collapse; }

/* --------------------------------------------------------------------------
   3. Acessibilidade
   -------------------------------------------------------------------------- */

/* Foco visível — obrigatório, nunca remover */
:focus-visible {
  outline: 3px solid var(--focus);
  outline-offset: 3px;
  border-radius: 3px;
}

/* Remove o anel só de quem já tem :focus-visible tratado acima */
:focus:not(:focus-visible) { outline: none; }

.visually-hidden {
  position: absolute !important;
  width: 1px;
  height: 1px;
  padding: 0;
  margin: -1px;
  overflow: hidden;
  clip: rect(0 0 0 0);
  clip-path: inset(50%);
  white-space: nowrap;
  border: 0;
}

/* Link de pular para o conteúdo */
.skip-link {
  position: absolute;
  top: -100px;
  left: var(--space-4);
  z-index: 999;
  padding: 0.75rem 1.25rem;
  border-radius: var(--radius-sm);
  font-size: var(--fs-sm);
  font-weight: 600;
  background: var(--focus);
  color: var(--on-focus);
  transition: top var(--dur) var(--ease);
}

.skip-link:focus { top: var(--space-4); }

/* --------------------------------------------------------------------------
   4. Layout
   -------------------------------------------------------------------------- */
.container {
  width: 100%;
  max-width: var(--container);
  margin-inline: auto;
  padding-inline: var(--gutter);
}

.container--wide { max-width: var(--container-wide); }
.container--narrow { max-width: var(--container-narrow); }

.section { padding-block: var(--section-y); }

.section__head {
  max-width: 42rem;
  margin-bottom: clamp(2.5rem, 5vw, 4rem);
}

.section__head--center {
  margin-inline: auto;
  text-align: center;
}

/* Grid automático — funciona de 320px a 1920px sem media query */
.grid {
  display: grid;
  gap: clamp(1rem, 2.5vw, 1.75rem);
}

.grid--2 { grid-template-columns: repeat(auto-fit, minmax(min(100%, 20rem), 1fr)); }
.grid--3 { grid-template-columns: repeat(auto-fit, minmax(min(100%, 17.5rem), 1fr)); }
.grid--4 { grid-template-columns: repeat(auto-fit, minmax(min(100%, 14rem), 1fr)); }

/* Em tela larga o auto-fit caberia 4 colunas, e as duas seções que usam
   .grid--3 têm 6 cards — 4+2 deixa um buraco à direita. Travar em 3 dá
   duas linhas cheias. */
@media (min-width: 75rem) {
  .grid--3 { grid-template-columns: repeat(3, 1fr); }
}

/* Utilitários de espaçamento — evitam style="" solto no HTML */
.u-mt-4 { margin-top: var(--space-4); }
.u-mt-5 { margin-top: var(--space-5); }
.u-mt-6 { margin-top: var(--space-6); }
.u-mt-3 { margin-top: var(--space-3); }
.u-small { font-size: var(--fs-sm); }
.u-mb-4 { margin-bottom: var(--space-4); }

/* --------------------------------------------------------------------------
   5. Animação de entrada (IntersectionObserver + CSS, zero biblioteca)
   A classe .js é adicionada pelo próprio script no <html>.
   Sem JS, o conteúdo aparece normalmente — nunca fica invisível.
   -------------------------------------------------------------------------- */
.js .reveal {
  opacity: 0;
  transform: translateY(1.25rem);
  transition:
    opacity var(--dur-slow) var(--ease),
    transform var(--dur-slow) var(--ease);
  will-change: opacity, transform;
}

.js .reveal.is-visible {
  opacity: 1;
  transform: none;
}

/* Escalonamento em listas/grids */
.js .reveal[data-delay="1"] { transition-delay: 0.08s; }
.js .reveal[data-delay="2"] { transition-delay: 0.16s; }
.js .reveal[data-delay="3"] { transition-delay: 0.24s; }
.js .reveal[data-delay="4"] { transition-delay: 0.32s; }
.js .reveal[data-delay="5"] { transition-delay: 0.4s; }

/* --------------------------------------------------------------------------
   6. prefers-reduced-motion — desliga tudo que se move
   -------------------------------------------------------------------------- */
@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }

  *,
  *::before,
  *::after {
    animation-duration: 0.001ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.001ms !important;
    scroll-behavior: auto !important;
  }

  .js .reveal {
    opacity: 1;
    transform: none;
    transition: none;
  }
}

/* --------------------------------------------------------------------------
   7. Impressão — básico decente
   -------------------------------------------------------------------------- */
@media print {
  .site-header,
  .whatsapp-float,
  .hero__media,
  .menu-toggle { display: none !important; }

  body { background: var(--print-bg) !important; color: var(--print-fg) !important; }
}

/* --------------------------------------------------------------------------
   Portfólio de vídeos — grade e player

   Serve às duas páginas. As cores saem de tokens que cada página define
   (--acento, --superficie, --linha, --texto-forte), então a mesma folha
   funciona no preto da Pi Mídias e no fundo com vídeo da Pi Filmes.
   -------------------------------------------------------------------------- */
.filmes {
  display: grid;
  gap: clamp(1rem, 2.5vw, 1.75rem);
  grid-template-columns: repeat(auto-fill, minmax(15rem, 1fr));
  margin-top: clamp(2rem, 5vw, 3rem);
}

@media (max-width: 30rem) {
  .filmes { grid-template-columns: repeat(2, 1fr); gap: 0.75rem; }
}

.filme__abrir {
  display: block;
  width: 100%;
  padding: 0;
  border: 0;
  background: none;
  color: inherit;
  text-align: left;
  cursor: pointer;
}

.filme__moldura {
  position: relative;
  display: block;
  overflow: hidden;
  border-radius: var(--radius-lg, 12px);
  background: var(--superficie, #121212);
  /* aspect-ratio real vem do JS, com base no arquivo publicado */
}

.filme__poster,
.filme__previa {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
}

.filme__previa { z-index: 1; }

/* O play some quando a prévia entra, para não sujar a imagem em movimento */
.filme__abrir:hover .filme__play { opacity: 0; }

.filme__play {
  position: absolute;
  left: 50%;
  top: 50%;
  z-index: 2;
  transform: translate(-50%, -50%);
  display: grid;
  place-items: center;
  width: 3.25rem;
  height: 3.25rem;
  border-radius: 50%;
  background: rgba(0, 0, 0, 0.55);
  backdrop-filter: blur(6px);
  -webkit-backdrop-filter: blur(6px);
  color: #fff;
  transition: opacity var(--dur) var(--ease), transform var(--dur) var(--ease);
}

.filme__play svg { width: 1.5rem; height: 1.5rem; margin-left: 2px; }

.filme__abrir:focus-visible .filme__moldura {
  outline: 2px solid var(--focus);
  outline-offset: 3px;
}

.filme__texto {
  display: block;
  margin-top: 0.75rem;
}

.filme__titulo {
  display: block;
  font-weight: 500;
  line-height: 1.25;
  color: var(--texto-forte, #fff);
}

.filme__cat {
  display: block;
  margin-top: 0.2rem;
  font-size: var(--fs-xs);
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--acento);
}

/* --- Player ------------------------------------------------------------- */
body.player-aberto { overflow: hidden; }

.player {
  position: fixed;
  inset: 0;
  z-index: 200;
  display: grid;
  place-items: center;
  padding: clamp(1rem, 4vw, 2.5rem);
}

.player[hidden] { display: none; }

.player__fundo {
  position: absolute;
  inset: 0;
  background: rgba(0, 0, 0, 0.88);
  backdrop-filter: blur(8px);
  -webkit-backdrop-filter: blur(8px);
}

.player__caixa {
  position: relative;
  z-index: 1;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 0.85rem;
  max-width: min(100%, 26rem);
}

/* Vídeo vertical não pode estourar a altura da tela em nenhum aparelho */
.player__video {
  width: auto;
  max-width: 100%;
  max-height: 78svh;
  border-radius: var(--radius-lg, 12px);
  background: #000;
}

.player__titulo {
  font-size: var(--fs-sm);
  text-align: center;
  color: rgba(255, 255, 255, 0.8);
}

.player__fechar {
  position: absolute;
  top: -3rem;
  right: 0;
  display: grid;
  place-items: center;
  width: 2.5rem;
  height: 2.5rem;
  border: 1px solid rgba(255, 255, 255, 0.25);
  border-radius: 50%;
  background: rgba(0, 0, 0, 0.5);
  color: #fff;
  cursor: pointer;
  transition: background-color var(--dur) var(--ease);
}

.player__fechar:hover { background: rgba(255, 255, 255, 0.15); }
.player__fechar svg { width: 1.1rem; height: 1.1rem; }

@media (prefers-reduced-motion: reduce) {
  .filme__play,
  .player__fechar { transition: none; }
}

/* ==========================================================================
   CURVAS — o contorno do site

   Três recursos, do mais estrutural ao mais decorativo:

     1. .onda      divisória em arco entre blocos de fundo diferente. Substitui
                   o corte reto que separava preto e claro;
     2. .formas    manchas orgânicas em deriva no fundo, com blur. Dão
                   profundidade sem imagem e sem peso;
     3. cantos     raios grandes e assimétricos em cards, fotos e vídeos.

   As ondas são SVG inline no HTML (não background-image), para acompanharem
   a cor do bloco por currentColor e não exigirem um arquivo por variação.
   ========================================================================== */

/* --- 1. Divisória em arco -------------------------------------------------- */
.onda {
  position: relative;
  display: block;
  width: 100%;
  height: clamp(2.5rem, 6vw, 5.5rem);
  /* o SVG é desenhado com preserveAspectRatio="none": estica na largura e
     mantém a curva na altura definida acima */
  line-height: 0;
  pointer-events: none;
}

.onda svg {
  display: block;
  width: 100%;
  height: 100%;
}

/* --- 2. Formas orgânicas em deriva ---------------------------------------- */
.formas {
  position: absolute;
  inset: 0;
  overflow: hidden;
  pointer-events: none;
  z-index: -1;
}

.forma {
  position: absolute;
  border-radius: var(--radius-blob);
  filter: blur(60px);
  opacity: 0.5;
  will-change: transform;
}

.forma--1 {
  width: min(38rem, 80vw);
  aspect-ratio: 1.2;
  top: -12%;
  right: -12%;
  animation: deriva-1 34s ease-in-out infinite alternate;
}

.forma--2 {
  width: min(30rem, 70vw);
  aspect-ratio: 0.9;
  bottom: -18%;
  left: -10%;
  animation: deriva-2 44s ease-in-out infinite alternate;
}

.forma--3 {
  width: min(22rem, 55vw);
  aspect-ratio: 1.4;
  top: 35%;
  left: 45%;
  opacity: 0.28;
  animation: deriva-3 52s ease-in-out infinite alternate;
}

/* Deriva: translada e gira devagar. Só transform — nada que force layout. */
@keyframes deriva-1 {
  from { transform: translate(0, 0) rotate(0deg) scale(1); }
  to   { transform: translate(-7%, 9%) rotate(28deg) scale(1.12); }
}

@keyframes deriva-2 {
  from { transform: translate(0, 0) rotate(0deg) scale(1); }
  to   { transform: translate(9%, -7%) rotate(-24deg) scale(1.18); }
}

@keyframes deriva-3 {
  from { transform: translate(0, 0) rotate(0deg); }
  to   { transform: translate(-14%, -12%) rotate(40deg); }
}

@media (prefers-reduced-motion: reduce) {
  .forma { animation: none; }
}