@import url('https://fonts.googleapis.com/css2?family=Cinzel:wght@400;600;700&family=EB+Garamond:wght@400;600&display=swap');

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

body {
    font-family: 'Cinzel', serif;
    background: 
        radial-gradient(2px 2px at 20px 30px, #ffffff, transparent),
        radial-gradient(2px 2px at 40px 70px, rgba(255,255,255,0.8), transparent),
        radial-gradient(1px 1px at 90px 40px, rgba(255,255,255,0.6), transparent),
        radial-gradient(1px 1px at 130px 80px, rgba(255,255,255,0.4), transparent),
        radial-gradient(2px 2px at 160px 30px, rgba(255,255,255,0.9), transparent),
        radial-gradient(1px 1px at 200px 60px, rgba(255,255,255,0.7), transparent),
        radial-gradient(2px 2px at 240px 90px, rgba(255,255,255,0.8), transparent),
        radial-gradient(1px 1px at 280px 20px, rgba(255,255,255,0.5), transparent),
        radial-gradient(1px 1px at 320px 70px, rgba(255,255,255,0.6), transparent),
        radial-gradient(2px 2px at 360px 40px, rgba(255,255,255,0.9), transparent),
        radial-gradient(1px 1px at 400px 80px, rgba(255,255,255,0.4), transparent),
        radial-gradient(2px 2px at 440px 30px, rgba(255,255,255,0.7), transparent),
        radial-gradient(1px 1px at 480px 60px, rgba(255,255,255,0.8), transparent),
        radial-gradient(2px 2px at 20px 120px, rgba(255,255,255,0.6), transparent),
        radial-gradient(1px 1px at 60px 150px, rgba(255,255,255,0.9), transparent),
        radial-gradient(1px 1px at 100px 180px, rgba(255,255,255,0.4), transparent),
        radial-gradient(2px 2px at 140px 140px, rgba(255,255,255,0.8), transparent),
        radial-gradient(1px 1px at 180px 170px, rgba(255,255,255,0.7), transparent),
        radial-gradient(2px 2px at 220px 130px, rgba(255,255,255,0.5), transparent),
        radial-gradient(1px 1px at 260px 160px, rgba(255,255,255,0.9), transparent),
        radial-gradient(1px 1px at 300px 140px, rgba(255,255,255,0.6), transparent),
        radial-gradient(2px 2px at 340px 180px, rgba(255,255,255,0.8), transparent),
        radial-gradient(1px 1px at 380px 150px, rgba(255,255,255,0.4), transparent),
        radial-gradient(2px 2px at 420px 170px, rgba(255,255,255,0.7), transparent),
        linear-gradient(135deg, #0a0015 0%, #1a0033 30%, #2d1b69 60%, #0f0a1e 100%);
    background-size: 
        500px 200px, 500px 200px, 500px 200px, 500px 200px, 500px 200px, 500px 200px,
        500px 200px, 500px 200px, 500px 200px, 500px 200px, 500px 200px, 500px 200px,
        500px 200px, 500px 200px, 500px 200px, 500px 200px, 500px 200px, 500px 200px,
        500px 200px, 500px 200px, 500px 200px, 500px 200px, 500px 200px, 500px 200px,
        100% 100%;
    background-repeat: repeat;
    animation: twinkle 4s infinite linear;
    color: #e0e0e0;
    min-height: 100vh;
    overflow-x: hidden;
    position: relative;
}

@keyframes twinkle {
    0%, 100% { opacity: 1; }
    50% { opacity: 0.8; }
}

.container {
    max-width: 1200px;
    margin: 0 auto;
    padding: 2rem;
}

.landing-section {
    text-align: center;
    min-height: 100vh;
    display: flex;
    flex-direction: column;
    justify-content: center;
    position: relative;
}

.cult-title {
    font-family: 'EB Garamond', serif;
    font-size: 4rem;
    font-weight: normal;
    background: linear-gradient(45deg, #8a2be2, #4b0082, #9932cc);
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
    background-clip: text;
    margin-bottom: 1rem;
    text-shadow: 0 0 30px rgba(138, 43, 226, 0.5);
    animation: glow 2s ease-in-out infinite alternate;
    letter-spacing: 0.15em;
}

@keyframes glow {
    from { text-shadow: 0 0 20px rgba(138, 43, 226, 0.5); }
    to { text-shadow: 0 0 40px rgba(138, 43, 226, 0.8); }
}

.subtitle {
    font-family: 'Cinzel', serif;
    font-size: 1.5rem;
    margin-bottom: 3rem;
    color: #b19cd9;
    opacity: 0.9;
}

.ca-section {
    background: rgba(138, 43, 226, 0.1);
    border: 2px solid #8a2be2;
    border-radius: 15px;
    padding: 1.5rem;
    margin: 2rem 0;
    backdrop-filter: blur(10px);
}

.ca-label {
    font-family: 'Cinzel', serif;
    font-size: 1.2rem;
    color: #8a2be2;
    margin-bottom: 0.5rem;
    font-weight: bold;
}

.ca-address {
    font-family: 'Courier New', monospace;
    font-size: 1rem;
    background: rgba(0, 0, 0, 0.3);
    padding: 1rem;
    border-radius: 8px;
    border: 1px solid #4b0082;
    color: #e0e0e0;
    cursor: pointer;
    transition: all 0.3s ease;
    word-break: break-all;
}

.ca-address:hover {
    background: rgba(138, 43, 226, 0.2);
    border-color: #8a2be2;
}

.copy-btn {
    font-family: 'Cinzel', serif;
    background: linear-gradient(45deg, #8a2be2, #4b0082);
    color: white;
    border: none;
    padding: 0.8rem 1.5rem;
    border-radius: 25px;
    cursor: pointer;
    font-size: 1rem;
    margin-top: 1rem;
    transition: all 0.3s ease;
    box-shadow: 0 4px 15px rgba(138, 43, 226, 0.3);
}

.copy-btn:hover {
    transform: translateY(-2px);
    box-shadow: 0 6px 20px rgba(138, 43, 226, 0.5);
}

.links-section {
    display: flex;
    justify-content: center;
    gap: 2rem;
    margin: 3rem 0;
    flex-wrap: wrap;
}

.cult-link {
    font-family: 'Cinzel', serif;
    background: linear-gradient(45deg, #4b0082, #8a2be2);
    color: white;
    text-decoration: none;
    padding: 1rem 2rem;
    border-radius: 30px;
    font-size: 1.1rem;
    font-weight: bold;
    transition: all 0.3s ease;
    box-shadow: 0 4px 15px rgba(138, 43, 226, 0.3);
    position: relative;
    overflow: hidden;
}

.cult-link:before {
    content: '';
    position: absolute;
    top: 0;
    left: -100%;
    width: 100%;
    height: 100%;
    background: linear-gradient(90deg, transparent, rgba(255,255,255,0.2), transparent);
    transition: left 0.5s;
}

.cult-link:hover:before {
    left: 100%;
}

.cult-link:hover {
    transform: translateY(-3px);
    box-shadow: 0 8px 25px rgba(138, 43, 226, 0.5);
}

.join-cult-btn {
    background: linear-gradient(45deg, #8a2be2, #ff6b6b);
    font-size: 1.5rem;
    padding: 1.5rem 3rem;
    margin-top: 3rem;
    animation: pulse 2s infinite;
}

@keyframes pulse {
    0% { transform: scale(1); }
    50% { transform: scale(1.05); }
    100% { transform: scale(1); }
}

.image-generator {
    display: none;
    min-height: 100vh;
    padding-top: 2rem;
}

.generator-title {
    font-family: 'Cinzel', serif;
    text-align: center;
    font-size: 3rem;
    color: #8a2be2;
    margin-bottom: 2rem;
}

.upload-area {
    font-family: 'Cinzel', serif;
    border: 3px dashed #8a2be2;
    border-radius: 15px;
    padding: 3rem;
    text-align: center;
    margin-bottom: 2rem;
    transition: all 0.3s ease;
    background: rgba(138, 43, 226, 0.05);
}

.upload-area:hover {
    border-color: #9932cc;
    background: rgba(138, 43, 226, 0.1);
}

.upload-area.dragover {
    border-color: #ff6b6b;
    background: rgba(255, 107, 107, 0.1);
}

.file-input {
    display: none;
}

.upload-btn {
    font-family: 'Cinzel', serif;
    background: linear-gradient(45deg, #8a2be2, #4b0082);
    color: white;
    border: none;
    padding: 1rem 2rem;
    border-radius: 25px;
    cursor: pointer;
    font-size: 1.1rem;
    margin: 1rem;
}

.canvas-container {
    font-family: 'Cinzel', serif;
    text-align: center;
    margin: 2rem 0;
}

#imageCanvas {
    max-width: 100%;
    border: 2px solid #8a2be2;
    border-radius: 10px;
    box-shadow: 0 4px 20px rgba(138, 43, 226, 0.3);
    cursor: crosshair;
}

#imageCanvas.dragging {
    cursor: grabbing;
}

.controls {
    font-family: 'Cinzel', serif;
    text-align: center;
    margin: 2rem 0;
}

.control-instructions {
    font-family: 'Cinzel', serif;
    background: rgba(138, 43, 226, 0.1);
    border: 1px solid #8a2be2;
    border-radius: 10px;
    padding: 1.5rem;
    margin-bottom: 2rem;
    font-size: 1.1rem;
}

.control-instructions p {
    margin: 0.5rem 0;
    color: #b19cd9;
}

.download-btn {
    font-family: 'Cinzel', serif;
    background: linear-gradient(45deg, #ff6b6b, #8a2be2);
    color: white;
    border: none;
    padding: 1rem 2rem;
    border-radius: 25px;
    cursor: pointer;
    font-size: 1.2rem;
    margin: 1rem;
}

.back-btn {
    font-family: 'Cinzel', serif;
    position: fixed;
    top: 2rem;
    left: 2rem;
    background: rgba(138, 43, 226, 0.8);
    color: white;
    border: none;
    padding: 0.8rem 1.5rem;
    border-radius: 20px;
    cursor: pointer;
    z-index: 1000;
}

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

.particle {
    position: absolute;
    background: #8a2be2;
    border-radius: 50%;
    opacity: 0.3;
    animation: float 10s infinite linear;
}

@keyframes float {
    0% { transform: translateY(100vh) rotate(0deg); opacity: 0; }
    10% { opacity: 0.3; }
    90% { opacity: 0.3; }
    100% { transform: translateY(-100px) rotate(360deg); opacity: 0; }
}

@media (max-width: 768px) {
    .cult-title { font-size: 2.5rem; }
    .links-section { flex-direction: column; align-items: center; }
    .container { padding: 1rem; }
}