/* ============================================================================
   Automatear · animación de carga (isotipo dibujado con trazo neón)
   ----------------------------------------------------------------------------
   Ajustes rápidos: todas las variables de :root de abajo.
   El recorrido está vectorizado del logo original (PNG 800px) con un error
   máximo de 0,66 px sobre el master, así que la silueta final coincide con él.
   ========================================================================== */

:root {
  /* --- identidad --- */
  --aut-color: #E85002;              /* naranja exacto del logo */
  --aut-bg: #000000;                 /* fondo de la pantalla de carga */

  /* --- tamaño --- */
  --aut-scale: 0.32;                 /* 1 = el logo ocupa el lado menor de la pantalla */
  --aut-stroke: 7;                   /* grosor del trazo, en unidades del logo (1024 = alto) */

  /* --- neón --- */
  --aut-glow: 1.1vmin;               /* radio base del resplandor */
  --aut-glow-core: rgba(255, 138, 66, 0.95);   /* halo interior, más brillante */
  --aut-glow-far: rgba(232, 80, 2, 0.55);      /* halo exterior, más difuso */
  --aut-tip-color: #FFB683;          /* punta: un poco más clara que el trazo */

  /* --- tiempos (total ≈ 2,5 s) --- */
  --aut-t-trace: 1.6s;               /* entrada de las líneas + dibujo del contorno
                                        (el reparto entrada/dibujo es 25 % / 75 %,
                                        fijado en los keyframes aut-trace) */
  --aut-t-fill: 0.4s;                /* relleno y apagado del neón */
  --aut-t-hold: 0.4s;                /* pausa con el logo ya sólido */
  --aut-t-out: 0.5s;                 /* desvanecido de la pantalla de carga */
}

/* mientras carga, la página no debe poder scrollearse por detrás */
html.aut-loading, html.aut-loading body { overflow: hidden; }

.aut-loader {
  position: fixed;
  inset: 0;
  z-index: 2147483000;
  background: var(--aut-bg);
  display: block;
  opacity: 1;
  will-change: opacity;
}

.aut-loader__svg {
  display: block;
  width: 100%;
  height: 100%;
  /* el filtro vive en el <svg>, que mide exactamente el viewport: así el
     resplandor no obliga al navegador a rasterizar las larguísimas líneas
     de entrada que quedan fuera de pantalla */
  filter:
    drop-shadow(0 0 var(--aut-glow) var(--aut-glow-core))
    drop-shadow(0 0 calc(var(--aut-glow) * 3) var(--aut-glow-far));
}

.aut-loader__stage {
  /* escala el logo alrededor del centro del viewBox. Se escribe con translate
     explícito y origen 0 0 para no depender de transform-box en navegadores viejos. */
  transform-box: view-box;
  transform-origin: 0 0;
  transform: translate(512px, 512px) scale(var(--aut-scale)) translate(-512px, -512px);
}

.aut-loader__fill {
  fill: var(--aut-color);
  fill-rule: evenodd;     /* conserva el hueco circular y los espacios negativos */
  opacity: 0;
}

.aut-loader__trace {
  fill: none;
  stroke: var(--aut-color);
  stroke-width: var(--aut-stroke);
  stroke-linecap: round;
  stroke-linejoin: round;
  stroke-dasharray: 0 1000;
  stroke-dashoffset: 0;
}

.aut-loader__trace--hole { opacity: 0; }

/* la punta: un tramo corto y más claro montado sobre el trazo. Sin filtro
   propio (lo heredaría con un bbox enorme); el brillo lo aporta el del <svg>. */
.aut-loader__tip {
  stroke: var(--aut-tip-color);
  stroke-width: calc(var(--aut-stroke) * 0.9);
  stroke-dasharray: 26 1000;
  opacity: 0;
}

/* ------------------------------- animación ------------------------------- */

.aut-loader--play .aut-loader__trace--a,
.aut-loader--play .aut-loader__trace--b {
  animation:
    aut-trace var(--aut-t-trace) linear forwards,
    aut-stroke-out var(--aut-t-fill) linear var(--aut-t-trace) forwards;
}

.aut-loader--play .aut-loader__tip {
  animation:
    aut-tip var(--aut-t-trace) linear forwards,
    aut-tip-in var(--aut-t-trace) linear forwards,
    aut-stroke-out calc(var(--aut-t-fill) * 0.5) linear var(--aut-t-trace) forwards;
}

.aut-loader--play .aut-loader__trace--hole {
  animation:
    aut-hole calc(var(--aut-t-trace) * 0.68) cubic-bezier(0.45, 0, 0.25, 1) calc(var(--aut-t-trace) * 0.25) both,
    aut-stroke-out var(--aut-t-fill) linear var(--aut-t-trace) forwards;
}

.aut-loader--play .aut-loader__fill {
  animation: aut-fill calc(var(--aut-t-fill) * 0.6) ease-out var(--aut-t-trace) forwards;
}

.aut-loader--play .aut-loader__svg {
  animation: aut-glow-out var(--aut-t-fill) ease-out var(--aut-t-trace) forwards;
}

/* Recorrido de la punta. pathLength="1000" en los dos trazos, así que todo va
   en milésimas de recorrido y una sola animación sirve para ambos: las líneas
   de entrada se generaron con largos proporcionales a su mitad de contorno.
   0 % → 25 %  la línea entra desde fuera de pantalla y desacelera
   25 %        llega al contorno (milésima 787.7) sin salto de velocidad
   25 % → 100 % dibuja su mitad del contorno y frena al encontrarse con la otra */
