/* ==========================================================================
   Ninova Technology · pages/explorer.css
   The "star chart" layout shared by About, Services and Contact:
   a list of topics on the left, a living constellation and the selected
   topic's details on the right. On phones it becomes an accordion.
   Behaviour: js/pages/explorer.js   Geometry: js/data/constellations.js
   ========================================================================== */

body{display:flex;flex-direction:column}

/* full-page star dust behind everything (drawn by js/particles.js) */
.sky{position:fixed;inset:0;width:100%;height:100%;z-index:0}

/* ---------- Layout ---------- */
.explorer{position:relative;z-index:var(--z-content);flex:none;min-height:calc(100vh - 40px);min-height:calc(100svh - 40px);display:grid;grid-template-columns:minmax(0,clamp(420px,29vw,560px)) minmax(0,1fr);gap:clamp(20px,4vw,64px);align-items:center;padding:calc(84px + var(--safe-top)) var(--gutter) 10px}
.explorer__head{display:flex;align-items:center;justify-content:space-between;gap:12px;min-height:28px;margin-bottom:12px}
.explorer__title{font-size:var(--fs-small);font-weight:300;letter-spacing:.04em;color:var(--ink-dim)}
.cta-row{display:flex;gap:10px;flex-wrap:wrap;margin-top:22px;align-items:center}

/* auto-play on/off button (added by explorer.js only where topics rotate on their own).
   Lit dot: running. Dimmed dot: on, but waiting while you read. Hollow dot: off. */
.autoplay{display:none;align-items:center;gap:8px;font:400 10px/1 var(--font-mono);letter-spacing:.14em;text-transform:uppercase;color:var(--ink-dim);background:none;border:1px solid var(--line);border-radius:999px;padding:7px 11px 7px 9px;transition:color var(--t-fast),border-color var(--t-fast)}
.autoplay::before{content:'';width:6px;height:6px;border-radius:50%;border:1px solid rgb(var(--accent-rgb));background:rgb(var(--accent-rgb));box-shadow:0 0 8px rgb(var(--accent-rgb));transition:background .3s,box-shadow .3s}
.autoplay[aria-pressed="false"]::before{background:transparent;box-shadow:none;border-color:var(--ink-dim)}
.autoplay.is-waiting::before{opacity:.4;box-shadow:none}
.autoplay:hover{color:var(--ink);border-color:var(--line-strong)}
@media (min-width:861px){.autoplay{display:inline-flex}}

