/* EndoAI HoloSphere, Stage E: the spatial glass feature arc and the feature
   reveal. Linked from index.html immediately before the app chapter: content
   above an in-body stylesheet renders without waiting for it, so these rules
   stay off the critical path. Tokens (--glass-*) come from living.css. */
/* Stage E: spatial glass feature arc. Without JavaScript the cards are a plain
   wrapped row of tabs. As soon as any script has run (html[data-motion], set
   at start-up by core/motion.js) the arc layout and a static opening pose
   apply, so nothing shifts when js/modules/feature-arc.js arrives later and
   takes over the transforms (.is-arc). Glass tokens come from
   living.css, so the arc belongs to the same family as the footer. */
.holo-app .feature-arc{display:flex;flex-wrap:wrap;gap:10px;margin-bottom:22px}
.holo-app .arc-card{position:relative;display:grid;grid-template-columns:auto 1fr;grid-template-areas:"icon num" "title title" "desc desc";align-items:center;gap:6px 10px;width:212px;min-height:112px;padding:14px 16px 16px;border-radius:22px;text-align:left;
  color:var(--on-dark);background:var(--glass-sheen),rgba(11,29,25,.94);border:1px solid rgba(245,241,232,.13);box-shadow:var(--glass-rim),0 24px 40px -26px rgba(0,0,0,.85);font:inherit;cursor:pointer}
