/* Paleta de colores */
:root {
    --matendo-brown: #8e2b2b;
    --matendo-light-brown: #ab4747;
    --matendo-cream: #f6f1e9;
    --matendo-dark-cream: #dcc8a4;
}

/* Estilos generales */
* {
    box-sizing: border-box;
    margin: 0;
    padding: 0;
}

body {
    font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;
    background-color: var(--matendo-cream);
    color: var(--matendo-brown);
    scroll-snap-type: y mandatory;
}

/* Animaciones */
@keyframes fadeIn {
    from {
        opacity: 0;
        transform: translateY(20px);
    }
    to {
        opacity: 1;
        transform: translateY(0);
    }
}

@keyframes slowMove {
  0% {
    transform: translateY(-80%);
  }
  100% {
    transform: translateY(0);
  }
}

@keyframes rotate360 {
  0% {
    transform: rotate(0deg);
  }
  33% {
    transform: rotate(-10deg);
  }
  66% {
    transform: rotate(10deg);
  }
  100% {
    transform: rotate(0deg);
  }
}

.slow-scroll {
    animation: slowMove 1s;
}

.rotate {
    animation: rotate360 30s linear infinite;
}

.fade-in {
    opacity: 0;
    animation: fadeIn 0.6s ease-in-out forwards;
}

.fade-in-delay-1 { animation-delay: 0.4s; }
.fade-in-delay-2 { animation-delay: 0.4s; }
.fade-in-delay-3 { animation-delay: 0.4s; }

/* Estilos adicionales para la pantalla de carga */
.no-scroll {
    overflow: hidden;
}

.loader-container {
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100vh;
    background-color: var(--matendo-cream);
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    z-index: 9999;
    transition: opacity 0.7s ease;
}

.loader-container.hidden {
    opacity: 0;
    pointer-events: none;
}

.loader-logo {
    max-width: 250px;
    margin-bottom: 20px;
}

#typing-text {
    font-family: 'Fira Code', monospace;
    font-size: 2rem;
    color: var(--matendo-brown);
    white-space: nowrap;
    overflow: hidden;
    border-right: .15em solid var(--matendo-brown);
    animation: 
      blink-caret .75s step-end infinite;
}

/* Animación del cursor que parpadea */
@keyframes blink-caret {
  from, to { border-color: transparent }
  50% { border-color: var(--matendo-brown); }
}