/* =============================================================================
   ACHARYA ANAND · APEX LAYER (public) · v303
   -----------------------------------------------------------------------------
   WHAT THIS IS
     The final visual pass over the locked design: a living sky behind the hero,
     today's real panchang as a strip inside the hero, modern text setting, and
     the small premium details (selection ink, focus rings, quiet scrollbars,
     balanced headings) that separate a fine site from a finished one.

   WHERE IT SITS
     Loaded LAST in includes/header.php, after styles.css, polish.css and
     aa-controls.css. It only ever adds or refines; it never removes a locked
     colour, size or layout rule. Rollback = delete that one <link> line.

   HOUSE RULES KEPT
     - Brand tokens only (styles.css :root). No new hue. The sky is built from
       --navy-950/800, --gold-2 and --cream at low alpha — the palette the hero
       already paints with.
     - Nothing here carries meaning: the panchang strip is server-rendered and
       disappears entirely (no empty shell) if the engine cannot answer. With
       CSS off or this file missing, every page is exactly the locked design.
     - Motion is minimal and wrapped in prefers-reduced-motion guards; polish.css
       remains the only broad motion layer, and this file adds none of its own
       beyond the sky's two slow drifts (pure decoration, GPU-cheap, hidden
       entirely for reduced-motion users).
   ========================================================================== */

/* ─────────────────────────────────────────────────────────────────────────────
   §1 · TEXT SETTING — the quiet modernisers

   `text-wrap: balance` keeps a display headline's two lines even instead of
   orphaning a word (supported in current browsers; older ones ignore it and
   keep today's exact rendering). `optical sizing` + kerning let Cormorant hold
   its edges at 60px+ the way it was drawn. No layout changes — line count
   stays the same or improves by one word.
   ───────────────────────────────────────────────────────────────────────────── */
h1, .h1, h2, .h2, .h3 {
  text-wrap: balance;
  font-optical-sizing: auto;
  font-kerning: normal;
}
.sub, .lead, p {
  text-wrap: pretty;
}

/* ─────────────────────────────────────────────────────────────────────────────
   §2 · THE LIVING SKY — hero atmosphere, built from the brand's own night

   Two decorative layers behind the hero's existing .glow elements:
   (a) a starfield of twelve box-shadow points on .hero::before, some of them
       breathing on a 6–9s cycle — visible only as faint cream pin-pricks, so
       the hero reads as night sky rather than flat navy;
   (b) a vast zodiac ring on .hero::after — one hairline circle with degree
       ticks (conic-gradient dashes) turning once every 240s, sitting behind
       the kundli card like the face of an astronomical clock.
   Both are position:absolute inside .hero (which is already position:relative
   and overflow:hidden in styles.css), pointer-events:none, and both collapse
   to nothing under prefers-reduced-motion (the static stars stay, the motion
   goes). z-index 0 keeps both behind every hero child (.wrap has its own
   stacking position in styles.css).
   ───────────────────────────────────────────────────────────────────────────── */
