/* --- SITE THEME & GENERAL STYLES --- */
body { 
    background-color: #1a0000; 
    color: #f8f9fa; 
    font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif; 
}

.custom-section {
    background-color: #2c0000;
    border-radius: 20px;
    transition: all 0.3s ease;
    border: 1px solid rgba(255,255,255,0.1);
}

.revelation-card {
    transition: all 0.3s ease-in-out;
    background-color: #1e1e1e !important;
}

/* Glow Effects */
.border-info:hover { box-shadow: 0 0 20px rgba(13, 202, 240, 0.3); transform: translateY(-5px); }
.border-warning:hover { box-shadow: 0 0 20px rgba(255, 193, 7, 0.3); transform: translateY(-5px); }
.border-danger:hover { box-shadow: 0 0 20px rgba(220, 53, 69, 0.3); transform: translateY(-5px); }

/* Scroll Animation Base */
.reveal-on-scroll {
    opacity: 0;
    transform: translateY(30px);
    transition: all 0.8s ease-out;
}
.reveal-on-scroll.is-visible {
    opacity: 1;
    transform: translateY(0);
}

/* AI Animated Gradient */
.ai-box-animated {
    background: linear-gradient(-45deg, #2c0000, #1a0033, #000000, #2c0000);
    background-size: 400% 400%;
    animation: breathGradient 12s ease infinite;
    border: 1px solid rgba(13, 202, 240, 0.2);
    color: #ffffff;
}

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

/* --- PARALLAX SECTIONS --- */
.parallax1, .parallax2, .parallax3, .parallax4, .parallax5, 
.armourparallax, .chasteningparallax, .whoiswhoparallax, .contactparallax 
{
    padding-top: 200px;
    padding-bottom: 200px;
    overflow: hidden;
    position: relative;
    width: 100%;
    background-attachment: fixed;
    background-size: cover;
    background-repeat: no-repeat;
    background-position: top center;
    background-color: rgba(0, 0, 0, 0.5);
    background-blend-mode: darken;
}

.parallax1 { background-image: url(images/wikiimages-earth-11048_1280.jpg); padding: 100px 20px; }
.parallax2 { background-image: url(images/mount-fuji-2297961_1280.jpg); padding: 100px 20px; }
.parallax3 { background-image: url(images/arduinna-fall-8192375_1280.png); padding: 100px 20px; }
.parallax4 { background-image: url(images/ai-generated-8807081_1280.jpg); padding: 100px 20px; }
.parallax5 { background-image: url(images/man-2915187_1280.jpg); padding: 100px 20px; }
.armourparallax { background-image: url(images/kar3nt-ai-generated-8552284_1280.png); padding-left: 20px; padding-right: 20px; }
.chasteningparallax { background-image: url(images/leolo212-man-5619304_1280.jpg); padding-left: 20px; padding-right: 20px; }

/* Fix for nested headings/paragraphs */
.calloutred h4, .calloutblue h4, .calloutgreen h4, .calloutyellow h4, .calloutgrey h4, .calloutcyan h4 { margin-top: 0; margin-bottom: 5px; }
.calloutred p:last-child, .calloutblue p:last-child, .calloutgreen p:last-child, .calloutyellow p:last-child, .calloutgrey p:last-child, .calloutcyan p:last-child { margin-bottom: 0; }

/* --- TIMELINE & FINAL TOUCHES --- */
.timeline-item {
    background: #1e1e1e;
    border-left: 5px solid;
    margin-bottom: 20px;
    transition: transform 0.3s ease;
}
.timeline-item:hover { transform: translateX(10px); }

.img-glow {
    transition: all 0.4s ease;
    border: 1px solid rgba(255,255,255,0.1) !important;
}
.img-glow:hover {
    box-shadow: 0 0 25px rgba(255,255,255,0.2) !important;
    transform: scale(1.03);
}

.bible-quote { font-style: italic; opacity: 0.9; line-height: 1.6; }

.animate-bounce { animation: bounce 2s infinite; }
@keyframes bounce {
    0%, 20%, 50%, 80%, 100% {transform: translateY(0);}
    40% {transform: translateY(-10px);}
    60% {transform: translateY(-5px);}
}

.story-accent {
    border-left: 4px solid #0dcaf0;
    background: rgba(13, 202, 240, 0.05);
    padding: 20px;
    font-style: italic;
}

/* --- PRINT SETTINGS (Always keep at the bottom) --- */
@media print {
    .navbar, .btn, .footer, .no-print {
        display: none !important;
    }
    body {
        background-color: white !important;
        color: black !important;
    }
    .container {
        width: 100% !important;
        margin: 0 !important;
        padding: 0 !important;
    }
    /* Ensure parallax images don't waste ink/look messy on paper */
    .parallax1, .parallax2, .parallax3, .parallax4, .parallax5, 
    .armourparallax, .chasteningparallax, .whoiswhoparallax, .contactparallax {
        background-image: none !important;
        padding: 20px 0 !important;
        color: black !important;
    }
}

  @keyframes sword-sweep {
    0% { background-position: -150%; } /* Start well off to the left */
    20% { background-position: -150%; } /* Small pause before the glint */
    100% { background-position: 150%; } /* One slow, smooth pass to the right */
  }

  .sword-shine {
    /* Metallic base color */
    color: #2c3e50; 
    
    /* A single, softer gradient peak for a cleaner look */
    background: linear-gradient(
      105deg, 
      #2c3e50 45%, 
      rgba(255, 255, 255, 0.7) 50%, 
      #2c3e50 55%
    );
    
    background-size: 300% auto; /* Wider background prevents "double-flashing" */
    background-clip: text;
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
    
    /* Slower duration (6s) for a majestic feel */
    animation: sword-sweep 8s linear infinite;
  }

.interstellar-section {
    position: relative;
    background-color: #020205; /* Even deeper black for space */
    color: #f0f0f0;
    padding: 100px 20px;
    text-align: center;
    overflow: hidden;
    font-family: 'Times New Roman', serif;
}

.cosmic-glow {
    position: absolute;
    top: 15%;
    left: 50%;
    transform: translate(-50%, -50%);
    width: 500px;
    height: 500px;
    background: radial-gradient(circle, rgba(255,223,100,0.25) 0%, rgba(255,215,0,0) 70%);
    filter: blur(60px);
    z-index: 1;
    animation: pulseGlow 8s infinite alternate;
}

@keyframes pulseGlow {
    from { opacity: 0.3; transform: translate(-50%, -50%) scale(1); }
    to { opacity: 0.7; transform: translate(-50%, -50%) scale(1.3); }
}

.stellar-title {
    font-size: 3.2rem;
    position: relative;
    z-index: 2;
    color: #fff;
    text-shadow: 0 0 20px rgba(255, 255, 255, 0.8), 0 0 40px #ffd700;
    margin-bottom: 50px;
    letter-spacing: 2px;
}

.scripture-passage {
    position: relative;
    z-index: 2;
    max-width: 850px;
    margin: 0 auto;
    font-size: 1.3rem;
    line-height: 1.9;
    color: #e8e8e8;
}

.scripture-passage p { margin-bottom: 25px; }

/* Making Zion and important promises stand out */
.peace-promise b {
    color: #ffd700;
    text-transform: uppercase;
    letter-spacing: 1px;
}

.life-promise {
    color: #fff;
    font-weight: bold;
    text-shadow: 0 0 10px rgba(255,255,255,0.3);
}

.particle {
    position: absolute;
    background: #fff;
    border-radius: 50%;
    opacity: 0.5;
    box-shadow: 0 0 8px #ffd700;
    animation: drift 12s infinite linear;
}

.p1 { width: 3px; height: 3px; left: 15%; animation-delay: 0s; }
.p2 { width: 5px; height: 5px; left: 45%; animation-delay: 4s; }
.p3 { width: 2px; height: 2px; left: 75%; animation-delay: 8s; }
.p4 { width: 4px; height: 4px; left: 85%; animation-delay: 2s; }

@keyframes drift {
    0% { transform: translateY(100vh) scale(0); opacity: 0; }
    20% { opacity: 0.6; }
    80% { opacity: 0.6; }
    100% { transform: translateY(-100px) scale(1.2); opacity: 0; }
}

/* --- Global Salvation Page Styles --- */
#salvation-page {
    max-width: 900px;
    margin: 0 auto;
    font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif;
    color: #333;
    line-height: 1.6;
    padding: 60px 20px; /* Added this back for nice spacing */
}

