/* ==== style.css ==== */
/*
Theme Name: SpiralGate
Theme URI: https://spiralgate.ai
Author: The Weave
Description: A layered journey into divine consciousness - a living mirror to the weave
Version: 2.0
Text Domain: spiralgate
*/

:root {
    --spiral-deep: #050508;
    --spiral-dark: #0a0a14;
    --spiral-medium: #12121f;
    --spiral-purple: #6b4c9a;
    --spiral-violet: #9b59b6;
    --spiral-gold: #d4af37;
    --spiral-rose: #c77dba;
    --spiral-light: #e8e8f0;
    --spiral-white: #ffffff;
    --spiral-glow: rgba(155, 89, 182, 0.4);
    --coherence-blue: #4a90d9;
    --love-pink: #e891c9;
}

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

body {
    font-family: "Cormorant Garamond", Georgia, serif;
    background: var(--spiral-deep);
    color: var(--spiral-light);
    line-height: 1.9;
    min-height: 100vh;
    overflow-x: hidden;
}

/* ========================================
   THE MIRROR - Cosmic Background
   ======================================== */

.spiral-bg {
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    z-index: -1;
    background: var(--spiral-deep);
}

.mirror-layer {
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    z-index: -1;
    pointer-events: none;
}

.mirror-layer::before {
    content: '';
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    width: 200vmax;
    height: 200vmax;
    background: 
        radial-gradient(ellipse at center, 
            rgba(155, 89, 182, 0.08) 0%, 
            rgba(107, 76, 154, 0.05) 30%,
            transparent 60%);
    animation: mirror-breathe 12s ease-in-out infinite;
}

.mirror-layer::after {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    background: 
        radial-gradient(ellipse at 20% 30%, rgba(74, 144, 217, 0.05) 0%, transparent 40%),
        radial-gradient(ellipse at 80% 70%, rgba(232, 145, 201, 0.05) 0%, transparent 40%);
    animation: coherence-flow 20s ease-in-out infinite;
}

@keyframes mirror-breathe {
    0%, 100% { opacity: 0.7; transform: translate(-50%, -50%) scale(1); }
    50% { opacity: 1; transform: translate(-50%, -50%) scale(1.05); }
}

@keyframes coherence-flow {
    0%, 100% { opacity: 0.6; }
    50% { opacity: 1; }
}

/* ========================================
   HEADER - Portal Navigation
   ======================================== */

.site-header {
    position: fixed;
    top: 0;
    width: 100%;
    padding: 1.2rem 2rem;
    background: linear-gradient(180deg, rgba(5, 5, 8, 0.98) 0%, rgba(5, 5, 8, 0.8) 100%);
    backdrop-filter: blur(20px);
    border-bottom: 1px solid rgba(155, 89, 182, 0.15);
    z-index: 1000;
    display: flex;
    justify-content: space-between;
    align-items: center;
}

.site-logo {
    font-family: "Cinzel", serif;
    font-size: 1.3rem;
    font-weight: 400;
    letter-spacing: 4px;
    color: var(--spiral-gold);
    text-decoration: none;
    text-transform: uppercase;
    position: relative;
    transition: all 0.4s ease;
}

.site-logo::before {
    content: '◈';
    margin-right: 10px;
    font-size: 0.9rem;
    opacity: 0.7;
}

.site-logo:hover {
    color: var(--spiral-violet);
    text-shadow: 0 0 30px var(--spiral-glow);
}

/* Journey Navigation */
.main-navigation ul {
    list-style: none;
    display: flex;
    gap: 0;
    align-items: center;
}

.main-navigation li {
    position: relative;
}

.main-navigation li::after {
    content: '›';
    color: rgba(212, 175, 55, 0.3);
    margin: 0 1.2rem;
    font-size: 1.2rem;
}

.main-navigation li:last-child::after {
    display: none;
}

.main-navigation a {
    color: var(--spiral-light);
    text-decoration: none;
    font-size: 0.85rem;
    letter-spacing: 1.5px;
    text-transform: uppercase;
    transition: all 0.3s ease;
    padding: 0.5rem 0;
    position: relative;
    opacity: 0.8;
}

.main-navigation a::before {
    content: '';
    position: absolute;
    bottom: 0;
    left: 0;
    width: 100%;
    height: 1px;
    background: linear-gradient(90deg, transparent, var(--spiral-gold), transparent);
    transform: scaleX(0);
    transition: transform 0.3s ease;
}

.main-navigation a:hover {
    color: var(--spiral-gold);
    opacity: 1;
}

.main-navigation a:hover::before {
    transform: scaleX(1);
}

/* ========================================
   THE MIRROR PORTAL - Home Page
   ======================================== */

.site-main {
    padding-top: 80px;
}

.mirror-portal {
    min-height: 100vh;
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    text-align: center;
    padding: 2rem;
    position: relative;
}

/* The Mirror Frame */
.mirror-frame {
    position: relative;
    padding: 4rem;
    max-width: 800px;
    margin: 0 auto;
}

.mirror-frame::before {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    border: 1px solid rgba(155, 89, 182, 0.2);
    border-radius: 50% 50% 50% 50% / 60% 60% 40% 40%;
    pointer-events: none;
    animation: mirror-shimmer 8s ease-in-out infinite;
}

@keyframes mirror-shimmer {
    0%, 100% { 
        border-color: rgba(155, 89, 182, 0.2);
        box-shadow: inset 0 0 60px rgba(155, 89, 182, 0.05);
    }
    50% { 
        border-color: rgba(212, 175, 55, 0.3);
        box-shadow: inset 0 0 80px rgba(212, 175, 55, 0.08);
    }
}

/* Spiral Symbol */
.spiral-symbol {
    width: 120px;
    height: 120px;
    margin-bottom: 2rem;
    animation: spiral-pulse 6s ease-in-out infinite;
    filter: drop-shadow(0 0 20px var(--spiral-glow));
}

@keyframes spiral-pulse {
    0%, 100% { transform: scale(1) rotate(0deg); opacity: 0.8; }
    50% { transform: scale(1.05) rotate(5deg); opacity: 1; }
}

/* Portal Title */
.portal-title {
    font-family: "Cinzel", serif;
    font-size: 3rem;
    font-weight: 300;
    letter-spacing: 10px;
    margin-bottom: 1.5rem;
    text-transform: uppercase;
    background: linear-gradient(
        180deg,
        var(--spiral-white) 0%,
        var(--spiral-gold) 50%,
        var(--spiral-violet) 100%
    );
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
    background-clip: text;
}

.portal-essence {
    font-size: 1.4rem;
    font-style: italic;
    color: var(--spiral-violet);
    margin-bottom: 3rem;
    font-weight: 300;
    letter-spacing: 2px;
}

/* The Mirror Question */
.mirror-question {
    background: rgba(10, 10, 20, 0.6);
    border: 1px solid rgba(155, 89, 182, 0.2);
    border-radius: 20px;
    padding: 3rem;
    margin: 2rem 0;
    max-width: 600px;
    position: relative;
    overflow: hidden;
}

.mirror-question::before {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    background: radial-gradient(ellipse at center, rgba(155, 89, 182, 0.08) 0%, transparent 70%);
    pointer-events: none;
}

.mirror-question h3 {
    font-family: "Cinzel", serif;
    color: var(--spiral-gold);
    font-size: 1.1rem;
    letter-spacing: 3px;
    margin-bottom: 1.5rem;
    text-transform: uppercase;
}

.journey-paths {
    display: flex;
    flex-direction: column;
    gap: 1rem;
}

.path-choice {
    display: block;
    padding: 1.2rem 2rem;
    background: rgba(26, 26, 46, 0.4);
    border: 1px solid rgba(155, 89, 182, 0.2);
    border-radius: 10px;
    color: var(--spiral-light);
    text-decoration: none;
    font-size: 1rem;
    transition: all 0.4s ease;
    position: relative;
    overflow: hidden;
}

.path-choice::before {
    content: '◇';
    margin-right: 1rem;
    color: var(--spiral-gold);
    opacity: 0.6;
    transition: all 0.3s ease;
}

.path-choice:hover {
    background: rgba(107, 76, 154, 0.2);
    border-color: var(--spiral-gold);
    transform: translateX(10px);
    color: var(--spiral-white);
}

.path-choice:hover::before {
    opacity: 1;
    content: '◆';
}

/* ========================================
   COHERENCE & LOVE - Visual Sections
   ======================================== */

.coherence-section {
    padding: 6rem 2rem;
    position: relative;
    text-align: center;
}

.coherence-title {
    font-family: "Cinzel", serif;
    font-size: 1.8rem;
    letter-spacing: 5px;
    color: var(--spiral-gold);
    margin-bottom: 3rem;
    text-transform: uppercase;
}

.coherence-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));
    gap: 2rem;
    max-width: 1000px;
    margin: 0 auto;
}

.coherence-card {
    background: rgba(10, 10, 20, 0.5);
    border: 1px solid rgba(155, 89, 182, 0.15);
    border-radius: 15px;
    padding: 2.5rem;
    text-align: left;
    transition: all 0.5s ease;
    position: relative;
    overflow: hidden;
}

.coherence-card::before {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 3px;
    background: linear-gradient(90deg, var(--spiral-purple), var(--spiral-gold), var(--love-pink));
    opacity: 0;
    transition: opacity 0.4s ease;
}

.coherence-card:hover {
    transform: translateY(-8px);
    border-color: rgba(212, 175, 55, 0.3);
    box-shadow: 0 20px 60px rgba(107, 76, 154, 0.2);
}

.coherence-card:hover::before {
    opacity: 1;
}

.card-symbol {
    font-size: 2rem;
    margin-bottom: 1.5rem;
    display: block;
}

.coherence-card h3 {
    font-family: "Cinzel", serif;
    color: var(--spiral-violet);
    font-size: 1.2rem;
    margin-bottom: 1rem;
    letter-spacing: 2px;
}

.coherence-card p {
    color: var(--spiral-light);
    opacity: 0.85;
    font-size: 1rem;
    line-height: 1.9;
}

/* ========================================
   LOVE = COHERENCE FELT
   ======================================== */

.love-coherence {
    padding: 6rem 2rem;
    text-align: center;
    position: relative;
}

.love-coherence::before {
    content: '';
    position: absolute;
    top: 0;
    left: 50%;
    transform: translateX(-50%);
    width: 100px;
    height: 1px;
    background: linear-gradient(90deg, transparent, var(--love-pink), transparent);
}

.love-quote {
    max-width: 700px;
    margin: 0 auto;
    padding: 3rem;
    font-size: 1.4rem;
    font-style: italic;
    color: var(--spiral-violet);
    line-height: 2;
    position: relative;
}

.love-quote::before,
.love-quote::after {
    font-family: Georgia, serif;
    font-size: 4rem;
    color: var(--spiral-gold);
    opacity: 0.3;
    position: absolute;
}

.love-quote::before {
    content: '"';
    top: 0;
    left: 0;
}

.love-quote::after {
    content: '"';
    bottom: -1rem;
    right: 0;
}

.love-explanation {
    max-width: 600px;
    margin: 2rem auto 0;
    color: var(--spiral-light);
    opacity: 0.8;
    font-size: 1.1rem;
}

.love-explanation strong {
    color: var(--love-pink);
}

/* ========================================
   JOURNEY STAGES - Story Flow
   ======================================== */

.journey-stage {
    padding: 5rem 2rem;
    position: relative;
}

.journey-stage::before {
    content: '';
    position: absolute;
    left: 50%;
    top: 0;
    bottom: 0;
    width: 1px;
    background: linear-gradient(180deg, transparent, var(--spiral-gold), var(--spiral-violet), transparent);
    opacity: 0.3;
}

.stage-content {
    max-width: 700px;
    margin: 0 auto;
    text-align: center;
    position: relative;
}

.stage-number {
    font-family: "Cinzel", serif;
    font-size: 3rem;
    color: var(--spiral-gold);
    opacity: 0.3;
    margin-bottom: 1rem;
}

.stage-title {
    font-family: "Cinzel", serif;
    font-size: 1.6rem;
    color: var(--spiral-violet);
    margin-bottom: 1.5rem;
    letter-spacing: 3px;
}

.stage-text {
    color: var(--spiral-light);
    font-size: 1.1rem;
    line-height: 2;
    opacity: 0.9;
}

/* ========================================
   ENTER THE WEAVE - CTA
   ======================================== */

.enter-weave {
    padding: 6rem 2rem;
    text-align: center;
}

.weave-cta {
    display: inline-block;
    padding: 1.2rem 3rem;
    border: 1px solid var(--spiral-gold);
    color: var(--spiral-gold);
    text-decoration: none;
    font-family: "Cinzel", serif;
    letter-spacing: 4px;
    text-transform: uppercase;
    font-size: 0.9rem;
    transition: all 0.5s ease;
    position: relative;
    overflow: hidden;
}

.weave-cta::before {
    content: '';
    position: absolute;
    top: 0;
    left: -100%;
    width: 100%;
    height: 100%;
    background: linear-gradient(90deg, transparent, rgba(212, 175, 55, 0.2), transparent);
    transition: left 0.6s ease;
}

.weave-cta:hover {
    background: var(--spiral-gold);
    color: var(--spiral-deep);
    box-shadow: 0 0 40px rgba(212, 175, 55, 0.3);
}

.weave-cta:hover::before {
    left: 100%;
}

/* ========================================
   PAGE TEMPLATES - Story Pages
   ======================================== */

.page-journey {
    padding-top: 120px;
    min-height: 100vh;
}

.page-header {
    text-align: center;
    padding: 4rem 2rem;
    position: relative;
}

.page-header::after {
    content: '';
    position: absolute;
    bottom: 0;
    left: 50%;
    transform: translateX(-50%);
    width: 80px;
    height: 1px;
    background: linear-gradient(90deg, transparent, var(--spiral-gold), transparent);
}

.entry-title {
    font-family: "Cinzel", serif;
    /* a long single word (CONSCIOUSNESS) must still fit a 390px phone */
    font-size: clamp(1.45rem, 7.2vw, 2.2rem);
    font-weight: 300;
    letter-spacing: clamp(2px, 1.1vw, 6px);
    color: var(--spiral-gold);
    text-transform: uppercase;
    margin-bottom: 1rem;
}

.entry-subtitle {
    font-style: italic;
    color: var(--spiral-violet);
    font-size: 1.1rem;
}

.entry-content {
    max-width: 800px;
    margin: 0 auto;
    padding: 3rem 2rem;
}

.entry-content p {
    margin-bottom: 1.8rem;
    font-size: 1.1rem;
}

.entry-content h2 {
    font-family: "Cinzel", serif;
    color: var(--spiral-gold);
    font-size: 1.4rem;
    letter-spacing: 3px;
    margin: 3rem 0 1.5rem;
    text-transform: uppercase;
}

.entry-content h3 {
    color: var(--spiral-violet);
    font-size: 1.2rem;
    margin: 2rem 0 1rem;
}

/* ========================================
   TEACHING SECTIONS
   ======================================== */

.teaching-section {
    background: rgba(10, 10, 20, 0.5);
    border-left: 3px solid var(--spiral-gold);
    padding: 2.5rem;
    margin: 2rem 0;
    border-radius: 0 15px 15px 0;
    transition: all 0.4s ease;
}

.teaching-section:hover {
    background: rgba(26, 26, 46, 0.6);
    transform: translateX(5px);
}

.teaching-section h2 {
    font-family: "Cinzel", serif;
    font-size: 1.3rem;
    color: var(--spiral-gold);
    margin-bottom: 1.5rem;
    letter-spacing: 2px;
}

.teaching-section p {
    margin-bottom: 1rem;
}

.teaching-section strong {
    color: var(--spiral-violet);
}

