/* =========================================================
   Atelier Luquet — Página temporária · v2 (sem monograma)
   Sem framework, sem build, sem dependência externa.
   Marca: ../../Marca/  ·  Regras: ../BRAND.md
   ========================================================= */

:root{
  /* --- cores de marca (BRAND.md §5.1). Nenhuma cor de coleção aqui. --- */
  --al-bone:      #E5E3DD;
  --al-ink:       #12100E;
  --al-oxblood:   #2B1A21;
  --al-rule:      rgba(18,16,14,.20);
  --al-muted:     rgba(18,16,14,.64);   /* 4.9:1 sobre --al-bone — AA para texto pequeno */

  /* --- espaço --- */
  --frame-inset:  clamp(14px, 2.4vw, 34px);
  --gap-tag:      clamp(20px, 3.2vh, 38px);

  /* --- movimento --- */
  --e-out:        cubic-bezier(.16, 1, .3, 1);
  --e-press:      cubic-bezier(.34, 1.28, .64, 1);
}

*,*::before,*::after{ box-sizing:border-box; }

html{ background:var(--al-bone); }

body{
  margin:0;
  min-height:100vh;
  min-height:100dvh;
  display:flex;
  flex-direction:column;
  background:var(--al-bone);
  color:var(--al-ink);
  font-family:"Helvetica Neue", Helvetica, system-ui, -apple-system, Arial, sans-serif;
  -webkit-font-smoothing:antialiased;
  text-rendering:optimizeLegibility;
}

/* =========================================================
   Moldura — quatro filetes que se desenham em sequência,
   começando no canto superior esquerdo e dando a volta.
   ========================================================= */

.frame{ position:fixed; inset:0; pointer-events:none; z-index:1; }

.frame i{
  position:absolute;
  background:var(--al-rule);
  transform:scale(0);
  animation:.34s var(--e-out) forwards;
}
.frame .t{ top:var(--frame-inset);    left:var(--frame-inset);  right:var(--frame-inset); height:1px; transform-origin:left   center; animation-name:drawX; animation-delay:.06s; }
.frame .r{ top:var(--frame-inset);    right:var(--frame-inset); bottom:var(--frame-inset); width:1px; transform-origin:center top;   animation-name:drawY; animation-delay:.24s; }
.frame .b{ bottom:var(--frame-inset); left:var(--frame-inset);  right:var(--frame-inset); height:1px; transform-origin:right  center; animation-name:drawX; animation-delay:.42s; }
.frame .l{ top:var(--frame-inset);    left:var(--frame-inset);  bottom:var(--frame-inset); width:1px; transform-origin:center bottom;animation-name:drawY; animation-delay:.60s; }

@keyframes drawX{ to{ transform:scaleX(1); } }
@keyframes drawY{ to{ transform:scaleY(1); } }

/* =========================================================
   Palco
   ========================================================= */

.stage{
  flex:1;
  display:grid;
  place-items:center;
  padding:calc(var(--frame-inset) + 24px) calc(var(--frame-inset) + 18px);
  position:relative;
  z-index:2;
}

.lockup{ text-align:center; }

/* --- wordmark: as 13 letras entram convergindo,
       como um entalhe que se assenta --- */

h1{ margin:0; }

.wordmark{
  display:block;
  width:clamp(240px, 62vw, 560px);
  height:auto;
  margin:0 auto;
  color:var(--al-ink);
}
.wordmark path{
  fill:currentColor;
  opacity:0;
  animation:letterIn .92s var(--e-out) .46s forwards;
}

/* deslocamento inicial proporcional à distância do centro (letra 7 = R) */
.wordmark path:nth-child(1){  --dx:-27px; }
.wordmark path:nth-child(2){  --dx:-22.5px; }
.wordmark path:nth-child(3){  --dx:-18px; }
.wordmark path:nth-child(4){  --dx:-13.5px; }
.wordmark path:nth-child(5){  --dx:-9px; }
.wordmark path:nth-child(6){  --dx:-4.5px; }
.wordmark path:nth-child(7){  --dx:0px; }
.wordmark path:nth-child(8){  --dx:4.5px; }
.wordmark path:nth-child(9){  --dx:9px; }
.wordmark path:nth-child(10){ --dx:13.5px; }
.wordmark path:nth-child(11){ --dx:18px; }
.wordmark path:nth-child(12){ --dx:22.5px; }
.wordmark path:nth-child(13){ --dx:27px; }

