/* Bluefront AI - hero glass ERP dashboard.
   HTML/CSS only: a stack of translucent glass panels tilted in 3D (quarterly
   overview, utilization by team, AIA-style invoice, phase strip). Illustrative
   data. The pointer tilts the whole stack (a lot more while hovering it) and
   slides a specular sheen across the glass. glassdash.js only sets CSS
   variables; without JS (phones, reduced motion, Pause motion) the finished
   static pose is shown. Sized in container units, so it scales with its slot. */

.gd {
  position: relative; width: 100%; aspect-ratio: 1 / 0.9; margin-inline: auto;
  container-type: inline-size;
  --px: 0; --py: 0; --sx: 30%; --sy: 18%; --hov: 0;
  --u: 1cqw;
  --glass-a: rgba(var(--ink-rgb), 0.13);
  --glass-b: rgba(var(--ink-rgb), 0.035);
  --edge: rgba(var(--ink-rgb), 0.2);
  --lime: var(--accent);
}
@media (min-width: 941px) {
  .hero__aside .gd { width: min(122%, 730px); margin-left: -10%; }
}
.gd::before { /* soft neon pool under the stack */
  content: ""; position: absolute; inset: 12% 4% 4% 8%; pointer-events: none;
  background: radial-gradient(closest-side, rgba(var(--accent-rgb), 0.17), rgba(var(--accent-rgb), 0) 72%);
}
.gd__persp { position: absolute; inset: 0; perspective: 1700px; perspective-origin: 50% 45%; }
.gd__stage {
  position: absolute; inset: 0; transform-style: preserve-3d;
  transform: rotateX(calc(12deg + var(--py) * -9deg)) rotateY(calc(-24deg + var(--px) * 14deg)) rotateZ(-1.5deg);
  transition: transform 0.12s linear;
}

/* ---- Panels: placement + float live here; glass visuals live on .gd__card ---- */
.gd__panel {
  position: absolute; transform-style: preserve-3d;
  transform: translateZ(var(--z, 0px));
  transition: transform 0.7s cubic-bezier(0.2, 0.7, 0.2, 1);
}
.gd.is-hover .gd__panel { transform: translateZ(calc(var(--z, 0px) * 1.9 + 14px)); }
.gd__panel--main { left: 12cqw; top: 25cqw; width: 72cqw; height: 52cqw; --z: 0px; }
.gd__panel--team { left: 0cqw;  top: 66cqw; width: 38cqw; height: 24cqw; --z: 60px; }
.gd__panel--inv  { left: 60cqw; top: 0cqw;  width: 32cqw; height: 21cqw; --z: 80px; }
.gd__panel--phase{ left: 10cqw; top: 6cqw;  width: 38cqw; height: 8.5cqw; --z: 100px; }

.gd__shadow { /* contact shadow on the "floor" */
  position: absolute; left: 12cqw; top: 26cqw; width: 78cqw; height: 58cqw; border-radius: 6cqw;
  background: radial-gradient(closest-side, rgba(var(--ink-rgb), 0.280), rgba(var(--ink-rgb), 0.000) 100%);
  transform: translateZ(-70px); filter: blur(10px); opacity: 0.9;
}