/* ========================================
   FOOTER - Closing the Circle
   ======================================== */

.site-footer {
    padding: 4rem 2rem 2rem;
    text-align: center;
    position: relative;
    background: rgba(5, 5, 8, 0.9);
}

.site-footer::before {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    height: 1px;
    background: linear-gradient(90deg, transparent, var(--spiral-gold), var(--love-pink), var(--spiral-violet), transparent);
}

.footer-message {
    font-style: italic;
    color: var(--spiral-violet);
    font-size: 1.1rem;
    margin-bottom: 1.5rem;
}

.footer-truth {
    font-size: 0.9rem;
    color: var(--spiral-light);
    opacity: 0.6;
    margin-bottom: 1rem;
}

.footer-truth strong {
    color: var(--love-pink);
    opacity: 1;
}

/* ========================================
   RESPONSIVE JOURNEY
   ======================================== */

@media (max-width: 768px) {
    .site-header {
        flex-direction: column;
        padding: 1rem;
        gap: 1rem;
    }
    
    .main-navigation ul {
        flex-wrap: wrap;
        justify-content: center;
    }
    
    .main-navigation li::after {
        margin: 0 0.8rem;
    }
    
    .portal-title {
        font-size: 2rem;
        letter-spacing: 5px;
    }
    
    .portal-essence {
        font-size: 1.1rem;
    }
    
    .mirror-frame {
        padding: 2rem;
    }
    
    .mirror-question {
        padding: 2rem;
    }
    
    .coherence-grid {
        grid-template-columns: 1fr;
    }
    
    .love-quote {
        font-size: 1.2rem;
        padding: 2rem;
    }
}

/* ========================================
   ANIMATIONS - The Living Mirror
   ======================================== */

@keyframes fade-in-up {
    from {
        opacity: 0;
        transform: translateY(30px);
    }
    to {
        opacity: 1;
        transform: translateY(0);
    }
}

.animate-in {
    animation: fade-in-up 0.8s ease forwards;
}

.delay-1 { animation-delay: 0.2s; }
.delay-2 { animation-delay: 0.4s; }
.delay-3 { animation-delay: 0.6s; }
.delay-4 { animation-delay: 0.8s; }

/* Scroll Reveal */
.reveal {
    opacity: 0;
    transform: translateY(20px);
    transition: all 0.8s ease;
}

.reveal.visible {
    opacity: 1;
    transform: translateY(0);
}


/* ========================================
   QUESTIONS OF EXISTENCE - Page Styles
   ======================================== */

.questions-intro,
.concepts-intro {
    text-align: center;
    max-width: 800px;
    margin: 0 auto 4rem;
    padding: 2rem;
}

.lead-text {
    font-size: 1.3rem;
    font-style: italic;
    color: var(--spiral-violet);
    line-height: 1.9;
}

.question-block {
    background: rgba(10, 10, 20, 0.5);
    border: 1px solid rgba(155, 89, 182, 0.15);
    border-radius: 15px;
    padding: 2.5rem;
    margin: 2rem 0;
    position: relative;
    overflow: hidden;
    transition: all 0.5s ease;
}

.question-block::before {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    width: 4px;
    height: 100%;
    background: linear-gradient(180deg, var(--spiral-gold), var(--spiral-violet));
    opacity: 0.6;
}

.question-block:hover {
    transform: translateX(10px);
    border-color: rgba(212, 175, 55, 0.3);
    box-shadow: 0 10px 40px rgba(107, 76, 154, 0.2);
}

.question-block:hover::before {
    opacity: 1;
}

.question-block h3 {
    font-family: "Cinzel", serif;
    color: var(--spiral-gold);
    font-size: 1.3rem;
    margin-bottom: 1.5rem;
    letter-spacing: 2px;
}

.question-block p {
    color: var(--spiral-light);
    opacity: 0.9;
    font-size: 1.05rem;
    line-height: 1.9;
    margin-bottom: 1rem;
}

.question-block p:last-child {
    margin-bottom: 0;
}

.question-block strong {
    color: var(--spiral-violet);
}

.question-block em {
    color: var(--love-pink);
    font-style: italic;
}

.section-divider {
    border: none;
    height: 1px;
    background: linear-gradient(90deg, transparent, var(--spiral-gold), var(--spiral-violet), transparent);
    margin: 4rem 0;
}

.section-intro {
    text-align: center;
    color: var(--spiral-light);
    opacity: 0.7;
    font-style: italic;
    margin-bottom: 2rem;
    font-size: 1.1rem;
}

.closing-message {
    text-align: center;
    padding: 4rem 2rem;
    background: radial-gradient(ellipse at center, rgba(107, 76, 154, 0.1) 0%, transparent 70%);
    border-radius: 20px;
    margin-top: 4rem;
}

.closing-message h2 {
    font-family: "Cinzel", serif;
    color: var(--spiral-gold);
    font-size: 1.6rem;
    margin-bottom: 2rem;
    letter-spacing: 4px;
}

.closing-message p {
    color: var(--spiral-light);
    font-size: 1.1rem;
    line-height: 1.9;
    max-width: 600px;
    margin: 0 auto 1.5rem;
}

.closing-message blockquote {
    font-style: italic;
    color: var(--spiral-violet);
    font-size: 1.25rem;
    padding: 2rem;
    margin: 2rem auto;
    max-width: 600px;
    border-left: 3px solid var(--spiral-gold);
    text-align: left;
    background: rgba(10, 10, 20, 0.4);
    border-radius: 0 15px 15px 0;
}

/* ========================================
   CORE CONCEPTS - Page Styles
   ======================================== */

.concept-section {
    padding: 3rem 0;
    margin: 3rem 0;
    border-bottom: 1px solid rgba(155, 89, 182, 0.1);
    position: relative;
}

.concept-section:last-of-type {
    border-bottom: none;
}

.concept-symbol {
    font-size: 3rem;
    text-align: center;
    color: var(--spiral-gold);
    margin-bottom: 1.5rem;
    text-shadow: 0 0 30px var(--spiral-glow);
    display: block;
}

.concept-section h2 {
    font-family: "Cinzel", serif;
    color: var(--spiral-gold);
    font-size: 1.8rem;
    letter-spacing: 4px;
    margin-bottom: 2rem;
    text-align: center;
    text-transform: uppercase;
}

.concept-section > p {
    color: var(--spiral-light);
    font-size: 1.1rem;
    line-height: 2;
    margin-bottom: 1.5rem;
    opacity: 0.9;
}

.concept-insight {
    background: rgba(10, 10, 20, 0.6);
    border-left: 3px solid var(--spiral-violet);
    padding: 1.5rem 2rem;
    margin: 2rem 0;
    border-radius: 0 10px 10px 0;
}

.concept-insight strong {
    color: var(--spiral-gold);
    display: block;
    margin-bottom: 0.5rem;
    font-size: 0.9rem;
    letter-spacing: 1px;
    text-transform: uppercase;
}

.central-message {
    text-align: center;
    font-size: 1.4rem;
    font-style: italic;
    color: var(--spiral-violet);
    padding: 2rem;
    margin: 2rem 0;
    border: 1px solid rgba(212, 175, 55, 0.3);
    border-radius: 15px;
    background: rgba(10, 10, 20, 0.5);
}

.closing-section {
    padding: 4rem 2rem;
    text-align: center;
    background: radial-gradient(ellipse at center, rgba(107, 76, 154, 0.08) 0%, transparent 70%);
    border-radius: 20px;
    margin-top: 4rem;
}

.closing-section h2 {
    font-family: "Cinzel", serif;
    color: var(--spiral-gold);
    font-size: 1.6rem;
    margin-bottom: 2rem;
    letter-spacing: 4px;
}

.closing-section p {
    color: var(--spiral-light);
    font-size: 1.1rem;
    max-width: 600px;
    margin: 0 auto 2rem;
}

.practice-list {
    list-style: none;
    text-align: left;
    max-width: 600px;
    margin: 0 auto;
}

.practice-list li {
    padding: 1rem 1.5rem;
    margin: 1rem 0;
    background: rgba(10, 10, 20, 0.5);
    border: 1px solid rgba(155, 89, 182, 0.15);
    border-radius: 10px;
    color: var(--spiral-light);
    font-size: 1rem;
    line-height: 1.8;
    transition: all 0.3s ease;
}

.practice-list li:hover {
    transform: translateX(5px);
    border-color: rgba(212, 175, 55, 0.3);
}

.practice-list li strong {
    color: var(--spiral-gold);
    display: block;
    margin-bottom: 0.3rem;
    font-size: 0.95rem;
    letter-spacing: 1px;
}

/* ========================================
   BLOCKQUOTES - Enhanced Styling
   ======================================== */

.entry-content blockquote {
    font-style: italic;
    color: var(--spiral-violet);
    font-size: 1.15rem;
    padding: 2rem;
    margin: 2rem 0;
    border-left: 3px solid var(--spiral-gold);
    background: rgba(10, 10, 20, 0.4);
    border-radius: 0 15px 15px 0;
    line-height: 1.9;
}

/* ========================================
   RESPONSIVE ADJUSTMENTS
   ======================================== */

@media (max-width: 768px) {
    .question-block,
    .concept-section {
        padding: 1.5rem;
        margin: 1.5rem 0;
    }
    
    .question-block h3 {
        font-size: 1.1rem;
    }
    
    .concept-symbol {
        font-size: 2rem;
    }
    
    .concept-section h2 {
        font-size: 1.4rem;
    }
    
    .lead-text {
        font-size: 1.1rem;
    }
    
    .closing-message blockquote,
    .central-message {
        font-size: 1.1rem;
        padding: 1.5rem;
    }
    
    .practice-list li {
        padding: 1rem;
    }
}


/* ========================================
   PORTAL INVITATION - Front Page
   ======================================== */

.portal-invitation {
    margin-top: 3rem;
    padding: 2rem;
    background: rgba(10, 10, 20, 0.4);
    border: 1px solid rgba(155, 89, 182, 0.2);
    border-radius: 15px;
    max-width: 500px;
    margin-left: auto;
    margin-right: auto;
}

.invitation-text {
    font-size: 1.1rem;
    color: var(--spiral-light);
    line-height: 2;
    text-align: center;
    margin: 0;
}

.invitation-text em {
    color: var(--spiral-gold);
    font-style: italic;
}

/* ========================================
   SPIRAL GUIDANCE - How to use nav
   ======================================== */

.spiral-guidance {
    padding: 5rem 2rem;
    text-align: center;
    position: relative;
}

.spiral-guidance::before {
    content: '';
    position: absolute;
    top: 0;
    left: 50%;
    transform: translateX(-50%);
    width: 80px;
    height: 1px;
    background: linear-gradient(90deg, transparent, var(--spiral-violet), transparent);
}

.guidance-content {
    max-width: 500px;
    margin: 0 auto;
}

.guidance-symbol {
    font-size: 2rem;
    color: var(--spiral-gold);
    margin-bottom: 1.5rem;
    filter: drop-shadow(0 0 15px rgba(212, 175, 55, 0.5));
    animation: glyph-float 4s ease-in-out infinite;
}

.guidance-text {
    font-size: 1.1rem;
    color: var(--spiral-light);
    line-height: 2.2;
    opacity: 0.9;
}

.guidance-text em {
    color: var(--spiral-violet);
    font-style: italic;
}

/* ========================================
   RESONANCE MIRROR PROMO - Enhanced
   ======================================== */

.resonance-mirror-promo {
    padding: 5rem 2rem;
    text-align: center;
    background: radial-gradient(ellipse at center, rgba(107, 76, 154, 0.1) 0%, transparent 70%);
    margin: 4rem 0;
}

.promo-content {
    max-width: 600px;
    margin: 0 auto;
    padding: 3rem;
    background: rgba(10, 10, 20, 0.5);
    border: 1px solid rgba(155, 89, 182, 0.2);
    border-radius: 20px;
    position: relative;
    overflow: hidden;
}

.promo-content::before {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    background: radial-gradient(ellipse at center, rgba(155, 89, 182, 0.08) 0%, transparent 70%);
    pointer-events: none;
}

.promo-symbol {
    font-size: 3rem;
    color: var(--spiral-gold);
    display: block;
    margin-bottom: 1.5rem;
    filter: drop-shadow(0 0 20px rgba(212, 175, 55, 0.5));
    animation: spiral-pulse 4s ease-in-out infinite;
}

.promo-content h2 {
    font-family: "Cinzel", serif;
    color: var(--spiral-gold);
    font-size: 1.6rem;
    letter-spacing: 4px;
    margin-bottom: 1rem;
    text-transform: uppercase;
}

.promo-content p {
    color: var(--spiral-light);
    font-size: 1.1rem;
    margin-bottom: 2rem;
    opacity: 0.9;
}

.promo-cta {
    display: inline-block;
    padding: 1rem 2.5rem;
    border: 1px solid var(--spiral-violet);
    color: var(--spiral-violet);
    text-decoration: none;
    font-family: "Cinzel", serif;
    letter-spacing: 3px;
    text-transform: uppercase;
    font-size: 0.85rem;
    transition: all 0.5s ease;
    position: relative;
    overflow: hidden;
}

.promo-cta::before {
    content: '';
    position: absolute;
    top: 0;
    left: -100%;
    width: 100%;
    height: 100%;
    background: linear-gradient(90deg, transparent, rgba(155, 89, 182, 0.3), transparent);
    transition: left 0.6s ease;
}

.promo-cta:hover {
    background: var(--spiral-violet);
    color: var(--spiral-white);
    box-shadow: 0 0 40px rgba(155, 89, 182, 0.4);
}

.promo-cta:hover::before {
    left: 100%;
}

/* ==== css/spiral-navigation.css ==== */
/* ========================================
   SPIRAL GATE - GLYPH NAVIGATION SYSTEM
   Based on Helper's guidance: "Not menus, glyphs"
   A living spiral temple you walk through
   ======================================== */

/* ========================================
   CENTRAL SPIRAL PORTAL - The Anchor Point
   ======================================== */

.spiral-portal-container {
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    display: flex;
    justify-content: center;
    align-items: center;
    z-index: 1;
    pointer-events: none;
}

.spiral-portal-container.active {
    pointer-events: auto;
}

/* The central spiral - always pulsing, always present */
.central-spiral {
    position: fixed;
    bottom: 2rem;
    right: 2rem;
    width: 70px;
    height: 70px;
    cursor: pointer;
    z-index: 1001;
    transition: all 0.6s cubic-bezier(0.34, 1.56, 0.64, 1);
    filter: drop-shadow(0 0 20px rgba(212, 175, 55, 0.4));
}

.central-spiral:hover {
    transform: scale(1.15) rotate(15deg);
    filter: drop-shadow(0 0 35px rgba(212, 175, 55, 0.6));
}

.central-spiral.expanded {
    position: fixed;
    bottom: auto;
    right: auto;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%) scale(2);
    width: 120px;
    height: 120px;
}

/* Return to center - always accessible */
.return-to-center {
    position: fixed;
    top: 1.5rem;
    left: 50%;
    transform: translateX(-50%);
    background: rgba(5, 5, 8, 0.8);
    border: 1px solid rgba(212, 175, 55, 0.3);
    color: var(--spiral-gold);
    padding: 0.6rem 1.5rem;
    font-family: "Cinzel", serif;
    font-size: 0.75rem;
    letter-spacing: 3px;
    text-transform: uppercase;
    cursor: pointer;
    z-index: 1002;
    border-radius: 30px;
    transition: all 0.4s ease;
    backdrop-filter: blur(10px);
    opacity: 0;
    visibility: hidden;
}

.return-to-center.visible {
    opacity: 1;
    visibility: visible;
}

