/* =====================================================================
   Taleyin Xəritəsi / Map of Destiny — app.css

   Visual identity carried over from v1 unchanged: brass astrolabe,
   ink-navy + parchment, Playfair Display / Work Sans / IBM Plex Mono.
   New in v2: the astrolabe hero + its entrance animation.
   ===================================================================== */

:root {
  --ink: #150F2E;
  --parchment: #EFE7F7;
  --brass: #E8C468;
  --oxblood: #E38FA3;
  --slate: #B3A6D6;
  --ink-text: #EFE7F7;

  --bg: #150F2E;
  --surface: #20173F;
  --surface-2: #291E4E;
  --text: #EFE7F7;
  --text-muted: #B3A6D6;
  --accent: #E8C468;
  --accent-2: #E38FA3;
  --border: #3D3170;

  --font-display: "Playfair Display", Georgia, serif;
  --font-body: "Work Sans", system-ui, -apple-system, sans-serif;
  --font-mono: "IBM Plex Mono", ui-monospace, monospace;

  --radius: 3px;
  --intro-total: 2600ms;
}

* { box-sizing: border-box; }

html, body { background: var(--bg); }

body {
  margin: 0;
  color: var(--text);
  font-family: var(--font-body);
  line-height: 1.55;
  padding-inline: 16px;
  -webkit-font-smoothing: antialiased;
}

#app {
  max-width: 880px;
  margin-inline: auto;
  padding-block: 24px 56px;
}

h1, h2, h3 {
  font-family: var(--font-display);
  font-weight: 700;
  margin: 0 0 .4em;
  text-wrap: balance;
}
h1 { font-size: clamp(2rem, 6vw, 3.1rem); letter-spacing: -.01em; }
h2 { font-size: clamp(1.3rem, 3.6vw, 1.75rem); }
h3 { font-size: 1.05rem; letter-spacing: .04em; text-transform: uppercase;
     font-family: var(--font-body); font-weight: 600; color: var(--text-muted); }

p { max-width: 62ch; }
.mono { font-family: var(--font-mono); font-variant-numeric: tabular-nums; }

/* ---------------------------------------------------------------- topbar */
.topbar {
  display: flex; flex-wrap: wrap; align-items: center;
  justify-content: space-between; gap: .75rem;
  margin-block-end: 1.25rem;
}
.app-name {
  font-family: var(--font-display); font-weight: 700; font-size: .95rem;
  letter-spacing: .02em; color: var(--text-muted);
}
.lang-switch { display: flex; gap: .35rem; flex-wrap: wrap; justify-content: flex-end; max-width: 15rem; }
.lang-chip {
  font-family: var(--font-mono); font-size: .72rem; letter-spacing: .05em;
  padding: .3rem .6rem; background: transparent; color: var(--text-muted);
  border: 1px solid var(--border); border-radius: 2px; cursor: pointer;
}
.lang-chip:hover { border-color: var(--accent); color: var(--accent); }
.lang-chip[aria-pressed="true"] {
  color: var(--bg); background: var(--accent); border-color: var(--accent);
}

/* ------------------------------------------------------------------ hero */
.hero {
  display: flex; flex-direction: column; align-items: center;
  text-align: center; gap: .5rem; padding-block: 1rem 1.5rem;
}
.astrolabe-stage {
  width: min(340px, 78vw);
  aspect-ratio: 1;
  position: relative;
  transform-origin: center center;
  will-change: transform;
}
.astrolabe { width: 100%; height: 100%; display: block; overflow: visible; }
.hero-copy .tagline {
  color: var(--text-muted); font-size: 1.02rem; margin: .2rem auto 0;
  max-width: 34ch;
}

/* astrolabe parts — SETTLED state is the default, so a repeat visit or a
   reduced-motion visitor sees the finished instrument with no motion at all. */
.astrolabe .ring {
  fill: none; stroke: var(--accent); stroke-width: 1.4;
  stroke-dasharray: var(--circ); stroke-dashoffset: 0;
}
.astrolabe .ring-mid { stroke-width: 1; opacity: .85; }
.astrolabe .ring-inner { stroke-width: .8; opacity: .55; }
.astrolabe .glow { opacity: .5; }
.astrolabe .tick { stroke: var(--accent); stroke-width: 1; opacity: .55; }
.astrolabe .tick-major { stroke-width: 1.6; opacity: .9; }
.astrolabe .glyph {
  fill: var(--accent);
  font-family: "Segoe UI Symbol", "Apple Symbols", "Noto Sans Symbols 2", var(--font-body), sans-serif;
  font-size: 17px; text-anchor: middle; dominant-baseline: central;
  opacity: 1; transform-box: fill-box; transform-origin: center;
}
.astrolabe .needle { stroke: var(--accent); stroke-width: 1.6; stroke-linecap: round; }
.astrolabe .needle-tail { stroke-width: 1; opacity: .5; }
.astrolabe .needle-head { fill: var(--accent); }
.astrolabe .alidade { transform-origin: 210px 210px; transform: rotate(0deg); }
.astrolabe .hub { fill: var(--bg); stroke: var(--accent); stroke-width: 1.4; }
.astrolabe .hub-dot { fill: var(--accent); }

/* --------------------------------------------------------------- divider */
.divider {
  position: relative; height: 1px; background: var(--border);
  margin-block: 2rem 2.25rem;
}
.divider::after {
  content: ""; position: absolute; left: 50%; top: 50%;
  width: 7px; height: 7px; background: var(--accent);
  transform: translate(-50%, -50%) rotate(45deg);
}

/* ---------------------------------------------------------------- panels */
.panel {
  background: var(--surface); border: 1px solid var(--border);
  border-radius: var(--radius); padding: clamp(1rem, 3.5vw, 1.75rem);
  margin-block-end: 1.5rem;
}
.panel > h3 { margin-block-start: 1.75rem; }
.panel > h3:first-of-type { margin-block-start: 1rem; }

/* ----------------------------------------------------------------- forms */
.field { margin-block-end: 1rem; position: relative; }
.field-row { display: flex; gap: 1rem; flex-wrap: wrap; }
.field-row .field { flex: 1 1 180px; }

label {
  display: block; font-size: .82rem; font-weight: 600;
  letter-spacing: .03em; color: var(--text-muted); margin-block-end: .35rem;
}
input[type="text"], input[type="date"], input[type="time"] {
  width: 100%; padding: .6rem .7rem; font: inherit; font-size: .98rem;
  color: var(--text); background: var(--bg);
  border: 1px solid var(--border); border-radius: 2px;
}
input:focus-visible, button:focus-visible, .city-results li:focus-visible {
  outline: 2px solid var(--accent); outline-offset: 2px;
}
input:disabled { opacity: .45; cursor: not-allowed; }

.check {
  display: flex; align-items: center; gap: .5rem;
  font-size: .9rem; font-weight: 500; color: var(--text);
  margin-block-end: 1.1rem; cursor: pointer; text-transform: none; letter-spacing: 0;
}
.check input { width: 1rem; height: 1rem; accent-color: var(--accent); }

.city-results {
  list-style: none; margin: .3rem 0 0; padding: 0;
  border: 1px solid var(--border); border-radius: 2px;
  background: var(--bg); max-height: 240px; overflow-y: auto;
}
.city-results li {
  padding: .55rem .7rem; cursor: pointer; font-size: .92rem;
  border-block-end: 1px solid var(--border);
}
.city-results li:last-child { border-block-end: 0; }
.city-results li:hover, .city-results li[aria-selected="true"] { background: var(--surface-2); }
.city-results .cr-sub { display: block; font-size: .78rem; color: var(--text-muted); }
.city-results .cr-empty { cursor: default; color: var(--text-muted); }

.chosen-city {
  margin: .45rem 0 0; font-size: .8rem; color: var(--accent);
}
.chosen-city::before { content: "◆ "; }

.form-error {
  color: var(--accent-2); font-size: .88rem; font-weight: 600;
  margin-block: .5rem;
}

/* --------------------------------------------------------------- buttons */
.btn {
  font: inherit; font-weight: 600; letter-spacing: .02em;
  padding: .7rem 1.4rem; border-radius: 2px; cursor: pointer;
  border: 1px solid var(--accent);
}
.btn-primary { background: var(--accent); color: var(--ink); }
.btn-primary:hover:not(:disabled) { filter: brightness(1.08); }
.btn-ghost { background: transparent; color: var(--accent); }
.btn-ghost:hover { background: var(--surface-2); }
.btn:disabled { opacity: .5; cursor: not-allowed; }

