/* ============================================================
   Half Cost Boxes — hero slider + sitewide box FX layer.
   Kept separate from the base multi-brand stylesheet so this
   deployment's animated box/glow layer is easy to find, tune,
   or strip out entirely if this theme is ever repointed at a different
   brand. (Ported from an earlier custom-packaging build of this same
   animation system, itself ported from a food/bakery-themed build,
   itself ported from a clinical/lab-themed build, itself ported from a
   Halloween-themed build — class/keyframe names like .hw-scene-bat or
   .hw-witch-fly are internal implementation labels only; every visual
   they drive is custom-box themed, see inc/template-helpers.php and
   assets/js/halfcost-fx.js.)
   ============================================================ */

/* ---------- hero slider ---------- */
/* Deep-navy hero — a deliberate departure from the light hero used on
   the rest of the site: dark brand-navy sky, a glowing amber spotlight,
   and light-on-dark text/buttons. Everything below this section
   reverts to the site's normal light theme. */
.hero-slider{
	position:relative;
	overflow:hidden;
	background:radial-gradient(120% 100% at 84% 0%, #1c2740 0%, #12192c 42%, #080b14 100%);
}
.hero-slider::before,
.hero-slider::after{
	content:'';
	position:absolute;
	bottom:-10%;
	width:80%;
	height:280px;
	background:radial-gradient(ellipse at center, rgba(238,169,64,.18), transparent 70%);
	filter:blur(12px);
	pointer-events:none;
	z-index:0;
	animation:hwFogDrift 20s ease-in-out infinite alternate;
}
.hero-slider::before{left:-20%;}
.hero-slider::after{right:-20%;animation-duration:24s;animation-delay:-4s;}

/* Light-on-dark text treatment for everything inside the hero. */
.hero-slider h1{color:#fff}
.hero-slider h1 .r{color:var(--red)}
.hero-slider .eyebrow{color:#f4b860}
.hero-slider .lede{color:rgba(255,255,255,.72)}
.hero-slider .hbadge{color:rgba(255,255,255,.85)}
.hero-slider .hbadge .ic{background:rgba(255,255,255,.08);box-shadow:none;color:#f4b860}
.hero-slider .btn-outline{border-color:rgba(255,255,255,.5);color:#fff}
.hero-slider .btn-outline:hover{border-color:#fff;background:rgba(255,255,255,.08);color:#fff}
.hero-slider .float-card{box-shadow:0 24px 50px -20px rgba(0,0,0,.65),0 0 0 1px rgba(255,255,255,.06)}

/* Date/urgency callout — small circular chip + a line of copy. */
.hw-date-badge{
	display:inline-flex;
	align-items:center;
	gap:14px;
	padding:8px 20px 8px 8px;
	border-radius:100px;
	background:rgba(255,255,255,.06);
	border:1px solid rgba(255,255,255,.14);
}
.hw-date-badge .hw-date-num{
	display:grid;
	place-items:center;
	width:44px;
	height:44px;
	border-radius:50%;
	background:var(--red);
	color:#fff;
	font-weight:800;
	font-size:13.5px;
	line-height:1.05;
	text-align:center;
	flex:none;
}
.hw-date-badge .hw-date-txt{font-size:13.5px;color:rgba(255,255,255,.75);line-height:1.4}
.hw-date-badge .hw-date-txt b{color:#fff}

/* Circular social row. */
.hw-social-row{display:flex;align-items:center;gap:10px}
.hw-social-row a{
	width:38px;
	height:38px;
	border-radius:50%;
	display:grid;
	place-items:center;
	background:rgba(255,255,255,.06);
	border:1px solid rgba(255,255,255,.14);
	color:#fff;
	transition:background .25s,border-color .25s,transform .2s;
}
.hw-social-row a:hover{background:var(--red);border-color:var(--red);transform:translateY(-2px)}

.hero-meta{display:flex;align-items:center;gap:26px;flex-wrap:wrap;margin-top:30px}

.hs-track{
	position:relative;
	display:grid;
}

/* Direction-aware "push" transition (each slide is parked left/center/right
   and JS animates it across on navigation) — adapted from the classic
   CodyHouse hero-slider pattern: https://github.com/codyhouse/hero-slider */
.hs-slide{
	grid-area:1/1;
	position:relative;
	z-index:1;
	opacity:0;
	pointer-events:none;
	transform:translateX(100%);
	transition:transform .75s cubic-bezier(.65,.05,.25,1), opacity .55s ease;
	will-change:transform,opacity;
}
.hs-slide.is-active{
	opacity:1;
	pointer-events:auto;
	transform:translateX(0);
	z-index:2;
}
.hs-slide .hero-inner{padding:76px 0 104px}
.hs-scene{min-height:480px;display:grid;place-items:center}
.hs-scene svg{width:100%;max-width:480px;height:auto;filter:drop-shadow(0 30px 50px rgba(5,15,30,.35))}

/* Big layered night illustration used on the brand slide — see
   cbe_hw_night_scene() in inc/template-helpers.php. */
.hw-night-scene{width:100%;max-width:600px;height:auto;filter:drop-shadow(0 30px 60px rgba(0,0,0,.5))}
.hero-visual.hw-night-wrap{min-height:520px}

/* Real-photo "big box" hero showcase — wraps the .hero-box product photo in
   a spotlight glow + drifting mini-box particle ring. See
   cbe_hw_night_scene() in inc/template-helpers.php. */
.hw-box-hero{position:relative;width:100%;max-width:440px;margin:0 auto}
.hw-box-fx{position:absolute;inset:-72px;width:calc(100% + 144px);height:calc(100% + 144px);pointer-events:none;z-index:1}
.hw-box-hero .hero-box{position:relative;z-index:2}
.hw-box-hero .hw-photo-box{filter:drop-shadow(0 30px 60px rgba(0,0,0,.35))}

/* Staggered content reveal on the active slide — each element of the text
   column rises in with an incremental delay instead of arriving all at once. */
.hs-slide.is-active .hero-inner > div:first-child > *{
	animation:hwContentRise .6s cubic-bezier(.2,.7,.3,1) both;
}
.hs-slide.is-active .hero-inner > div:first-child > *:nth-child(1){animation-delay:.12s}
.hs-slide.is-active .hero-inner > div:first-child > *:nth-child(2){animation-delay:.22s}
.hs-slide.is-active .hero-inner > div:first-child > *:nth-child(3){animation-delay:.34s}
.hs-slide.is-active .hero-inner > div:first-child > *:nth-child(4){animation-delay:.46s}
.hs-slide.is-active .hero-inner > div:first-child > *:nth-child(5){animation-delay:.58s}
.hs-slide.is-active .hero-inner > div:first-child > *:nth-child(6){animation-delay:.7s}
.hs-slide.is-active .hero-visual{animation:hwSceneEnter .8s cubic-bezier(.2,.7,.3,1) .3s both}

@keyframes hwContentRise{from{opacity:0;transform:translateY(30px)}to{opacity:1;transform:translateY(0)}}
@keyframes hwSceneEnter{from{opacity:0;transform:scale(.82) rotate(-2deg)}to{opacity:1;transform:scale(1) rotate(0)}}

/* Slow continuous "Ken Burns" drift on the visible slide's art. */
.hs-slide.is-active .hero-box,
.hs-slide.is-active .hs-scene svg{
	animation:hwKenBurns 9s ease-in-out infinite alternate;
}
@keyframes hwKenBurns{from{transform:scale(1)}to{transform:scale(1.045)}}

/* twinkling "gold dust" particle field, generated into .hs-stars by halfcost-fx.js */
.hs-stars{position:absolute;inset:0;z-index:0;pointer-events:none}
.hw-star{position:absolute;border-radius:50%;background:#ffe9c2;animation:hwTwinkle ease-in-out infinite}
@keyframes hwTwinkle{0%,100%{opacity:.15;transform:scale(.7)}50%{opacity:1;transform:scale(1.15)}}

.hs-arrow{
	position:absolute;
	top:50%;
	transform:translateY(-50%);
	z-index:6;
	width:50px;
	height:50px;
	border-radius:50%;
	background:#fff;
	border:1.5px solid var(--line-2);
	display:grid;
	place-items:center;
	cursor:pointer;
	color:var(--ink);
	box-shadow:var(--shadow);
	transition:background .25s,color .25s,transform .2s;
}
.hs-arrow:hover{background:var(--red);color:#fff;border-color:var(--red);transform:translateY(-50%) scale(1.1)}
.hs-prev{left:20px}
.hs-next{right:20px}

.hs-dots{
	position:absolute;
	left:50%;
	bottom:22px;
	transform:translateX(-50%);
	z-index:6;
	display:flex;
	gap:10px;
}
.hs-dot{
	width:10px;
	height:10px;
	border-radius:50%;
	border:none;
	padding:0;
	background:rgba(26,26,26,.25);
	cursor:pointer;
	transition:background .25s,width .25s,border-radius .25s;
}
.hs-dot.is-active{background:var(--red);width:30px;border-radius:5px}

@media (max-width:680px){
	.hs-arrow{display:none}
	.hs-slide .hero-inner{padding:48px 0 72px}
	.hs-scene{min-height:300px}
}

/* ---------- hero scene idle animation (box/display-case/promo art) ---------- */
.hw-pumpkin-sway{transform-origin:120px 234px; animation:hwPumpkinSway 4.5s ease-in-out infinite}
@keyframes hwPumpkinSway{0%,100%{transform:rotate(-2.5deg)}50%{transform:rotate(2.5deg)}}

.hw-face{animation:hwFacePulse 2.6s ease-in-out infinite}
@keyframes hwFacePulse{
	0%,100%{filter:drop-shadow(0 0 4px rgba(255,150,70,.5)) drop-shadow(0 0 1px rgba(255,150,70,.6))}
	50%{filter:drop-shadow(0 0 16px rgba(255,150,70,.95)) drop-shadow(0 0 6px rgba(255,150,70,.9))}
}
.hw-glow-pulse{animation:hwGlowPulse 2.6s ease-in-out infinite; transform-origin:120px 180px}
@keyframes hwGlowPulse{0%,100%{opacity:.55;transform:scale(.94)}50%{opacity:1;transform:scale(1.08)}}
.hw-moon-halo{animation:hwGlowPulse 5s ease-in-out infinite}
.hw-scene-bat{animation:hwSceneBatBob 2.2s ease-in-out infinite; animation-delay:var(--bat-delay,0s); transform-origin:center}
.hw-scene-bat path{animation:hwBatFlap .3s ease-in-out infinite alternate; transform-origin:center; animation-delay:var(--bat-delay,0s)}
@keyframes hwSceneBatBob{0%,100%{transform:translateY(0)}50%{transform:translateY(-10px)}}

/* ---------- night-scene-only idle animation (spotlight/companion/box rack/delivery-cart/glow-orb/box facility) ---------- */
/* Hanging boxes on strings sway gently — transform-origin is set
   per-instance inline (top of the support arm) since each box hangs
   from a different x position. */
.hw-hang-swing{animation:hwHangSwing 3.6s ease-in-out infinite; animation-delay:var(--swing-delay,0s)}
@keyframes hwHangSwing{0%,100%{transform:rotate(-3deg)}50%{transform:rotate(3deg)}}

.hw-night-owl{animation:hwOwlBob 3.6s ease-in-out infinite; transform-origin:center}
@keyframes hwOwlBob{0%,100%{transform:translateY(0)}50%{transform:translateY(-4px)}}

.hw-witch-fly{animation:hwWitchFly 3.2s ease-in-out infinite}
@keyframes hwWitchFly{
	0%,100%{transform:translateY(0) rotate(-.6deg)}
	50%{transform:translateY(-3px) rotate(.6deg)}
}

.hw-scene-ghost{animation:hwSceneGhostFloat 5s ease-in-out infinite; transform-origin:center}
@keyframes hwSceneGhostFloat{0%,100%{transform:translateY(0)}50%{transform:translateY(-16px)}}

.hw-window-glow{animation:hwWindowFlicker 3.4s ease-in-out infinite}
@keyframes hwWindowFlicker{
	0%,100%{opacity:1}
	45%{opacity:.55}
	55%{opacity:1}
	70%{opacity:.72}
}

/* ---------- sitewide box FX layer ---------- */
.hw-fx-layer{
	position:fixed;
	inset:0;
	pointer-events:none;
	overflow:hidden;
	z-index:4;
}

/* -- drifting mini boxes: small, gently tumbling, catch the light -- */
.hw-bat{
	position:fixed;
	top:0;
	left:0;
	opacity:0;
	pointer-events:none;
	will-change:transform;
	animation-name:hwBatFly;
	animation-timing-function:linear;
	animation-fill-mode:forwards;
}
.hw-bat svg{width:100%;height:100%;display:block;filter:drop-shadow(0 6px 10px rgba(0,0,0,.2));animation:hwBatFlap .8s ease-in-out infinite alternate}
@keyframes hwBatFly{
	0%{transform:translate(var(--x0),var(--y0)) rotate(var(--rot)); opacity:0}
	8%{opacity:.92}
	50%{transform:translate(var(--xm),var(--ym)) rotate(var(--rot))}
	92%{opacity:.92}
	100%{transform:translate(var(--x1),var(--y1)) rotate(var(--rot)); opacity:0}
}
@keyframes hwBatFlap{from{transform:scaleY(1)}to{transform:scaleY(.82)}}

/* -- large soft drifting warm glow orb (like a lens flare) -- */
.hw-ghost{
	position:fixed;
	top:0;
	left:0;
	opacity:0;
	pointer-events:none;
	will-change:transform;
	animation-name:hwGhostDrift;
	animation-timing-function:ease-in-out;
	animation-fill-mode:forwards;
	z-index:3;
}
.hw-ghost svg{width:100%;height:100%;display:block;animation:hwGhostBob 3s ease-in-out infinite}
@keyframes hwGhostDrift{
	0%{transform:translate(var(--x0),var(--y0)); opacity:0}
	10%{opacity:var(--ghost-op,.5)}
	90%{opacity:var(--ghost-op,.5)}
	100%{transform:translate(var(--x1),var(--y0)); opacity:0}
}
@keyframes hwGhostBob{0%,100%{transform:translateY(0) rotate(-2deg)}50%{transform:translateY(-22px) rotate(2deg)}}

/* -- rising glow motes -- */
.hw-leaf{
	position:fixed;
	bottom:-40px;
	left:0;
	pointer-events:none;
	will-change:transform;
	animation-name:hwFall;
	animation-timing-function:cubic-bezier(.4,0,.6,1);
	animation-fill-mode:forwards;
}
.hw-leaf svg{width:100%;height:100%;display:block}
@keyframes hwFall{
	0%{transform:translate(0,0) rotate(0deg); opacity:0}
	6%{opacity:.95}
	94%{opacity:.9}
	100%{transform:translate(var(--drift-x),var(--fall-y)) rotate(var(--spin)); opacity:0}
}

/* -- rising warm embers/sparks (torch-lit courtyard) -- */
.hw-ember{
	position:fixed;
	bottom:0;
	left:0;
	border-radius:50%;
	pointer-events:none;
	will-change:transform,opacity;
	animation-name:hwEmberRise;
	animation-timing-function:ease-out;
	animation-fill-mode:forwards;
}
@keyframes hwEmberRise{
	0%{transform:translate(0,0); opacity:0}
	12%{opacity:.9}
	60%{opacity:.6}
	100%{transform:translate(var(--drift-x),var(--rise-y)); opacity:0}
}

/* -- a box lowered on a hoist cable, swings, then retracts -- */
.hw-spider-rig{
	position:fixed;
	top:0;
	left:0;
	pointer-events:none;
	z-index:6;
	animation-name:hwSpiderDrop;
	animation-timing-function:cubic-bezier(.2,.7,.3,1);
	animation-fill-mode:forwards;
}
.hw-spider-thread{position:absolute;top:0;left:50%;width:1px;height:100%;background:rgba(230,180,120,.5);transform:translateX(-50%)}
.hw-spider-body{position:absolute;bottom:0;left:50%;transform:translateX(-50%);transform-origin:top center;animation:hwSpiderSwing 2.4s ease-in-out infinite}
@keyframes hwSpiderDrop{
	0%{transform:translateY(calc(-1 * var(--rig-h)))}
	18%{transform:translateY(0)}
	78%{transform:translateY(0)}
	100%{transform:translateY(calc(-1 * var(--rig-h)))}
}
@keyframes hwSpiderSwing{0%,100%{transform:translateX(-50%) rotate(-7deg)}50%{transform:translateX(-50%) rotate(7deg)}}

@keyframes hwFogDrift{
	from{transform:translateX(0)}
	to{transform:translateX(80px)}
}

/* ---------- header corner herb-sprig accents (gently swaying) ---------- */
.hw-cobweb{
	position:absolute;
	top:0;
	width:110px;
	height:110px;
	color:rgba(180,110,45,.35);
	pointer-events:none;
	z-index:1;
	animation:hwCobwebSway 6s ease-in-out infinite;
	transform-origin:top center;
}
.hw-cobweb.hw-left{left:0; transform-origin:top left}
.hw-cobweb.hw-right{right:0; transform:scaleX(-1); transform-origin:50% top; animation-delay:1.2s}
@keyframes hwCobwebSway{0%,100%{transform:rotate(0deg)}50%{transform:rotate(2.5deg)}}
.hw-cobweb.hw-right{animation-name:hwCobwebSwayR}
@keyframes hwCobwebSwayR{0%,100%{transform:scaleX(-1) rotate(0deg)}50%{transform:scaleX(-1) rotate(2.5deg)}}
@media (max-width:680px){.hw-cobweb{width:64px;height:64px}}

/* ---------- ambient flicker + pulse-ring beacon on key CTAs ---------- */
.quote-tab,
.hero-cta .btn-red{
	animation:hwGlowFlicker 3.2s ease-in-out infinite;
}
.hero-cta .btn-red{position:relative}
.hero-cta .btn-red::after{
	content:'';
	position:absolute;
	inset:0;
	border-radius:inherit;
	border:2px solid var(--red);
	opacity:0;
	pointer-events:none;
	animation:hwPulseRing 2.4s ease-out infinite;
}
@keyframes hwPulseRing{
	0%{transform:scale(1); opacity:.55}
	100%{transform:scale(1.4); opacity:0}
}
@keyframes hwGlowFlicker{
	0%,100%{filter:brightness(1) saturate(1)}
	45%{filter:brightness(1.18) saturate(1.2)}
	55%{filter:brightness(.95) saturate(1)}
}

/* ---------- extra glow flash when cards scroll into view ---------- */
.ind-card.reveal.in,
.ins-card.reveal.in,
.prod-card.reveal.in,
.step-card.reveal.in,
.testi-card.reveal.in,
.stat.reveal.in,
.val.reveal.in,
.tl-row.reveal.in,
.unique-visual.reveal.in,
.why-visual.reveal.in,
.story-visual.reveal.in{
	animation:hwRevealFlash 1s ease-out;
}
@keyframes hwRevealFlash{
	0%{box-shadow:0 0 0 0 rgba(217,72,44,.4)}
	100%{box-shadow:0 0 0 26px rgba(217,72,44,0)}
}

/* ---------- cursor-follow spotlight inside the hero ---------- */
.hw-spotlight{
	position:absolute;
	inset:0;
	z-index:1;
	pointer-events:none;
	opacity:0;
	transition:opacity .5s ease;
	background:radial-gradient(circle 280px at var(--sx,50%) var(--sy,30%), rgba(255,185,110,.4), transparent 72%);
	mix-blend-mode:soft-light;
}
.hw-spotlight.is-on{opacity:1}

/* ---------- occasional sitewide gold-flash ---------- */
.hw-lightning{
	position:fixed;
	inset:0;
	z-index:9;
	pointer-events:none;
	background:#fff3e0;
	opacity:0;
}
.hw-lightning.is-flashing{animation:hwLightningFlash .9s ease-out}
@keyframes hwLightningFlash{
	0%{opacity:0}
	4%{opacity:.8}
	8%{opacity:.05}
	13%{opacity:.55}
	20%{opacity:0}
	100%{opacity:0}
}

/* ---------- cursor spark trail (pointer:fine devices only) ---------- */
.hw-cursor-spark{
	position:fixed;
	top:0;
	left:0;
	border-radius:50%;
	pointer-events:none;
	z-index:8;
	animation:hwSparkPop .7s ease-out forwards;
}
@keyframes hwSparkPop{
	0%{transform:translate(0,0) scale(.5); opacity:.85}
	100%{transform:translate(var(--sx,0),var(--sy,-26px)) scale(0); opacity:0}
}

/* ---------- card hover: a little mini box pops in ---------- */
.prod-card,.ind-card,.testi-card,.ins-card,.step-card{position:relative}
.prod-card::after,.ind-card::after,.testi-card::after,.ins-card::after,.step-card::after{
	content:'';
	position:absolute;
	top:12px;
	right:12px;
	width:22px;
	height:22px;
	z-index:3;
	background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cg transform='rotate(12 12 12)'%3E%3Crect x='7' y='6' width='10' height='10' rx='2' fill='%23eea940'/%3E%3Crect x='11' y='6' width='2' height='10' fill='%23ffffff' fill-opacity='.55'/%3E%3C/g%3E%3Ccircle cx='12' cy='12' r='9.2' fill='none' stroke='%23eea940' stroke-opacity='.35' stroke-width='1.4'/%3E%3C/svg%3E");
	background-size:contain;
	background-repeat:no-repeat;
	opacity:0;
	transform:scale(.4) rotate(-20deg);
	transition:opacity .3s ease, transform .35s cubic-bezier(.34,1.56,.64,1);
	pointer-events:none;
	filter:drop-shadow(0 2px 5px rgba(0,0,0,.25));
}
.prod-card:hover::after,.ind-card:hover::after,.testi-card:hover::after,.ins-card:hover::after,.step-card:hover::after{
	opacity:.95;
	transform:scale(1) rotate(0deg) translateY(-3px);
}

/* ---------- respect reduced motion ---------- */
@media (prefers-reduced-motion: reduce){
	.hero-slider::before,
	.hero-slider::after{animation:none}
	.hs-slide{transition:opacity .3s linear}
	.hs-slide.is-active .hero-inner > div:first-child > *,
	.hs-slide.is-active .hero-visual,
	.hs-slide.is-active .hero-box,
	.hs-slide.is-active .hs-scene svg{animation:none}
	.hw-star{animation:none;opacity:.6}
	.hw-pumpkin-sway,.hw-face,.hw-glow-pulse,.hw-moon-halo,.hw-scene-bat,.hw-scene-bat path{animation:none}
	.hw-hang-swing,.hw-night-owl,.hw-witch-fly,.hw-scene-ghost,.hw-window-glow{animation:none}
	.hw-cobweb{animation:none}
	.quote-tab,
	.hero-cta .btn-red{animation:none}
	.hero-cta .btn-red::after{display:none}
	.ind-card.reveal.in,.ins-card.reveal.in,.prod-card.reveal.in,.step-card.reveal.in,
	.testi-card.reveal.in,.stat.reveal.in,.val.reveal.in,.tl-row.reveal.in,
	.unique-visual.reveal.in,.why-visual.reveal.in,.story-visual.reveal.in{animation:none}
	.hw-bat,.hw-leaf,.hw-ghost,.hw-ember,.hw-spider-rig,.hw-cursor-spark,.hw-lightning,.hw-spotlight{display:none}
	.prod-card::after,.ind-card::after,.testi-card::after,.ins-card::after,.step-card::after{transition:opacity .2s ease}
}