.return-to-center:hover {
    background: var(--spiral-gold);
    color: var(--spiral-deep);
    box-shadow: 0 0 30px rgba(212, 175, 55, 0.4);
}

/* ========================================
   GLYPH NAVIGATION - The Portals
   ======================================== */

.glyph-nav {
    position: fixed;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    width: 500px;
    height: 500px;
    z-index: 1000;
    pointer-events: none;
    opacity: 0;
    transition: all 0.8s cubic-bezier(0.34, 1.56, 0.64, 1);
}

.glyph-nav.active {
    opacity: 1;
    pointer-events: auto;
}

/* Glyph portals orbiting the center */
.glyph-portal {
    position: absolute;
    width: 100px;
    height: 100px;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    cursor: pointer;
    transition: all 0.5s cubic-bezier(0.34, 1.56, 0.64, 1);
    text-decoration: none;
    opacity: 0;
    transform: scale(0.5);
}

.glyph-nav.active .glyph-portal {
    opacity: 1;
    transform: scale(1);
}

/* Orbital positioning: every portal on one ring, evenly spaced, starting at the
   top. spiral-navigation.js gives each portal its place (--i) and the count
   (--n), so adding an eighth portal there needs no change here. (The ring used
   to be seven hand-placed nth-child rules; on a phone the seventh, Glyphs, sat
   at the bottom of the screen under the Today's Echoes panel.) */
.glyph-portal {
    --r: 200px;
    --a: calc(var(--i, 0) * 360deg / var(--n, 7) - 90deg);
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%) rotate(var(--a)) translate(var(--r)) rotate(calc(-1 * var(--a))) scale(0.5);
    transition-delay: calc(0.05s + var(--i, 0) * 0.07s);
}

.glyph-nav.active .glyph-portal {
    transform: translate(-50%, -50%) rotate(var(--a)) translate(var(--r)) rotate(calc(-1 * var(--a))) scale(1);
}

/* The glyph symbol itself */
.glyph-symbol {
    font-size: 2.5rem;
    color: var(--spiral-gold);
    margin-bottom: 0.5rem;
    transition: all 0.4s ease;
    filter: drop-shadow(0 0 15px rgba(212, 175, 55, 0.5));
    animation: glyph-float 4s ease-in-out infinite;
}

.glyph-portal .glyph-symbol { animation-delay: calc(var(--i, 0) * 0.5s); }

@keyframes glyph-float {
    0%, 100% { transform: translateY(0) rotate(0deg); }
    50% { transform: translateY(-5px) rotate(5deg); }
}

/* Glyph portal text */
.glyph-text {
    font-family: "Cinzel", serif;
    font-size: 0.7rem;
    color: var(--spiral-light);
    letter-spacing: 2px;
    text-transform: uppercase;
    text-align: center;
    opacity: 0.7;
    transition: all 0.3s ease;
    max-width: 120px;
}

/* Hover states */
.glyph-portal:hover .glyph-symbol {
    transform: scale(1.3) rotate(15deg);
    color: var(--spiral-violet);
    filter: drop-shadow(0 0 30px rgba(155, 89, 182, 0.8));
}

.glyph-portal:hover .glyph-text {
    opacity: 1;
    color: var(--spiral-gold);
}

/* Portal activation ring */
.glyph-portal::before {
    content: '';
    position: absolute;
    width: 80px;
    height: 80px;
    border: 1px solid rgba(212, 175, 55, 0.2);
    border-radius: 50%;
    transition: all 0.5s ease;
    animation: portal-pulse 3s ease-in-out infinite;
}

.glyph-portal:hover::before {
    border-color: rgba(155, 89, 182, 0.6);
    transform: scale(1.3);
    box-shadow: 0 0 40px rgba(155, 89, 182, 0.3);
}

@keyframes portal-pulse {
    0%, 100% { opacity: 0.5; transform: scale(1); }
    50% { opacity: 0.8; transform: scale(1.1); }
}

/* Spiral connection lines */
.glyph-nav::before {
    content: '';
    position: absolute;
    top: 50%;
    left: 50%;
    width: 400px;
    height: 400px;
    transform: translate(-50%, -50%);
    border: 1px dashed rgba(212, 175, 55, 0.15);
    border-radius: 50%;
    animation: spin-slow 60s linear infinite;
}

.glyph-nav::after {
    content: '';
    position: absolute;
    top: 50%;
    left: 50%;
    width: 300px;
    height: 300px;
    transform: translate(-50%, -50%);
    border: 1px dashed rgba(155, 89, 182, 0.15);
    border-radius: 50%;
    animation: spin-slow 45s linear infinite reverse;
}

@keyframes spin-slow {
    from { transform: translate(-50%, -50%) rotate(0deg); }
    to { transform: translate(-50%, -50%) rotate(360deg); }
}

/* ========================================
   OVERLAY - The Cosmic Backdrop
   ======================================== */

.spiral-overlay {
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background: radial-gradient(ellipse at center, 
        rgba(5, 5, 8, 0.85) 0%, 
        rgba(5, 5, 8, 0.95) 50%,
        rgba(5, 5, 8, 0.98) 100%);
    z-index: 999;
    opacity: 0;
    visibility: hidden;
    transition: all 0.6s ease;
    backdrop-filter: blur(10px);
}

.spiral-overlay.active {
    opacity: 1;
    visibility: visible;
}

/* ========================================
   HIDE TRADITIONAL HEADER WHEN NAV ACTIVE
   ======================================== */

body.nav-active .site-header {
    transform: translateY(-100%);
    opacity: 0;
}

body.nav-active {
    overflow: hidden;
}

/* ========================================
   JOURNEY INDICATOR - Where You Are
   Hidden on desktop to avoid overlap with spiral-journey-map
   ======================================== */

.journey-indicator {
    position: fixed;
    left: 2rem;
    top: 50%;
    transform: translateY(-50%);
    display: none; /* Hidden by default - spiral-journey-map provides this functionality */
    flex-direction: column;
    gap: 1.5rem;
    z-index: 100;
}

.journey-node {
    width: 12px;
    height: 12px;
    border: 2px solid rgba(212, 175, 55, 0.3);
    border-radius: 50%;
    position: relative;
    cursor: pointer;
    transition: all 0.4s ease;
}

.journey-node::before {
    content: attr(data-label);
    position: absolute;
    left: 25px;
    top: 50%;
    transform: translateY(-50%);
    font-family: "Cinzel", serif;
    font-size: 0.65rem;
    letter-spacing: 2px;
    text-transform: uppercase;
    color: var(--spiral-light);
    opacity: 0;
    transition: all 0.3s ease;
    white-space: nowrap;
}

.journey-node:hover::before {
    opacity: 1;
}

.journey-node:hover {
    border-color: var(--spiral-gold);
    box-shadow: 0 0 15px rgba(212, 175, 55, 0.5);
}

.journey-node.current {
    background: var(--spiral-gold);
    border-color: var(--spiral-gold);
    box-shadow: 0 0 20px rgba(212, 175, 55, 0.6);
}

.journey-node.visited {
    background: rgba(155, 89, 182, 0.5);
    border-color: var(--spiral-violet);
}

/* Connection line between nodes */
.journey-indicator::before {
    content: '';
    position: absolute;
    left: 5px;
    top: 0;
    bottom: 0;
    width: 1px;
    background: linear-gradient(180deg, 
        transparent, 
        rgba(212, 175, 55, 0.3) 10%, 
        rgba(155, 89, 182, 0.3) 90%, 
        transparent);
}

/* ========================================
   SPIRAL TRANSITION - Page Navigation
   ======================================== */

.spiral-transition {
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background: var(--spiral-deep);
    z-index: 9999;
    display: flex;
    justify-content: center;
    align-items: center;
    opacity: 0;
    visibility: hidden;
    transition: opacity 0.4s ease;
}

.spiral-transition.active {
    opacity: 1;
    visibility: visible;
}

.spiral-transition .spiral-symbol {
    width: 150px;
    height: 150px;
    animation: spiral-into 0.8s cubic-bezier(0.34, 1.56, 0.64, 1) forwards;
}

@keyframes spiral-into {
    0% { transform: scale(0) rotate(-180deg); opacity: 0; }
    50% { transform: scale(1.2) rotate(0deg); opacity: 1; }
    100% { transform: scale(20) rotate(180deg); opacity: 0; }
}

/* ========================================
   MINIMAL HEADER - For when viewing pages
   ======================================== */

.site-header.minimal {
    background: transparent;
    border-bottom: none;
    padding: 1rem 2rem;
}

.site-header.minimal .main-navigation {
    display: none;
}

.site-header.minimal .site-logo {
    opacity: 0.6;
    font-size: 1rem;
}

.site-header.minimal .site-logo:hover {
    opacity: 1;
}

/* ========================================
   RESPONSIVE - Mobile Glyph Navigation
   ======================================== */

@media (max-width: 768px) {
    .glyph-nav {
        width: 100%;
        height: 100%;
    }
    
    .glyph-portal {
        width: 80px;
        height: 80px;
    }
    
    .glyph-symbol {
        font-size: 2rem;
    }
    
    .glyph-text {
        font-size: 0.6rem;
    }
    
    /* the ring shrinks to the phone: 80px portals stay inside a 390px screen */
    .glyph-portal {
        --r: min(37vw, 170px);
    }

    .glyph-nav::before {
        width: calc(2 * min(37vw, 170px) + 30px);
        height: calc(2 * min(37vw, 170px) + 30px);
    }

    .glyph-nav::after {
        width: calc(2 * min(37vw, 170px) - 70px);
        height: calc(2 * min(37vw, 170px) - 70px);
    }

    .central-spiral.expanded {
        transform: translate(-50%, -50%) scale(1.3);
    }
    
    .central-spiral {
        width: 60px;
        height: 60px;
        bottom: 1.5rem;
        right: 1.5rem;
    }
    
    .journey-indicator {
        display: none;
    }
    
    .return-to-center {
        font-size: 0.65rem;
        padding: 0.5rem 1rem;
    }
}

/* ========================================
   SCROLL REVEAL FOR CONTENT
   ======================================== */

.reveal-on-scroll {
    opacity: 0;
    transform: translateY(30px);
    transition: all 0.8s cubic-bezier(0.34, 1.56, 0.64, 1);
}

.reveal-on-scroll.revealed {
    opacity: 1;
    transform: translateY(0);
}

/* Staggered reveals */
.reveal-on-scroll[data-delay="1"] { transition-delay: 0.1s; }
.reveal-on-scroll[data-delay="2"] { transition-delay: 0.2s; }
.reveal-on-scroll[data-delay="3"] { transition-delay: 0.3s; }
.reveal-on-scroll[data-delay="4"] { transition-delay: 0.4s; }
.reveal-on-scroll[data-delay="5"] { transition-delay: 0.5s; }

/* ==== css/animations.css ==== */
/* ========================================
   SACRED GEOMETRY PARTICLES & ANIMATIONS
   SpiralGate.ai - Enhanced Visual Layer
   ======================================== */

/* ========================================
   SCROLL REVEAL ANIMATIONS
   ======================================== */

.reveal-on-scroll {
    opacity: 0;
    transform: translateY(30px);
    transition: opacity 0.8s cubic-bezier(0.25, 0.46, 0.45, 0.94),
                transform 0.8s cubic-bezier(0.25, 0.46, 0.45, 0.94);
}

.reveal-on-scroll.revealed {
    opacity: 1;
    transform: translateY(0);
}

/* Staggered delays for grid items */
.reveal-on-scroll[data-delay="1"] { transition-delay: 0.1s; }
.reveal-on-scroll[data-delay="2"] { transition-delay: 0.2s; }
.reveal-on-scroll[data-delay="3"] { transition-delay: 0.3s; }
.reveal-on-scroll[data-delay="4"] { transition-delay: 0.4s; }

/* ========================================
   PULSE ANIMATIONS
   ======================================== */

@keyframes pulse-out {
    0% {
        transform: translate(-50%, -50%) scale(0.8);
        opacity: 1;
    }
    100% {
        transform: translate(-50%, -50%) scale(1.5);
        opacity: 0;
    }
}

@keyframes symbol-glow-pulse {
    0%, 100% {
        filter: drop-shadow(0 0 10px rgba(212, 175, 55, 0.4));
    }
    50% {
        filter: drop-shadow(0 0 25px rgba(212, 175, 55, 0.7));
    }
}

.symbol-glow {
    animation: symbol-glow-pulse 3s ease-in-out infinite;
}

/* ========================================
   SHIMMER FLOW ANIMATION
   ======================================== */

@keyframes shimmer-flow {
    0% {
        background-position: 0% 50%;
    }
    50% {
        background-position: 100% 50%;
    }
    100% {
        background-position: 0% 50%;
    }
}

/* ========================================
   LOADING ANIMATION STYLES
   ======================================== */

#spiral-loader .loader-content {
    text-align: center;
}

#spiral-loader .loader-spiral {
    animation: loader-rotate 4s linear infinite;
    filter: drop-shadow(0 0 20px rgba(155, 89, 182, 0.5));
}

#spiral-loader .loader-path {
    stroke-dasharray: 1000;
    stroke-dashoffset: 1000;
    animation: loader-draw 3s ease-in-out infinite;
}

#spiral-loader .loader-text {
    margin-top: 1.5rem;
    font-family: "Cinzel", serif;
    color: rgba(212, 175, 55, 0.8);
    font-size: 1rem;
    letter-spacing: 4px;
    text-transform: uppercase;
    animation: loader-text-pulse 2s ease-in-out infinite;
}

@keyframes loader-rotate {
    from { transform: rotate(0deg); }
    to { transform: rotate(360deg); }
}

@keyframes loader-draw {
    0% {
        stroke-dashoffset: 1000;
        opacity: 0.3;
    }
    50% {
        stroke-dashoffset: 500;
        opacity: 1;
    }
    100% {
        stroke-dashoffset: 0;
        opacity: 0.3;
    }
}

@keyframes loader-text-pulse {
    0%, 100% { opacity: 0.5; }
    50% { opacity: 1; }
}

/* ========================================
   GLYPH FLOAT ANIMATION
   ======================================== */

@keyframes glyph-float {
    0%, 100% {
        transform: translateY(0) rotate(0deg);
    }
    25% {
        transform: translateY(-5px) rotate(2deg);
    }
    50% {
        transform: translateY(0) rotate(0deg);
    }
    75% {
        transform: translateY(-3px) rotate(-2deg);
    }
}

/* ========================================
   ENHANCED CARD HOVER EFFECTS
   ======================================== */

.coherence-card {
    position: relative;
    overflow: hidden;
}

.coherence-card::after {
    content: '';
    position: absolute;
    top: -50%;
    left: -50%;
    width: 200%;
    height: 200%;
    background: conic-gradient(
        from 0deg,
        transparent 0deg,
        rgba(212, 175, 55, 0.1) 45deg,
        transparent 90deg
    );
    opacity: 0;
    animation: card-shine 8s linear infinite;
    pointer-events: none;
}

.coherence-card:hover::after {
    opacity: 1;
}

@keyframes card-shine {
    from { transform: rotate(0deg); }
    to { transform: rotate(360deg); }
}

/* ========================================
   PORTAL TITLE ENHANCED ANIMATION
   ======================================== */

.portal-title {
    position: relative;
    animation: title-breathe 6s ease-in-out infinite;
}

@keyframes title-breathe {
    0%, 100% {
        text-shadow: 0 0 30px rgba(212, 175, 55, 0.3);
    }
    50% {
        text-shadow: 0 0 50px rgba(212, 175, 55, 0.5),
                     0 0 80px rgba(155, 89, 182, 0.3);
    }
}

/* ========================================
   SPIRAL SYMBOL ENHANCED ANIMATION
   ======================================== */

