/* ========================================= */
/* GLOBAL */
/* ========================================= */

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

:root{

    --background:#040302;
    --background-soft:#0b0805;

    --card-top:#20160d;
    --card-bottom:#0d0906;

    --gold:#d4a64a;
    --gold-light:#f3d48a;
    --gold-dark:#b7842f;

    --text:#f8f3e8;
    --text-soft:#e7dcc3;
    --text-muted:#bfae8b;

    --border:rgba(212,166,74,.18);

    --shadow:
    0 18px 45px rgba(0,0,0,.45);

}

html{
    scroll-behavior:smooth;
}

body{

    background:

    radial-gradient(
        circle at top,
        #22160b 0%,
        #0c0906 42%,
        #040302 100%
    );

    color:var(--text);

    font-family:'Open Sans', sans-serif;

    overflow-x:hidden;

}

/* ========================================= */
/* NAVBAR */
/* ========================================= */

.navbar{

    position:relative;

    width:96%;
    max-width:1450px;

    margin:18px auto 0 auto;

    display:flex;
    justify-content:space-between;
    align-items:center;

    padding:18px 28px;

    z-index:10;

    background:
    rgba(9,7,5,.94);

    backdrop-filter:blur(14px);

    border:1px solid var(--border);

    border-radius:24px;

    box-shadow:

    0 10px 35px rgba(0,0,0,.35),

    0 0 30px rgba(243,212,138,.04);

}

.nav-logo{

    display:flex;
    align-items:center;

    gap:15px;

}

.nav-logo img{

    width:65px;

    border-radius:50%;

    border:2px solid rgba(243,212,138,.45);

    box-shadow:

    0 0 18px rgba(243,212,138,.10);

}

.nav-logo h2{

    font-family:'Cinzel', serif;

    color:var(--gold-light);

    font-size:1.3rem;

    letter-spacing:1px;

}

.nav-links{

    display:flex;

    gap:28px;

    list-style:none;

}

.nav-links a{

    color:var(--text);

    text-decoration:none;

    font-weight:600;

    transition:.35s ease;

}

.nav-links a:hover{

    color:var(--gold-light);

    text-shadow:

    0 0 12px rgba(243,212,138,.25);

}

/* ========================================= */
/* HERO */
/* ========================================= */

.hero-header{

    position:relative;

    overflow:hidden;

    background:

    linear-gradient(

        180deg,

        #090604,

        #040302

    );

    padding-bottom:20px;

}

.hero-content{

    position:relative;

    width:94%;
    max-width:1350px;

    margin:12px auto 0 auto;

    text-align:center;

}

.hero-banner{

    width:100%;

    display:block;

    border-radius:30px;

    box-shadow:

    0 25px 70px rgba(0,0,0,.65),

    0 0 50px rgba(243,212,138,.08),

    0 0 120px rgba(212,166,74,.05);

}

.hero-text{

    font-size:1.1rem;

    line-height:1.9;

    max-width:850px;

    margin:30px auto 0 auto;

    color:var(--text-soft);

}

/* ========================================= */
/* BUTTONS */
/* ========================================= */

.hero-buttons{

    margin-top:30px;

    display:flex;

    justify-content:center;

    gap:18px;

    flex-wrap:wrap;

}

.primary-btn,
.secondary-btn,
.platform-buttons a{

    text-decoration:none;

    padding:12px 24px;

    border-radius:50px;

    font-weight:700;

    transition:.35s ease;

}

.primary-btn{

    display:inline-flex;

    align-items:center;

    justify-content:center;

    min-width:210px;

    cursor:pointer;

    border:none;

    background:

    linear-gradient(

        180deg,

        var(--gold-light),

        var(--gold)

    );

    color:#120d08;

    box-shadow:

    0 8px 22px rgba(212,166,74,.25);

}

.primary-btn:hover,
.platform-buttons a:hover{

    background:

    linear-gradient(

        180deg,

        #ffe8a8,

        var(--gold-light)

    );

    box-shadow:

    0 0 28px rgba(243,212,138,.35);

    transform:translateY(-2px);

}

.secondary-btn{

    border:2px solid var(--gold);

    color:var(--gold-light);

    background:

    rgba(212,166,74,.04);

}

.secondary-btn:hover{

    background:var(--gold);

    color:#0b0805;

}

/* ========================================= */
/* SECTIONS */
/* ========================================= */

section{

    padding:55px 5%;

}

.section-divider{

    width:100%;

    height:1px;

    margin-bottom:50px;

    background:

    linear-gradient(

        to right,

        transparent,

        rgba(243,212,138,.45),

        transparent

    );

}

.section-title{

    text-align:center;

    margin-bottom:28px;

}

.section-title h2{

    font-family:'Cinzel', serif;

    font-size:2.4rem;

    margin-bottom:10px;

    color:var(--gold-light);

}