/* ---------- Topic list ---------- */
.topics{border-bottom:1px solid var(--line)}
.topic{position:relative;border-top:1px solid var(--line);transition:border-color .4s}
.topic.is-active{border-top-color:rgba(var(--accent-rgb),.8)}
.topic__head{font:inherit}
.topic__btn{all:unset;box-sizing:border-box;width:100%;display:flex;align-items:center;gap:14px;padding:clamp(9px,1.6vh,16px) 0;cursor:pointer;-webkit-tap-highlight-color:transparent}
.topic__btn:focus-visible{outline:2px solid var(--focus);outline-offset:2px}
.topic__name{font-weight:200;font-size:clamp(26px,3.5vw,50px);letter-spacing:-.035em;line-height:1.05;color:var(--ink-faint);transition:color .4s,transform .8s var(--ease-spring)}
.topic__btn:hover .topic__name{color:#bdb7c8}
.topic.is-active .topic__name{color:var(--ink);transform:translateX(12px)}
/* the lit marker in front of the active topic */
.topic__btn::before{content:'';flex:none;width:7px;height:7px;border-radius:50%;background:rgb(var(--accent-rgb));opacity:0;transform:scale(.3);transition:opacity .4s,transform .7s var(--ease-spring),margin .4s;box-shadow:0 0 14px rgb(var(--accent-rgb));margin-right:-26px}
.topic.is-active .topic__btn::before{opacity:1;transform:none;margin-right:-6px}
/* auto-play progress along the bottom edge of the active row */
.topic__progress{position:absolute;left:0;bottom:-1px;height:1px;width:100%;background:rgb(var(--accent-rgb));box-shadow:0 0 8px rgb(var(--accent-rgb));transform:scaleX(0);transform-origin:left;opacity:0}
.topic.is-active .topic__progress{opacity:1;transition:opacity .3s}
.topics.is-waiting .topic.is-active .topic__progress{opacity:.35}
/* long lists shrink their type so every topic still fits one screen */
.topics.is-dense .topic__name{font-size:clamp(22px,min(3.5vw,calc(((100svh - 250px) / var(--n,8) - 3.2svh) / 1.05)),50px)}

/* On desktop the selected topic's body is shown in the stage, so the in-list copy is folded away */
.topic__panel{display:none}
.topic__body>p{font-size:var(--fs-lead);line-height:1.55;color:var(--ink-soft);max-width:40ch}
.topic__body{--i:0}
.topic__body .chips{gap:8px}
.topic__body .chips>li{font-size:var(--fs-small);padding:8px 14px}

/* first paint: rows rise in one after another */
.js .topic{animation:rise-in .9s var(--ease-spring-soft) backwards;animation-delay:calc(.12s + var(--i,0) * 55ms)}
.topic:nth-child(2){--i:1}.topic:nth-child(3){--i:2}.topic:nth-child(4){--i:3}.topic:nth-child(5){--i:4}.topic:nth-child(6){--i:5}.topic:nth-child(7){--i:6}.topic:nth-child(8){--i:7}.topic:nth-child(9){--i:8}.topic:nth-child(10){--i:9}.topic:nth-child(11){--i:10}.topic:nth-child(12){--i:11}
.js .explorer__head,.js .cta-row,.js .stage{animation:fade-in 1.1s ease .1s backwards}

/* ---------- Stage: chart + details ---------- */
.stage{display:flex;flex-direction:column;min-width:0}
.chart{position:relative;height:min(56vh,600px);min-height:260px}
/* viewfinder corners */
.chart::before{--k:linear-gradient(rgba(255,255,255,.3),rgba(255,255,255,.3));content:'';position:absolute;inset:0;pointer-events:none;background:var(--k) 0 0/18px 1px no-repeat,var(--k) 0 0/1px 18px no-repeat,var(--k) 100% 0/18px 1px no-repeat,var(--k) 100% 0/1px 18px no-repeat,var(--k) 0 100%/18px 1px no-repeat,var(--k) 0 100%/1px 18px no-repeat,var(--k) 100% 100%/18px 1px no-repeat,var(--k) 100% 100%/1px 18px no-repeat}
/* range rings, crosshair and a slow radar sweep */
.chart__grid{position:absolute;left:50%;top:50%;width:min(100%,92vh,780px);aspect-ratio:1;transform:translate(-50%,-50%);border-radius:50%;pointer-events:none;
  background:repeating-radial-gradient(circle,transparent 0 59px,rgba(161,240,234,.08) 59px 60px),linear-gradient(90deg,transparent calc(50% - .5px),rgba(161,240,234,.08) calc(50% - .5px) calc(50% + .5px),transparent calc(50% + .5px)),linear-gradient(0deg,transparent calc(50% - .5px),rgba(161,240,234,.08) calc(50% - .5px) calc(50% + .5px),transparent calc(50% + .5px));
  -webkit-mask-image:radial-gradient(circle,#000 38%,transparent 71%);mask-image:radial-gradient(circle,#000 38%,transparent 71%)}
.chart__grid::after{content:'';position:absolute;inset:0;border-radius:50%;background:conic-gradient(from 0deg,rgba(var(--accent-rgb),.2),transparent 20%);animation:sweep 12s linear infinite}
@keyframes sweep{to{transform:rotate(360deg)}}
.chart__canvas{position:absolute;inset:0;width:100%;height:100%}
/* instrument read-outs in the corners */
.chart__hud{position:absolute;z-index:2;top:12px;font:400 10px/1 var(--font-mono);letter-spacing:.14em;text-transform:uppercase;color:var(--ink-dim);font-variant-numeric:tabular-nums;white-space:nowrap;pointer-events:none}
.chart__hud b{font-weight:400;color:rgb(var(--accent-rgb))}
.chart__hud--index{left:14px}
.chart__hud--coords{right:14px}

.detail{position:relative;margin-top:16px;padding-top:18px;border-top:1px solid rgba(var(--accent-rgb),.55)}
.detail::before{content:'';position:absolute;left:0;top:-1px;width:56px;height:1px;background:rgb(var(--accent-rgb));box-shadow:0 0 12px 1px rgb(var(--accent-rgb))}
.detail .topic__body{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1.1fr);gap:clamp(16px,3vw,40px);align-items:start}
/* each time a topic is selected its copy and chips rise in, one beat apart */
.detail .topic__body>p,.detail .chips>li,.topic.is-active .topic__panel .topic__body>p,.topic.is-active .topic__panel .chips>li{animation:rise-in .8s var(--ease-spring-soft) backwards;animation-delay:calc(var(--i,0) * 70ms)}
.chips>li:nth-child(1){--i:1}.chips>li:nth-child(2){--i:2}.chips>li:nth-child(3){--i:3}.chips>li:nth-child(4){--i:4}.chips>li:nth-child(5){--i:5}.chips>li:nth-child(6){--i:6}.chips>li:nth-child(7){--i:7}

/* ---------- No JavaScript: every topic is simply open ---------- */
.no-js .explorer{display:block}
.no-js .stage,.no-js .sky{display:none}
.no-js .topic__panel{display:block;padding:0 0 18px}
.no-js .topic__name{color:var(--ink)}
.no-js .topic__body .chips{margin-top:14px}

/* ---------- Phones and small tablets: accordion ----------
   Each topic's content opens directly under its own heading, with the chart inside it. */
@media (max-width:860px){
  .explorer{display:block;min-height:0;padding-bottom:24px}
  .stage{display:none}
  .explorer__head{margin-bottom:10px}
  .topic{scroll-margin-top:calc(80px + var(--safe-top));transition:border-color .4s,background .5s}
  .topic.is-active{background:linear-gradient(180deg,rgba(var(--accent-rgb),.07),rgba(var(--accent-rgb),0) 55%)}
  .topic__btn{padding:15px 0;min-height:56px}
  .topic__name,.topics.is-dense .topic__name{font-size:clamp(22px,6.4vw,32px)}
  .topic.is-active .topic__name{transform:translateX(14px)}
  /* plus / minus */
  .topic__btn::after{content:'';flex:none;margin-left:auto;width:30px;height:30px;border:1px solid rgba(255,255,255,.18);border-radius:50%;color:var(--ink-dim);
    background:linear-gradient(currentColor,currentColor) center/11px 1px no-repeat,linear-gradient(currentColor,currentColor) center/1px 11px no-repeat;
    transition:transform .7s var(--ease-spring),border-color .3s,color .3s,background-size .3s}
  .topic.is-active .topic__btn::after{transform:rotate(180deg);color:rgb(var(--accent-rgb));border-color:rgba(var(--accent-rgb),.75);background-size:11px 1px,1px 0}
  .js .topic__panel{display:block;height:0;overflow:hidden;margin:0 -6px;padding:0 6px;transition:height .55s var(--ease-out)}
  .topic__panel .topic__body{padding:2px 0 0 14px}
  .topic__panel .topic__body>p{font-size:15px;line-height:1.6;max-width:none}
  .topic__panel .chips{margin-top:14px}
  .topic__panel .chart{height:clamp(170px,27svh,230px);min-height:0;margin:18px 0 20px}
  .topic__panel .chart::before{opacity:.8}
  .chart__hud--coords{display:none}
}