/* Skeleton real de carga y entrada progresiva de bloques, en ambos idiomas. */
:root {
    --transition-fade: none;
    --ease-out: cubic-bezier(0.23, 1, 0.32, 1);
}
.site-loading { width: 100%; max-width: 1080px; margin: 0 auto 32px; padding: 24px 0; }
.site-loading-label { color: var(--color-text-muted); font-size: var(--font-size-meta); margin-bottom: 18px; }
.site-loading-shapes { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 20px; }
.skeleton-block {
    position: relative;
    overflow: hidden;
    display: block;
    border-radius: 16px;
    background: var(--neu-surface, #172630);
    box-shadow: var(--neu-inset, inset 3px 3px 8px #091119, inset -3px -3px 8px #253845);
}
.skeleton-block::after {
    content: "";
    position: absolute;
    inset: 0;
    background: linear-gradient(100deg, transparent 15%, #b8d8e014 50%, transparent 85%);
    transform: translateX(-100%);
    animation: skeleton-shimmer 1.6s linear infinite;
}
.skeleton-block--title { grid-column: 1 / -1; width: 70%; height: 48px; }
.skeleton-block--line, .skeleton-block--line-short { grid-column: 1 / -1; height: 18px; }
.skeleton-block--line-short { width: 60%; }
.skeleton-block--card { height: 220px; margin-top: 12px; border-radius: 24px; }
/* Sin estados ocultos persistentes: el contenido es legible aunque falle el script. */
.scroll-reveal { animation: block-reveal 900ms var(--ease-out) var(--reveal-delay, 0ms) backwards; }
.scroll-reveal:focus-within, .scroll-reveal:target { animation: none; }
@keyframes skeleton-shimmer { to { transform: translateX(100%); } }
@keyframes block-reveal { from { opacity: 0; transform: translateY(16px); } to { opacity: 1; transform: translateY(0); } }
@media (max-width: 640px) {
    .site-loading-shapes { grid-template-columns: 1fr; }
    .skeleton-block--title { width: 85%; }
    .skeleton-block--card { height: 160px; }
}
/* Hover: transiciones suaves con la curva y los colores del tema. :where() no compite con las transiciones propias de cada componente. */
:where(a, button, summary) {
    transition: color 240ms var(--ease-out), background-color 240ms var(--ease-out), border-color 240ms var(--ease-out), box-shadow 240ms var(--ease-out), text-decoration-color 240ms var(--ease-out), transform 240ms var(--ease-out);
}
:where(.component-card, .game-card, .gaming-genre-grid > .components-example, .goty-summary > div) {
    transition: transform 320ms var(--ease-out), border-color 320ms var(--ease-out), background-color 320ms var(--ease-out);
}
:where(.card .icon, .card .arrow, .portal-topic-title > span, .news-category-nav a > *) { transition: transform 320ms var(--ease-out), color 240ms var(--ease-out); }
/* El movimiento solo se aplica con ratón: en táctil el hover queda pegado tras tocar. */
@media (hover: hover) and (pointer: fine) and (prefers-reduced-motion: no-preference) {
    /* Tarjetas con enlace: misma elevación que las noticias y el portal. */
    .component-card:has(a):hover, .game-card:has(a):hover, .gaming-genre-grid > .components-example:hover, .goty-summary > div:has(a):hover { transform: translateY(-3px); border-color: #286075; }
    .card:hover .icon { transform: translateY(-2px) scale(1.06); }
    .card:hover .arrow { transform: translate(2px, -2px); }
    .portal-topic-grid a:hover .portal-topic-title > span, .news-category-nav a:hover > :last-child { transform: translateX(3px); }
    /* Chips, píldoras y botones: elevación ligera. */
    .component-index a:hover, .gaming-toc a:hover, .gaming-pagination a:hover, .category-pagination a:hover, .reference-links a:hover, .tops-crosslinks a:hover, .portal-shortcuts a:hover, .hero-actions a:hover, .news-category-nav a:hover { transform: translateY(-2px); }
    .site-amazon-button:hover, .site-rewards-button:hover, .site-roblox-button:hover, .site-search button:hover, .language-switcher a.language-option--link:hover { transform: translateY(-1px); }
    .component-read-more:hover, .hub-cta:hover { transform: translateX(3px); }
    /* Selector de idioma: la opción no activa se eleva y se ilumina con el acento. */
    .language a:not([aria-current]):hover, .language-switcher a.language-option--link:hover { background: #183540; border-color: #65dbea; color: #fff; box-shadow: 0 6px 16px #02050899, 0 0 0 3px #65dbea1f; transform: translateY(-2px); }
    /* Temas del portal: elevación, halo del acento y título resaltado. */
    .portal-topic-grid a:hover { transform: translateY(-3px); border-color: #65dbea; box-shadow: var(--neu-small), 0 10px 24px #02050880, 0 0 0 1px #65dbea33; }
    .portal-topic-grid a:hover .portal-topic-title { color: #fff; }
    .portal-topic-grid a:hover .portal-topic-title > span { transform: translateX(5px); }
    .portal-topic-grid a:hover .portal-topic-description { color: #b5cbd7; }
}
/* Menú principal en escritorio: subrayado que crece desde el centro. En móvil el menú es un panel con fondo propio. */
@media (min-width: 901px) {
    .site-nav > a:not([class*="-button"]) { position: relative; }
    .site-nav > a:not([class*="-button"])::after { content: ""; position: absolute; left: 0; right: 0; bottom: 4px; height: 2px; border-radius: 2px; background: currentColor; transform: scaleX(0); transition: transform 280ms var(--ease-out); }
    .site-nav > a:not([class*="-button"]):hover::after, .site-nav > a[aria-current="page"]::after { transform: scaleX(1); }
}
:where(.portal-topic-grid a) { transition: transform 320ms var(--ease-out), border-color 240ms var(--ease-out), background-color 240ms var(--ease-out), box-shadow 320ms var(--ease-out); }
:where(.portal-topic-title, .portal-topic-description) { transition: color 240ms var(--ease-out); }
@media (prefers-reduced-motion: reduce) {
    .skeleton-block::after, .scroll-reveal { animation: none; }
    .site-nav > a::after { transition: none; }
    :where(a, button, summary, .component-card, .game-card, .gaming-genre-grid > .components-example, .goty-summary > div, .card .icon, .card .arrow, .portal-topic-title > span, .news-category-nav a > *) { transition: none; }
}