/* ==========================================================
   /fotos — Arthur & Criste Paula
   Mosaico justificado em proporção original · revelação em traçado
   ========================================================== */

:root{
  --sage:#6D7B48;
  --sage-fio:rgba(109,123,72,.24);
  --dourado:#B08D57;
  --dourado-texto:#7D6231;          /* dourado escurecido: texto pequeno (WCAG) */
  --marfim:#F3EFE8;
  --tinta:#2E3327;
  --f-display:'Cinzel', Georgia, serif;
  --f-label:'Spectral', Georgia, serif;
  --f-corpo:'Lora', Georgia, serif;
  --gap:9px;
  --ease:cubic-bezier(.35,0,.15,1);
}

*{box-sizing:border-box;}
html{-webkit-text-size-adjust:100%;}
body{
  margin:0;
  background:var(--marfim);
  color:var(--tinta);
  font-family:var(--f-corpo);
  -webkit-font-smoothing:antialiased;
}
body.visor-aberto{overflow:hidden;}

/* ---------- Abertura ---------- */
.abertura{text-align:center;padding:76px 20px 58px;}
.abertura__mono{display:block;width:74px;height:auto;margin:0 auto;}
.abertura__titulo{
  font-family:var(--f-display);
  font-weight:500;
  font-size:clamp(34px,6vw,54px);
  letter-spacing:.08em;
  line-height:1.1;
  margin:26px 0 0;
  color:var(--tinta);
}
.abertura__fio{display:block;width:110px;height:1px;background:var(--sage-fio);margin:34px auto 0;}

.js .abertura__mono,
.js .abertura__titulo{opacity:0;transform:translateY(10px);animation:sobe 1.1s var(--ease) forwards;}
.js .abertura__mono{animation-delay:.15s;}
.js .abertura__titulo{animation-delay:.45s;}
.js .abertura__fio{width:0;animation:fio 1.4s .9s var(--ease) forwards;}
@keyframes sobe{to{opacity:1;transform:none;}}
@keyframes fio{to{width:110px;}}

/* ---------- Mosaico ---------- */
.galeria-wrap{max-width:1080px;margin:0 auto;padding:0 20px;}
.linha{display:flex;gap:var(--gap);margin-bottom:var(--gap);}

.item{
  all:unset;
  box-sizing:border-box;
  display:block;
  position:relative;
  overflow:hidden;
  cursor:pointer;
  flex:var(--r) 1 0;
  min-width:0;
  aspect-ratio:var(--r);
  background:var(--cor);
  transition:transform .35s ease, box-shadow .35s ease;
}
.item:focus-visible{outline:2px solid var(--sage);outline-offset:3px;}
.item:hover,.item:focus-visible{transform:translateY(-3px);box-shadow:0 8px 20px rgba(46,51,39,.18);}

.item__img,.item__video{
  position:absolute;inset:0;
  width:100%;height:100%;
  object-fit:cover;            /* proporção do bloco = proporção da foto: nenhum recorte perceptível */
  display:block;
}

/* Revelação em traçado (somente com JS ativo) */
.js .item{clip-path:inset(0 100% 0 0);transition:clip-path 1.05s var(--ease), transform .35s ease, box-shadow .35s ease;}
.js .item--traco-v{clip-path:inset(100% 0 0 0);}
.js .item.revelado{clip-path:inset(0 0 0 0);}

/* Imagem surge sobre a própria cor */
.js .item__img{opacity:0;transition:opacity .9s ease;}
.js .item__img.carregada{opacity:1;}

/* Vídeo */
.item--video{outline-color:var(--dourado);}
.item__play{
  position:absolute;left:16px;bottom:16px;
  width:0;height:0;
  border-style:solid;
  border-width:8px 0 8px 13px;
  border-color:transparent transparent transparent rgba(243,239,232,.94);
  filter:drop-shadow(0 1px 3px rgba(0,0,0,.45));
  transition:transform .3s ease;
}
.item--video:hover .item__play{transform:scale(1.2);}

