/* ===========================================================================
   Gemleaf · Vitality layer
   Capa de movimiento compartida para las páginas de Empresas (verticales).
   - "Vida continua": micro-loops lentos, gated por la clase .play que el
     observer agrega/quita por sección al entrar/salir del viewport.
   - Reutiliza los mocks y el vocabulario de marca ya existentes; no cambia
     copy ni estructura. Solo color de marca (terracota / apricot).
   - Todo bajo prefers-reduced-motion: no-preference → reduced-motion = estático.
   =========================================================================== */

/* Las animaciones continuas SOLO existen cuando se prefiere movimiento. */
@media (prefers-reduced-motion: no-preference) {

  /* ---- keyframes ---------------------------------------------------------- */
  @keyframes glHeroBreath {
    0%, 100% { opacity: .55; transform: translateX(-50%) scale(1); }
    50%      { opacity: .85; transform: translateX(-50%) scale(1.05); }
  }
  @keyframes glHaloBreath {
    0%, 100% { opacity: .42; transform: scale(1); }
    50%      { opacity: .72; transform: scale(1.06); }
  }
  @keyframes glRing {
    0%        { box-shadow: 0 0 0 0 rgba(240,194,166,.55); }
    70%, 100% { box-shadow: 0 0 0 15px rgba(240,194,166,0); }
  }
  @keyframes glFloat {
    0%, 100% { transform: translateY(0); }
    50%      { transform: translateY(-3px); }
  }
  @keyframes glScan {
    0%       { top: 2px;  opacity: 0; }
    12%      { opacity: .9; }
    50%      { top: calc(100% - 4px); opacity: .9; }
    58%      { opacity: 0; }
    100%     { top: 2px; opacity: 0; }
  }
  @keyframes glBarGlow {
    0%, 100% { box-shadow: 0 0 0 0 rgba(192,86,58,0); }
    50%      { box-shadow: 0 0 9px 1px rgba(192,86,58,.55); }
  }
  @keyframes glPinPulse {
    0%, 100% { box-shadow: 0 0 0 0 rgba(192,86,58,.5); }
    50%      { box-shadow: 0 0 0 10px rgba(192,86,58,0); }
  }
  @keyframes glBadGlow {
    0%, 100% { border-color: #EBC3B6; }
    50%      { border-color: #C0563A; }
  }
  @keyframes glLiveDot {
    0%, 100% { opacity: .55; transform: scale(.82); }
    50%      { opacity: 1;   transform: scale(1.15); }
  }

  /* ---- 1 · Hero: el resplandor respira -------------------------------------*/
  .page-hero.play .glow { animation: glHeroBreath 7s ease-in-out infinite; will-change: opacity, transform; }

  /* ---- 2 · Cierre "en 30 días": halo que late + anillo en el botón --------*/
  section.play .cta-band .glow {
    animation: glHaloBreath 6s ease-in-out infinite;
    transform-origin: 50% 0; will-change: opacity, transform;
  }
  section.play .cta-band .btn-fill { animation: glRing 2.9s ease-out infinite; }

  /* ---- 3 · Línea de escaneo en los paneles de datos (monitoreo) -----------*/
  /* posición base para anclar el ::after; inofensivo fuera de .play */
  .cs, .mp, .fl-panel, .pv-panel, .ep-panel, .ec-panel,
  .rm-panel, .tz-panel, .cont-panel { position: relative; }

  section.play :is(.cs, .mp, .fl-panel, .pv-panel, .ep-panel, .ec-panel, .rm-panel, .tz-panel, .cont-panel)::after {
    content: ""; position: absolute; left: 16px; right: 16px; top: 2px; height: 2px;
    border-radius: 3px; pointer-events: none; z-index: 4;
    background: linear-gradient(90deg, rgba(200,98,58,0), rgba(200,98,58,.6), rgba(200,98,58,0));
    box-shadow: 0 0 11px rgba(200,98,58,.4);
    animation: glScan 5.6s ease-in-out infinite;
  }

  /* ---- 4 · Vida en grillas de chips / tarjetas: íconos que flotan ---------*/
  section.play :is(.pb-item .pic, .ev-chip .ec, .ev-chip .ec2,
                   .io-doc .di, .tiles .tile .ic, .cu-card .cu-ic, .nf-ct .nfi) {
    animation: glFloat 4.2s ease-in-out infinite; will-change: transform;
  }
  /* escalonado por posición dentro de la grilla */
  section.play :is(.pb-item, .ev-chip, .io-doc, .tile, .cu-card):nth-child(2) :is(.pic,.ec,.ec2,.di,.ic,.cu-ic){ animation-delay:.45s; }
  section.play :is(.pb-item, .ev-chip, .io-doc, .tile, .cu-card):nth-child(3) :is(.pic,.ec,.ec2,.di,.ic,.cu-ic){ animation-delay:.9s; }
  section.play :is(.pb-item, .ev-chip, .io-doc, .tile, .cu-card):nth-child(4) :is(.pic,.ec,.ec2,.di,.ic,.cu-ic){ animation-delay:1.35s; }
  section.play :is(.pb-item, .ev-chip, .io-doc, .tile, .cu-card):nth-child(5) :is(.pic,.ec,.ec2,.di,.ic,.cu-ic){ animation-delay:1.8s; }
  section.play :is(.pb-item, .ev-chip, .io-doc, .tile, .cu-card):nth-child(6) :is(.pic,.ec,.ec2,.di,.ic,.cu-ic){ animation-delay:2.25s; }

  /* ---- 5 · Alertas que pulsan (barras, pines y filas en rojo) -------------*/
  section.play :is(.mo-fillb.alert, .mo-fillb.warn, .io-fill.alert) { animation: glBarGlow 2.4s ease-in-out infinite; }
  section.play .mp-pin.alert .pd { animation: glPinPulse 1.8s ease-in-out infinite; }
  section.play .cf-tk.bad { animation: glBadGlow 2.7s ease-in-out infinite; }

  /* ---- 6 · Punto "en vivo" donde exista un indicador de estado ------------*/
  section.play :is(.intl-card.live .status .d, .live-dot, .dot-live) { animation: glLiveDot 2.2s ease-in-out infinite; }

  /* ---- 7 · IA por rol · barra de progreso del showreel --------------------*/
  .io-role { position: relative; overflow: hidden; }
  .io-role .gv-prog { position: absolute; left: 0; bottom: 0; height: 2px; width: 0; background: var(--color-rust); border-radius: 2px; pointer-events: none; }
  .io-role .gv-prog.run { animation: gvProg var(--gv-dwell, 5200ms) linear forwards; }
}
@keyframes gvProg { from { width: 0; } to { width: 100%; } }