:root {
  --void: #07060b;
  --ink: #110d1a;
  --marble: #f3ece1;
  --gold: #ab8f52;
  --gold-bright: #d4b06a;
  --cream: #f2ece0;
  --maroon: #6b1f24;
  --maroon-deep: #2a1208;

  --font-display: "Playfair Display", "Times New Roman", serif;
  --font-accent: "Cormorant Garamond", serif;
  --font-label: "Jost", sans-serif;
}

* {
  box-sizing: border-box;
}

html {
  background: var(--void);
  color-scheme: dark;
}

/*
  Reveal is normally driven by JS adding html.is-ready once fonts/scene are
  ready (smooth fade-in). But the whole page must NOT stay invisible if that
  JS never runs (CDN blocked, a script error, etc.) — so this fallback
  keyframe fades the page in on its own after a couple of seconds regardless.
  html.is-ready cancels the fallback animation and takes over directly.
*/
@keyframes reveal-fallback {
  to { opacity: 1; }
}

body {
  margin: 0;
  background: var(--void);
  color: var(--marble);
  font-family: var(--font-label);
  overflow-x: hidden;
  cursor: default;
  opacity: 0;
  animation: reveal-fallback 0.01s linear 2.2s forwards;
}

html.is-ready body {
  animation: none;
  opacity: 1;
  transition: opacity 1.2s ease;
}

#scene-canvas {
  position: fixed;
  inset: 0;
  width: 100vw;
  height: 100vh;
  z-index: 0;
}

.grain {
  position: fixed;
  inset: 0;
  z-index: 1;
  pointer-events: none;
  opacity: 0.05;
  mix-blend-mode: overlay;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='120' height='120'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.9' numOctaves='2' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E");
}

/* --- intro halo: a one-time "take a breath" moment on page load ----------*/
.intro-overlay {
  position: fixed;
  inset: 0;
  z-index: 999;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 1.8rem;
  background: var(--void);
  pointer-events: none;
  animation: intro-overlay-fade 1.1s ease 3.1s forwards;
}

.intro-halo {
  position: absolute;
  width: 14rem;
  height: 14rem;
  border-radius: 50%;
  background: radial-gradient(circle, rgba(212, 176, 106, 0.85), rgba(212, 176, 106, 0.15) 45%, transparent 72%);
  filter: blur(4px);
  opacity: 0;
  animation: intro-halo-expand 2.6s cubic-bezier(0.16, 0.8, 0.3, 1) 0.2s forwards;
}

.intro-halo--two {
  animation-delay: 0.9s;
  animation-duration: 2.4s;
}

.intro-breath {
  position: relative;
  font-family: var(--font-accent);
  font-style: italic;
  font-size: clamp(1.1rem, 2.4vw, 1.6rem);
  color: var(--marble);
  letter-spacing: 0.02em;
  opacity: 0;
  animation: intro-breath-fade 1.4s ease 1.1s forwards;
}

@keyframes intro-halo-expand {
  0% { transform: scale(0.25); opacity: 0; }
  35% { opacity: 1; }
  100% { transform: scale(2.4); opacity: 0; }
}

@keyframes intro-breath-fade {
  0% { opacity: 0; transform: translateY(8px); }
  100% { opacity: 1; transform: translateY(0); }
}

@keyframes intro-overlay-fade {
  to { opacity: 0; visibility: hidden; }
}

@media (prefers-reduced-motion: reduce) {
  .intro-halo {
    animation: none;
    opacity: 0;
  }
  .intro-breath {
    animation: intro-breath-fade 0.6s ease 0.2s forwards;
  }
  .intro-overlay {
    animation: intro-overlay-fade 0.6s ease 1.4s forwards;
  }
}

.breath-line {
  font-family: var(--font-accent);
  font-style: italic;
  font-size: 0.95rem;
  letter-spacing: 0.02em;
  color: rgba(212, 176, 106, 0.65);
  margin: 0 0 1.6rem;
}

