/* ==========================================
   PROJETO GETSÊMANI - CUSTOM STYLES
   ========================================== */

/* Reset e Base */
* {
    margin: 0;
    padding: 0;
    box-sizing: border-box;
}

html {
    scroll-behavior: smooth;
}

body {
    overflow-x: hidden;
}

/*-----*/

/*-----*/

/* Typography */
.font-display {
    font-family: 'Bebas Neue', cursive;
}

.font-body {
    font-family: 'Raleway', sans-serif;
}

.font-accent {
    font-family: 'Archivo Black', sans-serif;
}

/* Header Scroll Effect */
#header {
    background: rgba(10, 10, 10, 0);
    transition: all 0.3s ease;
}

#header.scrolled {
    background: rgba(10, 10, 10, 0.95);
    backdrop-filter: blur(10px);
    box-shadow: 0 4px 20px rgba(0, 0, 0, 0.5);
}

/* Buttons */
.btn-primary {
    @apply bg-gradient-to-r from-blood-red to-rust-orange text-white font-accent text-sm px-8 py-4 rounded-full uppercase tracking-wider transition-all duration-300 transform hover:scale-105 hover:shadow-2xl inline-flex items-center justify-center;
}

.btn-secondary {
    @apply bg-transparent border-2 border-spray-green text-spray-green hover:bg-spray-green hover:text-concrete-black font-accent text-sm px-8 py-4 rounded-full uppercase tracking-wider transition-all duration-300 inline-flex items-center justify-center;
}

.btn-circuito {
    background: #A855F7;
    box-shadow: 0 0 18px rgba(168, 85, 247, .45), 0 0 34px rgba(168, 85, 247, .18);
}

.btn-circuito:hover {
    background: #FF6B35;
    box-shadow: 0 0 18px rgba(255, 107, 53, .45), 0 0 34px rgba(255, 107, 53, .18);
}



/* HERO: duo logos com ícone no meio */
.hero-logos {
    display: flex;
    gap: 14px;
    align-items: center;
    justify-content: center;
    flex-wrap: wrap;
}

.hero-logo {
    width: 128px;
    height: 128px;
    border-radius: 999px;
    display: flex;
    align-items: center;
    justify-content: center;
    overflow: hidden;
    box-shadow: 0 18px 40px rgba(0, 0, 0, .55);
}

.hero-logo img {
    width: 88%;
    height: 88%;
    object-fit: contain;
    opacity: .98;
}

/* Getsêmani: mantém o fundo original (vermelhos escuros) + ring */
.hero-logo--getsemani {
    background: linear-gradient(135deg, #450a0a, #3f0b0b, #1f0a0a);
    border: 1px solid rgba(255, 255, 255, .10);
}

.hero-logo--getsemani img {
    filter: drop-shadow(0 0 10px rgba(0, 0, 0, .55));
}

/* Circuito: fundo preto/grunge leve pra não brigar com a arte */
.hero-logo--circuito {
    background: radial-gradient(circle at 30% 30%,
            rgba(255, 255, 255, .06),
            rgba(0, 0, 0, .92) 55%,
            rgba(0, 0, 0, 1) 100%);
    border: 1px solid rgba(255, 255, 255, .10);
}

.hero-logo--circuito img {
    filter: drop-shadow(0 0 10px rgba(0, 0, 0, .65));
}

/* Ícone central (neon discreto) */
.hero-logos__icon {
    width: 44px;
    height: 44px;
    border-radius: 999px;

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

    background: rgba(0, 0, 0, .55);
    border: 1px solid rgba(255, 255, 255, .10);

    color: #A855F7;
    /* roxo neon */
    box-shadow:
        0 0 14px rgba(168, 85, 247, .35),
        0 0 26px rgba(168, 85, 247, .18);
}

/* Hover só na logo clicável */
.hero-logo--link {
    cursor: pointer;
    transition: transform .2s ease, filter .2s ease, box-shadow .2s ease;
}

.hero-logo--link:hover {
    transform: translateY(-1px) scale(1.03);
    filter: brightness(1.04);
    box-shadow:
        0 18px 40px rgba(0, 0, 0, .55),
        0 0 26px rgba(255, 107, 53, .12);
}

/* Mobile */
@media (max-width: 640px) {
    .hero-logo {
        width: 110px;
        height: 110px;
    }

    .hero-logos__icon {
        width: 38px;
        height: 38px;
    }
}

.btn-support {
    @apply bg-steel-gray hover:bg-spray-green text-concrete-black font-bold text-xs px-6 py-2 rounded-full uppercase tracking-wide transition-all duration-300 transform hover:scale-105 inline-block text-center;
}

/* Stats Cards */
.stat-card {
    @apply bg-gradient-to-br from-gray-900 to-gray-800 border border-steel-gray rounded-2xl p-8 text-center transition-all duration-300 hover:border-spray-green hover:shadow-xl hover:shadow-spray-green/20 transform hover:-translate-y-2;
}

/* Feature Cards */
.feature-card {
    @apply bg-gradient-to-br from-gray-900 to-gray-800 border border-steel-gray rounded-2xl p-8 transition-all duration-300 hover:border-blood-red hover:shadow-xl hover:shadow-blood-red/20 transform hover:-translate-y-2;
}

.feature-icon {
    @apply w-16 h-16 bg-blood-red rounded-xl flex items-center justify-center mb-6 transition-all duration-300 group-hover:scale-110;
}

.feature-card:hover .feature-icon {
    @apply bg-spray-green;
}

/* Support Cards */
.support-card {
    @apply bg-gradient-to-br from-gray-900 to-gray-800 border border-steel-gray rounded-2xl p-8 text-center transition-all duration-300 hover:border-spray-green hover:shadow-xl hover:shadow-spray-green/20;
}

/* Social Icons */
.social-icon {
    @apply w-12 h-12 bg-steel-gray hover:bg-spray-green text-concrete-black rounded-full flex items-center justify-center transition-all duration-300 transform hover:scale-110;
}

/* Filter Buttons (Transparency Modal) */
.filter-btn {
    @apply px-6 py-2 bg-gray-800 border border-steel-gray text-chalk-white rounded-full text-sm font-semibold uppercase tracking-wide transition-all duration-300 hover:border-spray-green hover:text-spray-green;
}

.filter-btn.active {
    @apply bg-spray-green text-concrete-black border-spray-green;
}

/* Document Cards */
.document-card {
    @apply bg-gradient-to-br from-gray-900 to-gray-800 border border-steel-gray rounded-2xl p-6 transition-all duration-300 hover:border-blood-red hover:shadow-xl hover:shadow-blood-red/20 transform hover:-translate-y-1;
}

.document-icon {
    @apply w-12 h-12 bg-blood-red rounded-lg flex items-center justify-center mb-4;
}

.document-category {
    @apply inline-block px-3 py-1 bg-spray-green text-concrete-black text-xs font-bold rounded-full uppercase tracking-wide mb-2;
}

.document-title {
    @apply text-lg font-display mb-2 line-clamp-2;
}

.document-meta {
    @apply text-sm text-steel-gray mb-4;
}

.download-btn {
    @apply w-full bg-steel-gray hover:bg-spray-green text-concrete-black font-bold text-sm px-4 py-3 rounded-lg uppercase tracking-wide transition-all duration-300 flex items-center justify-center space-x-2;
}

/* Transparency Modal Animations */
#transparency-modal {
    animation: fadeIn 0.3s ease-in-out;
}

