/* =========================================================
   Hero performance pass. Loaded last.
   Rules: animate only transform and opacity; no filter, backdrop-filter or blend-mode on anything that moves;
   no custom properties updated on pointer move; all motion paused when the hero is off screen or the tab is hidden.
   ========================================================= */
.hx__aurora { position: absolute; width: 120vmax; height: 120vmax; left: 50%; top: 50%; margin: -60vmax 0 0 -60vmax; will-change: transform; -webkit-mask-image: radial-gradient(circle, #000 18%, transparent 68%); mask-image: radial-gradient(circle, #000 18%, transparent 68%); }
.hx__aurora--a { opacity: .55; background: conic-gradient(from 0deg, rgba(18, 140, 35, 0) 0%, rgba(18, 140, 35, .55) 11%, rgba(18, 140, 35, 0) 26%, rgba(237, 135, 20, .42) 50%, rgba(237, 135, 20, 0) 64%, rgba(40, 200, 110, .4) 84%, rgba(18, 140, 35, 0) 100%); animation: hx-rot 70s linear infinite; }
.hx__aurora--b { opacity: .4; background: conic-gradient(from 180deg, rgba(237, 135, 20, 0) 0%, rgba(237, 135, 20, .4) 14%, rgba(237, 135, 20, 0) 30%, rgba(18, 140, 35, .5) 62%, rgba(18, 140, 35, 0) 80%); animation: hx-rot 110s linear infinite reverse; }
@keyframes hx-rot { to { transform: rotate(360deg); } }
.hx__blob { position: absolute; border-radius: 50%; will-change: transform; animation: hx-drift 22s ease-in-out infinite alternate; }
.hx__blob--a { width: 720px; height: 720px; right: -180px; top: -220px; background: radial-gradient(circle, rgba(18, 140, 35, .6), rgba(18, 140, 35, 0) 68%); }
.hx__blob--b { width: 620px; height: 620px; left: -220px; bottom: -240px; background: radial-gradient(circle, rgba(237, 135, 20, .45), rgba(237, 135, 20, 0) 68%); animation-delay: -9s; }
@keyframes hx-drift { to { transform: translate3d(-50px, 40px, 0) scale(1.12); } }
.hx__beam { position: absolute; top: -20%; bottom: -20%; width: 20%; will-change: transform; transform: translate3d(-160%, 0, 0) skewX(-18deg); background: linear-gradient(90deg, transparent, rgba(255, 255, 255, .06), rgba(255, 190, 110, .1), transparent); animation: hx-beam 13s ease-in-out infinite; }
.hx__beam--2 { animation-delay: -6s; animation-duration: 18s; width: 10%; background: linear-gradient(90deg, transparent, rgba(60, 220, 120, .09), transparent); }
@keyframes hx-beam { from { transform: translate3d(-160%, 0, 0) skewX(-18deg); } to { transform: translate3d(680%, 0, 0) skewX(-18deg); } }
.hx__spot { position: absolute; left: 0; top: 0; width: 640px; height: 640px; margin: -320px 0 0 -320px; border-radius: 50%; pointer-events: none; will-change: transform; transform: translate3d(70vw, 30vh, 0); background: radial-gradient(circle, rgba(237, 135, 20, .2), rgba(237, 135, 20, 0) 62%); }

/* static circuit lines + small moving sparks (cheap: only tiny elements move) */
.hx__circuit { position: absolute; right: 0; top: 50%; width: 1200px; height: 700px; margin-top: -350px; will-change: transform; -webkit-mask-image: linear-gradient(90deg, transparent 6%, #000 48%); mask-image: linear-gradient(90deg, transparent 6%, #000 48%); }
.hx__circuit svg { position: absolute; inset: 0; }
.hx__circuit path { fill: none; stroke: rgba(255, 255, 255, .15); stroke-width: 1.4; stroke-linejoin: round; stroke-linecap: round; }
.hx__circuit circle { fill: #0c1a12; stroke: rgba(255, 255, 255, .5); stroke-width: 1.6; }
.hx__spark { position: absolute; left: 0; top: 0; width: 64px; height: 3px; margin-top: -1.5px; border-radius: 3px; offset-rotate: auto; offset-distance: 0%; animation: hx-spark var(--dur, 8s) linear infinite; animation-delay: var(--del, 0s); }
.hx__spark--o { background: linear-gradient(90deg, rgba(255, 174, 77, 0), #ffae4d); box-shadow: 0 0 8px 1px rgba(255, 150, 40, .85); }
.hx__spark--g { background: linear-gradient(90deg, rgba(91, 224, 138, 0), #5be08a); box-shadow: 0 0 8px 1px rgba(60, 220, 120, .8); }
@keyframes hx-spark { from { offset-distance: 0%; } to { offset-distance: 100%; } }
.hx__pulse { position: absolute; right: 21%; top: 46%; width: 340px; height: 340px; margin: -170px -170px 0 0; border-radius: 50%; border: 1.5px solid rgba(237, 135, 20, .55); opacity: 0; will-change: transform, opacity; animation: hx-ring 8s ease-out infinite; }
.hx__pulse--2 { animation-delay: 4s; border-color: rgba(60, 220, 120, .5); }
@keyframes hx-ring { 0% { transform: scale(.45); opacity: 0; } 12% { opacity: .7; } 100% { transform: scale(2.6); opacity: 0; } }

/* headline and wordmark: opacity + transform only */
.hx__w { display: inline-block; animation: hx-word .8s var(--hx-ease) both; animation-delay: calc(var(--i) * .06s + .1s); }
@keyframes hx-word { from { opacity: 0; transform: translate3d(0, 40%, 0); } to { opacity: 1; transform: none; } }
.hx__w--brand { display: inline-flex; align-items: center; vertical-align: bottom; }
.hx__logo { display: block; height: 1.02em; width: auto; max-width: none; }

/* glass card: static edge, no blend mode, no filters */
.hx__card { position: absolute; inset: 5% 9% 13%; border-radius: 32px; overflow: hidden; background: radial-gradient(ellipse 75% 70% at 50% 46%, #fff 0 58%, #eef3f0 82%, #d3dfd8 100%); box-shadow: 0 50px 80px -30px rgba(0, 0, 0, .65), 0 0 0 1px rgba(255, 255, 255, .5) inset; transition: transform .25s ease-out; will-change: transform; animation: hx-in .9s var(--hx-ease) .15s both; }
@keyframes hx-in { from { opacity: 0; transform: translate3d(40px, 0, 0); } to { opacity: 1; } }
.hx__edge { position: absolute; inset: 0; z-index: 3; border-radius: inherit; pointer-events: none; border: 2px solid transparent; background: linear-gradient(135deg, var(--pp-orange), rgba(255, 255, 255, 0) 38%, rgba(255, 255, 255, 0) 62%, var(--pp-green)) border-box; -webkit-mask: linear-gradient(#000 0 0) padding-box, linear-gradient(#000 0 0); -webkit-mask-composite: xor; mask: linear-gradient(#000 0 0) padding-box exclude, linear-gradient(#000 0 0); }
.hx__img { will-change: transform, clip-path; }
.hx__img img { width: 88%; height: 88%; object-fit: contain; -webkit-mask-image: radial-gradient(ellipse closest-side, #000 84%, transparent 100%); mask-image: radial-gradient(ellipse closest-side, #000 84%, transparent 100%); }
.hx__img.is-active { animation: hx-float 7s ease-in-out infinite; }
@keyframes hx-float { 50% { transform: translate3d(0, -12px, 0); } }
.hx__scan { position: absolute; left: 0; right: 0; top: 0; height: 100%; z-index: 2; pointer-events: none; will-change: transform; background: linear-gradient(180deg, rgba(18, 140, 35, 0) 0%, rgba(18, 140, 35, 0) 94%, rgba(18, 140, 35, .22) 99%, rgba(60, 220, 120, .9) 100%); animation: hx-scan 5s ease-in-out infinite; }
@keyframes hx-scan { 0% { transform: translate3d(0, -100%, 0); opacity: 0; } 12% { opacity: 1; } 88% { opacity: 1; } 100% { transform: translate3d(0, 0, 0); opacity: 0; } }

/* fact chips, tag, controls: solid translucent fills (no backdrop blur over moving layers) */
.hx__hud { will-change: transform; }
.hx__chip { position: absolute; display: flex; flex-direction: column; gap: 2px; padding: 10px 16px; border-radius: 14px; background: rgba(8, 22, 14, .86); border: 1px solid rgba(255, 255, 255, .24); box-shadow: 0 14px 30px -12px rgba(0, 0, 0, .7); opacity: 0; transform: translate3d(0, 16px, 0); transition: opacity .5s ease, transform .6s var(--hx-ease); }
.hx__hud.is-active .hx__chip { opacity: 1; transform: none; transition-delay: calc(var(--k) * .12s + .35s); }
.hx__tag { position: absolute; left: 50%; bottom: 0; translate: -50% 0; margin: 0; display: flex; align-items: center; gap: 8px; padding: 8px 16px; border-radius: 99px; font: 700 .74rem var(--pp-font-heading); letter-spacing: .05em; white-space: nowrap; background: rgba(8, 22, 14, .86); border: 1px solid rgba(255, 255, 255, .22); }
.hx__ctrl { display: inline-flex; align-items: center; gap: 6px; padding: 6px; border-radius: 99px; background: rgba(8, 22, 14, .8); border: 1px solid rgba(255, 255, 255, .16); box-shadow: 0 14px 30px -14px rgba(0, 0, 0, .7); }
.pp-mii-badge--hero { -webkit-backdrop-filter: none; backdrop-filter: none; background: rgba(12, 30, 20, .75); }
.pp-header { -webkit-backdrop-filter: none; backdrop-filter: none; background: rgba(255, 255, 255, .985); }

/* nothing animates while the hero is off screen or the tab is hidden; background layers start after load */
.hx.is-off .hx__fx *, .hx.is-off .hx__stage *, .hx.is-off .hx__title * { animation-play-state: paused !important; }
.hx:not(.is-live) .hx__fx * { animation-play-state: paused; }
@media (max-width: 1023px) {
	.hx__circuit { right: -300px; opacity: .6; -webkit-mask-image: none; mask-image: none; }
	.hx__pulse { right: 50%; top: 38%; margin-right: -170px; }
	.hx__chip { padding: 8px 12px; }
}
@media (prefers-reduced-motion: reduce) {
	.hx__aurora, .hx__blob, .hx__beam, .hx__spark, .hx__pulse, .hx__img.is-active, .hx__scan, .hx__card, .hx__w { animation: none !important; }
	.hx__w, .hx__card { opacity: 1; transform: none; }
	.hx__spark, .hx__scan { display: none; }
}

/* remaining blur filters on moving or transitioning elements */
.hx__sl { filter: none; transition: opacity .6s ease, transform .7s var(--hx-ease), visibility .6s; }
.hx__sl.is-active { filter: none; }
.hx__floor { filter: none; background: radial-gradient(closest-side, rgba(237, 135, 20, .5), rgba(18, 140, 35, .16) 60%, rgba(18, 140, 35, 0)); }
.pp-js .pp-reveal { filter: none; transition: opacity .7s var(--hx-ease), transform .7s var(--hx-ease); }
.pp-js .pp-reveal.is-in { filter: none; }


/* ---------- rounded cards clip their content so borders and corners always look clean ---------- */
.pp-railcard, .pp-tile, .pp-supcard, .pp-whycard, .pp-group, .pp-group__item, .pp-ccard, .pp-doc, .pp-job, .pp-cert,
.pp-quote, .pp-dealer, .pp-badges li, .pp-qcard, .pp-mii-fact, .pp-formpage__side, .pp-product-card, .pp-bcard, .pp-batcard,
.pp-faqlist details, .pp-faq, .pp-ind, .pp-duo__card, .pp-helpbox, .pp-product__summary, .pp-product__main, .pp-product__thumbs a,
.pp-gallery__item a, .pp-sidenav, .pp-sidenav__help, .pp-leader__photo img, .pp-editorial__img img, .pp-tl__card, .pp-finder__opt {
	overflow: hidden;
	isolation: isolate;
}
/* the image areas inside cards never paint over the rounded border */
.pp-railcard__img, .pp-product-card__media, .pp-bcard__media, .pp-batcard__media, .pp-group__thumb, .pp-ind__img, .pp-tile__img { overflow: hidden; }
.pp-railcard__img, .pp-product-card__media { border-radius: inherit; border-bottom-left-radius: 0; border-bottom-right-radius: 0; }