/* Asteria — landing.css · l'Observatoire
   Layered over site.css. The landing is an instrument, not a brochure:
   the sky is computed live, the reading is performed on the visitor's device.
   Night ink · platinum · one warm gold reserved for measured values. */

/* ============ hero — the sky, right now ============ */

.obs-hero {
  position: relative; overflow: hidden;
  min-height: 100svh;
  display: grid; align-items: center;
  padding: calc(var(--s7)) 0 var(--s6);
}
.obs-hero .art { position: absolute; inset: 0; z-index: 0; }
.obs-hero .art img {
  width: 100%; height: 100%; object-fit: cover; object-position: 50% 38%;
  transform: scale(1.07);
  animation: slowdrift 40s ease-in-out infinite alternate;
}
.obs-hero .art::after {
  content: ""; position: absolute; inset: 0;
  background:
    linear-gradient(180deg, rgba(5,7,15,0.62) 0%, rgba(5,7,15,0.18) 26%, rgba(5,7,15,0.26) 55%, rgba(5,7,15,0.72) 80%, var(--night-0) 100%),
    radial-gradient(130% 110% at 22% 40%, rgba(5,7,15,0.72), transparent 60%);
}
.obs-hero .wrap { position: relative; z-index: 2; width: 100%; }
.obs-grid {
  display: grid; grid-template-columns: 55fr 45fr; gap: var(--s5);
  align-items: center;
}
.obs-copy { display: grid; gap: var(--s4); max-width: 36em; text-shadow: 0 1px 8px rgba(5,7,15,0.85), 0 0 34px rgba(5,7,15,0.65); }
.obs-copy h1 { font-size: clamp(47px, 7.6vw, 88px); }
.obs-copy .lead { max-width: 30em; }
.obs-copy .lead strong { color: var(--ink); font-weight: 500; }

@media (max-width: 960px) {
  .obs-hero { padding-top: calc(var(--s6) + var(--s4)); }
  .obs-grid { grid-template-columns: 1fr; gap: var(--s5); }
  .obs-copy { max-width: 100%; }
}

/* ---------- the dial ---------- */

.dial-zone { display: grid; gap: var(--s3); justify-items: center; }
.dial-frame { position: relative; width: min(76vw, 460px); aspect-ratio: 1; }
.dial-frame svg { width: 100%; height: 100%; display: block; overflow: visible; }
.dial-sign {
  font: 600 9.5px var(--sans); letter-spacing: 0.3em; text-transform: uppercase;
  fill: rgba(154,161,181,0.66);
}
.dial-planet {
  font: 600 10.5px var(--sans); letter-spacing: 0.14em; text-transform: uppercase;
  fill: var(--platinum);
  paint-order: stroke; stroke: rgba(5,7,15,0.85); stroke-width: 3px;
}
.dial-frame .halo {
  position: absolute; inset: -13%; border-radius: 50%; pointer-events: none;
  background: radial-gradient(closest-side, rgba(120,140,210,0.14), transparent 72%);
}
.dial-caption {
  display: grid; gap: 6px; justify-items: center; text-align: center;
  font: 500 12px/1.6 var(--sans); letter-spacing: 0.22em; text-transform: uppercase; color: var(--dim);
  text-shadow: 0 1px 8px rgba(5,7,15,0.9);
}
.dial-caption .live-line { color: var(--ink); letter-spacing: 0.14em; }
.dial-caption .live-line b { font-weight: 600; color: var(--platinum-bright); }
.dial-caption .live-line .v { color: var(--gold); font-weight: 600; font-variant-numeric: tabular-nums; }
.dial-caption .live-aspect { color: var(--dim); letter-spacing: 0.14em; }
.dial-caption .live-aspect .v { color: var(--gold); font-weight: 600; }
.dial-caption .live-stamp { color: var(--faint); font-size: 11px; letter-spacing: 0.3em; }
.dial-caption .live-stamp .clock { font-variant-numeric: tabular-nums; color: var(--dim); }

