/* FILE: assets/css/premium-polish.css
   Premium polish layer — refinement only. No layout, color-palette, or
   typography-family changes. Every animation is transform/opacity based
   (GPU) and fully disabled under prefers-reduced-motion. */

/* ============================================================
   1. AMBIENT BACKGROUND — glows drift very slowly
   ============================================================ */
@media (prefers-reduced-motion:no-preference) and (min-width:901px){
	.ep-glow{
		animation:ep-drift 26s ease-in-out infinite alternate;
		will-change:transform;
	}
	.ep-glow--blue{animation-duration:34s;animation-delay:-8s}
	@keyframes ep-drift{
		from{transform:translate3d(0,0,0) scale(1)}
		to{transform:translate3d(4%,-3%,0) scale(1.08)}
	}
}

/* ============================================================
   2. NAVIGATION — shrinks slightly on scroll, logo intro
   ============================================================ */
.ep-nav__inner{transition:height var(--ep-dur) var(--ep-ease)}
.ep-nav.is-scrolled .ep-nav__inner{height:60px}
.ep-nav.is-scrolled{box-shadow:0 10px 40px -18px rgba(3,8,20,.7)}
@media (prefers-reduced-motion:no-preference){
	.ep-nav__brand img,.ep-nav__brand .custom-logo{
		animation:ep-logo-in .7s var(--ep-ease-out) both;
	}
	@keyframes ep-logo-in{
		from{opacity:0;transform:translateY(-6px) scale(.94)}
		to{opacity:1;transform:none}
	}
}

/* ============================================================
   3. BUTTONS — sheen, glow, click feedback, ripple
   ============================================================ */
.ep-btn{
	position:relative;overflow:hidden;isolation:isolate;
	transition:transform var(--ep-dur-fast) var(--ep-ease),
	           box-shadow var(--ep-dur) var(--ep-ease),
	           border-color var(--ep-dur) var(--ep-ease);
}
.ep-btn:active{transform:translateY(0) scale(.985)}
.ep-btn--primary::before{               /* soft sheen sweep on hover */
	content:"";position:absolute;inset:0;z-index:-1;
	background:linear-gradient(105deg,transparent 30%,rgba(255,255,255,.35) 50%,transparent 70%);
	transform:translateX(-120%);
	transition:transform .7s var(--ep-ease-out);
}
.ep-btn--primary:hover::before{transform:translateX(120%)}
@media (prefers-reduced-motion:no-preference){
	.hero__actions .ep-btn--primary,
	.cta__actions .ep-btn--primary{animation:ep-cta-glow 3.2s ease-in-out infinite}
	@keyframes ep-cta-glow{                 /* opacity-driven pseudo glow */
		0%,100%{box-shadow:0 18px 46px -16px rgba(81,163,86,.45)}
		50%{box-shadow:0 20px 60px -14px rgba(81,163,86,.7)}
	}
}
.ep-ripple{                                 /* JS-injected ripple */
	position:absolute;border-radius:50%;pointer-events:none;
	background:rgba(255,255,255,.45);
	transform:scale(0);opacity:.6;
	animation:ep-ripple .55s var(--ep-ease-out) forwards;
}
@keyframes ep-ripple{to{transform:scale(2.6);opacity:0}}
@media (prefers-reduced-motion:reduce){.ep-ripple{display:none}}

/* ============================================================
   4. CARDS — deeper hover lift, gradient edge, floating icons
   ============================================================ */
.service-card,.why-card,.trust-card,.solution-card,.review-card,.faq-item,.timeline__card{
	transition:transform var(--ep-dur) var(--ep-ease),
	           border-color var(--ep-dur) var(--ep-ease),
	           box-shadow var(--ep-dur) var(--ep-ease);
}
.service-card:hover,.why-card:hover,.review-card:hover{
	transform:translateY(-7px);
	box-shadow:0 30px 60px -28px rgba(3,8,20,.85),0 0 0 1px rgba(81,163,86,.14);
}
.timeline__card:hover{transform:translateY(-4px)}
@media (prefers-reduced-motion:no-preference){
	.service-card__icon svg,.why-card__icon svg,.solution-card__icon svg{
		animation:ep-float 6s ease-in-out infinite;
	}
	.service-card:nth-child(2n) .service-card__icon svg,
	.why-card:nth-child(2n) .why-card__icon svg{animation-delay:-3s}
	@keyframes ep-float{
		0%,100%{transform:translateY(0)}
		50%{transform:translateY(-4px)}
	}
}

/* ============================================================
   5. HERO — staggered intro + scroll indicator
   ============================================================ */