.gd__card {
  position: absolute; inset: 0; overflow: hidden; border-radius: 2.2cqw;
  padding: 2.2cqw; color: #f3f5f3;
  font-size: max(8px, 1.95cqw); line-height: 1.25;
  background:
    linear-gradient(135deg, var(--glass-a), var(--glass-b) 55%, rgba(var(--ink-rgb), 0.07)),
    rgba(var(--ink-rgb), 0.5);
  border: 1px solid var(--edge);
  box-shadow:
    inset 0 1px 0 rgba(255, 255, 255, 0.28),
    inset 0 -1px 0 rgba(255, 255, 255, 0.04),
    0 2.4cqw 4.6cqw rgba(var(--shadow-rgb), 0.190);
  -webkit-backdrop-filter: blur(10px) saturate(130%);
  backdrop-filter: blur(10px) saturate(130%);
}
/* specular sheen that follows the pointer */
.gd__card::after {
  content: ""; position: absolute; inset: 0; pointer-events: none; border-radius: inherit;
  background: radial-gradient(circle at var(--sx) var(--sy), rgba(var(--card-rgb), calc(0.12 + var(--hov) * 0.26)), rgba(var(--ink-rgb), 0) 55%),
              linear-gradient(115deg, rgba(var(--ink-rgb), 0) 38%, rgba(var(--ink-rgb), 0.09) 47%, rgba(var(--ink-rgb), 0) 56%);
}
.gd__bar-top { display: flex; align-items: center; gap: 0.9cqw; margin-bottom: 1.5cqw; }
.gd__dot { width: 1.1cqw; height: 1.1cqw; border-radius: 50%; background: rgba(var(--ink-rgb), 0.28); }
.gd__title { margin-left: 0.8cqw; font-weight: 600; letter-spacing: 0.01em; color: var(--ink); }
.gd__tabs { margin-left: auto; display: flex; gap: 0.7cqw; }
.gd__tab { padding: 0.5cqw 1.3cqw; border-radius: 99px; font-size: 0.92em; color: rgba(var(--ink-rgb), 0.62); border: 1px solid rgba(var(--ink-rgb), 0.1); }
.gd__tab.is-on { color: #0a0a0a; background: var(--lime); border-color: var(--lime); font-weight: 600; }
.gd__muted { color: rgba(var(--ink-rgb), 0.55); }
.gd__label { font-size: 0.86em; letter-spacing: 0.08em; text-transform: uppercase; color: rgba(var(--ink-rgb), 0.5); }

/* KPIs */
.gd__kpis { display: grid; grid-template-columns: repeat(3, 1fr); gap: 1.4cqw; margin-bottom: 1.6cqw; }
.gd__kpi { padding: 1.2cqw 1.4cqw; border-radius: 1.2cqw; background: rgba(var(--ink-rgb), 0.05); border: 1px solid rgba(var(--ink-rgb), 0.07); }
.gd__kpi strong { display: block; margin-top: 0.4cqw; font-size: 1.9em; font-weight: 600; letter-spacing: -0.02em; color: var(--ink); }
.gd__kpi em { font-style: normal; font-size: 0.86em; color: var(--lime); }

/* Quarterly chart */
.gd__chart { position: relative; height: 18cqw; display: grid; grid-template-columns: repeat(4, 1fr); gap: 2.2cqw; align-items: end; padding: 0 0.6cqw; border-bottom: 1px solid rgba(var(--ink-rgb), 0.14); }
.gd__grp { position: relative; height: 100%; display: flex; align-items: flex-end; justify-content: center; gap: 0.6cqw; }
.gd__bar { width: 2.8cqw; height: calc(var(--h) * 1%); border-radius: 0.5cqw 0.5cqw 0 0; background: rgba(var(--ink-rgb), 0.22); transform-origin: bottom; }
.gd__bar--b { background: linear-gradient(180deg, var(--lime), rgba(var(--accent-rgb), 0.55)); box-shadow: 0 0 1.6cqw rgba(var(--accent-rgb), 0.28); }
.gd__q { position: absolute; left: 0; right: 0; bottom: -2.3cqw; text-align: center; font-size: 0.9em; color: rgba(var(--ink-rgb), 0.55); }
.gd__grp.is-now .gd__q { color: var(--lime); font-weight: 600; }
.gd__line { position: absolute; inset: 0; width: 100%; height: 100%; overflow: visible; pointer-events: none; }
.gd__line path { fill: none; stroke: #fff; stroke-width: 1.4; stroke-linecap: round; stroke-linejoin: round; vector-effect: non-scaling-stroke; opacity: 0.85; }
.gd__line circle { fill: var(--card); stroke: #fff; stroke-width: 1.2; vector-effect: non-scaling-stroke; }
.gd__legend { display: flex; justify-content: flex-end; gap: 2.2cqw; margin-top: 3.4cqw; font-size: 0.9em; color: rgba(var(--ink-rgb), 0.6); }
.gd__legend i { display: inline-block; width: 1.4cqw; height: 1.4cqw; border-radius: 0.3cqw; margin-right: 0.8cqw; vertical-align: -0.1cqw; background: rgba(var(--ink-rgb), 0.28); }
.gd__legend i.b { background: var(--lime); }
.gd__legend i.l { height: 0.3cqw; vertical-align: 0.4cqw; background: var(--card); }

/* Team utilization */
.gd__rows { display: grid; gap: 1.5cqw; margin-top: 0.4cqw; }
.gd__row { display: grid; grid-template-columns: 11cqw 1fr 4.5cqw; align-items: center; gap: 1.2cqw; }
.gd__track { height: 1.5cqw; border-radius: 99px; background: rgba(var(--ink-rgb), 0.1); overflow: hidden; }
.gd__fill { display: block; height: 100%; width: calc(var(--w) * 1%); border-radius: inherit; background: linear-gradient(90deg, rgba(var(--accent-rgb), 0.55), var(--lime)); transform-origin: left; }
.gd__row b { font-weight: 600; text-align: right; color: var(--ink); }

/* Invoice */
.gd__amount { margin: 1.1cqw 0 1.5cqw; font-size: 2.5em; font-weight: 600; letter-spacing: -0.03em; color: var(--ink); }
.gd__sign { display: flex; align-items: center; gap: 0.8cqw; }
.gd__tick { display: inline-grid; place-items: center; width: 2.6cqw; height: 2.6cqw; border-radius: 50%; background: var(--lime); color: #0a0a0a; font-size: 0.95em; font-weight: 700; }
.gd__sign span:last-child { margin-left: 0.8cqw; color: rgba(var(--ink-rgb), 0.7); }

/* Phase strip */
.gd__panel--phase .gd__card { padding: 1.5cqw 2cqw; display: flex; align-items: center; gap: 1.2cqw; border-radius: 99px; }
.gd__chip { white-space: nowrap; display: inline-flex; align-items: center; gap: 0.7cqw; padding: 0.7cqw 1.4cqw; border-radius: 99px; font-size: 0.95em; border: 1px solid rgba(var(--ink-rgb), 0.14); color: rgba(var(--ink-rgb), 0.75); }
.gd__chip.is-done { background: rgba(var(--accent-rgb), 0.14); border-color: rgba(var(--accent-rgb), 0.45); color: var(--lime); }
.gd__chip.is-now { background: var(--lime); border-color: var(--lime); color: #0a0a0a; font-weight: 600; }

.gd__note { position: absolute; left: 0; right: 0; bottom: 0; text-align: center; font-size: max(9px, 1.55cqw); color: rgba(var(--ink-rgb), 0.4); pointer-events: none; }

/* ---- Motion (only while glassdash.js has set .is-live: wide + motion on) ---- */
.gd.is-live .gd__panel--main .gd__card { animation: gd-rise 0.9s cubic-bezier(0.2, 0.7, 0.2, 1) 0.05s both; }
.gd.is-live .gd__panel--team .gd__card { animation: gd-rise 0.9s cubic-bezier(0.2, 0.7, 0.2, 1) 0.25s both; }
.gd.is-live .gd__panel--inv  .gd__card { animation: gd-rise 0.9s cubic-bezier(0.2, 0.7, 0.2, 1) 0.45s both; }
.gd.is-live .gd__panel--phase .gd__card { animation: gd-rise 0.9s cubic-bezier(0.2, 0.7, 0.2, 1) 0.65s both; }
@keyframes gd-rise { from { opacity: 0; translate: 0 3cqw; } to { opacity: 1; translate: 0 0; } }
.gd.is-live .gd__bar { animation: gd-grow 0.9s cubic-bezier(0.2, 0.7, 0.2, 1) both; }
.gd.is-live .gd__grp:nth-child(1) .gd__bar { animation-delay: 0.5s; }
.gd.is-live .gd__grp:nth-child(2) .gd__bar { animation-delay: 0.62s; }
.gd.is-live .gd__grp:nth-child(3) .gd__bar { animation-delay: 0.74s; }
.gd.is-live .gd__grp:nth-child(4) .gd__bar { animation-delay: 0.86s; }
.gd.is-live .gd__fill { animation: gd-fill 1s cubic-bezier(0.2, 0.7, 0.2, 1) 0.8s both; }
@keyframes gd-grow { from { transform: scaleY(0); } to { transform: scaleY(1); } }
@keyframes gd-fill { from { transform: scaleX(0); } to { transform: scaleX(1); } }
/* a slow float, panels out of phase; paused while off screen */
.gd.is-live .gd__panel { animation: gd-float 6.5s ease-in-out infinite alternate; }
.gd.is-live .gd__panel--team { animation-duration: 7.4s; animation-delay: -2s; }
.gd.is-live .gd__panel--inv  { animation-duration: 5.8s; animation-delay: -3.5s; }
.gd.is-live .gd__panel--phase{ animation-duration: 6.9s; animation-delay: -1s; }
@keyframes gd-float { from { translate: 0 0; } to { translate: 0 -1.1cqw; } }
.gd.is-paused .gd__panel { animation-play-state: paused; }

/* Hide only while the intro is being armed (JS adds is-live / is-static) */
@media (min-width: 900px) {
  html.js-reveal:not([data-motion="off"]) .gd:not(.is-live):not(.is-static) .gd__card { opacity: 0; }
}

/* Phones / tablets: flatter pose, smaller */
@media (max-width: 899px) {
  .gd { width: min(100%, 440px); }
  .gd__stage { transform: rotateX(10deg) rotateY(-24deg) rotateZ(-1deg); }
  .gd__panel--inv { height: 27cqw; width: 34cqw; left: 58cqw; }
  .gd__amount { font-size: 2em; margin: 0.6cqw 0 1.2cqw; }
  .gd__panel--inv .gd__tabs { display: none; }
  .gd__kpi strong { font-size: 1.6em; }
}

/* Motion off: finished static pose, no tilt, no float */
@media (prefers-reduced-motion: reduce) {
  .gd__panel, .gd__card, .gd__bar, .gd__fill { animation: none !important; }
  .gd__stage { transform: rotateX(12deg) rotateY(-24deg) rotateZ(-1.5deg); transition: none; }
}
html[data-motion="off"] .gd__panel,
html[data-motion="off"] .gd__card,
html[data-motion="off"] .gd__bar,
html[data-motion="off"] .gd__fill { animation: none !important; }
html[data-motion="off"] .gd__stage { transform: rotateX(12deg) rotateY(-24deg) rotateZ(-1.5deg); transition: none; }
html[data-motion="off"] .gd .gd__panel { transform: translateZ(var(--z, 0px)); }