/* Symbol-specific styles and SVG animations */

/* SVG Drawing Styles */
.sacred-line {
    fill: none;
    stroke: var(--gold);
    stroke-width: 1;
    stroke-linecap: round;
    stroke-linejoin: round;
}

.sacred-circle {
    fill: none;
    stroke: var(--gold);
    stroke-width: 1;
}

.filled-shape {
    fill: rgba(255, 215, 0, 0.1);
    stroke: var(--gold);
    stroke-width: 1;
}

.highlight {
    stroke: var(--cosmic-blue);
    filter: url(#gold-glow);
}

/* Sephiroth colors for Tree of Life */
.sephira-kether { fill: #ffffff; }
.sephira-chokmah { fill: #808080; }
.sephira-binah { fill: #000000; }
.sephira-chesed { fill: #0000ff; }
.sephira-geburah { fill: #ff0000; }
.sephira-tiphareth { fill: #ffff00; }
.sephira-netzach { fill: #00ff00; }
.sephira-hod { fill: #ffa500; }
.sephira-yesod { fill: #800080; }
.sephira-malkuth { fill: #654321; }

/* Platonic solid colors by element */
.element-fire { stroke: #ff4500; fill: rgba(255, 69, 0, 0.1); }
.element-earth { stroke: #228b22; fill: rgba(34, 139, 34, 0.1); }
.element-air { stroke: #87ceeb; fill: rgba(135, 206, 235, 0.1); }
.element-water { stroke: #1e90ff; fill: rgba(30, 144, 255, 0.1); }
.element-aether { stroke: #9370db; fill: rgba(147, 112, 219, 0.1); }

/* Planetary colors for seals and glyphs */
.planet-sun { stroke: #ffd700; fill: rgba(255, 215, 0, 0.2); }
.planet-moon { stroke: #c0c0c0; fill: rgba(192, 192, 192, 0.2); }
.planet-mars { stroke: #dc143c; fill: rgba(220, 20, 60, 0.2); }
.planet-mercury { stroke: #9370db; fill: rgba(147, 112, 219, 0.2); }
.planet-jupiter { stroke: #4169e1; fill: rgba(65, 105, 225, 0.2); }
.planet-venus { stroke: #32cd32; fill: rgba(50, 205, 50, 0.2); }
.planet-saturn { stroke: #2f4f4f; fill: rgba(47, 79, 79, 0.2); }

/* Animation Classes */
.draw-line {
    stroke-dasharray: 1000;
    stroke-dashoffset: 1000;
    animation: draw 3s ease forwards;
}

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

.fade-in {
    opacity: 0;
    animation: fadeIn 1s ease forwards;
}

@keyframes fadeIn {
    to {
        opacity: 1;
    }
}

.pulse {
    animation: pulse 2s ease-in-out infinite;
}

@keyframes pulse {
    0%, 100% {
        opacity: 1;
        transform: scale(1);
    }
    50% {
        opacity: 0.7;
        transform: scale(1.02);
    }
}

.rotate {
    animation: rotate 20s linear infinite;
    transform-origin: center;
}

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

.rotate-reverse {
    animation: rotateReverse 25s linear infinite;
    transform-origin: center;
}

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

/* Fibonacci spiral animation */
.spiral-grow {
    stroke-dasharray: 2000;
    stroke-dashoffset: 2000;
    animation: spiralDraw 5s ease-out forwards;
}

@keyframes spiralDraw {
    to {
        stroke-dashoffset: 0;
    }
}

/* Golden ratio cascade */
.cascade-item {
    opacity: 0;
    animation: cascadeIn 0.5s ease forwards;
}

.cascade-item:nth-child(1) { animation-delay: 0s; }
.cascade-item:nth-child(2) { animation-delay: 0.1s; }
.cascade-item:nth-child(3) { animation-delay: 0.2s; }
.cascade-item:nth-child(4) { animation-delay: 0.3s; }
.cascade-item:nth-child(5) { animation-delay: 0.4s; }
.cascade-item:nth-child(6) { animation-delay: 0.5s; }
.cascade-item:nth-child(7) { animation-delay: 0.6s; }
.cascade-item:nth-child(8) { animation-delay: 0.7s; }
.cascade-item:nth-child(9) { animation-delay: 0.8s; }
.cascade-item:nth-child(10) { animation-delay: 0.9s; }

@keyframes cascadeIn {
    from {
        opacity: 0;
        transform: scale(0);
    }
    to {
        opacity: 1;
        transform: scale(1);
    }
}

/* Flower of Life bloom animation */
.bloom-circle {
    transform-origin: center;
    opacity: 0;
    animation: bloom 0.8s ease-out forwards;
}

@keyframes bloom {
    0% {
        opacity: 0;
        transform: scale(0);
    }
    60% {
        transform: scale(1.1);
    }
    100% {
        opacity: 1;
        transform: scale(1);
    }
}

/* Sri Yantra triangle animation */
.triangle-reveal {
    opacity: 0;
    animation: triangleIn 0.6s ease forwards;
}

@keyframes triangleIn {
    0% {
        opacity: 0;
        transform: scale(0.5) rotate(180deg);
    }
    100% {
        opacity: 1;
        transform: scale(1) rotate(0deg);
    }
}

/* Metatron's Cube connection lines */
.meta-line {
    stroke-dasharray: 500;
    stroke-dashoffset: 500;
    animation: metaDraw 2s ease forwards;
}

@keyframes metaDraw {
    to {
        stroke-dashoffset: 0;
    }
}

/* Pentagram point lighting */
.penta-point {
    fill: rgba(255, 215, 0, 0);
    transition: fill 0.3s ease;
}

.penta-point.active {
    fill: rgba(255, 215, 0, 0.8);
    filter: url(#gold-glow);
}

/* Magic circle rotation layers */
.circle-layer-1 { animation: rotate 60s linear infinite; }
.circle-layer-2 { animation: rotateReverse 45s linear infinite; }
.circle-layer-3 { animation: rotate 30s linear infinite; }

/* Hebrew letter styles */
.hebrew-letter {
    font-family: 'Times New Roman', serif;
    font-size: 24px;
    fill: var(--gold);
    text-anchor: middle;
    dominant-baseline: central;
}

/* Egyptian hieroglyph base style */
.hieroglyph {
    fill: none;
    stroke: var(--gold);
    stroke-width: 2;
    stroke-linecap: round;
    stroke-linejoin: round;
}

.hieroglyph-filled {
    fill: var(--gold);
    stroke: none;
}

/* Ouroboros specific */
.ouroboros-body {
    fill: none;
    stroke: var(--gold);
    stroke-width: 8;
}

.ouroboros-scales {
    fill: none;
    stroke: var(--gold-dark);
    stroke-width: 1;
}

/* Alchemical symbol weight */
.alchemical-symbol {
    stroke-width: 2.5;
    stroke-linecap: round;
}

/* Interactive hover states */
.interactive:hover {
    cursor: pointer;
    filter: url(#gold-glow);
}

.interactive:hover .sacred-line,
.interactive:hover .sacred-circle {
    stroke-width: 2;
}

/* Tooltip */
.symbol-tooltip {
    position: absolute;
    background: var(--bg-secondary);
    border: 1px solid var(--gold-dark);
    padding: 10px 15px;
    border-radius: 4px;
    font-size: 0.85rem;
    color: var(--text-primary);
    pointer-events: none;
    opacity: 0;
    transform: translateY(10px);
    transition: all 0.2s ease;
    z-index: 1000;
    max-width: 250px;
}

.symbol-tooltip.visible {
    opacity: 1;
    transform: translateY(0);
}

.symbol-tooltip h5 {
    color: var(--gold);
    margin-bottom: 5px;
    font-family: var(--font-mystical);
}

/* 3D Platonic solid wireframe depth */
.solid-edge-front { stroke-opacity: 1; }
.solid-edge-middle { stroke-opacity: 0.6; }
.solid-edge-back { stroke-opacity: 0.3; stroke-dasharray: 5, 5; }

/* Sigil generator grid */
.sigil-grid-line {
    stroke: rgba(255, 215, 0, 0.2);
    stroke-width: 0.5;
}

.sigil-path {
    stroke: var(--gold);
    stroke-width: 3;
    fill: none;
    stroke-linecap: round;
    stroke-linejoin: round;
}

/* Tree of Life paths */
.tol-path {
    stroke: var(--silver);
    stroke-width: 3;
    fill: none;
}

.tol-sephira {
    stroke: var(--gold);
    stroke-width: 2;
}

.tol-sephira-label {
    font-family: var(--font-mystical);
    font-size: 10px;
    fill: var(--text-primary);
    text-anchor: middle;
}

/* Vesica Piscis highlight */
.vesica-intersection {
    fill: rgba(74, 158, 255, 0.2);
    stroke: var(--cosmic-blue);
    stroke-width: 1;
}

/* Construction lines (compass/ruler tool) */
.construction-line {
    stroke: rgba(255, 215, 0, 0.3);
    stroke-width: 0.5;
    stroke-dasharray: 4, 4;
}

.construction-point {
    fill: var(--cosmic-blue);
    stroke: white;
    stroke-width: 1;
}

/* Export preview */
.export-preview {
    border: 2px dashed var(--gold-dark);
    background: rgba(0, 0, 0, 0.5);
}