/* Pantalla de entrada: la misma historia que el arranque de las apps (el degradado de Ibari, las alondras del logo y el nombre),
   antes de que cargue el resto de la página. Solo aparece la primera vez de cada visita y nunca con «reducir movimiento». */
.intro { display: none; }
html.intro-on { overflow: hidden; }
html.intro-on .intro { display: grid; }
.intro {
  position: fixed; inset: 0; z-index: 9999; place-items: center; text-align: center; color: #fff; padding: 24px;
  background: linear-gradient(155deg, #0a3a66 0%, #0b6e99 50%, #18c8cb 100%);
  transition: opacity .55s ease, visibility .55s ease;
}
[data-theme="dark"] .intro { background: linear-gradient(155deg, #0b6e99 0%, #0a4f73 50%, #06283d 100%); }
.intro.salir { opacity: 0; visibility: hidden; }

.intro-in { position: relative; z-index: 1; display: grid; justify-items: center; gap: 10px; }
.intro-logo { width: 84px; height: 84px; animation: intro-sube .7s .15s cubic-bezier(.2,.7,.2,1) both; }
.intro-nombre { margin: 6px 0 0; font-size: 44px; font-weight: 600; letter-spacing: -.01em; line-height: 1.1; animation: intro-sube .7s .45s ease both; }
.intro-lema { margin: 0; font-size: 21px; font-weight: 600; animation: intro-sube .7s .8s ease both; }
.intro-sub { margin: 0; font-size: 15px; animation: intro-sube .7s 1.1s ease both; max-width: 30ch; }
.intro-barra { width: 150px; height: 4px; border-radius: 4px; background: rgba(255,255,255,.28); overflow: hidden; margin-top: 18px; animation: intro-sube .5s 1.2s ease both; }
.intro-barra i { display: block; height: 100%; width: 0; background: #fff; border-radius: 4px; animation: intro-carga 1.7s 1.3s ease-in-out both; }
.intro-saltar { position: absolute; right: 18px; bottom: 18px; background: rgba(255,255,255,.16); color: #fff; border: 1px solid rgba(255,255,255,.4); border-radius: 999px; padding: 8px 16px; font: inherit; font-size: 14px; cursor: pointer; }
.intro-saltar:hover { background: rgba(255,255,255,.28); }

/* Las alondras del logo cruzan la pantalla a distintos tamaños y rumbos */
.intro-ave { position: absolute; background: #fff; pointer-events: none;
  -webkit-mask: url("../assets/lark.png") center / contain no-repeat; mask: url("../assets/lark.png") center / contain no-repeat; }
.intro-ave.a1 { width: 190px; height: 178px; right: -40px; top: 6%; --r: -10deg; animation: intro-vuelo 3.2s .2s ease-out both; }
.intro-ave.a2 { width: 120px; height: 112px; left: -30px; bottom: 10%; --r: 12deg; transform: scaleX(-1); animation: intro-vuelo-i 3.2s .5s ease-out both; }
.intro-ave.a3 { width: 54px; height: 50px; right: 22%; top: 26%; --r: -14deg; animation: intro-vuelo 3s .9s ease-out both; }
.intro-ave.a4 { width: 38px; height: 36px; left: 18%; top: 18%; --r: 8deg; transform: scaleX(-1); animation: intro-vuelo-i 3s 1.2s ease-out both; }

@keyframes intro-sube { from { opacity: 0; transform: translateY(12px); } to { opacity: 1; transform: none; } }
@keyframes intro-carga { from { width: 0; } to { width: 100%; } }
@keyframes intro-vuelo { 0% { opacity: 0; transform: translate(60px, 30px) rotate(var(--r)); } 25% { opacity: .22; } 100% { opacity: .3; transform: translate(0, 0) rotate(var(--r)); } }
@keyframes intro-vuelo-i { 0% { opacity: 0; transform: scaleX(-1) translate(60px, 30px) rotate(var(--r)); } 25% { opacity: .22; } 100% { opacity: .3; transform: scaleX(-1) translate(0, 0) rotate(var(--r)); } }

@media (max-width: 560px) {
  .intro-nombre { font-size: 36px; }
  .intro-lema { font-size: 18px; }
  .intro-ave.a1 { width: 140px; height: 131px; }
}
@media (prefers-reduced-motion: reduce) { .intro { display: none !important; } html.intro-on { overflow: auto; } }