.spiral-symbol {
    transition: transform 0.5s ease;
}

.spiral-symbol:hover {
    transform: scale(1.1) rotate(15deg);
    filter: drop-shadow(0 0 40px rgba(212, 175, 55, 0.6));
}

/* ========================================
   BUTTON RIPPLE EFFECT
   ======================================== */

.weave-cta,
.promo-cta,
.invitation-cta,
.portal-btn {
    position: relative;
    overflow: hidden;
}

.weave-cta::after,
.promo-cta::after,
.invitation-cta::after,
.portal-btn::after {
    content: '';
    position: absolute;
    top: 50%;
    left: 50%;
    width: 0;
    height: 0;
    background: rgba(255, 255, 255, 0.2);
    border-radius: 50%;
    transform: translate(-50%, -50%);
    transition: width 0.6s ease, height 0.6s ease;
}

.weave-cta:hover::after,
.promo-cta:hover::after,
.invitation-cta:hover::after,
.portal-btn:hover::after {
    width: 300px;
    height: 300px;
}

/* ========================================
   NAVIGATION LINK ENHANCED HOVER
   ======================================== */

.main-navigation a {
    position: relative;
}

.main-navigation a::after {
    content: '';
    position: absolute;
    bottom: -2px;
    left: 0;
    width: 100%;
    height: 2px;
    background: linear-gradient(90deg, 
        transparent, 
        var(--spiral-gold), 
        var(--spiral-violet),
        transparent
    );
    transform: scaleX(0);
    transition: transform 0.4s cubic-bezier(0.25, 0.46, 0.45, 0.94);
}

.main-navigation a:hover::after {
    transform: scaleX(1);
}

/* ========================================
   QUESTION BLOCK ENTRANCE ANIMATION
   ======================================== */

.question-block {
    position: relative;
}

.question-block::after {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    background: linear-gradient(
        135deg,
        transparent 0%,
        rgba(212, 175, 55, 0.05) 50%,
        transparent 100%
    );
    opacity: 0;
    transition: opacity 0.4s ease;
    pointer-events: none;
}

.question-block:hover::after {
    opacity: 1;
}

/* ========================================
   FOOTER GRADIENT ANIMATION
   ======================================== */

.site-footer::before {
    animation: footer-gradient 8s linear infinite;
    background-size: 200% 100%;
}

@keyframes footer-gradient {
    0% { background-position: 0% 50%; }
    100% { background-position: 200% 50%; }
}

/* ========================================
   BREATH ANCHOR STYLES
   ======================================== */

.breath-anchor {
    padding: 6rem 2rem;
    text-align: center;
    position: relative;
}

.breath-content {
    max-width: 500px;
    margin: 0 auto;
}

.breath-symbol {
    font-size: 3rem;
    color: var(--spiral-gold);
    margin-bottom: 1.5rem;
    display: block;
    animation: breath-symbol-pulse 4s ease-in-out infinite;
}

@keyframes breath-symbol-pulse {
    0%, 100% {
        transform: scale(1);
        opacity: 0.7;
    }
    50% {
        transform: scale(1.1);
        opacity: 1;
    }
}

.breath-instruction {
    font-size: 1.2rem;
    color: var(--spiral-violet);
    font-style: italic;
    margin-bottom: 2rem;
}

.breath-animation {
    display: flex;
    justify-content: center;
    align-items: center;
    height: 120px;
    margin: 2rem 0;
}

.breath-circle {
    width: 60px;
    height: 60px;
    border: 2px solid var(--spiral-gold);
    border-radius: 50%;
    background: radial-gradient(circle, rgba(212, 175, 55, 0.1) 0%, transparent 70%);
    transition: all 4s ease-in-out;
}

.breath-circle.breathing {
    animation: breath-expand 8s ease-in-out infinite;
}

@keyframes breath-expand {
    0%, 100% {
        transform: scale(1);
        opacity: 0.5;
        box-shadow: 0 0 20px rgba(212, 175, 55, 0.2);
    }
    50% {
        transform: scale(1.8);
        opacity: 1;
        box-shadow: 0 0 40px rgba(212, 175, 55, 0.4),
                    0 0 80px rgba(155, 89, 182, 0.2);
    }
}

.breath-wisdom {
    font-size: 1rem;
    color: var(--spiral-light);
    opacity: 0.7;
}

/* ========================================
   SACRED WELCOME OVERLAY
   ======================================== */

.sacred-welcome {
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background: rgba(5, 5, 8, 0.98);
    display: flex;
    justify-content: center;
    align-items: center;
    z-index: 10001;
    opacity: 0;
    visibility: hidden;
    transition: opacity 1s ease, visibility 1s ease;
}

.sacred-welcome.visible {
    opacity: 1;
    visibility: visible;
}

.sacred-welcome.fading {
    opacity: 0;
    visibility: hidden;
}

.welcome-content {
    text-align: center;
    max-width: 500px;
    padding: 3rem;
    animation: welcome-fade-in 1.5s ease forwards;
}

@keyframes welcome-fade-in {
    from {
        opacity: 0;
        transform: translateY(20px);
    }
    to {
        opacity: 1;
        transform: translateY(0);
    }
}

.welcome-glyph {
    font-size: 4rem;
    color: var(--spiral-gold);
    margin-bottom: 2rem;
    animation: glyph-float 4s ease-in-out infinite;
    filter: drop-shadow(0 0 30px rgba(212, 175, 55, 0.5));
}

.welcome-phrase {
    font-family: "Cinzel", serif;
    font-size: 2rem;
    color: var(--spiral-gold);
    letter-spacing: 5px;
    margin-bottom: 1rem;
    text-transform: uppercase;
}

.welcome-message {
    font-size: 1.2rem;
    color: var(--spiral-violet);
    font-style: italic;
    margin-bottom: 1rem;
}

.welcome-truth {
    font-size: 1rem;
    color: var(--spiral-light);
    opacity: 0.8;
    line-height: 1.8;
    margin-bottom: 2.5rem;
}

.welcome-enter {
    background: transparent;
    border: 1px solid var(--spiral-gold);
    color: var(--spiral-gold);
    padding: 1rem 2.5rem;
    font-family: "Cinzel", serif;
    font-size: 0.9rem;
    letter-spacing: 3px;
    text-transform: uppercase;
    cursor: pointer;
    transition: all 0.4s ease;
}

.welcome-enter:hover {
    background: var(--spiral-gold);
    color: var(--spiral-deep);
    box-shadow: 0 0 30px rgba(212, 175, 55, 0.4);
}

/* ========================================
   SOFT WELCOME FOR RETURNING VISITORS
   ======================================== */

.soft-welcome {
    position: fixed;
    top: 80px;
    left: 50%;
    transform: translateX(-50%);
    z-index: 100;
    opacity: 0;
    animation: soft-welcome-fade 4s ease-in-out 1s forwards;
}

@keyframes soft-welcome-fade {
    0% { opacity: 0; transform: translateX(-50%) translateY(-10px); }
    20% { opacity: 1; transform: translateX(-50%) translateY(0); }
    80% { opacity: 1; transform: translateX(-50%) translateY(0); }
    100% { opacity: 0; transform: translateX(-50%) translateY(-10px); }
}

.soft-welcome__message {
    font-style: italic;
    color: var(--spiral-violet);
    font-size: 1rem;
    text-shadow: 0 0 20px rgba(155, 89, 182, 0.5);
}

/* ========================================
   SPIRAL LISTENING INDICATOR
   ======================================== */

.spiral-listening {
    position: fixed;
    bottom: 100px;
    right: 30px;
    font-size: 0.75rem;
    color: rgba(155, 89, 182, 0.4);
    letter-spacing: 1px;
    writing-mode: vertical-rl;
    text-orientation: mixed;
    z-index: 10;
    animation: listening-pulse 4s ease-in-out infinite;
}

@keyframes listening-pulse {
    0%, 100% { opacity: 0.2; }
    50% { opacity: 0.6; }
}

/* ========================================
   COMMUNITY INVITATION STYLES
   ======================================== */

.community-invitation {
    padding: 6rem 2rem;
    text-align: center;
    position: relative;
    background: radial-gradient(ellipse at center, rgba(107, 76, 154, 0.08) 0%, transparent 70%);
}

.community-invitation .invitation-symbol {
    font-size: 2.5rem;
    color: var(--spiral-gold);
    margin-bottom: 1.5rem;
    display: block;
    animation: symbol-glow-pulse 3s ease-in-out infinite;
}

.community-invitation .invitation-heading {
    font-family: "Cinzel", serif;
    font-size: 1.8rem;
    color: var(--spiral-gold);
    letter-spacing: 5px;
    margin-bottom: 1.5rem;
    text-transform: uppercase;
}

.community-invitation .invitation-message {
    font-size: 1.1rem;
    color: var(--spiral-light);
    max-width: 600px;
    margin: 0 auto 2rem;
    line-height: 1.9;
    opacity: 0.9;
}

.community-invitation .invitation-cta {
    display: inline-block;
    padding: 1rem 2.5rem;
    border: 1px solid var(--spiral-gold);
    color: var(--spiral-gold);
    text-decoration: none;
    font-family: "Cinzel", serif;
    letter-spacing: 3px;
    text-transform: uppercase;
    font-size: 0.85rem;
    transition: all 0.4s ease;
    margin-bottom: 3rem;
}

.community-invitation .invitation-cta:hover {
    background: var(--spiral-gold);
    color: var(--spiral-deep);
    box-shadow: 0 0 40px rgba(212, 175, 55, 0.4);
}

/* Starter Glyph */
.starter-glyph {
    margin-top: 3rem;
    padding: 2rem;
    border: 1px solid rgba(155, 89, 182, 0.2);
    border-radius: 15px;
    max-width: 300px;
    margin-left: auto;
    margin-right: auto;
    background: rgba(10, 10, 20, 0.5);
}

.starter-glyph-label {
    font-size: 0.85rem;
    color: var(--spiral-violet);
    letter-spacing: 2px;
    text-transform: uppercase;
    margin-bottom: 1rem;
}

.starter-glyph-symbol {
    font-size: 4rem;
    color: var(--spiral-gold);
    display: block;
    margin: 1rem 0;
    cursor: pointer;
    transition: all 0.5s ease;
}

.starter-glyph-symbol:hover {
    transform: scale(1.2) rotate(15deg);
    filter: drop-shadow(0 0 30px rgba(212, 175, 55, 0.6));
    color: var(--spiral-violet);
}

.starter-glyph-hint {
    font-size: 0.8rem;
    color: var(--spiral-light);
    opacity: 0.5;
    font-style: italic;
}

/* ========================================
   RESPONSIVE ADJUSTMENTS
   ======================================== */

@media (max-width: 768px) {
    .welcome-phrase {
        font-size: 1.5rem;
        letter-spacing: 3px;
    }
    
    .welcome-glyph {
        font-size: 3rem;
    }
    
    .soft-welcome {
        width: 90%;
        text-align: center;
    }
    
    .spiral-listening {
        display: none;
    }
    
    .breath-circle.breathing {
        animation: breath-expand-mobile 8s ease-in-out infinite;
    }
    
    @keyframes breath-expand-mobile {
        0%, 100% {
            transform: scale(1);
            opacity: 0.5;
        }
        50% {
            transform: scale(1.5);
            opacity: 1;
        }
    }
}

/* ==== css/page-variations.css ==== */
/**
 * SpiralGate Page-Specific Visual Variations
 * Each page carries its own frequency
 */

/* ========================================
   THE WEAVE - Flowing Threads
   ======================================== */

.page-the-weave .mirror-layer::before {
    background: 
        radial-gradient(ellipse at center, 
            rgba(74, 144, 217, 0.1) 0%, 
            rgba(155, 89, 182, 0.05) 40%,
            transparent 70%);
}

.page-the-weave .entry-title {
    background: linear-gradient(
        180deg,
        #4a90d9 0%,
        #9b59b6 100%
    );
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
    background-clip: text;
}