@media (prefers-reduced-motion:no-preference){
	.hero__rating,.hero__title,.hero__subtitle,.hero__actions,.hero__badges{
		animation:ep-rise .8s var(--ep-ease-out) both;
	}
	.hero__title{animation-delay:.08s}
	.hero__subtitle{animation-delay:.16s}
	.hero__actions{animation-delay:.24s}
	.hero__badges{animation-delay:.32s}
	@keyframes ep-rise{
		from{opacity:0;transform:translateY(22px)}
		to{opacity:1;transform:none}
	}
	.hero{position:relative}
	.hero::after{                           /* scroll indicator */
		content:"";position:absolute;left:50%;bottom:18px;
		width:22px;height:36px;margin-left:-11px;
		border:2px solid rgba(244,248,255,.28);border-radius:14px;
		background:
			radial-gradient(circle at 50% 30%,rgba(81,163,86,.95) 0 3px,transparent 4px);
		animation:ep-scrollhint 2.2s ease-in-out infinite;
	}
	@keyframes ep-scrollhint{
		0%,100%{transform:translateY(0);opacity:.85}
		50%{transform:translateY(7px);opacity:.4}
	}
	@media (max-width:900px){.hero::after{display:none}}
}

/* ============================================================
   6. QUIZ CARDS — skeleton shimmer before JS mounts
   ============================================================ */
.sc-card:empty,.wp-check:empty{
	min-height:420px;
	background:
		linear-gradient(100deg,rgba(255,255,255,0) 30%,rgba(12,30,54,.05) 50%,rgba(255,255,255,0) 70%) #fff;
	background-size:220% 100%;
}
@media (prefers-reduced-motion:no-preference){
	.sc-card:empty,.wp-check:empty{animation:ep-shimmer 1.4s linear infinite}
	@keyframes ep-shimmer{from{background-position:130% 0}to{background-position:-90% 0}}
}

/* ============================================================
   7. FAQ — icon rotation + smooth open (JS-assisted height)
   ============================================================ */
.faq-item__icon svg{transition:transform var(--ep-dur) var(--ep-ease)}
.faq-item[open] .faq-item__icon svg{transform:rotate(45deg)}
.faq-item__body{overflow:hidden}
.faq-item.is-animating .faq-item__body{transition:height .32s var(--ep-ease-out)}

/* ============================================================
   8. FORMS & FOCUS — premium input feel
   ============================================================ */
.sc-card input,.sc-card select,.wp-check input,.wp-check select,
.ep-comments input,.ep-comments textarea{
	transition:border-color var(--ep-dur-fast) var(--ep-ease),
	           box-shadow var(--ep-dur-fast) var(--ep-ease),
	           background var(--ep-dur-fast) var(--ep-ease);
}
.wp-check input:focus,.wp-check select:focus,
.sc-card input:focus,.sc-card select:focus{
	box-shadow:0 0 0 4px rgba(81,163,86,.18);
}
:where(a,button,input,select,summary,[tabindex]):focus-visible{
	outline:2px solid var(--ep-yellow);outline-offset:3px;border-radius:8px;
}

/* ============================================================
   9. CALCULATOR — smooth result tick
   ============================================================ */
.calc__result-value{display:inline-block;transition:transform .18s var(--ep-ease-out)}
.calc__result-value.is-tick{transform:scale(1.05)}
.calc__range::-webkit-slider-thumb{transition:transform .15s var(--ep-ease)}
.calc__range:active::-webkit-slider-thumb{transform:scale(1.2)}

/* ============================================================
   10. TOUCH TARGETS & MOBILE REFINEMENT
   ============================================================ */
@media (max-width:900px){
	.ep-btn,.wpc-opt,.sc-opt,.wpc-cta,.q-cta{min-height:48px}
	.ep-nav__mobile-link{padding-block:.9rem}
}

/* ============================================================
   11. SECTION TRANSITIONS — subtle top divider glow
   ============================================================ */
.ep-section{position:relative}
.ep-section::before{
	content:"";position:absolute;top:0;left:50%;transform:translateX(-50%);
	width:min(560px,70%);height:1px;
	background:linear-gradient(90deg,transparent,rgba(81,163,86,.22),transparent);
	pointer-events:none;
}
.hero + .ep-section::before{opacity:0}

/* ============================================================
   12. REDUCED MOTION — global guarantee
   ============================================================ */
@media (prefers-reduced-motion:reduce){
	.ep-glow,.hero::after,.service-card__icon svg,.why-card__icon svg,
	.solution-card__icon svg,.hero__rating,.hero__title,.hero__subtitle,
	.hero__actions,.hero__badges{animation:none!important}
	.ep-btn--primary::before{display:none}
	.faq-item.is-animating .faq-item__body{transition:none}
}

