/* Explain: Finishing touches: typography, graphite accent, and micro-interactions. */
/* Acabado final: ambiente oscuro y micro-interacciones */

/* Subrayado animado en los enlaces de navegación */
.site-nav-link {
    position: relative;
}

.site-nav-link::after {
    position: absolute;
    bottom: -0.4rem;
    left: 0;
    width: 100%;
    height: 1px;
    background: var(--accent-color);
    content: "";
    transform: scaleX(0);
    transform-origin: right center;
    transition: transform 400ms cubic-bezier(0.65, 0, 0.35, 1);
}

.site-nav-link:hover::after,
.site-nav-link.is-active::after {
    transform: scaleX(1);
    transform-origin: left center;
}

/* Refinamiento del logotipo al pasar el cursor */
.site-brand span:first-child {
    display: inline-block;
    transition: letter-spacing 400ms ease, color 300ms ease;
}

.site-brand:hover span:first-child {
    letter-spacing: 0.36em;
}

/* Base de aparición al hacer scroll */
.reveal {
    opacity: 0;
    transform: translateY(24px);
    transition: opacity 800ms cubic-bezier(0.22, 1, 0.36, 1), transform 800ms cubic-bezier(0.22, 1, 0.36, 1);
}

.reveal.is-visible {
    opacity: 1;
    transform: translateY(0);
}

/* Botón volver arriba */
.back-to-top {
    position: fixed;
    right: 1.25rem;
    bottom: 5.75rem;
    z-index: 50;
    display: inline-flex;
    height: 3rem;
    width: 3rem;
    align-items: center;
    justify-content: center;
    border: 1px solid var(--glass-border);
    border-radius: 0;
    background: var(--surface-color);
    color: var(--text-color);
    box-shadow: var(--shadow-soft);
    opacity: 0;
    pointer-events: none;
    transform: translateY(12px);
    transition: opacity 350ms ease, transform 350ms ease, background-color 300ms ease, color 300ms ease;
}

.back-to-top.is-visible {
    opacity: 1;
    pointer-events: auto;
    transform: translateY(0);
}

.back-to-top:hover {
    background: var(--accent-color);
    color: var(--accent-inverse-color);
}

@media (min-width: 768px) {
    .back-to-top {
        right: 2rem;
        bottom: 2rem;
    }
}

/* Correo destacado */
.footer-email {
    color: var(--accent-inverse-color) !important;
}

/* Estados de foco accesibles */
a:focus-visible,
button:focus-visible {
    outline: 2px solid var(--accent-color);
    outline-offset: 2px;
}

@media (prefers-reduced-motion: reduce) {
    .reveal,
    .site-nav-link::after,
    .back-to-top {
        transition: none;
    }

    .reveal {
        opacity: 1;
        transform: none;
    }

    .site-brand:hover span:first-child {
        letter-spacing: 0.3em;
    }
}

/* Aparición editorial al cargar la portada */
@keyframes heroRise {
    from {
        opacity: 0;
        transform: translateY(28px);
    }
    to {
        opacity: 1;
        transform: translateY(0);
    }
}

@keyframes heroFade {
    from {
        opacity: 0;
    }
    to {
        opacity: 1;
    }
}

.hero-rise {
    opacity: 0;
    animation: heroRise 1000ms cubic-bezier(0.22, 1, 0.36, 1) forwards;
}

.hero-fade {
    opacity: 0;
    animation: heroFade 1600ms ease forwards;
}

@media (prefers-reduced-motion: reduce) {
    .hero-rise,
    .hero-fade {
        opacity: 1;
        transform: none;
        animation: none;
    }
}