.holo-app .arc-card:hover{border-color:rgba(121,215,163,.4)}
.holo-app .arc-card[aria-selected="true"]{background:var(--glass-sheen),rgb(17,48,40);border-color:rgba(121,215,163,.7);color:var(--on-dark);box-shadow:var(--glass-rim),0 0 0 1px rgba(121,215,163,.35),0 26px 46px -24px rgba(121,215,163,.42)}
.holo-app .arc-card:focus-visible{outline:3px solid var(--focus-dark);outline-offset:3px}
.arc-icon{grid-area:icon;width:24px;height:24px;fill:none;stroke:currentColor;stroke-width:1.5;stroke-linecap:round;stroke-linejoin:round;color:var(--on-dark-mute)}
.arc-card[aria-selected="true"] .arc-icon{color:var(--mint)}
.arc-num{grid-area:num;justify-self:end;font-size:.7rem;letter-spacing:.14em;color:var(--on-dark-mute)}
.arc-title{grid-area:title;font:500 1.12rem/1.2 var(--serif)}
.arc-desc{grid-area:desc;font-size:.8rem;line-height:1.35;color:var(--on-dark-soft)}
.arc-controls{display:none}
/* Arc mode */
.holo-app .feature-arc{container-type:inline-size}
html[data-motion] .holo-app .showcase .feature-arc{position:relative;display:block;height:168px;margin:0 0 6px;touch-action:pan-y;user-select:none;-webkit-user-select:none;cursor:grab;
  -webkit-mask-image:linear-gradient(90deg,transparent,#000 9%,#000 91%,transparent);mask-image:linear-gradient(90deg,transparent,#000 9%,#000 91%,transparent)}
html[data-motion] .holo-app .showcase.is-dragging .feature-arc{cursor:grabbing}
.holo-app .is-arc .arc-card{will-change:transform,opacity}
html[data-motion] .holo-app .showcase .arc-card{position:absolute;left:50%;top:8px;transform-origin:50% 60%;--sp:clamp(118px,30cqw,250px);transform:translate(-50%,0)}
/* Opening pose (first feature centred), matching arcPose() in feature-arc.js. */
html[data-motion] .holo-app .showcase:not(.is-arc) .arc-card:nth-child(2){transform:translate(-50%,0) translate3d(calc(var(--sp) * .92),10px,0) perspective(900px) rotateY(-15deg) scale(.87);opacity:.8;z-index:70}
html[data-motion] .holo-app .showcase:not(.is-arc) .arc-card:nth-child(3){transform:translate(-50%,0) translate3d(calc(var(--sp) * 1.68),40px,0) perspective(900px) rotateY(-30deg) scale(.74);opacity:.6;z-index:40}
html[data-motion] .holo-app .showcase:not(.is-arc) .arc-card:nth-child(4){transform:translate(-50%,0) translate3d(calc(var(--sp) * -1.68),40px,0) perspective(900px) rotateY(30deg) scale(.74);opacity:.6;z-index:40}
html[data-motion] .holo-app .showcase:not(.is-arc) .arc-card:nth-child(5){transform:translate(-50%,0) translate3d(calc(var(--sp) * -.92),10px,0) perspective(900px) rotateY(15deg) scale(.87);opacity:.8;z-index:70}
html[data-motion] .holo-app .showcase:not(.is-arc) .arc-card:nth-child(1){z-index:100}
html[data-motion] .holo-app .arc-controls{display:flex;align-items:center;justify-content:center;gap:14px;margin-bottom:26px}
.arc-step{display:inline-flex;align-items:center;justify-content:center;width:46px;height:46px;border-radius:50%;border:1px solid rgba(245,241,232,.2);background:rgba(245,241,232,.05);color:var(--on-dark);font-size:1.05rem;cursor:pointer}
.arc-step:hover{border-color:rgba(121,215,163,.55);background:rgba(121,215,163,.1)}
.arc-step:focus-visible{outline:3px solid var(--focus-dark);outline-offset:3px}
.arc-hint{margin:0;font-size:.8rem;color:var(--on-dark-mute)!important;text-align:center;min-width:0}
@media (max-width:760px){
  .holo-app .arc-card{width:176px;min-height:104px;padding:12px 14px 14px}
  html[data-motion] .holo-app .showcase .feature-arc{height:150px}
  .arc-title{font-size:1.02rem}
  .arc-hint{font-size:.76rem}
}
/* Feature reveal: a short light sweep uncovers the newly selected screen.
   Purely presentational: the image and its alt text are in the page throughout. */
.holo-app .showcase-panel .phone::before{content:"";position:absolute;z-index:2;top:10px;bottom:10px;left:10px;width:2px;border-radius:2px;opacity:0;pointer-events:none;
  background:linear-gradient(180deg,transparent,rgba(155,232,189,.95) 20%,#F5F1E8 50%,rgba(155,232,189,.95) 80%,transparent);box-shadow:0 0 14px 3px rgba(121,215,163,.55)}
.holo-app .showcase-panel.is-revealing .phone img{animation:arc-reveal .6s var(--ease) both}
.holo-app .showcase-panel.is-revealing .phone::before{animation:arc-sweep .6s var(--ease) both}
.holo-app .showcase-panel.is-revealing .showcase-copy{animation:arc-copy .45s var(--ease) both}
@keyframes arc-reveal{from{clip-path:inset(0 100% 0 0 round 26px)}to{clip-path:inset(0 0 0 0 round 26px)}}
@keyframes arc-sweep{0%{left:10px;opacity:0}12%{opacity:1}85%{opacity:1}100%{left:calc(100% - 12px);opacity:0}}
@keyframes arc-copy{from{opacity:0;transform:translateY(6px)}to{opacity:1;transform:none}}
[data-motion="off"] .holo-app .showcase-panel.is-revealing *,[data-motion="off"] .holo-app .showcase-panel.is-revealing .phone::before{animation:none!important}
@media (prefers-reduced-transparency:reduce){.holo-app .arc-card,.holo-app .arc-card[aria-selected="true"]{background:#0E2621}html[data-motion] .holo-app .showcase .feature-arc{-webkit-mask-image:none;mask-image:none}}
@media (forced-colors:active){
  .holo-app .arc-card{border:1px solid CanvasText;background:Canvas;color:CanvasText}
  .holo-app .arc-card[aria-selected="true"]{border:3px solid Highlight}
  html[data-motion] .holo-app .showcase .feature-arc{-webkit-mask-image:none;mask-image:none}
  .holo-app .showcase-panel .phone::before{display:none}
}