/* ==========================================================================
   Angira Orbit — landing hero celestial instrument
   Printed KP instrument on cream paper (the watch, closed).
   The services console is the same watch, caseback open.
   Labels + plaque + readouts are DOM so they stay sharp at any DPI;
   the canvas paints the metal. No particles, no scanner, no glow-chase.
   ========================================================================== */

/* Design tokens — deliberately defined on the instrument WRAPPER, not on
   .aj-orbit: the readouts, plaque and caption live OUTSIDE the #aj-orbit div
   (siblings inside .aj-orbit-stage / .aj-orbit-instrument), and the tooltip
   is mounted on document.body so no transform/filter ancestor can re-anchor
   its position:fixed box. All of them still inherit these tokens this way.
   (Previously the tokens sat on .aj-orbit only, so every var(--aj-*) used by
   readouts/plaque/tip silently fell back to inherited body styles.) */
.aj-orbit-instrument,
.aj-orbit__tip {
  --aj-conch: #fbf8f0;
  --aj-paper: #fffdf8;
  --aj-ink: #232019;
  --aj-stone: #70665c;
  --aj-vermilion: #b94a2f;
  --aj-brass: #a07030;
  --aj-copper: #8a5a30;
  --aj-display: "Iowan Old Style", "Palatino Linotype", "Book Antiqua", Constantia, Georgia, "Noto Sans Devanagari", Mangal, serif;
  --aj-ui: "Trebuchet MS", Candara, "Segoe UI", "Noto Sans Devanagari", Mangal, sans-serif;
  --aj-mono: Consolas, "Courier New", "Noto Sans Devanagari", Mangal, monospace;
}

.aj-orbit {
  position: relative;
  width: 100%;
  aspect-ratio: 1 / 1;
  isolation: isolate;
  user-select: none;
  -webkit-user-select: none;
}

.aj-orbit__canvas {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  display: block;
  background: transparent;
  outline: none;
  touch-action: pan-y;
  opacity: 0;
  transition: opacity 400ms cubic-bezier(.22, 1, .36, 1);
}

.aj-orbit.is-ready .aj-orbit__canvas {
  opacity: 1;
}

/* Rashi + bhava labels — HTML, one stencil on resize.
   No fillText per-frame, no Path2D trick. Vector-sharp. */
.aj-orbit__rashi,
.aj-orbit__bhava {
  position: absolute;
  inset: 0;
  pointer-events: none;
  z-index: 2;
}

.aj-orbit__rashi-n {
  position: absolute;
  transform: translate(-50%, -50%);
  color: rgba(122, 74, 22, 0.78);
  font-family: var(--aj-mono);
  /* Fixed box so Devanagari मेष/वृश्चिक and Latin ARI/SCO share same anchor — no reflow on lang switch */
  width: 44px;
  text-align: center;
  font-size: clamp(9px, 1vw, 12px);
  letter-spacing: 0.02em;
  white-space: nowrap;
}

.aj-orbit__bhava-n {
  position: absolute;
  transform: translate(-50%, -50%);
  color: rgba(35, 32, 25, 0.55);
  font-family: var(--aj-mono);
  /* JS sets exact px as g.R*0.075 (old canvas size); this is fallback */
  font-size: clamp(12px, 3vw, 18px);
  font-weight: 600;
  letter-spacing: 0.04em;
  font-variant-numeric: tabular-nums;
  white-space: nowrap;
}

/* Readouts — three, then one on mobile. Mono, house register. */
.aj-orbit__readouts {
  position: absolute;
  inset: 0;
  pointer-events: none;
  z-index: 3;
}

.aj-orbit__readout {
  position: absolute;
  margin: 0;
  display: grid;
  gap: 2px;
  font-family: var(--aj-mono);
  line-height: 1.25;
  white-space: nowrap;
}

.aj-orbit__readout span {
  color: var(--aj-stone);
  font-size: 9.5px;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  opacity: 0.85;
}

.aj-orbit__readout b {
  color: var(--aj-ink);
  font-size: 12px;
  font-weight: 600;
  letter-spacing: 0.045em;
  line-height: 1.1;
  min-height: 13px;
}

.aj-orbit__readout span,
.aj-orbit__readout b {
  text-shadow:
    0 0 4px var(--aj-conch),
    0 0 8px var(--aj-conch),
    0 0 12px var(--aj-conch);
}

.aj-orbit__readout--ayan { top: 6%; left: 0; }
.aj-orbit__readout--ayan b { color: var(--aj-vermilion); }
.aj-orbit__readout--frame { top: 14%; right: -3%; text-align: right; justify-items: end; }
.aj-orbit__readout--nodes { bottom: 12%; left: 1%; }
/* Language-invariant lock — EN/HI same pixels, only text translates */
html[lang="hi"] .aj-orbit__readout--ayan,
html[lang="en"] .aj-orbit__readout--ayan { top: 6%; left: 0; }
html[lang="hi"] .aj-orbit__readout--frame,
html[lang="en"] .aj-orbit__readout--frame { top: 14%; right: -3%; }
html[lang="hi"] .aj-orbit__readout--nodes,
html[lang="en"] .aj-orbit__readout--nodes { bottom: 12%; left: 1%; }

