/* =========================================================================
   WIFA — 3D / Advanced Visual Layer
   Loaded after professional-theme.css. Adds depth (floating badge medals
   that echo the copy next to them — "empowering" / "healthy lifestyles"
   in the top block, "tools" / "wisdom" in the bottom block), glow orbs,
   and real perspective tilt on the hero art + pillar cards.
   ========================================================================= */

.header { perspective: 1400px; }

/* ---- Ambient depth glows behind the hero copy ---- */
.hero-orbit { position: absolute; inset: 0; z-index: 1; pointer-events: none; overflow: hidden; }
.orbit-glow {
	position: absolute;
	border-radius: 50%;
	filter: blur(60px);
	opacity: .38;
}
.orbit-glow--a { width: 320px; height: 320px; top: -8%; right: -6%; background: radial-gradient(circle, var(--wf-ember, #d9793c), transparent 70%); }
.orbit-glow--b { width: 260px; height: 260px; bottom: -10%; left: -6%; background: radial-gradient(circle, var(--wf-gold, #c9a24a), transparent 70%); }

/* ---- Floating medallion badges: real, text-relevant images given a
   raised, lit, rotating-rim "medal" treatment for a 3D feel ---- */
.orbit-badge {
	position: absolute;
	width: 88px; height: 88px;
	border-radius: 50%;
	padding: 5px;
	background: linear-gradient(160deg, rgba(255,255,255,.16), rgba(255,255,255,.02));
	border: 1px solid rgba(201,162,74,.45);
	box-shadow:
		0 22px 40px rgba(0,0,0,.5),
		0 0 0 6px rgba(13,17,23,.4),
		inset 0 1px 3px rgba(255,255,255,.3);
	backdrop-filter: blur(4px);
	pointer-events: auto;
	animation: wf-badge-float 6.5s ease-in-out infinite;
	transition: transform .3s ease, box-shadow .3s ease;
}
.orbit-badge::before {
	content: '';
	position: absolute;
	inset: -7px;
	border-radius: 50%;
	background: conic-gradient(from 0deg, var(--wf-ember, #d9793c), var(--wf-gold, #c9a24a), var(--wf-gold-soft, #e3c98a), var(--wf-ember, #d9793c));
	opacity: .5;
	filter: blur(5px);
	z-index: -1;
	animation: wf-badge-spin 9s linear infinite;
}
.orbit-badge img {
	width: 100%; height: 100%;
	object-fit: cover;
	border-radius: 50%;
	display: block;
	filter: drop-shadow(0 6px 8px rgba(0,0,0,.4));
}
.orbit-badge:hover {
	transform: translateY(-6px) scale(1.08);
	box-shadow:
		0 26px 46px rgba(0,0,0,.55),
		0 0 0 6px rgba(13,17,23,.4),
		0 0 26px rgba(201,162,74,.4),
		inset 0 1px 3px rgba(255,255,255,.35);
}

@keyframes wf-badge-spin { to { transform: rotate(360deg); } }
@keyframes wf-badge-float {
	0%, 100% { transform: translateY(0) rotate(0deg); }
	50%      { transform: translateY(-14px) rotate(3deg); }
}

/* Placement — top pair sits by the "empowering the youth / healthy
   lifestyles" copy, bottom pair by the "tools / wisdom" copy */
.orbit-badge--1 { top: 8%;  right: 4%;  animation-delay: .1s; }
.orbit-badge--2 { top: 27%; right: 21%; width: 62px; height: 62px; animation-delay: 1.3s; }
.orbit-badge--3 { bottom: 16%; left: 4%;  animation-delay: .7s; }
.orbit-badge--4 { bottom: 5%;  left: 21%; width: 60px; height: 60px; animation-delay: 2.1s; }

/* ---- Perspective tilt targets (driven by js/3d-enhance.js) ---- */
[data-tilt] { transition: transform .25s ease-out; will-change: transform; }

#media-figure, .Product_sec li .left .img figure {
	transform-style: preserve-3d;
	box-shadow:
		0 0 0 1px rgba(201,162,74,.4),
		0 26px 55px rgba(0,0,0,.5),
		0 2px 0 rgba(201,162,74,.25);
}

/* ---- Pillars get real layered depth on tilt ---- */
.philosophy-pillars { perspective: 1500px; }
.pillar {
	transform-style: preserve-3d;
}
.pillar-icon { transform: translateZ(34px); transition: transform .3s ease; }
.pillar-title { transform: translateZ(20px); transition: transform .3s ease; }
.pillar-description { transform: translateZ(10px); transition: transform .3s ease; }
.pillar:hover .pillar-icon { transform: translateZ(46px); }

@media (max-width: 900px) {
	.hero-orbit { display: none; }
}
@media (prefers-reduced-motion: reduce) {
	.orbit-badge, .orbit-badge::before { animation: none !important; }
}