.section-subtitle{

    max-width:760px;

    margin:16px auto 0 auto;

    color:var(--text-muted);

    line-height:1.8;

    font-size:1rem;

}

.gold-line{

    width:100px;

    height:4px;

    margin:auto;

    border-radius:10px;

    background:

    linear-gradient(

        90deg,

        var(--gold-dark),

        var(--gold-light),

        var(--gold-dark)

    );

}

/* ========================================= */
/* ABOUT */
/* ========================================= */

.content-card{

    background:

    linear-gradient(

        180deg,

        var(--card-top),

        var(--card-bottom)

    );

    padding:35px;

    border-radius:28px;

    max-width:950px;

    margin:auto;

    line-height:1.9;

    box-shadow:

    var(--shadow),

    0 0 35px rgba(243,212,138,.03);

    border:1px solid var(--border);

}

.content-card p{

    margin-bottom:24px;

    color:var(--text-soft);

    font-size:1rem;

    line-height:1.9;

}

.content-card p:last-child{

    margin-bottom:0;

}

/* ========================================= */
/* CONTACT */
/* ========================================= */

.contact-section .primary-btn{

    margin-top:28px;

}

/* ========================================= */
/* PODCAST GRID */
/* ========================================= */

.episode-grid{

    width:100%;

    max-width:1200px;

    margin:0 auto;

    display:grid;

    grid-template-columns:
    repeat(3, minmax(0,1fr));

    gap:30px;

}

/* ========================================= */
/* PODCAST CARD */
/* ========================================= */

.episode-card{

    position:relative;

    width:100%;

    background:

    linear-gradient(

        180deg,

        rgba(34,24,14,.98),

        rgba(12,8,5,.98)

    );

    border-radius:22px;

    overflow:hidden;

    border:1px solid rgba(212,166,74,.18);

    transition:.35s ease;

    box-shadow:

    0 12px 35px rgba(0,0,0,.45),

    0 0 20px rgba(243,212,138,.03);
    
    display:flex;

    flex-direction:column;

}

.episode-card:hover{

    transform:translateY(-6px);

    border-color:rgba(243,212,138,.40);

    box-shadow:

    0 18px 45px rgba(0,0,0,.55),

    0 0 28px rgba(243,212,138,.08);

}

/* ========================================= */
/* EPISODE IMAGE */
/* ========================================= */

.episode-image{

    position:relative;

    width:100%;

    min-height:500px;

    background:#000;

}

.episode-image img{

    width:100%;

    height:100%;

    object-fit:contain;

}

.episode-card:hover .episode-image img{

    transform:scale(1.03);

}

/* ========================================= */
/* NOW PLAYING */
/* ========================================= */

.now-playing{

    position:absolute;

    top:12px;

    left:12px;

    padding:6px 12px;

    border-radius:50px;

    background:rgba(6,4,2,.82);

    color:#f3d48a;

    font-size:.68rem;

    font-weight:700;

    letter-spacing:1px;

    border:1px solid rgba(243,212,138,.28);

    backdrop-filter:blur(10px);

    z-index:5;

}

/* ========================================= */
/* PLAY BUTTON */
/* ========================================= */

.play-button{

    position:absolute;

    top:12%;

    left:50%;

    transform:translate(-50%,-50%);

    width:62px;

    height:62px;

    border-radius:50%;

    background:rgba(8,6,4,.88);

    border:2px solid rgba(243,212,138,.55);

    display:flex;

    align-items:center;

    justify-content:center;

    color:#f3d48a;

    font-size:1.35rem;

    transition:.35s ease;

    z-index:10;

}

.play-button:hover{

    background:

    linear-gradient(

        180deg,

        #f3d48a,

        #d4a64a

    );

    color:#090705;

    box-shadow:

    0 0 24px rgba(243,212,138,.30);

}

/* ========================================= */
/* SOUND WAVE */
/* ========================================= */

.sound-wave{

    position:absolute;

    right:14px;

    bottom:14px;

    display:flex;

    align-items:flex-end;

    gap:6px;

    opacity:0;

    transition:.3s ease;

}

.sound-wave span{

    width:4px;

    background:#f3d48a;

    border-radius:20px;

    animation:wave .9s infinite ease-in-out;

}

.sound-wave span:nth-child(1){height:10px;}
.sound-wave span:nth-child(2){height:18px;}
.sound-wave span:nth-child(3){height:14px;}
.sound-wave span:nth-child(4){height:22px;}
.sound-wave span:nth-child(5){height:16px;}

audio{

    display:none;

}

/* ========================================= */
/* CARD CONTENT */
/* ========================================= */

.episode-content{

    padding:20px;

}

