/*
 * Sanctum Enora — teaser landing page styles
 *
 * Design tokens and interactive patterns reproduced independently from the
 * main app's design system (sanctum-enora-production/src/styles.css).
 * No files from the production project are imported or referenced here.
 *
 * Fonts: Cinzel (display), Cormorant Garamond (serif) — loaded via Google Fonts
 * Palette: oklch throughout, matching the main app exactly
 */

/* ── Custom properties ──────────────────────────────────────────────────── */

:root {
  /* Sacred palette */
  --ink:        oklch(0.16 0.022 18);     /* deep charcoal w/ burgundy undertone */
  --cream:      oklch(0.953 0.018 75);    /* aged cream */
  --cream-deep: oklch(0.89 0.028 70);     /* parchment */
  --amber:      oklch(0.74 0.13 70);      /* warm amber gold */
  --amber-soft: oklch(0.82 0.09 75);      /* candle glow */

  /* Chamber background layers */
  --ch-bg:      var(--ink);
  --ch-mid:     oklch(0.28 0.04 35 / 0.55);
  --ch-edge:    oklch(0.08 0.02 18 / 0.85);
  --ch-grain-1: oklch(0.22 0.03 25 / 0.10);
  --ch-grain-2: oklch(0.20 0.025 22 / 0.06);
}

/* ── Reset ──────────────────────────────────────────────────────────────── */

*, *::before, *::after {
  box-sizing: border-box;
  margin: 0;
  padding: 0;
}

/* ── Base ───────────────────────────────────────────────────────────────── */

html {
  height: 100%;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
}

body {
  min-height: 100vh;
  background-color: var(--ch-bg);
  color: var(--cream);
  font-family: 'Cormorant Garamond', 'Times New Roman', serif;

  /* Aged stone / candlelit chamber texture — three gradient layers + fine grain */
  background-image:
    radial-gradient(ellipse 90% 70% at 50% 35%, var(--ch-mid), transparent 70%),
    radial-gradient(ellipse 120% 90% at 50% 50%, transparent 40%, var(--ch-edge) 100%),
    repeating-radial-gradient(circle at 30% 20%, var(--ch-grain-1) 0px, transparent 2px, transparent 4px),
    repeating-linear-gradient(135deg, var(--ch-grain-2) 0px, transparent 1px, transparent 3px);
  background-attachment: scroll;
}

/* ── Twinkling star layers ──────────────────────────────────────────────── */
/*
 * Three offset groups (body::before, body::after, html::after) cycle
 * independently so stars appear to breathe at different rhythms.
 * mix-blend-mode: screen lets them sit above the dark background
 * without washing out adjacent elements.
 */

body::after {
  content: '';
  position: fixed;
  inset: 0;
  pointer-events: none;
  z-index: 2;
  mix-blend-mode: screen;
  background-image:
    radial-gradient(circle at 12% 28%, oklch(0.95 0.14 78 / 1) 0, transparent 1.4px),
    radial-gradient(circle at 78% 64%, oklch(0.92 0.13 75 / 0.9) 0, transparent 1.2px),
    radial-gradient(circle at 42% 82%, oklch(0.96 0.14 80 / 1) 0, transparent 1.5px),
    radial-gradient(circle at 88% 18%, oklch(0.93 0.13 76 / 0.9) 0, transparent 1.3px),
    radial-gradient(circle at 22% 58%, oklch(0.95 0.14 78 / 1) 0, transparent 1.3px),
    radial-gradient(circle at 60% 38%, oklch(0.94 0.13 74 / 0.9) 0, transparent 1.2px),
    radial-gradient(circle at  8% 88%, oklch(0.92 0.13 72 / 0.9) 0, transparent 1.1px),
    radial-gradient(circle at 95% 78%, oklch(0.96 0.14 80 / 1) 0, transparent 1.4px);
  animation: twinkle-a 3.4s ease-in-out infinite;
}

