/* El arranque con el logo (static/js/arranque.js), en el móvil y en el ordenador. Solo se anima la transformación y la opacidad (lo
   que mueve la tarjeta gráfica), para que no dé tirones en un teléfono. El logo es vectorial (brand/tkv-arranque.svg): nítido a
   cualquier tamaño. */
.arranque {
  --arranque-fondo: #070a0d;
  --arranque-centro: #0c1a26;
  --arranque-azul: rgba(0, 160, 255, .22);
  --arranque-luz: rgba(235, 248, 255, .9);
  --arranque-curva: cubic-bezier(.16, 1, .3, 1);
  position: fixed;
  inset: 0;
  z-index: 2147483000;
  display: grid;
  place-items: center;
  background: radial-gradient(120% 80% at 50% 46%, var(--arranque-centro) 0%, var(--arranque-fondo) 62%);
  transition: opacity .4s cubic-bezier(.4, 0, .2, 1);
  -webkit-tap-highlight-color: transparent;
}
.arranque > * { grid-area: 1 / 1; }
.arranque__halo {
  width: clamp(260px, 66vmin, 440px);
  aspect-ratio: 1;
  border-radius: 50%;
  background: radial-gradient(circle, var(--arranque-azul) 0%, transparent 66%);
  animation: arranque-halo 1.1s var(--arranque-curva) backwards;
}
.arranque__logo {
  position: relative;
  overflow: hidden;
  width: clamp(150px, 38vmin, 230px);
  aspect-ratio: 206 / 90;
  background: url("../brand/tkv-arranque.svg") center / contain no-repeat;
  -webkit-mask: url("../brand/tkv-arranque.svg") center / contain no-repeat;   /* el brillo, solo dentro de las letras */
  mask: url("../brand/tkv-arranque.svg") center / contain no-repeat;
  animation: arranque-logo .7s var(--arranque-curva) backwards;
  transition: transform .4s cubic-bezier(.4, 0, .2, 1);
}
.arranque__brillo {
  position: absolute;
  inset: -40% -60%;
  background: linear-gradient(105deg, transparent 40%, var(--arranque-luz) 50%, transparent 60%);
  transform: translateX(-60%);
  animation: arranque-brillo .8s cubic-bezier(.45, 0, .25, 1) .3s forwards;
}
.arranque--sale { opacity: 0; pointer-events: none; }
.arranque--sale .arranque__logo { transform: scale(1.06); }

@keyframes arranque-logo { from { opacity: 0; transform: translateY(12px) scale(.9); } }
@keyframes arranque-halo { from { opacity: 0; transform: scale(.55); } }
@keyframes arranque-brillo { to { transform: translateX(60%); } }