/* ARIA hero hologram: labels + next-move bar. Pair with holo.js and the markup in hologram-preview.html */
.holo-wrap{position:relative;width:100%;max-width:820px;aspect-ratio:1/1.02;margin:0 auto}
@media (max-width:1000px){.holo-wrap{max-width:640px}}
.holo-glow{position:absolute;inset:6% -4% 0;border-radius:50%;background:radial-gradient(ellipse at 50% 62%,rgba(228,174,50,.3),transparent 60%);filter:blur(40px);pointer-events:none}
.holo-canvas{position:absolute;inset:0;width:100%;height:100%;display:block}
.holo-kicker{position:absolute;left:0;top:0;font-size:9.5px;letter-spacing:.3em;text-transform:uppercase;color:#D9A21C;font-weight:600;display:flex;align-items:center;gap:10px;font-family:Poppins,sans-serif}
.holo-kicker i{width:7px;height:7px;border-radius:50%;background:#FFCC00;box-shadow:0 0 10px #FFCC00;display:block}
.holo-label{position:absolute;left:0;top:0;opacity:0;pointer-events:none;will-change:transform;display:flex;align-items:center;gap:10px;transition:opacity .3s;font-family:Poppins,sans-serif}
.holo-label>span{width:28px;height:1px;display:block;flex:none}
.holo-label>div{background:rgba(8,17,32,.8);backdrop-filter:blur(8px);border:1px solid;border-radius:6px;padding:7px 12px;white-space:nowrap}
.holo-label b{font-size:8px;letter-spacing:.24em;text-transform:uppercase;font-weight:700}
.holo-label em{font-family:'Playfair Display',serif;font-style:normal;font-size:14px;font-weight:600;color:#fff;margin-left:10px}
.holo-move{position:absolute;left:0;right:0;bottom:-8px;opacity:0;transform:translateY(12px);transition:opacity .5s,transform .5s;display:flex;align-items:center;gap:16px;background:linear-gradient(135deg,#A8F5D8,#6EE7B7);color:#0B1C3D;border-radius:10px;padding:12px 18px;box-shadow:0 24px 50px -16px rgba(110,231,183,.5);font-family:Poppins,sans-serif}
.holo-move b{font-size:8.5px;letter-spacing:.26em;text-transform:uppercase;font-weight:700;white-space:nowrap}
.holo-move span{font-family:Caveat,cursive;font-size:23px;font-weight:600;line-height:1.05}

/* ── integration into the ARIA hero ──────────────────────────────────
   .holo-outer replaces the old prism wrapper and carries the same
   entrance. .holo-static is the branch for phones and for machines with
   no WebGL, where holo.js is never fetched. */
.holo-outer{position:relative;width:100%;max-width:980px;margin:0 auto;
  animation:inkIn 1.2s ease-out .3s both}
/* Phones and machines without WebGL never fetch holo.js, so they get the
   still instead. Same graphic, one frame, 151KB against three.js's 254KB. */
.holo-poster{display:none;width:100%;height:auto}
.holo-outer.holo-static .holo-canvas,
.holo-outer.holo-static .holo-kicker,
.holo-outer.holo-static .holo-label,
.holo-outer.holo-static .holo-move{display:none}
.holo-outer.holo-static .holo-poster{display:block}
.holo-outer.holo-static .holo-wrap{aspect-ratio:auto}
.holo-outer.holo-static .holo-glow{display:none}
@media (prefers-reduced-motion:reduce){
  .holo-outer{animation:none}
  .holo-label,.holo-move{transition:none}
}
/* Mirrored label: connector on the right, box on the left. */
.holo-label.holo-flip{flex-direction:row-reverse}

/* ── phones: the hologram runs, but the labels restack ──────────────────
   Beside-the-node only works when the frame is wider than a label. At 335px
   the widest label is 418px, so below 900px the canvas keeps its square and
   the labels become a list underneath it. holo.js still drives their opacity,
   so they reveal one by one as the scan reaches each floor. */
@media (max-width:899px){
  .holo-wrap{aspect-ratio:auto;display:flex;flex-direction:column;gap:12px}
  .holo-kicker{position:relative;inset:auto;order:0}
  .holo-canvas{position:relative;inset:auto;width:100%;height:auto;aspect-ratio:1/1;order:1}
  .holo-glow{display:none}
  .holo-label{position:relative!important;inset:auto!important;transform:none!important;
    order:2;width:100%;gap:0}
  .holo-label>span{display:none}
  .holo-label>div{width:100%;white-space:normal}
  .holo-move{position:relative;inset:auto;bottom:auto;order:3;margin-top:2px}
}