/* sm-logo.css — Logo animado de SendMasivo, modelo 6e (21-ago-2026).
 *
 * Port 1:1 de mockup-login.html. Vive en un archivo APARTE y no dentro del
 * <style> de index.html a propósito: la marca no es del panel SMPP, es de
 * SendMasivo, y el día que se actualice sendmasivo.com (o el Portal, o
 * cualquier otra superficie) se copia este archivo y listo. Por eso acá no hay
 * una sola regla que dependa del login — ni tokens del panel, ni selectores de
 * ancestro, ni media queries de layout.
 *
 * ⚠️ El logo que hoy corre en vivo en sendmasivo.com (/var/www/sendmasivo/
 * index.html, líneas 26-27 y 79-85) es una versión ANTERIOR y DISTINTA de este:
 * no tiene sm-settle, corre a 4200ms en loop infinito en vez de 2050ms una sola
 * vez, y usa delays de 297/148ms donde el 6e usa 145/72ms. Portar el sitio
 * corporativo a esta versión es una tarea aparte, todavía sin hacer. Si tocás
 * este archivo, acordate de que allá quedó la vieja.
 *
 * Markup:
 *   <div class="sm-logo sm-logo--claro">
 *     <div class="sm-logo__chevs">
 *       <div class="sm-logo__chev"></div>   (×3)
 *     </div>
 *     <div class="sm-logo__word"><span>Send</span><b>Masivo</b></div>
 *   </div>
 *
 * Depende de Space Grotesk (400 y 700). En el panel la sirve public/fonts/
 * fonts.css; en otra superficie hay que proveerla o se cae al fallback
 * Helvetica/Arial del stack.
 *
 * Las tres animaciones son una sola coreografía de --sm-dur, con `both` para
 * que el estado final quede fijado (no vuelve al inicio):
 *   · sm-word   — la palabra entra desde la izquierda y rebota al frenar.
 *   · sm-fly    — los chevrones llegan volando y se posan sobre la palabra;
 *                 arrancan a 0%,30% para que la palabra llegue primero.
 *   · sm-settle — el conjunto entero da un pulso de escala al final (68%),
 *                 cuando las dos piezas ya están en su lugar.
 */

.sm-logo{
  /* Violetas de MARCA, no del tema: el logo se ve igual en claro y en oscuro.
     Ojo que no son el --violet del panel (#8B6FD9/#6B4FBF) ni el #5B04DC del
     acento del login — son tres valores distintos y a propósito. */
  --sm-violeta:#6B3FF2;
  --sm-violeta-claro:#9B7BF7;
  --sm-tinta:#0D0F0E;
  --sm-papel:#F7F7F5;
  --sm-chev:var(--sm-violeta-claro);
  --sm-texto:var(--sm-papel);
  --sm-dur:2050ms;
  display:inline-flex; align-items:center; gap:.45em;
  font-family:'Space Grotesk',Helvetica,Arial,sans-serif;
  font-size:38px; letter-spacing:-.035em; line-height:1;
  color:var(--sm-texto); white-space:nowrap;
  animation:sm-settle var(--sm-dur) cubic-bezier(.3,.7,.2,1) both;
}

/* Variantes de fondo. La base (sin modificador) es para fondo OSCURO —
   chevrón claro sobre papel—; --claro la invierte para fondo claro. El login
   del panel usa --claro. */
.sm-logo--claro{ --sm-chev:var(--sm-violeta); --sm-texto:var(--sm-tinta); }
.sm-logo--oscuro{ --sm-chev:var(--sm-violeta-claro); --sm-texto:var(--sm-papel); }

.sm-logo__chevs{ display:flex; align-items:center; gap:.14em; }

/* Cada chevrón es un cuadrado con solo dos bordes, rotado 45°. Todo en `em`
   para que el logo escale entero cambiando únicamente font-size en .sm-logo. */
.sm-logo__chev{
  width:.45em; height:.45em;
  border-top:.135em solid var(--sm-chev);
  border-right:.135em solid var(--sm-chev);
  opacity:var(--o); transform:rotate(45deg);
  animation:sm-fly var(--sm-dur) cubic-bezier(.16,.86,.24,1) both;
}
/* Los tres llegan escalonados y con opacidad creciente: el de más atrás es el
   más tenue y el que sale primero, así se lee como estela. --o lo usa también
   el keyframe, que tiene que volver al valor propio de cada uno y no a 1. */
.sm-logo__chev:nth-child(1){ --o:.35; animation-delay:145ms; }
.sm-logo__chev:nth-child(2){ --o:.65; animation-delay:72ms; }
.sm-logo__chev:nth-child(3){ --o:1; }

.sm-logo__word{ animation:sm-word var(--sm-dur) cubic-bezier(.1,.92,.16,1) both; }
.sm-logo__word b{ font-weight:700; }
.sm-logo__word span{ font-weight:400; }

@keyframes sm-word{
  0%{ transform:translateX(-150%); opacity:0 }
  5%{ opacity:1 }
  20%{ transform:translateX(4%) }
  27%{ transform:translateX(-1%) }
  33%,100%{ transform:translateX(0) }
}
@keyframes sm-fly{
  0%,30%{ transform:translateX(-3.6em) scale(2.4) rotate(45deg); opacity:0 }
  40%{ opacity:var(--o) }
  58%,100%{ transform:translateX(0) scale(1) rotate(45deg); opacity:var(--o) }
}
@keyframes sm-settle{
  0%,62%{ transform:scale(1) }
  68%{ transform:scale(1.06) }
  76%,100%{ transform:scale(1) }
}

/* Sin animación queda el estado final, no el inicial: `both` ya fijó el
   forwards, y la opacidad de cada chevrón la da --o en la regla base. O sea
   que el logo se ve completo y correcto, simplemente no se arma en pantalla. */
@media (prefers-reduced-motion:reduce){
  .sm-logo,.sm-logo__chev,.sm-logo__word{ animation:none !important; }
}