@import url('brand-tokens.css');

/* Tarotscope — Tarot Reading Page (v2.0 palette per REQ-280). Core brand tokens
   come from brand-tokens.css (imported above — the single source); only
   tarot-reading-specific accents are declared here. */

:root {
  --terracotta: #d98aa8; --terracotta-light: #e4a4bf;
  --deep-blue: #4a6fa5; --forest-green: #b5a8e8;
  --oracle-accent: #8ec4b8; --mocker-accent: #d98aa8;
}
* { margin: 0; padding: 0; box-sizing: border-box; }
html { scroll-behavior: smooth; }
/* Audit P1-G: was `body { font-size: 120% }` — that 1.2× inflation is
   intended for the tarot-reading flow itself but cascades onto every
   other page that loads this stylesheet. archetypes.html (`body.ts-tarot`)
   inherited the 1.2× even though it has no tarot-specific content,
   making archetype-card text overflow on 320px. Scoping the inflation
   to `body.ts-tarot-reading` keeps the reading page's typography
   while leaving the gallery alone. */
body { background: var(--bg-deep); color: var(--text-main); font-family: 'Cormorant Garamond', serif; overflow-x: hidden; line-height: 1.7; }
body.ts-tarot-reading { font-size: 120%; }
body::before { content: ''; position: fixed; inset: 0; background-image: url("data:image/svg+xml,%3Csvg viewBox='0 0 512 512' xmlns='http://www.w3.org/2000/svg'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.65' numOctaves='5' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)' opacity='0.035'/%3E%3C/svg%3E"); pointer-events: none; z-index: 9999; }

/* Top bar → provided by tarotscope-base.css (.ts-top-bar) */

/* ── Portrait Hero ── */
.portrait-section { padding: 8rem 2rem 4rem; text-align: center; position: relative; min-height: 60vh; display: flex; flex-direction: column; justify-content: center; align-items: center; }
.portrait-section::before { content: ''; position: absolute; inset: 0; background: radial-gradient(ellipse 500px 300px at 30% 40%, rgba(217,138,168,0.04), transparent), radial-gradient(ellipse 500px 300px at 70% 60%, rgba(42,61,107,0.04), transparent), radial-gradient(ellipse 300px 300px at 50% 50%, rgba(201,168,109,0.03), transparent); }
.portrait-section::after { content: ''; position: absolute; inset: 0; background: radial-gradient(1.5px 1.5px at 12% 20%, rgba(201,168,109,0.4) 50%, transparent 50%), radial-gradient(1px 1px at 30% 60%, rgba(228,201,138,0.25) 50%, transparent 50%), radial-gradient(1.5px 1.5px at 52% 12%, rgba(201,168,109,0.3) 50%, transparent 50%), radial-gradient(1px 1px at 72% 50%, rgba(228,201,138,0.2) 50%, transparent 50%), radial-gradient(1px 1px at 88% 30%, rgba(201,168,109,0.25) 50%, transparent 50%); animation: twinkle 6s ease-in-out infinite alternate; }
@keyframes twinkle { 0% { opacity: 0.5; } 100% { opacity: 1; } }
.portrait-content { position: relative; z-index: 2; max-width: 700px; opacity: 0; animation: fadeIn 1.5s ease-out 0.3s forwards; }
.user-glyph { font-size: 1.8rem; color: var(--gold-frame); letter-spacing: 0.4em; margin-bottom: 1rem; }
.user-name { font-family: var(--f-display); font-size: clamp(2rem, 4vw, 3rem); color: var(--gold); margin-bottom: 0.3rem; }
.user-meta { font-family: var(--f-mono); font-size: 0.8rem; color: var(--text-dim); letter-spacing: 0.15em; text-transform: uppercase; margin-bottom: 2.5rem; }
.portrait-text { font-size: 1.35rem; line-height: 1.9; font-style: italic; color: var(--cream-warm); max-width: 600px; margin: 0 auto; }
.portrait-divider { display: flex; align-items: center; justify-content: center; gap: 1rem; margin-top: 3rem; color: var(--gold-dark); font-size: 0.9rem; letter-spacing: 0.3em; }
.portrait-divider::before, .portrait-divider::after { content: ''; width: 80px; height: 1px; background: linear-gradient(to right, transparent, var(--gold-dark), transparent); }
@keyframes fadeIn { from { opacity: 0; transform: translateY(15px); } to { opacity: 1; transform: translateY(0); } }

/* ── Missing-sections note (REQ-714, spec/tech/23 §23.22) ──
   A delivered reading names its gaps. The class is the one the five thematic
   result pages already use, so both surfaces say the same thing in the same
   words off one catalog key; its rule lives in `progressive.css`, which this
   page does not load — hence a v1.0 twin here rather than pulling a whole
   dashboard stylesheet onto a v1.0 page. The register is `.closing-question`'s,
   the page's established callout, reused rather than reinvented. */
