/*
 * Hero section — signature bottle + leaf orbit visual.
 * Depends on log-hero.css for shared hero tokens/animation timing.
 * @package log-core
 */

.hero-visual {
	position: relative;
	min-height: 404px;
	margin-top: 84px;
	display: flex;
	align-items: center;
	justify-content: center;
	padding: 18px 6px;
}

.leaf-orbit {
	position: absolute;
	width: 368px;
	height: 368px;
	border: 1.4px dashed rgba(188, 211, 172, .32);
	border-radius: 50%;
	animation: log-orbit-spin 32s linear infinite;
	pointer-events: none;
}

@keyframes log-orbit-spin {
	from { transform: rotate(0deg); }
	to { transform: rotate(360deg); }
}

.leaf-node {
	position: absolute;
	width: 32px;
	height: 32px;
	border-radius: 50%;
	background: rgba(188, 211, 172, .14);
	border: 1px solid rgba(188, 211, 172, .3);
	display: flex;
	align-items: center;
	justify-content: center;
	color: var(--sage-400);
	animation: log-orbit-counter 32s linear infinite;
}

.leaf-node .icon { width: 15px; height: 15px; }
.leaf-node.n1 { top: -16px; left: 50%; margin-left: -16px; }
.leaf-node.n2 { top: 50%; right: -16px; margin-top: -16px; }
.leaf-node.n3 { bottom: -16px; left: 50%; margin-left: -16px; }
.leaf-node.n4 { top: 50%; left: -16px; margin-top: -16px; }

@keyframes log-orbit-counter {
	from { transform: rotate(0deg); }
	to { transform: rotate(-360deg); }
}

.leaf-particle {
	position: absolute;
	color: var(--sage-400);
	opacity: 0;
	animation: log-leaf-drift 7s ease-in-out infinite;
	pointer-events: none;
}

.leaf-particle .icon { width: 14px; height: 14px; }

@keyframes log-leaf-drift {
	0% { opacity: 0; transform: translateY(0) rotate(0deg); }
	12% { opacity: .55; }
	50% { opacity: .4; transform: translateY(-130px) rotate(160deg); }
	100% { opacity: 0; transform: translateY(-220px) rotate(280deg); }
}

.bottle-wrap {
	position: relative;
	z-index: 3;
	display: flex;
	flex-direction: column;
	align-items: center;
	animation: log-bottle-float 6s ease-in-out infinite;
}

@keyframes log-bottle-float {
	0%, 100% { transform: translateY(0); }
	50% { transform: translateY(-9px); }
}

.bottle-cap {
	width: 64px;
	height: 22px;
	border-radius: 8px 8px 4px 4px;
	background: linear-gradient(160deg, var(--sage-500), var(--sage-700));
	box-shadow: var(--shadow-sm);
}

.bottle-neck { width: 36px; height: 16px; background: rgba(255, 255, 255, .14); margin: 0 auto; }

.bottle-body {
	position: relative;
	width: 222px;
	height: 268px;
	border-radius: 30px;
	background: linear-gradient(165deg, rgba(255, 255, 255, .1), rgba(255, 255, 255, .02));
	border: 1px solid rgba(255, 255, 255, .18);
	overflow: hidden;
	backdrop-filter: blur(12px);
	-webkit-backdrop-filter: blur(12px);
	box-shadow: 0 30px 70px rgba(0, 0, 0, .38);
}

.bottle-liquid {
	position: absolute;
	left: 0;
	right: 0;
	bottom: 0;
	height: 0%;
	background: linear-gradient(180deg, var(--sage-400), var(--sage-700));
	transition: height 1.6s var(--ease);
}

.bottle-liquid::before {
	content: '';
	position: absolute;
	top: -9px;
	left: -15%;
	width: 130%;
	height: 18px;
	background: inherit;
	border-radius: 48%;
	animation: log-wave-bob 3.4s ease-in-out infinite;
}

@keyframes log-wave-bob {
	0%, 100% { transform: translateX(0) translateY(0); }
	50% { transform: translateX(-3%) translateY(-3px); }
}

.bottle-label {
	position: absolute;
	left: 14px;
	right: 14px;
	bottom: 14px;
	background: rgba(255, 250, 247, .97);
	border-radius: 14px;
	padding: 14px 16px;
	transition: opacity .35s var(--ease), transform .35s var(--ease);
}

.bottle-label.fade { opacity: 0; transform: translateY(6px); }
.bl-link { display: block; text-decoration: none; color: inherit; }
.bottle-label .bl-top-row { display: flex; align-items: center; justify-content: space-between; gap: 10px; margin-bottom: 6px; }

.bottle-label .bl-eyebrow {
	font-size: 9px;
	font-weight: 800;
	letter-spacing: .07em;
	text-transform: uppercase;
	color: var(--sage-700);
	display: flex;
	align-items: center;
	gap: 6px;
	min-width: 0;
	flex: 1;
}

.bottle-label .bl-eyebrow .icon { width: 11px; height: 11px; flex-shrink: 0; }
.bottle-label .bl-eyebrow-text { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }

.bottle-label strong {
	display: block;
	font-family: var(--display);
	font-size: 16.5px;
	font-weight: 700;
	color: var(--ink-900);
	line-height: 1.26;
}

.bottle-label .bl-meta { display: block; font-size: 11.5px; color: var(--gray-600); margin-top: 2px; }
.bottle-label .bl-price { flex-shrink: 0; font-family: var(--display); font-weight: 800; font-size: 15px; color: var(--plum-700); }

.float-badge {
	position: absolute;
	display: flex;
	align-items: center;
	gap: 8px;
	font-size: 11px;
	font-weight: 800;
	letter-spacing: .04em;
	text-transform: uppercase;
	padding: 10px 16px;
	border-radius: var(--r-pill);
	box-shadow: var(--shadow-md);
	z-index: 5;
	animation: log-badge-float 4.5s ease-in-out infinite;
	white-space: nowrap;
}

.fb-top { top: 2%; right: 2%; background: var(--sage-500); color: var(--plum-950); }
.fb-top .fb-dot { width: 7px; height: 7px; border-radius: 50%; background: var(--plum-900); animation: log-pulse-dot 1.4s ease-in-out infinite; }
.fb-bottom { bottom: -10px; left: -32px; background: rgba(255, 250, 247, .97); color: var(--plum-800); animation-delay: .6s; }
.fb-bottom .icon { width: 13px; height: 13px; color: var(--sage-700); }

@keyframes log-badge-float {
	0%, 100% { transform: translateY(0); }
	50% { transform: translateY(-9px); }
}

@keyframes log-pulse-dot {
	0%, 100% { opacity: 1; transform: scale(1); }
	50% { opacity: .4; transform: scale(.7); }
}

@media (max-width: 760px) {
	.hero-visual { margin-top: 30px; min-height: 380px; }
}