/* prototype.st -- Sacred Geometry Cathedral */
:root {
    --gold: #C9A33A;
    --void: #0A0A0F;
    --crypt: #13131A;
    --vellum: #E8D5B0;
    --parchment: #B8A88A;
    --bronze: #6B5E4A;
    --glass-blue: #2A4066;
    --ruby: #8B2842;
}
*, *::before, *::after { margin: 0; padding: 0; box-sizing: border-box; }
body { font-family: 'Crimson Text', serif; font-weight: 400; font-size: 16px; line-height: 1.85; color: var(--parchment); background: var(--void); overflow-x: hidden; }

/* Particle canvas */
#particles { position: fixed; inset: 0; z-index: 0; pointer-events: none; }

/* Rose window background */
.rose-window { position: fixed; top: 50%; left: 50%; transform: translate(-50%, -50%); width: 50vw; max-width: 500px; height: 50vw; max-height: 500px; opacity: 0.04; z-index: 0; pointer-events: none; animation: rotate-rose 120s linear infinite; }
@keyframes rotate-rose { to { transform: translate(-50%, -50%) rotate(360deg); } }

/* Threshold / opening */
.threshold { min-height: 100vh; display: flex; flex-direction: column; align-items: center; justify-content: center; position: relative; z-index: 1; }
.seed-of-life { width: 200px; height: 200px; margin-bottom: 32px; }
.seed-circle {
    stroke-dasharray: 252;
    stroke-dashoffset: 252;
    opacity: 0;
}
.seed-circle.drawn { animation: draw-seed 0.4s ease-in-out forwards; }
@keyframes draw-seed { to { stroke-dashoffset: 0; opacity: 1; } }

.threshold-title { font-family: 'Cinzel', serif; font-weight: 700; font-size: 56px; letter-spacing: 0.2em; text-transform: uppercase; color: var(--gold); text-shadow: 0 0 40px rgba(201, 163, 58, 0.4); opacity: 0; transition: opacity 1s; }
.threshold-title.visible { opacity: 1; }

.scroll-chevron { margin-top: 40px; animation: chevron-pulse 2s ease-in-out infinite; }
.scroll-chevron svg { width: 24px; height: 24px; }
@keyframes chevron-pulse { 0%, 100% { opacity: 0.4; transform: translateY(0); } 50% { opacity: 1; transform: translateY(6px); } }

/* Flower of Life dividers */
.flower-divider { display: flex; justify-content: center; padding: 60px 0; position: relative; z-index: 1; }
.flower-svg { width: 240px; height: 120px; }
.flower-draw {
    stroke-dasharray: 190;
    stroke-dashoffset: 190;
}
.flower-divider.visible .flower-draw { animation: draw-flower 0.8s ease-in-out forwards; }
@keyframes draw-flower { to { stroke-dashoffset: 0; } }

/* Nave / hexagonal grid */
.nave { position: relative; z-index: 1; padding: 40px 24px; }
.hex-grid { display: flex; flex-wrap: wrap; justify-content: center; gap: 24px; max-width: 900px; margin: 0 auto; }
.hex-cell {
    width: 260px;
    height: 280px;
    clip-path: polygon(50% 0%, 100% 25%, 100% 75%, 50% 100%, 0% 75%, 0% 25%);
    background: var(--crypt);
    border: 1px solid var(--gold);
    box-shadow: inset 0 0 30px rgba(201, 163, 58, 0.08);
    display: flex;
    align-items: center;
    justify-content: center;
    opacity: 0;
    transform: scale(0.92);
    transition: opacity 0.6s cubic-bezier(0.25, 0.1, 0.25, 1), transform 0.6s cubic-bezier(0.25, 0.1, 0.25, 1);
    position: relative;
}
.hex-cell::before {
    content: '';
    position: absolute;
    inset: 0;
    background: radial-gradient(circle at 50% 50%, rgba(201, 163, 58, 0.03) 0%, transparent 70%);
    pointer-events: none;
}
.hex-cell.visible { opacity: 1; transform: scale(1); }

.hex-inner { padding: 40px 24px; text-align: center; }
.hex-label { font-family: 'Philosopher', sans-serif; font-size: 13px; letter-spacing: 0.18em; text-transform: uppercase; color: var(--bronze); display: block; margin-bottom: 8px; }
.hex-title { font-family: 'Cinzel', serif; font-weight: 700; font-size: 22px; letter-spacing: 0.12em; text-transform: uppercase; color: var(--gold); text-shadow: 0 0 20px rgba(201, 163, 58, 0.3); margin-bottom: 12px; }
.hex-text { font-family: 'Crimson Text', serif; font-size: 14px; color: var(--parchment); line-height: 1.7; }

/* Altar */
.altar { min-height: 100vh; display: flex; flex-direction: column; align-items: center; justify-content: center; position: relative; z-index: 1; padding: 80px 24px; }
.altar-rings { position: absolute; top: 50%; left: 50%; transform: translate(-50%, -50%); width: 60vw; max-width: 500px; }
.altar-rings svg { width: 100%; height: auto; }
.ring {
    stroke-dasharray: 1400;
    stroke-dashoffset: 1400;
}
.altar.visible .ring-outer { animation: draw-ring 0.8s ease-in-out forwards; }
.altar.visible .ring-mid { animation: draw-ring 0.8s ease-in-out 0.6s forwards; }
.altar.visible .ring-inner { animation: draw-ring 0.8s ease-in-out 1.2s forwards; }
@keyframes draw-ring { to { stroke-dashoffset: 0; } }

.altar-text { position: relative; z-index: 2; text-align: center; max-width: 500px; }
.altar-word { font-family: 'Cinzel', serif; font-weight: 700; font-size: 36px; letter-spacing: 0.08em; color: var(--gold); text-shadow: 0 0 30px rgba(201, 163, 58, 0.3); display: inline-block; opacity: 0; margin: 0 6px; transition: opacity 0.4s; }
.altar-word.shown { opacity: 1; }

/* Sanctum */
.sanctum { position: relative; z-index: 1; padding: 120px 24px; max-width: 600px; margin: 0 auto; text-align: center; }
.sanctum-content { opacity: 0; transform: translateY(30px); transition: opacity 0.8s, transform 0.8s; }
.sanctum-content.visible { opacity: 1; transform: translateY(0); }
.sanctum-text { font-family: 'Crimson Text', serif; font-size: 18px; color: var(--parchment); margin-bottom: 48px; line-height: 1.85; }

.sri-yantra { margin: 0 auto 48px; width: 200px; height: 200px; }
.sri-yantra svg { width: 100%; height: 100%; }
.yantra-draw {
    stroke-dasharray: 600;
    stroke-dashoffset: 600;
}
.sanctum-content.visible .yantra-draw { animation: draw-yantra 2s ease-in-out forwards; }
@keyframes draw-yantra { to { stroke-dashoffset: 0; } }

.sanctum-closing { font-family: 'Cormorant Garamond', serif; font-weight: 300; font-style: italic; font-size: 22px; color: var(--vellum); letter-spacing: 0.04em; }

/* Void end */
.void-end { height: 100vh; position: relative; z-index: 1; }

@media (max-width: 768px) {
    .threshold-title { font-size: 32px; letter-spacing: 0.12em; }
    .hex-grid { flex-direction: column; align-items: center; }
    .hex-cell { width: 90vw; max-width: 300px; }
    .altar-word { font-size: 24px; }
    .rose-window { width: 80vw; height: 80vw; }
}