body::before {
  content: '';
  position: fixed;
  inset: 0;
  pointer-events: none;
  z-index: 2;
  mix-blend-mode: screen;
  background-image:
    radial-gradient(circle at 33% 12%, oklch(0.95 0.14 78 / 1) 0, transparent 1.4px),
    radial-gradient(circle at 67% 22%, oklch(0.93 0.13 75 / 0.9) 0, transparent 1.3px),
    radial-gradient(circle at 18% 72%, oklch(0.96 0.14 80 / 1) 0, transparent 1.4px),
    radial-gradient(circle at 82% 48%, oklch(0.94 0.13 76 / 0.9) 0, transparent 1.2px),
    radial-gradient(circle at 50% 92%, oklch(0.96 0.14 78 / 1) 0, transparent 1.4px),
    radial-gradient(circle at  5% 42%, oklch(0.93 0.13 74 / 0.9) 0, transparent 1.2px),
    radial-gradient(circle at 72% 88%, oklch(0.95 0.14 80 / 1) 0, transparent 1.3px),
    radial-gradient(circle at 38% 48%, oklch(0.95 0.14 78 / 1) 0, transparent 1.2px);
  animation: twinkle-b 4.1s ease-in-out infinite;
}

html::after {
  content: '';
  position: fixed;
  inset: 0;
  pointer-events: none;
  z-index: 2;
  mix-blend-mode: screen;
  background-image:
    radial-gradient(circle at 27% 35%, oklch(0.95 0.14 78 / 1) 0, transparent 1.3px),
    radial-gradient(circle at 55% 68%, oklch(0.93 0.13 75 / 0.9) 0, transparent 1.2px),
    radial-gradient(circle at 90% 38%, oklch(0.96 0.14 80 / 1) 0, transparent 1.4px),
    radial-gradient(circle at 14% 18%, oklch(0.94 0.13 76 / 0.9) 0, transparent 1.2px),
    radial-gradient(circle at 62%  8%, oklch(0.96 0.14 78 / 1) 0, transparent 1.3px),
    radial-gradient(circle at 45% 55%, oklch(0.93 0.13 74 / 0.9) 0, transparent 1.2px),
    radial-gradient(circle at 88% 92%, oklch(0.95 0.14 80 / 1) 0, transparent 1.3px),
    radial-gradient(circle at  2% 62%, oklch(0.95 0.14 78 / 1) 0, transparent 1.2px);
  animation: twinkle-c 5.2s ease-in-out infinite;
}

@keyframes twinkle-a {
  0%, 100% { opacity: 0; }
  40%       { opacity: 0; }
  55%       { opacity: 1; }
  70%       { opacity: 0; }
}
@keyframes twinkle-b {
  0%, 100% { opacity: 0; }
  20%       { opacity: 1; }
  40%       { opacity: 0; }
}
@keyframes twinkle-c {
  0%, 100% { opacity: 0; }
  65%       { opacity: 0; }
  80%       { opacity: 1; }
  95%       { opacity: 0; }
}

/* ── Ambient candle glow ────────────────────────────────────────────────── */

.candle-glow {
  position: fixed;
  inset: 0;
  pointer-events: none;
  z-index: 1;
  background: radial-gradient(
    ellipse 80% 70% at 50% 52%,
    oklch(0.85 0.10 75 / 0.07) 0%,
    transparent 65%
  );
  animation: candle-breath 9s ease-in-out infinite;
}

@keyframes candle-breath {
  0%, 100% { opacity: 0.7; }
  50%       { opacity: 1;   }
}

/* ── Button / link base ─────────────────────────────────────────────────── */

button, [role="button"] {
  -webkit-appearance: none;
  appearance: none;
  -webkit-tap-highlight-color: transparent;
  background: transparent;
  border: none;
  box-shadow: none;
  text-decoration: none;
  cursor: pointer;
  color: inherit;
  font: inherit;
}

a {
  color: inherit;
  text-decoration: none;
}

/* Buttons and links: no box ring on focus — text glows instead */
button:focus-visible,
[role="button"]:focus-visible,
a:focus-visible {
  outline: none;
  box-shadow: none;
  text-shadow: 0 0 8px oklch(0.74 0.13 70 / 0.65), 0 0 20px oklch(0.74 0.13 70 / 0.32);
}

