/* ═══════════════════════════════════════════════════════════════
   ACADEMIA MMB — Capa de animaciones PREMIUM (V2.2)
   Aditiva y no destructiva: se carga la última, sobre mmb-tokens/
   components/sections/premium/trust. Solo mejora (scroll, MMB AI,
   tarjetas, botones) reutilizando clases y tokens existentes.
   Todo animado con transform/opacity (GPU) y gateado por
   prefers-reduced-motion al final.
   ═══════════════════════════════════════════════════════════════ */

/* ───────── 1. SCROLL PREMIUM ───────── */

/* IMPORTANTE: NO forzamos scroll-behavior aquí. El sitio usa
   scroll-behavior:auto a propósito (GSAP/ScrollTrigger gestiona el
   scroll); imponer "smooth" desde CSS pelea con GSAP y provoca tirones. */

/* Las secciones ancladas no quedan pegadas al borde superior al saltar. */
section[id], header[id], footer[id]{ scroll-margin-top:24px; }

/* Barra de progreso de lectura — CSS scroll-driven, SIN JavaScript.
   Progressive enhancement: solo en navegadores con scroll timelines. */
@supports (animation-timeline: scroll()){
  body::before{
    content:'';
    position:fixed; top:0; left:0;
    height:3px; width:100%;
    transform-origin:0 50%;
    transform:scaleX(0);
    background:linear-gradient(90deg, var(--mmb-office-blue), var(--mmb-office-cyan));
    box-shadow:0 0 12px rgba(80,230,255,.5);
    z-index:3000; pointer-events:none;
    animation:mmb-scrollprogress linear both;
    animation-timeline:scroll(root);
  }
  @keyframes mmb-scrollprogress{ to{ transform:scaleX(1); } }
}

/* Reveal con un punto extra de premium: leve escala inicial.
   .is-visible (definido en tokens, mayor especificidad) sigue mandando. */
[data-mmb-reveal]{ transform:translateY(30px) scale(.986); }

/* ───────── 2. MMB AI — sección, aura y avatar ───────── */

/* Aura ambiental que respira detrás de todo el bloque del asistente. */
#chat-profesor{ position:relative; isolation:isolate; }
#chat-profesor::before{
  content:'';
  position:absolute; inset:0;
  z-index:-1; pointer-events:none;
  background:
    radial-gradient(38rem 28rem at 22% 42%, rgba(0,120,212,.14), transparent 70%),
    radial-gradient(30rem 24rem at 82% 60%, rgba(80,230,255,.10), transparent 72%);
  animation:mmb-aura-breathe 9s ease-in-out infinite;
}
@keyframes mmb-aura-breathe{
  0%,100%{ opacity:.65; transform:scale(1); }
  50%{ opacity:1; transform:scale(1.05); }
}

/* Halo suave adicional bajo el avatar (segunda capa de profundidad). */
.mmb-prof-stage::before{
  content:'';
  position:absolute; inset:-18%;
  border-radius:50%;
  background:radial-gradient(circle, rgba(80,230,255,.28), transparent 62%);
  filter:blur(26px);
  z-index:0;
  animation:mmb-prof-halo 4.2s ease-in-out infinite;
}
@keyframes mmb-prof-halo{
  0%,100%{ opacity:.55; transform:scale(1); }
  50%{ opacity:.95; transform:scale(1.09); }
}

/* Segundo anillo orbital girando en sentido contrario al spotlight. */
.mmb-prof-stage::after{
  content:'';
  position:absolute; inset:-2%;
  border-radius:50%;
  border:1px dashed rgba(80,230,255,.35);
  z-index:1;
  animation:mmb-prof-orbit 14s linear infinite;
}
@keyframes mmb-prof-orbit{ to{ transform:rotate(-360deg); } }

/* Flotación un poco más orgánica y glow que late en el avatar. */
.mmb-prof-avatar{
  animation:mmb-prof-avatar-glow 4s ease-in-out infinite;
}
@keyframes mmb-prof-avatar-glow{
  0%,100%{ box-shadow:0 10px 50px rgba(0,120,212,.35); }
  50%{ box-shadow:0 16px 70px rgba(80,230,255,.5); }
}

/* ───────── 3. MMB AI — ventana de chat premium ───────── */

/* Borde con gradiente animado alrededor de la ventana de chat. */
.mmb-chat-shell{
  position:relative;
  transition:box-shadow .4s var(--mmb-ease-premium), transform .4s var(--mmb-ease-premium);
}
/* Borde-gradiente solo donde el recorte por máscara está soportado
   (evita que el pseudo-elemento tape el chat en navegadores antiguos). */