/* pulse on the freshly-updated values */
@keyframes value-breathe { from { opacity: 0.55; } to { opacity: 1; } }
.dial-caption .v { animation: value-breathe 0.9s ease both; }

/* ---------- scroll cue ---------- */
.scroll-cue {
  position: absolute; left: 50%; bottom: var(--s3); transform: translateX(-50%); z-index: 3;
  display: grid; justify-items: center; gap: 8px; color: var(--faint);
  font: 600 10px/1 var(--sans); letter-spacing: 0.5em; text-transform: uppercase;
  text-decoration: none; padding-left: 0.5em;
}
.scroll-cue::after {
  content: ""; width: 1px; height: var(--s4);
  background: linear-gradient(180deg, var(--faint), transparent);
  animation: cue-drop 2.6s ease-in-out infinite;
}
@keyframes cue-drop { 0%, 100% { transform: scaleY(0.55); opacity: 0.4; } 50% { transform: scaleY(1); opacity: 1; } }
@media (prefers-reduced-motion: reduce) { .scroll-cue::after { animation: none; } }
.scroll-cue:hover { color: var(--dim); }

/* ============ the instrument — your sky ============ */

.instrument { position: relative; }
.instrument .wrap { display: grid; grid-template-columns: 38.2fr 61.8fr; gap: var(--s6); align-items: start; }
@media (max-width: 960px) { .instrument .wrap { grid-template-columns: 1fr; gap: var(--s5); } }
.instrument .intro { display: grid; gap: var(--s3); position: sticky; top: var(--s6); }
@media (max-width: 960px) { .instrument .intro { position: static; } }
.instrument .intro .note { color: var(--faint); font-size: var(--t-small); line-height: 1.6; max-width: 30em; }
.instrument .intro .note em { color: var(--dim); font-style: normal; }

.bench {
  position: relative;
  border: 1px solid var(--hair-soft); border-radius: 21px;
  background: linear-gradient(180deg, rgba(16,22,42,0.66), rgba(10,14,26,0.82));
  backdrop-filter: blur(13px);
  padding: var(--s4);
  display: grid; gap: var(--s4);
  box-shadow: 0 34px 89px rgba(0,0,0,0.5), 0 0 0 1px rgba(5,7,15,0.4);
  overflow: hidden;
}
.bench::before { /* fine top light */
  content: ""; position: absolute; inset: 0 0 auto 0; height: 1px;
  background: linear-gradient(90deg, transparent, rgba(214,219,234,0.34), transparent);
}

.bench form { display: grid; gap: var(--s3); }
.bench .fields { display: grid; grid-template-columns: 1fr 1fr; gap: var(--s3); }
@media (max-width: 560px) { .bench .fields { grid-template-columns: 1fr; } }
.bench label { display: grid; gap: 8px; font: 600 11px/1.3 var(--sans); letter-spacing: 0.22em; text-transform: uppercase; color: var(--faint); }
.bench label .opt { font-weight: 500; letter-spacing: 0.05em; text-transform: none; color: var(--faint); opacity: 0.8; }
.bench input {
  appearance: none; -webkit-appearance: none; width: 100%;
  background: rgba(5,7,15,0.6); border: 1px solid var(--hair);
  border-radius: 12px; color: var(--ink);
  font: 400 18px/1.2 var(--sans); padding: 14px 15px;
  transition: border-color 0.25s, box-shadow 0.25s;
  color-scheme: dark;
}
.bench input:focus { outline: none; border-color: rgba(214,219,234,0.55); box-shadow: 0 0 0 3px rgba(214,219,234,0.08); }
.bench .go {
  cursor: pointer; border: none; border-radius: 999px;
  background: var(--platinum); color: var(--night-0);
  font: 600 16px/1 var(--sans); letter-spacing: 0.04em; padding: 18px var(--s4);
  transition: background 0.2s, transform 0.2s;
  justify-self: start;
}
.bench .go:hover { background: var(--platinum-bright); transform: translateY(-1px); }
.bench .go:active { transform: scale(0.985); }
.bench .privacy-line { color: var(--faint); font-size: 12.5px; letter-spacing: 0.04em; }
.bench .privacy-line b { color: var(--dim); font-weight: 600; }