/* ── Glow-word — the shared no-chrome interactive text treatment ────────── */
/*
 * Matches .glow-word / .word-toggle / .menu-glow from the main app exactly.
 * No background, no border, no box chrome in any state.
 * On hover/focus: color lifts to amber and a word-shimmer animation breathes.
 */

.glow-word {
  background: transparent !important;
  border: 0 !important;
  box-shadow: none !important;
  outline: none;
  transition: color 0.45s ease, text-shadow 0.45s ease;
}

.glow-word:hover,
.glow-word:focus,
.glow-word:focus-visible,
.glow-word:active {
  box-shadow: none !important;
  outline: none;
  color: var(--amber);
  text-shadow: 0 0 8px color-mix(in oklab, var(--amber) 55%, transparent);
  animation: word-shimmer 1.6s ease-in-out infinite;
}

.glow-word:active {
  animation: word-shimmer 0.9s ease-in-out;
}

@keyframes word-shimmer {
  0%, 100% {
    text-shadow:
      0 0 5px  color-mix(in oklab, var(--amber) 40%, transparent),
      0 0 11px color-mix(in oklab, var(--amber) 22%, transparent);
  }
  50% {
    text-shadow:
      0 0 10px color-mix(in oklab, var(--amber) 70%, transparent),
      0 0 20px color-mix(in oklab, var(--amber) 40%, transparent);
  }
}

/* ── Gold divider ───────────────────────────────────────────────────────── */

.gold-divider {
  height: 1px;
  background: linear-gradient(90deg, transparent, var(--amber) 50%, transparent);
  opacity: 0.5;
}

/* ── View switching ─────────────────────────────────────────────────────── */

.view[hidden] { display: none !important; }

.view {
  position: relative;
  z-index: 10;
}

/* ── Entrance animations ────────────────────────────────────────────────── */

@keyframes fade-rise {
  from { opacity: 0; transform: translateY(10px); }
  to   { opacity: 1; transform: translateY(0);    }
}

/* ── Doors view ─────────────────────────────────────────────────────────── */

.doors-stage {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  min-height: 100vh;
  padding: 3.5rem 1.5rem;
  text-align: center;
}

/* Header: site label + divider + prelude line */
.doors-header {
  margin-bottom: 4rem;
  animation: fade-rise 1.2s ease-out 0.2s both;
}

.site-label {
  font-family: 'Cinzel', serif;
  font-size: 1.05rem;
  font-weight: 400;
  letter-spacing: 0.48em;
  text-transform: uppercase;
  color: oklch(0.74 0.13 70 / 0.88);
  margin-bottom: 1.1rem;
}

.doors-header .gold-divider {
  max-width: 5.5rem;
  margin: 0 auto 1.25rem;
}

.doors-prelude {
  font-family: 'Cormorant Garamond', serif;
  font-style: normal;
  font-size: 0.95rem;
  color: oklch(0.953 0.018 75 / 0.55);
  letter-spacing: 0.06em;
}

/* Door list */
.doors-nav {
  display: flex;
  flex-direction: column;
  align-items: center;
  width: 100%;
  max-width: 26rem;
  border: 1px solid oklch(0.74 0.13 70 / 0.45);
  border-radius: 2px;
  animation: fade-rise 1.2s ease-out 0.65s both;
}

.door-divider {
  width: 55%;
  max-width: 12rem;
}

/* Individual door — the entire button is the interactive area */
.door {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 0.6rem;
  padding: 2rem 2rem;
  width: 100%;
  /* No background, border, or box treatment — interactivity is text-only */
}

.door:focus-visible {
  outline: none;
  box-shadow: none;
}

/* Door glyph: ornamental ✦ */
.door-glyph {
  display: block;
  font-size: 0.55rem;
  color: oklch(0.74 0.13 70 / 0.50);
  transition: color 0.45s ease, text-shadow 0.45s ease;
  line-height: 1;
  letter-spacing: 0;
}

/* Door name: Cinzel display type, uppercase — readable at rest, glows on interaction */
.door-name {
  font-family: 'Cinzel', serif;
  font-size: 0.7rem;
  font-weight: 400;
  letter-spacing: 0.35em;
  text-transform: uppercase;
  color: oklch(0.74 0.13 70 / 0.88);
  transition: color 0.45s ease, text-shadow 0.45s ease;
  line-height: 1;
}

