/* Intro de marca del inicio. Las reglas de base (display, posicion, fondo) estan en linea en
 * publico/plantillas/intro_cabecera.inc.php para que apliquen antes del primer pintado.
 * Duraciones: ajusta las variables de abajo (y los 950 / 850 ms de js/adn-intro.js si cambias la espera). */
#adn-intro{
    --adn-intro-rojo: #d72638;
    --adn-intro-curva: cubic-bezier(.76, 0, .24, 1);
}
#adn-intro .adn-intro__arriba{
    display: flex;
    align-items: flex-end;
    justify-content: center;
    padding-bottom: 22px;
    transition: transform .7s var(--adn-intro-curva) .15s;
}
#adn-intro .adn-intro__abajo{
    transition: transform .7s var(--adn-intro-curva) .15s;
}
#adn-intro .adn-intro__logo{
    width: min(62vw, 420px);
    height: auto;
    overflow: visible;
    animation: adn-intro-logo .55s ease-out .1s both;
    transition: opacity .25s ease, translate .25s ease;
}
#adn-intro .adn-intro__adn{
    animation: adn-intro-adn .4s ease-out .4s both;
}
#adn-intro .adn-intro__linea{
    position: absolute;
    left: 0;
    right: 0;
    top: 50%;
    height: 2px;
    margin-top: -1px;
    background: var(--adn-intro-rojo);
    border-radius: 1px;
    transform-origin: center;
    animation: adn-intro-linea .45s ease-out .35s both;
    transition: opacity .3s ease;
}
/* salida: el logo se desvanece y la linea roja se abre como una costura */
#adn-intro.is-out .adn-intro__logo{ opacity: 0; translate: 0 -8px; }
#adn-intro.is-out .adn-intro__linea{ opacity: 0; }
#adn-intro.is-out .adn-intro__arriba{ transform: translateY(-101%); }
#adn-intro.is-out .adn-intro__abajo{ transform: translateY(101%); }

@keyframes adn-intro-logo{
    from{ clip-path: inset(0 100% 0 0); opacity: .2; }
    to{ clip-path: inset(0 0 0 0); opacity: 1; }
}
@keyframes adn-intro-adn{
    from{ opacity: 0; transform: translateX(-10px); }
    to{ opacity: 1; transform: none; }
}
@keyframes adn-intro-linea{
    from{ transform: scaleX(0); }
    to{ transform: scaleX(1); }
}