.flag-pair {
  display: inline-flex;
  gap: 0.2em;
  margin-right: 0.4em;
  vertical-align: middle;
}

.flag-icon {
  width: 1.15em;
  height: auto;
  border-radius: 1px;
  box-shadow: 0 0 0 1px rgba(0, 0, 0, 0.25);
}

.lang-toggle button {
  display: inline-flex;
  align-items: center;
}

.site-header {
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  z-index: 20;
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 1.6rem 2.6rem;
  font-family: var(--font-label);
  font-size: 0.72rem;
  letter-spacing: 0.22em;
  text-transform: uppercase;
  color: var(--marble);
  pointer-events: none;
  mix-blend-mode: difference;
}

.site-header__mark {
  font-family: var(--font-display);
  font-size: 0.85rem;
  letter-spacing: 0.18em;
}

#scroll-space {
  position: relative;
  z-index: 2;
}

.panel {
  position: relative;
  min-height: 100vh;
  display: flex;
  align-items: center;
  padding: 0 8vw;
  overflow: hidden;
}

.panel--hero { min-height: 100vh; }
.panel--atelier { min-height: 120vh; }
.panel--cosmos { min-height: 120vh; }
.panel--jyotish {
  min-height: 150vh;
  flex-direction: column;
  justify-content: flex-start;
  align-items: center;
  padding-top: 10vh;
  overflow: visible;
}

/* This section is tall (150vh) so the camera has room to move through the
   zodiac wheel depth. The content used to be vertically centered as one
   clump, so most of that height was empty space and the title only sat
   onscreen, readably, for a small slice of the scroll before the whole
   clump scrolled past. Real gaps between each block (title, body copy,
   wheel) spread them across the section's actual height instead, so each
   one gets genuine dwell time in view — in normal document flow, nothing
   pinned or layered, so nothing can ever overlap. */
.panel--jyotish .panel__content--center {
  gap: 6vh;
}

.panel--cosmology { min-height: 120vh; }
.panel--footer { min-height: 90vh; justify-content: center; text-align: center; flex-direction: column; }

.panel__veil {
  position: absolute;
  inset: 0;
  background: radial-gradient(ellipse at 50% 40%, rgba(7, 6, 11, 0.15), rgba(7, 6, 11, 0.85) 75%);
  pointer-events: none;
  z-index: 0;
}

.panel__content {
  position: relative;
  z-index: 1;
  max-width: 46rem;
}

.panel__content--left { margin-right: auto; }
.panel__content--center {
  max-width: 40rem;
  text-align: center;
  margin: 0 auto;
  display: flex;
  flex-direction: column;
  align-items: center;
}

.eyebrow {
  font-family: var(--font-label);
  font-size: 0.75rem;
  letter-spacing: 0.3em;
  text-transform: uppercase;
  color: var(--gold-bright);
  margin: 0 0 1.4rem;
}

.display {
  font-family: var(--font-display);
  font-weight: 900;
  font-size: clamp(2.6rem, 6vw, 5.4rem);
  line-height: 1.02;
  margin: 0 0 1.4rem;
  color: var(--marble);
  text-wrap: balance;
}

.display--hero {
  font-size: clamp(3.6rem, 11vw, 9rem);
  letter-spacing: 0.02em;
}

.display--closing {
  font-size: clamp(2.4rem, 6vw, 4.2rem);
}

.lede {
  font-family: var(--font-accent);
  font-style: italic;
  font-size: clamp(1.05rem, 1.6vw, 1.4rem);
  line-height: 1.6;
  color: rgba(243, 236, 225, 0.82);
  max-width: 34rem;
}

.panel--jyotish .lede { max-width: 30rem; margin: 0 auto; }

.scroll-cue {
  margin-top: 4rem;
  display: flex;
  flex-direction: column;
  gap: 0.6rem;
  font-family: var(--font-label);
  font-size: 0.68rem;
  letter-spacing: 0.2em;
  text-transform: uppercase;
  color: rgba(243, 236, 225, 0.6);
}

