/*
Theme Name: Lumina Solaris
Author: Varzam
Version: 1.5
*/

body {
    background-color: #FCFAF8;
    color: #020C09;
    overflow-x: hidden;
}

/* Formas Orgânicas Base */
* {
    border-radius: 40px;
}

header,
section,
div,
img,
footer,
p,
span,
h1,
h2,
h3,
h4,
h5,
h6,
ul,
li {
    border-radius: 0;
}

.pill {
    border-radius: 999px !important;
}

.organic-soft {
    border-radius: 40px !important;
}

@property --angle {
    syntax: '<angle>';
    initial-value: 0deg;
    inherits: false;
}

/* Pulso Tech Ciano Transparente */
.tech-pulse {
    position: relative;
    z-index: 1;
    border-radius: inherit;
}

.tech-pulse::after {
    content: '';
    position: absolute;
    inset: 0;
    border-radius: inherit;
    padding: 2px;
    /* Espessura da linha de brilho */
    /* Gradiente com fade-out (transparente nas pontas e brilhante no meio) */
    background: conic-gradient(from var(--angle, 0deg), transparent 0%, transparent 40%, rgba(0, 255, 128, 1) 50%, transparent 60%, transparent 100%);
    -webkit-mask: linear-gradient(#fff 0 0) content-box, linear-gradient(#fff 0 0);
    -webkit-mask-composite: xor;
    mask-composite: exclude;
    pointer-events: none;
    z-index: 10;
    animation: rotate-pulse-angle 4s linear infinite;
}

.delay-1::after {
    animation-duration: 5.3s;
    animation-direction: reverse;
}

.delay-2::after {
    animation-duration: 3.7s;
}

.delay-3::after {
    animation-duration: 6.1s;
    animation-direction: reverse;
}

@keyframes rotate-pulse-angle {
    to {
        --angle: 360deg;
    }
}



/* Ilustrações Animadas Dismórficas */
.dysmorphic-wrapper {
    width: 100%;
    height: 100%;
    position: relative;
    overflow: hidden;
    z-index: 1;
    box-shadow: inset 0 0 40px rgba(0, 0, 0, 0.05);
}

.dysmorphic-img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    transform: scale(1.1);
    transition: transform 0.5s ease;
}

.group:hover .dysmorphic-img {
    transform: scale(1.15);
}

.morph-a {
    animation: morph-a 14s ease-in-out infinite;
}

.morph-b {
    animation: morph-b 17s ease-in-out infinite alternate;
}

.morph-c {
    animation: morph-c 19s ease-in-out infinite;
}

.morph-d {
    animation: morph-d 23s ease-in-out infinite alternate;
}

@keyframes morph-a {

    0%,
    100% {
        border-radius: 40% 60% 70% 30% / 40% 50% 60% 50%;
    }

    50% {
        border-radius: 70% 30% 50% 50% / 30% 30% 70% 70%;
    }
}

@keyframes morph-b {

    0%,
    100% {
        border-radius: 70% 30% 30% 70% / 60% 40% 60% 40%;
    }

    50% {
        border-radius: 40% 60% 70% 30% / 50% 30% 60% 40%;
    }
}

@keyframes morph-c {

    0%,
    100% {
        border-radius: 30% 70% 50% 50% / 50% 50% 70% 30%;
    }

    50% {
        border-radius: 60% 40% 30% 70% / 40% 60% 50% 50%;
    }
}

@keyframes morph-d {

    0%,
    100% {
        border-radius: 50% 50% 20% 80% / 25% 80% 20% 75%;
    }

    50% {
        border-radius: 80% 20% 50% 50% / 75% 20% 80% 25%;
    }
}

.glass-dark {
    /* Fundo ligeiramente mais translúcido (navy-800 em transição) para não pesar tanto */
    background: linear-gradient(135deg, rgba(7, 26, 20, 0.85) 0%, rgba(2, 12, 9, 0.65) 100%);
    backdrop-filter: blur(24px);
    -webkit-backdrop-filter: blur(24px);
    /* Borda ultra-fina ciano e glow interno sutil para trazer a "luz no escuro" */
    border: 1px solid rgba(0, 255, 128, 0.15);
    box-shadow: inset 0 0 50px rgba(0, 255, 128, 0.05);
}

/* Estilos de Input */
input[type=number]::-webkit-inner-spin-button,
input[type=number]::-webkit-outer-spin-button {
    -webkit-appearance: none;
    margin: 0;
}

input[type=number] {
    -moz-appearance: textfield;
}

.card-hover-fx {
    transition: transform 0.4s ease, box-shadow 0.4s ease;
}

.card-hover-fx:hover {
    transform: translateY(-10px);
    box-shadow: 0 20px 40px rgba(0, 255, 128, 0.1);
}

/* Simulador Flutuante Discreto */
#simulador {
    transition: all 0.5s cubic-bezier(0.4, 0, 0.2, 1);
}

.simulador-appear {
    animation: simulador-pop-in 0.5s cubic-bezier(0.175, 0.885, 0.32, 1.275) !important;
}

@keyframes simulador-pop-in {
    0% {
        opacity: 0;
        transform: translateY(40px) scale(0.9);
    }

    100% {
        opacity: 1;
        transform: translateY(0) scale(1);
    }
}