/* ============================================================
   13. RENEWABLE-ENERGY MOTION (industry-specific, all subtle)
   ============================================================ */

/* ☀️ Decorative sun — slow 18s rotation, low opacity, desktop only */
.hero__sun{
	position:absolute;top:9%;right:6%;width:120px;height:120px;
	opacity:.16;pointer-events:none;z-index:0;
}
@media (prefers-reduced-motion:no-preference){
	.hero__sun svg{animation:ep-sunspin 18s linear infinite;will-change:transform}
	@keyframes ep-sunspin{to{transform:rotate(360deg)}}
}
@media (max-width:900px){.hero__sun{display:none}}

/* 🌿 Leaf sway — gentle breeze on the sustainability icon */
@media (prefers-reduced-motion:no-preference){
	.why-card__icon svg:has(use[href="#i-leaf"]){
		animation:ep-leafsway 4.5s ease-in-out infinite;
		transform-origin:50% 88%;
	}
	@keyframes ep-leafsway{
		0%,100%{transform:rotate(-3.5deg)}
		50%{transform:rotate(3.5deg)}
	}
}

/* ⚡ Energy flow — dashes travel along the line beside the heat pump */
@media (prefers-reduced-motion:no-preference){
	.ep-energyline{animation:ep-energyflow 1.3s linear infinite}
	@keyframes ep-energyflow{to{stroke-dashoffset:-32}}
}

/* 🔥 Heat-pump fan — spins slowly while hovering the illustration */
.ep-fan{transform-box:view-box}
@media (prefers-reduced-motion:no-preference){
	.heatpump__illu:hover .ep-fan{animation:ep-fanspin 2.6s linear infinite}
	@keyframes ep-fanspin{to{transform:rotate(360deg)}}
}

/* 📈 Section dividers — a faint energy pulse travels along the line */
@media (prefers-reduced-motion:no-preference){
	.ep-section::before{
		background:linear-gradient(90deg,transparent 0%,rgba(81,163,86,.05) 35%,rgba(81,163,86,.45) 50%,rgba(81,163,86,.05) 65%,transparent 100%);
		background-size:240% 100%;
		animation:ep-lineflow 7s ease-in-out infinite;
	}
	@keyframes ep-lineflow{
		0%{background-position:120% 0}
		100%{background-position:-120% 0}
	}
}

/* ✨ Ambient CTA glow — layered warm halo (box-shadow escapes overflow clip) */
.hero__actions .ep-btn--primary,
.cta__actions .ep-btn--primary{
	box-shadow:0 18px 46px -16px rgba(81,163,86,.5),0 0 80px -20px rgba(81,163,86,.35);
}

/* Reduced-motion additions for this section */
@media (prefers-reduced-motion:reduce){
	.hero__sun svg,.ep-energyline,.ep-fan,
	.why-card__icon svg:has(use[href="#i-leaf"]){animation:none!important}
	.ep-section::before{animation:none!important}
}

/* ============================================================
   14. LOGO CHIP — white-bg logo reads cleanly on dark surfaces
   ============================================================ */
.ep-logo-chip{
	display:inline-flex;align-items:center;justify-content:center;
	background:#fff;border-radius:14px;
	padding:8px 14px;line-height:0;
	box-shadow:0 6px 20px -10px rgba(3,8,20,.7);
}
.ep-nav__brand .ep-nav__logo,.ep-nav__brand-link .ep-nav__logo{
	height:40px;width:auto;max-width:none;display:block;
	object-fit:contain;   /* never crop the wordmark */
	flex:0 0 auto;
}
.ep-logo-chip{overflow:visible}
.ep-nav__brand{flex:0 0 auto;min-width:0}
.ep-nav.is-scrolled .ep-nav__logo{height:34px;transition:height var(--ep-dur) var(--ep-ease)}
.footer__logo.ep-logo-chip{padding:10px 16px;border-radius:16px}
.footer__logo.ep-logo-chip img{height:46px;width:auto;display:block}
/* If the client later uploads a transparent Site Icon logo via Customizer,
   WordPress outputs .custom-logo — keep it on a chip too for consistency. */
.ep-nav__brand .custom-logo{height:40px;width:auto}
@media (max-width:560px){
	.ep-logo-chip{padding:6px 10px;border-radius:11px}
	.ep-nav__brand .ep-nav__logo,.ep-nav__brand-link .ep-nav__logo{height:30px;width:auto}
}