/*
    Bot Trace Panel
    IAmBot — Landing Page

    Diseño inspirado en la maqueta original basada en
    "Eventually" de HTML5 UP.

    La portada utiliza:
    - Fondo fotográfico narrativo
    - Movimiento muy lento
    - Transiciones suaves
    - Contenido minimalista
*/

@import url('https://fonts.googleapis.com/css2?family=Outfit:wght@600;700&display=swap');


/* =========================================================
   RESET BÁSICO
   ========================================================= */

   * {
    box-sizing: border-box;
}

html,
body {
    width: 100%;
    min-height: 100%;
    margin: 0;
    padding: 0;
}

html {
    font-size: 16px;
}

body {
    min-height: 100vh;
    overflow-x: hidden;

    background: #000;

    color: rgba(255, 255, 255, 0.82);

    font-family:
        -apple-system,
        BlinkMacSystemFont,
        "Segoe UI",
        Roboto,
        Helvetica,
        Arial,
        sans-serif;

    line-height: 1.6;
}


/* =========================================================
   FONDO
   ========================================================= */

/*
    El fondo ocupa toda la pantalla.

    main.js creará dentro de #background
    una capa por cada imagen.

    El contenido permanece por encima.
*/

#background {
    position: fixed;
    inset: 0;

    width: 100%;
    height: 100%;

    overflow: hidden;

    background: #000;

    z-index: 0;

    opacity: 1;
}


/*
    Capa oscura sobre las imágenes.

    Su función no es ocultarlas sino permitir que el texto
    permanezca legible.

    La imagen sigue siendo visible.
*/

#background::after {
    content: "";

    position: absolute;
    inset: 0;

    background:
        rgba(8, 35, 58, 0.76);

    z-index: 10;

    pointer-events: none;
}


/* =========================================================
   CONTENIDO PRINCIPAL
   ========================================================= */

#landing-page {

    position: relative;

    z-index: 20;

    width: min(680px, calc(100% - 40px));

    min-height: 100vh;

    margin: 0 auto;

    display: flex;

    flex-direction: column;

    justify-content: center;

    align-items: center;

    text-align: center;

    padding: 60px 0 130px;
}


/* =========================================================
   IDENTIDAD
   ========================================================= */

#hero {
    margin: 0;
    padding: 0;
}


/*
    Nombre IAmBot
*/

.brand {

    display: flex;

    align-items: center;
    justify-content: center;

    margin: 0;

    color: #fff;

    font-size: clamp(2.8rem, 7vw, 4.2rem);

    line-height: 1;

    font-weight: 700;

    letter-spacing: 0.02em;

    text-shadow:
        0 2px 15px rgba(0, 0, 0, 0.45);
}


.brand-name {
    font-family: 'Outfit', sans-serif;
    font-weight: 700;
    letter-spacing: 0.5px;
}



/*
    Pequeña imagen de IAmBot junto al nombre.
*/

.brand-character {

    height: 1.50em;
    width: auto;

    margin-left: -0.78em;
    margin-bottom: 0.04em;

    object-fit: contain;

    filter:
        drop-shadow(0 3px 8px rgba(0, 0, 0, 0.45));
}

/*
    Ajuste fino de centrado de la identidad.
*/

.brand {
    transform: translateX(0.40em);
}

/*
    Bajada debajo del nombre.
*/

.tagline {

    margin: 0.7rem 0 0;

    color: rgba(255, 255, 255, 0.82);

    font-size: clamp(1rem, 2.5vw, 1.25rem);

    line-height: 1.5;

    font-weight: 400;

    text-shadow:
        0 2px 10px rgba(0, 0, 0, 0.65);
}


/* =========================================================
   OPERATIONS — LIVE
   ========================================================= */

#live-section {

    margin-top: 2.5rem;
}


/*
    El enlace no parece un botón convencional.

    Queremos conservar la sensación discreta de la maqueta.
*/

.live-link {

    display: inline-block;

    color: #fff;

    font-size: clamp(1.1rem, 3vw, 1.35rem);

    font-weight: 700;

    letter-spacing: 0.02em;

    text-decoration: none;

    padding-bottom: 0.18rem;

    border-bottom:
        1px solid rgba(255, 255, 255, 0.35);

    transition:
        color 0.25s ease,
        border-color 0.25s ease,
        text-shadow 0.25s ease;
}


.live-link:hover {

    color: #4da3ff;

    border-bottom-color: #4da3ff;

    text-shadow:
        0 0 12px rgba(77, 163, 255, 0.35);
}


/* =========================================================
   MISIÓN / FILOSOFÍA
   ========================================================= */

#mission {

    max-width: 560px;

    margin-top: 2.4rem;

    color: rgba(255, 255, 255, 0.78);

    font-size: 0.95rem;

    line-height: 1.65;

    text-shadow:
        0 2px 10px rgba(0, 0, 0, 0.65);
}


