/* Platform stack: six CSS-3D layers driven by stack.js.
   Rules: no text inside the 3D planes (it would skew and pop while moving); labels live in a
   2D overlay positioned from projected anchors. Never put opacity on a preserve-3d element. */
.stack-scene { position: relative; width: 100%; aspect-ratio: 1 / 1; max-width: 660px; margin-inline: auto; perspective: 1800px; perspective-origin: 50% 35%; }
.stack-scene .sr { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); }
.stack-fit { position: absolute; left: 50%; top: 50%; width: 560px; height: 560px; margin: -330px 0 0 -300px; transform-style: preserve-3d; transform-origin: 50% 50%; }
.stack { --rx: 52deg; --rz: -40deg; position: absolute; inset: 0; transform-style: preserve-3d; transform: translateY(215px) rotateX(var(--rx)) rotateZ(var(--rz)); pointer-events: none; }
.layer { position: absolute; left: 50%; top: 50%; width: 300px; height: 300px; margin: -150px 0 0 -150px; transform-style: preserve-3d; transform: translateZ(calc(var(--i) * 80px - 10px)); }
.layer > .face, .layer > .slab, .bb > * { opacity: var(--o, 1); }

.slab { position: absolute; inset: 0; border-radius: 22px; background: rgb(10 19 34 / .8); transform: translateZ(calc(var(--d) * -1px)); }
.face { position: absolute; inset: 0; border-radius: 22px; overflow: hidden; transform: translateZ(.5px);
  background: linear-gradient(145deg, rgb(62 84 120 / .86), rgb(32 48 75 / .82) 55%, rgb(22 34 54 / .88));
  box-shadow: inset 0 0 0 1px rgb(244 237 225 / .16), inset 0 1.5px 0 rgb(255 255 255 / .14); transition: box-shadow .5s, filter .5s; }
.face::before { content: ""; position: absolute; inset: 0; background-image: linear-gradient(rgb(244 237 225 / .04) 1px, transparent 1px), linear-gradient(90deg, rgb(244 237 225 / .04) 1px, transparent 1px); background-size: 25px 25px; background-position: 12px 12px; }
.face::after { content: ""; position: absolute; inset: 0; background: radial-gradient(120% 90% at 0% 0%, rgb(255 255 255 / .12), transparent 55%); }
.layer.base .face { background: linear-gradient(145deg, rgb(36 52 80 / .55), rgb(20 31 50 / .55)); box-shadow: inset 0 0 0 1.5px rgb(244 237 225 / .22); }
.shadow { position: absolute; inset: -6%; border-radius: 60px; background: radial-gradient(closest-side, rgb(0 0 0 / .5), transparent); transform: translateZ(-50px); filter: blur(22px); }
.anchor { position: absolute; width: 1px; height: 1px; }
.a-label { right: 0; bottom: 0; } .a-center { left: 50%; top: 50%; }

.stack.has-focus .layer:not(.on) .face { filter: saturate(.8) brightness(.85); }
.layer.on .face { box-shadow: inset 0 0 0 1.5px rgb(244 237 225 / .62), inset 0 1.5px 0 rgb(255 255 255 / .22), 0 0 80px rgb(95 180 155 / .28); }