@supports ((-webkit-mask-composite: xor) or (mask-composite: exclude)){
  @property --mmb-ang{ syntax:'<angle>'; inherits:false; initial-value:0deg; }
  .mmb-chat-shell::before{
    content:'';
    position:absolute; inset:0;
    border-radius:inherit;
    padding:1px;
    background:conic-gradient(from var(--mmb-ang,0deg),
       rgba(0,120,212,.15), rgba(80,230,255,.85), rgba(0,120,212,.15) 55%, rgba(80,230,255,.6));
    -webkit-mask:linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0);
    -webkit-mask-composite:xor; mask-composite:exclude;
    opacity:.7; pointer-events:none;
    animation:mmb-border-rotate 6s linear infinite;
  }
  @keyframes mmb-border-rotate{ to{ --mmb-ang:360deg; } }
}
.mmb-chat-shell:hover{
  box-shadow:0 22px 60px rgba(0,90,170,.28);
}

/* Barrido de brillo continuo y sutil sobre la cabecera del chat. */
.mmb-chat-header{ position:relative; overflow:hidden; }
.mmb-chat-header::after{
  content:'';
  position:absolute; top:0; bottom:0; width:40%;
  left:-50%;
  background:linear-gradient(100deg, transparent, rgba(255,255,255,.28), transparent);
  transform:skewX(-18deg);
  animation:mmb-header-shine 5.5s ease-in-out infinite;
}
@keyframes mmb-header-shine{
  0%,100%{ left:-60%; }
  55%,70%{ left:130%; }
}

/* Entrada de cada mensaje con más cuerpo: escala + desenfoque premium. */
.mmb-msg-row{
  animation:mmb-msg-in-premium .5s var(--mmb-ease-premium) both;
}
@keyframes mmb-msg-in-premium{
  from{ opacity:0; transform:translateY(14px) scale(.97); filter:blur(4px); }
  to{ opacity:1; transform:translateY(0) scale(1); filter:blur(0); }
}

/* Avatar del bot con un anillo de glow que respira. */
.mmb-msg-avatar{
  box-shadow:0 0 0 0 rgba(80,230,255,.45);
  animation:mmb-avatar-ping 3.4s ease-in-out infinite;
}
@keyframes mmb-avatar-ping{
  0%,100%{ box-shadow:0 0 0 0 rgba(80,230,255,.4); }
  50%{ box-shadow:0 0 0 5px rgba(80,230,255,0); }
}

/* Indicador de escritura con un leve glow por punto. */
.typing-indicator span{ box-shadow:0 0 8px rgba(80,230,255,.6); }

/* ───────── 4. TARJETAS Y BOTONES PREMIUM ───────── */

/* Elevación premium homogénea en tarjetas de la home. */
.mmb-area, .mmb-b, .mmb-col, .mmb-glass, .mmb-curso-card{
  transition:transform .45s var(--mmb-ease-premium),
             box-shadow .45s var(--mmb-ease-premium),
             border-color .45s var(--mmb-ease-premium);
}
.mmb-area:hover, .mmb-b:hover, .mmb-col:hover, .mmb-glass:hover{
  transform:translateY(-6px);
  box-shadow:0 20px 44px rgba(0,60,120,.22);
  border-color:rgba(80,230,255,.45);
}
/* La columna destacada de la comparativa se eleva un poco más. */
#por-que-mmb .mmb-col.is-mmb:hover{
  transform:translateY(-8px) scale(1.015);
  box-shadow:0 26px 60px rgba(0,120,212,.30);
}

/* Botones: microelevación premium + barrido de brillo al pasar el ratón. */
.mmb-btn{
  transition:transform .3s var(--mmb-ease-premium), box-shadow .3s var(--mmb-ease-premium), filter .3s ease;
}
.mmb-btn:hover{ transform:translateY(-2px); }
.mmb-btn-primary:hover{ box-shadow:0 14px 34px rgba(0,120,212,.42); filter:saturate(1.05); }
/* (El barrido de brillo del botón ya lo aporta .mmb-btn-shine en
   mmb-components.css; aquí solo añadimos la microelevación premium.) */

/* ───────── 5. ACCESIBILIDAD — prefers-reduced-motion ───────── */
@media (prefers-reduced-motion: reduce){
  [data-mmb-reveal]{ transform:none; }
  body::before,
  #chat-profesor::before,
  .mmb-prof-stage::before,
  .mmb-prof-stage::after,
  .mmb-prof-avatar,
  .mmb-chat-shell::before,
  .mmb-chat-header::after,
  .mmb-msg-row,
  .mmb-msg-avatar{
    animation:none !important;
  }
  .mmb-area, .mmb-b, .mmb-col, .mmb-glass, .mmb-curso-card, .mmb-btn{ transition:none; }
  .mmb-area:hover, .mmb-b:hover, .mmb-col:hover, .mmb-glass:hover,
  #por-que-mmb .mmb-col.is-mmb:hover, .mmb-btn:hover{ transform:none; }
}