/* --------------------------------------------------------------- results */
.chips { display: flex; flex-wrap: wrap; gap: .75rem; margin-block-end: 1rem; }
.chip {
  flex: 1 1 150px; border: 1px solid var(--border); border-radius: 2px;
  padding: .7rem .85rem; background: var(--bg);
}
.chip .chip-label {
  display: block; font-size: .72rem; letter-spacing: .07em;
  text-transform: uppercase; color: var(--text-muted);
}
.chip .chip-value {
  display: block; font-family: var(--font-display); font-weight: 700;
  font-size: 1.3rem; color: var(--text); line-height: 1.25;
}
.chip .chip-deg {
  display: block; font-family: var(--font-mono); font-size: .78rem;
  color: var(--accent);
}
.chip.chip-unknown .chip-value { font-size: 1rem; color: var(--text-muted); font-style: italic; }

.note {
  font-size: .85rem; color: var(--text-muted); font-style: italic;
  border-inline-start: 2px solid var(--accent); padding-inline-start: .7rem;
  margin-block: .75rem;
}

.table-wrap { overflow-x: auto; }
table.placements { width: 100%; border-collapse: collapse; font-size: .92rem; }
table.placements th, table.placements td {
  text-align: start; padding: .45rem .6rem;
  border-block-end: 1px solid var(--border); white-space: nowrap;
}
table.placements th {
  font-size: .72rem; letter-spacing: .07em; text-transform: uppercase;
  color: var(--text-muted); font-weight: 600;
}
table.placements td.deg, table.placements td.house {
  font-family: var(--font-mono); font-variant-numeric: tabular-nums;
  color: var(--accent);
}

.ai-block p, .report-body p { margin-block: 0 1rem; }
.loading {
  color: var(--accent); font-style: italic;
  animation: pulse 1.6s ease-in-out infinite;
}
.loading::before{content:"✦";display:inline-block;margin-right:.65rem;font-style:normal;animation:oracleSpin 2.2s linear infinite}
@keyframes oracleSpin{to{transform:rotate(360deg)}}
@keyframes pulse { 0%, 100% { opacity: 1; } 50% { opacity: .45; } }

/* --------------------------------------------------------------- premium */
.panel.premium { border-color: var(--accent); border-width: 2px; }
.test-mode {
  background: var(--surface-2); border: 1px dashed var(--accent);
  border-radius: 2px; padding: .7rem .85rem; font-size: .9rem;
  font-weight: 600; color: var(--text); max-width: none;
}
.price {
  font-size: 1.6rem; font-weight: 600; color: var(--accent);
  margin-block: .75rem;
}
.pay-options {
  display: flex; align-items: center; gap: .9rem; flex-wrap: wrap;
}
.pay-or { color: var(--text-muted); font-size: .85rem; }

.site-footer { margin-block-start: 2rem; text-align: center; }
.disclaimer { font-size: .78rem; color: var(--text-muted); margin-inline: auto; }
.footer-mark{color:rgba(232,196,104,.5);font:600 .68rem var(--font-mono);letter-spacing:.24em}

/* =====================================================================
   ENTRANCE ANIMATION
   ---------------------------------------------------------------------
   Everything here is gated on `html.intro-playing`, which intro.js stamps on
   before first paint and removes when the sequence ends or is skipped. With
   the class absent the astrolabe above is already in its settled state, so
   repeat visitors and reduced-motion visitors get no motion whatsoever and
   there is nothing to "finish".
   ===================================================================== */

