/* HERO da home — fonte única do encaixe (refeito em 01/10/2026 sobre a referência de posição do Bruno).
   Profundidade, de trás para a frente: fundo verde → faixa de desenho → foto (parede) → apoio + estátua → Denis
   (recorte RGBA da mesma foto, denis-frente-recorte-2400.webp) → nome e contador.
   Tudo é medido em --u: 1 unidade = 1 px do desenho de 390 px (celular) ou de 1280 px (computador). */

/* cabeçalho da home: limpo ao abrir; ao rolar, a logo e VAZIOS aparecem no canto ESQUERDO (Bruno, 01/10) */
body.home .masthead .mh-brand { display:none; }
body.home .masthead.scrolled .mh-brand { display:flex;order:-1;margin-right:auto;animation:mh-marca-entra .35s ease both; }
@keyframes mh-marca-entra { from { opacity:0;transform:translateY(-4px); } to { opacity:1;transform:none; } }
@media(prefers-reduced-motion:reduce) { body.home .masthead.scrolled .mh-brand { animation:none; } }
body.home .masthead { justify-content:flex-end;pointer-events:none; }
body.home .masthead :is(a,button,summary,details) { pointer-events:auto; }

/* celular e tablet em pé: a composição inteira cabe na primeira tela (limitada pela largura e pela altura) */
body .hero-n {
  --u:min(calc(100cqw / 390), calc(100svh / 863));
  container-type:inline-size;position:relative;isolation:isolate;overflow:hidden;
  height:calc(863 * min(100vw / 390, 100svh / 863));background:#1e281c;color:#efe8d8;
}
body .hn-scene { position:absolute;inset:0;z-index:auto;pointer-events:none; }

