/* DEMO C · Vòng quỹ đạo 3D — loaded after journey.css on /ve-pow/demo-c/ only.
   The 3D steel bulkhead is switched off (journey-demo.js): open space, no window frame. Boarding = a small planet in the middle and a ring of ten cards turning around it;
   drag the ring (or use the arrows / the number keys) and the camera follows the card in front. The list console is out of sight until a situation is picked. */

.jr-cabin.is-live[data-demo=c]::after{display:none!important}
.jr-cabin.is-live[data-demo=c]:not([data-layout=phone])[data-state=intro]:not(.is-map) .jr-console{visibility:hidden;opacity:0;pointer-events:none}

/* the topic chips orbiting the body belong to the situation view: not while the ring is up */
.jr-cabin.is-live[data-demo=c]:not([data-layout=phone])[data-state=intro]:not(.is-map) :is(.jr-moons,.jr-pins){visibility:hidden}

.jr-ring{display:none}
.jr-cabin.is-live[data-demo=c]:not([data-layout=phone])[data-state=intro]:not(.is-map) .jr-ring{display:block;position:absolute;inset:0;z-index:4;pointer-events:auto;cursor:grab;touch-action:pan-y;-webkit-user-select:none;user-select:none}
.jr-ring.is-drag{cursor:grabbing}
.jr-ring-head{position:absolute;left:0;right:0;top:2px;text-align:center;pointer-events:none}
.jr-ring-head small{display:block;font-size:12px;font-weight:600;letter-spacing:.2em;text-transform:uppercase;color:var(--accent)}
.jr-ring-head p{margin:6px 0 0;font-size:clamp(22px,2.4vw,34px);font-weight:800;line-height:1.1;letter-spacing:-.03em;text-shadow:0 2px 24px #02050c}
.jr-ring-head em{font-style:normal;background:linear-gradient(95deg,#72eaff 5%,#9fb4ff 55%,#cfa5ff);-webkit-background-clip:text;background-clip:text;color:transparent}
.jr-ring-hint{position:absolute;left:0;right:0;bottom:8px;margin:0;text-align:center;font-size:12.5px;color:var(--muted);text-shadow:0 1px 10px #000;pointer-events:none}
.jr-ring-hint span{margin-right:6px;color:var(--accent);letter-spacing:.3em}

.jr-ring-cards{position:absolute;inset:0;perspective:1700px;perspective-origin:50% 36%}
/* the orbit itself: a thin dashed ellipse (--cx/--cy/--rx/--ry are set by journey-demo.js) */
.jr-ring-cards::before{content:'';position:absolute;left:calc(var(--cx,50%) - var(--rx,0px));top:calc(var(--cy,50%) - var(--ry,0px));width:calc(2*var(--rx,0px));height:calc(2*var(--ry,0px));border:1px dashed #72eaff3d;border-radius:50%;pointer-events:none}
.jr-rc{position:absolute;left:0;top:0;display:grid;grid-template-columns:32px minmax(0,1fr);gap:0 12px;align-items:start;width:240px;margin:0;padding:13px 15px 13px 13px;border:1px solid color-mix(in srgb,var(--planet,var(--accent)) 36%,#ffffff12);border-radius:16px;background:linear-gradient(150deg,color-mix(in srgb,var(--planet,var(--accent)) 15%,#0b1626f4),#071120f4);box-shadow:0 18px 40px -14px #000c;color:var(--text);font-family:inherit;text-align:left;cursor:pointer;will-change:transform,opacity;-webkit-backface-visibility:hidden;backface-visibility:hidden}
.jr-rc-no{display:grid;place-items:center;width:30px;height:30px;border:1.5px solid var(--planet,var(--accent));border-radius:50%;background:#050b16;color:var(--planet,var(--accent));font-size:11px;font-weight:700;font-variant-numeric:tabular-nums}
.jr-rc-body{display:block;min-width:0}
.jr-rc-body small{display:block;font-size:10.5px;font-weight:600;letter-spacing:.13em;text-transform:uppercase;color:var(--planet,var(--accent))}
.jr-rc-body b{display:-webkit-box;-webkit-box-orient:vertical;-webkit-line-clamp:4;line-clamp:4;overflow:hidden;margin-top:3px;font-size:13.5px;font-weight:500;line-height:1.42;color:var(--text)}
.jr-rc-go{grid-column:1/-1;display:block;max-height:0;overflow:hidden;margin-top:0;font-size:12.5px;font-weight:600;color:var(--planet,var(--accent));opacity:0;transition:max-height .35s var(--ease),margin .35s var(--ease),opacity .35s}
.jr-rc.is-front{border-color:color-mix(in srgb,var(--planet,var(--accent)) 82%,#ffffff22);box-shadow:0 0 0 1px color-mix(in srgb,var(--planet,var(--accent)) 30%,#0000),0 0 46px -6px color-mix(in srgb,var(--planet,var(--accent)) 65%,#0000),0 22px 44px -14px #000d}
.jr-rc.is-front .jr-rc-no{background:var(--planet,var(--accent));color:#04101a}
.jr-rc.is-front .jr-rc-go{max-height:24px;margin-top:9px;opacity:1}
.jr-rc:not(.is-near){pointer-events:none}
.jr-rc:focus-visible{outline:2px solid var(--accent);outline-offset:3px}
.jr-ring.is-drag .jr-rc{pointer-events:none}

/* the arrows in the deck turn the ring while boarding; the floating deck gets a soft fade behind it */
.jr-cabin.is-live[data-demo=c]:not([data-layout=phone]) .jr-deck::before{content:'';position:absolute;z-index:-1;left:-40px;right:-40px;top:-30px;bottom:-30px;pointer-events:none;background:radial-gradient(ellipse 60% 100% at 50% 100%,#02050ccc,#0000 76%)}
@media(prefers-reduced-motion:reduce){.jr-rc-go{transition:none}}