/* Content: graphics only */
.c { position: absolute; inset: 0; }
.c svg { position: absolute; inset: 0; width: 100%; height: 100%; overflow: visible; }
.mlogo { position: absolute; left: var(--x); top: var(--y); width: 60px; height: 60px; border-radius: 16px; background: rgb(244 237 225 / .07); box-shadow: inset 0 0 0 1px rgb(244 237 225 / .16); transition: background .6s, box-shadow .6s; }
.mlogo i { position: absolute; inset: 17px; background: rgb(244 237 225 / .82); -webkit-mask: var(--m) center / contain no-repeat; mask: var(--m) center / contain no-repeat; transform: rotate(40deg); transition: background .6s; }
.mlogo.live { background: rgb(95 180 155 / .3); box-shadow: inset 0 0 0 1.5px rgb(170 230 205 / .8), 0 0 30px rgb(95 180 155 / .45); }
.mlogo.live i { background: #fff; }
.person { position: absolute; width: 38px; height: 38px; border-radius: 50%; box-shadow: 0 0 0 3px rgb(24 37 59 / .6); transform: rotate(40deg); }   /* avatar, turned upright against the plane */
.doc { position: absolute; width: 46px; height: 60px; border-radius: 7px; background: rgb(244 237 225 / .1); box-shadow: inset 0 0 0 1px rgb(244 237 225 / .22); }
.doc::before { content: ""; position: absolute; left: 9px; right: 9px; top: 14px; height: 2px; border-radius: 2px; background: rgb(244 237 225 / .38); box-shadow: 0 8px 0 rgb(244 237 225 / .22), 0 16px 0 rgb(244 237 225 / .22), 0 24px 0 rgb(244 237 225 / .16); }
.doc.hi { background: rgb(95 180 155 / .22); box-shadow: inset 0 0 0 1px rgb(150 220 195 / .55); }
.tile { position: absolute; width: 56px; height: 56px; border-radius: 15px; background: rgb(244 237 225 / .08); box-shadow: inset 0 0 0 1px rgb(244 237 225 / .2); display: grid; place-items: center; color: rgb(244 237 225 / .85); }
.tile svg { position: static; width: 24px; height: 24px; } .tile [data-icon] { transform: rotate(40deg); transform-origin: 50% 50%; }

/* Foundation: safeguards. Larger than the layers it carries, Viridian-tinted, with a monitored perimeter. */
.layer.guard { width: 340px; height: 340px; margin: -170px 0 0 -170px; }
.layer.guard .face { background: linear-gradient(145deg, rgb(26 92 74 / .9), rgb(16 58 48 / .9) 55%, rgb(11 38 34 / .94)); box-shadow: inset 0 0 0 1.5px rgb(150 220 195 / .42), inset 0 1.5px 0 rgb(255 255 255 / .16); }
.layer.guard .slab { background: rgb(6 28 23 / .92); }
.layer.guard.on .face { box-shadow: inset 0 0 0 1.5px rgb(190 240 220 / .8), 0 0 90px rgb(95 180 155 / .38); }
.fence { fill: none; stroke: rgb(170 230 205 / .55); stroke-width: 1.5; stroke-dasharray: 7 7; animation: fence 6s linear infinite; }
@keyframes fence { to { stroke-dashoffset: -56; } }
.tile.g { width: 56px; height: 56px; background: rgb(170 230 205 / .1); box-shadow: inset 0 0 0 1px rgb(170 230 205 / .35); color: #DDF3EA; }
.slabel.guard span { color: #BDE8D6; }

/* Top layer: a live workflow board */
.layer.top .face { background: linear-gradient(145deg, #2A8A6F, #1A6450 50%, #124D3E); box-shadow: inset 0 0 0 1px rgb(200 240 222 / .32), inset 0 1.5px 0 rgb(255 255 255 / .26); }
.layer.top .slab { background: rgb(8 40 32 / .9); }
.layer.top.on .face { box-shadow: inset 0 0 0 1.5px rgb(210 245 230 / .75), 0 0 90px rgb(95 180 155 / .4); }
.sheen { position: absolute; inset: -40%; background: linear-gradient(115deg, transparent 40%, rgb(255 255 255 / .12) 50%, transparent 60%); animation: sheen 7s ease-in-out infinite; }
@keyframes sheen { 0%, 20% { transform: translateX(-60%); } 60%, 100% { transform: translateX(60%); } }
.sboard { position: absolute; inset: 0; }
.slane { position: absolute; top: 40px; width: 76px; height: 160px; border-radius: 12px; background: rgb(8 40 32 / .28); box-shadow: inset 0 0 0 1px rgb(200 240 222 / .16); }
.slane b { position: absolute; left: 10px; top: 12px; width: 30px; height: 5px; border-radius: 3px; background: rgb(234 247 241 / .55); }
.scard { position: absolute; left: 6px; width: 64px; height: 34px; border-radius: 8px; background: rgb(244 237 225 / .92); box-shadow: 0 6px 12px -6px rgb(0 0 0 / .4); }
.scard i { position: absolute; left: 8px; top: 8px; width: 26px; height: 4px; border-radius: 2px; background: #9DC1B5; }
.scard i.amber { background: #E2A863; } .scard i.green { background: #2A8A6F; }
.scard u { position: absolute; right: 7px; bottom: 7px; width: 10px; height: 10px; border-radius: 50%; background: #B8C6DC; }
.scard::after { content: ""; position: absolute; left: 8px; top: 18px; width: 38px; height: 3px; border-radius: 2px; background: rgb(24 37 59 / .18); }
.scard.done { opacity: .7; }
.scard.mover { left: 30px; top: 116px; box-shadow: 0 0 0 2px #fff, 0 10px 24px -8px rgb(0 0 0 / .5); animation: move 7.5s cubic-bezier(.65,0,.35,1) infinite; }
@keyframes move { 0%, 18% { transform: translate(0, 0); } 40%, 58% { transform: translate(88px, -40px); } 80%, 100% { transform: translate(176px, 0); } }
.flowpath { fill: none; stroke: rgb(234 247 241 / .35); stroke-width: 1.5; stroke-dasharray: 3 6; animation: dash 3s linear infinite; }
@keyframes dash { to { stroke-dashoffset: -36; } }

/* Billboarding helper */
.bb { position: absolute; transform-style: preserve-3d; }
.bb > * { transform: rotateZ(calc(var(--rz) * -1)) rotateX(calc(var(--rx) * -1)); transform-origin: 0 0; }

/* 2D labels (crisp, positioned from projected anchors) */
.stack-labels { position: absolute; inset: 0; pointer-events: none; }
.slabel { all: unset; position: absolute; left: 0; top: 0; pointer-events: auto; cursor: pointer; display: flex; align-items: center; gap: 12px; padding: 8px 10px 8px 0; white-space: nowrap; will-change: transform; }
.slabel i { display: block; width: 52px; height: 1px; background: rgb(244 237 225 / .35); transition: width .4s, background .4s; }
.slabel span { font: 500 12px/1.35 var(--adaptum-font-mono); letter-spacing: .14em; text-transform: uppercase; color: rgb(244 237 225 / .8); transition: color .4s; }
.slabel small { display: block; letter-spacing: .02em; text-transform: none; font-size: 11.5px; color: rgb(244 237 225 / .45); transition: color .4s; }
.slabel.on i { width: 76px; background: rgb(244 237 225 / .85); }
.slabel.on span { color: #fff; } .slabel.on small { color: rgb(244 237 225 / .82); }
.stack-labels.has-focus .slabel:not(.on) span { color: rgb(244 237 225 / .42); }
.slabel:focus-visible { outline: 2px solid var(--adaptum-signal); outline-offset: 2px; border-radius: 6px; }

.pulse { position: absolute; width: 8px; height: 8px; margin: -4px 0 0 -4px; border-radius: 50%; background: #EAF7F1; box-shadow: 0 0 12px 3px rgb(150 220 195 / .55); opacity: 0; }

@media (prefers-reduced-motion: reduce) { .sheen, .scard.mover, .flowpath, .fence { animation: none; } }
@media (max-width: 560px) { .stack-scene { aspect-ratio: 1 / .98; } .slabel small { display: none; } .slabel i, .slabel.on i { width: 22px; } .slabel span { font-size: 10.5px; } }
@media (max-width: 360px) { .slabel { gap: 8px; } .slabel i, .slabel.on i { width: 14px; } .slabel span { letter-spacing: .08em; } }