/* ---------- the reading ---------- */

.reading { display: none; border-top: 1px solid var(--hair); padding-top: var(--s4); }
.reading.on { display: grid; gap: var(--s4); animation: reading-rise 0.7s cubic-bezier(.2,.7,.2,1) both; }
@keyframes reading-rise { from { opacity: 0; transform: translateY(13px); } to { opacity: 1; transform: none; } }
@media (prefers-reduced-motion: reduce) { .reading.on { animation: none; } }

.reading .r-eyebrow { font: 600 11px/1 var(--sans); letter-spacing: 0.5em; text-transform: uppercase; color: var(--gold); }
.reading .luminaries { display: grid; gap: var(--s2); }
.reading .lum { display: grid; gap: 3px; }
.reading .lum .line { font: 400 clamp(23px, 3.2vw, 31px)/1.15 var(--serif); color: var(--platinum-bright); }
.reading .lum .line .pos { color: var(--gold); font-variant-numeric: tabular-nums; font-size: 0.62em; letter-spacing: 0.02em; vertical-align: 0.14em; margin-left: 0.35em; white-space: nowrap; }
.reading .lum .whisper { font-family: var(--serif); font-style: italic; font-weight: 330; color: var(--dim); font-size: 16px; }

.reading .natal-phase { font: 600 11px/1.6 var(--sans); letter-spacing: 0.28em; text-transform: uppercase; color: var(--faint); margin-top: 2px; }

.reading .wheel-zone { display: grid; justify-items: center; padding: var(--s2) 0 0; }
.reading .wheel-zone svg { width: min(88%, 380px); height: auto; overflow: visible; }
.reading .wheel-zone .dial-planet { font-size: 11.5px; }

.reading .placements { display: grid; grid-template-columns: 1fr 1fr; gap: 4px var(--s4); border-top: 1px solid var(--hair); padding-top: var(--s3); }
@media (max-width: 480px) { .reading .placements { grid-template-columns: 1fr; } }
.reading .pl { display: flex; justify-content: space-between; align-items: baseline; gap: var(--s2); font-size: 14.5px; padding: 3px 0; }
.reading .pl-name { font: 600 11px/1.6 var(--sans); letter-spacing: 0.22em; text-transform: uppercase; color: var(--dim); }
.reading .pl-pos { color: var(--platinum); font-variant-numeric: tabular-nums; white-space: nowrap; }

.reading .share-row { display: flex; align-items: center; gap: var(--s3); flex-wrap: wrap; }
.reading .share-row .go { padding: 15px var(--s4); }
.reading .share-hint { color: var(--faint); font-size: 12.5px; letter-spacing: 0.04em; }

.reading .transits { display: grid; gap: 0; border-top: 1px solid var(--hair); }
.reading .transits .t-head { font: 600 11px/1 var(--sans); letter-spacing: 0.4em; text-transform: uppercase; color: var(--faint); padding: var(--s3) 0 var(--s2); }
.reading .t-row {
  display: grid; grid-template-columns: 1fr auto; gap: var(--s2) var(--s3); align-items: baseline;
  padding: var(--s2) 0; border-top: 1px solid var(--hair-soft);
}
.reading .t-row .t-name { font: 420 17px/1.35 var(--serif); color: var(--ink); }
.reading .t-row .t-name em { color: var(--platinum); font-style: italic; }
.reading .t-row .t-orb { font: 600 12px/1.6 var(--sans); letter-spacing: 0.12em; text-transform: uppercase; color: var(--gold); font-variant-numeric: tabular-nums; white-space: nowrap; }
.reading .t-row .t-orb .st { color: var(--faint); font-weight: 500; margin-left: 0.6em; }
.reading .t-say { font-family: var(--serif); font-style: italic; font-weight: 340; color: var(--dim); font-size: 16.5px; line-height: 1.55; grid-column: 1 / -1; margin: -4px 0 4px; }

