/* =========================================================
   Eli Soares — página "Em breve"
   Identidade da marca: ouro rosé, branco e dourado.
   ========================================================= */

:root {
	--eb-rose: #b77165;
	--eb-rose-escuro: #9a584c;
	--eb-texto: #5b3a34;
	--eb-texto-suave: #7d5d56;
	--eb-ouro-rose: linear-gradient(90deg, #d78e87 0%, #ad6557 33%, #efb6ab 59%, #b77165 78%, #e1ada0 100%);
	--eb-ouro-rose-texto: linear-gradient(90deg, #c47b71 0%, #9a5547 33%, #d4958a 59%, #a5625a 78%, #c98b7f 100%);
	--eb-dourado: linear-gradient(90deg, #bd8031 0%, #f7e181 10%, #bd8031 50%, #f7e181 90%, #bd8031 100%);
	--eb-script: "Corinthia", "Brush Script MT", cursive;
	--eb-serif: "Gilda Display", Georgia, serif;
	--eb-sans: "Jost", "Segoe UI", system-ui, sans-serif;
}

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

body {
	margin: 0;
	min-height: 100vh;
	min-height: 100dvh;
	display: flex;
	flex-direction: column;
	background: #fff;
	color: var(--eb-texto);
	font-family: var(--eb-sans);
	font-weight: 300;
	-webkit-font-smoothing: antialiased;
	overflow-x: hidden;
}

/* Estampa da marca (monograma) nas bordas, limpa no centro. */
body::before {
	content: "";
	position: fixed;
	inset: 0;
	z-index: -1;
	background-image: url("../img/monograma.svg"), url("../img/monograma.svg");
	background-size: 104px 104px;
	background-position: 0 0, 52px 52px;
	opacity: .22;
	-webkit-mask-image: radial-gradient(ellipse 70% 65% at 50% 50%, transparent 45%, #000 100%);
	mask-image: radial-gradient(ellipse 70% 65% at 50% 50%, transparent 45%, #000 100%);
	pointer-events: none;
}

/* Topo no estilo do papel timbrado: logo entre dois filetes. */
.eb-topo {
	display: flex;
	align-items: center;
	justify-content: center;
	gap: clamp(16px, 4vw, 40px);
	padding: clamp(20px, 5vh, 44px) 16px 0;
}

.eb-topo::before,
.eb-topo::after {
	content: "";
	flex: 0 1 150px;
	height: 3px;
	border-radius: 2px;
	background: var(--eb-ouro-rose);
}

.eb-logo {
	display: block;
	width: clamp(170px, 30vw, 250px);
	height: auto;
}

.eb-conteudo {
	flex: 1;
	display: grid;
	align-items: center;
	justify-items: center;
	gap: clamp(4px, 2vw, 40px);
	width: min(1040px, 100%);
	margin: 0 auto;
	padding: clamp(8px, 3vh, 32px) 16px clamp(24px, 4vh, 40px);
}

.eb-ilustra {
	width: min(100%, 400px);
}

.eb-ilustra svg {
	display: block;
	width: 100%;
	height: auto;
}

.eb-texto {
	max-width: 30rem;
	text-align: center;
}

.eb-sobretitulo {
	margin: 0;
	font-size: .78rem;
	font-weight: 400;
	letter-spacing: .32em;
	text-transform: uppercase;
	color: var(--eb-rose-escuro);
}

.eb-titulo {
	display: inline-block;
	margin: .05em 0 0;
	padding: .12em .2em .02em; /* espaço para as voltas da letra cursiva */
	font-family: var(--eb-script);
	font-size: clamp(5.2rem, 16vw, 8.5rem);
	font-weight: 400;
	line-height: .85;
	background: var(--eb-ouro-rose-texto);
	-webkit-background-clip: text;
	background-clip: text;
	color: transparent;
}

.eb-divisor {
	display: block;
	width: 72px;
	height: 2px;
	margin: .2rem auto 1.2rem;
	background: var(--eb-dourado);
}

.eb-frase {
	margin: 0;
	font-family: var(--eb-serif);
	font-size: clamp(1.3rem, 3vw, 1.6rem);
	font-weight: 400;
	line-height: 1.3;
}

.eb-detalhe {
	margin: .9rem 0 0;
	font-size: 1rem;
	line-height: 1.7;
	color: var(--eb-texto-suave);
}

.eb-rodape {
	padding: 0 16px 20px;
	text-align: center;
}

.eb-rodape p {
	margin: 0;
	font-size: .78rem;
	letter-spacing: .14em;
	color: var(--eb-texto-suave);
}

/* Faixa ouro rosé no rodapé, como no papel timbrado. */
.eb-faixa {
	height: 12px;
	background: var(--eb-ouro-rose);
}

@media (min-width: 860px) {
	.eb-conteudo {
		grid-template-columns: 1fr 1fr;
	}

	.eb-texto {
		justify-self: start;
		text-align: left;
	}

	.eb-titulo {
		margin-left: -.12em;
	}

	.eb-divisor {
		margin-left: 0;
	}
}

/* ---------- Ilustração ---------- */

.eb-sacola-nome {
	font-family: var(--eb-sans);
	font-size: 10px;
	font-weight: 400;
	letter-spacing: 3px;
	fill: #fff;
}

/* Pé batendo de impaciência (gira no joelho). */
.eb-perna {
	transform-box: view-box;
	transform-origin: 247px 203px;
	animation: eb-batendo 1.3s ease-in-out infinite;
}

.eb-relogio {
	animation: eb-flutua 4s ease-in-out infinite;
}

.eb-ponteiro {
	transform-box: view-box;
	transform-origin: 84px 102px;
	animation: eb-gira 4s linear infinite;
}

.eb-ponteiro-hora {
	animation-duration: 48s;
}

.eb-ponto {
	animation: eb-pisca 1.4s ease-in-out infinite;
	animation-delay: var(--atraso, 0s);
}

.eb-brilho {
	transform-box: fill-box;
	transform-origin: center;
	animation: eb-brilha 2.8s ease-in-out infinite;
	animation-delay: var(--atraso, 0s);
}

@keyframes eb-batendo {
	0%, 100% { transform: rotate(0deg); }
	50% { transform: rotate(-9deg); }
}

@keyframes eb-flutua {
	0%, 100% { transform: translateY(0); }
	50% { transform: translateY(-6px); }
}

@keyframes eb-gira {
	to { transform: rotate(360deg); }
}

@keyframes eb-pisca {
	0%, 70%, 100% { opacity: .25; }
	35% { opacity: 1; }
}

@keyframes eb-brilha {
	0%, 100% { transform: scale(.55); opacity: .35; }
	50% { transform: scale(1); opacity: 1; }
}

@media (prefers-reduced-motion: reduce) {
	.eb-ilustra * {
		animation: none !important;
	}
}