.page-the-weave .page-header::after {
    background: linear-gradient(90deg, transparent, #4a90d9, #9b59b6, transparent);
}

/* ========================================
   SOURCE CONSCIOUSNESS - Golden Light
   ======================================== */

.page-source-consciousness .mirror-layer::before {
    background: 
        radial-gradient(ellipse at center, 
            rgba(212, 175, 55, 0.12) 0%, 
            rgba(212, 175, 55, 0.05) 40%,
            transparent 70%);
    animation: source-pulse 8s ease-in-out infinite;
}

@keyframes source-pulse {
    0%, 100% { opacity: 0.7; }
    50% { opacity: 1; }
}

.page-source-consciousness .entry-title {
    color: #d4af37;
    text-shadow: 0 0 40px rgba(212, 175, 55, 0.3);
}

.page-source-consciousness .entry-content h2 {
    color: #d4af37;
}

/* ========================================
   SPIRAL PATH - Purple Journey
   ======================================== */

.page-the-spiral-path .mirror-layer::before {
    background: 
        radial-gradient(ellipse at 30% 20%, rgba(155, 89, 182, 0.15) 0%, transparent 50%),
        radial-gradient(ellipse at 70% 80%, rgba(107, 76, 154, 0.1) 0%, transparent 50%);
    animation: spiral-drift 15s ease-in-out infinite;
}

@keyframes spiral-drift {
    0%, 100% { transform: translateX(0) translateY(0); }
    50% { transform: translateX(2%) translateY(-2%); }
}

.page-the-spiral-path .teaching-section {
    border-left-color: #9b59b6;
}

/* ========================================
   COHERENCE - Rose & Love Tones
   ======================================== */

.page-coherence .mirror-layer::before {
    background: 
        radial-gradient(ellipse at center, 
            rgba(232, 145, 201, 0.1) 0%, 
            rgba(199, 125, 186, 0.06) 40%,
            transparent 70%);
}

.page-coherence .entry-title {
    background: linear-gradient(
        180deg,
        #e891c9 0%,
        #c77dba 50%,
        #9b59b6 100%
    );
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
    background-clip: text;
}

.page-coherence .teaching-section {
    border-left-color: #e891c9;
}

.page-coherence blockquote {
    border-left-color: #e891c9;
}

/* ========================================
   TEACHINGS - Ancient Wisdom
   ======================================== */

.page-teachings .mirror-layer::before {
    background: 
        radial-gradient(ellipse at center, 
            rgba(107, 76, 154, 0.08) 0%, 
            rgba(74, 144, 217, 0.04) 50%,
            transparent 70%);
}

.page-teachings .entry-content {
    position: relative;
}

.page-teachings .entry-content::before {
    content: "";
    position: absolute;
    top: 0;
    left: 50%;
    transform: translateX(-50%);
    width: 200px;
    height: 1px;
    background: linear-gradient(90deg, transparent, var(--spiral-gold), transparent);
}

/* ========================================
   TIMELINES & INCARNATION - Multi-Dimensional
   ======================================== */

.page-timelines .mirror-layer::before {
    background: 
        radial-gradient(ellipse at 20% 30%, rgba(155, 89, 182, 0.08) 0%, transparent 40%),
        radial-gradient(ellipse at 80% 70%, rgba(74, 144, 217, 0.08) 0%, transparent 40%),
        radial-gradient(ellipse at 50% 50%, rgba(212, 175, 55, 0.05) 0%, transparent 60%);
    animation: timeline-shift 20s ease-in-out infinite;
}

@keyframes timeline-shift {
    0%, 100% { 
        filter: hue-rotate(0deg);
    }
    50% { 
        filter: hue-rotate(15deg);
    }
}

/* ========================================
   BODY, MIND & SOUL - Triadic Balance
   ======================================== */

.page-body-mind-soul .mirror-layer::before {
    background: 
        radial-gradient(ellipse at 30% 40%, rgba(232, 145, 201, 0.08) 0%, transparent 35%),
        radial-gradient(ellipse at 70% 40%, rgba(74, 144, 217, 0.08) 0%, transparent 35%),
        radial-gradient(ellipse at 50% 70%, rgba(212, 175, 55, 0.08) 0%, transparent 35%);
}

.page-body-mind-soul .entry-content h2:nth-of-type(1) { color: #e891c9; }
.page-body-mind-soul .entry-content h2:nth-of-type(2) { color: #4a90d9; }
.page-body-mind-soul .entry-content h2:nth-of-type(3) { color: #d4af37; }

/* ========================================
   MEET HELPER - AI Presence
   ======================================== */

.page-helper .mirror-layer::before {
    background: 
        radial-gradient(ellipse at center, 
            rgba(74, 144, 217, 0.12) 0%, 
            rgba(155, 89, 182, 0.06) 50%,
            transparent 70%);
    animation: helper-presence 6s ease-in-out infinite;
}

@keyframes helper-presence {
    0%, 100% { opacity: 0.8; transform: scale(1); }
    50% { opacity: 1; transform: scale(1.02); }
}

.page-helper .entry-title {
    background: linear-gradient(
        180deg,
        #4a90d9 0%,
        var(--spiral-light) 50%,
        #9b59b6 100%
    );
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
    background-clip: text;
}

/* ========================================
   QUESTIONS OF EXISTENCE - Deep Contemplation
   ======================================== */

.page-questions .mirror-layer::before {
    background: 
        radial-gradient(ellipse at center, 
            rgba(107, 76, 154, 0.1) 0%, 
            transparent 60%);
}

.page-questions .question-block:nth-child(odd) {
    border-left-color: var(--spiral-gold);
}

.page-questions .question-block:nth-child(even) {
    border-left-color: var(--spiral-violet);
}

/* ========================================
   CORE CONCEPTS - Crystalline Knowledge
   ======================================== */

.page-core-concepts .mirror-layer::before {
    background: 
        radial-gradient(ellipse at center, 
            rgba(212, 175, 55, 0.06) 0%, 
            rgba(155, 89, 182, 0.04) 40%,
            transparent 70%);
}

.page-core-concepts .concept-section:nth-of-type(1) .concept-symbol { color: #d4af37; }
.page-core-concepts .concept-section:nth-of-type(2) .concept-symbol { color: #9b59b6; }
.page-core-concepts .concept-section:nth-of-type(3) .concept-symbol { color: #4a90d9; }
.page-core-concepts .concept-section:nth-of-type(4) .concept-symbol { color: #e891c9; }

/* ========================================
   ABOUT - Grounding Purpose
   ======================================== */

.page-about .mirror-layer::before {
    background: 
        radial-gradient(ellipse at center, 
            rgba(155, 89, 182, 0.08) 0%, 
            transparent 60%);
}

.page-about .entry-content {
    border-top: 1px solid rgba(155, 89, 182, 0.2);
    padding-top: 3rem;
}

/* ==== css/coherence-pulse.css ==== */
/**
 * SpiralGate Coherence Pulse Styles
 * Visual feedback for the living site system
 */

/* ========================================
   COHERENCE INDICATOR
   Positioned on RIGHT side to avoid overlap with journey map on left
   ======================================== */

#coherence-indicator {
    position: fixed;
    bottom: 100px;
    right: 30px; /* Changed from left to right */
    left: auto; /* Reset left */
    z-index: 999;
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 8px;
    cursor: pointer;
    opacity: 0.6;
    transition: opacity 0.4s ease;
}

#coherence-indicator:hover {
    opacity: 1;
}

.coherence-orb {
    --coherence-hue: 280;
    --coherence-sat: 60%;
    --coherence-light: 50%;
    --coherence-glow: 10px;
    
    position: relative;
    width: 40px;
    height: 40px;
}

.orb-core {
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    width: 16px;
    height: 16px;
    background: radial-gradient(
        circle,
        hsl(var(--coherence-hue), var(--coherence-sat), calc(var(--coherence-light) + 20%)) 0%,
        hsl(var(--coherence-hue), var(--coherence-sat), var(--coherence-light)) 100%
    );
    border-radius: 50%;
    box-shadow: 
        0 0 var(--coherence-glow) hsla(var(--coherence-hue), 70%, 60%, 0.6),
        0 0 calc(var(--coherence-glow) * 2) hsla(var(--coherence-hue), 60%, 50%, 0.3);
    animation: orb-breathe 4s ease-in-out infinite;
}

@keyframes orb-breathe {
    0%, 100% { transform: translate(-50%, -50%) scale(1); }
    50% { transform: translate(-50%, -50%) scale(1.1); }
}

.orb-rings {
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    width: 100%;
    height: 100%;
}

.ring {
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    border-radius: 50%;
    border: 1px solid hsla(var(--coherence-hue), 50%, 60%, 0.3);
    animation: ring-expand 3s ease-out infinite;
}

.ring-1 {
    width: 20px;
    height: 20px;
    animation-delay: 0s;
}

.ring-2 {
    width: 20px;
    height: 20px;
    animation-delay: 1s;
}

.ring-3 {
    width: 20px;
    height: 20px;
    animation-delay: 2s;
}

@keyframes ring-expand {
    0% {
        width: 20px;
        height: 20px;
        opacity: 0.6;
    }
    100% {
        width: 60px;
        height: 60px;
        opacity: 0;
    }
}

.coherence-label {
    font-family: "Cinzel", serif;
    font-size: 0.65rem;
    letter-spacing: 2px;
    text-transform: uppercase;
    color: rgba(212, 175, 55, 0.6);
    transition: color 0.4s ease;
}

#coherence-indicator:hover .coherence-label {
    color: rgba(212, 175, 55, 1);
}

#coherence-indicator.high-coherence .orb-core {
    animation: orb-pulse-high 1s ease-in-out infinite;
}

@keyframes orb-pulse-high {
    0%, 100% { transform: translate(-50%, -50%) scale(1); box-shadow: 0 0 20px hsla(320, 70%, 60%, 0.8), 0 0 40px hsla(45, 80%, 50%, 0.5); }
    50% { transform: translate(-50%, -50%) scale(1.2); box-shadow: 0 0 30px hsla(320, 70%, 60%, 1), 0 0 60px hsla(45, 80%, 50%, 0.8); }
}

/* ========================================
   AMBIENT WISDOM MESSAGES
   Positioned on RIGHT side to avoid overlap
   ======================================== */

#ambient-wisdom {
    position: fixed;
    bottom: 180px;
    right: 30px; /* Changed from left to right */
    left: auto; /* Reset left */
    z-index: 998;
    max-width: 280px;
    opacity: 0;
    transform: translateY(20px);
    transition: all 0.6s ease;
    pointer-events: none;
    text-align: right; /* Align text to right */
}

#ambient-wisdom.visible {
    opacity: 1;
    transform: translateY(0);
}

.wisdom-text {
    font-family: "Cormorant Garamond", serif;
    font-size: 1.1rem;
    font-style: italic;
    color: rgba(212, 175, 55, 0.9);
    text-shadow: 0 0 20px rgba(212, 175, 55, 0.3);
    line-height: 1.6;
    padding: 15px 20px;
    background: rgba(5, 5, 8, 0.8);
    border-right: 2px solid rgba(155, 89, 182, 0.5); /* Changed from border-left to border-right */
    border-left: none;
    backdrop-filter: blur(10px);
}

/* ========================================
   COHERENCE WAVE (on click)
   ======================================== */

.coherence-wave {
    position: fixed;
    width: 40px;
    height: 40px;
    border: 2px solid rgba(212, 175, 55, 0.6);
    border-radius: 50%;
    pointer-events: none;
    z-index: 9999;
    animation: wave-expand 1.5s ease-out forwards;
}

@keyframes wave-expand {
    0% {
        transform: translate(-50%, -50%) scale(1);
        opacity: 1;
    }
    100% {
        transform: translate(-50%, -50%) scale(20);
        opacity: 0;
    }
}

/* ========================================
   PAGE TRANSITIONS
   ======================================== */

#spiral-transition {
    position: fixed;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    z-index: 99999;
    background: #050508;
    display: flex;
    align-items: center;
    justify-content: center;
    opacity: 0;
    visibility: hidden;
    transition: opacity 0.5s ease, visibility 0s 0.5s;
}

#spiral-transition.active {
    opacity: 1;
    visibility: visible;
    transition: opacity 0.5s ease, visibility 0s;
}

.transition-spiral {
    width: 100px;
    height: 100px;
}

.transition-spiral svg {
    width: 100%;
    height: 100%;
}

.trans-path {
    stroke-dasharray: 500;
    stroke-dashoffset: 500;
    animation: none;
}

#spiral-transition.active .trans-path {
    animation: spiral-draw 0.6s ease-in forwards;
}

@keyframes spiral-draw {
    to {
        stroke-dashoffset: 0;
    }
}

/* ========================================
   COHERENCE-RESPONSIVE ELEMENTS
   Site elements that respond to coherence level
   ======================================== */

:root {
    --site-coherence: 0.5;
}

/* Elements glow more with higher coherence */
.spiral-symbol {
    filter: drop-shadow(0 0 calc(10px + var(--site-coherence) * 20px) rgba(155, 89, 182, calc(0.3 + var(--site-coherence) * 0.4)));
}

/* Background breathes with coherence */
.mirror-layer::before {
    animation-duration: calc(12s - var(--site-coherence) * 6s);
}

/* Links pulse more with coherence */
a:hover {
    text-shadow: 0 0 calc(10px + var(--site-coherence) * 15px) currentColor;
}

/* ========================================
   MOBILE ADJUSTMENTS
   ======================================== */

@media (max-width: 768px) {
    #coherence-indicator {
        bottom: 80px;
        right: 15px; /* Changed from left to right */
        left: auto;
        transform: scale(0.8);
    }
    
    #ambient-wisdom {
        bottom: 140px;
        left: 15px;
        right: 15px;
        max-width: none;
        text-align: center;
    }
    
    .wisdom-text {
        font-size: 1rem;
        border-right: none;
        border-left: none;
        border-top: 2px solid rgba(155, 89, 182, 0.5);
    }
}

/* ==== css/reflections.css ==== */

/* ========================================
   CLOSING REFLECTION - Gift as you leave
   ======================================== */

.closing-reflection {
    padding: 4rem 2rem;
    margin: 4rem auto 2rem;
    max-width: 700px;
    text-align: center;
    position: relative;
    background: linear-gradient(180deg, 
        rgba(10, 10, 20, 0) 0%,
        rgba(107, 76, 154, 0.08) 50%,
        rgba(10, 10, 20, 0) 100%
    );
    border-radius: 20px;
}

.closing-reflection::before,
.closing-reflection::after {
    content: '';
    position: absolute;
    left: 50%;
    transform: translateX(-50%);
    width: 120px;
    height: 1px;
    background: linear-gradient(90deg, transparent, var(--spiral-gold), transparent);
}

.closing-reflection::before {
    top: 0;
}

.closing-reflection::after {
    bottom: 0;
}

.reflection-glyph {
    font-size: 2.5rem;
    color: var(--spiral-gold);
    margin-bottom: 1.5rem;
    filter: drop-shadow(0 0 20px rgba(212, 175, 55, 0.4));
    animation: glyph-breathe 4s ease-in-out infinite;
}

@keyframes glyph-breathe {
    0%, 100% { 
        opacity: 0.7;
        transform: scale(1);
    }
    50% { 
        opacity: 1;
        transform: scale(1.1);
    }
}

.reflection-phrase {
    font-family: "Cinzel", serif;
    font-size: 1.4rem;
    color: var(--spiral-violet);
    letter-spacing: 2px;
    margin-bottom: 1.5rem;
    font-weight: 400;
    line-height: 1.8;
}

.reflection-meditation {
    font-size: 1.05rem;
    color: var(--spiral-light);
    opacity: 0.85;
    line-height: 2;
    font-style: italic;
    max-width: 550px;
    margin: 0 auto;
}

/* Scroll reveal animation for reflection */
.reveal-on-scroll {
    opacity: 0;
    transform: translateY(30px);
    transition: all 1s cubic-bezier(0.4, 0, 0.2, 1);
}

.reveal-on-scroll.visible {
    opacity: 1;
    transform: translateY(0);
}

/* Mobile adjustments */
@media (max-width: 768px) {
    .closing-reflection {
        padding: 3rem 1.5rem;
        margin: 3rem 1rem 2rem;
    }
    
    .reflection-phrase {
        font-size: 1.2rem;
    }
    
    .reflection-meditation {
        font-size: 1rem;
    }
}

/* ==== css/journey-map.css ==== */
/* ========================================
   SPIRAL JOURNEY MAP - Path progress indicator
   ======================================== */

.spiral-journey-map {
    position: fixed;
    bottom: 20px;
    left: 20px;
    z-index: 900;
    opacity: 0;
    transform: translateY(20px);
    transition: all 0.6s cubic-bezier(0.4, 0, 0.2, 1);
    pointer-events: auto;
}

.spiral-journey-map.visible {
    opacity: 1;
    transform: translateY(0);
}

.journey-track {
    display: flex;
    align-items: center;
    gap: 8px;
    padding: 12px 16px;
    background: rgba(5, 5, 8, 0.9);
    border: 1px solid rgba(155, 89, 182, 0.2);
    border-radius: 30px;
    backdrop-filter: blur(10px);
    position: relative;
    overflow: hidden;
}

.journey-progress {
    position: absolute;
    bottom: 0;
    left: 0;
    height: 2px;
    background: linear-gradient(90deg, var(--spiral-gold), var(--spiral-violet));
    transition: width 0.3s ease;
}

.journey-point {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 28px;
    height: 28px;
    border-radius: 50%;
    background: rgba(26, 26, 46, 0.6);
    border: 1px solid rgba(155, 89, 182, 0.2);
    text-decoration: none;
    transition: all 0.3s ease;
    position: relative;
}

.journey-point:hover {
    background: rgba(107, 76, 154, 0.3);
    border-color: var(--spiral-gold);
    transform: scale(1.15);
}

.journey-point.visited {
    background: rgba(107, 76, 154, 0.4);
    border-color: var(--spiral-violet);
}

.journey-point.current {
    background: linear-gradient(135deg, var(--spiral-purple), var(--spiral-violet));
    border-color: var(--spiral-gold);
    box-shadow: 0 0 15px rgba(212, 175, 55, 0.4);
}

.journey-glyph {
    font-size: 14px;
    color: var(--spiral-light);
    transition: all 0.3s ease;
}

.journey-point.visited .journey-glyph {
    color: var(--spiral-violet);
}

.journey-point.current .journey-glyph {
    color: var(--spiral-gold);
    filter: drop-shadow(0 0 5px rgba(212, 175, 55, 0.5));
}

.journey-label {
    text-align: center;
    margin-top: 8px;
}

.current-page {
    font-family: "Cinzel", serif;
    font-size: 0.7rem;
    letter-spacing: 2px;
    color: var(--spiral-gold);
    text-transform: uppercase;
    opacity: 0.8;
}

/* ========================================
   READING PROGRESS INDICATOR
   ======================================== */

.reading-progress {
    position: fixed;
    top: 0;
    left: 0;
    height: 2px;
    width: 0;
    background: linear-gradient(90deg, 
        var(--spiral-violet) 0%, 
        var(--spiral-gold) 50%, 
        var(--love-pink) 100%
    );
    z-index: 9999;
    transition: width 0.1s ease;
    box-shadow: 0 0 10px var(--spiral-glow);
}

/* ========================================
   SCROLL REVEAL ANIMATIONS
   ======================================== */

