/* style.css — Base de Miparte. La estética viene del diseño: fondo casi negro,
   acento violeta y Space Grotesk. El grueso de los estilos va en línea dentro
   de director.js, igual que en el diseño original, para que trasplantarlo sea
   literal y no una reinterpretación. */

html, body {
  margin: 0;
  height: 100%;
  background: #08080a;
  overflow: hidden;
}

* { box-sizing: border-box; }

a { color: #a78bfa; text-decoration: none; }
a:hover { color: #c4b5fd; }

/* El envoltorio de pantalla debe RELLENAR #app, no encogerse a su contenido.
   Cuando lo añadí para el antiparpadeo, un div con altura automática rompió la
   cadena de alturas: el `min-height:100%` de la escena dejó de resolver contra
   la pantalla, el contenedor colapsó al tamaño de su padding y el teleprómpter
   se quedó con 0 px de alto — presente en el DOM, invisible. */
#screen-host {
  flex: 1 1 auto;
  min-height: 100%;
  display: flex;
  flex-direction: column;
}

#app {
  position: fixed;
  inset: 0;
  font-family: 'Space Grotesk', sans-serif;
  color: #f4f4f6;
  background: radial-gradient(120% 90% at 50% 8%, #17151c 0%, #0b0a0e 45%, #08080a 100%);
  display: flex;
  flex-direction: column;
  overflow-y: auto;
  overflow-x: hidden;
}

/* --- transiciones de pantalla --- */
@keyframes mp-screenin { from { opacity: 0; transform: translateY(14px); } to { opacity: 1; transform: none; } }
@keyframes mp-dots     { 0% { opacity: .2; } 50% { opacity: 1; } 100% { opacity: .2; } }
@keyframes mp-rec      { 0%,100% { opacity: 1; } 50% { opacity: .25; } }
@keyframes mp-listen   { 0%,100% { transform: scaleY(0.4); } 50% { transform: scaleY(1); } }
@keyframes mp-pop      { from { opacity: 0; transform: scale(0.7); } to { opacity: 1; transform: scale(1); } }

/* --- el orbe de Lope --- */
@keyframes lo-breathe { 0%,100% { transform: scale(1); } 50% { transform: scale(1.05); } }
@keyframes lo-speak   { 0%,100% { transform: scale(1); } 20% { transform: scale(1.13); } 45% { transform: scale(0.95); } 70% { transform: scale(1.08); } }
@keyframes lo-ripple  { 0% { transform: scale(0.62); opacity: 0.55; } 100% { transform: scale(1.75); opacity: 0; } }
@keyframes lo-spin    { to { transform: rotate(360deg); } }
@keyframes lo-halo    { 0%,100% { opacity: 0.55; } 50% { opacity: 1; } }

/* Botones y zonas pulsables: el diseño los define en línea, aquí solo el
   comportamiento común que allí se expresaba con style-hover. */
.mp-press { transition: transform .15s ease, background .25s ease, border-color .25s ease; }
.mp-press:hover { transform: translateY(-2px); }
.mp-drop:hover { border-color: rgba(167,139,250,.8) !important; background: rgba(167,139,250,.1) !important; }