#intro-backdrop {
  display: none;
  position: fixed; inset: 0; z-index: 90;
  background: radial-gradient(ellipse at 50% 45%, #241B4A 0%, #150F2E 70%, #0A0718 100%);
}
#intro-story{display:none;position:relative;z-index:121;width:min(720px,calc(100% - 36px));margin:auto;padding:clamp(28px,5vw,58px);text-align:center;border:1px solid rgba(232,196,104,.32);border-radius:28px;background:radial-gradient(circle at 50% 0,rgba(115,69,168,.32),transparent 48%),rgba(14,9,30,.82);box-shadow:0 28px 90px rgba(0,0,0,.45),inset 0 0 50px rgba(164,102,221,.06);backdrop-filter:blur(14px)}
#intro-story .intro-story-mark{display:block;color:#e8c468;font:700 .76rem var(--font-mono);letter-spacing:.24em;animation:story-rise .8s ease-out both}
.story-orbit{position:relative;width:132px;height:132px;margin:0 auto 18px;filter:drop-shadow(0 0 24px rgba(205,156,255,.28));animation:story-rise .7s ease-out both}
.story-orbit-ring{position:absolute;inset:7px;border:1px solid rgba(232,196,104,.48);border-radius:50%;box-shadow:inset 0 0 18px rgba(232,196,104,.08)}
.story-orbit-ring:before,.story-orbit-ring:after{content:"";position:absolute;width:7px;height:7px;border-radius:50%;background:#e8c468;box-shadow:0 0 12px #e8c468}
.story-orbit-ring:before{left:12px;top:11px}.story-orbit-ring:after{right:10px;bottom:13px}
.story-orbit .ring-a{animation:orbit-spin 9s linear infinite}.story-orbit .ring-b{inset:23px;border-color:rgba(205,156,255,.48);animation:orbit-spin-reverse 6.5s linear infinite}.story-orbit .ring-b:before{background:#cd9cff;box-shadow:0 0 12px #cd9cff}.story-orbit .ring-b:after{display:none}
.story-core{position:absolute;inset:43px;display:grid;place-items:center;border:1px solid rgba(232,196,104,.7);border-radius:50%;color:#fff4cf;background:radial-gradient(circle,#6e4c91 0,#291941 55%,#120b25 100%);font:700 1.45rem var(--font-display);box-shadow:0 0 0 7px rgba(232,196,104,.05),0 0 28px rgba(232,196,104,.32);animation:core-pulse 2.8s ease-in-out infinite}
.story-symbol{position:absolute;color:#e8c468;text-shadow:0 0 12px currentColor;font-size:1rem;animation:symbol-float 3s ease-in-out infinite}.symbol-moon{left:-2px;top:52px}.symbol-star{right:3px;top:24px;animation-delay:-1s}.symbol-sun{right:16px;bottom:4px;color:#cd9cff;animation-delay:-2s}
#intro-story h2{margin:14px auto 15px;max-width:620px;color:#fff7e7;font:700 clamp(2.1rem,6vw,4.4rem)/1.06 var(--font-display);text-shadow:0 0 32px rgba(205,156,255,.3);animation:story-rise .9s .12s ease-out both}
#intro-story>p:not(.gate-step){max-width:610px;margin:0 auto 27px;color:#d2c7e4;font-size:clamp(.98rem,2vw,1.16rem);line-height:1.75;animation:story-rise .9s .25s ease-out both}
#intro-story .btn{animation:story-rise .9s .4s ease-out both}
html.story-gate-active{overflow:hidden}html.story-gate-active #intro-backdrop{display:flex}html.story-gate-active #intro-story{display:block}html.story-gate-active .astrolabe-stage{z-index:89!important;pointer-events:none!important}
@keyframes story-rise{from{opacity:0;transform:translateY(22px) scale(.98)}to{opacity:1;transform:none}}
@keyframes orbit-spin{to{transform:rotate(360deg)}}@keyframes orbit-spin-reverse{to{transform:rotate(-360deg)}}
@keyframes core-pulse{0%,100%{transform:scale(.94);box-shadow:0 0 0 7px rgba(232,196,104,.04),0 0 18px rgba(232,196,104,.2)}50%{transform:scale(1.04);box-shadow:0 0 0 11px rgba(232,196,104,.08),0 0 38px rgba(232,196,104,.48)}}
@keyframes symbol-float{0%,100%{transform:translateY(-3px);opacity:.65}50%{transform:translateY(5px);opacity:1}}
@media(max-width:620px){#intro-story{padding:30px 20px;border-radius:22px}#intro-story h2{font-size:2.35rem}#intro-story>p:not(.gate-step){line-height:1.6}}
@media(prefers-reduced-motion:reduce){.story-orbit,.story-orbit-ring,.story-core,.story-symbol,#intro-story .intro-story-mark,#intro-story h2,#intro-story>p:not(.gate-step),#intro-story .btn{animation:none!important}}
#intro-stars { position: absolute; inset: 0; overflow: hidden; }
#intro-stars i {
  position: absolute; display: block;
  width: 2px; height: 2px; border-radius: 50%;
  background: #F1E9FB; opacity: 0;
}

/* --- First-visit language gate ----------------------------------------
   Shown once, before the astrolabe reveal, whenever no language has been
   chosen yet (localStorage.txLang absent). Lives inside #intro-backdrop so
   it shares its full-screen night-sky ground, but its own visibility is
   keyed off `html.lang-gate-active` independently of `intro-playing` so it
   still appears for reduced-motion / repeat-ish edge cases (see the
   reduced-motion override below). */
#lang-gate {
  display: none;
  position: relative; z-index: 94;
  height: 100%; width: 100%;
  flex-direction: column; align-items: center; justify-content: center;
  gap: 1.6rem; padding: 1.5rem;
  text-align: center;
}
html.lang-gate-active #intro-backdrop { display: block; }
html.lang-gate-active #lang-gate { display: flex; }
html.service-gate-active #intro-backdrop{display:block}
html.service-gate-active #service-gate{display:flex}
/* The animated hero is lifted above the backdrop during the later ritual.
   While either choice screen is open it must stay underneath and never catch
   taps meant for a language or service card. */
html.lang-gate-active .astrolabe-stage,
html.service-gate-active .astrolabe-stage{z-index:89!important;pointer-events:none!important}
html.lang-gate-active #intro-stars,
html.service-gate-active #intro-stars{pointer-events:none}
html.lang-gate-active #lang-gate,
html.service-gate-active #service-gate{z-index:120;pointer-events:auto}
#lang-gate-title {
  font-family: var(--font-mono); font-size: .8rem; letter-spacing: .06em;
  color: #C9BEE0; margin: 0;
}
#lang-gate-grid {
  display: grid; grid-template-columns: repeat(3, minmax(9rem, 1fr));
  gap: .7rem; max-width: 40rem;
}
.lang-gate-btn {
  font-family: var(--font-display); font-size: 1rem;
  padding: .85rem 1rem; cursor: pointer;
  color: #F1E9FB; background: rgba(21, 15, 46, .55);
  border: 1px solid rgba(232, 196, 104, .35); border-radius: 4px;
  transition: transform .14s ease, border-color .14s ease, background .14s ease;
  text-decoration:none;
}
.lang-gate-btn:hover, .lang-gate-btn:focus-visible {
  border-color: #E8C468; background: rgba(232, 196, 104, .12);
  transform: translateY(-2px);
}
#service-gate{display:none;position:relative;z-index:94;height:100%;width:100%;flex-direction:column;align-items:center;justify-content:center;padding:24px;text-align:center;overflow:auto}
.gate-step{font:600 .72rem var(--font-mono);letter-spacing:.22em;color:#e8c468;margin:0 0 10px}
#service-gate-title{font-family:var(--font-display);font-size:clamp(2rem,5vw,4rem);margin:0;color:#f7f0ff;text-shadow:0 0 28px rgba(205,156,255,.35)}
#service-gate-subtitle{color:#c9bee0;margin:8px 0 24px}
#service-gate-grid{display:grid;grid-template-columns:repeat(4,minmax(150px,1fr));gap:12px;width:min(900px,100%)}
.service-gate-btn{min-height:128px;padding:18px 12px;color:#f7f0ff;background:linear-gradient(145deg,rgba(57,35,90,.85),rgba(21,15,46,.82));border:1px solid rgba(232,196,104,.3);border-radius:18px;cursor:pointer;transition:transform .25s ease,border-color .25s ease,box-shadow .25s ease}
.service-gate-btn{text-decoration:none;display:flex;flex-direction:column;align-items:center;justify-content:center}
.service-gate-btn span{display:block;font-size:2rem;color:#e8c468;margin-bottom:9px}.service-gate-btn b{font:600 1rem var(--font-display)}
.service-gate-btn:hover,.service-gate-btn:focus-visible{transform:translateY(-6px) scale(1.02);border-color:#e8c468;box-shadow:0 14px 35px rgba(0,0,0,.28),0 0 24px rgba(232,196,104,.12)}
#serviceBack{margin-top:20px;border:0;background:none;color:#c9bee0;cursor:pointer;padding:8px}
html.service-gate-active{overflow:hidden}
@media(max-width:760px){#service-gate{justify-content:flex-start;padding-top:8vh}#service-gate-grid{grid-template-columns:repeat(2,minmax(0,1fr))}.service-gate-btn{min-height:104px}}
@media (max-width: 480px) {
  #lang-gate-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}

#skipIntro {
  position: fixed; z-index: 95; inset-block-end: 1.5rem; inset-inline-end: 1.5rem;
  font: inherit; font-family: var(--font-mono); font-size: .72rem;
  letter-spacing: .12em; text-transform: uppercase;
  padding: .5rem .9rem; cursor: pointer;
  color: #E8C468; background: rgba(21, 15, 46, .6);
  border: 1px solid rgba(232, 196, 104, .5); border-radius: 2px;
}
#skipIntro:hover { color: #EFE7F7; border-color: #E8C468; }

html.intro-playing { overflow: hidden; }
html.lang-gate-active { overflow: hidden; }
html.intro-playing #intro-backdrop { display: block; }

/* The hero astrolabe is lifted above the backdrop and re-centred in the
   viewport by a transform intro.js measures at runtime (--intro-dx / --intro-dy
   / --intro-scale). It is the SAME element that later becomes the static hero
   art, so the sequence resolves INTO the hero rather than cutting to it. */
html.intro-playing .astrolabe-stage {
  z-index: 93;
  transform: translate(var(--intro-dx, 0px), var(--intro-dy, 0px)) scale(var(--intro-scale, 1));
}
html.intro-playing .astrolabe .ring,
html.intro-playing .astrolabe .tick,
html.intro-playing .astrolabe .glyph,
html.intro-playing .astrolabe .needle,
html.intro-playing .astrolabe .needle-head,
html.intro-playing .astrolabe .hub,
html.intro-playing .astrolabe .hub-dot,
html.intro-playing .astrolabe .glow {
  /* brass reads brighter against the near-black backdrop */
  stroke: #E8C468;
}
html.intro-playing .astrolabe .glyph,
html.intro-playing .astrolabe .needle-head,
html.intro-playing .astrolabe .hub-dot { fill: #E8C468; }
html.intro-playing .astrolabe .hub { fill: #150F2E; }

/* Everything else on the page waits, then arrives around the instrument. */
html.intro-playing .topbar,
html.intro-playing .hero-copy,
html.intro-playing .divider,
html.intro-playing #formSection,
html.intro-playing .site-footer { opacity: 0; }

/* --- Step 1: starfield ------------------------------------------------ */
html.intro-playing #intro-stars i {
  animation: star-in 900ms ease-out forwards;
  /* per-star delay is set inline by intro.js */
}
@keyframes star-in {
  from { opacity: 0; transform: scale(.4); }
  to   { opacity: var(--star-alpha, .75); transform: scale(1); }
}

/* --- Step 2: the rings trace themselves ------------------------------ */
html.intro-playing .astrolabe .glow { opacity: 0; animation: glow-in 900ms ease-out 1500ms forwards; }
@keyframes glow-in { from { opacity: 0; } to { opacity: .85; } }

html.intro-playing .astrolabe .ring {
  stroke-dashoffset: var(--circ);
  animation: ring-draw 760ms cubic-bezier(.4, 0, .2, 1) forwards;
}
html.intro-playing .astrolabe .ring-outer { animation-delay: 180ms; }
html.intro-playing .astrolabe .ring-mid   { animation-delay: 430ms; }
html.intro-playing .astrolabe .ring-inner { animation-delay: 620ms; animation-duration: 620ms; }
@keyframes ring-draw {
  from { stroke-dashoffset: var(--circ); }
  to   { stroke-dashoffset: 0; }
}

/* --- Step 3: ticks, then the 12 glyphs snap on in a stagger ---------- */
html.intro-playing .astrolabe .tick {
  opacity: 0;
  animation: tick-in 320ms ease-out forwards;
  /* per-tick delay set inline by intro.js */
}
@keyframes tick-in {
  from { opacity: 0; }
  to   { opacity: var(--tick-alpha, .55); }
}

html.intro-playing .astrolabe .glyph {
  opacity: 0;
  animation: glyph-pop 380ms cubic-bezier(.34, 1.56, .64, 1) forwards;
  /* per-glyph delay (~45ms apart) set inline by intro.js */
}
@keyframes glyph-pop {
  from { opacity: 0; transform: scale(.35); }
  60%  { opacity: 1; transform: scale(1.22); }
  to   { opacity: 1; transform: scale(1); }
}

/* --- Step 4: the alidade spins twice and settles pointing up --------- */
html.intro-playing .astrolabe .alidade {
  opacity: 0;
  animation: alidade-spin 1150ms cubic-bezier(.22, .9, .2, 1) 900ms forwards;
}
@keyframes alidade-spin {
  from { opacity: 0; transform: rotate(-140deg); }
  12%  { opacity: 1; }
  to   { opacity: 1; transform: rotate(720deg); }
}
html.intro-playing .astrolabe .hub,
html.intro-playing .astrolabe .hub-dot {
  opacity: 0; animation: hub-in 420ms ease-out 900ms forwards;
}
@keyframes hub-in { from { opacity: 0; } to { opacity: 1; } }

/* --- Step 5: hold, then the page arrives ----------------------------- */
html.intro-playing .topbar     { animation: content-in 620ms ease-out 2150ms forwards; }
html.intro-playing .hero-copy  { animation: content-in 620ms ease-out 2080ms forwards; }
html.intro-playing .divider    { animation: content-in 620ms ease-out 2230ms forwards; }
html.intro-playing #formSection{ animation: content-in 620ms ease-out 2300ms forwards; }
html.intro-playing .site-footer{ animation: content-in 620ms ease-out 2380ms forwards; }
@keyframes content-in {
  from { opacity: 0; transform: translateY(14px); }
  to   { opacity: 1; transform: translateY(0); }
}

/* The instrument travels back down into its hero slot, and the night sky
   dissolves behind it. Driven by intro.js (Web Animations API) so it can be
   measured against the element's real layout position. */
#intro-backdrop.intro-dissolving { transition: opacity 620ms ease-out; opacity: 0; }

/* Sections that appear later (results, premium, report) get a soft entrance
   independent of the intro — see `.panel.reveal` in the new animations
   section below, which replaces this with `panel-materialize`. */

/* ------------------------------------------------------------------------
   AMBIENT + INTERACTION ANIMATIONS (v4 — Mystic Night rebrand)
   ------------------------------------------------------------------------ */

/* ------------------------------------------------- ambient starfield */
/* A permanent, subtle star field behind every page (not just the one-time
   entrance sequence) — pure CSS, no markup or JS needed. Sits behind all
   content (z-index -1) and behind the one-time #intro-backdrop (z-index 90)
   during the intro, so it never visually competes with anything. */
body {
  position: relative;
}
body::before {
  content: "";
  position: fixed;
  inset: 0;
  z-index: -1;
  pointer-events: none;
  background-image:
    radial-gradient(1.6px 1.6px at 20% 30%, rgba(239,231,247,.55) 50%, transparent 51%),
    radial-gradient(1.2px 1.2px at 65% 12%, rgba(232,196,104,.5) 50%, transparent 51%),
    radial-gradient(1.4px 1.4px at 85% 55%, rgba(239,231,247,.4) 50%, transparent 51%),
    radial-gradient(1px 1px at 35% 70%, rgba(232,196,104,.4) 50%, transparent 51%),
    radial-gradient(1.6px 1.6px at 50% 88%, rgba(239,231,247,.35) 50%, transparent 51%),
    radial-gradient(1px 1px at 10% 90%, rgba(239,231,247,.4) 50%, transparent 51%),
    radial-gradient(1.3px 1.3px at 92% 25%, rgba(239,231,247,.45) 50%, transparent 51%),
    radial-gradient(1px 1px at 45% 40%, rgba(232,196,104,.35) 50%, transparent 51%);
  background-repeat: repeat;
  background-size: 340px 340px;
  animation: starfield-drift 140s linear infinite;
  opacity: .8;
}
@keyframes starfield-drift {
  from { background-position: 0 0; }
  to   { background-position: -340px 680px; }
}

/* --------------------------------------------------- card/result reveal */
@keyframes panel-materialize {
  from { opacity: 0; transform: translateY(18px) scale(.98); }
  60%  { opacity: 1; }
  to   { opacity: 1; transform: translateY(0) scale(1); }
}
.panel.reveal { animation: panel-materialize 620ms cubic-bezier(.22,.9,.3,1) both; }

@keyframes card-in {
  from { opacity: 0; transform: translateY(14px); }
  to   { opacity: 1; transform: translateY(0); }
}
.numcards .numcard,
.pairgrid .personcard,
.timeline .stage,
.signgrid .signchip,
.chips .chip {
  animation: card-in 460ms ease-out both;
}
.numcards .numcard:nth-child(1),  .pairgrid .personcard:nth-child(1),  .timeline .stage:nth-child(1),  .signgrid .signchip:nth-child(1),  .chips .chip:nth-child(1)  { animation-delay: 0ms; }
.numcards .numcard:nth-child(2),  .pairgrid .personcard:nth-child(2),  .timeline .stage:nth-child(2),  .signgrid .signchip:nth-child(2),  .chips .chip:nth-child(2)  { animation-delay: 60ms; }
.numcards .numcard:nth-child(3),  .timeline .stage:nth-child(3),  .signgrid .signchip:nth-child(3),  .chips .chip:nth-child(3)  { animation-delay: 120ms; }
.numcards .numcard:nth-child(4),  .timeline .stage:nth-child(4),  .signgrid .signchip:nth-child(4)  { animation-delay: 180ms; }
.signgrid .signchip:nth-child(5)  { animation-delay: 240ms; }
.signgrid .signchip:nth-child(6)  { animation-delay: 300ms; }
.signgrid .signchip:nth-child(7)  { animation-delay: 360ms; }
.signgrid .signchip:nth-child(8)  { animation-delay: 420ms; }
.signgrid .signchip:nth-child(9)  { animation-delay: 480ms; }
.signgrid .signchip:nth-child(10) { animation-delay: 540ms; }
.signgrid .signchip:nth-child(11) { animation-delay: 600ms; }
.signgrid .signchip:nth-child(12) { animation-delay: 660ms; }

/* Tarot cards get their own flip-in instead of the generic card-in. */
.spread { perspective: 900px; }
@keyframes card-flip-in {
  from { opacity: 0; transform: rotateY(-90deg) scale(.85); }
  to   { opacity: 1; transform: rotateY(0deg) scale(1); }
}
.spread .tarot-card {
  animation: card-flip-in 520ms cubic-bezier(.22,.9,.3,1) both;
  transform-style: preserve-3d;
}
.spread .tarot-card:nth-child(1) { animation-delay: 0ms; }
.spread .tarot-card:nth-child(2) { animation-delay: 160ms; }
.spread .tarot-card:nth-child(3) { animation-delay: 320ms; }

/* --------------------------------------------------- hover/press micro-interactions */
.btn-primary, .btn-ghost {
  transition: transform .16s ease, box-shadow .16s ease, filter .16s ease;
}
.btn-primary:hover:not(:disabled) {
  transform: translateY(-1px);
  box-shadow: 0 0 0 3px rgba(232,196,104,.22), 0 6px 20px rgba(232,196,104,.28);
}
.btn-primary:active:not(:disabled) { transform: translateY(0) scale(.97); }
.btn-ghost:hover { transform: translateY(-1px); }

.numcard, .tarot-card, .personcard, .chip, .signchip {
  transition: transform .18s ease, border-color .18s ease, box-shadow .18s ease;
}
.numcard:hover, .personcard:hover, .chip:hover {
  transform: translateY(-3px);
  border-color: var(--accent);
  box-shadow: 0 8px 22px rgba(0,0,0,.35);
}
.tarot-card:hover {
  transform: translateY(-3px) rotateY(0deg);
  border-color: var(--accent);
  box-shadow: 0 8px 22px rgba(0,0,0,.35);
}
.toolnav-link { transition: transform .14s ease, border-color .14s ease, color .14s ease, background .14s ease; }
.toolnav-link:hover { transform: translateY(-1px); }

/* ------------------------------------------------------- reduced motion */
@media (prefers-reduced-motion: reduce) {
  /* Belt and braces: intro.js already refuses to start, but if the OS setting
     is flipped mid-session nothing here may move. */
  html.intro-playing:not(.lang-gate-active) #intro-backdrop { display: none; }
  html.intro-playing .astrolabe-stage { transform: none; }
  body::before { animation: none; }
  html.intro-playing .topbar,
  html.intro-playing .hero-copy,
  html.intro-playing .divider,
  html.intro-playing #formSection,
  html.intro-playing .site-footer { opacity: 1; }
  *, *::before, *::after {
    animation-duration: .001ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: .001ms !important;
    scroll-behavior: auto !important;
  }
}

/* =====================================================================
   v3 — the six additional tools.

   Appended, not interleaved: nothing above this line was edited, so the
   birth-chart page renders exactly as it did before. Every rule here is
   scoped to a class that only the new pages (or the shared nav) use.
   ===================================================================== */

/* ------------------------------------------------------------- tool nav */
.toolnav { margin-block-end: 1.5rem; }
.toolnav ul {
  display: flex; flex-wrap: wrap; gap: .4rem;
  list-style: none; margin: 0; padding: 0;
}
.toolnav-link {
  display: inline-block; text-decoration: none;
  font-size: .78rem; letter-spacing: .02em; font-weight: 500;
  padding: .35rem .7rem; border-radius: 2px;
  border: 1px solid var(--border); color: var(--text-muted);
  background: transparent;
}
.toolnav-link:hover { border-color: var(--accent); color: var(--accent); }
.toolnav-link.is-current {
  border-color: var(--accent); color: var(--accent);
  background: var(--surface-2); font-weight: 600;
}

.tool-intro { color: var(--text-muted); }

/* A disclaimer that must not be skimmed past. Used twice on family.php. */
.disclaimer-strong {
  border: 1px solid var(--accent-2); border-inline-start-width: 4px;
  border-radius: 2px; background: var(--surface-2);
  padding: .75rem .9rem; margin-block: 1rem;
  font-size: .9rem; font-weight: 600; color: var(--text); max-width: none;
}
.family-map-builder{margin:26px 0;padding:20px;border:1px solid rgba(232,196,104,.22);border-radius:22px;background:linear-gradient(145deg,rgba(84,48,112,.18),rgba(11,7,25,.35))}
.family-map-builder h2{margin-top:0}.family-map-controls{display:grid;grid-template-columns:1.35fr auto auto;gap:10px;align-items:end;margin-bottom:16px}.family-map-controls .field{margin:0}.family-map-controls .btn{white-space:nowrap}.relation-field{grid-column:1/-1;margin-top:8px!important}.relation-title{display:block;margin-bottom:9px;color:#e8c468;font:600 .75rem var(--font-mono);letter-spacing:.08em;text-transform:uppercase}
.relation-picker{display:grid;grid-template-columns:repeat(5,minmax(0,1fr));gap:8px}.relation-choice{min-height:70px;padding:9px 7px;border:1px solid rgba(255,255,255,.13);border-radius:13px;background:rgba(255,255,255,.035);color:#d8cfe5;cursor:pointer;font:500 .75rem var(--font-body);transition:transform .2s ease,border-color .2s ease,background .2s ease,box-shadow .2s ease}.relation-choice i{display:block;font-style:normal;font-size:1.25rem;margin-bottom:5px}.relation-choice:hover:not(:disabled){transform:translateY(-3px)}.relation-choice:disabled{opacity:.32;cursor:not-allowed}.relation-choice.is-active{transform:translateY(-3px);color:#fff;box-shadow:0 8px 22px rgba(0,0,0,.25)}
.relation-close.is-active{border-color:#e8c468;background:rgba(232,196,104,.15);box-shadow:0 0 20px rgba(232,196,104,.15)}.relation-close i{color:#e8c468}.relation-tense.is-active{border-color:#e07178;background:rgba(224,113,120,.15)}.relation-tense i{color:#e07178}.relation-distant.is-active{border-color:#6f9fd4;background:rgba(111,159,212,.14)}.relation-distant i{color:#86baf1}.relation-protective.is-active{border-color:#85c6aa;background:rgba(133,198,170,.14)}.relation-protective i{color:#85c6aa}.relation-unspoken.is-active{border-color:#aa82cf;background:rgba(170,130,207,.15)}.relation-unspoken i{color:#c39ae8}
.family-stage{position:relative;height:430px;border:1px solid rgba(232,196,104,.24);border-radius:24px;overflow:hidden;background:radial-gradient(circle at center,rgba(232,196,104,.11),transparent 38%),radial-gradient(circle at 20% 15%,rgba(133,80,170,.2),transparent 35%),#0d081d;touch-action:none}
#familyLines,#familyNodes{position:absolute;inset:0;width:100%;height:100%}.family-link{stroke-width:2.2;filter:drop-shadow(0 0 5px currentColor);opacity:.85}.relation-distant{stroke-dasharray:8 7}.relation-unspoken{stroke-dasharray:2 8}
.family-orbit{position:absolute;left:50%;top:50%;border:1px solid rgba(232,196,104,.09);border-radius:50%;transform:translate(-50%,-50%);pointer-events:none}.orbit-one{width:46%;aspect-ratio:1}.orbit-two{width:78%;aspect-ratio:1}
.family-node{position:absolute;transform:translate(-50%,-50%);width:82px;height:82px;border-radius:50%;border:1px solid rgba(232,196,104,.48);background:radial-gradient(circle at 35% 28%,#6e4c8b,#26143e 70%);color:#fff;font:600 .75rem var(--font-display);box-shadow:0 8px 24px rgba(0,0,0,.35),0 0 18px rgba(172,113,213,.18);cursor:grab;user-select:none;touch-action:none;z-index:3}.family-node:active{cursor:grabbing}.family-node.is-self{background:radial-gradient(circle at 35% 28%,#d4b35d,#68491c 72%);color:#160d2c}.family-node.is-selected{outline:3px solid rgba(232,196,104,.35);outline-offset:5px;box-shadow:0 0 30px rgba(232,196,104,.4)}
.family-stage-hint{position:absolute;z-index:2;bottom:10px;left:50%;transform:translateX(-50%);margin:0;padding:7px 11px;border-radius:999px;background:rgba(9,6,18,.72);color:#c9bee0;font-size:.72rem;white-space:nowrap;pointer-events:none}
@media(max-width:760px){.family-map-controls{grid-template-columns:1fr 1fr}.family-add-field{grid-column:1/-1}.relation-picker{grid-template-columns:repeat(2,minmax(0,1fr))}.relation-choice:last-child{grid-column:1/-1}.family-stage{height:360px}.family-node{width:68px;height:68px;font-size:.68rem}}
.family-chat{margin-top:22px;padding-top:20px;border-top:1px solid rgba(232,196,104,.18)}.family-chat-log{display:flex;flex-direction:column;gap:10px;margin-bottom:14px}.chat-bubble{max-width:82%;padding:13px 16px;border-radius:18px;line-height:1.6;white-space:pre-wrap}.chat-user{align-self:flex-end;background:linear-gradient(135deg,#78519d,#4d2e72);border-bottom-right-radius:5px}.chat-assistant{align-self:flex-start;background:rgba(255,255,255,.07);border:1px solid rgba(232,196,104,.18);border-bottom-left-radius:5px}.chat-thinking{color:#e8c468;letter-spacing:.14em}.family-chat-form{display:flex;gap:9px}.family-chat-form input{flex:1;min-width:0;border-radius:999px;padding-inline:18px}.family-chat-form .btn{border-radius:999px}
.chat-quota{text-align:right;color:#e8c468;font:600 .7rem var(--font-mono);letter-spacing:.06em}.chat-locked{padding:12px 14px;border:1px solid rgba(232,196,104,.28);border-radius:12px;background:rgba(232,196,104,.08);color:#f1d98f;text-align:center}.family-chat-form:has(input:disabled){display:none}

/* ----------------------------------------------------------- numerology */
.numcards {
  display: grid; gap: .75rem; margin-block-end: 1.25rem;
  grid-template-columns: repeat(auto-fit, minmax(210px, 1fr));
}
.numcard {
  border: 1px solid var(--border); border-radius: 2px;
  padding: .8rem .9rem; background: var(--bg);
}
.numcard-label {
  display: block; font-size: .7rem; letter-spacing: .07em;
  text-transform: uppercase; color: var(--text-muted);
}
.numcard-value {
  display: block; font-family: var(--font-display); font-weight: 700;
  font-size: 1.7rem; line-height: 1.15; color: var(--accent);
}
.numcard-epithet {
  display: block; font-weight: 600; font-size: .95rem; margin-block-start: .15rem;
}
.numcard-line { font-size: .88rem; color: var(--text-muted); margin-block: .3rem 0; }

.timeline { list-style: none; margin: 0; padding: 0; }
.timeline .stage {
  border-inline-start: 2px solid var(--accent);
  padding: .1rem 0 1.1rem 1rem; margin: 0; position: relative;
}
.timeline .stage::before {
  content: ""; position: absolute; inset-inline-start: -5px; top: .35rem;
  width: 8px; height: 8px; border-radius: 50%; background: var(--accent);
}
.stage-age {
  display: block; font-size: .8rem; letter-spacing: .06em;
  text-transform: uppercase; color: var(--accent);
}
.stage-part { margin-block-start: .45rem; }
.stage-part-challenge { opacity: .92; }
.stage-intro {
  font-size: .78rem; letter-spacing: .04em; color: var(--text-muted);
  margin-inline-end: .4rem;
}
.stage-number {
  display: inline-block; min-width: 1.6em; text-align: center;
  border: 1px solid var(--border); border-radius: 2px;
  padding: 0 .25em; font-size: .85rem; color: var(--accent);
}
.stage-epithet { font-weight: 600; margin-inline-start: .4rem; }
.stage-line { font-size: .88rem; color: var(--text-muted); margin-block: .15rem 0; }

/* -------------------------------------------------------- compatibility */
.pairgrid {
  display: flex; flex-wrap: wrap; align-items: center; gap: .75rem;
  margin-block-end: 1rem;
}
.personcard {
  flex: 1 1 200px; border: 1px solid var(--border); border-radius: 2px;
  padding: .8rem .9rem; background: var(--bg);
}
.personcard-label {
  display: block; font-size: .72rem; letter-spacing: .07em;
  text-transform: uppercase; color: var(--text-muted);
}
.personcard-sign {
  display: block; font-family: var(--font-display); font-weight: 700;
  font-size: 1.35rem; line-height: 1.2;
}
.personcard-element { display: block; font-size: .8rem; color: var(--accent); }
.personcard-line { font-size: .86rem; color: var(--text-muted); margin-block: .3rem 0; }
.pair-join { font-size: 1.5rem; color: var(--accent); flex: 0 0 auto; }

.meter { display: flex; gap: .45rem; margin-block: .25rem .6rem; }
.meter-dot {
  width: 1.4rem; height: 1.4rem; border-radius: 50%;
  border: 1.5px solid var(--accent); background: transparent;
}
.meter-dot.is-on { background: var(--accent); }
.pair-blurb { font-size: .95rem; }

/* ---------------------------------------------------------------- tarot */
.spread {
  display: grid; gap: .9rem; margin-block-end: 1.25rem;
  grid-template-columns: repeat(auto-fit, minmax(170px, 1fr));
}
.tarot-card {
  border: 1px solid var(--border); border-radius: 2px;
  padding: .8rem .9rem; background: var(--bg); text-align: center;
}
.tarot-position {
  display: block; font-size: .7rem; letter-spacing: .09em;
  text-transform: uppercase; color: var(--text-muted);
}
.tarot-frame {
  margin: .5rem auto; width: 78px; height: 78px;
  border: 1px solid var(--border); border-radius: 2px;
  display: flex; align-items: center; justify-content: center;
}
.tarot-icon {
  width: 62px; height: 62px; display: block;
  fill: none; stroke: var(--accent); stroke-width: 1.4;
  stroke-linecap: round; stroke-linejoin: round;
}
.tarot-card.is-reversed .tarot-icon { transform: rotate(180deg); }
.tarot-name {
  display: block; font-family: var(--font-display); font-weight: 700;
  font-size: 1.05rem;
}
.tarot-orientation {
  display: block; font-family: var(--font-mono); font-size: .72rem;
  letter-spacing: .06em; text-transform: uppercase; color: var(--accent);
}
.tarot-card.is-reversed .tarot-orientation { color: var(--accent-2); }
.tarot-essence {
  font-size: .86rem; color: var(--text-muted);
  margin-block: .4rem 0; margin-inline: auto;
}

/* --------------------------------------------------------------- coffee */
.upload-hint {
  font-size: .88rem; color: var(--text-muted);
  border-inline-start: 2px solid var(--accent); padding-inline-start: .7rem;
}
input[type="file"] {
  font: inherit; font-size: .9rem; color: var(--text);
  padding: .5rem 0; max-width: 100%;
}
.cup-preview { margin-block: .75rem; }
.cup-preview img {
  width: 220px; height: 220px; object-fit: cover;
  border: 1px solid var(--border); border-radius: 2px; display: block;
}

/* ---------------------------------------------------------------- daily */
.signgrid {
  display: grid; gap: .45rem; margin-block-end: 1rem;
  grid-template-columns: repeat(auto-fit, minmax(110px, 1fr));
}
.signchip {
  font: inherit; font-size: .85rem; padding: .5rem .4rem; cursor: pointer;
  background: transparent; color: var(--text);
  border: 1px solid var(--border); border-radius: 2px;
}
.signchip:hover { border-color: var(--accent); color: var(--accent); }
.signchip.is-on {
  background: var(--accent); border-color: var(--accent); color: var(--ink);
  font-weight: 600;
}

/* --------------------------------------------------------------- family */
#familyForm textarea {
  width: 100%; font: inherit; font-size: .95rem; resize: vertical;
  color: var(--text); background: var(--bg);
  border: 1px solid var(--border); border-radius: var(--radius);
  padding: .55rem .7rem;
}
#familyForm textarea:focus-visible { outline: 2px solid var(--accent); outline-offset: 1px; }

@media (prefers-reduced-motion: reduce) {
  .toolnav-link, .signchip, .meter-dot { transition: none; }
}

/* =====================================================================
   Zodiara immersive layer — premium cosmic atmosphere and motion
   ===================================================================== */
html { scroll-behavior: smooth; }
body {
  min-height: 100vh;
  overflow-x: hidden;
  background:
    radial-gradient(circle at 12% 10%, rgba(112,63,151,.26), transparent 30rem),
    radial-gradient(circle at 88% 32%, rgba(34,101,135,.18), transparent 34rem),
    linear-gradient(155deg, #0b0719 0%, #160d2c 46%, #090612 100%);
}
body::before, body::after {
  content: ""; position: fixed; inset: 0; pointer-events: none; z-index: -1;
}
body::before {
  opacity: .65;
  background-image:
    radial-gradient(circle, rgba(255,255,255,.85) 0 1px, transparent 1.4px),
    radial-gradient(circle, rgba(232,196,104,.75) 0 1px, transparent 1.5px);
  background-size: 73px 73px, 121px 121px;
  background-position: 11px 19px, 41px 67px;
  animation: cosmicDrift 28s linear infinite;
}
body::after {
  background: linear-gradient(115deg, transparent 20%, rgba(229,194,119,.055) 45%, transparent 70%);
  transform: translateX(-70%); animation: auroraSweep 13s ease-in-out infinite;
}
@keyframes cosmicDrift { to { background-position: 84px 92px, 162px 188px; } }
@keyframes auroraSweep { 0%,22%{transform:translateX(-75%)} 62%,100%{transform:translateX(85%)} }

#app { max-width: 1120px; padding-block: 18px 90px; }
.topbar {
  position: sticky; top: 12px; z-index: 40; padding: 12px 16px; margin-bottom: 10px;
  border: 1px solid rgba(232,196,104,.2); border-radius: 999px;
  background: rgba(15,9,31,.78); backdrop-filter: blur(18px);
  box-shadow: 0 18px 50px rgba(0,0,0,.22);
}
.app-name { color: var(--accent); letter-spacing: .12em; text-transform: uppercase; }
.lang-switch { max-width: 25rem; }
.lang-chip { border-radius: 999px; transition: transform .2s ease, background .2s ease; }
.lang-chip:hover { transform: translateY(-2px); }
.toolnav {
  position: sticky; top: 78px; z-index: 35; padding: 8px; margin-bottom: 22px;
  border: 1px solid rgba(255,255,255,.08); border-radius: 14px;
  background: rgba(21,15,46,.72); backdrop-filter: blur(16px);
  overflow-x: auto; scrollbar-width: none;
}
.toolnav::-webkit-scrollbar { display:none; }
.toolnav ul { flex-wrap: nowrap; min-width: max-content; }
.toolnav-link { border-radius: 9px; transition: color .25s ease, background .25s ease, transform .25s ease; }
.toolnav-link:hover { transform: translateY(-2px); background: rgba(232,196,104,.08); }
.toolnav-link.is-current { background: linear-gradient(135deg, rgba(232,196,104,.2), rgba(227,143,163,.12)); }

.hero { min-height: 66vh; justify-content: center; position: relative; }
.hero::before {
  content:""; position:absolute; width:min(620px,94vw); aspect-ratio:1; border-radius:50%;
  background:radial-gradient(circle, rgba(232,196,104,.13), transparent 64%);
  filter:blur(12px); animation:heroBreath 5s ease-in-out infinite;
}
@keyframes heroBreath { 50% { transform:scale(1.09); opacity:.72; } }
.astrolabe-stage { width:min(440px,82vw); filter:drop-shadow(0 0 42px rgba(232,196,104,.2)); }
.astrolabe { animation:astrolabeFloat 7s ease-in-out infinite; }
@keyframes astrolabeFloat { 50% { transform:translateY(-10px) rotate(1.2deg); } }
.hero-copy { position:relative; z-index:2; }
.hero-kicker{display:block;margin-bottom:14px;color:var(--accent);font:600 .67rem var(--font-mono);letter-spacing:.28em}
.hero-copy h1 { font-size:clamp(3rem,9vw,6.3rem); line-height:.9; letter-spacing:-.05em; text-shadow:0 0 40px rgba(232,196,104,.14); }
.hero-copy .tagline { font-family:var(--font-display); font-style:italic; font-size:clamp(1rem,2vw,1.35rem); }

.panel {
  position:relative; overflow:hidden; padding:clamp(1.4rem,4vw,3rem); margin-bottom:24px;
  border-color:rgba(232,196,104,.17); border-radius:20px;
  background:linear-gradient(145deg, rgba(43,30,78,.86), rgba(24,16,52,.9));
  backdrop-filter:blur(14px); box-shadow:0 26px 70px rgba(0,0,0,.23);
  animation:panelReveal .75s cubic-bezier(.2,.75,.25,1) both;
}
.panel::before { content:""; position:absolute; inset:0; pointer-events:none; background:linear-gradient(120deg,rgba(255,255,255,.045),transparent 30%); }
@keyframes panelReveal { from { opacity:0; transform:translateY(28px) scale(.985); } }
.panel h2 { font-size:clamp(1.8rem,4vw,3rem); }
.panel h3 { color:#dac99f; margin-top:2.4rem; }
.field input, input[type="text"], input[type="date"], input[type="time"], #familyForm textarea {
  min-height:52px; border-radius:10px; border-color:rgba(232,196,104,.2);
  background:rgba(7,5,18,.5); transition:border-color .2s ease, box-shadow .2s ease, transform .2s ease;
}
input:focus, #familyForm textarea:focus { border-color:var(--accent); box-shadow:0 0 0 4px rgba(232,196,104,.08), 0 12px 30px rgba(0,0,0,.18); transform:translateY(-1px); }
.btn { min-height:52px; border-radius:999px; padding-inline:1.8rem; transition:transform .22s ease, box-shadow .22s ease, filter .22s ease; }
.btn:hover:not(:disabled) { transform:translateY(-3px); box-shadow:0 14px 30px rgba(232,196,104,.16); }
.btn-primary { background:linear-gradient(120deg,#f0d180,#d39d42); }
.chip { border-radius:14px; padding:1rem; background:rgba(8,5,22,.62); }
.chip .chip-value { font-size:1.65rem; }
.placements { background:rgba(8,5,22,.34); border-radius:12px; overflow:hidden; }
.ai-block, .report-body { font-family:var(--font-display); font-size:clamp(1.04rem,2vw,1.22rem); line-height:1.85; color:#f4edf9; }
.ai-block p, .report-body p { max-width:76ch; padding-left:18px; border-left:1px solid rgba(232,196,104,.35); }
.premium { background:radial-gradient(circle at 85% 5%,rgba(232,196,104,.18),transparent 35%),linear-gradient(145deg,#35204f,#1a1033); border-color:rgba(232,196,104,.42); }
.report-preview{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:12px;margin:24px 0}
.natal-wheel-head{text-align:center;margin-bottom:12px}.natal-wheel-head h2{margin:4px 0 8px}.natal-wheel-wrap{width:min(560px,100%);margin:0 auto 26px;padding:12px;filter:drop-shadow(0 0 30px rgba(232,196,104,.15))}.natal-wheel{display:block;width:100%;height:auto;overflow:visible}.wheel-ring{fill:none;stroke:rgba(232,196,104,.34);stroke-width:1.2}.wheel-spoke{stroke:rgba(232,196,104,.14);stroke-width:1}.wheel-sign{fill:#e8c468;font:25px serif;text-anchor:middle;dominant-baseline:middle;filter:drop-shadow(0 0 7px rgba(232,196,104,.35))}.wheel-house{fill:rgba(255,255,255,.42);font:11px var(--font-mono);text-anchor:middle;dominant-baseline:middle}.wheel-planet circle{fill:#1b1032;stroke:#f0ce78;stroke-width:1.5}.wheel-planet text{fill:#fff2c3;font:21px serif;text-anchor:middle;dominant-baseline:central}.wheel-planet{animation:planetAppear .6s cubic-bezier(.2,.8,.25,1) both}.wheel-core{fill:#160d2c;stroke:#e8c468;stroke-width:1.4}.wheel-core-star{fill:#e8c468;font:20px serif;text-anchor:middle}.wheel-core-label{fill:#f6edff;font:8px var(--font-mono);letter-spacing:1px;text-anchor:middle}.wheel-aura{animation:wheelPulse 4s ease-in-out infinite}@keyframes wheelPulse{50%{opacity:.55}}@keyframes planetAppear{from{opacity:0}to{opacity:1}}
.report-preview article{position:relative;min-height:150px;padding:20px;border:1px solid rgba(232,196,104,.22);border-radius:18px;background:linear-gradient(145deg,rgba(255,255,255,.075),rgba(255,255,255,.025));overflow:hidden;transition:transform .28s ease,border-color .28s ease}
.report-preview article:hover{transform:translateY(-4px);border-color:rgba(232,196,104,.58)}
.report-preview article>span{display:block;color:var(--gold,#e8c468);font-size:25px;margin-bottom:10px}
.report-preview h3{font-size:1rem;margin:0 0 7px}.report-preview p{font-size:.86rem;line-height:1.55;margin:0;color:rgba(255,255,255,.72)}
.premium-promise{text-align:center;color:#f4d98d;font-weight:700;letter-spacing:.01em}
.tool-premium-offer{text-align:center;margin-top:22px;background:radial-gradient(circle at 50% 0,rgba(232,196,104,.18),transparent 42%),linear-gradient(145deg,#2d1948,#130b29)}
.premium-eyebrow{display:block;color:#e8c468;font:700 .68rem var(--font-mono);letter-spacing:.25em;margin-bottom:10px}
.premium-offer-copy{max-width:680px;margin:0 auto 20px;color:rgba(255,255,255,.76);line-height:1.7}
.premium-unlocks{display:flex;justify-content:center;flex-wrap:wrap;gap:10px;margin:0 auto 22px}
.premium-unlocks span{padding:9px 13px;border:1px solid rgba(232,196,104,.25);border-radius:999px;background:rgba(255,255,255,.045);font-size:.82rem}
.payment-methods{display:flex;justify-content:center;gap:12px;margin:15px 0 0;color:rgba(255,255,255,.48);font:600 .66rem var(--font-mono);letter-spacing:.06em}
.offer-price{display:flex;justify-content:center;align-items:baseline;gap:10px;margin:0 0 17px}.offer-price del{color:rgba(255,255,255,.42)}.offer-price strong{font:700 1.65rem var(--font-display);color:#e8c468}.bundle-upsell{max-width:620px;margin:24px auto 0;padding:18px;border:1px solid rgba(232,196,104,.22);border-radius:18px;background:rgba(255,255,255,.035)}.bundle-upsell h3{margin:5px 0 7px}.bundle-upsell p{margin:0 auto 10px;color:rgba(255,255,255,.72)}.bundle-price{display:block;color:#e8c468;font:700 1.35rem var(--font-display)}.bundle-upsell small{display:block;margin-top:6px;color:rgba(255,255,255,.48)}
.premium-demo{margin-top:22px;background:radial-gradient(circle at 85% 0,rgba(232,196,104,.17),transparent 36%),linear-gradient(145deg,#24143c,#0e091e);border-color:rgba(232,196,104,.38)}
#reportSection[data-demo="true"]{position:relative;border-color:rgba(232,196,104,.45)}#reportSection[data-demo="true"]::after{content:"DEMO";position:absolute;top:18px;right:18px;padding:6px 9px;border-radius:999px;background:#e8c468;color:#160d2c;font:800 .63rem var(--font-mono);letter-spacing:.15em}
.full-report-grid{display:grid;grid-template-columns:1fr 1fr;gap:15px}.full-report-grid article{padding:22px;border:1px solid rgba(232,196,104,.18);border-radius:18px;background:linear-gradient(145deg,rgba(255,255,255,.055),rgba(255,255,255,.02))}.full-report-grid h3{margin:0 0 10px;color:#e8c468}.full-report-grid p{margin:0;line-height:1.75;color:rgba(255,255,255,.8)}.full-report-grid article:first-child,.full-report-grid article:nth-last-child(2),.full-report-grid article:last-child{grid-column:1/-1}@media(max-width:700px){.full-report-grid{grid-template-columns:1fr}.full-report-grid article{grid-column:1!important}}
.premium-demo-head{display:flex;align-items:center;gap:13px;margin-bottom:20px}.premium-demo-head h2{margin:0}.demo-badge{padding:6px 9px;border-radius:999px;background:#e8c468;color:#160d2c;font:800 .63rem var(--font-mono);letter-spacing:.15em}
.premium-demo-grid{display:grid;grid-template-columns:1fr 1fr;gap:14px}.premium-demo-grid article{padding:20px;border:1px solid rgba(232,196,104,.18);border-radius:17px;background:rgba(255,255,255,.035)}.premium-demo-grid article>span{color:#e8c468;font:700 .7rem var(--font-mono);letter-spacing:.16em}.premium-demo-grid h3{margin:8px 0 7px}.premium-demo-grid p{margin:0;color:rgba(255,255,255,.73);line-height:1.65}.demo-note{text-align:center;margin:20px auto 0;color:#e8c468}
@media(max-width:620px){.premium-demo-grid{grid-template-columns:1fr}}
@media(max-width:760px){.report-preview{grid-template-columns:1fr 1fr}}@media(max-width:480px){.report-preview{grid-template-columns:1fr}.report-preview article{min-height:auto}}
.price { font-size:2.4rem!important; color:var(--accent); }

body.page-arriving #app { opacity:0; transform:translateY(18px) scale(.99); }
body #app { opacity:1; transform:none; transition:opacity .6s ease, transform .6s cubic-bezier(.2,.75,.25,1), filter .4s ease; }
body.page-leaving #app { opacity:0; transform:scale(.975); filter:blur(8px); }
body.page-leaving::after { z-index:200; background:radial-gradient(circle,#4f2c74,#090612 68%); animation:portalClose .45s ease forwards; }
@keyframes portalClose { from{opacity:0;transform:scale(1.3)} to{opacity:1;transform:scale(1)} }

@media (max-width:700px) {
  body { padding-inline:10px; }
  .topbar { top:6px; border-radius:16px; }
  .toolnav { top:82px; }
  .hero { min-height:58vh; }
  .panel { border-radius:16px; }
  .pay-options { align-items:stretch; }
  .pay-options .btn { width:100%; }
}
@media (prefers-reduced-motion:reduce) {
  html{scroll-behavior:auto} body::before,body::after,.astrolabe,.hero::before,.panel{animation:none!important}
  body #app{transition:none}
}

/* Legal and contact pages */
.footer-links{display:flex;justify-content:center;flex-wrap:wrap;gap:10px 20px;margin-top:12px}
.footer-links a,.footer-email{color:rgba(241,233,251,.62);font-size:.78rem;text-decoration:none}
.footer-links a:hover,.footer-email:hover{color:#e8c468}.footer-email{display:block;margin-top:10px}
.legal-page{max-width:900px;margin:28px auto}.legal-page h1{font-size:clamp(2.5rem,6vw,4.8rem);margin:8px 0}
.legal-updated{color:rgba(255,255,255,.48);font:500 .72rem var(--font-mono);letter-spacing:.08em}
.legal-copy{max-width:760px}.legal-copy h2{margin:34px 0 8px;color:#e8c468;font-size:1.3rem}
.legal-copy p{color:rgba(255,255,255,.78);line-height:1.78}.legal-lead{font-size:1.12rem;color:#eee4f8!important}.legal-copy a{color:#e8c468}
.contact-card{margin:25px 0;padding:24px;border:1px solid rgba(232,196,104,.3);border-radius:18px;background:rgba(255,255,255,.035)}
.contact-card span{display:block;color:rgba(255,255,255,.48);font:.68rem var(--font-mono);letter-spacing:.15em}.contact-card>a{display:block;margin:7px 0;font-size:clamp(1.3rem,4vw,2rem)}
.purchase-consent{display:flex;align-items:flex-start;gap:.7rem;margin:1rem 0;padding:.9rem 1rem;border:1px solid rgba(201,162,39,.32);border-radius:12px;background:rgba(201,162,39,.06);font-size:.86rem;line-height:1.45;color:var(--muted)}
.purchase-consent input{width:18px;height:18px;flex:0 0 auto;margin-top:.08rem;accent-color:#c9a227}
.purchase-consent:has(input:checked){border-color:rgba(201,162,39,.72);color:var(--text)}
.account-link{margin-left:auto;color:var(--gold);font-size:.82rem;text-decoration:none;white-space:nowrap}.account-shell{max-width:900px}.account-login{display:grid;gap:1rem;max-width:520px;margin-top:1.4rem}.account-login label{display:grid;gap:.5rem}.account-login input{width:100%;padding:.9rem 1rem;border:1px solid rgba(201,162,39,.35);border-radius:10px;background:rgba(0,0,0,.22);color:var(--text);font:inherit}.account-grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(220px,1fr));gap:1rem;margin:1.5rem 0}.account-grid article{padding:1.2rem;border:1px solid rgba(201,162,39,.26);border-radius:14px;background:rgba(255,255,255,.025)}.account-grid h2{font-size:1.15rem}.account-email,.account-logout{color:var(--muted)}
.hp-field{position:absolute!important;left:-10000px!important;width:1px!important;height:1px!important;overflow:hidden!important}.cf-turnstile{min-height:65px}
.package-shell{max-width:1080px}.package-section{margin-top:2rem}.package-section>h2{margin-bottom:.25rem}.package-section>p{margin-top:0;color:var(--muted)}
.package-grid{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));align-items:stretch;gap:1rem;margin-top:1.25rem}
.package-grid-individual{grid-template-columns:repeat(3,minmax(0,1fr))}
.package-card{display:flex;flex-direction:column;min-width:0;padding:1.25rem;border:1px solid rgba(201,162,39,.3);border-radius:16px;background:rgba(255,255,255,.025);overflow:hidden}
.package-card-head{display:flex;align-items:flex-start;justify-content:space-between;gap:.8rem;min-width:0}.package-card h2{min-width:0;margin:0;font-size:clamp(1.15rem,2vw,1.45rem);line-height:1.18;overflow-wrap:anywhere}.package-card-head>strong{flex:0 0 auto;font-size:1.45rem;line-height:1.2;color:var(--gold)}
.package-card ul{min-height:0;margin:.9rem 0;padding-left:1.2rem;color:var(--muted);overflow-wrap:anywhere}.package-card .purchase-consent{margin-top:auto;min-width:0}.package-card .purchase-consent span{min-width:0;overflow-wrap:anywhere}.package-actions{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1fr);gap:.65rem}.package-actions .btn{width:100%;min-width:0;height:auto;white-space:normal;line-height:1.2;padding:.85rem .7rem}
@media(max-width:850px){.package-grid-individual{grid-template-columns:repeat(2,minmax(0,1fr))}}
@media(max-width:620px){.package-grid,.package-grid-individual{grid-template-columns:minmax(0,1fr)}.package-card{padding:1rem}.package-actions{grid-template-columns:minmax(0,1fr)}}
html.i18n-pending body { opacity: 0; }
body { transition: opacity .16s ease; }