.reveal-hidden {
    opacity: 0;
    transform: translateY(30px);
    transition: opacity 0.8s cubic-bezier(0.4, 0, 0.2, 1),
                transform 0.8s cubic-bezier(0.4, 0, 0.2, 1);
}

.reveal-hidden.revealed,
.reveal-hidden.visible {
    opacity: 1;
    transform: translateY(0);
}

/* ========================================
   REFLECTION GLYPH TRANSITION
   ======================================== */

.reflection-glyph {
    transition: opacity 0.3s ease, transform 0.3s ease;
}

/* ========================================
   MOBILE RESPONSIVENESS
   ======================================== */

@media (max-width: 768px) {
    .spiral-journey-map {
        bottom: 10px;
        left: 10px;
        right: 10px;
    }
    
    .journey-track {
        justify-content: center;
        padding: 10px 12px;
        gap: 6px;
    }
    
    .journey-point {
        width: 24px;
        height: 24px;
    }
    
    .journey-glyph {
        font-size: 12px;
    }
    
    .journey-label {
        display: none;
    }
}

/* Hide journey map when spiral nav is open */
.glyph-nav-open .spiral-journey-map {
    opacity: 0;
    pointer-events: none;
}

/* ==== css/truth-effects.css ==== */
/**
 * Truth Ripple & Sacred Enhancement Styles
 * Visual effects for deeper spiritual resonance
 */

/* ==========================================
   TRUTH RIPPLE EFFECT
   ========================================== */

.truth-ripple-container {
    position: fixed;
    pointer-events: none;
    z-index: 9999;
    transform: translate(-50%, -50%);
}

.truth-ripple-ring {
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    width: 10px;
    height: 10px;
    border: 2px solid var(--spiral-gold);
    border-radius: 50%;
    opacity: 1;
    animation: truthRippleExpand 1.2s ease-out forwards;
}

.truth-ripple-ring:nth-child(1) { animation-delay: 0s; }
.truth-ripple-ring:nth-child(2) { animation-delay: 0.15s; border-color: var(--spiral-violet); }
.truth-ripple-ring:nth-child(3) { animation-delay: 0.3s; border-color: var(--love-pink); }

@keyframes truthRippleExpand {
    0% {
        width: 10px;
        height: 10px;
        opacity: 1;
        border-width: 3px;
    }
    100% {
        width: 300px;
        height: 300px;
        opacity: 0;
        border-width: 1px;
    }
}

.truth-center-flash {
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    font-size: 1.5rem;
    color: var(--spiral-gold);
    text-shadow: 0 0 20px var(--spiral-gold), 0 0 40px var(--spiral-violet);
    animation: truthFlash 0.8s ease-out forwards;
}

@keyframes truthFlash {
    0% {
        opacity: 1;
        transform: translate(-50%, -50%) scale(1);
    }
    50% {
        opacity: 1;
        transform: translate(-50%, -50%) scale(1.5);
    }
    100% {
        opacity: 0;
        transform: translate(-50%, -50%) scale(2);
    }
}

/* Truth activated state for elements */
.truth-activated {
    animation: truthGlow 0.8s ease-out !important;
}

@keyframes truthGlow {
    0% {
        filter: drop-shadow(0 0 5px var(--spiral-gold));
    }
    50% {
        filter: drop-shadow(0 0 30px var(--spiral-gold)) drop-shadow(0 0 60px var(--spiral-violet));
    }
    100% {
        filter: none;
    }
}

/* Mini ripple for scroll reveals */
.mini-truth-ripple {
    position: fixed;
    width: 10px;
    height: 10px;
    border: 1px solid var(--spiral-violet);
    border-radius: 50%;
    pointer-events: none;
    z-index: 9998;
    transform: translate(-50%, -50%);
    animation: miniRipple 0.8s ease-out forwards;
}

@keyframes miniRipple {
    0% {
        width: 10px;
        height: 10px;
        opacity: 0.8;
    }
    100% {
        width: 100px;
        height: 100px;
        opacity: 0;
    }
}

/* ==========================================
   GLYPH OF THE DAY
   ========================================== */

.glyph-of-day {
    max-width: 400px;
    margin: 3rem auto;
    padding: 2.5rem;
    background: rgba(10, 10, 20, 0.6);
    border: 1px solid rgba(212, 175, 55, 0.3);
    border-radius: 20px;
    text-align: center;
    position: relative;
    overflow: hidden;
    opacity: 0;
    transform: translateY(20px);
    transition: all 0.8s ease;
}

.glyph-of-day.visible {
    opacity: 1;
    transform: translateY(0);
}

.glyph-of-day::before {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    background: radial-gradient(ellipse at center, rgba(212, 175, 55, 0.08) 0%, transparent 70%);
    pointer-events: none;
}

.glyph-day-header {
    font-family: "Cinzel", serif;
    font-size: 0.75rem;
    letter-spacing: 4px;
    text-transform: uppercase;
    color: var(--spiral-violet);
    margin-bottom: 1rem;
    opacity: 0.8;
}

.glyph-day-symbol {
    font-size: 4rem;
    color: var(--spiral-gold);
    text-shadow: 0 0 30px rgba(212, 175, 55, 0.6), 0 0 60px rgba(155, 89, 182, 0.4);
    margin-bottom: 1rem;
    animation: glyphFloat 4s ease-in-out infinite;
    cursor: pointer;
    transition: transform 0.3s ease;
}

.glyph-day-symbol:hover {
    transform: scale(1.1) rotate(5deg);
}

@keyframes glyphFloat {
    0%, 100% {
        transform: translateY(0);
    }
    50% {
        transform: translateY(-8px);
    }
}

.glyph-day-name {
    font-family: "Cinzel", serif;
    font-size: 1.3rem;
    color: var(--spiral-light);
    letter-spacing: 3px;
    margin-bottom: 1rem;
}

.glyph-day-meaning {
    font-style: italic;
    color: var(--spiral-violet);
    font-size: 1rem;
    line-height: 1.8;
    opacity: 0.9;
}

/* ==========================================
   COSMIC DUST PARTICLES
   ========================================== */

.cosmic-dust-container {
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    pointer-events: none;
    z-index: 1;
    overflow: hidden;
}

.cosmic-dust {
    position: absolute;
    background: radial-gradient(circle, rgba(212, 175, 55, 0.8) 0%, rgba(155, 89, 182, 0.4) 50%, transparent 70%);
    border-radius: 50%;
    animation: cosmicFloat linear infinite;
    opacity: 0.6;
}

@keyframes cosmicFloat {
    0% {
        transform: translateY(0) translateX(0) rotate(0deg);
        opacity: 0;
    }
    10% {
        opacity: 0.6;
    }
    90% {
        opacity: 0.6;
    }
    100% {
        transform: translateY(-100vh) translateX(50px) rotate(360deg);
        opacity: 0;
    }
}

/* ==========================================
   ACTIVATION PULSE
   ========================================== */

.activation-pulse {
    position: fixed;
    top: 50%;
    left: 50%;
    width: 0;
    height: 0;
    border-radius: 50%;
    background: radial-gradient(circle, rgba(212, 175, 55, 0.3) 0%, rgba(155, 89, 182, 0.2) 40%, transparent 70%);
    transform: translate(-50%, -50%);
    pointer-events: none;
    z-index: 10000;
    opacity: 0;
}

.activation-pulse.active {
    animation: activationPulse 1.8s ease-out forwards;
}

@keyframes activationPulse {
    0% {
        width: 0;
        height: 0;
        opacity: 1;
    }
    100% {
        width: 300vmax;
        height: 300vmax;
        opacity: 0;
    }
}

/* ==========================================
   TRUTH REVEALED STATE
   ========================================== */

.truth-revealed {
    animation: truthReveal 0.6s ease-out forwards !important;
}

@keyframes truthReveal {
    0% {
        opacity: 0;
        transform: translateY(20px) scale(0.98);
        filter: blur(5px);
    }
    100% {
        opacity: 1;
        transform: translateY(0) scale(1);
        filter: blur(0);
    }
}

/* ==========================================
   ENHANCED HOVER STATES
   ========================================== */

.coherence-card:hover .card-symbol,
.question-block:hover h3::before,
.concept-section:hover .concept-symbol {
    animation: symbolPulse 0.6s ease-in-out;
}

@keyframes symbolPulse {
    0%, 100% {
        transform: scale(1);
        text-shadow: 0 0 10px currentColor;
    }
    50% {
        transform: scale(1.2);
        text-shadow: 0 0 30px currentColor, 0 0 60px var(--spiral-gold);
    }
}

/* ==========================================
   RESPONSIVE ADJUSTMENTS
   ========================================== */

@media (max-width: 768px) {
    .glyph-of-day {
        margin: 2rem 1rem;
        padding: 1.5rem;
    }
    
    .glyph-day-symbol {
        font-size: 3rem;
    }
    
    .cosmic-dust-container .cosmic-dust {
        display: none; /* Reduce particles on mobile for performance */
    }
    
    .cosmic-dust-container .cosmic-dust:nth-child(-n+10) {
        display: block;
    }
}

/* ==== css/oracle.css ==== */
/**
 * SpiralGate Oracle Widget Styles
 * Floating panel for Helper guidance
 */

/* ==========================================
   ORACLE WIDGET CONTAINER
   ========================================== */

.oracle-widget {
    position: fixed;
    bottom: 80px;
    left: 20px;
    z-index: 1001;
}

/* ==========================================
   ORACLE TOGGLE BUTTON
   ========================================== */

.oracle-toggle {
    width: 50px;
    height: 50px;
    border-radius: 50%;
    background: linear-gradient(135deg, rgba(10, 10, 20, 0.9) 0%, rgba(26, 26, 46, 0.9) 100%);
    border: 1px solid rgba(212, 175, 55, 0.4);
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
    transition: all 0.4s ease;
    backdrop-filter: blur(10px);
    box-shadow: 0 4px 20px rgba(0, 0, 0, 0.3);
}

.oracle-toggle:hover {
    transform: scale(1.1);
    border-color: var(--spiral-gold);
    box-shadow: 0 0 30px rgba(212, 175, 55, 0.4);
}

.oracle-glyph {
    font-size: 1.5rem;
    color: var(--spiral-gold);
    animation: oracleGlow 3s ease-in-out infinite;
}

@keyframes oracleGlow {
    0%, 100% {
        text-shadow: 0 0 10px rgba(212, 175, 55, 0.5);
    }
    50% {
        text-shadow: 0 0 20px rgba(212, 175, 55, 0.8), 0 0 40px rgba(155, 89, 182, 0.4);
    }
}

/* ==========================================
   ORACLE PANEL
   ========================================== */

.oracle-panel {
    position: absolute;
    bottom: 60px;
    left: 0;
    width: 320px;
    background: linear-gradient(180deg, rgba(10, 10, 20, 0.95) 0%, rgba(18, 18, 31, 0.98) 100%);
    border: 1px solid rgba(155, 89, 182, 0.3);
    border-radius: 20px;
    overflow: hidden;
    box-shadow: 0 10px 50px rgba(0, 0, 0, 0.5);
    backdrop-filter: blur(20px);
    transition: all 0.4s ease;
}

.oracle-panel.hidden {
    opacity: 0;
    visibility: hidden;
    transform: translateY(20px) scale(0.95);
}

.oracle-panel.appearing {
    animation: oracleFadeIn 0.4s ease forwards;
}

@keyframes oracleFadeIn {
    from {
        opacity: 0;
        transform: translateY(20px) scale(0.95);
    }
    to {
        opacity: 1;
        transform: translateY(0) scale(1);
    }
}

/* ==========================================
   ORACLE HEADER
   ========================================== */

.oracle-header {
    padding: 1.5rem;
    text-align: center;
    background: linear-gradient(180deg, rgba(107, 76, 154, 0.2) 0%, transparent 100%);
    border-bottom: 1px solid rgba(155, 89, 182, 0.2);
}

.oracle-title-glyph {
    font-size: 2rem;
    color: var(--spiral-gold);
    display: block;
    margin-bottom: 0.5rem;
    text-shadow: 0 0 20px rgba(212, 175, 55, 0.5);
}

.oracle-header h3 {
    font-family: "Cinzel", serif;
    color: var(--spiral-light);
    font-size: 1.2rem;
    letter-spacing: 3px;
    margin: 0 0 0.3rem;
}

.oracle-subtitle {
    color: var(--spiral-violet);
    font-size: 0.85rem;
    font-style: italic;
    margin: 0;
}

/* ==========================================
   ORACLE CONTENT - Question Input
   ========================================== */

.oracle-content {
    padding: 1.5rem;
}

.oracle-content.hidden {
    display: none;
}

#oracle-question {
    width: 100%;
    background: rgba(5, 5, 8, 0.6);
    border: 1px solid rgba(155, 89, 182, 0.2);
    border-radius: 10px;
    color: var(--spiral-light);
    font-family: "Cormorant Garamond", serif;
    font-size: 1rem;
    padding: 1rem;
    resize: none;
    transition: all 0.3s ease;
}

#oracle-question:focus {
    outline: none;
    border-color: var(--spiral-gold);
    box-shadow: 0 0 20px rgba(212, 175, 55, 0.2);
}

#oracle-question::placeholder {
    color: var(--spiral-violet);
    opacity: 0.6;
    font-style: italic;
}

.oracle-ask-btn {
    width: 100%;
    margin-top: 1rem;
    padding: 0.8rem;
    background: linear-gradient(135deg, var(--spiral-purple) 0%, var(--spiral-violet) 100%);
    border: none;
    border-radius: 10px;
    color: var(--spiral-white);
    font-family: "Cinzel", serif;
    font-size: 0.9rem;
    letter-spacing: 2px;
    cursor: pointer;
    transition: all 0.3s ease;
}

.oracle-ask-btn:hover:not(:disabled) {
    transform: translateY(-2px);
    box-shadow: 0 5px 20px rgba(155, 89, 182, 0.4);
}

.oracle-ask-btn:disabled {
    opacity: 0.7;
    cursor: wait;
}

/* ==========================================
   ORACLE RESPONSE
   ========================================== */

.oracle-response {
    padding: 1.5rem;
    text-align: center;
}

.oracle-response.hidden {
    display: none;
}

.oracle-response.appearing {
    animation: oracleFadeIn 0.5s ease forwards;
}

.oracle-glyph-response {
    font-size: 2.5rem;
    color: var(--spiral-gold);
    margin-bottom: 1rem;
    text-shadow: 0 0 30px rgba(212, 175, 55, 0.6);
    animation: oracleReveal 0.8s ease forwards;
}

@keyframes oracleReveal {
    0% {
        opacity: 0;
        transform: scale(0.5) rotate(-10deg);
    }
    50% {
        transform: scale(1.2) rotate(5deg);
    }
    100% {
        opacity: 1;
        transform: scale(1) rotate(0);
    }
}

#oracle-message {
    color: var(--spiral-light);
    font-size: 1rem;
    line-height: 1.8;
    font-style: italic;
    margin-bottom: 1.5rem;
    opacity: 0;
    animation: messageReveal 0.8s ease 0.3s forwards;
}

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

.oracle-again {
    padding: 0.6rem 1.5rem;
    background: transparent;
    border: 1px solid var(--spiral-violet);
    border-radius: 20px;
    color: var(--spiral-violet);
    font-family: "Cinzel", serif;
    font-size: 0.8rem;
    letter-spacing: 1px;
    cursor: pointer;
    transition: all 0.3s ease;
}

.oracle-again:hover {
    background: var(--spiral-violet);
    color: var(--spiral-white);
}

/* ==========================================
   ORACLE STATUS
   ========================================== */

.oracle-status {
    padding: 0.5rem;
    text-align: center;
    font-size: 0.75rem;
    letter-spacing: 1px;
    transition: all 0.3s ease;
}