/* Plaque — the product sentence. Inside the stage, low-right but
   clear of the rashi ring. Spec §9 position: right:1% bottom:3.5% */
.aj-orbit__plaque {
  position: relative;
  z-index: 4;
  width: fit-content;
  min-width: 188px;
  max-width: 240px;
  /* pulled up into stage bottom-padding, stays clear of the 1.00R bezel + graha ring */
  margin: -34px 8px 0 auto;
  padding: 11px 16px 10px;
  background: linear-gradient(180deg, #fffef9 0%, #fbf6ea 100%);
  border: 1px solid rgba(160, 112, 48, 0.22);
  border-radius: 12px;
  box-shadow:
    0 1px 0 rgba(255, 253, 248, 0.95) inset,
    0 0 0 1px rgba(255, 248, 230, 0.7) inset,
    0 22px 48px rgba(61, 45, 29, 0.10);
  pointer-events: none;
}

.aj-orbit__plaque-mark {
  position: absolute;
  inset: 7px;
  pointer-events: none;
  border-radius: 8px;
  box-shadow:
    4px 0 0 -3px rgba(160, 112, 48, 0.35),
    -4px 0 0 -3px rgba(160, 112, 48, 0.35),
    0 4px 0 -3px rgba(160, 112, 48, 0.35),
    0 -4px 0 -3px rgba(160, 112, 48, 0.35);
}

.aj-orbit__plaque-kicker {
  min-height: 14px;
  position: relative;
  margin: 0;
  color: var(--aj-copper);
  font-family: var(--aj-display);
  font-size: clamp(10.5px, 1.1vw, 12.5px);
  font-weight: 500;
  letter-spacing: 0.02em;
}

.aj-orbit__plaque-flow {
  position: relative;
  display: flex;
  align-items: center;
  gap: 12px;
  margin-top: 12px;
}

.aj-orbit__plaque-flow span {
  color: var(--aj-ink);
  font-family: var(--aj-display);
  font-size: clamp(15px, 1.75vw, 19px);
  font-weight: 500;
  line-height: 1;
}

.aj-orbit__plaque-flow i {
  position: relative;
  flex: 1 1 48px;
  min-width: 48px;
  height: 1px;
  background: #d4c0a4;
  opacity: 0.9;
}

.aj-orbit__plaque-flow i::after {
  content: "";
  position: absolute;
  top: 50%;
  left: 50%;
  width: 8px;
  height: 8px;
  border-radius: 50%;
  background: var(--aj-vermilion);
  box-shadow: 0 0 0 3px rgba(185, 74, 47, 0.12);
  transform: translate(-50%, -50%);
}

/* Mobile plaque — leaves the disc, sits under the caption (DOM order). */
.aj-orbit__plaque--below {
  display: none;
}



.aj-orbit-instrument { position: relative; }

/* Tooltip — positioned by JS left/top in viewport coordinates (mounted on
   document.body, see angira-orbit.js). Hidden only on phones / coarse
   pointers (≤680px or touch); desktop mouse/pen always get the card. */
.aj-orbit__tip {
  position: fixed;
  top: 0;
  left: 0;
  z-index: 9999;
  min-width: 148px;
  max-width: min(190px, calc(100vw - 24px));
  padding: 10px 14px;
  background: linear-gradient(180deg, #fffef9 0%, #fbf6ea 100%);
  border: 1px solid rgba(160, 112, 48, 0.22);
  border-radius: 10px;
  box-shadow:
    0 1px 0 rgba(255, 253, 248, 0.95) inset,
    0 8px 24px rgba(61, 45, 29, 0.14);
  pointer-events: none;
  opacity: 0;
  visibility: hidden;
  transform: translate(0, 0);
  transition: opacity 160ms cubic-bezier(.22, 1, .36, 1), visibility 160ms;
  overflow-wrap: anywhere;
}

.aj-orbit__tip.is-on { opacity: 1; visibility: visible; }

.aj-orbit__tip::before {
  content: "";
  position: absolute;
  left: -6px;
  top: 50%;
  width: 10px;
  height: 10px;
  background: #fbf6ea;
  border-left: 1px solid rgba(160, 112, 48, 0.22);
  border-bottom: 1px solid rgba(160, 112, 48, 0.22);
  transform: translateY(-50%) rotate(45deg);
}

/* Flip to right-side nubbin when clamped to right edge */
.aj-orbit__tip.is-flip::before {
  left: auto;
  right: -6px;
  border-left: none;
  border-bottom: none;
  border-right: 1px solid rgba(160, 112, 48, 0.22);
  border-top: 1px solid rgba(160, 112, 48, 0.22);
}

@media (max-width: 680px), (pointer: coarse) {
  .aj-orbit__tip { display: none !important; }
}

.aj-orbit__tip b {
  display: block;
  color: var(--aj-ink);
  font-family: var(--aj-display);
  font-size: 14px;
  font-weight: 600;
  letter-spacing: 0.02em;
}

.aj-orbit__tip b.aj-orbit__tip-hi {
  margin-top: 4px;
}

.aj-orbit__tip span {
  display: block;
  margin-top: 3px;
  color: var(--aj-stone);
  font-family: var(--aj-mono);
  font-size: 11.5px;
  letter-spacing: 0.03em;
  /* nowrap made long lines (Sagittarius + star lord Mercury ≈ 240px) spill
     past the 190px card edge — wrapping keeps the card honest. */
  white-space: normal;
}

/* Pulsing pip — the only "alive" on the whole instrument. */
@media (prefers-reduced-motion: no-preference) {
  .aj-orbit-instrument:not(.is-instant) .aj-orbit__plaque-flow i::after {
    animation: aj-orbit-pip 3.6s ease-in-out infinite;
  }
}

@media (prefers-reduced-motion: reduce) {
  .aj-orbit__canvas { transition-duration: 0ms; }
  .aj-orbit__plaque-flow i::after { animation: none; }
  .aj-orbit__readout,
  .aj-orbit__plaque,
  .aj-orbit__rashi,
  .aj-orbit__bhava { animation: none !important; opacity: 1; }
}

/* Revisit in the same tab: the object is already painted — no re-boot. */
.aj-orbit.is-instant .aj-orbit__canvas,
.aj-orbit-instrument.is-instant .aj-orbit__canvas {
  transition-duration: 0ms;
  opacity: 1;
}

@keyframes aj-orbit-pip {
  0%, 100% { box-shadow: 0 0 0 3px rgba(185, 74, 47, 0.10); }
  50% { box-shadow: 0 0 0 5px rgba(185, 74, 47, 0.18); }
}

/* ---------- Boot (first visit only) ----------
   Canvas paints metal. These rules place the printed type.
   .is-instant (revisit / reduced) skips every delay. */

@keyframes aj-orbit-in {
  from { opacity: 0; }
  to   { opacity: 1; }
}

.aj-orbit-instrument.is-booting .aj-orbit__rashi,
.aj-orbit-instrument.is-booting .aj-orbit__bhava {
  animation: aj-orbit-in 420ms cubic-bezier(.22, 1, .36, 1) both;
  animation-delay: 280ms;
}

.aj-orbit-instrument.is-booting .aj-orbit__readout--ayan {
  animation: aj-orbit-in 500ms cubic-bezier(.22, 1, .36, 1) both;
  animation-delay: 400ms;
}
.aj-orbit-instrument.is-booting .aj-orbit__readout--frame {
  animation: aj-orbit-in 500ms cubic-bezier(.22, 1, .36, 1) both;
  animation-delay: 480ms;
}
.aj-orbit-instrument.is-booting .aj-orbit__readout--nodes {
  animation: aj-orbit-in 500ms cubic-bezier(.22, 1, .36, 1) both;
  animation-delay: 560ms;
}

.aj-orbit-instrument.is-booting .aj-orbit__plaque {
  animation: aj-orbit-in 560ms cubic-bezier(.22, 1, .36, 1) both;
  animation-delay: 620ms;
}

.aj-orbit-instrument.is-instant .aj-orbit__rashi,
.aj-orbit-instrument.is-instant .aj-orbit__bhava,
.aj-orbit-instrument.is-instant .aj-orbit__readout,
.aj-orbit-instrument.is-instant .aj-orbit__plaque {
  animation: none;
  opacity: 1;
}

.aj-orbit-caption {
  margin: 10px 0 0 auto;
  max-width: 34ch;
  text-align: right;
  color: var(--stone);
  font-family: var(--font-display);
  font-size: 13px;
  font-style: italic;
  line-height: 1.42;
}

/* Mobile aperture — same object, fewer words, plaques stacked below. */
@media (max-width: 960px) {
  .aj-orbit__plaque { position: static; transform: none; left: auto; top: auto; width: 100%; max-width: none; margin-top: 10px; }
}
@media (max-width: 680px), (pointer: coarse) {
  .aj-orbit__tip { display: none !important; }
}
@media (max-width: 680px) {
  .aj-orbit__readout--frame,
  .aj-orbit__readout--nodes { display: none; }
  .aj-orbit__readout--ayan { top: 4%; }
  /* plaque--below removed - single plaque below stage for all widths */
}

@media (max-width: 520px) {
  .aj-orbit__rashi { display: none; }
}