.episode-tag{

    display:inline-block;

    margin-bottom:14px;

    padding:6px 12px;

    border-radius:50px;

    background:rgba(212,166,74,.08);

    border:1px solid rgba(243,212,138,.22);

    color:#f3d48a;

    font-size:.68rem;

    font-weight:700;

    letter-spacing:1px;

    text-transform:uppercase;

}

.episode-card h3{

    color:#ffffff;

    font-size:1.05rem;

    line-height:1.45;

    margin-bottom:12px;

}

.episode-card p{

    color:#dccfb6;

    font-size:.9rem;

    line-height:1.7;

    margin-bottom:0;

}

/* ========================================= */
/* SCRIPTURE */
/* ========================================= */

.scripture-container{

    display:grid;

    grid-template-columns:

    repeat(auto-fit,minmax(220px,1fr));

    gap:20px;

    max-width:1200px;

    margin:auto;

}

.scripture-box{

    background:

    linear-gradient(

        180deg,

        rgba(34,24,14,.98),

        rgba(12,8,5,.98)

    );

    padding:24px;

    border-radius:22px;

    text-align:center;

    border-left:4px solid #d4a64a;

    box-shadow:

    0 10px 30px rgba(0,0,0,.40);

    transition:.35s ease;

}

.scripture-box:hover{

    transform:translateY(-4px);

    box-shadow:

    0 16px 40px rgba(0,0,0,.50),

    0 0 20px rgba(243,212,138,.06);

}

.scripture-box h3{

    color:#f3d48a;

    margin-bottom:14px;

    font-size:1rem;

}

.scripture-box p{

    color:#e8dbc4;

    font-size:.92rem;

    line-height:1.8;

}

/* ========================================= */
/* LISTEN */
/* ========================================= */

.listen-section{

    text-align:center;

}

.listen-box{

    background:

    linear-gradient(

        180deg,

        rgba(34,24,14,.98),

        rgba(12,8,5,.98)

    );

    padding:55px 34px;

    border-radius:30px;

    max-width:850px;

    margin:auto;

    border:1px solid rgba(212,166,74,.18);

    box-shadow:

    0 18px 50px rgba(0,0,0,.45);

}

.listen-box h2{

    font-family:'Cinzel',serif;

    font-size:2.2rem;

    color:#f3d48a;

    margin-bottom:18px;

}

.listen-box p{

    color:#dccfb6;

    margin-bottom:32px;

    line-height:1.9;

}

.platform-buttons{

    display:flex;

    justify-content:center;

    gap:18px;

    flex-wrap:wrap;

}

.platform-buttons a{

    background:

    linear-gradient(

        180deg,

        #f3d48a,

        #d4a64a

    );

    color:#100b06;

    box-shadow:

    0 8px 24px rgba(212,166,74,.20);

}

.platform-buttons a:hover{

    transform:translateY(-2px);

    box-shadow:

    0 0 28px rgba(243,212,138,.35);

}

/* ========================================= */
/* FOOTER */
/* ========================================= */

footer{

    background:

    linear-gradient(

        180deg,

        #090604,

        #030201

    );

    text-align:center;

    padding:60px 20px;

    border-top:1px solid rgba(243,212,138,.16);

    box-shadow:

    inset 0 20px 60px rgba(0,0,0,.35);

}

.footer-logo{

    width:90px;

    border-radius:50%;

    margin-bottom:20px;

    border:2px solid rgba(243,212,138,.35);

    box-shadow:

    0 0 22px rgba(243,212,138,.10);

}

footer h3{

    font-family:'Cinzel',serif;

    color:var(--gold-light);

    margin-bottom:12px;

    letter-spacing:1px;

}

footer p{

    color:var(--text-soft);

    line-height:1.8;

}

.copyright{

    opacity:.75;

    font-size:.9rem;

    margin-top:20px;

}

/* ========================================= */
/* DESIGNER CREDIT */
/* ========================================= */

.designer-credit{

    margin-top:28px;

}

.designer-credit p{

    margin-bottom:12px;

    color:var(--text-muted);

    font-size:.95rem;

}

.designer-credit a{

    color:var(--gold-light);

    text-decoration:none;

    font-weight:700;

    transition:.35s ease;

}

.designer-credit a:hover{

    color:#ffffff;

    text-shadow:

    0 0 15px rgba(243,212,138,.25);

}

.facebook-link{

    display:inline-block;

    margin-top:6px;

}

/* ========================================= */
/* WELCOME OVERLAY */
/* ========================================= */

body.locked{

    overflow:hidden;

    height:100vh;

}

#welcomeOverlay{

    position:fixed;

    top:0;

    left:0;

    width:100%;

    height:100vh;

    background:

    radial-gradient(

        circle at center,

        rgba(40,26,13,.96),

        rgba(10,7,4,.99)

    );

    backdrop-filter:blur(12px);

    z-index:999999;

    display:flex;

    align-items:center;

    justify-content:center;

    padding:40px 20px;

    transition:

    opacity 1.6s ease,

    visibility 1.6s ease;

}