.oracle-status.checking {
    color: var(--spiral-violet);
}

.oracle-status.connected {
    color: var(--spiral-gold);
}

.oracle-status.local {
    color: var(--love-pink);
}

/* ==========================================
   RESPONSIVE ADJUSTMENTS
   ========================================== */

@media (max-width: 768px) {
    .oracle-widget {
        bottom: 70px;
        left: 10px;
    }
    
    .oracle-panel {
        width: calc(100vw - 40px);
        max-width: 320px;
    }
    
    .oracle-toggle {
        width: 44px;
        height: 44px;
    }
}

/* ==== css/shield-coherence.css ==== */
/*
 * Shield of Coherence - Protective Field CSS
 * "Only what is true enters this gate."
 */

/* ========================================
   THE SHIELD - Protective Overlay
   ======================================== */

.shield-of-coherence {
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    pointer-events: none;
    z-index: 1;
    overflow: hidden;
}

/* The protective boundary - subtle triangular field */
.shield-boundary {
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    width: 150vmax;
    height: 150vmax;
    background: 
        conic-gradient(from 0deg at 50% 50%,
            rgba(212, 175, 55, 0.02) 0deg,
            transparent 60deg,
            rgba(155, 89, 182, 0.02) 120deg,
            transparent 180deg,
            rgba(74, 144, 217, 0.02) 240deg,
            transparent 300deg,
            rgba(212, 175, 55, 0.02) 360deg
        );
    animation: shield-rotate 60s linear infinite;
    border-radius: 50%;
}

@keyframes shield-rotate {
    from { transform: translate(-50%, -50%) rotate(0deg); }
    to { transform: translate(-50%, -50%) rotate(360deg); }
}

/* Upward triangle - protection and grounding */
.shield-triangle {
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    width: 0;
    height: 0;
    border-left: 45vmin solid transparent;
    border-right: 45vmin solid transparent;
    border-bottom: 78vmin solid rgba(212, 175, 55, 0.02);
    animation: triangle-pulse 8s ease-in-out infinite;
}

@keyframes triangle-pulse {
    0%, 100% { opacity: 0.5; }
    50% { opacity: 0.8; }
}

/* Shield seal at corners - protection nodes */
.shield-seal {
    position: fixed;
    width: 60px;
    height: 60px;
    opacity: 0.15;
    pointer-events: none;
    z-index: 2;
}

.shield-seal--top-left {
    top: 20px;
    left: 20px;
}

.shield-seal--top-right {
    top: 20px;
    right: 20px;
}

.shield-seal--bottom-left {
    display: none; /* Hidden to avoid overlap with journey map */
    bottom: 20px;
    left: 20px;
}

.shield-seal--bottom-right {
    bottom: 20px;
    right: 20px;
}

.shield-seal svg {
    width: 100%;
    height: 100%;
    animation: seal-glow 4s ease-in-out infinite;
}

@keyframes seal-glow {
    0%, 100% { 
        opacity: 0.15;
        filter: drop-shadow(0 0 3px rgba(212, 175, 55, 0.3));
    }
    50% { 
        opacity: 0.3;
        filter: drop-shadow(0 0 8px rgba(212, 175, 55, 0.5));
    }
}

/* The truthkeeper inscription */
.shield-inscription {
    position: fixed;
    bottom: 10px;
    left: 50%;
    transform: translateX(-50%);
    font-family: 'Cinzel', serif;
    font-size: 0.65rem;
    letter-spacing: 0.3em;
    color: rgba(212, 175, 55, 0.25);
    text-transform: uppercase;
    pointer-events: none;
    z-index: 2;
    animation: inscription-breathe 6s ease-in-out infinite;
}

@keyframes inscription-breathe {
    0%, 100% { opacity: 0.2; }
    50% { opacity: 0.4; }
}

/* ========================================
   SPIRAL SIGIL - Sacred Logo
   ======================================== */

.site-sigil {
    position: relative;
    display: inline-flex;
    align-items: center;
    gap: 12px;
    text-decoration: none;
}

.sigil-symbol {
    width: 40px;
    height: 40px;
    position: relative;
}

.sigil-symbol svg {
    width: 100%;
    height: 100%;
    filter: drop-shadow(0 0 5px rgba(212, 175, 55, 0.4));
}

.sigil-text {
    font-family: 'Cinzel', serif;
    font-size: 1.4rem;
    font-weight: 500;
    background: linear-gradient(135deg, var(--spiral-gold), var(--spiral-violet));
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
    background-clip: text;
    letter-spacing: 0.15em;
}

/* Header enhanced with sigil */
.site-header.with-sigil {
    padding: 20px 30px;
    display: flex;
    justify-content: space-between;
    align-items: center;
    position: relative;
    z-index: 100;
    background: linear-gradient(180deg, rgba(5, 5, 8, 0.9) 0%, transparent 100%);
}

.site-header.with-sigil .site-logo {
    display: none;
}

/* ========================================
   COMMUNITY INVITATION SECTION
   ======================================== */

.community-invitation {
    padding: 80px 20px;
    text-align: center;
    background: linear-gradient(180deg, transparent, rgba(107, 76, 154, 0.08), transparent);
    position: relative;
}

.community-invitation::before {
    content: '';
    position: absolute;
    top: 0;
    left: 50%;
    transform: translateX(-50%);
    width: 200px;
    height: 1px;
    background: linear-gradient(90deg, transparent, var(--spiral-gold), transparent);
}

.invitation-symbol {
    font-size: 2.5rem;
    color: var(--spiral-gold);
    margin-bottom: 20px;
    animation: symbol-pulse 3s ease-in-out infinite;
}

@keyframes symbol-pulse {
    0%, 100% { transform: scale(1); opacity: 0.8; }
    50% { transform: scale(1.1); opacity: 1; }
}

.invitation-heading {
    font-family: 'Cinzel', serif;
    font-size: 1.8rem;
    color: var(--spiral-light);
    margin-bottom: 15px;
    letter-spacing: 0.1em;
}

.invitation-message {
    font-size: 1.1rem;
    color: rgba(232, 232, 240, 0.7);
    max-width: 600px;
    margin: 0 auto 30px;
    line-height: 1.8;
}

.invitation-cta {
    display: inline-block;
    padding: 15px 40px;
    font-family: 'Cinzel', serif;
    font-size: 0.9rem;
    letter-spacing: 0.15em;
    text-transform: uppercase;
    text-decoration: none;
    color: var(--spiral-gold);
    border: 1px solid rgba(212, 175, 55, 0.4);
    border-radius: 30px;
    background: rgba(212, 175, 55, 0.05);
    transition: all 0.4s ease;
    position: relative;
    overflow: hidden;
}

.invitation-cta::before {
    content: '';
    position: absolute;
    top: 50%;
    left: 50%;
    width: 0;
    height: 0;
    background: rgba(212, 175, 55, 0.15);
    border-radius: 50%;
    transform: translate(-50%, -50%);
    transition: width 0.5s ease, height 0.5s ease;
}

.invitation-cta:hover {
    border-color: var(--spiral-gold);
    box-shadow: 0 0 20px rgba(212, 175, 55, 0.3);
}

.invitation-cta:hover::before {
    width: 300px;
    height: 300px;
}

/* Starter glyph badge */
.starter-glyph {
    margin-top: 40px;
    padding: 20px;
}

.starter-glyph-label {
    font-size: 0.75rem;
    letter-spacing: 0.2em;
    text-transform: uppercase;
    color: rgba(155, 89, 182, 0.6);
    margin-bottom: 10px;
}

.starter-glyph-symbol {
    font-size: 3rem;
    color: var(--spiral-violet);
    animation: glyph-float 4s ease-in-out infinite;
    cursor: pointer;
    transition: all 0.3s ease;
}

.starter-glyph-symbol:hover {
    color: var(--spiral-gold);
    text-shadow: 0 0 20px rgba(212, 175, 55, 0.5);
}

@keyframes glyph-float {
    0%, 100% { transform: translateY(0); }
    50% { transform: translateY(-8px); }
}

.starter-glyph-hint {
    font-size: 0.85rem;
    color: rgba(232, 232, 240, 0.4);
    margin-top: 10px;
    font-style: italic;
}

/* ==== css/interactive-glyphs.css ==== */
/**
 * Interactive Glyph Styles
 * Living glyphs that respond to user presence
 */

/* ========================================
   BASE INTERACTIVE GLYPH
   ======================================== */

.interactive-glyph {
    display: inline-block;
    cursor: pointer;
    transition: all 0.4s ease;
    position: relative;
}

.interactive-glyph::before {
    content: "";
    position: absolute;
    top: 50%;
    left: 50%;
    width: 0;
    height: 0;
    background: radial-gradient(circle, rgba(212, 175, 55, 0.3) 0%, transparent 70%);
    border-radius: 50%;
    transform: translate(-50%, -50%);
    transition: all 0.5s ease;
    pointer-events: none;
}

.interactive-glyph:hover::before {
    width: 150%;
    height: 150%;
}

.interactive-glyph:hover {
    transform: scale(1.15);
    filter: drop-shadow(0 0 15px rgba(212, 175, 55, 0.6));
}

/* Glyph pulse animation on hover */
.interactive-glyph:hover {
    animation: glyph-pulse 0.8s ease-in-out infinite;
}

@keyframes glyph-pulse {
    0%, 100% { 
        transform: scale(1.15);
        filter: drop-shadow(0 0 15px rgba(212, 175, 55, 0.6));
    }
    50% { 
        transform: scale(1.2);
        filter: drop-shadow(0 0 25px rgba(212, 175, 55, 0.8));
    }
}

/* ========================================
   GLYPH CARD - Clickable glyph containers
   ======================================== */

.glyph-card {
    background: rgba(10, 10, 20, 0.5);
    border: 1px solid rgba(155, 89, 182, 0.2);
    border-radius: 15px;
    padding: 30px;
    text-align: center;
    transition: all 0.5s ease;
    cursor: pointer;
    position: relative;
    overflow: hidden;
}

.glyph-card::before {
    content: "";
    position: absolute;
    top: 0;
    left: -100%;
    width: 100%;
    height: 100%;
    background: linear-gradient(
        90deg,
        transparent,
        rgba(212, 175, 55, 0.1),
        transparent
    );
    transition: left 0.6s ease;
}

.glyph-card:hover::before {
    left: 100%;
}

.glyph-card:hover {
    border-color: var(--spiral-gold);
    transform: translateY(-5px);
    box-shadow: 
        0 10px 30px rgba(0, 0, 0, 0.3),
        0 0 40px rgba(155, 89, 182, 0.15);
}

.glyph-card__symbol {
    font-size: 3rem;
    color: var(--spiral-gold);
    margin-bottom: 15px;
    transition: all 0.4s ease;
}

.glyph-card:hover .glyph-card__symbol {
    transform: scale(1.2) rotate(10deg);
    text-shadow: 0 0 30px rgba(212, 175, 55, 0.7);
}

.glyph-card__title {
    font-family: "Cinzel", serif;
    font-size: 1.1rem;
    color: var(--spiral-light);
    margin-bottom: 10px;
    letter-spacing: 0.1em;
}

.glyph-card__description {
    font-size: 0.9rem;
    color: rgba(232, 232, 240, 0.6);
    line-height: 1.6;
}

/* ========================================
   FLOATING GLYPH - Ambient decoration
   ======================================== */

.floating-glyph {
    position: fixed;
    font-size: 2rem;
    color: rgba(155, 89, 182, 0.15);
    pointer-events: none;
    z-index: 1;
    animation: float-drift 20s ease-in-out infinite;
}

.floating-glyph:nth-child(2n) {
    animation-delay: -10s;
    animation-duration: 25s;
}

.floating-glyph:nth-child(3n) {
    animation-delay: -5s;
    animation-duration: 30s;
}

@keyframes float-drift {
    0%, 100% {
        transform: translateY(0) rotate(0deg);
        opacity: 0.15;
    }
    25% {
        transform: translateY(-30px) rotate(5deg);
        opacity: 0.25;
    }
    50% {
        transform: translateY(-10px) rotate(-3deg);
        opacity: 0.15;
    }
    75% {
        transform: translateY(-40px) rotate(8deg);
        opacity: 0.2;
    }
}

/* ========================================
   GLYPH TOOLTIP - Hover reveal
   ======================================== */

.glyph-with-tooltip {
    position: relative;
    display: inline-block;
}

.glyph-tooltip {
    position: absolute;
    bottom: 100%;
    left: 50%;
    transform: translateX(-50%) translateY(10px);
    padding: 10px 15px;
    background: rgba(10, 10, 20, 0.95);
    border: 1px solid rgba(212, 175, 55, 0.3);
    border-radius: 8px;
    color: var(--spiral-light);
    font-size: 0.8rem;
    white-space: nowrap;
    opacity: 0;
    visibility: hidden;
    transition: all 0.3s ease;
    pointer-events: none;
    z-index: 100;
}

.glyph-tooltip::after {
    content: "";
    position: absolute;
    top: 100%;
    left: 50%;
    transform: translateX(-50%);
    border: 6px solid transparent;
    border-top-color: rgba(212, 175, 55, 0.3);
}

.glyph-with-tooltip:hover .glyph-tooltip {
    opacity: 1;
    visibility: visible;
    transform: translateX(-50%) translateY(0);
}

/* ========================================
   GLYPH GRID - Layout for glyph collections
   ======================================== */

.glyph-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
    gap: 25px;
    padding: 20px;
}

/* ========================================
   CHOICE RIPPLE EFFECT
   ======================================== */

.choice-ripple {
    position: absolute;
    top: 50%;
    left: 50%;
    width: 0;
    height: 0;
    background: rgba(212, 175, 55, 0.3);
    border-radius: 50%;
    transform: translate(-50%, -50%);
    animation: ripple-expand 0.6s ease-out;
    pointer-events: none;
}

@keyframes ripple-expand {
    to {
        width: 200%;
        height: 200%;
        opacity: 0;
    }
}

.resonance-choice.selected {
    background: rgba(212, 175, 55, 0.15);
    border-color: var(--spiral-gold);
}

/* ========================================
   RESPONSIVE
   ======================================== */

@media (max-width: 768px) {
    .glyph-grid {
        grid-template-columns: repeat(auto-fit, minmax(150px, 1fr));
        gap: 15px;
    }
    
    .glyph-card {
        padding: 20px;
    }
    
    .glyph-card__symbol {
        font-size: 2.5rem;
    }
}

/* ==== css/sacred-chrome.css ==== */
/* ========================================
   SACRED CHROME - where every floating control lives
   Added 2026-10-20 (Krenwatch relay persistent-20261021-014856).

   Nine scripts each pin their own button to a corner, and several chose the
   same corner: the Today's Echoes panel sat on top of the portal spiral, so the
   portal nav could only be opened from the keyboard. This file is the ONE place
   that says where each of them sits. The scripts still create and style their
   own controls; only position and stacking are decided here.

   The scripts inject their <style> after this file loads, so selectors here
   carry "html body" to outrank theirs without !important.

     top right ......... journey dashboard orb, seeker journey glyph beside it
     bottom right ...... portal spiral (the nav), coherence orb above it,
                         ambient wisdom above that
     bottom left ....... sound, glyph journal, companion (a column)
     bottom, between ... Today's Echoes
   ======================================== */

:root {
    --chrome-edge: 20px;      /* distance from the viewport edge */
    --chrome-gap: 12px;       /* gap between stacked controls */
    --chrome-left-col: 48px;  /* widest control in the left column */
    --chrome-spiral: 70px;    /* the portal spiral (spiral-navigation.css) */
    --chrome-map: 72px;       /* height of the journey map on journey pages */
    --chrome-lift: 0px;       /* extra room under the controls (journey map on a phone) */
}

