/* ============================================================
   NEW BIRTH PRAISE & WORSHIP CENTER — Shared Stylesheet
   Covers: index.html, connect.html, media.html
   ============================================================ */

/* --- GOOGLE FONTS (loaded via HTML <link>) --- */

/* --- ROOT VARIABLES --- */
:root {
    --color-bg:           #030712;   /* Very dark slate / almost black */
    --color-card:         #0f172a;
    --color-navy:         #2d3d4d;
    --color-navy-dark:    #23303d;
    --color-accent:       #d4b483;   /* Muted Gold */
    --color-brand:        #00a1a2;   /* Teal */
    --color-sand:         #d6b796;   /* Sand / warm gold */
    --color-text-muted:   #94a3b8;
}

/* --- BASE --- */
*, *::before, *::after { box-sizing: border-box; }

html { scroll-behavior: smooth; }

body {
    font-family: 'Inter', sans-serif;
    -webkit-font-smoothing: antialiased;
    color: white;
    background-color: var(--color-bg);
}

.font-serif  { font-family: 'Playfair Display', serif; }
.font-playfair { font-family: 'Playfair Display', serif !important; }

/* --- SCROLLBAR --- */
::-webkit-scrollbar { width: 6px; }
::-webkit-scrollbar-track { background: var(--color-bg); }
::-webkit-scrollbar-thumb { background: #334155; border-radius: 3px; }
::-webkit-scrollbar-thumb:hover { background: var(--color-accent); }

/* --- CUSTOM COLOR UTILITIES --- */
.bg-theme        { background-color: var(--color-bg); }
.bg-card-theme   { background-color: var(--color-card); }
.bg-navy         { background-color: var(--color-navy); }
.bg-navy-dark    { background-color: var(--color-navy-dark); }
.bg-brand        { background-color: var(--color-brand); }
.bg-sand         { background-color: var(--color-sand); }
.bg-accent       { background-color: var(--color-accent); }

.text-accent     { color: var(--color-accent); }
.text-brand      { color: var(--color-brand); }
.text-sand       { color: var(--color-sand); }

.border-accent   { border-color: var(--color-accent); }
.border-brand    { border-color: var(--color-brand); }
.border-sand     { border-color: var(--color-sand); }

.hover\:text-accent:hover  { color: var(--color-accent); }
.hover\:text-brand:hover   { color: var(--color-brand); }
.hover\:text-sand:hover    { color: var(--color-sand); }
.hover\:bg-accent:hover    { background-color: var(--color-accent); }
.hover\:bg-brand:hover     { background-color: var(--color-brand); }
.hover\:bg-sand:hover      { background-color: var(--color-sand); }
.hover\:border-accent:hover { border-color: var(--color-accent); }
.hover\:border-brand:hover  { border-color: var(--color-brand); }

/* --- GRADIENTS --- */
.gradient-overlay-bottom {
    background: linear-gradient(to top, var(--color-bg) 0%, rgba(3,7,18,0.6) 50%, transparent 100%);
}
.gradient-overlay-full {
    background: linear-gradient(180deg, rgba(3,7,18,0.7) 0%, rgba(3,7,18,0.4) 100%);
}
.img-dim { background-color: rgba(3,7,18,0.4); }

/* --- NAVIGATION --- */
#main-nav {
    transition: transform 0.4s cubic-bezier(0.16,1,0.3,1),
                background-color 0.4s ease,
                backdrop-filter 0.4s ease,
                border-color 0.4s ease;
}
#main-nav.nav-hidden  { transform: translateY(-100%); }
#main-nav.nav-visible {
    transform: translateY(0);
    background-color: rgba(3,7,18,0.9);
    backdrop-filter: blur(16px);
    border-bottom: 1px solid rgba(255,255,255,0.05);
}
#main-nav.nav-top {
    transform: translateY(0);
    background-color: transparent;
    border-bottom: 1px solid transparent;
}

/* --- FULLSCREEN MENU --- */
.menu-item {
    opacity: 0;
    transform: translateY(20px);
    transition: opacity 0.6s ease, transform 0.6s ease;
}
.menu-open .menu-item { opacity: 1; transform: translateY(0); }

.menu-link { transition: color 0.3s ease, padding-left 0.3s ease; }
.menu-link:hover { padding-left: 1rem; color: var(--color-accent); }

