/* ==========================================================================
   SHOWREEL EXPANSIVEL — reel-
   Capa que cresce ate a tela e entrega o video com controles nativos.
   O script escreve --reel-dx, --reel-dy e --reel-s no quadro do dialogo.
   ========================================================================== */

.reel-capa{
  position:relative;
  display:block;
  inline-size:100%;
  padding:0;
  border:0;
  overflow:hidden;
  border-radius:var(--radius-media);
  aspect-ratio:16 / 9;
  background:var(--dark-2);
  cursor:pointer;
  /* O botao vira caixa de imagem: sem isto o user-agent alinha o conteudo
     como texto e a foto ganha um filete de descida embaixo. */
  line-height:0;
  color:var(--light);
}

.reel-poster{
  inline-size:100%;
  block-size:100%;
  object-fit:cover;
  display:block;
  transition:filter .5s var(--ease);
}

/* HOVER NÃO MEXE NA IMAGEM (CLAUDE.md §6, regra de 2026-09-29). O zoom de
   foto sob o ponteiro saiu: escala e deslocamento de mídia no hover mexem
   em recorte e composição, e é o que quebra a página quando o componente
   é colado noutro lugar. O retorno ficou em cor e brilho, que não mudam
   a geometria de nada. */
.reel-capa:hover .reel-poster,
.reel-capa:focus-visible .reel-poster{
  filter:brightness(.82);
}

/* Veu mascarado em gradiente, como manda o §6: caixa reta com
   backdrop-filter produz borda dura e le "chapado". */