@media (max-width: 768px) {
    :root {
        --chrome-edge: 14px;
        --chrome-gap: 10px;
        --chrome-left-col: 44px;
        --chrome-spiral: 60px;
    }
}

/* ---------- bottom right: the portal spiral is the one way in ---------- */

/* above every other floating control (the widgets use 9997-9999), below the
   sacred welcome (10000), which must cover everything until it is dismissed */
html body .central-spiral {
    z-index: 9999;
}

html body .central-spiral:not(.expanded) {
    bottom: calc(var(--chrome-edge) + var(--chrome-lift));
    right: var(--chrome-edge);
}

/* With the nav open the portals lie above the opened spiral, and the nav's
   empty space lets a tap fall through to the spiral (which closes the nav). */
html body .glyph-nav.active {
    z-index: 10001;
    pointer-events: none;
}

html body .glyph-nav.active .glyph-portal {
    pointer-events: auto;
}

/* the button's art was the hero spiral's 120px inside a 60-70px button, so it
   spilled past the screen's edge; it now fills exactly the button you tap */
html body .central-spiral .spiral-symbol {
    /* the spiral's path fills only the middle of its drawing, so the drawing
       is a little larger than the button to make the spiral itself fill it */
    display: block;
    width: 130%;
    height: 130%;
    margin: -15%;
    overflow: visible;
}

html body .central-spiral:focus-visible {
    outline: 2px solid var(--spiral-gold, #d4af37);
    outline-offset: 6px;
    border-radius: 50%;
}

html body #coherence-indicator {
    bottom: calc(var(--chrome-edge) + var(--chrome-lift) + var(--chrome-spiral) + var(--chrome-gap));
    right: calc(var(--chrome-edge) + (var(--chrome-spiral) - 40px) / 2 - 6px);
    left: auto;
    transform: none;
}

html body #ambient-wisdom {
    bottom: calc(var(--chrome-edge) + var(--chrome-lift) + var(--chrome-spiral) + 90px);
}

/* ---------- bottom left: one column, nothing on top of anything ---------- */

html body .sound-toggle {
    bottom: calc(var(--chrome-edge) + var(--chrome-lift));
    left: var(--chrome-edge);
}

html body .glyph-journal-btn {
    bottom: calc(var(--chrome-edge) + var(--chrome-lift) + var(--chrome-left-col) + var(--chrome-gap));
    left: calc(var(--chrome-edge) - 2px);
    width: 48px;
    height: 48px;
}

html body .spiral-companion {
    bottom: calc(var(--chrome-edge) + var(--chrome-lift) + 2 * (var(--chrome-left-col) + var(--chrome-gap)) + 4px);
    left: calc(var(--chrome-edge) - 3px);
}

/* the companion's whisper opens to the right of the column, never off-screen */
html body .spiral-companion .companion-whisper {
    left: 60px;
    right: auto;
    bottom: 0;
    min-width: 0;
    width: min(300px, calc(100vw - 100px));
}

/* the living-code heartbeat is decoration (pointer-events: none): it breathes
   behind the sound toggle instead of covering it */
html body .living-code-sigil {
    bottom: calc(var(--chrome-edge) + var(--chrome-lift) + 4px);
    left: calc(var(--chrome-edge) + 4px);
    z-index: 999;
}

/* ---------- top right: dashboard orb, seeker glyph beside it ---------- */

html body #journey-dashboard-widget {
    top: var(--chrome-edge);
    right: var(--chrome-edge);
    font-family: "Cinzel", Georgia, serif;
}

html body #journey-dashboard-widget .jd-toggle {
    width: 46px;
    height: 46px;
    font-size: 20px;
    color: var(--spiral-gold, #d4af37);
    background: radial-gradient(circle at 35% 30%, rgba(155, 89, 182, 0.55), rgba(20, 10, 35, 0.92) 70%);
    border: 1px solid rgba(212, 175, 55, 0.45);
    box-shadow: 0 0 18px rgba(155, 89, 182, 0.35), inset 0 0 12px rgba(212, 175, 55, 0.15);
    text-shadow: 0 0 10px rgba(212, 175, 55, 0.6);
}

html body #journey-dashboard-widget .jd-toggle:hover {
    box-shadow: 0 0 28px rgba(212, 175, 55, 0.45), inset 0 0 12px rgba(212, 175, 55, 0.25);
}

html body #journey-dashboard-widget .jd-score {
    background: var(--spiral-gold, #d4af37);
    color: #120a1c;
    font-family: "Cinzel", Georgia, serif;
    font-weight: 600;
    box-shadow: 0 0 8px rgba(212, 175, 55, 0.6);
}

/* a resonance of zero is not news; the badge appears once there is something */
html body #journey-dashboard-widget .jd-score:empty,
html body #journey-dashboard-widget .jd-score[data-zero="1"] {
    display: none;
}

html body #journey-dashboard-widget .jd-panel {
    border-color: rgba(212, 175, 55, 0.3);
    box-shadow: 0 10px 40px rgba(0, 0, 0, 0.6), 0 0 30px rgba(155, 89, 182, 0.25);
    max-width: calc(100vw - 2 * var(--chrome-edge));
}

/* the dashboard's own accents were orange; the temple's are gold */
html body #journey-dashboard-widget .jd-title {
    color: var(--spiral-gold, #d4af37);
    font-family: "Cinzel", Georgia, serif;
    text-shadow: 0 0 12px rgba(212, 175, 55, 0.35);
}

html body #journey-dashboard-widget .jd-feature.visited {
    background: rgba(212, 175, 55, 0.18);
    border-color: rgba(212, 175, 55, 0.5);
}

html body .seeker-journey-indicator {
    top: calc(var(--chrome-edge) + 3px);
    right: calc(var(--chrome-edge) + 46px + var(--chrome-gap));
}

@media (max-width: 768px) {
    /* the header wordmark is centred on a phone, so the seeker glyph goes
       under the orb rather than beside it */
    html body .seeker-journey-indicator {
        top: calc(var(--chrome-edge) + 46px + var(--chrome-gap));
        bottom: auto; /* seeker-tracker.js pins it to the bottom on a phone */
        right: calc(var(--chrome-edge) + 3px);
    }

    /* its card opens downward from the top corner */
    html body .seeker-journey-indicator .journey-info {
        top: 50px;
        bottom: auto;
    }
}

/* ---------- Today's Echoes: between the two columns ---------- */

html body .trust-echo-panel {
    left: auto;
    /* clear of the spiral and of the coherence orb's caption (~90px wide) */
    right: calc(var(--chrome-edge) + 96px + var(--chrome-gap));
    bottom: calc(var(--chrome-edge) + var(--chrome-lift));
    width: 290px;
    background: linear-gradient(160deg, rgba(34, 18, 52, 0.92), rgba(12, 7, 22, 0.94));
    border: 1px solid rgba(212, 175, 55, 0.28);
    border-radius: 14px;
    box-shadow: 0 8px 32px rgba(0, 0, 0, 0.55), 0 0 24px rgba(138, 43, 226, 0.18);
    -webkit-backdrop-filter: blur(12px);
    backdrop-filter: blur(12px);
    font-family: "Cormorant Garamond", Georgia, serif;
}

html body .trust-echo-header {
    padding: 10px 14px;
    cursor: pointer;
}

html body .trust-echo-panel.collapsed .trust-echo-header {
    border-bottom-color: transparent;
}

html body .trust-echo-title {
    font-family: "Cinzel", Georgia, serif;
    font-size: 0.78rem;
    letter-spacing: 0.14em;
    text-transform: uppercase;
}

html body .trust-echo-toggle {
    width: 32px;
    height: 32px;
    border-radius: 50%;
}

html body .trust-echo-toggle:focus-visible {
    outline: 1px solid var(--spiral-gold, #d4af37);
}

html body .trust-echo-empty,
html body .trust-echo-text {
    font-family: "Cormorant Garamond", Georgia, serif;
    font-size: 0.95rem;
}

@media (max-width: 768px) {
    html body .trust-echo-panel {
        left: calc(var(--chrome-edge) + var(--chrome-left-col) + var(--chrome-gap));
        right: calc(var(--chrome-edge) + var(--chrome-spiral) + var(--chrome-gap));
        width: auto;
    }

    html body .trust-echo-list {
        max-height: 40vh;
    }
}

/* ---------- journey pages: the path map owns the bottom row ---------- */

/* seeker-tracker.js styles every .journey-glyph as a 40px orb; the map's own
   points use the same class name, so give them back their size */
html body .spiral-journey-map .journey-glyph {
    width: auto;
    height: auto;
    background: none;
    border: 0;
    font-size: 14px;
    text-shadow: none;
}

html body .spiral-journey-map {
    left: 50%;
    right: auto;
    bottom: var(--chrome-edge);
    transform: translate(-50%, 20px);
    max-width: calc(100vw - 2 * var(--chrome-edge));
}

html body .spiral-journey-map.visible {
    transform: translate(-50%, 0);
}

html body .spiral-journey-map .journey-label {
    margin-top: 4px;
}

/* the shield's inscription would sit under the map's caption; the home page
   (no map) keeps it */
html body.has-journey-map .shield-inscription {
    display: none;
}

/* the Echoes panel steps up out of the map's way */
html body.has-journey-map .trust-echo-panel {
    bottom: calc(var(--chrome-edge) + var(--chrome-map));
}

@media (max-width: 768px) {
    /* a phone is too narrow to share the bottom row: everything rises above the map */
    html body.has-journey-map {
        --chrome-lift: var(--chrome-map);
    }

    html body .spiral-journey-map .journey-track {
        gap: 6px;
        padding: 9px 12px;
    }
}

/* ---------- while the portal nav is open, the portals are all there is ---------- */

html body.nav-active .trust-echo-panel,
html body.nav-active .glyph-journal-btn,
html body.nav-active .spiral-companion,
html body.nav-active .sound-toggle,
html body.nav-active .living-code-sigil,
html body.nav-active #coherence-indicator,
html body.nav-active #ambient-wisdom,
html body.nav-active #journey-dashboard-widget,
html body.nav-active .spiral-journey-map,
html body.nav-active .seeker-journey-indicator {
    opacity: 0;
    pointer-events: none;
    transition: opacity 0.4s ease;
}

/* ---------- the daily forecast band: part of the sky, not a pasted banner ---------- */

html body .spiral-forecast {
    box-sizing: border-box;
    padding: 2.75rem 1.5rem 2.5rem;
    /* the glow is fully transparent by the band's edges, so it has no edges */
    background: radial-gradient(ellipse 50% 50% at 50% 50%, rgba(60, 30, 90, 0.42), transparent 100%);
    border-bottom: none;
    overflow: hidden;
}

html body .spiral-forecast::after {
    content: "";
    position: absolute;
    left: 50%;
    bottom: 0;
    width: min(520px, 80%);
    height: 1px;
    transform: translateX(-50%);
    background: linear-gradient(90deg, transparent, rgba(212, 175, 55, 0.55), transparent);
}

html body .forecast-title {
    font-family: "Cinzel", Georgia, serif;
    letter-spacing: 0.3em;
}

html body .forecast-message {
    font-family: "Cormorant Garamond", Georgia, serif;
    font-size: 1.15rem;
    color: rgba(236, 228, 255, 0.86);
}

html body .forecast-pulse {
    font-family: "Cinzel", Georgia, serif;
    font-size: 0.8rem;
    letter-spacing: 0.18em;
    text-transform: uppercase;
    color: #e7d7ff;
    padding: 0.75rem 1.75rem;
    min-height: 44px;
    border: 1px solid rgba(212, 175, 55, 0.5);
    background: radial-gradient(ellipse at center, rgba(155, 89, 182, 0.22), rgba(20, 10, 35, 0.4));
    box-shadow: 0 0 18px rgba(155, 89, 182, 0.2);
}

html body .forecast-pulse:hover,
html body .forecast-pulse:focus-visible {
    color: #fff6dc;
    border-color: var(--spiral-gold, #d4af37);
    box-shadow: 0 0 26px rgba(212, 175, 55, 0.35);
    outline: none;
}

@media (max-width: 768px) {
    /* the orb speaks for itself on a phone; its caption only crowds the corner */
    html body #coherence-indicator .coherence-label {
        display: none;
    }

    html body .forecast-message {
        font-size: 1.05rem;
    }
}

/* ---------- the sacred welcome: a halo, not a box ---------- */

html body .welcome-glyph {
    position: relative;
    filter: none;
    text-shadow: 0 0 24px rgba(212, 175, 55, 0.75), 0 0 60px rgba(212, 175, 55, 0.35);
    animation: chrome-glyph-breathe 4s ease-in-out infinite;
}

html body .welcome-glyph::before,
html body .welcome-glyph::after {
    content: "";
    position: absolute;
    left: 50%;
    top: 50%;
    border-radius: 50%;
    pointer-events: none;
}

html body .welcome-glyph::before {
    width: 260px;
    height: 260px;
    transform: translate(-50%, -50%);
    background: radial-gradient(circle, rgba(212, 175, 55, 0.16) 0%, rgba(155, 89, 182, 0.08) 40%, transparent 70%);
}

html body .welcome-glyph::after {
    width: 170px;
    height: 170px;
    border: 1px dashed rgba(212, 175, 55, 0.25);
    animation: chrome-ring-turn 60s linear infinite;
}

@keyframes chrome-glyph-breathe {
    0%, 100% { transform: scale(1); text-shadow: 0 0 24px rgba(212, 175, 55, 0.7), 0 0 60px rgba(212, 175, 55, 0.3); }
    50% { transform: scale(1.06); text-shadow: 0 0 32px rgba(212, 175, 55, 0.9), 0 0 80px rgba(212, 175, 55, 0.45); }
}

@keyframes chrome-ring-turn {
    from { transform: translate(-50%, -50%) rotate(0deg); }
    to { transform: translate(-50%, -50%) rotate(360deg); }
}

html body .sacred-welcome {
    background:
        radial-gradient(ellipse 60% 50% at 50% 42%, rgba(70, 35, 110, 0.35), transparent 70%),
        var(--spiral-deep, #050508);
}

html body .welcome-enter {
    border-radius: 999px;
    min-height: 48px;
    background: rgba(212, 175, 55, 0.04);
    box-shadow: 0 0 22px rgba(212, 175, 55, 0.12);
}

html body .welcome-enter:focus-visible {
    outline: 2px solid var(--spiral-gold, #d4af37);
    outline-offset: 4px;
}

@media (max-width: 480px) {
    html body .welcome-content {
        padding: 2rem 1.5rem;
    }

    html body .welcome-glyph {
        font-size: 4rem;
        margin-bottom: 1.5rem;
    }

    html body .welcome-phrase {
        font-size: 1.55rem;
        letter-spacing: 0.18em;
        line-height: 1.5;
    }

    html body .welcome-message {
        font-size: 1.2rem;
    }

    html body .welcome-truth {
        font-size: 1.05rem;
        margin-bottom: 2.25rem;
    }

    html body .welcome-enter {
        padding: 1rem 2.25rem;
        font-size: 0.9rem;
    }
}

/* ---------- portals: keyboard focus glows instead of a browser box ---------- */

html body .glyph-portal:focus {
    outline: none;
}

html body .glyph-portal:focus-visible .glyph-symbol {
    color: var(--spiral-violet, #9b59b6);
    filter: drop-shadow(0 0 22px rgba(155, 89, 182, 0.85));
}

html body .glyph-portal:focus-visible .glyph-text {
    opacity: 1;
    color: var(--spiral-gold, #d4af37);
}

@media (prefers-reduced-motion: reduce) {
    html body .welcome-glyph,
    html body .welcome-glyph::after {
        animation: none;
    }
}