/* faixa de desenho: estreita, atrás da estátua, com sombreado de volume nas bordas */
body .hn-carpa { position:absolute;z-index:1;left:0;right:0;top:calc(170 * var(--u));height:calc(70 * var(--u));opacity:1;border-top:1px solid #b9955973;border-bottom:1px solid #b9955973; }
body .hn-carpa img { display:block;width:100%;height:100%;object-fit:cover;object-position:center 49%;filter:brightness(1.18) saturate(1.05); }
body .hn-carpa::after { content:'';position:absolute;inset:0;background:linear-gradient(180deg,#0e140d8c 0%,#0e140d00 32%,#0e140d00 68%,#0e140d8c 100%); }

/* foto original: base (parede) e frente (Denis + cadeira), alinhadas pixel a pixel */
/* caixa da foto: --pl (esquerda), --pt (topo), --pw (largura) */
body .hero-n { --pl:calc(-129 * var(--u));--pt:calc(341 * var(--u));--pw:calc(816 * var(--u)); }
body .hn-photo-base,body .hn-photo-front { position:absolute;height:auto;max-width:none;display:block; }
body .hn-photo-base { z-index:0;left:var(--pl);top:var(--pt);width:var(--pw);-webkit-mask-image:linear-gradient(180deg,transparent 0,transparent 8%,#000 21%);mask-image:linear-gradient(180deg,transparent 0,transparent 8%,#000 21%); }
/* recorte RGBA do Denis (tools/recortar-denis-frente.py): trecho x 150-1350, y 330-1600 da mesma foto 2400 px,
   encaixado pixel a pixel sobre a foto de base; borda lisa e com a cor limpa (sem resto de parede) */
body .hn-photo-front { z-index:4;clip-path:none;-webkit-mask:none;mask:none;left:calc(var(--pl) + var(--pw) * 150 / 2400);top:calc(var(--pt) + var(--pw) * 330 / 2400);width:calc(var(--pw) * 1200 / 2400); }

/* apoio: bloco de pedra com tampo em perspectiva; a base de mármore da estátua pousa no meio do tampo */
/* a borda direita do apoio passa POR TRÁS do boné (nunca rente à nuca: borda reta colada no contorno parece recorte) */
body .hn-pedestal { position:absolute;z-index:2;left:0;top:calc(388 * var(--u));width:calc(214 * var(--u));bottom:0; }
body .hn-pedestal i { position:absolute;left:0;right:0;display:block; }
body .hp-topo { top:0;height:calc(28 * var(--u));
  background:linear-gradient(180deg,#0000004d 0%,#00000000 60%),linear-gradient(90deg,#8a957c 0%,#727e66 50%,#58634e 100%);
  clip-path:polygon(calc(11 * var(--u)) 0,calc(100% - 11 * var(--u)) 0,100% 100%,0 100%); }
body .hp-frente { top:calc(28 * var(--u));bottom:0;
  background:
    linear-gradient(180deg,#e9e0c0b3 0,#e9e0c000 1.5px),
    linear-gradient(180deg,#00000000 0,#00000000 25%,#000000b3 80%),
    linear-gradient(90deg,#26301f 0%,#1d2618 45%,#141b11 80%,#0e140c 100%);
  box-shadow:inset 1px 0 0 #ffffff1f; }
body .hp-frente::after { content:'';position:absolute;inset:0;opacity:.18;mix-blend-mode:overlay;background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='140' height='140'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.9' numOctaves='2' stitchTiles='stitch'/%3E%3CfeColorMatrix values='0 0 0 0 .5 0 0 0 0 .5 0 0 0 0 .5 0 0 0 1 0'/%3E%3C/filter%3E%3Crect width='140' height='140' filter='url(%23n)'/%3E%3C/svg%3E"); }

/* estátua nativa aceita, sem a margem do quadrado: a borda de baixo da imagem é a base de mármore.
   Pedido do Bruno (01/10): um pouco menor, cabeça perto do topo, mão do pano quase encostando na borda esquerda
   (a mão fica a 17,5% da largura da imagem, por isso o left negativo). */
body .hn-estatua { position:absolute;z-index:3;left:calc(-30 * var(--u));top:calc(6 * var(--u));height:calc(395 * var(--u));width:auto;margin:0;overflow:visible;filter:none; }
body .hn-estatua::before,body .hn-estatua::after { content:'';position:absolute;pointer-events:none; }
body .hn-estatua img { position:relative;z-index:1;display:block;height:100%;width:auto;max-width:none;clip-path:none;
  filter:drop-shadow(calc(9 * var(--u)) calc(5 * var(--u)) calc(7 * var(--u)) #050a0699) brightness(.97) sepia(.06); }
/* sombra de contato da base no tampo */
body .hn-estatua::after { z-index:0;left:17%;right:-3%;bottom:calc(-5 * var(--u));height:calc(12 * var(--u));background:radial-gradient(closest-side,#040805d9,#04080500);border-radius:50%; }

/* nome à direita da estátua, acima da cabeça do Denis */
body .hn-in { position:absolute;inset:0;width:100%;height:100%;margin:0;padding:0;z-index:5;pointer-events:none; }
body .hn-in a { pointer-events:auto; }
body .hn-lockup { position:absolute;display:flex;flex-direction:column;gap:calc(2 * var(--u));left:calc(220 * var(--u));right:auto;top:calc(262 * var(--u));height:auto;margin:0;text-shadow:0 2px 14px #0a110a; }
body .hn-lockup .nl-denis { font:400 calc(14.5 * var(--u))/1.3 Arial,sans-serif;letter-spacing:.27em;padding-left:.1em; }
body .hn-lockup .nl-vazios { font-family:'Anton','Oswald','Bahnschrift',sans-serif;font-size:calc(51 * var(--u));font-weight:700;letter-spacing:-.01em;line-height:1.02; }
body .hn-tag { position:absolute;display:flex;align-items:center;left:calc(222 * var(--u));top:calc(346 * var(--u));height:auto;font:500 max(8px,calc(9.5 * var(--u)))/1.4 Arial,sans-serif;letter-spacing:.15em; }
body .hn-tag::before { content:'';width:calc(16 * var(--u));height:2px;background:#b99559;margin-right:calc(7 * var(--u)); }
body .hn-band,body .hn-tagband,body .hn-body { display:none; }
body .oficio { z-index:6;left:5%;right:auto;bottom:18px;width:90%;background:#1d281bf5;backdrop-filter:none; }

/* celular estreito: Agendar não encosta no ombro da estátua */
@media(max-width:359px) {
  body.home .masthead { right:4px;padding-right:6px;gap:6px; }
}

/* computador e tablet deitado: o mesmo desenho em 1280 px */
@media(min-width:900px),(min-width:600px) and (orientation:landscape) {
  body .hero-n { --u:calc(100cqw / 1280);height:calc(920 * 100vw / 1280); }
  body .hn-carpa { top:calc(214 * var(--u));height:calc(62 * var(--u)); }
  body .hero-n { --pl:calc(-160 * var(--u));--pt:calc(273 * var(--u));--pw:calc(1440 * var(--u)); }
  /* a parede só aparece a partir da cabeça do Denis; o quadro colorido da esquerda fica na penumbra */
  body .hn-photo-base {
    -webkit-mask-image:linear-gradient(180deg,transparent 0,transparent 21.6%,#000 31.5%),linear-gradient(90deg,#00000026 0%,#00000026 16%,#000 33%);-webkit-mask-composite:source-in;
    mask-image:linear-gradient(180deg,transparent 0,transparent 21.6%,#000 31.5%),linear-gradient(90deg,#00000026 0%,#00000026 16%,#000 33%);mask-composite:intersect; }
  body .hn-pedestal { left:0;top:calc(496 * var(--u));width:calc(300 * var(--u)); }
  body .hp-topo { height:calc(32 * var(--u));clip-path:polygon(calc(14 * var(--u)) 0,calc(100% - 14 * var(--u)) 0,100% 100%,0 100%); }
  body .hp-frente { top:calc(32 * var(--u)); }
  body .hn-estatua { left:calc(-36 * var(--u));top:calc(6 * var(--u));height:calc(504 * var(--u)); }
  body .hn-lockup { left:calc(420 * var(--u));top:calc(290 * var(--u)); }
  body .hn-lockup .nl-denis { font-size:calc(26 * var(--u)); }
  body .hn-lockup .nl-vazios { font-size:calc(116 * var(--u)); }
  body .hn-tag { left:calc(424 * var(--u));top:calc(452 * var(--u));font-size:max(9px,calc(12 * var(--u))); }
  body .oficio { left:auto;right:5%;bottom:calc(26 * var(--u));width:360px; }
}
@media(min-width:900px) and (max-width:1099px),(min-width:600px) and (max-width:1099px) and (orientation:landscape) {
  body .oficio { transform:scale(.8);transform-origin:right bottom;right:3%; }
}