.hero::before,
.hero::after {
  content: "";
  position: absolute;
  pointer-events: none;
  z-index: 0;
  will-change: transform, opacity;
}
.hero::before {
  inset: 0;
  background-repeat: repeat;
  background-image: radial-gradient(1.2px 1.2px at 12% 22%, rgba(248,243,234,.85) 48%, transparent 52%),
                    radial-gradient(1px 1px    at 34% 68%, rgba(248,243,234,.55) 48%, transparent 52%),
                    radial-gradient(1.4px 1.4px at 55% 18%, rgba(230,201,100,.75) 48%, transparent 52%),
                    radial-gradient(1px 1px    at 71% 46%, rgba(248,243,234,.45) 48%, transparent 52%),
                    radial-gradient(1.2px 1.2px at 86% 78%, rgba(248,243,234,.65) 48%, transparent 52%),
                    radial-gradient(1px 1px    at 93% 12%, rgba(230,201,100,.55) 48%, transparent 52%);
  background-size: 640px 480px;
  opacity: .5;
  animation: aa-sky-breathe 9s ease-in-out infinite;
}
.hero::after {
  right: -220px;
  top: 50%;
  width: 720px;
  height: 720px;
  margin-top: -360px;
  border-radius: 50%;
  border: 1px solid rgba(230, 201, 100, .13);
  background:
    repeating-conic-gradient(from 0deg,
      rgba(230, 201, 100, .16) 0deg .35deg,
      transparent .35deg 6deg);
  -webkit-mask-image: radial-gradient(circle, transparent 58%, #000 59%, #000 66%, transparent 67%);
          mask-image: radial-gradient(circle, transparent 58%, #000 59%, #000 66%, transparent 67%);
  opacity: .55;
  animation: aa-sky-turn 240s linear infinite;
}
@keyframes aa-sky-breathe {
  0%, 100% { opacity: .38; }
  50%      { opacity: .6; }
}
@keyframes aa-sky-turn {
  to { transform: rotate(360deg); }
}
@media (max-width: 900px) {
  .hero::after { right: -380px; opacity: .35; }   /* the ring peeks, never crowds, the card */
}
@media (prefers-reduced-motion: reduce) {
  .hero::before { animation: none; opacity: .42; }
  .hero::after  { animation: none; }
}

/* ─────────────────────────────────────────────────────────────────────────────
   §3 · TODAY'S SKY STRIP — the live panchang line in the hero

   Server-rendered by index.php from the same engine + cache the Panchang page
   uses. This styles it: a hairline gold-topped glass bar at the foot of the
   hero, limbs separated by diamonds, scrolling horizontally on a phone instead
   of wrapping. If index.php rendered nothing, this CSS matches nothing — by
   design.
   ───────────────────────────────────────────────────────────────────────────── */
.aa-sky {
  margin-top: 42px;
  padding: 13px 4px 2px;
  border-top: 1px solid rgba(230, 201, 100, .16);
  display: flex;
  align-items: baseline;
  gap: 8px 22px;
  flex-wrap: nowrap;
  overflow-x: auto;
  scrollbar-width: none;
  font: 400 13.5px/1.5 var(--ui);
  color: var(--cream-mute);
  -webkit-overflow-scrolling: touch;
}
.aa-sky::-webkit-scrollbar { display: none; }
.aa-sky .aa-sky-day {
  flex: none;
  font-family: var(--disp);
  font-size: 15.5px;
  font-weight: 600;
  color: var(--cream);
  letter-spacing: .01em;
  display: inline-flex;
  align-items: baseline;
  gap: 9px;
}
.aa-sky .aa-sky-day .st { color: var(--gold-2); font-size: 12px; }
.aa-sky .aa-sky-item { flex: none; white-space: nowrap; }
.aa-sky .aa-sky-item b {
  color: var(--gold-2);
  font-weight: 600;
  font-variant-numeric: tabular-nums lining-nums;
}
.aa-sky .aa-sky-sep { flex: none; color: rgba(230, 201, 100, .4); }
.aa-sky .aa-sky-more {
  flex: none;
  margin-left: auto;
  color: var(--gold-2);
  text-decoration: none;
  font-weight: 600;
  border-bottom: 1px dotted rgba(230, 201, 100, .5);
  padding-bottom: 1px;
  transition: border-color .18s ease, color .18s ease;
}
.aa-sky .aa-sky-more:hover,
.aa-sky .aa-sky-more:focus-visible { color: var(--cream); border-bottom-color: var(--cream); }
@media (max-width: 760px) {
  .aa-sky { gap: 8px 14px; font-size: 12.5px; margin-top: 30px; }
  .aa-sky .aa-sky-more { margin-left: 6px; }
}

/* ─────────────────────────────────────────────────────────────────────────────
   §4 · REVIEWS WALL — even columns, anchored footers

   styles.css lays the .tcards grid out; on real data one long quote made the
   neighbouring cards stretch with it. Anchoring the person line to the card's
   foot keeps every card's grid row even without changing any type size.
   ───────────────────────────────────────────────────────────────────────────── */
.tcard { display: flex; flex-direction: column; }
.tcard .tperson { margin-top: auto; padding-top: 18px; }
.tcard.feature { display: flex; }

/* ─────────────────────────────────────────────────────────────────────────────
   §5 · PREMIUM DETAILS — the last 2%

   Selection ink in the brand's saffron (was browser default cyan — the one
   place the site still showed a colour that is not ours), quiet slim
   scrollbars on the page, and a slightly deeper focus ring on the primary
   buttons for keyboard users. All token-coloured; all fail-safe.
   ───────────────────────────────────────────────────────────────────────────── */
::selection { background: rgba(217, 119, 6, .22); }

@media (prefers-reduced-motion: no-preference) {
  html { scrollbar-color: #C9BFAE transparent; scrollbar-width: thin; }
  html::-webkit-scrollbar { width: 11px; height: 11px; }
  html::-webkit-scrollbar-thumb {
    background: #C9BFAE;
    border-radius: 999px;
    border: 3px solid transparent;
    background-clip: padding-box;
  }
  html::-webkit-scrollbar-thumb:hover { background-color: #B4A88F; }
}

/* The hero kundli seal breathes once — a heartbeat under the form's heading.
   Six seconds, opacity only, gone entirely for reduced-motion users. */
@media (prefers-reduced-motion: no-preference) {
  .kundli-card .seal { animation: aa-seal-hold 6s ease-in-out infinite; }
  @keyframes aa-seal-hold {
    0%, 88%, 100% { transform: scale(1); opacity: 1; }
    94%           { transform: scale(1.045); opacity: .88; }
  }
}

/* Feature review card: the big quote mark hangs a shade higher so it lines
   with the cap-height, not the ascent gap. */
.tcard.feature .quote-mark { line-height: .8; }