/* SAS BioKink - Temas e Estilos */

/* ==========================================
   GRADIENTES PRÉ-DEFINIDOS
   ========================================== */
.bg-gradient-sunset { background: linear-gradient(135deg, #f093fb 0%, #f5576c 100%); }
.bg-gradient-ocean { background: linear-gradient(135deg, #667eea 0%, #764ba2 100%); }
.bg-gradient-forest { background: linear-gradient(135deg, #11998e 0%, #38ef7d 100%); }
.bg-gradient-fire { background: linear-gradient(135deg, #f12711 0%, #f5af19 100%); }
.bg-gradient-purple { background: linear-gradient(135deg, #7f00ff 0%, #e100ff 100%); }
.bg-gradient-night { background: linear-gradient(135deg, #0f0c29 0%, #302b63 50%, #24243e 100%); }
.bg-gradient-candy { background: linear-gradient(135deg, #ff9a9e 0%, #fecfef 50%, #fecfef 100%); }
.bg-gradient-sky { background: linear-gradient(135deg, #a1c4fd 0%, #c2e9fb 100%); }
.bg-gradient-mint { background: linear-gradient(135deg, #84fab0 0%, #8fd3f4 100%); }
.bg-gradient-peach { background: linear-gradient(135deg, #ffecd2 0%, #fcb69f 100%); }
.bg-gradient-rose { background: linear-gradient(135deg, #f6d365 0%, #fda085 100%); }
.bg-gradient-cosmic { background: linear-gradient(135deg, #ff00cc 0%, #333399 100%); }
.bg-gradient-neon { background: linear-gradient(135deg, #00f260 0%, #0575e6 100%); }
.bg-gradient-warm { background: linear-gradient(135deg, #ee9ca7 0%, #ffdde1 100%); }
.bg-gradient-cool { background: linear-gradient(135deg, #2193b0 0%, #6dd5ed 100%); }
.bg-gradient-dark { background: linear-gradient(135deg, #232526 0%, #414345 100%); }
.bg-gradient-instagram { background: linear-gradient(45deg, #f09433 0%, #e6683c 25%, #dc2743 50%, #cc2366 75%, #bc1888 100%); }
.bg-gradient-tiktok { background: linear-gradient(135deg, #00f2ea 0%, #ff0050 100%); }

/* ==========================================
   ESTILOS DE BOTÕES
   ========================================== */
/* Sólido */
.btn-style-solid {
    background-color: var(--btn-bg);
    color: var(--btn-text);
    border: none;
}

/* Outline */
.btn-style-outline {
    background-color: transparent;
    color: var(--btn-bg);
    border: 2px solid var(--btn-bg);
}

/* Soft/Light */
.btn-style-soft {
    background-color: color-mix(in srgb, var(--btn-bg) 15%, transparent);
    color: var(--btn-bg);
    border: none;
}

/* Glass/Glassmorphism */
.btn-style-glass {
    background: rgba(255, 255, 255, 0.1);
    backdrop-filter: blur(10px);
    border: 1px solid rgba(255, 255, 255, 0.2);
    color: var(--btn-text);
}

/* Gradient */
.btn-style-gradient {
    background: linear-gradient(135deg, var(--btn-bg) 0%, var(--btn-bg-secondary, var(--btn-bg)) 100%);
    color: var(--btn-text);
    border: none;
}

/* Shadow */
.btn-style-shadow {
    background-color: var(--btn-bg);
    color: var(--btn-text);
    border: none;
    box-shadow: 0 4px 15px rgba(0, 0, 0, 0.2);
}

/* 3D */
.btn-style-3d {
    background-color: var(--btn-bg);
    color: var(--btn-text);
    border: none;
    box-shadow: 0 4px 0 color-mix(in srgb, var(--btn-bg) 70%, black);
    transform: translateY(-2px);
}
.btn-style-3d:active {
    transform: translateY(2px);
    box-shadow: 0 0 0 color-mix(in srgb, var(--btn-bg) 70%, black);
}

/* ==========================================
   FORMATOS DE BOTÕES
   ========================================== */
.btn-shape-square { border-radius: 0; }
.btn-shape-rounded { border-radius: 8px; }
.btn-shape-rounded-lg { border-radius: 12px; }
.btn-shape-rounded-xl { border-radius: 16px; }
.btn-shape-pill { border-radius: 9999px; }
.btn-shape-leaf { border-radius: 20px 4px 20px 4px; }

/* ==========================================
   EFEITOS DE HOVER
   ========================================== */
.btn-effect-none { transition: all 0.2s ease; }

.btn-effect-lift {
    transition: all 0.2s ease;
}
.btn-effect-lift:hover {
    transform: translateY(-3px);
    box-shadow: 0 8px 20px rgba(0, 0, 0, 0.15);
}

.btn-effect-scale {
    transition: all 0.2s ease;
}
.btn-effect-scale:hover {
    transform: scale(1.05);
}

.btn-effect-glow {
    transition: all 0.2s ease;
}
.btn-effect-glow:hover {
    box-shadow: 0 0 20px var(--btn-bg);
}

.btn-effect-shine {
    position: relative;
    overflow: hidden;
    transition: all 0.2s ease;
}
.btn-effect-shine::before {
    content: '';
    position: absolute;
    top: 0;
    left: -100%;
    width: 100%;
    height: 100%;
    background: linear-gradient(90deg, transparent, rgba(255,255,255,0.3), transparent);
    transition: left 0.5s ease;
}
.btn-effect-shine:hover::before {
    left: 100%;
}

.btn-effect-pulse {
    animation: pulse 2s infinite;
}
@keyframes pulse {
    0%, 100% { transform: scale(1); }
    50% { transform: scale(1.02); }
}

.btn-effect-shake:hover {
    animation: shake 0.5s ease-in-out;
}
@keyframes shake {
    0%, 100% { transform: translateX(0); }
    25% { transform: translateX(-5px); }
    75% { transform: translateX(5px); }
}

.btn-effect-bounce:hover {
    animation: bounce 0.5s ease;
}
@keyframes bounce {
    0%, 100% { transform: translateY(0); }
    50% { transform: translateY(-10px); }
}

/* ==========================================
   FONTES DISPONÍVEIS
   ========================================== */
.font-inter { font-family: 'Inter', sans-serif; }
.font-poppins { font-family: 'Poppins', sans-serif; }
.font-roboto { font-family: 'Roboto', sans-serif; }
.font-montserrat { font-family: 'Montserrat', sans-serif; }
.font-open-sans { font-family: 'Open Sans', sans-serif; }
.font-lato { font-family: 'Lato', sans-serif; }
.font-nunito { font-family: 'Nunito', sans-serif; }
.font-playfair { font-family: 'Playfair Display', serif; }
.font-merriweather { font-family: 'Merriweather', serif; }
.font-raleway { font-family: 'Raleway', sans-serif; }
.font-oswald { font-family: 'Oswald', sans-serif; }
.font-dancing { font-family: 'Dancing Script', cursive; }
.font-pacifico { font-family: 'Pacifico', cursive; }
.font-bebas { font-family: 'Bebas Neue', sans-serif; }
.font-quicksand { font-family: 'Quicksand', sans-serif; }

/* ==========================================
   BACKGROUNDS ANIMADOS
   ========================================== */
.bg-animate-gradient {
    background-size: 200% 200%;
    animation: gradientMove 5s ease infinite;
}
@keyframes gradientMove {
    0% { background-position: 0% 50%; }
    50% { background-position: 100% 50%; }
    100% { background-position: 0% 50%; }
}

.bg-animate-pulse {
    animation: bgPulse 3s ease-in-out infinite;
}
@keyframes bgPulse {
    0%, 100% { opacity: 1; }
    50% { opacity: 0.8; }
}

/* Video background container */
.bg-video-container {
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    z-index: -1;
    overflow: hidden;
}
.bg-video-container video,
.bg-video-container img {
    width: 100%;
    height: 100%;
    object-fit: cover;
}
.bg-overlay {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background: rgba(0, 0, 0, 0.5);
}

/* ==========================================
   ESTILOS DE CARDS/BLOCOS
   ========================================== */
.block-style-flat {
    background: var(--block-bg, #ffffff);
    border: none;
}

.block-style-bordered {
    background: var(--block-bg, #ffffff);
    border: 1px solid var(--block-border, #e5e7eb);
}

.block-style-shadow {
    background: var(--block-bg, #ffffff);
    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.1);
}

.block-style-glass {
    background: rgba(255, 255, 255, 0.1);
    backdrop-filter: blur(10px);
    border: 1px solid rgba(255, 255, 255, 0.2);
}

.block-style-gradient {
    background: linear-gradient(135deg, var(--block-bg) 0%, var(--block-bg-secondary, var(--block-bg)) 100%);
}

/* ==========================================
   FORMATOS DE THUMB/AVATAR
   ========================================== */
.thumb-square { border-radius: 0; }
.thumb-rounded { border-radius: 12px; }
.thumb-rounded-lg { border-radius: 20px; }
.thumb-circle { border-radius: 50%; }
.thumb-hexagon { clip-path: polygon(50% 0%, 100% 25%, 100% 75%, 50% 100%, 0% 75%, 0% 25%); }
.thumb-diamond { clip-path: polygon(50% 0%, 100% 50%, 50% 100%, 0% 50%); }

/* Avatar styles (alias for thumb) */
.avatar-square { border-radius: 0; }
.avatar-rounded { border-radius: 12px; }
.avatar-rounded-lg { border-radius: 20px; }
.avatar-circle { border-radius: 50%; }

/* Border styles for thumb */
.thumb-border-none { border: none; }
.thumb-border-thin { border: 2px solid var(--theme-color); }
.thumb-border-thick { border: 4px solid var(--theme-color); }
.thumb-border-double { border: 4px double var(--theme-color); }
.thumb-border-gradient {
    border: 4px solid transparent;
    background: linear-gradient(white, white) padding-box,
                linear-gradient(135deg, var(--theme-color), var(--theme-secondary)) border-box;
}

/* Border styles for avatar */
.avatar-border-none { border: none; }
.avatar-border-thin { border: 2px solid var(--theme-color); }
.avatar-border-thick { border: 4px solid var(--theme-color); }
.avatar-border-gradient {
    border: 4px solid transparent;
    background: linear-gradient(white, white) padding-box,
                linear-gradient(135deg, var(--theme-color), #a855f7) border-box;
}

/* ==========================================
   ANIMAÇÕES DE ENTRADA
   ========================================== */
.animate-fade-in {
    animation: fadeIn 0.5s ease forwards;
}
@keyframes fadeIn {
    from { opacity: 0; }
    to { opacity: 1; }
}

.animate-slide-up {
    animation: slideUp 0.5s ease forwards;
}
@keyframes slideUp {
    from { opacity: 0; transform: translateY(20px); }
    to { opacity: 1; transform: translateY(0); }
}

.animate-slide-down {
    animation: slideDown 0.5s ease forwards;
}
@keyframes slideDown {
    from { opacity: 0; transform: translateY(-20px); }
    to { opacity: 1; transform: translateY(0); }
}

.animate-scale-in {
    animation: scaleIn 0.5s ease forwards;
}
@keyframes scaleIn {
    from { opacity: 0; transform: scale(0.9); }
    to { opacity: 1; transform: scale(1); }
}

.animate-blur-in {
    animation: blurIn 0.5s ease forwards;
}
@keyframes blurIn {
    from { opacity: 0; filter: blur(10px); }
    to { opacity: 1; filter: blur(0); }
}

/* Delay classes */
.delay-100 { animation-delay: 0.1s; }
.delay-200 { animation-delay: 0.2s; }
.delay-300 { animation-delay: 0.3s; }
.delay-400 { animation-delay: 0.4s; }
.delay-500 { animation-delay: 0.5s; }

/* ==========================================
   SOCIAL ICONS COLORS
   ========================================== */
.icon-whatsapp { color: #25D366; }
.icon-instagram { color: #E4405F; }
.icon-facebook { color: #1877F2; }
.icon-twitter { color: #1DA1F2; }
.icon-tiktok { color: #000000; }
.icon-youtube { color: #FF0000; }
.icon-linkedin { color: #0A66C2; }
.icon-telegram { color: #0088cc; }
.icon-pinterest { color: #BD081C; }
.icon-snapchat { color: #FFFC00; }
.icon-discord { color: #5865F2; }
.icon-twitch { color: #9146FF; }
.icon-spotify { color: #1DB954; }
.icon-github { color: #181717; }
.icon-email { color: #EA4335; }
.icon-phone { color: #34B7F1; }
.icon-website { color: #4285F4; }
.icon-location { color: #FF6B6B; }