/* Entrada de la portada: el corto a pantalla completa, por encima de todo (entry.js). 100vw para que no cambie de tamano cuando vuelve la barra de scroll */
.entry { display: none; }
html.entry-on, html.entry-on body { overflow: hidden; }
html.entry-on .entry, .entry.on { display: block; position: fixed; left: 0; top: 0; bottom: 0; width: 100vw; z-index: 100; background: #000; color: #fff; cursor: pointer; touch-action: none; overscroll-behavior: none; }
/* la tarjeta baja y deja la portada debajo; el borde claro y las esquinas la separan del negro de la portada */
.entry.out { transform: translateY(100%); pointer-events: none; border-radius: 22px 22px 0 0; overflow: hidden; box-shadow: 0 -1px 0 rgba(255,255,255,.28), 0 -30px 80px rgba(0,0,0,.7); transition: transform 1.1s cubic-bezier(.76,0,.24,1); }
.entry video { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: contain; transition: opacity .9s ease; }   /* el corto entero, sin recortar */
/* cierre: fundido a negro y, sobre el negro, el nombre con su logo y el autor (entry.js marca los tiempos) */
.entry.cierre video { opacity: 0; }
.entry .ecierre { position: absolute; inset: 0; display: flex; flex-direction: column; align-items: center; justify-content: center; opacity: 0; pointer-events: none; }
.entry.cierre .ecierre { opacity: 1; transition: opacity .9s ease .8s; }
.entry .ecierre img { width: min(64vw, 420px); height: auto; margin-bottom: clamp(28px, 5vh, 48px); }
.entry .ecierre .mono { color: rgba(255,255,255,.65); }
.entry .ecierre .disp { margin-top: 6px; font-size: clamp(20px, 2.2vw, 30px); color: #fff; }
.entry.cierre .eui { opacity: 0; pointer-events: none; }
.entry .eui { transition: opacity .4s ease; }
.entry .play { display: none; pointer-events: none; }
.entry.parado .play { display: block; }
.entry .eui { position: absolute; left: var(--pad); right: var(--pad); bottom: calc(18px + env(safe-area-inset-bottom, 0px)); display: grid; grid-template-columns: 1fr auto 1fr; align-items: center; gap: 12px; }
.entry .etit { color: rgba(255,255,255,.7); }
.entry .etit b { color: #fff; }
.entry .etit i { font-style: normal; }
.entry .ecue { display: flex; flex-direction: column; align-items: center; gap: 6px; padding: 6px 10px; background: none; border: 0; color: #fff; cursor: pointer; }
.entry .ecue .mono { color: rgba(255,255,255,.8); letter-spacing: .22em; }
.entry .ecue i { width: 11px; height: 11px; margin-top: -3px; border-right: 2px solid var(--acc); border-bottom: 2px solid var(--acc); transform: rotate(45deg); animation: cue 1.6s ease-in-out infinite; }
.entry .esnd { justify-self: end; color: #fff; background: rgba(0,0,0,.45); border-color: rgba(255,255,255,.55); cursor: pointer; }
.entry .esnd svg { flex: none; }
.entry .esnd .ewave { display: none; }
.entry .esnd.on .ewave { display: inline; }
.entry .esnd.on .emute { display: none; }
@media (hover: hover) { .entry .esnd:hover { border-color: var(--acc); background: rgba(255,77,28,.16); } }
@media (max-width: 760px) {
  .entry .eui { grid-template-columns: 1fr auto; row-gap: 14px; }
  .entry .ecue { grid-column: 1 / -1; grid-row: 1; }
  .entry .etit b { display: block; }
  .entry .etit i { display: none; }
}
@media (prefers-reduced-motion: reduce) { .entry .ecue i { animation: none; } .entry.out { transition: none; } }