/* ==========================================================================
   Platform preview, section 6 "Facilities Are Entering a New Era of Visibility"
   Layered art (template-parts/platform/era-art.php) + motion (js/platform-era.js).
   Design unit --u = 1 Figma px of the 941x1021 art box. Hidden start states only
   apply under .pfe-js (added by JS, never with reduced motion) so nothing is lost if JS fails.
   ========================================================================== */
@property --pfe-a { syntax: '<angle>'; inherits: false; initial-value: 360deg; }

.pf-era .pfe-art { position: relative; width: 100%; aspect-ratio: 941 / 1021; container-type: inline-size; margin-left: auto; }
.pfe-stage { position: absolute; inset: 0; --u: calc(100cqw / 941); }
.pfe-stage > * { position: absolute; }
.pfe-building { display: block; max-width: none !important; height: auto; mix-blend-mode: darken;
	-webkit-mask: linear-gradient(90deg, transparent, #000 6%, #000 94%, transparent), linear-gradient(180deg, transparent, #000 9%); -webkit-mask-composite: source-in;
	mask: linear-gradient(90deg, transparent, #000 6%, #000 94%, transparent), linear-gradient(180deg, transparent, #000 9%); mask-composite: intersect; }
.pfe-lines { inset: 0; width: 100%; height: 100%; overflow: visible; pointer-events: none; }

/* Pins on the building */
.pfe-pin { display: grid; place-items: center; border-radius: 50%; background: var(--bg); border: calc(3 * var(--u)) solid #fff; box-shadow: 0 calc(6 * var(--u)) calc(18 * var(--u)) rgba(20,23,28,.18); }
.pfe-pin svg { width: 62.5%; height: 62.5%; position: relative; z-index: 1; }
.pfe-pin::before, .pfe-pin::after { content: ''; position: absolute; inset: calc(-3 * var(--u)); border-radius: 50%; border: calc(2 * var(--u)) solid var(--bg); opacity: 0; pointer-events: none; }

/* Dashboard */
.pfe-dash { border-radius: calc(32 * var(--u)); overflow: hidden; background: #fff; box-shadow: 0 calc(4 * var(--u)) calc(28 * var(--u)) rgba(0,0,0,.04), 0 calc(45 * var(--u)) calc(27 * var(--u)) rgba(0,0,0,.05); }
.pfe-dash__base { display: block; width: 100%; height: 100%; max-width: none !important; object-fit: cover; }
.pfe-dash__ov { position: absolute; inset: 0; }
.pfe-ov { position: absolute; display: block; background-image: var(--src); background-repeat: no-repeat; }
.pfe-ov--donut { border-radius: 50%; -webkit-mask: conic-gradient(#000 var(--pfe-a), transparent 0); mask: conic-gradient(#000 var(--pfe-a), transparent 0); }

/* Floating cards */
.pfe-card { background: #fff; border: calc(2 * var(--u)) solid #e1e3ef; border-radius: calc(32 * var(--u)); padding: calc(16 * var(--u)); box-shadow: 0 calc(4 * var(--u)) calc(14 * var(--u)) rgba(0,0,0,.03), 0 calc(30 * var(--u)) calc(40 * var(--u)) rgba(20,23,28,.07); font-family: 'Plus Jakarta Sans', sans-serif; z-index: 2; }
.pfe-card__in { position: relative; display: flex; align-items: flex-start; gap: calc(20 * var(--u)); padding: calc(8 * var(--u)) calc(32 * var(--u)) calc(8 * var(--u)) calc(8 * var(--u)); }
.pfe-card__ic { flex: none; display: grid; place-items: center; width: calc(64 * var(--u)); height: calc(64 * var(--u)); border-radius: 50%; }
.pfe-card__ic svg { width: 50%; height: 50%; }
.pfe-card__tx { display: flex; flex-direction: column; gap: calc(4 * var(--u)); line-height: 1.64; word-spacing: .06em; text-rendering: geometricPrecision; }
.pfe-card__tx b { font-weight: 700; font-size: calc(16 * var(--u)); color: #14171c; white-space: nowrap; }
.pfe-num { font-weight: 800; font-size: calc(27 * var(--u)); color: #14171c; white-space: nowrap; font-variant-numeric: tabular-nums; }
.pfe-card__tx small { font-weight: 500; font-size: calc(16 * var(--u)); line-height: 1.64; color: rgba(20,23,28,.7); white-space: nowrap; }
.pfe-spark { position: absolute; left: calc(222.5 * var(--u)); top: calc(30 * var(--u)); width: calc(125 * var(--u)); height: calc(78 * var(--u)); overflow: visible; }
.pfe-bars { position: absolute; left: calc(247 * var(--u)); top: calc(38 * var(--u)); width: calc(95 * var(--u)); height: calc(63 * var(--u)); overflow: visible; }
.pfe-bars path { transform-box: fill-box; transform-origin: 50% 100%; }

/* ---------- Motion (only once JS has armed the section) ---------- */
.pfe-js .pfe-card { opacity: 0; transform: translateY(calc(26 * var(--u))) scale(.94); transition: opacity .7s ease, transform 1s cubic-bezier(.16,1,.3,1); transition-delay: calc(.45s + var(--c) * .18s); }
.pfe-js .pfe-pin { opacity: 0; transform: scale(.4); transition: opacity .4s ease, transform .7s cubic-bezier(.34,1.56,.64,1); transition-delay: calc(.35s + var(--k) * .12s); }
.pfe-js .pfe-line { stroke-dasharray: 1; stroke-dashoffset: 1; transition: stroke-dashoffset 1s cubic-bezier(.65,0,.35,1); transition-delay: calc(.9s + var(--l) * .1s); }
.pfe-js .pfe-building { opacity: 0; transform: scale(1.04); transition: opacity 1s ease, transform 1.6s cubic-bezier(.16,1,.3,1); }
.pfe-js .pfe-dash { opacity: 0; transform: translateY(calc(40 * var(--u))); transition: opacity .8s ease .15s, transform 1.1s cubic-bezier(.16,1,.3,1) .15s; }
.pfe-js .pfe-ov--row { opacity: 0; transform: translateY(calc(6 * var(--u))); transition: opacity .45s ease, transform .6s cubic-bezier(.16,1,.3,1); transition-delay: calc(.7s + var(--n) * .055s); }
.pfe-js .pfe-ov--bar { clip-path: inset(0 100% 0 0); transition: clip-path .8s cubic-bezier(.65,0,.35,1); transition-delay: calc(.95s + var(--n) * .055s); }
.pfe-js .pfe-ov--cat { opacity: 0; transform: translateX(calc(10 * var(--u))); transition: opacity .45s ease, transform .6s cubic-bezier(.16,1,.3,1); transition-delay: calc(1.1s + var(--n) * .09s); }
.pfe-js .pfe-ov--donut { --pfe-a: 0deg; transition: --pfe-a 1.4s cubic-bezier(.65,0,.35,1) .8s; }
.pfe-js .pfe-spark__line, .pfe-js .pfe-spark__fill { clip-path: inset(0 100% 0 0); transition: clip-path 1.1s cubic-bezier(.65,0,.35,1) 1s; }
.pfe-js .pfe-spark__fill { transition-delay: 1.25s; }
.pfe-js .pfe-bars path { transform: scaleY(0); transition: transform .6s cubic-bezier(.34,1.4,.64,1); transition-delay: calc(1.1s + var(--b) * .07s); }

.pfe-js.is-in .pfe-card, .pfe-js.is-in .pfe-pin, .pfe-js.is-in .pfe-building, .pfe-js.is-in .pfe-dash, .pfe-js.is-in .pfe-ov--row, .pfe-js.is-in .pfe-ov--cat { opacity: 1; transform: none; }
.pfe-js.is-in .pfe-line { stroke-dashoffset: 0; }
.pfe-js.is-in .pfe-ov--bar, .pfe-js.is-in .pfe-spark__line, .pfe-js.is-in .pfe-spark__fill { clip-path: inset(0 0 0 0); }
.pfe-js.is-in .pfe-ov--donut { --pfe-a: 360deg; }
.pfe-js.is-in .pfe-bars path { transform: none; }

/* Continuous, subtle life once revealed (paused while off screen). Uses `translate` so it stacks on the entrance transform. */
@keyframes pfe-float { 0%, 100% { translate: 0 0; } 50% { translate: 0 calc(-7 * var(--u)); } }
@keyframes pfe-float-sm { 0%, 100% { translate: 0 0; } 50% { translate: 0 calc(-3 * var(--u)); } }
@keyframes pfe-ring { 0% { opacity: .7; transform: scale(1); } 100% { opacity: 0; transform: scale(1.75); } }
@keyframes pfe-glow { 0%, 100% { box-shadow: 0 calc(6 * var(--u)) calc(18 * var(--u)) rgba(20,23,28,.18); } 50% { box-shadow: 0 calc(6 * var(--u)) calc(26 * var(--u)) rgba(20,23,28,.26); } }
.pfe-js.is-in .pfe-card { animation: pfe-float 6s ease-in-out calc(2s + var(--c) * 1.4s) infinite; }
.pfe-js.is-in .pfe-dash { animation: pfe-float-sm 8s ease-in-out 2.4s infinite; }
.pfe-js.is-in .pfe-pin { animation: pfe-glow 2.8s ease-in-out calc(1.6s + var(--k) * .5s) infinite; }
.pfe-js.is-in .pfe-pin::before { animation: pfe-ring 2.8s cubic-bezier(.2,.6,.3,1) calc(1.4s + var(--k) * .5s) infinite; }
.pfe-js.is-in .pfe-pin::after { animation: pfe-ring 2.8s cubic-bezier(.2,.6,.3,1) calc(2.8s + var(--k) * .5s) infinite; }
.pfe-js:not(.is-vis) .pfe-stage *, .pfe-js:not(.is-vis) .pfe-stage *::before, .pfe-js:not(.is-vis) .pfe-stage *::after { animation-play-state: paused !important; }

@media (prefers-reduced-motion: reduce) {
	.pfe-stage *, .pfe-stage *::before, .pfe-stage *::after { animation: none !important; transition: none !important; }
}

/* ---------- Layout / one-screen fit ---------- */
/* Desktop: the art takes the height left below the floating header (minus section padding);
   platform-preview.js then zooms the whole row down if the text column needs it. */
@media (min-width: 992px) { .pf-era .pfe-art { max-width: calc((100svh - var(--hdr) - 56px) * 941 / 1021); } }
@media (min-width: 1200px) { .pf-era .pfe-art { max-width: calc((100svh - var(--hdr) - 104px) * 941 / 1021); } }
@media (max-width: 991px) {
	.pf-era .pf-era__grid { grid-template-columns: minmax(0, 1fr); gap: 40px; }
	.pf-era .pfe-art { max-width: 560px; margin: 0 auto; }
}