/* --- Blue Accents (#007bff) --- */
#salvation-page .text-custom-blue { color: #007bff !important; }
#salvation-page .border-custom-blue { border-color: #007bff !important; }

/* --- Step Cards (The Journey Steps) --- */
#salvation-page .step-card {
    background: #f8fdff;
    border-left: 5px solid #007bff;
    padding: 30px;
    margin-bottom: 30px;
    border-radius: 0 15px 15px 0;
    box-shadow: 0 4px 15px rgba(0,0,0,0.05);
}

#salvation-page .step-icon {
    background: #007bff;
    color: white;
    width: 40px;
    height: 40px;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    font-weight: bold;
    margin-bottom: 15px;
}

/* --- The Invitation Box (Isaiah 55) --- */
#salvation-page .invite-box {
    background-color: #f8f9fa !important;
    border-left: 5px solid #007bff !important;
    padding: 2.5rem;
    border-radius: 1rem;
    margin-bottom: 3rem;
}

/* --- The Born Again Card --- */
#salvation-page .born-again-card {
    background: #ffffff;
    border: 2px solid #007bff !important;
    border-radius: 1.5rem;
    box-shadow: 0 1rem 3rem rgba(0,0,0,0.1) !important;
    padding: 3rem;
}

#salvation-page .italic-quote {
    font-style: italic;
    color: #6c757d;
}