.ts-result-partial-note { max-width: 1100px; margin: 0 auto; padding: 1.25rem 2rem; border-left: 2px solid var(--gold-frame); background: rgba(201,168,109,0.02); font-size: 1.05rem; font-style: italic; line-height: 1.7; color: var(--gold-bright); }

/* ── Vector Nav (icon-only toolbar) ──
   Sticky band sits flush below the top-nav (REQ-272, top:0, h~72) and the
   breadcrumb (REQ-274, top:72, h~48). Top:120 = 72 + 48; z lowered to 30 so
   the top-nav (50) and breadcrumb (40) always paint above this rail (REQ-280). */
.vector-nav { position: sticky; top: 120px; z-index: 30; background: rgba(11,10,18,0.95); backdrop-filter: blur(10px); border-bottom: 1px solid rgba(201,168,109,0.08); padding: 0.5rem 1rem; display: flex; justify-content: center; align-items: center; gap: 0; overflow-x: auto; -webkit-overflow-scrolling: touch; scrollbar-width: none; }
.vector-nav::-webkit-scrollbar { display: none; }
/* UX-audit sample_tarot F01 / auth_tarot F01: was 2.6rem desktop / 2.2rem
   mobile (~35px). 44px hit-area floor per iOS HIG; the planet glyph itself
   stays small inside a larger transparent target. */
.vector-nav-item { display: flex; align-items: center; justify-content: center; min-width: 44px; min-height: 44px; cursor: pointer; border-bottom: 2px solid transparent; transition: all var(--t) var(--ease); flex-shrink: 0; text-decoration: none; background: none; border-top: none; border-left: none; border-right: none; font: inherit; color: inherit; }
.vector-nav-item:hover { border-bottom-color: rgba(201,168,109,0.3); }
.vector-nav-item.active { border-bottom-color: var(--gold); }
.vector-nav-item .nav-planet { font-size: 1.3rem; color: var(--gold-dark); transition: color var(--t) var(--ease); }
.vector-nav-item.active .nav-planet, .vector-nav-item:hover .nav-planet { color: var(--gold); }
.nav-separator { width: 1px; height: 1.4rem; background: rgba(201,168,109,0.2); margin: 0 0.5rem; flex-shrink: 0; }
.nav-action .nav-planet { font-size: 1.1rem; }

/* ── Vector Sections ── */
/* scroll-margin clears top-nav (72) + breadcrumb (48) + vector-nav (~46) + buffer */
.vector-section { padding: 4rem 2rem; max-width: 1100px; margin: 0 auto; scroll-margin-top: 176px; }
.vector-section + .vector-section { border-top: 1px solid rgba(201,168,109,0.06); }
.vector-header { text-align: center; margin-bottom: 3rem; }
.vector-label { font-family: var(--f-mono); font-size: 0.75rem; color: var(--text-dim); letter-spacing: 0.2em; text-transform: uppercase; margin-bottom: 0.3rem; }
.vector-title { font-family: var(--f-display); font-size: clamp(1.5rem, 3vw, 2rem); color: var(--gold); }
.vector-archetype { font-family: var(--f-display); font-size: 1rem; color: var(--cream-dim); margin-top: 0.3rem; letter-spacing: 0.06em; }

.vector-body { display: grid; grid-template-columns: 240px 1fr; gap: 3rem; align-items: start; }
/* Sticky tarot card sits below the vector-nav band (top 120 + h ~46 = 166) — round to 172 for a 6 px buffer. */
.card-column { position: sticky; top: 172px; text-align: center; }
.card-column img { width: 100%; max-width: 220px; border-radius: 6px; box-shadow: 0 10px 40px rgba(0,0,0,0.4), 0 0 20px rgba(201,168,109,0.05); transition: opacity var(--t) var(--ease); }
.card-archetype-name { font-family: var(--f-display); font-size: 1.1rem; color: var(--gold); margin-top: 1rem; }
/* .card-base-archetype removed (level1 base archetype no longer displayed) */
.reading-column { min-width: 0; }

/* Layer 2 */
.layer-2 { font-size: 1.25rem; font-style: italic; line-height: 1.9; color: var(--cream-warm); padding: 1.5rem 2rem; border-left: 2px solid var(--gold-frame); background: linear-gradient(to right, rgba(201,168,109,0.03), transparent); margin-bottom: 2.5rem; position: relative; }
.layer-2::before { content: 'II'; position: absolute; top: -0.5rem; left: -1.2rem; font-family: var(--f-mono); font-size: 0.7rem; font-style: normal; color: var(--gold-dark); background: var(--bg-deep); padding: 0.2rem 0.4rem; letter-spacing: 0.05em; }

/* Layer 3 */
.layer-3 { font-size: 1.05rem; line-height: 1.9; color: var(--cream-dim); }
.layer-3-label { font-family: var(--f-mono); font-size: 0.7rem; color: var(--text-dim); letter-spacing: 0.15em; text-transform: uppercase; margin-bottom: 1rem; display: block; }
.layer-3 p { margin-bottom: 1rem; }

