/* Bluefront AI - signature symbol (v3, simplified).
   One object: the AE core, a glass isometric slab carrying the brand mark, with
   slow rings of light spreading across the platform. Reusable anywhere via the
   .pl-scene markup. Isometric art: assets/pipeline/core.svg + floor-grid.svg.
   (The detailed pipeline version is archived in ae-firms-deploy/backup-detailed-scene.) */

/* ---- Hero capability tags (under the lede) ---- */
.hero__tags { display: flex; flex-wrap: wrap; gap: 0.5rem; margin-top: 1.75rem; max-width: 44rem; }
.hero__tag {
  padding: 0.45rem 0.85rem; border: 1px solid rgba(var(--ink-rgb), 0.14); border-radius: 999px;
  font-size: 0.82rem; line-height: 1.2; color: var(--muted); background: rgba(var(--ink-rgb), 0.03);
}

/* ---- Scene ---- */
.pl-scene {
  position: relative; width: min(100%, 640px); aspect-ratio: 1 / 1; margin-inline: auto;
  perspective: 1100px; --px: 0; --py: 0; contain: layout;
}
@media (min-width: 941px) {
  .hero__aside .pl-scene { width: min(118%, 680px); margin-left: -10%; margin-right: 0; }
}
/* Soft neon pool behind the symbol */
.pl-scene::before {
  content: ""; position: absolute; inset: 10% 6% 6% 6%; pointer-events: none; z-index: 0;
  background: radial-gradient(closest-side, rgba(var(--accent-rgb), 0.16), rgba(var(--accent-rgb), 0) 72%);
}
.pl-stage {
  position: absolute; inset: 0; z-index: 1; transform-style: preserve-3d;
  transform: rotateX(calc(var(--py) * -4deg)) rotateY(calc(var(--px) * 5deg));
}
.pl-layer {
  position: absolute; left: calc(var(--x) * 0.1%); top: calc(var(--y) * 0.1%);
  width: calc(var(--s) * 100%); aspect-ratio: 1 / 1; pointer-events: none;
  transform: translate(-50%, -50%);
  translate: calc(var(--px) * var(--depth, 0) * 1px) calc(var(--py) * var(--depth, 0) * 1px);
}
.pl-layer img { display: block; width: 100%; height: 100%; user-select: none; -webkit-user-drag: none; }
.pl-floor {
  -webkit-mask-image: radial-gradient(closest-side, #000 38%, transparent 100%);
  mask-image: radial-gradient(closest-side, #000 38%, transparent 100%);
}
.pl-overlay {
  position: absolute; inset: 0; width: 100%; height: 100%; overflow: visible; pointer-events: none;
  translate: calc(var(--px) * var(--depth, 0) * 1px) calc(var(--py) * var(--depth, 0) * 1px);
}

/* ---- Rings of light: iso squares that spread out and fade ---- */
.pl-ring {
  fill: none; stroke: var(--accent); stroke-width: 1.6; stroke-linejoin: round; vector-effect: non-scaling-stroke;
  transform-box: fill-box; transform-origin: center;
}
/* static (no motion): two faint rings frozen mid-spread */
.pl-ring:nth-child(1) { transform: scale(1.25); opacity: 0.32; }
.pl-ring:nth-child(2) { transform: scale(1.7); opacity: 0.16; }
.pl-ring:nth-child(3) { opacity: 0; }
.pl-scene.is-live .pl-ring { animation: pl-ring 4.8s cubic-bezier(0.2, 0.6, 0.3, 1) infinite; opacity: 0; transform: scale(1); }
.pl-scene.is-live .pl-ring:nth-child(2) { animation-delay: 1.6s; }
.pl-scene.is-live .pl-ring:nth-child(3) { animation-delay: 3.2s; }
@keyframes pl-ring {
  0%   { transform: scale(1);   opacity: 0; }
  12%  { opacity: 0.6; }
  100% { transform: scale(2.15); opacity: 0; }
}

/* ---- Mark glow on the core ---- */
.pl-logo-glow { fill: var(--accent); opacity: 0.18; }
.pl-scene.is-live .pl-logo-glow { animation: pl-pulse 3.2s ease-in-out infinite; }
@keyframes pl-pulse { 0%, 100% { opacity: 0.10; } 50% { opacity: 0.32; } }

/* Hide layers only while the intro is being armed (JS adds is-live/is-static) */
@media (min-width: 900px) {
  html.js-reveal:not([data-motion="off"]) .pl-scene:not(.is-live):not(.is-static) .pl-layer,
  html.js-reveal:not([data-motion="off"]) .pl-scene:not(.is-live):not(.is-static) .pl-overlay { opacity: 0; }
}
@media (max-width: 899px) { .pl-scene { width: min(100%, 400px); } }

/* Motion off: finished static symbol */
@media (prefers-reduced-motion: reduce) { .pl-ring, .pl-logo-glow { animation: none !important; } }
html[data-motion="off"] .pl-ring, html[data-motion="off"] .pl-logo-glow { animation: none !important; }
html[data-motion="off"] .pl-stage, html[data-motion="off"] .pl-overlay { transform: none; translate: none; }
html[data-motion="off"] .pl-layer { translate: none; }

/* ---- Reuse: smaller symbol in the About hero ---- */
.page-hero__grid {
  display: grid; grid-template-columns: minmax(0, 1fr) auto; gap: 3rem; align-items: center;
}
@media (max-width: 940px) { .page-hero__grid { grid-template-columns: 1fr; gap: 2rem; } }
.pl-scene--compact { width: min(100%, 340px); }
@media (max-width: 940px) { .pl-scene--compact { width: min(100%, 300px); } }

/* ---- Reuse: faint symbol behind the final CTA band ----
   Flat tonal watermark: the CTA band is the lime accent, so the dark symbol is
   darkened to a single tone and kept faint. Same markup, same motion and
   fallbacks as the hero: it just sits behind the copy, clipped by .cta. */
.pl-scene--ghost {
  position: absolute; left: 50%; top: 50%; z-index: 0;
  width: min(100%, 760px); margin: 0; translate: -50% -50%;
  opacity: 0.09; pointer-events: none;
}
.pl-scene--ghost::before { display: none; }
.pl-scene--ghost .pl-layer img,
.pl-scene--ghost .pl-overlay { filter: brightness(0); }
@media (max-width: 899px) { .pl-scene--ghost { width: min(100%, 420px); } }