/* The landing page's cards (windows.js): the chart page's real parts, each in its own window. */

/* word-roll: a line rises into its own window (the house text effect). The window reaches a little past the line
   for swashes and descenders; the text waits far enough below (or leaves far enough above) to be out of it. */
.rl { display: block; clip-path: inset(-0.4em -3em -0.45em -3em); }
.rl > span { display: inline-block; transform: translateY(165%); transition: transform 1.05s cubic-bezier(0.16, 1, 0.3, 1) calc(var(--d, 0s) + var(--i, 0) * 0.09s); }
.win.rolled .win-body .rl > span { transform: none; }

/* solid near-black (round 3; Mukul took the glass off). The landing draws a living sky inside each card (home.html). */
.win { position: relative; border-radius: 16px; overflow: hidden;
  background: color-mix(in oklab, var(--black) 96%, var(--bone));
  border: 1px solid rgb(var(--bone-rgb) / 0.13);
  box-shadow: 0 60px 140px -50px rgb(0 0 0 / 0.9), inset 0 1px 0 rgb(var(--bone-rgb) / 0.06); }
.win-bar { display: flex; align-items: center; justify-content: space-between; gap: 16px; padding: 12px 20px; border-bottom: 1px solid rgb(var(--bone-rgb) / 0.1); }
.win-t { font: 600 11px var(--font-panel); letter-spacing: 0.2em; text-transform: uppercase; color: var(--bone); }
.win-s { font: 500 11px var(--font-panel); letter-spacing: 0.16em; text-transform: uppercase; color: rgb(var(--bone-rgb) / 0.45); white-space: nowrap; }
.win-body { padding: calc(24 * var(--u)) calc(28 * var(--u)) calc(26 * var(--u)); }
.win .mc-head { display: none; }                 /* the card's bar names it */
.win .dr-hint, .win .dr-ana { display: none; }   /* nobody is dragging: the ruler plays by itself */
.win .wt-lede { font-size: clamp(15px, 1.15vw, 19px); }

/* D1: the lines draw, the signs settle, the planets arrive house by house */
.win .d1 { display: grid; place-items: center; width: 100%; }
.win .d1 svg { width: min(100%, 460px); height: auto; }
.d1 .k-line { stroke-dasharray: 2; stroke-dashoffset: 2;   /* > 1: the lines keep a screen-pixel width (non-scaling-stroke), so the dash is measured on screen; 2 covers a chart drawn up to twice its viewBox */
  transition: stroke-dashoffset 1.6s cubic-bezier(0.65, 0, 0.35, 1); }
.d1.on .k-line { stroke-dashoffset: 0; }
.d1 .k-sign { opacity: 0; transition: opacity 0.6s ease 1.1s; }
.d1.on .k-sign { opacity: 1; }
.d1 .k-chip { opacity: 0; transform: translateY(6px); transform-box: fill-box;
  transition: opacity 0.5s ease calc(1.5s + var(--i, 0) * 130ms), transform 0.5s cubic-bezier(0.22, 1, 0.3, 1) calc(1.5s + var(--i, 0) * 130ms); }
.d1.on .k-chip { opacity: 1; transform: none; }

/* Birth: the chart page's overview */
.bt-when { margin: 0; font: 500 12px var(--font-panel); letter-spacing: 0.14em; text-transform: uppercase; color: rgb(var(--bone-rgb) / 0.7); }
.bt-sign { display: grid; justify-items: start; margin: 18px 0 8px; }
.bt-sign .rl { font-size: clamp(56px, 5.4vw, 92px); }   /* the size on the roll window itself, so its em leaves room for the swash */
.bt-name { font-family: "altesse-std-64pt", var(--font-title); line-height: 1.1; padding-right: 0.2em; }
.bt-k { font: 500 11px var(--font-panel); letter-spacing: 0.16em; text-transform: uppercase; color: rgb(var(--bone-rgb) / 0.5); }
.bt-cols { display: grid; grid-template-columns: 1fr 1fr; gap: 26px; margin-top: 16px; }
.bt-cols h4 { margin: 0 0 6px; font: 600 12px var(--font-panel); letter-spacing: 0.16em; text-transform: uppercase; color: var(--bone); padding-bottom: 8px; border-bottom: 1px solid rgb(var(--bone-rgb) / 0.16); }
.bt-row { display: grid; gap: 2px; padding: 9px 0; border-bottom: 1px solid rgb(var(--bone-rgb) / 0.08); }
.bt-row .rl > span { font-family: var(--font-prose); font-size: clamp(16px, 1.2vw, 19px); color: var(--bone); }

/* Birth chart: one strip, the birth details and panchang, then the D1 chart; the film pans it (no zoom: Mukul) */
.win[data-win="chart"] .win-body { padding: 0; }
.bc-strip { display: flex; width: 200%; height: 100%; transition: transform 1.4s cubic-bezier(0.65, 0, 0.35, 1); }
.bc-strip.to-d1 { transform: translateX(-50%); }
.bc-info, .bc-d1 { flex: 0 0 50%; box-sizing: border-box; padding: calc(22 * var(--u)) calc(28 * var(--u)); }
.bc-info { display: grid; grid-template-columns: minmax(0, 0.85fr) minmax(0, 1.15fr); grid-template-rows: auto auto; column-gap: calc(34 * var(--u)); align-content: center; }
.bc-info .bt-when { grid-column: 1; grid-row: 1; }
.bc-info .bt-sign { grid-column: 1; grid-row: 2; align-self: start; }
.bc-info .bt-sign .rl { font-size: clamp(44px, 4vw, 72px); }
.bc-info .bt-cols { grid-column: 2; grid-row: 1 / span 2; margin-top: 0; }
.bc-d1 { display: grid; place-items: center; }
.bc-d1 .d1 svg { width: min(100%, calc(var(--ch, 100vw) - 41px - 44 * var(--u))); }   /* the chart as tall as its card allows: the card's height less its bar and padding (Mukul: bigger) */
.win-s .rl > span { transition-duration: 0.6s; }
.win-s .rl.in > span { transform: none; }
.win-s .rl.out > span { transform: translateY(-165%); }

@media (prefers-reduced-motion: reduce) { .d1 .k-line, .d1 .k-sign, .d1 .k-chip, .rl > span, .bc-strip { transition: none; } }
/* phones: the bar keeps its title on one line */
@media (max-width: 600px) { .win-s { display: none; } .bt-cols { grid-template-columns: 1fr; } .bc-info { display: block; }
  .win-t, .bt-k { font-size: 12px; }   /* a phone: no text under 12px */
  .win .sx-num { display: none; }   /* the strength's % says it; the raw numbers would run past the screen */
  .win .dr-today, .win .dr-zoom button { position: relative; }   /* the dasha's controls: a finger's height to tap, drawn as they are */
  .win .dr-today::after, .win .dr-zoom button::after { content: ''; position: absolute; inset: -7px 0; } }