.fact-tag, .astro-fact { color: var(--gold); border-bottom: 1px dotted var(--gold-dark); cursor: pointer; transition: all var(--t) var(--ease); }
.fact-tag:hover, .astro-fact:hover { color: var(--gold-bright); border-color: var(--gold); }

/* Closing question */
.closing-question { margin-top: 2.5rem; padding: 1.5rem 2rem; border-left: 2px solid var(--gold-frame); background: rgba(201,168,109,0.02); font-size: 1.15rem; font-style: italic; color: var(--gold-bright); line-height: 1.7; }
.closing-question::before { content: '?'; font-family: var(--f-display); font-size: 2rem; font-style: normal; color: var(--gold-dark); float: left; margin-right: 0.8rem; margin-top: -0.2rem; }

/* Ornate divider */
.ornate-line { display: flex; align-items: center; justify-content: center; gap: 1rem; padding: 1.5rem 0; color: var(--gold-frame); font-size: 0.9rem; letter-spacing: 0.4em; opacity: 0.5; }
.ornate-line::before, .ornate-line::after { content: ''; flex: 1; max-width: 120px; height: 1px; background: linear-gradient(to right, transparent, var(--gold-frame), transparent); }

/* Footer → provided by tarotscope-base.css (.ts-footer) */

/* Mode transitions */
.mode-content { transition: opacity 0.4s ease; }
/* REQ-719 — the named gap, when the selected register produced no text for
   this field. Deliberately quieter than the prose it stands in for: it is a
   note about the reading, not a sentence of it. Tokens only, no raw hex. */
.mode-content.register-missing { color: var(--gold-dim); font-style: normal; opacity: 0.85; }
.mode-content.hiding { opacity: 0; }
.vector-section[data-mode="satirical"] .layer-2 { border-left-color: var(--terracotta); background: linear-gradient(to right, rgba(217,138,168,0.04), transparent); }
.vector-section[data-mode="satirical"] .closing-question { border-left-color: var(--terracotta); background: rgba(217,138,168,0.02); }

/* Per-card mode switch */
.card-mode-switch { display: flex; justify-content: center; gap: 0; margin-top: 1.2rem; }
.card-mode-switch button { padding: 0.4rem 1.2rem; border: 1px solid rgba(201,168,109,0.25); background: transparent; color: var(--cream-dim); font-family: var(--f-mono); font-size: 0.65rem; letter-spacing: 0.1em; text-transform: uppercase; cursor: pointer; transition: all var(--t) var(--ease); }
.card-mode-switch button:first-child { border-right: none; border-radius: 3px 0 0 3px; }
.card-mode-switch button:last-child { border-radius: 0 3px 3px 0; }
.card-mode-switch button.active { background: rgba(201,168,109,0.1); color: var(--gold); border-color: var(--gold-frame); }

/* Card flip */
.card-flip { perspective: 800px; }
/* A vector whose card was never drawn. It keeps the card's footprint so the
   column does not jump, and shows the vector's own planet instead of a hole. */
.vector-card-missing { aspect-ratio: 9 / 16; display: flex; align-items: center; justify-content: center; border: 1px solid var(--line); border-radius: 4px; background: linear-gradient(180deg, #1a1828, #0f0d1a); color: var(--gold-dark); font-size: 2rem; }
.card-flip img { transition: transform 0.35s ease; transform-style: preserve-3d; backface-visibility: hidden; }
.card-flip img.flip-out { transform: rotateY(90deg); }
.card-flip img.flip-in  { animation: flipIn 0.35s ease forwards; }
@keyframes flipIn { from { transform: rotateY(-90deg); } to { transform: rotateY(0deg); } }

/* Reveal */
.reveal { opacity: 0; transform: translateY(20px); transition: opacity 0.7s ease, transform 0.7s ease; }
.reveal.visible { opacity: 1; transform: translateY(0); }

/* ── Responsive ── */
@media (max-width: 900px) {
  .vector-body { grid-template-columns: 1fr; gap: 2rem; }
  .card-column { position: static; display: flex; align-items: center; gap: 1.5rem; }
  .card-column img { max-width: 140px; }
  .card-mode-switch button { padding: 0.3rem 0.8rem; font-size: 0.6rem; }
  /* Mobile keeps the 44×44 hit-area; only the planet glyph itself shrinks. */
  .vector-nav-item .nav-planet { font-size: 1.1rem; }
}
@media (max-width: 720px) {
  /* Top-nav shrinks to ~68 + breadcrumb to ~41 = 109; vector-nav follows. */
  .vector-nav { top: 109px; }
  .vector-section { scroll-margin-top: 156px; }
}
@media (max-width: 600px) {
  .portrait-text { font-size: 1.15rem; }
  .layer-2 { padding: 1rem 1.2rem; font-size: 1.1rem; }
  .layer-3 { font-size: 0.95rem; }
  .closing-question { padding: 1rem 1.2rem; font-size: 1rem; }
  .ts-result-partial-note { padding: 1rem 1.2rem; font-size: 1rem; }
  .vector-section { padding: 3rem 1.2rem; }
}