@tailwind base;
@tailwind components;
@tailwind utilities;
@plugin "daisyui" {
  themes: all;
  root: ":root";
  logs: true;
}
.contenido_pagina {
  display: grid; 
  grid-auto-columns: 1fr; 
  grid-template-rows: auto 1fr auto; 
  gap: 0px 0px; 
  height: 100vh;
}
.navbar {
    grid-area: 1 / 1 / 2 / 2;
    position: sticky;
    top: 0;
    left: 0;
    z-index: 200;
    /* Este color base tomará el control al llegar a 0 */
    background-color: rgb(4 4 4 / 45%);
    backdrop-filter: blur(26px);
    
    /* 1. Cambiar 'both' por 'forwards' */
    animation: headerBackground linear forwards;
    
    /* 2. Asegurar que lea el scroll principal del documento */
    animation-timeline: scroll(root);
    
    /* 3. Iniciar en 1px en lugar de 0px */
    animation-range: 1px 2px;
    transition: 300ms ease-in-out; 
}

@keyframes headerBackground {
    0% {
        background-color: rgb(4 4 4 / 45%);
    }
    100% {
        background-color: rgb(21 25 29 / 85%);
    }
}
footer {
    grid-area: 3 / 1 / 4 / 2;
    background-color: rgb(21 25 29 / 85%);
}
#contenido {
  grid-area: 2 / 1 / 3 / 2;
}
.hero {
  margin-top: -65px;
  background-size: 4px 4px, cover;
  background-position: 0 0, 50%;
  background-image: radial-gradient(rgba(0, 0, 0, 0.5) 1px, transparent 1px),
   url(https://wallpaperswide.com/download/earth_in_the_future_2-wallpaper-1280x720.jpg);
}
.menumod {
  display: block;
  padding-top: 65px;
}

.reveal {
    animation: reveal linear both;
    animation-timeline: view();
    animation-range-start: entry 20%;
    animation-range-end: entry 80%;
}
@keyframes reveal {
    from {
        opacity: 0;
        transform: translateY(80px) scale(0.8);
        filter: blur(12px)
    }
    to {
        opacity: 1;
        transform: translateY(0) scale(1);
        filter: blur(0)
    }
}