/* Door copy: Cormorant Garamond italic — readable at rest, brightens on interaction */
.door-copy {
  font-family: 'Cormorant Garamond', serif;
  font-style: italic;
  font-size: 1.05rem;
  line-height: 1.5;
  letter-spacing: 0.01em;
  color: oklch(0.953 0.018 75 / 0.72);
  max-width: 28ch;
  transition: color 0.45s ease;
}

/*
 * Hover/focus/active/is-tapping: all children glow as a unit.
 *
 * :active fires on touch (buttons reliably get cursor:pointer via the reset,
 * which enables :active on iOS Safari). .is-tapping is added/removed via JS
 * touchstart/touchend so fast taps still see a visible glow duration.
 */
.door:hover .door-glyph,
.door:focus .door-glyph,
.door:focus-visible .door-glyph,
.door:active .door-glyph,
.door.is-tapping .door-glyph {
  color: oklch(0.74 0.13 70 / 0.75);
  text-shadow: 0 0 6px oklch(0.74 0.13 70 / 0.40);
}

.door:hover .door-name,
.door:focus .door-name,
.door:focus-visible .door-name,
.door:active .door-name,
.door.is-tapping .door-name {
  color: var(--amber);
  animation: word-shimmer 1.6s ease-in-out infinite;
}

.door:hover .door-copy,
.door:focus .door-copy,
.door:focus-visible .door-copy,
.door:active .door-copy,
.door.is-tapping .door-copy {
  color: oklch(0.953 0.018 75 / 0.90);
}

/* ── Quiz placeholder views ─────────────────────────────────────────────── */

.quiz-stage {
  position: relative;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  min-height: 100vh;
  padding: 3.5rem 1.5rem;
  text-align: center;
  gap: 1.5rem;
  animation: fade-rise 0.5s ease-out both;
}

.back-link {
  position: absolute;
  top: 2rem;
  left: 2rem;
  font-family: 'Cinzel', serif;
  font-size: 0.58rem;
  letter-spacing: 0.28em;
  text-transform: uppercase;
  color: oklch(0.74 0.13 70 / 0.72);
  transition: color 0.45s ease, text-shadow 0.45s ease;
}

.back-link:hover,
.back-link:active,
.back-link.is-tapping {
  color: var(--amber);
  text-shadow:
    0 0 8px color-mix(in oklab, var(--amber) 55%, transparent);
  animation: word-shimmer 1.6s ease-in-out infinite;
}

.quiz-title {
  font-family: 'Cinzel', serif;
  font-size: 0.7rem;
  font-weight: 400;
  letter-spacing: 0.35em;
  text-transform: uppercase;
  color: oklch(0.74 0.13 70 / 0.55);
}

.quiz-placeholder {
  font-family: 'Cormorant Garamond', serif;
  font-style: italic;
  font-size: 1rem;
  color: oklch(0.953 0.018 75 / 0.35);
  letter-spacing: 0.02em;
}

/* ── Tarot quiz steps ────────────────────────────────────────────────────── */

.tarot-step {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 1.5rem;
  width: 100%;
  max-width: 26rem;
}

.tarot-step[hidden],
.astro-step[hidden],
.num-step[hidden]    { display: none !important; }

.progress-marker {
  font-family: 'Cinzel', serif;
  font-size: 0.58rem;
  letter-spacing: 0.28em;
  text-transform: uppercase;
  color: oklch(0.74 0.13 70 / 0.45);
}

.quiz-question {
  font-family: 'Cormorant Garamond', serif;
  font-style: italic;
  font-size: 1.45rem;
  line-height: 1.5;
  color: oklch(0.953 0.018 75 / 0.88);
  text-align: center;
  max-width: 30ch;
}

.quiz-choices {
  display: flex;
  flex-direction: column;
  gap: 0.85rem;
  width: 100%;
}

