/* ================================
   DestinyRoots East Custom Styles
   ================================ */

/* Global Animations */
@keyframes fadeIn {
    from {
        opacity: 0;
        transform: translateY(30px);
    }
    to {
        opacity: 1;
        transform: translateY(0);
    }
}

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

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

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

/* Smooth Scrolling */
html {
    scroll-behavior: smooth;
}

body {
    overflow-x: hidden;
}

/* Animated Background Stars */
.stars-container {
    width: 100%;
    height: 100%;
    position: relative;
}

.stars-container::before,
.stars-container::after {
    content: '';
    position: absolute;
    width: 2px;
    height: 2px;
    background: white;
    border-radius: 50%;
    box-shadow: 
        100px 100px white,
        200px 150px white,
        300px 80px white,
        400px 200px white,
        500px 120px white,
        600px 180px white,
        700px 90px white,
        800px 160px white,
        900px 110px white,
        1000px 190px white,
        150px 250px white,
        250px 300px white,
        350px 280px white,
        450px 320px white,
        550px 260px white,
        650px 340px white,
        750px 290px white,
        850px 330px white,
        950px 270px white,
        1050px 310px white,
        120px 400px white,
        220px 450px white,
        320px 420px white,
        420px 480px white,
        520px 440px white,
        620px 490px white,
        720px 430px white,
        820px 470px white,
        920px 410px white,
        1020px 460px white;
    animation: twinkle 3s infinite;
}

.stars-container::after {
    animation-delay: 1.5s;
    box-shadow: 
        130px 120px white,
        230px 170px white,
        330px 100px white,
        430px 220px white,
        530px 140px white,
        630px 200px white,
        730px 110px white,
        830px 180px white,
        930px 130px white,
        1030px 210px white;
}

/* Custom Scrollbar */
::-webkit-scrollbar {
    width: 10px;
}

::-webkit-scrollbar-track {
    background: #1a0b2e;
}