/* --- BUTTON: MAGNETIC --- */
.btn-magnetic { position: relative; overflow: hidden; }
.btn-magnetic::after {
    content: '';
    position: absolute;
    bottom: 0; left: 0;
    width: 100%; height: 100%;
    background-color: white;
    transform: translateY(100%);
    transition: transform 0.4s cubic-bezier(0.65,0,0.35,1);
    z-index: -1;
}
.btn-magnetic:hover::after { transform: translateY(0); }
.btn-magnetic:hover { color: black; border-color: white; }

/* --- FLASH ANIMATION (index.html reveal) --- */
@keyframes flashPass {
    0%   { transform: skewX(-20deg) translateX(-150%); opacity: 0; }
    20%  { opacity: 0.6; }
    80%  { opacity: 0.6; }
    100% { transform: skewX(-20deg) translateX(250%); opacity: 0; }
}
.animate-flash-pass {
    animation: flashPass 1.5s cubic-bezier(0.22,1,0.36,1) forwards;
}

/* --- IMAGE INTERACTIONS --- */
.img-hover-scale {
    transition: transform 1.2s cubic-bezier(0.16,1,0.3,1);
}
.group:hover .img-hover-scale { transform: scale(1.08); }

/* --- STICKY CARDS (index.html) --- */
.sticky-card {
    position: sticky;
    top: 0;
    height: 100vh;
    width: 100%;
    overflow: hidden;
    box-shadow: 0 -10px 40px rgba(0,0,0,0.7);
}
.sticky-card.is-active .text-reveal-item {
    opacity: 1;
    transform: translateY(0);
}

/* --- TEXT REVEAL --- */
.text-reveal-item {
    opacity: 0;
    transform: translateY(30px);
    transition: opacity 1s cubic-bezier(0.16,1,0.3,1),
                transform 1s cubic-bezier(0.16,1,0.3,1);
}
.delay-100 { transition-delay: 100ms; }
.delay-200 { transition-delay: 200ms; }
.delay-300 { transition-delay: 300ms; }
.delay-500 { transition-delay: 500ms; }

/* --- FADE IN KEYFRAME --- */
@keyframes fadeIn {
    from { opacity: 0; transform: translateY(20px); }
    to   { opacity: 1; transform: translateY(0); }
}

/* --- MAP FILTER (footer) --- */
.map-container iframe {
    filter: grayscale(100%) invert(90%) hue-rotate(180deg) contrast(85%);
    transition: filter 0.5s ease;
}
.map-container:hover iframe { filter: grayscale(0%) invert(0%); }

/* --- FORM ELEMENTS (connect.html) --- */
input, textarea, select {
    background-color: rgba(255,255,255,0.03);
    border: 1px solid rgba(255,255,255,0.1);
    color: white;
    transition: all 0.3s ease;
}
input:focus, textarea:focus, select:focus {
    outline: none;
    border-color: var(--color-brand);
    background-color: rgba(255,255,255,0.05);
    box-shadow: 0 0 0 1px var(--color-brand);
}
input::placeholder, textarea::placeholder {
    color: rgba(255,255,255,0.3);
}

/* Custom Radio */
.custom-radio:checked + div { border-color: var(--color-brand); background-color: rgba(0,161,162,0.1); }
.custom-radio:checked + div .radio-dot { transform: scale(1); }

/* Custom Checkbox */
.custom-checkbox:checked + div { background-color: var(--color-brand); border-color: var(--color-brand); }
.custom-checkbox:checked + div svg { opacity: 1; transform: scale(1); }

/* --- MEDIA PAGE: PLAY BUTTON PULSE --- */
@keyframes pulse-ring {
    0%   { transform: scale(0.8); box-shadow: 0 0 0 0 rgba(214,183,150,0.7); }
    70%  { transform: scale(1);   box-shadow: 0 0 0 20px rgba(214,183,150,0); }
    100% { transform: scale(0.8); box-shadow: 0 0 0 0 rgba(214,183,150,0); }
}
.play-btn-pulse { animation: pulse-ring 2s infinite; }

/* --- MEDIA PAGE: IMAGE HOVER --- */
.img-hover-scale-sm {
    transition: transform 0.8s cubic-bezier(0.2,1,0.3,1), filter 0.5s ease;
}
.group:hover .img-hover-scale-sm {
    transform: scale(1.05);
    filter: brightness(1.05);
}