.reading .gap { display: grid; gap: var(--s3); border-top: 1px solid var(--hair); padding-top: var(--s3); }
.reading .gap p { color: var(--dim); font-size: 15.5px; line-height: 1.6; max-width: 36em; }
.reading .gap p b { color: var(--ink); font-weight: 600; }
.reading .fine { color: var(--faint); font-size: 12px; line-height: 1.6; letter-spacing: 0.02em; }

/* ============ the sky calendar ============ */

.calendar { position: relative; padding-top: 0; }
.cal-strip {
  display: grid; grid-auto-flow: column; grid-auto-columns: minmax(196px, 1fr);
  gap: var(--s2); overflow-x: auto;
  padding: var(--s3) max(var(--s4), calc((100vw - 1180px) / 2 + var(--s4))) var(--s4);
  scrollbar-width: none;
  -webkit-mask-image: linear-gradient(90deg, transparent, #000 var(--s4), #000 calc(100% - var(--s4)), transparent);
          mask-image: linear-gradient(90deg, transparent, #000 var(--s4), #000 calc(100% - var(--s4)), transparent);
}
.cal-strip::-webkit-scrollbar { display: none; }
.cal-card {
  display: grid; gap: 8px; align-content: start;
  border: 1px solid var(--hair-soft); border-radius: 16px;
  background: rgba(10,14,26,0.72);
  padding: var(--s3);
  min-height: 144px;
}
.cal-card.eclipse { border-color: rgba(216,181,106,0.4); box-shadow: 0 0 34px rgba(216,181,106,0.07) inset; }
.cal-date { font: 600 12px/1 var(--sans); letter-spacing: 0.3em; text-transform: uppercase; color: var(--gold); font-variant-numeric: tabular-nums; }
.cal-line { font: 420 17px/1.35 var(--serif); color: var(--ink); }
.cal-card.eclipse .cal-line { color: var(--platinum-bright); }
.cal-tag { font: 600 10px/1 var(--sans); letter-spacing: 0.4em; text-transform: uppercase; color: var(--faint); align-self: end; }
.cal-note { color: var(--faint); font-size: var(--t-small); padding: 0 var(--s4); max-width: 44em; }
.cal-note b { color: var(--dim); }

/* ============ the three-card spread ============ */

.spread-cta-row { display: grid; justify-items: center; margin-top: var(--s4); }
.spread { display: grid; grid-template-columns: repeat(3, 1fr); gap: var(--s3); max-width: 720px; margin: var(--s5) auto 0; }
@media (max-width: 640px) { .spread { gap: var(--s2); } }
.spread .slot { display: grid; gap: var(--s2); justify-items: center; text-align: center; }
.spread .living-card { width: 100%; aspect-ratio: 1759/2622; }
.spread .sp-cap { display: grid; gap: 3px; opacity: 0; transform: translateY(8px); transition: opacity 0.7s ease 0.4s, transform 0.7s ease 0.4s; }
.spread .slot.dealt .sp-cap { opacity: 1; transform: none; }
.spread .sp-pos { font: 600 10px/1 var(--sans); letter-spacing: 0.44em; text-transform: uppercase; color: var(--gold); }
.spread .sp-name { font: 420 18px/1.2 var(--serif); color: var(--platinum-bright); }
.spread .sp-kw { font-family: var(--serif); font-style: italic; font-weight: 330; color: var(--dim); font-size: 13.5px; }
.spread-gap { text-align: center; color: var(--dim); max-width: 34em; margin: var(--s4) auto 0; font-size: 15.5px; }
.spread-gap a { color: var(--platinum); border-bottom: 1px solid var(--hair); }

/* ============ faq ============ */

.faq { max-width: 760px; margin: 0 auto; }
.faq details { border-top: 1px solid var(--hair); }
.faq details:last-child { border-bottom: 1px solid var(--hair); }
.faq summary {
  cursor: pointer; list-style: none;
  font: 420 var(--t-lead)/1.3 var(--serif); color: var(--platinum);
  padding: var(--s3) var(--s5) var(--s3) 0; position: relative;
}
.faq summary::-webkit-details-marker { display: none; }
.faq summary::after {
  content: "+"; position: absolute; right: 4px; top: 50%; transform: translateY(-50%);
  font: 300 27px/1 var(--serif); color: var(--faint); transition: transform 0.3s;
}
.faq details[open] summary::after { transform: translateY(-50%) rotate(45deg); }
.faq summary:hover { color: var(--platinum-bright); }
.faq .a { color: var(--dim); padding: 0 0 var(--s3); max-width: 40em; line-height: 1.65; font-size: 15.5px; }
.faq .a b { color: var(--ink); }

/* ============ instrument plates — the five ============ */

.plates { display: grid; }
.plate {
  position: relative; overflow: hidden;
  min-height: 78vh;
  display: grid; align-items: end;
  padding: var(--s6) 0;
}
.plate .art { position: absolute; inset: 0; z-index: 0; }
.plate .art img { width: 100%; height: 100%; object-fit: cover; }
.plate .art::after {
  content: ""; position: absolute; inset: 0;
  background: linear-gradient(180deg, rgba(5,7,15,0.72) 0%, rgba(5,7,15,0.12) 30%, rgba(5,7,15,0.28) 62%, rgba(5,7,15,0.88) 100%);
}
.plate .wrap { position: relative; z-index: 2; width: 100%; }
.plate .txt {
  max-width: 33em; display: grid; gap: var(--s3);
  text-shadow: 0 1px 8px rgba(5,7,15,0.9), 0 0 34px rgba(5,7,15,0.7);
}
.plate.right .txt { margin-left: auto; text-align: right; }
.plate.right .eyebrow { flex-direction: row-reverse; }
.plate.right .eyebrow::after { transform: scaleX(-1); }
.plate h3 { font: 380 clamp(31px, 4.6vw, 55px)/1.08 var(--serif); color: var(--platinum-bright); }
.plate h3 em { font-style: italic; font-weight: 330; color: var(--platinum); }
.plate .facts { display: grid; gap: 10px; }
.plate .fact { position: relative; color: var(--dim); font-size: 15.5px; line-height: 1.5; padding-left: 27px; max-width: 30em; }
.plate .fact::before { content: ""; position: absolute; left: 0; top: 0.7em; width: 13px; height: 1px; background: var(--gold); opacity: 0.75; }
.plate.right .fact { padding-left: 0; padding-right: 27px; justify-self: end; }
.plate.right .fact::before { left: auto; right: 0; }
.plate .fact b { color: var(--ink); font-weight: 600; }

/* subtle parallax where the browser can scrub it */
@supports (animation-timeline: view()) {
  @media (prefers-reduced-motion: no-preference) {
    .plate .art img { transform: scale(1.18); animation: plate-drift linear both; animation-timeline: view(); }
    @keyframes plate-drift { from { transform: scale(1.18) translateY(4.5%); } to { transform: scale(1.18) translateY(-4.5%); } }
  }
}

/* ============ ritual band (tarot on the landing) ============ */

.ritual-band { position: relative; }
.ritual-band .wrap.split { align-items: center; }

/* ============ ledger — receipts ============ */

.ledger { display: grid; border-top: 1px solid var(--hair); }
.ledger .row {
  display: grid; grid-template-columns: var(--s6) 1fr 1.4fr; gap: var(--s4);
  align-items: baseline; padding: var(--s4) 0; border-bottom: 1px solid var(--hair);
}
@media (max-width: 760px) { .ledger .row { grid-template-columns: var(--s5) 1fr; } .ledger .row p { grid-column: 2; } }
.ledger .n { font: 320 var(--t-h2)/1 var(--serif); color: var(--gold); font-feature-settings: "onum"; }
.ledger h3 { font: 600 14px/1.4 var(--sans); letter-spacing: 0.18em; text-transform: uppercase; color: var(--platinum); }
.ledger p { color: var(--dim); font-size: 15.5px; line-height: 1.6; max-width: 34em; }
.ledger p b { color: var(--ink); font-weight: 600; }

.creed { margin-top: var(--s5); display: grid; gap: var(--s2); max-width: 36em; }
.creed p { font: 400 clamp(21px, 2.6vw, 27px)/1.4 var(--serif); color: var(--platinum); }
.creed p em { font-style: italic; color: var(--platinum-bright); }
.creed .who { font: 600 11px/1 var(--sans); letter-spacing: 0.4em; text-transform: uppercase; color: var(--faint); margin-top: var(--s2); }

/* ============ roast band ============ */

.roast-band { position: relative; overflow: hidden; }
.roast-band .panel {
  position: relative;
  border: 1px solid var(--hair-soft); border-radius: 21px; overflow: hidden;
  background: linear-gradient(120deg, rgba(16,22,42,0.9), rgba(10,14,26,0.7));
  display: grid; grid-template-columns: 1.25fr 1fr; align-items: center; gap: var(--s4);
  padding: var(--s5);
  box-shadow: 0 34px 89px rgba(0,0,0,0.5);
}
@media (max-width: 860px) { .roast-band .panel { grid-template-columns: 1fr; padding: var(--s4); } }
.roast-band .panel::before {
  content: ""; position: absolute; inset: -40%; pointer-events: none;
  background: radial-gradient(45% 45% at 78% 30%, rgba(216,181,106,0.1), transparent 70%);
}
.roast-band .txt { display: grid; gap: var(--s3); position: relative; }
.roast-band h3 { font: 400 clamp(27px, 3.6vw, 44px)/1.1 var(--serif); color: var(--platinum-bright); }
.roast-band h3 em { font-style: italic; color: var(--gold); }
.roast-band p { color: var(--dim); max-width: 30em; }
.roast-band .duo { position: relative; height: 210px; }
.roast-band .duo .living-card { position: absolute; width: 130px; top: 0; }
.roast-band .duo .living-card.a { left: calc(50% - 118px); transform: rotate(-9deg); }
.roast-band .duo .living-card.b { left: calc(50% - 12px); transform: rotate(8deg); top: 13px; }

/* ============ finale ============ */

.finale .glyph-final { width: 34px; height: 34px; color: var(--faint); }

/* ============ store badge, pre-launch state ============ */

.badge.soon {
  background: rgba(16,22,42,0.55); color: var(--dim);
  box-shadow: 0 0 0 1px var(--hair) inset; cursor: default; pointer-events: none;
}
.badge.soon svg { opacity: 0.5; }
.badge.soon .tx small { opacity: 0.7; }

/* ============ shared refinements ============ */

@media (max-width: 560px) {
  .obs-copy .eyebrow { font-size: 10.5px; letter-spacing: 0.34em; }
  .obs-copy .eyebrow::after { display: none; }
}
@media (max-width: 720px) {
  .plate.right .txt { margin-left: 0; text-align: left; }
  .plate.right .eyebrow { flex-direction: row; }
  .plate.right .fact { padding-left: 27px; padding-right: 0; justify-self: start; }
  .plate.right .fact::before { left: 0; right: auto; }
}


#comet { position: fixed; inset: 0; z-index: -1; width: 100%; height: 100%; pointer-events: none; }

/* the hidden attribute must always win over class display rules */
[hidden] { display: none !important; }