.quiz-choice {
  width: 100%;
  padding: 1.1rem 1.5rem;
  border: 1px solid oklch(0.74 0.13 70 / 0.22);
  border-radius: 2px;
  font-family: 'Cormorant Garamond', serif;
  font-style: italic;
  font-size: 1.05rem;
  line-height: 1.55;
  color: oklch(0.953 0.018 75 / 0.78);
  text-align: left;
  transition: border-color 0.35s ease, color 0.35s ease;
}

.quiz-choice:hover,
.quiz-choice:focus,
.quiz-choice:focus-visible,
.quiz-choice:active,
.quiz-choice.is-tapping {
  border-color: oklch(0.74 0.13 70 / 0.60);
  color: oklch(0.953 0.018 75 / 0.95);
  outline: none;
}

/* ── Tarot card frame ────────────────────────────────────────────────────── */

/* Outer border */
.card-frame {
  position: relative;
  width: 100%;
  max-width: 22rem;
  border: 1px solid oklch(0.74 0.13 70 / 0.45);
  border-radius: 3px;
  padding: 5px;
}

/* Corner ornaments — sit in the gap between the two border lines */
.card-frame-corner {
  position: absolute;
  font-size: 9px;
  line-height: 1;
  color: oklch(0.74 0.13 70 / 0.40);
  pointer-events: none;
  user-select: none;
  -webkit-user-select: none;
}
.card-frame-corner--tl { top: 8px;    left: 8px;  }
.card-frame-corner--tr { top: 8px;    right: 8px; }
.card-frame-corner--bl { bottom: 8px; left: 8px;  }
.card-frame-corner--br { bottom: 8px; right: 8px; }

/* Inner border + content area */
.card-frame-inner {
  border: 1px solid oklch(0.74 0.13 70 / 0.20);
  border-radius: 2px;
  padding: 2.25rem 1.75rem;
}

.card-roman {
  font-family: 'Cormorant Garamond', serif;
  font-size: 0.8rem;
  letter-spacing: 0.45em;
  color: oklch(0.74 0.13 70 / 0.55);
  text-align: center;
  margin-bottom: 0.6rem;
}

.card-name {
  font-family: 'Cinzel', serif;
  font-size: 0.65rem;
  font-weight: 400;
  letter-spacing: 0.32em;
  text-transform: uppercase;
  color: oklch(0.74 0.13 70 / 0.82);
  text-align: center;
  margin-bottom: 1.35rem;
}

/* House tagline — sits between house name and divider on astrology cards only */
.card-name--house { margin-bottom: 0.3rem; }

/* Large number header on numerology reveal cards */
.card-number {
  font-family: 'Cinzel', serif;
  font-size: 3rem;
  font-weight: 500;
  color: oklch(0.74 0.13 70 / 0.90);
  text-align: center;
  line-height: 1;
  margin-bottom: 0.5rem;
}

/* Numerology dropdown select */
.num-select-wrap {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 2rem;
  width: 100%;
  margin-top: 0.5rem;
}

.num-select {
  -webkit-appearance: none;
  appearance: none;
  background: oklch(0.13 0.04 20 / 0.85);
  border: 1px solid oklch(0.74 0.13 70 / 0.30);
  border-radius: 2px;
  color: oklch(0.953 0.018 75 / 0.85);
  font-family: 'Cormorant Garamond', serif;
  font-style: italic;
  font-size: 1.1rem;
  padding: 0.7rem 1.2rem;
  width: 100%;
  max-width: 18rem;
  text-align: center;
  cursor: pointer;
  transition: border-color 0.3s ease;
}

.num-select:focus {
  outline: none;
  border-color: oklch(0.74 0.13 70 / 0.65);
}

.card-tagline {
  font-family: 'Cinzel', serif;
  font-size: 0.5rem;
  font-weight: 400;
  letter-spacing: 0.36em;
  text-transform: uppercase;
  color: oklch(0.74 0.13 70 / 0.42);
  text-align: center;
  margin-bottom: 1.1rem;
}

.card-divider {
  height: 1px;
  background: linear-gradient(90deg, transparent, oklch(0.74 0.13 70 / 0.40) 50%, transparent);
  margin-bottom: 1.6rem;
}