#mission p {
    margin: 0;
}


#mission p:first-child {
    margin-bottom: 0.35rem;
}


#mission strong {
    color: #fff;
    font-weight: 700;
}


/* =========================================================
   AVISO
   ========================================================= */

#disclaimer {

    max-width: 650px;

    margin-top: 2.2rem;

    color: rgba(255, 255, 255, 0.68);

    font-size: 0.76rem;

    line-height: 1.5;

    text-shadow:
        0 2px 8px rgba(0, 0, 0, 0.7);
}


#disclaimer p {
    margin: 0;
}


#disclaimer strong {
    color: rgba(255, 255, 255, 0.9);
}


#disclaimer u {
    color: rgba(255, 255, 255, 0.92);
}


/* =========================================================
   FOOTER
   ========================================================= */

#footer {

    position: fixed;

    left: 0;
    right: 0;
    bottom: 25px;

    z-index: 30;

    text-align: center;

    color: rgba(255, 255, 255, 0.45);

    font-size: 0.72rem;

    line-height: 1.5;

    text-shadow:
        0 2px 8px rgba(0, 0, 0, 0.7);
}


/*
    Redes
*/

.social-links {

    display: flex;

    justify-content: center;

    align-items: center;

    gap: 1.3rem;

    margin-bottom: 0.45rem;
}


.social-links a {

    color: inherit;

    text-decoration: none;

    border-bottom:
        1px solid transparent;

    transition:
        color 0.2s ease,
        border-color 0.2s ease;
}


.social-links a:hover {

    color: #4da3ff;

    border-bottom-color: #4da3ff;
}


/*
    Copyright
*/

.copyright {

    margin: 0;

    opacity: 0.8;
}


/* =========================================================
   RESPONSIVE — TABLETS
   ========================================================= */

@media screen and (max-width: 768px) {

    #landing-page {

        width: min(620px, calc(100% - 36px));

        padding-top: 50px;
        padding-bottom: 120px;
    }


    #live-section {
        margin-top: 2.2rem;
    }


    #mission {
        margin-top: 2.1rem;
    }


    #disclaimer {
        margin-top: 2rem;
    }
}


/* =========================================================
   RESPONSIVE — MÓVILES
   ========================================================= */

@media screen and (max-width: 480px) {

    #landing-page {

        width: calc(100% - 30px);

        padding-top: 40px;
        padding-bottom: 125px;
    }


    .brand {

        font-size: 2.7rem;
    }


    .brand-character {

        height: 1.05em;
    }


    .tagline {

        margin-top: 0.6rem;

        font-size: 0.98rem;
    }


    #live-section {

        margin-top: 2rem;
    }


    .live-link {

        font-size: 1.1rem;
    }


    #mission {

        margin-top: 1.9rem;

        font-size: 0.9rem;

        max-width: 330px;
    }


    #disclaimer {

        max-width: 340px;

        margin-top: 1.8rem;

        font-size: 0.7rem;
    }


    #footer {

        bottom: 15px;

        font-size: 0.68rem;
    }


    .social-links {

        gap: 1rem;
    }
}


/* =========================================================
   PANTALLAS MUY BAJAS
   ========================================================= */

@media screen and (max-height: 650px) {

    #landing-page {

        justify-content: flex-start;

        padding-top: 45px;
    }


    #footer {

        position: relative;

        margin-top: -100px;

        bottom: auto;
    }
}

/* =========================================================
   FONDO NARRATIVO — CAPAS DE IMAGEN
   ========================================================= */

   .background-layer {

    position: absolute;

    top: 0;
    left: 0;

    width: 150%;
    height: 100%;

    background-repeat: no-repeat;
    background-size: cover;
    background-position: center;

    opacity: 0;

    visibility: hidden;

    transform: translateX(0);

    transition:
        opacity 4s ease-in-out;

    will-change:
        transform,
        opacity;

}


/*
    Imagen actualmente visible.
*/

.background-layer.visible {

    opacity: 1;

    visibility: visible;

    animation:
        iambot-background-move 45s linear infinite;

}


/*
    Movimiento extremadamente lento.

    No queremos que el usuario perciba
    "una animación".

    Queremos que perciba que la imagen
    lentamente se está desplazando.
*/

@keyframes iambot-background-move {

    from {
        transform: translateX(0);
    }

    to {
        transform: translateX(-25%);
    }

}


/* =========================================================
   REDUCCIÓN DE MOVIMIENTO
   ========================================================= */

/*
    Si el usuario tiene activada en su sistema
    la opción "reducir movimiento", respetamos
    esa preferencia.
*/

@media (prefers-reduced-motion: reduce) {

    .background-layer.visible {

        animation: none;

    }

}