.scroll-cue__line {
  width: 1px;
  height: 3.4rem;
  background: linear-gradient(to bottom, var(--gold-bright), transparent);
}

.zodiac-wheel {
  margin-top: 3rem;
  width: min(420px, 80vw);
  aspect-ratio: 1;
}

.zodiac-wheel__svg {
  width: 100%;
  height: 100%;
  overflow: visible;
}

.zodiac-ring {
  fill: none;
  stroke: rgba(201, 162, 77, 0.55);
  stroke-width: 1;
}

.zodiac-ring--inner {
  stroke: rgba(107, 31, 36, 0.55);
}

.zodiac-tick {
  stroke: rgba(243, 236, 225, 0.25);
  stroke-width: 1;
}

.zodiac-glyph {
  font-family: var(--font-display);
  font-size: 1.6rem;
  fill: var(--gold-bright);
  font-variant-emoji: text;
}

.footer-fineprint {
  margin-top: 3rem;
  max-width: 34rem;
  font-size: 0.72rem;
  line-height: 1.6;
  color: rgba(243, 236, 225, 0.4);
}

.footer-fineprint code {
  color: rgba(243, 236, 225, 0.55);
}

/* --- toast --------------------------------------------------------------*/
.toast {
  position: fixed;
  left: 50%;
  bottom: 2.4rem;
  transform: translate(-50%, 0.6rem);
  z-index: 30;
  padding: 0.85rem 1.4rem;
  background: var(--gold);
  color: var(--ink);
  font-family: var(--font-label);
  font-size: 0.82rem;
  letter-spacing: 0.04em;
  border-radius: 2px;
  box-shadow: 0 8px 24px rgba(0, 0, 0, 0.4);
  opacity: 0;
  pointer-events: none;
  transition: opacity 0.25s ease, transform 0.25s ease;
}

.toast--visible {
  opacity: 1;
  transform: translate(-50%, 0);
}

/* --- language toggle ---------------------------------------------------- */
.lang-toggle {
  position: fixed;
  top: 4.6rem;
  right: 2.6rem;
  z-index: 21;
  display: flex;
  gap: 0.4rem;
  pointer-events: auto;
}

.lang-toggle button {
  font-family: var(--font-label);
  font-size: 0.68rem;
  letter-spacing: 0.15em;
  padding: 0.45rem 0.9rem;
  border: 1px solid rgba(243, 236, 225, 0.35);
  background: transparent;
  color: rgba(243, 236, 225, 0.75);
  cursor: pointer;
  border-radius: 2px;
  transition: background 0.2s ease, color 0.2s ease;
}

.lang-toggle button[aria-pressed="true"] {
  background: var(--gold);
  border-color: var(--gold);
  color: var(--ink);
}

/* --- testimonials --------------------------------------------------------*/
.stat-line {
  font-family: var(--font-label);
  font-size: 0.72rem;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: var(--gold-bright);
  margin: 0 0 0.4rem;
}

.testimonial-grid {
  margin-top: 2.4rem;
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 1.6rem 2.4rem;
  max-width: 56rem;
}

.testimonial {
  border-left: 2px solid var(--gold);
  padding-left: 1.1rem;
}

.testimonial p {
  font-family: var(--font-accent);
  font-style: italic;
  font-size: 1.02rem;
  line-height: 1.55;
  color: rgba(243, 236, 225, 0.88);
  margin: 0 0 0.6rem;
}

.testimonial cite {
  font-family: var(--font-label);
  font-style: normal;
  font-size: 0.68rem;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--gold-bright);
}

.reviews-link {
  display: inline-block;
  margin-top: 1.8rem;
  font-family: var(--font-label);
  font-size: 0.72rem;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--gold-bright);
  text-decoration: none;
  border-bottom: 1px solid rgba(212, 176, 106, 0.4);
}

/* --- steps / how it works ------------------------------------------------*/
.steps-list {
  margin: 2.2rem 0 0;
  padding: 0;
  list-style: none;
  counter-reset: step;
  display: flex;
  flex-direction: column;
  gap: 1.4rem;
  max-width: 34rem;
}

