/* GH · Marca Greenhouse (2.9.5): o logo oficial (monograma GH, GREENHOUSE na serifa da marca e o descritor em Jost
   bem espaçado). Com WebGL o monograma é ouro fundido de verdade (brand.js desenha na .ghb-gl): bisel polido, luz de
   estúdio que segue o mouse, faísca na ponta do G e, na primeira página da visita, a pena de luz que escreve o G e o H.
   Sem WebGL (.is-css) fica o ouro em CSS deste arquivo, com a luz que dá a volta no anel e a abertura dele.
   Vale para o topo e o rodapé da área de membros (#ghx) e para a tela de entrada (#ghl). */
@font-face { font-family: "GH Serif"; src: url("fonts/gh-serif.woff2") format("woff2"); font-weight: 400 600; font-style: normal; font-display: swap; }
@font-face { font-family: "GH Sans"; src: url("fonts/gh-sans.woff2") format("woff2"); font-weight: 400 600; font-display: swap; }
@property --ghb-o { syntax: "<angle>"; inherits: false; initial-value: 0deg; }
@property --ghb-p { syntax: "<angle>"; inherits: false; initial-value: 360deg; }
@keyframes ghb-orbit { to { --ghb-o: 360deg; } }

:is(#ghx, #ghl) a.ghb {
	--ghb-s: 46px; /* monograma */
	--ghb-t: 40px; /* escala do nome e do descritor */
	--ghb-mono: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='44 44 1032 1032'%3E%3Cpath d='M1060 560C1060 836.14 836.14 1060 560 1060C283.86 1060 60 836.14 60 560C60 283.86 283.86 60 560 60C693.77 60 815.27 112.53 905 198.09V308.98C832.69 177.38 705.2 90 560 90C334.67 90 152 300.43 152 560C152 819.57 334.67 1030 560 1030C781.41 1030 961.63 826.83 967.83 573.5H754.17V752.58Q754.17 766.64 759.42 775.48Q764.45 783.95 774.15 788.26Q784.81 793 801.6 793H820.7V820H596.92V793H616.02Q633.51 793 644.17 788.26Q653.75 784 658.43 775.69Q663.45 766.76 663.45 752.58V573.5H456.55V752.58Q456.55 766.76 461.57 775.69Q466.22 783.95 476.08 788.22Q487.14 793 503.98 793H523.08V820H299.3V793H318.4Q335.24 793 346.3 788.22Q356.16 783.95 360.81 775.69Q365.83 766.76 365.83 752.58V364.62Q365.83 351.29 360.95 343.16Q356.37 335.52 346.51 331.52Q335.36 327 318.4 327H299.3V300H523.08V327H503.98Q487.14 327 476.08 331.78Q466.22 336.05 461.57 344.31Q456.55 353.24 456.55 367.42V535.29H457.25V546.5H662.75V535.29H663.45V367.42Q663.45 353.24 658.43 344.31Q653.75 336 644.17 331.74Q633.51 327 616.02 327H596.92V300H820.7V327H801.6Q784.69 327 773.93 331.49Q764.24 335.52 759.27 343.36Q754.17 351.42 754.17 364.62V546.5H1059.82C1059.94 550.98 1060 555.49 1060 560Z'/%3E%3C/svg%3E");
	--ghb-ease: cubic-bezier(.16, 1, .3, 1);
	--ghb-io: cubic-bezier(.65, 0, .35, 1);
	position: relative; display: inline-flex; align-items: center; gap: calc(var(--ghb-t) * .4); min-width: 0;
	color: #e9d7a9; text-decoration: none; isolation: isolate;
	transform-origin: 0 50%; transition: transform .6s var(--ghb-ease);
	-webkit-tap-highlight-color: transparent;
}
:is(#ghx, #ghl) .ghb:focus-visible { outline: none; }
:is(#ghx, #ghl) .ghb:focus-visible .ghb-mark::after { opacity: 1; }

/* ---------- Monograma: ouro, luz que dá a volta, brilho e faísca ---------- */
:is(#ghx, #ghl) .ghb-mark { position: relative; display: block; flex: none; width: var(--ghb-s); aspect-ratio: 1; transition: transform .7s var(--ghb-ease); }
/* anel de foco, só no teclado */
:is(#ghx, #ghl) .ghb-mark::after { content: ""; position: absolute; inset: -7px; border-radius: 50%; box-shadow: 0 0 0 1.5px rgba(232, 196, 124, .8); opacity: 0; transition: opacity .3s ease; }
:is(#ghx, #ghl) .ghb-mark i { position: absolute; inset: 0; display: block; pointer-events: none; }
/* o relevo e o brilho em volta seguem o desenho do monograma (o filtro fica no grupo, depois da máscara) */
:is(#ghx, #ghl) .ghb-coin { isolation: isolate; filter: drop-shadow(0 0 .6px rgba(255, 236, 190, .55)) drop-shadow(0 4px 12px rgba(214, 150, 60, .42)); }
:is(#ghx, #ghl) :is(.ghb-gold, .ghb-orbit, .ghb-spec) {
	-webkit-mask: var(--ghb-mono) center / contain no-repeat; mask: var(--ghb-mono) center / contain no-repeat;
}
:is(#ghx, #ghl) .ghb-mark .ghb-halo {
	inset: -55%; border-radius: 50%;
	background: radial-gradient(closest-side, rgba(240, 196, 120, .26), rgba(232, 170, 84, .08) 52%, transparent 74%);
	animation: ghb-breathe 6.5s ease-in-out infinite;
}
@keyframes ghb-breathe { 0%, 100% { opacity: .55; transform: scale(.92); } 50% { opacity: 1; transform: scale(1.04); } }
/* folha de ouro com relevo: luz no alto à esquerda, ouro velho embaixo */
:is(#ghx, #ghl) .ghb-gold {
	background:
		radial-gradient(120% 90% at 22% 12%, rgba(255, 247, 222, .9), rgba(255, 247, 222, 0) 46%),
		linear-gradient(135deg, #fff2cf 0%, #f1d08f 22%, #c99a4c 46%, #f6dea4 64%, #b0803a 82%, #e9c57d 100%);
}
/* a luz que gira em volta do anel do G (o centro do anel é o centro do monograma) */
:is(#ghx, #ghl) .ghb-orbit {
	background: conic-gradient(from var(--ghb-o), rgba(255, 250, 235, 0) 0deg 286deg, rgba(255, 250, 235, .5) 326deg, #fffdf6 346deg, rgba(255, 250, 235, 0) 360deg);
	mix-blend-mode: screen; opacity: .78;
	animation: ghb-orbit 9s linear infinite;
	transition: opacity .5s ease;
}
/* brilho que atravessa o monograma (junto com o do nome) */
:is(#ghx, #ghl) .ghb-spec {
	background: linear-gradient(112deg, rgba(255, 255, 255, 0) 38%, rgba(255, 253, 244, .95) 50%, rgba(255, 255, 255, 0) 62%) 160% 0 / 300% 100% no-repeat;
	mix-blend-mode: screen;
	animation: ghb-sweep 10s var(--ghb-io) 4s infinite;
}
/* faísca na ponta do G */
:is(#ghx, #ghl) .ghb-mark .ghb-glint {
	inset: auto; left: 83%; top: 15%; width: 72%; aspect-ratio: 1; translate: -50% -50%; opacity: 0; mix-blend-mode: screen;
	animation: ghb-twinkle 10s var(--ghb-io) 4.5s infinite;
}
:is(#ghx, #ghl) .ghb-glint::before, :is(#ghx, #ghl) .ghb-glint::after {
	content: ""; position: absolute; left: 0; top: 50%; width: 100%; height: 1.5px; margin-top: -.75px; border-radius: 2px;
	background: linear-gradient(90deg, transparent, rgba(255, 250, 236, .2) 26%, #fff 50%, rgba(255, 250, 236, .2) 74%, transparent);
	filter: drop-shadow(0 0 3px rgba(255, 236, 200, .95));
}
:is(#ghx, #ghl) .ghb-glint::after { transform: rotate(90deg) scaleX(.62); }
:is(#ghx, #ghl) .ghb-glint > i { inset: 38%; border-radius: 50%; background: radial-gradient(closest-side, #fff, rgba(255, 246, 222, .8) 34%, transparent); }

/* ---------- Nome e descritor (as fontes do logo oficial) ---------- */
:is(#ghx, #ghl) .ghb .ghb-word { display: flex; flex-direction: column; align-items: stretch; gap: calc(var(--ghb-t) * .2); min-width: 0; }
:is(#ghx, #ghl) .ghb .ghb-name {
	display: block; margin: 0 -.3em 0 0; padding: .06em 0;
	font: 500 calc(var(--ghb-t) * .395)/1 "GH Serif", "Noto Serif Display", Georgia, serif; letter-spacing: .3em; text-transform: uppercase; white-space: nowrap;
	background:
		linear-gradient(100deg, rgba(255, 255, 255, 0) 40%, rgba(255, 253, 244, .98) 50%, rgba(255, 255, 255, 0) 60%) 160% 0 / 300% 100% no-repeat,
		linear-gradient(180deg, #fbf3df 0%, #ecdcb4 46%, #cfae6c 100%);
	-webkit-background-clip: text; background-clip: text; color: transparent;
	animation: ghb-sweep 10s var(--ghb-io) 4.2s infinite;
}
:is(#ghx, #ghl) .ghb .ghb-sub {
	display: flex; justify-content: space-between; align-items: center; margin: 0;
	font: 500 calc(var(--ghb-t) * .205)/1 "GH Sans", "Jost", ui-sans-serif, system-ui, sans-serif; letter-spacing: 0; text-transform: uppercase; white-space: nowrap;
	color: #c9a45f;
}
/* o descritor ocupa a largura exata do nome, como no logo oficial: cada letra num espaço, as palavras com folga */
:is(#ghx, #ghl) .ghb .ghb-sub > span { display: block; }
:is(#ghx, #ghl) .ghb .ghb-sub > .ghb-sp { width: .7em; }
@keyframes ghb-sweep { 0% { background-position: 160% 0, 0 0; } 14%, 100% { background-position: -60% 0, 0 0; } }
@keyframes ghb-twinkle {
	0%, 9% { opacity: 0; transform: scale(.2) rotate(-30deg); }
	13% { opacity: 1; transform: scale(1) rotate(0deg); }
	19% { opacity: .8; transform: scale(.66) rotate(14deg); }
	26%, 100% { opacity: 0; transform: scale(.2) rotate(30deg); }
}

/* ---------- Primeira página da visita: o ouro corre em volta do anel e o nome se forma ---------- */
:is(#ghx, #ghl) .ghb.is-mint.is-css .ghb-gold {
	-webkit-mask: var(--ghb-mono) center / contain no-repeat, conic-gradient(from 34deg, #000 var(--ghb-p), transparent 0);
	-webkit-mask-composite: source-in;
	mask: var(--ghb-mono) center / contain no-repeat, conic-gradient(from 34deg, #000 var(--ghb-p), transparent 0);
	mask-composite: intersect;
	animation: ghb-pour 1.25s cubic-bezier(.55, .1, .25, 1) .15s backwards;
}
@keyframes ghb-pour { from { --ghb-p: 0deg; } to { --ghb-p: 360deg; } }
:is(#ghx, #ghl) .ghb.is-mint.is-css .ghb-halo { animation: ghb-bloom 1.6s var(--ghb-ease) .2s backwards, ghb-breathe 6.5s ease-in-out 1.8s infinite; }
@keyframes ghb-bloom { from { opacity: 0; transform: scale(.4); } 55% { opacity: 1; transform: scale(1.14); } to { opacity: .55; transform: scale(.92); } }
:is(#ghx, #ghl) .ghb.is-mint.is-css .ghb-orbit { animation: ghb-fade 1s ease 1.2s backwards, ghb-orbit 9s linear 1.2s infinite; }
:is(#ghx, #ghl) .ghb.is-mint.is-css .ghb-name { animation: ghb-track 1.3s var(--ghb-ease) .5s backwards, ghb-sweep-now 1.2s var(--ghb-io) 1.45s backwards, ghb-sweep 10s var(--ghb-io) 12s infinite; }
:is(#ghx, #ghl) .ghb.is-mint.is-css .ghb-sub { animation: ghb-sub 1.2s var(--ghb-ease) .95s backwards; }
:is(#ghx, #ghl) .ghb.is-mint.is-css .ghb-spec { animation: ghb-sweep-now 1.1s var(--ghb-io) 1.3s backwards, ghb-sweep 10s var(--ghb-io) 12s infinite; }
:is(#ghx, #ghl) .ghb.is-mint.is-css .ghb-glint { animation: ghb-twinkle-now 1.4s var(--ghb-io) 1.25s backwards, ghb-twinkle 10s var(--ghb-io) 12.5s infinite; }
@keyframes ghb-fade { from { opacity: 0; } }
@keyframes ghb-track { from { opacity: 0; letter-spacing: .72em; filter: blur(7px); } 60% { opacity: 1; filter: blur(0); } to { opacity: 1; letter-spacing: .3em; filter: blur(0); } }
@keyframes ghb-sub { from { opacity: 0; clip-path: inset(0 100% 0 0); } to { opacity: 1; clip-path: inset(0 0 0 0); } }
/* enquanto a abertura do início (ou a cena da tela de entrada) está na frente, a marca espera */
#ghx.ghx-has-intro:has([data-ghx-intro]) .ghb.is-mint.is-css :is(.ghb-gold, .ghb-halo, .ghb-orbit, .ghb-name, .ghb-sub, .ghb-spec, .ghb-glint),
.ghl-js #ghl:not(.is-in) .ghb.is-mint.is-css :is(.ghb-gold, .ghb-halo, .ghb-orbit, .ghb-name, .ghb-sub, .ghb-spec, .ghb-glint) { animation-play-state: paused; }

/* ---------- Ouro fundido (WebGL, brand.js) ---------- */
/* a tela tem o dobro do monograma, centrada nele: sobra para o brilho, a pena de luz e a faísca */
:is(#ghx, #ghl) .ghb-mark .ghb-gl { position: absolute; left: 50%; top: 50%; width: 200%; height: 200%; translate: -50% -50%; pointer-events: none; opacity: 0; transition: opacity .4s ease; }
:is(#ghx, #ghl) .ghb.is-gl .ghb-gl { opacity: 1; }
:is(#ghx, #ghl) .ghb.is-gl :is(.ghb-coin, .ghb-glint) { opacity: 0; transition: opacity .4s ease; }
:is(#ghx, #ghl) .ghb.is-gl .ghb-halo { opacity: .4; animation: none; transform: none; }
/* o nome: ouro com horizonte (luz em cima, ouro velho embaixo), gravado com 1 px de sombra, e o brilho que segue a luz do monograma */
:is(#ghx, #ghl) .ghb.is-gl .ghb-name {
	background:
		linear-gradient(100deg, rgba(255, 255, 255, 0) 42%, rgba(255, 252, 240, .72) 50%, rgba(255, 255, 255, 0) 58%) calc(var(--ghb-l, .5) * 100%) 0 / 260% 100% no-repeat,
		linear-gradient(180deg, #fff6e1 0%, #eedcb0 42%, #cfa967 58%, #ecd39d 100%);
	-webkit-background-clip: text; background-clip: text; color: transparent;
	animation: none;
	filter: drop-shadow(0 1px 0 rgba(24, 14, 3, .85));
}
/* primeira página da visita: até o script decidir (ouro fundido ou CSS) a marca espera escondida; sem script, ela aparece em 3 s */
:is(#ghx, #ghl) .ghb.is-mint:not(.is-gl, .is-css) :is(.ghb-coin, .ghb-glint, .ghb-halo, .ghb-name, .ghb-sub) { opacity: 0; animation: ghb-late .6s ease 3s forwards; }
@keyframes ghb-late { to { opacity: 1; } }
/* com o ouro fundido, o nome se acende atrás da pena de luz e o descritor sobe letra por letra */
:is(#ghx, #ghl) .ghb.is-gl.is-mint .ghb-name, :is(#ghx, #ghl) .ghb.is-gl.is-mint .ghb-halo, :is(#ghx, #ghl) .ghb.is-gl.is-mint .ghb-sub > span { opacity: 0; }
:is(#ghx, #ghl) .ghb.is-gl.is-write .ghb-name {
	opacity: 1;
	-webkit-mask: linear-gradient(90deg, #000 40%, transparent 60%) 0 0 / 250% 100% no-repeat;
	mask: linear-gradient(90deg, #000 40%, transparent 60%) 0 0 / 250% 100% no-repeat;
	animation: ghb-write calc(1.15s * var(--ghb-k, 1)) cubic-bezier(.3, .1, .2, 1) both;
}
@keyframes ghb-write { from { -webkit-mask-position: 100% 0; mask-position: 100% 0; } to { -webkit-mask-position: 0 0; mask-position: 0 0; } }
:is(#ghx, #ghl) .ghb.is-gl.is-write .ghb-sub > span { opacity: 1; animation: ghb-letter calc(.8s * var(--ghb-k, 1)) var(--ghb-ease) calc((.55s + var(--i, 0) * 32ms) * var(--ghb-k, 1)) both; }
@keyframes ghb-letter { from { opacity: 0; transform: translateY(.6em); filter: blur(2px); } }
:is(#ghx, #ghl) .ghb.is-gl.is-write .ghb-halo { opacity: .4; animation: ghb-fade calc(1.2s * var(--ghb-k, 1)) ease calc(.9s * var(--ghb-k, 1)) both; }

/* ---------- Ao passar o mouse: o brilho atravessa na hora, a luz do anel acende ---------- */
@media (hover: hover) {
	:is(#ghx, #ghl) .ghb:hover .ghb-mark { transform: scale(1.06) rotate(-4deg); }
	:is(#ghx, #ghl) .ghb:hover .ghb-orbit { opacity: 1; }
	:is(#ghx, #ghl) .ghb:hover .ghb-halo { animation-duration: 2.4s; }
	:is(#ghx, #ghl) .ghb:hover :is(.ghb-spec, .ghb-name) { animation: ghb-sweep-now 1.1s var(--ghb-io) both; }
	:is(#ghx, #ghl) .ghb:hover .ghb-name { animation-delay: .12s; }
	:is(#ghx, #ghl) .ghb:hover .ghb-glint { animation: ghb-twinkle-now 1.3s var(--ghb-io) .3s both; }
}
@media (hover: hover) {
	:is(#ghx, #ghl) .ghb.is-gl:hover .ghb-mark { transform: scale(1.045); }
	:is(#ghx, #ghl) .ghb.is-gl:not(.is-write):hover .ghb-name { animation: none; }
}
@keyframes ghb-sweep-now { from { background-position: 160% 0, 0 0; } to { background-position: -60% 0, 0 0; } }
@keyframes ghb-twinkle-now {
	0% { opacity: 0; transform: scale(.2) rotate(-30deg); }
	30% { opacity: 1; transform: scale(1) rotate(0deg); }
	55% { opacity: .8; transform: scale(.66) rotate(14deg); }
	100% { opacity: 0; transform: scale(.2) rotate(30deg); }
}

/* ---------- Tamanhos ---------- */
#ghx.is-scrolled .ghx-nav .ghb { transform: scale(.9); }
#ghx .ghx-foot a.ghb { --ghb-s: 38px; --ghb-t: 36px; }
#ghl a.ghb { --ghb-s: 50px; --ghb-t: 43px; }
@media (min-width: 1024px) and (max-width: 1199px) {
	#ghx .ghx-nav:has(.ghx-links) .ghb .ghb-word { display: none; }
}
@media (max-width: 1023px) {
	:is(#ghx, #ghl) a.ghb { --ghb-s: 40px; --ghb-t: 36px; }
	#ghx.is-scrolled .ghx-nav .ghb { transform: none; }
}
@media (max-width: 760px) {
	:is(#ghx, #ghl) a.ghb { --ghb-s: 36px; --ghb-t: 33px; }
	:is(#ghx, #ghl) .ghb .ghb-name { letter-spacing: .26em; margin-right: -.26em; }
	:is(#ghx, #ghl) .ghb.is-mint.is-css .ghb-name { animation-name: ghb-track-sm, ghb-sweep-now, ghb-sweep; }
	@keyframes ghb-track-sm { from { opacity: 0; letter-spacing: .6em; filter: blur(6px); } 60% { opacity: 1; filter: blur(0); } to { opacity: 1; letter-spacing: .26em; filter: blur(0); } }
}
@media (max-width: 380px) {
	:is(#ghx, #ghl) .ghb .ghb-sub { display: none; }
}
@media (prefers-reduced-motion: reduce) {
	:is(#ghx, #ghl) .ghb, :is(#ghx, #ghl) .ghb * { animation: none !important; transition: none !important; }
	:is(#ghx, #ghl) .ghb-glint { display: none !important; }
	:is(#ghx, #ghl) .ghb-gold { -webkit-mask: var(--ghb-mono) center / contain no-repeat !important; mask: var(--ghb-mono) center / contain no-repeat !important; }
}
@media (forced-colors: active) {
	:is(#ghx, #ghl) .ghb-gold { background: CanvasText; }
	:is(#ghx, #ghl) :is(.ghb-orbit, .ghb-spec, .ghb-glint, .ghb-halo, .ghb-gl) { display: none; }
	:is(#ghx, #ghl) .ghb .ghb-name { color: CanvasText; background: none; }
}
/* entre 1200 e 1365 px o menu do meio fica perto: a marca encolhe um pouco */
@media (min-width: 1200px) and (max-width: 1365px) {
	#ghx .ghx-nav a.ghb { --ghb-s: 42px; --ghb-t: 36px; }
	#ghx .ghx-nav .ghb .ghb-name { letter-spacing: .27em; margin-right: -.27em; }
}