.simulador-fixed {
    position: fixed !important;
    top: auto !important;
    bottom: 2rem !important;
    right: 2rem !important;
    z-index: 99999 !important;
    transform: none !important;
    transform-origin: bottom right !important;
    box-shadow: 0 25px 50px -12px rgba(0, 255, 128, 0.2) !important;
    opacity: 0.5;
    /* Transparente para não cobrir o site */
    transition: opacity 0.3s ease;
}

.simulador-fixed:hover,
.simulador-fixed.user-opened {
    opacity: 1 !important;
}

@media (max-width: 768px) {
    .simulador-fixed {
        bottom: 1rem !important;
        right: 1rem !important;
        opacity: 0.7 !important;
        /* Transparente para não ocluir visão */
    }

    .simulador-fixed:hover {
        opacity: 1 !important;
    }

    /* Quando minimizado, vira um botão animado */
    .simulador-fixed.is-minimized {
        width: 90px !important;
        height: 90px !important;
        padding: 0 !important;
        display: flex !important;
        align-items: center !important;
        justify-content: center !important;
        transform: none !important;
        /* Adiciona o morph mais rápido para ser bem visível, override do transition-all do tailwind */
        transition-property: opacity, width, height, transform, bottom, right !important;
        animation: morph-a 6s ease-in-out infinite alternate !important;
    }

    /* Forçar que a borda verde acompanhe a deformação dinamicamente */
    .simulador-fixed.is-minimized::after {
        animation: rotate-pulse-angle 4s linear infinite, morph-a 6s ease-in-out infinite alternate !important;
    }

    /* Quando EXPANDIDO no mobile (user-opened) */
    .simulador-fixed:not(.is-minimized) {
        bottom: 50% !important;
        right: 50% !important;
        transform: translate(50%, 50%) !important;
        width: 95% !important;
        opacity: 1 !important;
        box-shadow: 0 0 0 1000px rgba(0, 0, 0, 0.8), 0 25px 50px -12px rgba(0, 255, 128, 0.3) !important;
        border-radius: 40px !important;
        /* Retorna borda fixa */
    }
}

@keyframes logo-contour {

    0%,
    100% {
        filter: drop-shadow(1px 0 0 rgba(0, 255, 128, 0.4)) drop-shadow(-1px 0 0 rgba(0, 255, 128, 0.4)) drop-shadow(0 1px 0 rgba(0, 255, 128, 0.4)) drop-shadow(0 -1px 0 rgba(0, 255, 128, 0.4));
    }

    50% {
        filter: drop-shadow(2px 0 0 rgba(0, 255, 128, 1)) drop-shadow(-2px 0 0 rgba(0, 255, 128, 1)) drop-shadow(0 2px 0 rgba(0, 255, 128, 1)) drop-shadow(0 -2px 0 rgba(0, 255, 128, 1));
    }
}

.animated-logo-contour {
    animation: logo-contour 3s ease-in-out infinite;
}
/* Circular Blob Arrow for Carousel */
.btn-blob-arrow {
    position: relative;
    z-index: 1;
    background-color: rgba(0, 0, 0, 0.85);
    backdrop-filter: blur(12px);
    -webkit-backdrop-filter: blur(12px);
    color: #00FF80; /* neon-400 */
    border: 1px solid rgba(0, 255, 128, 0.3);
    box-shadow: inset 0 0 15px rgba(0, 255, 128, 0.1), 0 0 20px rgba(0, 255, 128, 0.05);
    display: inline-flex;
    align-items: center;
    justify-content: center;
    transition: all 0.4s cubic-bezier(0.175, 0.885, 0.32, 1.275);
    animation: morph-a 5s ease-in-out infinite alternate;
}
.btn-blob-arrow:hover {
    background-color: #00FF80;
    color: rgba(0, 0, 0, 0.85);
    box-shadow: 0 15px 30px #00ff804d, inset 0 0 20px rgba(0, 255, 128, 0.5);
    transform: scale(1.1);
}
.btn-blob-arrow::after {
    content: '';
    position: absolute;
    inset: 0;
    border-radius: inherit;
    padding: 2px;
    background: conic-gradient(from var(--angle, 0deg), transparent 0%, transparent 40%, rgba(0, 255, 128, 1) 50%, transparent 60%, transparent 100%);
    -webkit-mask: linear-gradient(#fff 0 0) content-box, linear-gradient(#fff 0 0);
    -webkit-mask-composite: xor;
    mask-composite: exclude;
    pointer-events: none;
    z-index: 10;
    animation: rotate-pulse-angle 4s linear infinite;
}
.btn-blob-arrow.reverse-spin::after {
    animation-direction: reverse;
}
.btn-blob-arrow.morph-b {
    animation-name: morph-b;
}

/* Fix para remover o fundo branco feio do Autofill do Google Chrome e dar destaque visual da automação */
input:-webkit-autofill,
input:-webkit-autofill:hover, 
input:-webkit-autofill:focus, 
input:-webkit-autofill:active{
    transition: background-color 5000s ease-in-out 0s !important;
    -webkit-text-fill-color: #00ff80 !important;
    border-color: rgba(0, 255, 128, 0.5) !important;
}