/* Habita — abertura de marca (v2, 13/11): a casa do símbolo se monta no centro (pilares sobem,
   telhado pousa, porta se desenha, janelas acendem), fica legível, sobe um pouco e o nome abre
   por baixo, formando a assinatura completa da marca. Nenhuma peça cruza as letras.
   Total 3,4 s. Zero JS de animação. Pular: botão (1º do Tab) e Esc. Movimento reduzido: não monta. */

.hm-intro { --intro-dur: 3.4s; --intro-ink: #1f2a1c; --intro-cream: #f2eee7; --intro-gold: #c69a5c;
  position: fixed; inset: 0; z-index: 9999; display: grid; place-items: center; overflow: hidden; background: var(--intro-ink); color: var(--intro-cream);
  animation: hm-intro-cortina var(--intro-dur) cubic-bezier(.76, 0, .24, 1) both; }
.hm-intro__luz { position: absolute; inset: -20%; background: radial-gradient(38% 38% at 50% 50%, rgba(198, 154, 92, .20), transparent 70%); animation: hm-intro-luz var(--intro-dur) both; pointer-events: none; }
.hm-intro__skip { position: absolute; top: 16px; right: 16px; z-index: 2; background: rgba(255, 255, 255, .08); color: var(--intro-cream); border: 1px solid rgba(255, 255, 255, .28); border-radius: 999px; padding: 10px 16px; min-height: 40px; font: 700 13px/1 'DM Sans', system-ui, sans-serif; cursor: pointer; }
.hm-intro__skip:focus-visible { outline: 3px solid var(--intro-gold); outline-offset: 3px; }

.hm-intro__stage { display: grid; justify-items: center; gap: clamp(14px, 2.4vh, 22px); padding: 0 24px; }
.hm-intro__mark { width: clamp(84px, 18vw, 124px); aspect-ratio: 1; position: relative; animation: hm-intro-marca var(--intro-dur) cubic-bezier(.65, 0, .25, 1) both; }
.hm-intro__mark svg { position: absolute; inset: 0; width: 100%; height: 100%; overflow: visible; }
.hm-intro__mark path { fill: none; stroke: var(--intro-cream); stroke-linecap: round; stroke-linejoin: round; }
.hm-intro__p-left  { animation: hm-intro-pilar var(--intro-dur) cubic-bezier(.2, .8, .2, 1) both; }
.hm-intro__p-right { animation: hm-intro-pilar var(--intro-dur) cubic-bezier(.2, .8, .2, 1) both; animation-delay: .09s; }
.hm-intro__p-roof  { animation: hm-intro-telhado var(--intro-dur) cubic-bezier(.2, .8, .2, 1) both; }
.hm-intro__p-door path { stroke-dasharray: 60; stroke-dashoffset: 60; animation: hm-intro-porta var(--intro-dur) ease-out both; }
.hm-intro__p-win   { animation: hm-intro-janelas var(--intro-dur) ease-out both; }

.hm-intro__name { text-align: center; }
.hm-intro__name strong { display: block; font: 500 clamp(40px, 11vw, 76px)/1.05 'Playfair Display', Georgia, serif; letter-spacing: .16em; margin-right: -.16em; padding-bottom: .1em; white-space: nowrap;
  clip-path: inset(0 50%); animation: hm-intro-nome var(--intro-dur) cubic-bezier(.22, .8, .2, 1) both; }
.hm-intro__name small { display: block; margin-top: 8px; font: 700 clamp(10px, 2.6vw, 13px)/1.2 'DM Sans', system-ui, sans-serif; letter-spacing: .3em; margin-right: -.3em; text-transform: uppercase; color: var(--intro-gold); white-space: nowrap;
  animation: hm-intro-assinatura var(--intro-dur) ease-out both; }

/* a marca começa sozinha no centro (deslocada para baixo e maior) e sobe para dar lugar ao nome */
@keyframes hm-intro-marca {
  0%, 46%   { transform: translateY(clamp(34px, 7vh, 58px)) scale(1.28); }
  62%, 100% { transform: none; }
}
@keyframes hm-intro-pilar   { 0% { opacity: 0; transform: translateY(26px); } 11%, 100% { opacity: 1; transform: none; } }
@keyframes hm-intro-telhado { 0%, 9% { opacity: 0; transform: translateY(-20px); } 21%, 100% { opacity: 1; transform: none; } }
@keyframes hm-intro-porta   { 0%, 18% { stroke-dashoffset: 60; } 32%, 100% { stroke-dashoffset: 0; } }
@keyframes hm-intro-janelas { 0%, 30% { opacity: 0; } 38%, 100% { opacity: 1; } }
@keyframes hm-intro-nome {
  0%, 54%   { clip-path: inset(0 50%); opacity: 0; }
  56%       { opacity: 1; }
  72%, 100% { clip-path: inset(0 -6%); opacity: 1; }
}
@keyframes hm-intro-assinatura { 0%, 68% { opacity: 0; transform: translateY(6px); } 80%, 100% { opacity: 1; transform: none; } }
@keyframes hm-intro-cortina { 0%, 88% { transform: translateY(0); border-radius: 0; } 100% { transform: translateY(-105%); border-radius: 0 0 10vw 10vw; } }
@keyframes hm-intro-luz { 0%, 12% { opacity: 0; } 34%, 86% { opacity: 1; } 100% { opacity: 0; } }

/* Native modal keeps background content out of focus and the accessibility tree. */
.hm-intro{width:100vw;height:100dvh;max-width:none;max-height:none;margin:0;border:0;padding:0}
.hm-intro::backdrop{background:transparent}