/* assets/css/introstyle.css */

/* --- CONTENEDOR PRINCIPAL DEL LOGO --- */
.logo-container {
    position: relative;
    width: 80%;
    max-width: 800px;
    aspect-ratio: 1 / 1;
    border-radius: 50%;
    overflow: hidden;
    
    /* Estado inicial (Intro) */
    background-color: #fff; 
    box-shadow: 0 10px 40px rgba(0,0,0,0.1);
    
    /* Transición suave para cuando se convierta en fondo */
    transition: all 1.5s ease-in-out;
}

/* --- ESTILOS DE LAS CAPAS DE IMAGEN --- */
.logo-layer {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    object-fit: contain; 
}

/* --- CAPA 1: BOCETO --- */
.layer-sketch {
    z-index: 1;
    filter: grayscale(100%) contrast(50%) brightness(150%) opacity(0.5);
    transition: opacity 1s; /* Para poder ocultarla suavemente después */
}

/* --- CAPA 2: COLOR --- */
.layer-color {
    z-index: 2;
    animation-name: fillUpColor;
    animation-duration: 5s; 
    animation-timing-function: ease-in-out; 
    animation-fill-mode: forwards; 
}

/* --- ANIMACIÓN DE LLENADO --- */
@keyframes fillUpColor {
    from { clip-path: inset(100% 0 0 0); }
    to { clip-path: inset(0% 0 0 0); }
}

/* ========================================================= */
/* NUEVO: ESTILOS PARA EL MODO "MARCA DE AGUA" (FONDO)      */
/* ========================================================= */

/* Cuando el contenedor padre tiene la clase .watermark-mode... */

/* 1. Quitamos el fondo blanco y la sombra del círculo para que no se vea un cuadro feo atrás */
.watermark-mode .logo-container {
    background-color: transparent;
    box-shadow: none;
    /* Opcional: Si quieres que el logo se haga un poco más grande o pequeño al irse al fondo */
    /* transform: scale(1.1); */ 
}

/* 2. Ocultamos el boceto para dejar solo el logo a color (o puedes dejarlo si prefieres) */
.watermark-mode .layer-sketch {
    opacity: 0; 
}

/* 3. Ajustamos la imagen principal para que sea transparente */
.watermark-mode .layer-color {
    /* AQUÍ AJUSTAS LA TRANSPARENCIA DEL FONDO */
    /* 0.1 es muy transparente, 0.5 es medio, 1 es sólido */
    opacity: 0.15; 
    
    /* Opcional: Si quieres que se vea en blanco y negro en el fondo, descomenta esto: */
    /* filter: grayscale(100%); */
}