#welcomeOverlay.hide-overlay{

    opacity:0;

    visibility:hidden;

    pointer-events:none;

}

.welcome-background-glow{

    position:absolute;

    width:700px;

    height:700px;

    background:

    radial-gradient(

        circle,

        rgba(243,212,138,.12),

        transparent 72%

    );

    filter:blur(30px);

    animation:pulseGlow 4s ease-in-out infinite;

}

.welcome-container{

    position:relative;

    width:min(92%,1100px);

    margin:0 auto;

    text-align:center;

    display:grid;

    grid-template-columns:1fr 1fr;

    gap:40px;

    align-items:center;

    z-index:2;

}

.welcome-image{

    display:block;

    width:100%;

    max-width:850px;

    height:auto;

    margin:0 auto 3rem;

    border-radius:24px;

    box-shadow:0 20px 50px rgba(0,0,0,.55);

}

.welcome-content{

    text-align:center;

}

.welcome-logo{

    width:90px;

    border-radius:50%;

    border:2px solid rgba(243,212,138,.40);

    margin-bottom:28px;

    box-shadow:

    0 0 25px rgba(243,212,138,.10);

}

.welcome-content h1{

    font-family:'Cinzel',serif;

    font-size:clamp(2rem,4vw,3.5rem);

    color:#ffffff;

    margin-bottom:22px;

    text-shadow:

    0 0 25px rgba(243,212,138,.18);

}

.welcome-line{

    width:120px;

    height:4px;

    margin:0 auto 28px auto;

    border-radius:50px;

    background:

    linear-gradient(

        90deg,

        var(--gold),

        var(--gold-light),

        var(--gold)

    );

}

.welcome-scripture{

    color:var(--text-soft);

    font-size:1.1rem;

    line-height:1.9;

    max-width:520px;

    margin:0 auto 24px auto;

}

.welcome-scripture span{

    display:block;

    margin-top:10px;

    color:var(--gold-light);

    font-weight:700;

    letter-spacing:2px;

}

.welcome-message{

    color:var(--text-soft);

    line-height:1.8;

    max-width:700px;

    margin:2rem auto;

}

.welcome-audio-visual{

    display:flex;

    flex-direction:column;

    align-items:center;

    justify-content:center;

}

.playing-text{

    margin-top:20px;

    color:var(--gold-light);

    letter-spacing:2px;

    text-transform:uppercase;

    font-size:.82rem;

}

.welcome-wave{

    display:flex;

    align-items:flex-end;

    justify-content:center;

    gap:7px;

    height:70px;

}

.welcome-wave span{

    width:5px;

    background:var(--gold-light);

    border-radius:30px;

    animation:welcomeWave 1s infinite ease-in-out;

}

.entering-text{

    margin-top:28px;

    color:rgba(243,212,138,.85);

    letter-spacing:4px;

    text-transform:uppercase;

    font-size:.72rem;

    animation:pulseText 2s ease-in-out infinite;

}

/* ========================================= */
/* RESPONSIVE */
/* ========================================= */

@media(max-width:1100px){

.episode-grid{

    grid-template-columns:

    repeat(2,minmax(0,1fr));

}

.episode-image{

    aspect-ratio:2/3;

}

}

@media(max-width:950px){

.welcome-container{

    grid-template-columns:1fr;

    max-width:700px;

}

.welcome-content h1{

    font-size:2.5rem;

}

.welcome-image{

    max-height:450px;

    object-fit:cover;

}

}
@media(max-width:900px){
.navbar{
    width:94%;
    padding:18px;
}
.hero-content{
    width:94%;
}
.section-title h2{
    font-size:2rem;
}
.welcome-image{
    width:88%;
    max-width:650px;
    margin:0 auto 2rem;
}
}

@media(max-width:700px){

.episode-grid{

    grid-template-columns:1fr;

}

.episode-image{

    min-height:420px;

}

.play-button{

    width:56px;

    height:56px;

    font-size:1.2rem;

}

}

@media(max-width:600px){

.navbar{

    flex-direction:column;

    gap:18px;

}

.nav-links{

    flex-wrap:wrap;

    justify-content:center;

    gap:14px;

}

.hero-banner{

    border-radius:20px;

}

.hero-buttons{

    flex-direction:column;

    align-items:center;

}

section{

    padding:45px 5%;

}

#welcomeOverlay{
    padding:20px;
}
.welcome-logo{
    width:72px;
}
.welcome-content h1{
    font-size:1.8rem;
}
.welcome-scripture{
    font-size:.95rem;
}
.welcome-message{
    font-size:.9rem;
    line-height:1.6;
}
.welcome-line{
    width:80px;
}
.entering-text{
    font-size:.65rem;
}
.playing-text{
    font-size:.75rem;
}

}