/* A Garraferia: estilos globais do tema (tokens de a-garraferia.pen) */

@font-face {
	font-family: "Marcellus";
	font-style: normal;
	font-weight: 400;
	font-display: swap;
	src: url("../fonts/marcellus-latin.woff2") format("woff2");
}

:root {
	--bg: #f6f1e7;
	--wine: #6e1423;
	--wine-dark: #3e0e18;
	--wine-deep: #24070d;
	--gold: #b08d57;
	--gold-light: #d8c39a;
	--font-display: "Marcellus", Georgia, serif;
}

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

html,
body {
	margin: 0;
	min-height: 100%;
}

body {
	min-height: 100vh;
	min-height: 100svh;
	background: radial-gradient(120% 90% at 50% 42%, #5b1625 0%, var(--wine-dark) 46%, var(--wine-deep) 100%) fixed;
	color: var(--bg);
	font-family: var(--font-display);
	-webkit-font-smoothing: antialiased;
}

/* Grão sutil de papel */
body::before {
	content: "";
	position: fixed;
	inset: 0;
	z-index: 0;
	pointer-events: none;
	opacity: 0.08;
	mix-blend-mode: overlay;
	background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='200' height='200'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.85' numOctaves='3' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E");
}

/* ---------- em breve ---------- */
.soon {
	position: relative;
	z-index: 1;
	min-height: 100vh;
	min-height: 100svh;
	display: grid;
	place-items: center;
	padding: 72px 28px;
}

.soon-frame {
	position: fixed;
	inset: clamp(14px, 2.4vw, 28px);
	border: 1px solid rgba(216, 195, 154, 0.3);
	pointer-events: none;
}

.soon-frame::after {
	content: "";
	position: absolute;
	inset: 6px;
	border: 1px solid rgba(216, 195, 154, 0.14);
}

.soon-frame i {
	position: absolute;
	width: 7px;
	height: 7px;
	background: var(--gold-light);
	transform: rotate(45deg);
}

.soon-frame i:nth-child(1) { top: -4px; left: -4px; }
.soon-frame i:nth-child(2) { top: -4px; right: -4px; }
.soon-frame i:nth-child(3) { bottom: -4px; left: -4px; }
.soon-frame i:nth-child(4) { bottom: -4px; right: -4px; }

.soon-content {
	display: flex;
	flex-direction: column;
	align-items: center;
	gap: clamp(36px, 5vw, 56px);
}

.soon-logo {
	width: min(560px, 82vw);
	margin: 0;
	line-height: 0;
}

.logo {
	display: block;
	width: 100%;
	height: auto;
	overflow: visible;
}

.logo-text { fill: var(--bg); }
.logo-sign,
.logo-bottle,
.logo-stream,
.logo-wine { fill: var(--gold-light); }
.logo-band { fill: var(--wine-dark); }
.logo-glass { stroke: var(--gold-light); stroke-width: 1.4; }

.soon-label {
	display: flex;
	align-items: center;
	gap: clamp(14px, 2vw, 22px);
	margin: 0;
	font-size: clamp(22px, 2.6vw, 30px);
	font-weight: 400;
	letter-spacing: 0.08em;
	color: var(--gold-light);
}

.soon-label::before,
.soon-label::after {
	content: "";
	width: clamp(28px, 5vw, 64px);
	height: 1px;
	background: currentColor;
	opacity: 0.55;
}

/* ---------- animação de entrada: a garrafa serve a taça ---------- */
@media (prefers-reduced-motion: no-preference) {
	.soon-frame { animation: soon-fade 1.6s ease-out both; }
	.logo-text,
	.logo-sign,
	.logo-bottle,
	.logo-band,
	.logo-glass { animation: soon-fade 1.2s ease-out both; }
	.logo-stream {
		transform-box: fill-box;
		transform-origin: 50% 0;
		animation: soon-pour 0.8s 1s cubic-bezier(0.5, 0, 0.3, 1) both;
	}
	.logo-wine {
		transform-box: fill-box;
		transform-origin: 50% 100%;
		animation: soon-fill 1.2s 1.6s ease-out both;
	}
	.soon-label { animation: soon-rise 1s 2.4s ease-out both; }
}

@keyframes soon-fade {
	from { opacity: 0; }
	to { opacity: 1; }
}

@keyframes soon-pour {
	from { transform: scaleY(0); }
	to { transform: scaleY(1); }
}

@keyframes soon-fill {
	from { transform: scaleY(0); opacity: 0.5; }
	to { transform: scaleY(1); opacity: 1; }
}

@keyframes soon-rise {
	from { opacity: 0; transform: translateY(10px); }
	to { opacity: 1; transform: none; }
}