/* Platform preview hero motion: port of the /platform-hero-motion/ concept, approved variant 3 "Rooms light up" (switcher removed). Scoped to .pfm. */
.pfm { --ease: cubic-bezier(.22, 1, .36, 1); overflow: hidden; }

/* 1. Intro reveal: eyebrow, headline lines, lead, art, toggle, cards */
.pfm .pfm-in { opacity: 0; transform: translateY(18px); filter: blur(6px); }
.pfm.is-ready .pfm-in { opacity: 1; transform: none; filter: none; transition: opacity .8s var(--ease), transform .9s var(--ease), filter .8s var(--ease); transition-delay: var(--d, 0s); }
.pfm .pf-hero__art.pfm-in { transform: translateY(40px) scale(.96); }
.pfm.is-ready .pf-hero__art.pfm-in { transform: none; transition-duration: 1.2s; }

/* 2. Gradient shimmer on "Clear Picture" */
.pfm .pfm-shine { background-image: linear-gradient(100deg, #3649a8 0%, #3bcdee 22%, #58ae6a 40%, #3bcdee 58%, #3649a8 78%, #3bcdee 100%); background-size: 250% 100%; -webkit-background-clip: text; background-clip: text; -webkit-text-fill-color: transparent; color: transparent; }
.pfm.is-ready .pfm-shine { animation: pfm-shine 6s linear 1.2s infinite; }
.pfm .pfm-shine .pf-dot { -webkit-text-fill-color: currentColor; }
@keyframes pfm-shine { from { background-position: 100% 0; } to { background-position: -150% 0; } }

/* 3. Building float + parallax (JS sets --mx/--my in -1..1) */
.pfm .pfm-float { position: absolute; inset: 0; transform: translate3d(calc(var(--mx, 0) * -10px), calc(var(--my, 0) * -6px), 0); transition: transform .6s var(--ease); }
.pfm.is-ready .pfm-bob { animation: pfm-bob 7s ease-in-out 1.4s infinite; }
.pfm .pfm-bob { position: absolute; inset: 0; }
@keyframes pfm-bob { 0%, 100% { transform: translateY(0); } 50% { transform: translateY(-8px); } }

/* 4. Black box -> optimized. Auto-plays once (JS). data-v picks the transition, JS drives --p 0..1 for v1-v3.
   data-fx="on" (set by JS at the end of the reveal) starts circuit lines, pins and savings cards. */
.pfm { --o: 0s; }
.pfm[data-v="0"] { --o: .6s; }
.pfm .pf-hero__img--after { opacity: 1; }
.pfm .pf-hero__after { opacity: 1; transition: none; }
/* v0 baseline: expanding circle from the entrance + brightness ramp */
.pfm[data-v="0"] .pf-hero__img { transition: opacity 1s var(--ease), filter 1.2s var(--ease), transform 1.2s var(--ease); }
.pfm[data-v="0"] .pf-hero__img--before { filter: saturate(.7) brightness(.9); }
.pfm[data-v="0"] .pf-hero__img--after { filter: brightness(.35) saturate(0) blur(2px); transform: scale(.985); clip-path: circle(0% at 42% 76%); transition: clip-path 1.3s var(--ease), filter 1.4s var(--ease) .15s, transform 1.4s var(--ease); }
.pfm[data-v="0"][data-state="after"] .pf-hero__img--after { filter: none; transform: none; clip-path: circle(120% at 42% 76%); }
.pfm[data-v="0"][data-state="after"] .pf-hero__img--before { opacity: 0; transition-delay: .5s; }
/* v1-v3: JS writes mask / opacity each frame; hide the lit render until JS has painted */
.pfm:not([data-v="0"]) .pf-hero__img--after { opacity: 0; }
.pfm .pfm-vx { position: absolute; inset: 0; pointer-events: none; z-index: 1; }
.pfm .pfm-vx > * { display: none; }
.pfm .pfm-rooms { position: absolute; inset: 0; width: 100%; height: 100%; }
.pfm .pfm-rooms polygon { fill: var(--c); stroke: var(--c); stroke-width: 2; stroke-linejoin: round; opacity: 0; mix-blend-mode: screen; }
.pfm[data-v="3"] .pfm-rooms { display: block; }
.pfm .pfm-room { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: contain; opacity: 0; pointer-events: none; }
.pfm .pfm-node { position: absolute; left: calc(var(--x) / 1540 * 100%); top: calc(var(--y) / 650 * 100%); width: 10px; height: 10px; margin: -5px 0 0 -5px; border-radius: 50%; background: var(--c); box-shadow: 0 0 0 2px #fff, 0 0 14px 2px var(--c); opacity: 0; transform: scale(0); }
.pfm .pfm-node i { position: absolute; left: 50%; top: 50%; width: calc(var(--r, 0) * 2px); height: calc(var(--r, 0) * 2px); border-radius: 50%; border: 1.5px solid var(--c); transform: translate(-50%, -50%); opacity: var(--ro, 0); box-shadow: 0 0 10px var(--c), inset 0 0 10px var(--c); }
.pfm[data-v="1"] .pfm-node { display: block; }
.pfm .pfm-scan { position: absolute; top: -2%; bottom: -2%; left: 0; width: 3px; margin-left: -1.5px; background: linear-gradient(transparent, #3bcdee 12%, #fff 50%, #3bcdee 88%, transparent); box-shadow: 0 0 18px 6px rgba(59,205,238,.55), 0 0 60px 18px rgba(54,73,168,.25); opacity: 0; }
.pfm .pfm-scan::before { content: ""; position: absolute; top: 0; bottom: 0; right: 3px; width: 90px; background: linear-gradient(90deg, transparent, rgba(59,205,238,.22)); }
.pfm .pfm-grid { position: absolute; inset: 0; opacity: 0; background-image: linear-gradient(rgba(59,205,238,.9) 1px, transparent 1px), linear-gradient(90deg, rgba(59,205,238,.9) 1px, transparent 1px); background-size: 22px 22px; }
.pfm[data-v="2"] .pfm-scan, .pfm[data-v="2"] .pfm-grid { display: block; }

/* glow under the building when lit */
.pfm .pfm-glow { position: absolute; left: 20%; right: 20%; bottom: 4%; height: 22%; border-radius: 50%; background: radial-gradient(closest-side, rgba(59,205,238,.35), rgba(54,73,168,.12) 60%, transparent); filter: blur(18px); opacity: 0; transition: opacity 1.2s var(--ease) .2s; pointer-events: none; }
.pfm[data-fx="on"] .pfm-glow { opacity: 1; }

/* circuit lines + hotspot pings (brand category colours) */
.pfm .pfm-fx { position: absolute; inset: 0; pointer-events: none; z-index: 1; }
.pfm .pfm-circuit { position: absolute; inset: 0; width: 100%; height: 100%; overflow: visible; }
.pfm .pfm-circuit path { fill: none; stroke: var(--c); stroke-width: 3; stroke-linecap: round; stroke-linejoin: round; stroke-dasharray: 1; stroke-dashoffset: 1; opacity: 0; filter: drop-shadow(0 0 4px var(--c)); transition: stroke-dashoffset .4s, opacity .3s; }
.pfm[data-fx="on"] .pfm-circuit path { opacity: .9; stroke-dashoffset: 0; transition: stroke-dashoffset 1.1s var(--ease) calc(var(--o) + var(--d) * .6), opacity .3s calc(var(--o) + var(--d) * .6); }
.pfm[data-fx="on"].is-live .pfm-circuit path { stroke-dasharray: .06 .12; animation: pfm-flow 2.4s linear infinite; opacity: .95; }
@keyframes pfm-flow { to { stroke-dashoffset: -.36; } }
.pfm .pfm-ping { position: absolute; left: calc(var(--x) / 1540 * 100%); top: calc(var(--y) / 650 * 100%); width: 12px; height: 12px; margin: -6px 0 0 -6px; border-radius: 50%; background: var(--c); box-shadow: 0 0 0 3px #fff, 0 0 12px var(--c); transform: scale(0); transition: transform .3s; }
.pfm .pfm-ping::after { content: ""; position: absolute; inset: -6px; border-radius: 50%; border: 2px solid var(--c); opacity: 0; }
.pfm[data-fx="on"] .pfm-ping { transform: scale(1); transition: transform .5s cubic-bezier(.34, 1.56, .64, 1) calc(var(--o) + var(--d) * .6); }
.pfm[data-fx="on"] .pfm-ping::after { animation: pfm-ping 2.2s ease-out calc(var(--o) + .5s + var(--d)) infinite; }
@keyframes pfm-ping { 0% { transform: scale(.6); opacity: .9; } 100% { transform: scale(2.6); opacity: 0; } }

/* savings callouts pop in staggered; value counts up (JS) then pulses green */
.pfm .pf-hero__after .pf-ln { opacity: 0; transition: opacity .3s; }
.pfm .pf-call { opacity: 0; transform: translateY(14px) scale(.85); transition: opacity .25s, transform .25s; pointer-events: auto; }
.pfm[data-fx="on"] .pf-ln { opacity: 1; transition: opacity .6s ease calc(var(--o) + .4s); }
.pfm[data-fx="on"] .pf-call { opacity: 1; transform: none; transition: opacity .5s var(--ease) var(--cd), transform .6s cubic-bezier(.34, 1.56, .64, 1) var(--cd); }
.pfm .pf-call:nth-of-type(1) { --cd: calc(var(--o) + .5s); }
.pfm .pf-call:nth-of-type(2) { --cd: calc(var(--o) + .7s); }
.pfm .pf-call:nth-of-type(3) { --cd: calc(var(--o) + .9s); }
.pfm .pf-call:nth-of-type(4) { --cd: calc(var(--o) + 1.1s); }
.pfm .pf-call__v { display: inline-block; align-self: flex-start; font-variant-numeric: tabular-nums; border-radius: 6px; transform-origin: left center; transition: background-color .6s, box-shadow .6s; }
.pfm .pf-call__v.is-done { animation: pfm-pop .7s var(--ease); background: rgba(88,174,106,.14); box-shadow: 0 0 0 4px rgba(88,174,106,.14), 0 0 16px rgba(88,174,106,.35); }
@keyframes pfm-pop { 0% { transform: scale(1); } 35% { transform: scale(1.12); } 100% { transform: scale(1); } }

/* 5. Icon micro-animations (inline Lucide-style SVGs): strokes draw on entrance, then a gentle loop; replays on hover */
.pfm .pfm-ic { width: 60%; height: 60%; fill: none; stroke-width: 2; stroke-linecap: round; stroke-linejoin: round; overflow: visible; }
.pfm .pf-call__ic .pfm-ic { width: 62%; height: 62%; }
.pfm .pf-badge, .pfm .pf-call__ic { display: inline-flex; align-items: center; justify-content: center; }
.pfm .pfm-ic [pathLength] { stroke-dasharray: 1; stroke-dashoffset: 1; }
.pfm .pfm-ic--bars { fill: #FF7F27; }
.pfm .pfm-ic * { transform-box: fill-box; transform-origin: center; }
.pfm .is-ic-on .pfm-ic [pathLength] { stroke-dashoffset: 0; transition: stroke-dashoffset .9s var(--ease); }
.pfm .is-ic-on .pfm-ic--eye .pfm-lid { animation: pfm-blink 4.5s ease-in-out 1s infinite; }
.pfm .is-ic-on .pfm-ic--eye .pfm-pupil { animation: pfm-look 4.5s ease-in-out 1s infinite; }
@keyframes pfm-blink { 0%, 44%, 52%, 100% { transform: scaleY(1); } 48% { transform: scaleY(.1); } }
@keyframes pfm-look { 0%, 20%, 100% { transform: translateX(0); } 28%, 40% { transform: translateX(-2px); } 58%, 72% { transform: translateX(2px); } }
.pfm .pfm-ic--bars .pfm-bar { transform-origin: bottom; transform: scaleY(0); }
.pfm .is-ic-on .pfm-ic--bars .pfm-bar { transform: scaleY(1); transition: transform .7s cubic-bezier(.34, 1.56, .64, 1); animation: pfm-bars 3.6s ease-in-out 1.2s infinite; }
.pfm .is-ic-on .pfm-ic--bars .pfm-bar:nth-child(2) { transition-delay: .12s; animation-delay: 1.4s; }
.pfm .is-ic-on .pfm-ic--bars .pfm-bar:nth-child(3) { transition-delay: .24s; animation-delay: 1.6s; }
@keyframes pfm-bars { 0%, 100% { transform: scaleY(1); } 50% { transform: scaleY(.7); } }
.pfm .is-ic-on .pfm-ic--gear .pfm-rot, .pfm .is-ic-on .pfm-ic--fan .pfm-rot { animation: pfm-spin 9s linear infinite; }
.pfm .is-ic-on .pfm-ic--fan .pfm-rot { animation-duration: 3s; }
@keyframes pfm-spin { to { transform: rotate(360deg); } }
.pfm .pfm-ic--clock .pfm-hand-m, .pfm .pfm-ic--clock .pfm-hand-h { transform-box: view-box; transform-origin: 12px 12px; }
.pfm .is-ic-on .pfm-ic--clock .pfm-hand-m { animation: pfm-spin 6s linear infinite; }
.pfm .is-ic-on .pfm-ic--clock .pfm-hand-h { animation: pfm-spin 72s linear infinite; }
.pfm .pfm-ic--leaf .pfm-sway { transform-origin: 10% 90%; }
.pfm .is-ic-on .pfm-ic--leaf .pfm-sway { animation: pfm-sway 3.8s ease-in-out infinite; }
@keyframes pfm-sway { 0%, 100% { transform: rotate(-5deg); } 50% { transform: rotate(6deg); } }
.pfm .is-ic-on .pfm-ic--zap { animation: pfm-flick 3.2s steps(1) 1s infinite; }
@keyframes pfm-flick { 0%, 100% { opacity: 1; } 6% { opacity: .35; } 9% { opacity: 1; } 13% { opacity: .5; } 16% { opacity: 1; } }
.pfm .is-ic-on .pfm-ic--bulb { animation: pfm-bulb 2.8s ease-in-out 1s infinite; }
@keyframes pfm-bulb { 0%, 100% { filter: none; } 50% { filter: drop-shadow(0 0 4px rgba(138,56,245,.75)); } }
.pfm .is-ic-on .pfm-ic--pulse path { stroke-dasharray: 1; animation: pfm-trace 2.6s ease-in-out 1s infinite; }
@keyframes pfm-trace { 0%, 55% { stroke-dashoffset: 0; } 75% { stroke-dashoffset: -1; } 76% { stroke-dashoffset: 1; } 96%, 100% { stroke-dashoffset: 0; } }
.pfm .is-ic-replay .pfm-ic, .pfm .is-ic-replay .pfm-ic * { animation: none !important; }
.pfm .is-ic-replay .pfm-ic [pathLength] { stroke-dashoffset: 1 !important; transition: none !important; }
.pfm .is-ic-replay .pfm-ic--bars .pfm-bar { transform: scaleY(0) !important; transition: none !important; }


/* 6. Benefit cards rise in */
.pfm .pf-stats li { opacity: 0; transform: translateY(20px); }
.pfm.is-ready .pf-stats li { opacity: 1; transform: none; transition: opacity .6s var(--ease), transform .7s var(--ease); }
.pfm.is-ready .pf-stats li:nth-child(1) { transition-delay: .9s; }
.pfm.is-ready .pf-stats li:nth-child(2) { transition-delay: 1s; }
.pfm.is-ready .pf-stats li:nth-child(3) { transition-delay: 1.1s; }
.pfm.is-ready .pf-stats li:nth-child(4) { transition-delay: 1.2s; }
.pfm.is-ready .pf-stats li:nth-child(5) { transition-delay: 1.3s; }
.pfm .pf-stats li .pf-badge { transition: transform .3s var(--ease); }
.pfm .pf-stats li:hover .pf-badge { transform: translateY(-3px) scale(1.06); }

@media (max-width: 767px) { .pfm .pfm-circuit { display: none; } .pfm .pfm-ping { width: 9px; height: 9px; margin: -4.5px 0 0 -4.5px; } }

/* Reduced motion: no movement, show final layout, simple cross-fade only */
@media (prefers-reduced-motion: reduce) {
	.pfm *, .pfm *::before, .pfm *::after { animation: none !important; transition-duration: .01s !important; transition-delay: 0s !important; }
	.pfm .pfm-in, .pfm .pf-stats li { opacity: 1 !important; transform: none !important; filter: none !important; }
	.pfm .pfm-float { transform: none !important; }
}

/* Fit the whole hero (headline, building, toggle, benefit cards) in one laptop view (1366x650 / 1280x600). */
@media (min-width: 992px) {
	.pfm.pf-hero { margin-top: -78px; }
	.pfm .pf-hero__grid, .pfm.pf-hero > .pf-wrap:last-child { width: min(100%, var(--hero-w, 1920px)); }
	.pfm .pf-hero__grid { aspect-ratio: 1920 / 730; }
}

@media (max-width: 767px) {
	.pfm .pf-hero__grid { padding-top: 8px; }
	.pfm.pf-hero > .pf-wrap:last-child { margin-top: 28px; }
}