.card-body {
  font-family: 'Cormorant Garamond', serif;
  font-style: italic;
  font-size: 1rem;
  line-height: 1.9;
  color: oklch(0.953 0.018 75 / 0.82);
}

.card-body p + p { margin-top: 1.1rem; }

/* Last paragraph (CTA line) in amber */
.card-body p.cta { color: oklch(0.74 0.13 70 / 0.82); }

.card-divider-bottom {
  height: 1px;
  background: linear-gradient(90deg, transparent, oklch(0.74 0.13 70 / 0.40) 50%, transparent);
  margin-top: 1.6rem;
  margin-bottom: 0.9rem;
}

/* Upside-down roman numeral — traditional tarot reversed convention */
.card-roman-bottom {
  display: block;
  font-family: 'Cormorant Garamond', serif;
  font-size: 0.8rem;
  letter-spacing: 0.45em;
  color: oklch(0.74 0.13 70 / 0.55);
  text-align: center;
  transform: rotate(180deg);
}

/* Continue button (reveal → email) */
.quiz-continue {
  font-family: 'Cinzel', serif;
  font-size: 0.58rem;
  letter-spacing: 0.28em;
  text-transform: uppercase;
  color: oklch(0.74 0.13 70 / 0.65);
  transition: color 0.45s ease, text-shadow 0.45s ease;
}

.quiz-continue:hover,
.quiz-continue:focus,
.quiz-continue:focus-visible,
.quiz-continue:active,
.quiz-continue.is-tapping {
  color: var(--amber);
  text-shadow: 0 0 8px color-mix(in oklab, var(--amber) 55%, transparent);
  animation: word-shimmer 1.6s ease-in-out infinite;
  outline: none;
}

/* ── Email capture ───────────────────────────────────────────────────────── */

.email-capture {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 1rem;
  width: 100%;
  max-width: 22rem;
}

.email-prelude {
  font-family: 'Cormorant Garamond', serif;
  font-style: italic;
  font-size: 1.05rem;
  line-height: 1.6;
  color: oklch(0.953 0.018 75 / 0.65);
  text-align: center;
}

.email-input {
  width: 100%;
  padding: 0.8rem 1.1rem;
  background: oklch(0.16 0.022 18 / 0.55);
  border: 1px solid oklch(0.74 0.13 70 / 0.30);
  border-radius: 2px;
  color: oklch(0.953 0.018 75 / 0.90);
  font-family: 'Cormorant Garamond', serif;
  font-size: 1rem;
  outline: none;
  transition: border-color 0.35s ease;
  -webkit-appearance: none;
  appearance: none;
}

.email-input::placeholder { color: oklch(0.953 0.018 75 / 0.28); }
.email-input:focus { border-color: oklch(0.74 0.13 70 / 0.60); }

.email-submit {
  width: 100%;
  padding: 0.9rem 2rem;
  border: 1px solid oklch(0.74 0.13 70 / 0.35);
  border-radius: 2px;
  font-family: 'Cinzel', serif;
  font-size: 0.58rem;
  font-weight: 400;
  letter-spacing: 0.28em;
  text-transform: uppercase;
  color: oklch(0.74 0.13 70 / 0.82);
  transition: border-color 0.35s ease, color 0.35s ease, opacity 0.35s ease;
  outline: none;
}

.email-submit:hover,
.email-submit:focus,
.email-submit:focus-visible {
  border-color: oklch(0.74 0.13 70 / 0.70);
  color: var(--amber);
}

.email-submit:disabled {
  opacity: 0.45;
  cursor: default;
}

.email-error {
  font-family: 'Cormorant Garamond', serif;
  font-style: italic;
  font-size: 0.9rem;
  color: oklch(0.953 0.018 75 / 0.50);
  text-align: center;
}

.email-confirm {
  font-family: 'Cormorant Garamond', serif;
  font-style: italic;
  font-size: 1.05rem;
  line-height: 1.75;
  color: oklch(0.953 0.018 75 / 0.75);
  text-align: center;
  max-width: 26rem;
}

.email-confirm strong {
  display: block;
  font-style: normal;
  font-size: 1.25rem;
  color: oklch(0.953 0.018 75 / 0.90);
  margin-bottom: 0.5rem;
}