.reel-veu{
  position:absolute;
  inset-block-end:0;
  inset-inline:0;
  block-size:58%;
  background:linear-gradient(to top, color-mix(in srgb, var(--dark) 88%, transparent), transparent);
  mask-image:linear-gradient(to top,#000 0%,rgba(0,0,0,.9) 44%,transparent 100%);
  pointer-events:none;
}

.reel-play{
  position:absolute;
  inset-block-start:50%;
  inset-inline-start:50%;
  transform:translate(-50%,-50%);
  display:grid;
  place-items:center;
  inline-size:var(--reel-play-size, 84px);
  block-size:var(--reel-play-size, 84px);
  border-radius:var(--radius-pill);
  border:1px solid color-mix(in srgb, var(--light) 45%, transparent);
  background:color-mix(in srgb, var(--dark) 30%, transparent);
  backdrop-filter:blur(10px);
  transition:transform .5s var(--ease), background-color .5s var(--ease);
}

/* Sem salto no hover (CLAUDE.md §6, 2026-09-29): o disco acende e não
   cresce, a mesma regra do .btn do core — botão não salta nem move. */
.reel-capa:hover .reel-play,
.reel-capa:focus-visible .reel-play{
  background:color-mix(in srgb, var(--accent) 24%, transparent);
}

.reel-play svg{
  inline-size:34%;
  /* O triangulo de play e' otico, nao geometrico: centrado pelo calculo ele
     parece deslocado para a esquerda. */
  margin-inline-start:8%;
}

.reel-legenda{
  position:absolute;
  inset-block-end:0;
  inset-inline:0;
  display:flex;
  align-items:baseline;
  justify-content:space-between;
  gap:16px;
  padding:26px 28px;
  line-height:1.3;
  text-align:start;
}

.reel-titulo{
  font-family:var(--display);
  font-weight:700;
  font-size:clamp(1.05rem, 1.6vw, 1.3rem);
  color:var(--light);
}

.reel-dur{
  font-size:.82rem;
  letter-spacing:.06em;
  text-transform:uppercase;
  color:color-mix(in srgb, var(--light) 68%, transparent);
}

/* ---- O dialogo ----
   A casca vem da primitiva .dialog-casca do core, declarada ANTES desta
   classe no markup: e' ela que zera padding, borda, fundo e os limites de
   tamanho que o navegador da' de graca ao <dialog>, e que pinta o
   ::backdrop com --veil. Aqui fica so' o que e' FORMA desta peca.

   O <dialog> nasce display:none na folha do agente do usuario e so' e'
   exibido com [open]. Escrever `.reel-dialog{display:grid}` sem o [open]
   deixaria o dialogo VISIVEL o tempo todo, com a pagina rolando por baixo:
   e' a mesma armadilha do §6.5, na versao do elemento nativo. A primitiva
   nao cobre este display de proposito -- cada dialogo da casa entra de um
   jeito diferente, e impor um seria ser desobedecida por tres. */
.reel-dialog{
  /* Palco de tela cheia: e' dentro dele que o quadro cresce. */
  inline-size:100%;
  block-size:100%;
  /* hidden, e nao o overflow:visible da casca. O palco clipa: com um quadro
     maior que a janela -- a variacao de video em retrato, ou um
     --radius-media grande -- o que sobra fica dentro da tela em vez de
     pintar por fora dela. */
  overflow:hidden;
  /* Veu MAIS ESCURO que os 78% da casa, e isto e' desenho e nao descuido:
     video pede sala escura. Medido com uma dobra .sec-paper por tras, o
     composto vai de rgb(64,64,64) a 78% para rgb(40,40,40) a 88% -- 11
     pontos de L* em CIELAB, umas dez vezes o limiar do perceptivel, entao
     padronizar apagaria a intencao. Sobre dobra escura os dois graus dao o
     MESMO pixel: o grau do veu so' se ve quando ha claro atras.
     O ::backdrop herda custom property do elemento que o originou, e e' por
     isso que declarar --veil AQUI basta para a primitiva do core pintar o
     veu deste componente. */
  --veil:color-mix(in srgb, var(--dark) var(--reel-veil-mix, 88%), transparent);
}

.reel-dialog[open]{
  display:grid;
  place-items:center;
}

.reel-quadro{
  position:relative;
  inline-size:min(94vw, 1400px);
  aspect-ratio:16 / 9;
  max-block-size:88vh;
  border-radius:var(--radius-media);
  overflow:hidden;
  background:var(--dark);
  /* Os tres valores sao escritos pelo script: a diferenca entre onde a capa
     esta' e onde o quadro vai ficar. O transform sai para a identidade no
     quadro seguinte, e e' isso que faz o quadro CRESCER do lugar da capa
     em vez de aparecer no meio da tela. */
  transform:translate(var(--reel-dx, 0px), var(--reel-dy, 0px)) scale(var(--reel-s, 1));
  transform-origin:50% 50%;
  will-change:transform;
}

.reel-quadro.is-abrindo{
  transition:transform .58s var(--ease), filter .58s var(--ease);
  transform:none;
  filter:blur(0);
}

.reel-video{
  inline-size:100%;
  block-size:100%;
  object-fit:contain;
  display:block;
  background:var(--dark);
}

.reel-fechar{
  position:absolute;
  inset-block-start:14px;
  inset-inline-end:14px;
  display:grid;
  place-items:center;
  inline-size:44px;
  block-size:44px;
  border-radius:var(--radius-pill);
  border:1px solid color-mix(in srgb, var(--light) 34%, transparent);
  background:color-mix(in srgb, var(--dark) 52%, transparent);
  backdrop-filter:blur(8px);
  color:var(--light);
  cursor:pointer;
  /* Acima dos controles nativos do video, que o navegador desenha por cima
     do proprio elemento. */
  z-index:2;
}

.reel-fechar svg{
  inline-size:44%;
  stroke:currentColor;
  stroke-width:1.7;
}

/* ---- Variacao: capa compacta (.reel-capa--compacta) ----
   A capa foi desenhada para a largura da coluna: disco de 84px no meio e
   legenda de 1.3rem. Numa capa de 240 a 400px -- pousada sobre o letreiro
   do hero/letreiro-marca, num card de lateral -- isso mediu titulo, duracao
   e disco disputando o mesmo centro, com "Assistir ao video da casa"
   encostando no anel. Aqui o disco cai para 46px e a legenda para corpo de
   etiqueta.
   O seletor do disco tem duas classes de proposito: a media query de 760px
   la embaixo escreve --reel-play-size no proprio .reel-play, e uma classe
   so' perderia para ela no celular. */
.reel-capa--compacta .reel-play{--reel-play-size:46px}
.reel-capa--compacta .reel-legenda{padding:12px 14px;gap:10px}
.reel-capa--compacta .reel-titulo{font-size:13px;line-height:1.25}
.reel-capa--compacta .reel-dur{font-size:10.5px;white-space:nowrap}

@media (prefers-reduced-motion: reduce){
  /* O dialogo continua abrindo -- ele foi pedido. Some so' a coreografia:
     o quadro aparece no lugar final, sem crescer nem desfocar. */
  .reel-quadro{transform:none}
  .reel-quadro.is-abrindo{transition:none}
  .reel-poster,
  .reel-play{transition:none}
}

@media (max-width: 760px){
  .reel-play{--reel-play-size:64px}
  .reel-legenda{padding:18px 20px; gap:10px}
  .reel-quadro{inline-size:96vw}
}

@media (max-width: 460px){
  .reel-capa{aspect-ratio:4 / 3}
  .reel-legenda{flex-direction:column; align-items:flex-start}
}