@keyframes aut-trace {
       0% { stroke-dasharray: 0 1000; stroke-dashoffset: 0; }
    1.75% { stroke-dasharray: 95 1000; stroke-dashoffset: -2.2; }
    7.14% { stroke-dasharray: 95 1000; stroke-dashoffset: -261.81; }
   14.29% { stroke-dasharray: 95 1000; stroke-dashoffset: -513.48; }
   21.43% { stroke-dasharray: 95 1000; stroke-dashoffset: -659.31; }
      25% { stroke-dasharray: 95 1000; stroke-dashoffset: -692.7; }
   28.57% { stroke-dasharray: 95 1000; stroke-dashoffset: -712.43; }
   35.71% { stroke-dasharray: 95 1000; stroke-dashoffset: -749; }
   42.86% { stroke-dasharray: 95 1000; stroke-dashoffset: -781.77; }
    44.5% { stroke-dasharray: 96.04 1000; stroke-dashoffset: -787.7; }
      50% { stroke-dasharray: 117.94 1000; stroke-dashoffset: -787.7; }
   57.14% { stroke-dasharray: 142.97 1000; stroke-dashoffset: -787.7; }
   64.29% { stroke-dasharray: 164.17 1000; stroke-dashoffset: -787.7; }
   71.43% { stroke-dasharray: 181.49 1000; stroke-dashoffset: -787.7; }
   78.57% { stroke-dasharray: 194.97 1000; stroke-dashoffset: -787.7; }
   85.71% { stroke-dasharray: 204.59 1000; stroke-dashoffset: -787.7; }
   92.86% { stroke-dasharray: 210.38 1000; stroke-dashoffset: -787.7; }
     100% { stroke-dasharray: 212.3 1000; stroke-dashoffset: -787.7; }
}

/* el contorno del hueco circular, sincronizado para terminar antes del relleno.
   La opacidad arranca en 0 para que el tramo de largo cero no deje un punto
   suelto en el centro del logo durante la entrada de las líneas. */
@keyframes aut-hole {
  0%   { stroke-dasharray: 0 1000; opacity: 0; }
  2%   { opacity: 1; }
  100% { stroke-dasharray: 1000 1000; opacity: 1; }
}

@keyframes aut-fill {
  from { opacity: 0; }
  to   { opacity: 1; }
}

/* el trazo se apaga cuando el relleno ya está puesto: el resultado final es
   exactamente la silueta del logo, sin el engrosamiento del stroke */
@keyframes aut-stroke-out {
  0%, 45% { opacity: 1; }
  100%    { opacity: 0; }
}

/* la punta viaja pegada a la cabeza del trazo */
@keyframes aut-tip {
       0% { stroke-dashoffset: 26; }
       5% { stroke-dashoffset: -234.93; }
      10% { stroke-dashoffset: -444.16; }
      15% { stroke-dashoffset: -601.7; }
      20% { stroke-dashoffset: -707.55; }
      25% { stroke-dashoffset: -761.7; }
      30% { stroke-dashoffset: -789.06; }
      35% { stroke-dashoffset: -814.54; }
      40% { stroke-dashoffset: -838.13; }
      45% { stroke-dashoffset: -859.83; }
      50% { stroke-dashoffset: -879.64; }
      55% { stroke-dashoffset: -897.57; }
      60% { stroke-dashoffset: -913.61; }
      65% { stroke-dashoffset: -927.77; }
      70% { stroke-dashoffset: -940.03; }
      75% { stroke-dashoffset: -950.41; }
      80% { stroke-dashoffset: -958.9; }
      85% { stroke-dashoffset: -965.51; }
      90% { stroke-dashoffset: -970.23; }
      95% { stroke-dashoffset: -973.06; }
     100% { stroke-dashoffset: -974; }
}

@keyframes aut-tip-in {
  0%       { opacity: 0; }
  3%, 100% { opacity: 1; }
}

@keyframes aut-glow-out {
  from {
    filter:
      drop-shadow(0 0 var(--aut-glow) var(--aut-glow-core))
      drop-shadow(0 0 calc(var(--aut-glow) * 3) var(--aut-glow-far));
  }
  to {
    filter:
      drop-shadow(0 0 0 rgba(255, 138, 66, 0))
      drop-shadow(0 0 0 rgba(232, 80, 2, 0));
  }
}

/* en pantallas chicas alcanza con un solo halo: mismo aspecto, la mitad de
   trabajo de composición por frame */
@media (max-width: 640px) {
  .aut-loader__svg { filter: drop-shadow(0 0 calc(var(--aut-glow) * 2) var(--aut-glow-core)); }
  @keyframes aut-glow-out {
    from { filter: drop-shadow(0 0 calc(var(--aut-glow) * 2) var(--aut-glow-core)); }
    to   { filter: drop-shadow(0 0 0 rgba(255, 138, 66, 0)); }
  }
}

/* --------------------------------- salida -------------------------------- */

.aut-loader--out {
  opacity: 0;
  pointer-events: none;
  transition: opacity var(--aut-t-out) ease;
}

/* ---------------------- preferencia de movimiento reducido ---------------- */

.aut-loader--reduced .aut-loader__svg { filter: none; }
.aut-loader--reduced .aut-loader__fill { opacity: 1; }
.aut-loader--reduced .aut-loader__trace,
.aut-loader--reduced .aut-loader__tip { display: none; }

@media (prefers-reduced-motion: reduce) {
  .aut-loader__svg { filter: none; }
  .aut-loader__fill { opacity: 1; }
  .aut-loader__trace,
  .aut-loader__tip { display: none; }
  .aut-loader--play .aut-loader__trace--a,
  .aut-loader--play .aut-loader__trace--b,
  .aut-loader--play .aut-loader__trace--hole,
  .aut-loader--play .aut-loader__tip,
  .aut-loader--play .aut-loader__fill,
  .aut-loader--play .aut-loader__svg { animation: none; }
}