@keyframes fadeIn {
    from {
        opacity: 0;
    }

    to {
        opacity: 1;
    }
}

#transparency-modal>div:nth-child(2) {
    animation: slideDown 0.4s ease-out;
}

@keyframes slideDown {
    from {
        transform: translateY(-50px);
        opacity: 0;
    }

    to {
        transform: translateY(0);
        opacity: 1;
    }
}

/* Form Styles */
input:focus,
textarea:focus {
    box-shadow: 0 0 0 3px rgba(0, 255, 65, 0.2);
}

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

::-webkit-scrollbar-track {
    background: #0a0a0a;
}

::-webkit-scrollbar-thumb {
    background: #808080;
    border-radius: 6px;
}

::-webkit-scrollbar-thumb:hover {
    background: #00FF41;
}

/* Loading Animation */
.loading {
    display: inline-block;
    width: 20px;
    height: 20px;
    border: 3px solid rgba(255, 255, 255, 0.3);
    border-radius: 50%;
    border-top-color: #00FF41;
    animation: spin 1s ease-in-out infinite;
}

@keyframes spin {
    to {
        transform: rotate(360deg);
    }
}

/* Success Message */
.success-message {
    @apply fixed top-24 right-6 bg-spray-green text-concrete-black px-6 py-4 rounded-lg shadow-2xl font-bold z-50;
    animation: slideInRight 0.3s ease-out;
}

@keyframes slideInRight {
    from {
        transform: translateX(400px);
        opacity: 0;
    }

    to {
        transform: translateX(0);
        opacity: 1;
    }
}

/* Error Message */
.error-message {
    @apply fixed top-24 right-6 bg-blood-red text-white px-6 py-4 rounded-lg shadow-2xl font-bold z-50;
    animation: slideInRight 0.3s ease-out;
}

/* Mobile Menu Animation */
#mobile-menu {
    animation: slideDown 0.3s ease-out;
}

/* Texture Overlay (opcional para adicionar grunge) */
.texture-overlay {
    position: relative;
}

.texture-overlay::before {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    background-image: url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 200 200"><filter id="noise"><feTurbulence type="fractalNoise" baseFrequency="0.9" numOctaves="4" stitchTiles="stitch"/></filter><rect width="100%" height="100%" filter="url(%23noise)" opacity="0.05"/></svg>');
    pointer-events: none;
    opacity: 0.5;
}

/* Hover Effects para Links */
a {
    transition: all 0.3s ease;
}

/* Line Clamp Utility */
.line-clamp-2 {
    display: -webkit-box;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
    overflow: hidden;
}

/* Responsive adjustments */
@media (max-width: 768px) {
    .text-6xl {
        font-size: 3rem;
    }

    .text-8xl {
        font-size: 4rem;
    }
}

/* Print Styles */
@media print {

    #transparency-btn,
    #header,
    #mobile-menu-btn {
        display: none;
    }
}