@keyframes letterIn{
  from{ opacity:0; transform:translateX(var(--dx, 0)) translateY(5px); }
  to{   opacity:1; transform:translateX(0) translateY(0); }
}

/* --- linha de espera --- */

.tagline{
  margin:var(--gap-tag) 0 0;
  font-size:clamp(9px, .95vw, 11px);
  font-weight:400;
  letter-spacing:.36em;
  text-indent:.36em;      /* compensa o tracking para centralizar de fato */
  text-transform:uppercase;
  color:var(--al-muted);
  opacity:0;
  animation:riseIn .7s var(--e-out) 1.14s forwards;
}

/* =========================================================
   Rodapé — contato
   ========================================================= */

.foot{
  position:relative;
  z-index:2;
  padding:0 calc(var(--frame-inset) + 18px) calc(var(--frame-inset) + clamp(20px, 3.4vh, 44px));
  text-align:center;
}

.rule{
  width:clamp(64px, 8vw, 104px);
  height:1px;
  margin:0 auto clamp(16px, 2.4vh, 26px);
  background:var(--al-rule);
  transform:scaleX(0);
  animation:drawX .8s var(--e-out) 1.26s forwards;
}

.contact{
  display:flex;
  flex-wrap:wrap;
  align-items:center;
  justify-content:center;
  gap:clamp(10px, 1.6vw, 22px);
  font-style:normal;
  font-size:clamp(10px, .95vw, 12px);
  letter-spacing:.16em;
  text-transform:uppercase;
  opacity:0;
  animation:riseIn .74s var(--e-out) 1.42s forwards;
}

.contact a{
  position:relative;
  display:inline-flex;
  align-items:center;
  justify-content:center;
  min-height:44px;           /* alvo de toque WCAG 2.1 AA */
  padding:0 4px;
  color:var(--al-muted);
  text-decoration:none;
  transition:color .45s var(--e-out);
}
.contact a::after{
  content:"";
  position:absolute;
  left:4px; right:4px;
  bottom:calc(50% - .95em);  /* acompanha o texto, não a área de toque */
  height:1px;
  background:currentColor;
  transform:scaleX(0);
  transform-origin:center;
  transition:transform .45s var(--e-out);
}
.contact a:hover,
.contact a:focus-visible{ color:var(--al-ink); }
.contact a:hover::after,
.contact a:focus-visible::after{ transform:scaleX(1); }

.contact .sep{
  color:var(--al-rule);
  font-size:1em;
  user-select:none;
}

@keyframes riseIn{
  from{ opacity:0; transform:translateY(7px); }
  to{   opacity:1; transform:translateY(0); }
}

/* =========================================================
   Foco visível — discreto, mas inequívoco
   ========================================================= */

:focus-visible{
  outline:1px solid var(--al-ink);
  outline-offset:6px;
}

/* =========================================================
   Aba em segundo plano: segura a abertura até alguém ver.
   (js/main.js só marca a classe; sem JS, a página anima normal.)
   ========================================================= */

.is-held .frame i,
.is-held .wordmark path,
.is-held .tagline,
.is-held .rule,
.is-held .contact{ animation-play-state:paused; }

/* =========================================================
   Telas estreitas: o contato empilha.
   Em linha, o e-mail longo quebra o grupo no meio e deixa um
   separador órfão no fim da primeira linha.
   ========================================================= */

@media (max-width:640px){
  .contact{
    flex-direction:column;
    gap:2px;
  }
  .contact .sep{ display:none; }
}

/* =========================================================
   Telas baixas (celular deitado): a composição respira menos
   ========================================================= */

@media (max-height:460px){
  :root{ --gap-tag:16px; }
  .wordmark{ width:clamp(220px, 54vw, 420px); }
}

/* =========================================================
   Menos movimento: tudo já está no lugar
   ========================================================= */

@media (prefers-reduced-motion:reduce){
  .frame i,
  .wordmark path,
  .tagline,
  .rule,
  .contact{
    animation:none;
    opacity:1;
    transform:none;
  }
  .contact a,
  .contact a::after{ transition:none; }
}