/* ---------- Encerramento ---------- */
.encerramento{text-align:center;padding:72px 20px 92px;}
.encerramento__fio{display:block;width:110px;height:1px;background:var(--sage-fio);margin:0 auto 34px;}
.encerramento__credito{
  font-family:var(--f-label);
  font-size:12.5px;
  letter-spacing:.12em;
  text-transform:uppercase;
  color:var(--dourado-texto);
  margin:0 0 30px;
}
.encerramento__credito a{
  color:var(--dourado-texto);
  text-decoration:none;
  border-bottom:1px solid rgba(125,98,49,.4);
  padding-bottom:1px;
  transition:border-color .25s ease;
}
.encerramento__credito a:hover,.encerramento__credito a:focus-visible{border-color:var(--dourado-texto);}
.encerramento__assinatura{
  font-family:var(--f-display);
  font-weight:500;
  font-size:clamp(20px,3.4vw,28px);
  letter-spacing:.06em;
  margin:0;
}

/* ---------- Visor (lightbox) ---------- */
.visor{position:fixed;inset:0;z-index:90;background:rgba(20,22,16,.95);}
.visor[hidden]{display:none;}
.visor__palco{position:absolute;inset:0;display:flex;align-items:center;justify-content:center;padding:64px 72px;}
.visor__palco img,
.visor__palco video{
  max-width:100%;max-height:100%;
  object-fit:contain;
  background:#000;
  box-shadow:0 10px 40px rgba(0,0,0,.4);
  animation:entra .4s cubic-bezier(.3,.7,.3,1);
}
.visor__palco img.nitida{animation:none;}
@keyframes entra{from{opacity:0;transform:scale(.975);}to{opacity:1;transform:none;}}

.visor__topo{position:absolute;top:0;left:0;right:0;z-index:2;display:flex;justify-content:space-between;align-items:center;padding:20px 22px;}
.visor__contador{font-family:var(--f-label);font-size:12px;letter-spacing:.18em;color:rgba(243,239,232,.62);}
.visor__fechar,.visor__nav{all:unset;cursor:pointer;color:rgba(243,239,232,.74);font-family:var(--f-label);transition:color .2s ease;}
.visor__fechar{font-size:11.5px;letter-spacing:.18em;text-transform:uppercase;padding:6px 2px;}
.visor__nav{position:absolute;top:50%;transform:translateY(-50%);z-index:2;width:48px;height:48px;display:flex;align-items:center;justify-content:center;font-size:30px;}
.visor__nav--ant{left:10px;}
.visor__nav--prox{right:10px;}
.visor__fechar:hover,.visor__nav:hover,.visor__fechar:focus-visible,.visor__nav:focus-visible{color:#F3EFE8;}
.visor__fechar:focus-visible,.visor__nav:focus-visible{outline:1px solid rgba(243,239,232,.6);outline-offset:3px;}

/* ---------- Movimento reduzido ----------
   Nada é escondido: apenas as animações são suprimidas.
   O vídeo continua visível (capa + ícone de play). */
@media (prefers-reduced-motion: reduce){
  .js .abertura__mono,.js .abertura__titulo{opacity:1;transform:none;animation:none;}
  .js .abertura__fio{width:110px;animation:none;}
  .js .item{clip-path:none;transition:none;}
  .js .item__img{opacity:1;transition:none;}
  .item:hover,.item:focus-visible{transform:none;}
  .visor__palco img,.visor__palco video{animation:none;}
}

/* ---------- Celular ---------- */
@media (max-width:680px){
  :root{--gap:6px;}
  .abertura{padding:60px 16px 44px;}
  .abertura__titulo{font-size:clamp(30px,9vw,40px);}
  .galeria-wrap{padding:0 12px;}
  .visor__palco{padding:56px 8px;}
  .visor__nav{display:none;}
}

/* Título e subtítulo no padrão das demais páginas (lista de presentes):
   título em sage e, abaixo, nomes e data em Spectral pequeno, lidos do painel. */
.abertura__titulo{color:var(--sage);}
.abertura__apoio{margin:14px 0 0;font-family:'Spectral',Georgia,serif;font-weight:400;font-size:11px;
  letter-spacing:.2em;text-transform:uppercase;color:var(--sage);}
.js .abertura__apoio{opacity:0;animation:sobe 1.1s var(--ease) .65s forwards;}
@media (prefers-reduced-motion: reduce){ .js .abertura__apoio{opacity:1;animation:none;} }