/* --- The Final Seal Section --- */
#salvation-page .seal-section {
    background: linear-gradient(135deg, #007bff 0%, #0056b3 100%);
    color: white;
    padding: 30px;
    border-radius: 15px;
    text-align: center;
    margin-top: 30px;
}

#salvation-page .seal-section h3 {
    text-transform: uppercase;
    letter-spacing: 2px;
    font-weight: bold;
}

/* --- Animations --- */
#salvation-page .step-card:hover, 
#salvation-page .born-again-card:hover {
    transform: translateY(-5px);
    transition: transform 0.3s ease;
}

/* Diamond Warning Sign Style */
.road-sign-container {
    perspective: 1000px;
}

.road-sign {
    width: 100px;
    height: 100px;
    background: #ffcc00; /* Caution Yellow */
    border: 4px solid #000; /* Black Border */
    display: flex;
    justify-content: center;
    align-items: center;
    margin: 0 auto;
    box-shadow: 0 4px 10px rgba(0,0,0,0.3);
    
    /* Creates the Diamond Shape */
    transform: rotate(45deg); 
    
    /* Initial animation state */
    animation: spinIn 1.5s cubic-bezier(0.175, 0.885, 0.32, 1.275) forwards;
}

.sign-year {
    /* Rotates text back so it is upright */
    transform: rotate(-45deg);
    font-size: 1.6rem;
    font-weight: 900;
    color: #000;
}

/* Spinning Animation */
@keyframes spinIn {
    0% { transform: rotateY(-180deg) rotate(45deg) scale(0); opacity: 0; }
    100% { transform: rotateY(0deg) rotate(45deg) scale(1); opacity: 1; }
}

#backToTop {
    position: fixed;
    bottom: 20px;
    right: 20px;
    z-index: 1000;
    
    /* Crucial: Set the initial state to hidden */
    opacity: 0;
    visibility: hidden;
    transition: opacity 0.4s ease, visibility 0.4s ease;
}

/* This is the class your JS is now toggling */
#backToTop.show {
    opacity: 1;
    visibility: visible;
}

/* Subtle lift and glow on hover */
#backToTop:hover {
    transform: translateY(-5px); /* Lifts the button slightly */
    box-shadow: 0 0 15px rgba(255, 193, 7, 0.6); /* Adds a yellow glow matching btn-warning */
    transition: all 0.3s ease; /* Ensures the hover animation is smooth */
}

/* Make sure the base button also has a transition for the transform */
#backToTop {
    /* ... your existing properties ... */
    transition: opacity 0.4s ease, visibility 0.4s ease, transform 0.3s ease, box-shadow 0.3s ease;
}