.step {
  display: grid;
  grid-template-columns: 2.2rem 1fr;
  gap: 0.6rem;
}

.step__number {
  font-family: var(--font-display);
  font-style: italic;
  font-size: 1.3rem;
  color: var(--gold-bright);
}

.step__title {
  font-family: var(--font-label);
  font-weight: 500;
  font-size: 0.95rem;
  letter-spacing: 0.03em;
  color: var(--marble);
  margin: 0 0 0.3rem;
}

.step__body {
  font-family: var(--font-label);
  font-size: 0.88rem;
  line-height: 1.6;
  color: rgba(243, 236, 225, 0.7);
  margin: 0;
}

.step__body a {
  color: var(--gold-bright);
}

.donation-note {
  margin-top: 2rem;
  padding: 1.2rem 1.4rem;
  max-width: 34rem;
  border: 1px solid rgba(212, 176, 106, 0.3);
  background: rgba(243, 236, 225, 0.04);
  border-radius: 2px;
}

.donation-note__title {
  font-family: var(--font-label);
  font-size: 0.72rem;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--gold-bright);
  margin: 0 0 0.5rem;
}

.donation-note p {
  font-family: var(--font-label);
  font-size: 0.85rem;
  line-height: 1.6;
  color: rgba(243, 236, 225, 0.72);
  margin: 0;
}

/* --- CTA buttons -----------------------------------------------------*/
.btn {
  display: inline-block;
  font-family: var(--font-label);
  font-size: 0.78rem;
  letter-spacing: 0.15em;
  text-transform: uppercase;
  padding: 0.95rem 2rem;
  border-radius: 2px;
  text-decoration: none;
  cursor: pointer;
  transition: background 0.25s ease, color 0.25s ease, border-color 0.25s ease;
}

.btn--solid {
  background: var(--gold);
  color: var(--ink);
  border: 1px solid var(--gold);
}

.btn--solid:hover {
  background: var(--gold-bright);
  border-color: var(--gold-bright);
}

.btn--outline {
  background: transparent;
  color: var(--marble);
  border: 1px solid rgba(243, 236, 225, 0.4);
}

.btn--outline:hover {
  background: rgba(243, 236, 225, 0.08);
}

.contact-email {
  display: inline-block;
  margin: 1rem 0 1.6rem;
  font-family: var(--font-label);
  font-size: 0.95rem;
  color: var(--gold-bright);
  text-decoration: none;
  border-bottom: 1px solid rgba(212, 176, 106, 0.4);
}

/* --- about Mars ----------------------------------------------------------*/
.about-mars {
  display: grid;
  grid-template-columns: 12rem 1fr;
  gap: 2.2rem;
  align-items: start;
  max-width: 44rem;
  text-align: left;
  margin-top: 1rem;
}

.about-mars__portrait {
  width: 12rem;
  height: 12rem;
  border-radius: 50%;
  border: 1px solid rgba(212, 176, 106, 0.4);
  object-fit: cover;
  background: radial-gradient(circle at 40% 30%, rgba(212, 176, 106, 0.18), rgba(7, 6, 11, 0.6));
}

.about-mars__portrait--placeholder {
  display: flex;
  align-items: center;
  justify-content: center;
  font-family: var(--font-display);
  font-size: 2.4rem;
  color: var(--gold-bright);
}

@media (max-width: 720px) {
  .about-mars {
    grid-template-columns: 1fr;
    text-align: center;
    justify-items: center;
  }

  .testimonial-grid {
    grid-template-columns: 1fr;
  }

  .panel { padding: 0 6vw; }

  .site-header {
    padding: 1.2rem 5vw;
  }

  .site-header__label {
    display: none;
  }

  .lang-toggle {
    top: auto;
    bottom: 1.2rem;
    right: 1.2rem;
  }

  .lang-toggle button {
    padding: 0.35rem 0.65rem;
    font-size: 0.6rem;
  }
}