::-webkit-scrollbar-thumb {
    background: linear-gradient(180deg, #D4AF37, #6B46C1);
    border-radius: 5px;
}

::-webkit-scrollbar-thumb:hover {
    background: linear-gradient(180deg, #FFD700, #8B46C1);
}

/* Navigation Styles */
.nav-link {
    position: relative;
    transition: all 0.3s ease;
    padding: 0.5rem 0;
}

.nav-link::after {
    content: '';
    position: absolute;
    bottom: 0;
    left: 0;
    width: 0;
    height: 2px;
    background: linear-gradient(90deg, #D4AF37, #FFD700);
    transition: width 0.3s ease;
}

.nav-link:hover::after {
    width: 100%;
}

.nav-link:hover {
    color: #FFD700;
}

/* Animation Classes */
.animate-fade-in {
    animation: fadeIn 1s ease-out;
}

.animate-fade-in-delay {
    animation: fadeIn 1s ease-out 0.3s both;
}

.animate-fade-in-delay-2 {
    animation: fadeIn 1s ease-out 0.6s both;
}

.animate-spin-slow {
    animation: spin-slow 20s linear infinite;
}

.animate-float {
    animation: float 3s ease-in-out infinite;
}

/* Button Styles */
.btn-primary {
    display: inline-block;
    padding: 1rem 2rem;
    background: linear-gradient(135deg, #D4AF37, #FFD700);
    color: #1a0b2e;
    font-weight: 600;
    border-radius: 9999px;
    transition: all 0.3s ease;
    box-shadow: 0 4px 15px rgba(212, 175, 55, 0.4);
}

.btn-primary:hover {
    transform: translateY(-2px);
    box-shadow: 0 6px 25px rgba(212, 175, 55, 0.6);
    background: linear-gradient(135deg, #FFD700, #FFA500);
}

.btn-secondary {
    display: inline-block;
    padding: 1rem 2rem;
    background: transparent;
    color: #D4AF37;
    font-weight: 600;
    border: 2px solid #D4AF37;
    border-radius: 9999px;
    transition: all 0.3s ease;
}

.btn-secondary:hover {
    background: rgba(212, 175, 55, 0.1);
    border-color: #FFD700;
    color: #FFD700;
    transform: translateY(-2px);
}

/* Feature Cards */
.feature-card {
    background: linear-gradient(135deg, rgba(107, 70, 193, 0.3), rgba(139, 0, 0, 0.3));
    backdrop-filter: blur(10px);
    border: 1px solid rgba(212, 175, 55, 0.2);
    border-radius: 1rem;
    padding: 2rem;
    transition: all 0.4s ease;
    position: relative;
    overflow: hidden;
}

.feature-card::before {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background: linear-gradient(135deg, rgba(212, 175, 55, 0.1), transparent);
    opacity: 0;
    transition: opacity 0.4s ease;
}

.feature-card:hover {
    transform: translateY(-10px);
    border-color: rgba(212, 175, 55, 0.5);
    box-shadow: 0 15px 40px rgba(212, 175, 55, 0.3);
}

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

.feature-icon {
    width: 80px;
    height: 80px;
    background: linear-gradient(135deg, #D4AF37, #FFD700);
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 2rem;
    color: #1a0b2e;
    margin-bottom: 1.5rem;
    transition: all 0.4s ease;
}

.feature-card:hover .feature-icon {
    transform: scale(1.1) rotate(360deg);
}

/* Element Boxes */
.element-box {
    background: linear-gradient(135deg, rgba(107, 70, 193, 0.4), rgba(26, 11, 46, 0.6));
    backdrop-filter: blur(10px);
    border: 1px solid rgba(212, 175, 55, 0.3);
    border-radius: 1rem;
    padding: 1.5rem;
    text-align: center;
    transition: all 0.3s ease;
}

.element-box:hover {
    transform: scale(1.05);
    border-color: rgba(212, 175, 55, 0.6);
    background: linear-gradient(135deg, rgba(107, 70, 193, 0.6), rgba(26, 11, 46, 0.8));
}

/* Form Styles */
.form-input, .form-select, .form-textarea {
    width: 100%;
    padding: 0.875rem 1.25rem;
    background: rgba(26, 11, 46, 0.6);
    border: 1px solid rgba(212, 175, 55, 0.3);
    border-radius: 0.5rem;
    color: white;
    transition: all 0.3s ease;
    backdrop-filter: blur(10px);
}

.form-input:focus, .form-select:focus, .form-textarea:focus {
    outline: none;
    border-color: #D4AF37;
    box-shadow: 0 0 0 3px rgba(212, 175, 55, 0.2);
}

.form-input::placeholder {
    color: rgba(255, 255, 255, 0.5);
}

.form-label {
    display: block;
    margin-bottom: 0.5rem;
    color: #D4AF37;
    font-weight: 500;
}

/* Result Cards */
.result-card {
    background: linear-gradient(135deg, rgba(107, 70, 193, 0.4), rgba(139, 0, 0, 0.4));
    backdrop-filter: blur(10px);
    border: 1px solid rgba(212, 175, 55, 0.3);
    border-radius: 1rem;
    padding: 2rem;
    margin-bottom: 1.5rem;
}

.result-title {
    font-size: 1.5rem;
    font-weight: 700;
    color: #D4AF37;
    margin-bottom: 1rem;
    font-family: 'Cinzel', serif;
}

.result-content {
    color: #e9d5ff;
    line-height: 1.8;
}

/* Pillar Display */
.pillar-container {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(150px, 1fr));
    gap: 1rem;
    margin-top: 1.5rem;
}

.pillar {
    background: linear-gradient(135deg, rgba(212, 175, 55, 0.2), rgba(107, 70, 193, 0.3));
    border: 2px solid #D4AF37;
    border-radius: 0.75rem;
    padding: 1.5rem;
    text-align: center;
    position: relative;
    overflow: hidden;
}

.pillar::before {
    content: '';
    position: absolute;
    top: -50%;
    left: -50%;
    width: 200%;
    height: 200%;
    background: radial-gradient(circle, rgba(212, 175, 55, 0.1) 0%, transparent 70%);
    animation: float 6s ease-in-out infinite;
}

.pillar-label {
    font-size: 0.875rem;
    color: #D4AF37;
    margin-bottom: 0.5rem;
    text-transform: uppercase;
    letter-spacing: 1px;
}

.pillar-stem, .pillar-branch {
    font-family: 'Noto Serif SC', serif;
    font-size: 2rem;
    font-weight: 700;
    color: white;
    position: relative;
    z-index: 1;
}

.pillar-element {
    font-size: 0.75rem;
    color: #e9d5ff;
    margin-top: 0.5rem;
}

/* Loading Spinner */
.loading-spinner {
    width: 50px;
    height: 50px;
    border: 4px solid rgba(212, 175, 55, 0.2);
    border-top-color: #D4AF37;
    border-radius: 50%;
    animation: spin-slow 1s linear infinite;
    margin: 2rem auto;
}

/* Responsive Design */
@media (max-width: 768px) {
    .pillar-container {
        grid-template-columns: repeat(2, 1fr);
    }
    
    .feature-icon {
        width: 60px;
        height: 60px;
        font-size: 1.5rem;
    }
}

/* Content Page Styles */
.content-page {
    min-height: 100vh;
    padding-top: 120px;
    padding-bottom: 80px;
}

.content-container {
    max-width: 900px;
    margin: 0 auto;
    background: linear-gradient(135deg, rgba(107, 70, 193, 0.2), rgba(26, 11, 46, 0.6));
    backdrop-filter: blur(10px);
    border: 1px solid rgba(212, 175, 55, 0.2);
    border-radius: 1.5rem;
    padding: 3rem;
}

.content-heading {
    font-family: 'Cinzel', serif;
    font-size: 2.5rem;
    font-weight: 700;
    color: #D4AF37;
    margin-bottom: 2rem;
    text-align: center;
}

.content-section {
    margin-bottom: 2rem;
}

.content-section h2 {
    font-family: 'Cinzel', serif;
    font-size: 1.75rem;
    font-weight: 600;
    color: #D4AF37;
    margin-top: 2rem;
    margin-bottom: 1rem;
}

.content-section h3 {
    font-family: 'Cinzel', serif;
    font-size: 1.25rem;
    font-weight: 600;
    color: #FFD700;
    margin-top: 1.5rem;
    margin-bottom: 0.75rem;
}

.content-section p {
    color: #e9d5ff;
    line-height: 1.8;
    margin-bottom: 1rem;
}

.content-section ul {
    list-style: none;
    padding-left: 0;
}

.content-section ul li {
    color: #e9d5ff;
    padding-left: 1.5rem;
    margin-bottom: 0.5rem;
    position: relative;
}

.content-section ul li::before {
    content: '✦';
    position: absolute;
    left: 0;
    color: #D4AF37;
}

/* Tool Page Specific Styles */
.tool-container {
    display: grid;
    grid-template-columns: 1fr;
    gap: 2rem;
}

@media (min-width: 1024px) {
    .tool-container {
        grid-template-columns: 1fr 1fr;
    }
}

.input-section, .result-section {
    background: linear-gradient(135deg, rgba(107, 70, 193, 0.3), rgba(26, 11, 46, 0.6));
    backdrop-filter: blur(10px);
    border: 1px solid rgba(212, 175, 55, 0.2);
    border-radius: 1.5rem;
    padding: 2rem;
}

.section-title {
    font-family: 'Cinzel', serif;
    font-size: 1.75rem;
    font-weight: 700;
    color: #D4AF37;
    margin-bottom: 1.5rem;
    display: flex;
    align-items: center;
}

.section-title i {
    margin-right: 0.75rem;
}

/* Tooltip */
.tooltip {
    position: relative;
    display: inline-block;
    cursor: help;
}

.tooltip .tooltip-text {
    visibility: hidden;
    background-color: rgba(26, 11, 46, 0.95);
    color: #D4AF37;
    text-align: center;
    border-radius: 6px;
    padding: 8px 12px;
    position: absolute;
    z-index: 1;
    bottom: 125%;
    left: 50%;
    transform: translateX(-50%);
    opacity: 0;
    transition: opacity 0.3s;
    border: 1px solid #D4AF37;
    white-space: nowrap;
    font-size: 0.875rem;
}

.tooltip:hover .tooltip-text {
    visibility: visible;
    opacity: 1;
}

/* Alert Messages */
.alert {
    padding: 1rem 1.5rem;
    border-radius: 0.75rem;
    margin-bottom: 1.5rem;
    border: 1px solid;
}

.alert-info {
    background: rgba(59, 130, 246, 0.2);
    border-color: rgba(59, 130, 246, 0.5);
    color: #93c5fd;
}

.alert-success {
    background: rgba(16, 185, 129, 0.2);
    border-color: rgba(16, 185, 129, 0.5);
    color: #6ee7b7;
}

.alert-warning {
    background: rgba(245, 158, 11, 0.2);
    border-color: rgba(245, 158, 11, 0.5);
    color: #fbbf24;
}

/* Print Styles */
@media print {
    .stars-container,
    nav,
    footer,
    .btn-primary,
    .btn-secondary {
        display: none !important;
    }
    
    body {
        background: white;
        color: black;
    }
}