/* hub-polish.css — capa de ajustes de Hubents sobre la web de Lua (V205).
   Se carga la ÚLTIMA en cada página (tools/prepare.mjs). No cambia el diseño:
   corrige fallos que se ven a la primera y suaviza transiciones. Auditoría UX
   del 9-nov-2026; cada bloque se puede quitar por separado. Una sola curva. */
:root{--hp-out:cubic-bezier(.22,1,.36,1)}

/* A1 · Home: tapa negra (mismo #020202 que la intro) desde el primer pintado hasta que
   cinema-intro.js decide. Evita ver la home 0,3 s (escritorio) / 1,1 s (móvil) antes de
   «FOLLOW LUû, el logo que aparece y se va y el ND que entra a saltos.
   hub-polish.js pone html.hp-ready; si no llegara a correr, se retira sola a los 4 s. */
@media (prefers-reduced-motion:no-preference){
  body[data-page="home"]::after{content:"";position:fixed;inset:0;z-index:899;background:#020202;pointer-events:none;
    transition:opacity .6s var(--hp-out),visibility 0s linear .6s;animation:hp-cover-off 0s linear 4s forwards}
  html.hp-ready body[data-page="home"]::after{opacity:0;visibility:hidden}
}
@keyframes hp-cover-off{to{opacity:0;visibility:hidden}}

/* A2 · Home: dos lunas solapadas en la esquina (light-orbit .page-moon-phase + review117 .brand-phase). */
body[data-page="home"] .brand-phase{display:none}

/* A3 · Home: la cabecera se oculta durante el fundido sol→foco (body.is-light-match) sin transición. */
body[data-page="home"] .site-header{transition:background .25s,border .25s,opacity .45s var(--hp-out)}

/* A4 · Menú móvil: la página de detrás se desplazaba con el menú abierto. */
html:has(body.menu-open),body.menu-open{overflow:hidden}
.mobile-nav{overscroll-behavior:contain}

/* A5 · Toques: sin el recuadro azul/gris del navegador al tocar enlaces y botones. */
a,button,summary,label,[role="button"],[role="tab"]{-webkit-tap-highlight-color:transparent}

/* A7 · Logo de la cabecera: zona táctil de 23 px de alto → 45 px, sin mover el dibujo. */
.site-header>.brand,.header>a:first-child,.cinema-brand{padding-block:11px;margin-block:-11px}

/* P1 · Intro: «FOLLOW LUû recibe el foco por script y el anillo de foco dibuja un segundo recuadro
   alrededor del subrayado. Se mantiene para quien navega con teclado (html.hp-kbd). */
.cinema-intro-enter:focus-visible{outline-color:transparent}
html.hp-kbd .cinema-intro-enter:focus-visible{outline-color:#b9b9b145}

/* P2 · Imagen principal de Films y Studio: en 4G se pinta a franjas de arriba abajo (2–5 s).
   Se muestra entera con un fundido cuando ha cargado. Si el JS no corriera, aparece a los 5 s. */
:is(.fl-cover-image img,img[fetchpriority="high"]):not(.hp-in){opacity:0;animation:hp-show 0s linear 5s forwards}
:is(.fl-cover-image img,img[fetchpriority="high"]).hp-in{opacity:1;transition:opacity .8s var(--hp-out)}
@keyframes hp-show{to{opacity:1}}

/* P3 · Collections: la cruz de las preguntas gira y el panel se abre con suavidad (Chrome; el resto, igual que hoy). */
details summary>span{transition:transform .25s var(--hp-out)}
@supports (interpolate-size:allow-keywords){
  details{interpolate-size:allow-keywords}
  details::details-content{block-size:0;overflow:hidden;transition:block-size .3s var(--hp-out),content-visibility .3s allow-discrete}
  details[open]::details-content{block-size:auto}
}
/* P4 · Collections: AURA / ECLIPSE / NOVA cambian de golpe; ahora entran con un fundido corto. */
.collections180 [role="tabpanel"]:not([hidden]){animation:hp-panel-in .32s var(--hp-out)}
@keyframes hp-panel-in{from{opacity:0;transform:translateY(6px)}}

/* P5 · Home: nombres de Luã y Mica sobre el cielo claro (contraste medido 1,9–3,7:1). Solo un halo algo más denso. */
body[data-page="home"] .duo-names span{text-shadow:0 1px 12px rgba(0,0,0,.6),0 0 2px rgba(0,0,0,.35)}

/* P6 · Fundido entre páginas (Chrome 126+, Safari 18.2+; el resto navega igual que hoy). */
@view-transition{navigation:auto}
::view-transition-old(root),::view-transition-new(root){animation-duration:.32s;animation-timing-function:var(--hp-out)}

@media (prefers-reduced-motion:reduce){
  @view-transition{navigation:none}
  .collections180 [role="tabpanel"]:not([hidden]){animation:none}
  details::details-content{transition:none}
  :is(.fl-cover-image img,img[fetchpriority="high"]).hp-in{transition:none}
}