/* Hero C, "The page is a kundali", the default hero (see index.html).
   The hero is a North Indian chart in hairlines: outer square, both diagonals
   and the inner diamond make the twelve houses. The words sit in the centre on
   a soft paper veil; each house holds one feature. One accent, used once: the
   Lagna (house 1) outline. Motion: the chart draws itself once, then the words
   arrive. Nothing loops. */

/* C is the default hero; the head script marks ?hero=a or ?hero=b, and only
   then does C step aside. Without JS, C shows (lines need JS, words do not). */
html:not(.hero-a-on):not(.hero-b-on) main > .hero { display:none !important; }
html.hero-a-on .hc, html.hero-b-on .hc { display:none !important; }

.hc {
  --ink-line:color-mix(in srgb,var(--fg) 20%,var(--bg));
  --ink-word:var(--fg2);
  --wash:color-mix(in srgb,var(--fg) 4.5%,transparent);
  --lagna:var(--tint);
  --e:cubic-bezier(.2,.7,0,1);
  position:relative; margin:0 auto;
  width:min(calc(100% - 2 * var(--gutter)), calc(var(--maxw) - 2 * var(--gutter)));
  height:clamp(600px, calc(100svh - 72px), 1040px);
}
[data-theme="yellow-light"] .hc { --lagna:#C98A06; }
[data-theme$="dark"] .hc { --ink-line:color-mix(in srgb,var(--fg) 22%,var(--bg)); --wash:color-mix(in srgb,var(--fg) 5.5%,transparent); }

/* ---------- The chart ---------- */
.hc-stage { position:absolute; left:0; right:0; top:24px; bottom:32px; -webkit-tap-highlight-color:transparent; }
.hc-lines { position:absolute; inset:0; width:100%; height:100%; overflow:visible; }
.hc-lines .hl { fill:none; stroke:var(--ink-line); stroke-width:1; stroke-linecap:square; }
.hc-lines .lagna { fill:none; stroke:var(--lagna); stroke-width:1.25; stroke-linejoin:miter; }
.hc-lines .hit { fill:transparent; stroke:none; transition:fill .18s ease; cursor:pointer; }
.hc-lines .hit.on { fill:var(--wash); }

/* House labels: number, line icon, one word in small caps. */
.hc-houses { position:absolute; inset:0; z-index:4; pointer-events:none; }
.hc-h {
  position:absolute; left:calc(var(--x) * 100%); top:calc(var(--y) * 100%);
  transform:translate(-50%,-50%);
  display:flex; flex-direction:column; align-items:center; gap:8px;
  padding:8px 8px; border:0; border-radius:2px; background:none; cursor:pointer; pointer-events:auto;
  color:var(--ink-word); font:inherit; -webkit-tap-highlight-color:transparent;
  transition:color .18s ease;
}
.hc-h i { font:400 12px/1 'Noto Serif',Georgia,serif; font-style:normal; color:var(--muted); letter-spacing:.02em; font-variant-numeric:lining-nums; }
.hc-h svg { width:20px; height:20px; fill:none; stroke:currentColor; stroke-width:1.25; stroke-linecap:round; stroke-linejoin:round; }
.hc-h b { font:500 11px/1 var(--font-body); letter-spacing:.16em; text-transform:uppercase; white-space:nowrap; padding-left:.16em; }
html[data-lang="hi"] .hc-h b { font-size:13px; letter-spacing:.01em; padding-left:0; font-weight:600; text-transform:none; }
.hc-h.on, .hc-h:hover { color:var(--fg); }
.hc-h.on i { color:var(--fg); }
.hc-h:focus-visible { outline:1px solid var(--fg); outline-offset:4px; }
.hc-h[data-h="1"] i { color:var(--lagna); }

/* Positions as shares of the chart. Triangles sit at their centroids; the four
   diamonds keep clear of the words in the middle. */
.hc-h[data-h="1"]  { --x:.5;    --y:.115; }
.hc-h[data-h="2"]  { --x:.25;   --y:.085; }
.hc-h[data-h="3"]  { --x:.1;    --y:.25; }
.hc-h[data-h="4"]  { --x:.105;  --y:.5; }
.hc-h[data-h="5"]  { --x:.1;    --y:.75; }
.hc-h[data-h="6"]  { --x:.25;   --y:.915; }
.hc-h[data-h="7"]  { --x:.5;    --y:.9; }
.hc-h[data-h="8"]  { --x:.75;   --y:.915; }
.hc-h[data-h="9"]  { --x:.9;    --y:.75; }
.hc-h[data-h="10"] { --x:.895;  --y:.5; }
.hc-h[data-h="11"] { --x:.9;    --y:.25; }
.hc-h[data-h="12"] { --x:.75;   --y:.085; }

/* One line of benefit for the house in focus. */
.hc-cap {
  position:absolute; left:0; top:0; z-index:5; width:max-content; max-width:288px;
  padding:8px 12px; background:var(--bg); border:1px solid var(--line); border-radius:2px;
  font-size:13px; line-height:1.45; color:var(--fg2); text-align:center; text-wrap:balance;
  opacity:0; pointer-events:none; transition:opacity .18s ease;
}
.hc-cap.show { opacity:1; }
.hc-cap small { display:block; margin-bottom:2px; font:500 10px/1.6 var(--font-body); letter-spacing:.16em; text-transform:uppercase; color:var(--muted); }
html[data-lang="hi"] .hc-cap small { font-size:12px; letter-spacing:.02em; }

/* ---------- The words, centred in the inner diamond ---------- */
.hc-copy {
  position:absolute; left:50%; top:calc(50% - 12px); transform:translate(-50%,-50%); z-index:3;
  display:flex; flex-direction:column; align-items:center; text-align:center;
  /* A fixed box, so the web fonts arriving late cannot move the veil. */
  width:min(100%, 760px);
}
/* Paper veil: the chart's lines fade out behind the words. */
.hc-copy::before {
  content:''; position:absolute; z-index:-1; left:-13%; right:-13%; top:-26%; bottom:-26%;
  background:radial-gradient(closest-side,var(--bg) 66%,color-mix(in srgb,var(--bg) 75%,transparent) 84%,transparent 100%);
  pointer-events:none;
}
.hc-eyebrow { font:500 12px/16px var(--font-body); letter-spacing:.24em; text-transform:uppercase; color:var(--muted); padding-left:.24em; }
html[data-lang="hi"] .hc-eyebrow { font-size:14px; letter-spacing:.04em; padding-left:0; }
.hc-word, [data-theme] h1.hc-word {
  margin-top:24px;
  font-family:'Noto Serif',Georgia,serif; font-weight:700; text-transform:uppercase; white-space:nowrap;
  font-size:clamp(56px,6.4vw,96px); line-height:1; letter-spacing:-.005em;
  /* Ink in every theme. A narrow gold sheen (hero B's sweep) crosses it once
     on load and again on hover; at rest only the ink part of the gradient
     shows. site-theme.css paints h1 with the tint gradient; this replaces it. */
  color:var(--hc-ink,var(--fg)); -webkit-text-fill-color:transparent;
  background:linear-gradient(105deg,var(--hc-ink,var(--fg)) 0 46.5%,var(--sweep,var(--tint)) 50%,var(--hc-ink,var(--fg)) 53.5% 100%);
  background-size:260% 100%; background-position:100% 0;
  -webkit-background-clip:text; background-clip:text;
  margin-right:-.005em;
}
[data-theme$="dark"] .hc-word { --sweep:#FFE7A8; }
/* White·Light: the wordmark is the theme's orange (3.3:1, large text), with a gold sweep. */
[data-theme="white-light"] .hc-word { --hc-ink:var(--tint); --sweep:#F5B93A; }
[data-theme^="mono"] .hc-word { --sweep:color-mix(in srgb,var(--fg) 35%,var(--bg)); }
.hc-tag { margin-top:16px; font-family:var(--font-heading); font-weight:600; font-size:clamp(20px,1.9vw,28px); line-height:1.25; color:var(--fg2); letter-spacing:-.005em; }
html[data-lang="hi"] .hc-tag { letter-spacing:0; }
.hc-stores { display:flex; flex-wrap:wrap; gap:16px; justify-content:center; align-items:center; margin-top:40px; }
.hc-stores a { border-radius:12px; }
.hc-stores a:focus-visible { outline:2px solid var(--fg); outline-offset:4px; }
.hc-stat { margin-top:16px; min-height:16px; font-size:13px; line-height:16px; color:var(--muted); font-variant-numeric:tabular-nums; }
.hc-stat b { color:var(--fg2); font-weight:600; }
.hc-stat + .hc-note { margin-top:8px; }
/* Scroll cue: phones only (see the 768px block). */
.hc-cue { display:none; }
.hc-note { margin-top:16px; font-size:13px; line-height:16px; color:var(--muted); }
.hc-note a { color:var(--fg); text-underline-offset:3px; }
.hc-note a:focus-visible { outline:2px solid var(--fg); outline-offset:2px; border-radius:2px; }

/* ---------- Entrance: the chart draws itself, then the words arrive ---------- */
@media (prefers-reduced-motion:no-preference) {
    .hc-copy > * { animation:hc-up 1s var(--e) both; }
  .hc-copy > :nth-child(1) { animation-delay:0.4s; }
  .hc-copy > :nth-child(2) { animation-delay:0.48s; }
  .hc-copy > .hc-word { animation:hc-up 1s var(--e) .48s both, hc-sweep 1.6s cubic-bezier(.45,0,.25,1) 1.1s both; }
  .hc-copy > :nth-child(3) { animation-delay:0.6s; }
  .hc-copy > :nth-child(4) { animation-delay:0.68s; }
  .hc-copy > :nth-child(5) { animation-delay:0.76s; }
  .hc-copy > :nth-child(6) { animation-delay:0.84s; }
  .hc-copy > .hc-cue { animation:hc-in .8s ease 1.4s both, hc-bob 2.4s ease-in-out 2.2s infinite; }
  .hc-copy > .hc-cue.gone { animation:none; }
  /* House words wait for the chart to start drawing (hero-c.js adds .go). */
  html.js .hc-stage:not(.go) .hc-h { opacity:0; }
  .hc-stage.go .hc-h { animation:hc-in .8s var(--e) both; animation-delay:calc(1.5s + var(--n) * .07s); }
  .hc.paused, .hc.paused * { animation-play-state:paused !important; }
}
@keyframes hc-up { from { opacity:0; transform:translateY(8px); } to { opacity:1; transform:none; } }
@keyframes hc-sweep { from { background-position:100% 0; } to { background-position:0 0; } }
@media (prefers-reduced-motion:no-preference) and (max-width:768px) {
  .hc-sky .ring { animation:hc-spin 240s linear infinite; }
  .hc-sky .spin { animation:hc-spin var(--p) linear infinite; animation-delay:var(--d); }
  .hc-sky .spin.rev { animation-direction:reverse; }
  .hc-sky .up { animation:hc-spin var(--p) linear infinite reverse; animation-delay:var(--d); transform-box:fill-box; transform-origin:center; }
  .hc-sky .spin.rev .up { animation-direction:normal; }
}
.hc-sky .ring, .hc-sky .spin { transform-box:view-box; transform-origin:0 0; }
@keyframes hc-spin { to { transform:rotate(360deg); } }
@keyframes hc-bob { 0%,100% { transform:translateY(0); opacity:1; } 50% { transform:translateY(6px); opacity:.55; } }
@keyframes hc-in { from { opacity:0; } to { opacity:1; } }
.hc-h[data-h="1"] { --n:0; } .hc-h[data-h="2"] { --n:1; } .hc-h[data-h="3"] { --n:2; } .hc-h[data-h="4"] { --n:3; }
.hc-h[data-h="5"] { --n:4; } .hc-h[data-h="6"] { --n:5; } .hc-h[data-h="7"] { --n:6; } .hc-h[data-h="8"] { --n:7; }
.hc-h[data-h="9"] { --n:8; } .hc-h[data-h="10"] { --n:9; } .hc-h[data-h="11"] { --n:10; } .hc-h[data-h="12"] { --n:11; }

/* ---------- Narrow screens: words and badges first, a square chart below ---------- */
@media (max-width:980px) and (min-width:769px) {
  .hc-h b { font-size:10px; letter-spacing:.12em; }
  .hc-h svg { width:18px; height:18px; }
}
/* Phones: hero B's sky (zodiac ring, nine grahas) faint behind the words. */
.hc-sky { display:none; }
@media (max-width:768px) {
  /* Phones and tablets: the words only, centred, no chart. The block is a
     little shorter than the screen so the next section follows on. */
  .hc { --hc-nav:72px; width:auto; height:auto; padding:0 var(--gutter); }
  .hc-copy { position:relative; left:auto; top:auto; transform:none; width:auto; justify-content:center;
    min-height:calc(100vh - var(--hc-nav)); min-height:calc(100svh - var(--hc-nav)); padding:80px 0; }
  .hc-copy::before { display:none; }
  .hc-stage, .hc-cap { display:none; }
  .hc { position:relative; }
  .hc-copy { z-index:1; }
  .hc-sky {
    display:block; position:absolute; left:50%; top:50%; z-index:0; pointer-events:none;
    width:min(calc(100vw - 8px), 560px); aspect-ratio:1; transform:translate(-50%,-50%);
    opacity:.14; color:var(--fg);
  }
  [data-theme$="dark"] .hc-sky { opacity:.2; filter:drop-shadow(0 0 3px color-mix(in srgb,var(--tint) 45%,transparent)); }
  .hc-sky svg { width:100%; height:100%; overflow:visible; }
  .hc-sky .rc, .hc-sky .orb { fill:none; stroke:currentColor; stroke-width:.25; }
  .hc-sky .orb { stroke-width:.18; stroke-dasharray:.6 1.6; }
  .hc-sky .div, .hc-sky .tick { stroke:currentColor; stroke-width:.25; }
  .hc-sky text { fill:currentColor; font:6px/1 'Noto Sans Symbols','Noto Sans Symbols 2','Segoe UI Symbol','Apple Symbols',sans-serif; text-anchor:middle; dominant-baseline:central; }
  .hc-sky .gl path, .hc-sky .gl circle { fill:none; stroke:currentColor; stroke-width:1.9; stroke-linecap:round; stroke-linejoin:round; }
  .hc-sky .gl .f { fill:currentColor; stroke:none; }
  .hc-sky .su { color:var(--tint); }
  .hc-cue {
    display:grid; place-items:center; position:absolute; left:50%; bottom:16px; width:44px; height:44px; margin-left:-22px;
    border:0; border-radius:50%; background:none; color:var(--fg2); cursor:pointer; -webkit-tap-highlight-color:transparent;
    transition:opacity .3s ease;
  }
  .hc-cue svg { width:24px; height:24px; fill:none; stroke:currentColor; stroke-width:1.5; stroke-linecap:round; stroke-linejoin:round; }
  .hc-cue:focus-visible { outline:2px solid var(--fg); outline-offset:2px; }
  .hc-cue.gone { opacity:0; pointer-events:none; }
  .hc-word, [data-theme] h1.hc-word { margin-top:16px; font-size:clamp(36px,11vw,72px); }
  .hc-tag { margin-top:8px; }
  .hc-stores { margin-top:32px; gap:12px; }
}
@media (max-width:580px) { .hc { --hc-nav:62px; } }
@media (max-width:380px) {
  .hc .play-badge img { height:50px; }
  .hc .store-badge { height:50px; min-width:0; padding:0 14px; }
}