/* Entrada del logo mientras arranca la app: la estrella gira y se asienta, aparece «maen», se ilumina «IA» y cae el punto.
   Va por encima del aviso de la App Store y de la portada; app.js la desvanece al terminar (hideLoading). */
#app-loading{z-index:210;overflow:hidden;gap:14px;transition:opacity .5s ease,transform .5s ease,filter .5s ease}
#app-loading.is-leaving{opacity:0;transform:scale(1.06);filter:blur(6px);pointer-events:none}
.intro-glow{position:absolute;left:50%;top:50%;width:min(130vw,640px);aspect-ratio:1;border-radius:50%;background:radial-gradient(circle,color-mix(in srgb,var(--accent) 34%,transparent) 0,color-mix(in srgb,var(--accent) 10%,transparent) 38%,transparent 68%);transform:translate(-50%,-50%) scale(.3);opacity:0;animation:intro-glow 1.4s cubic-bezier(.2,.8,.2,1) .1s forwards,intro-breathe 4s ease-in-out 1.5s infinite}
#app-loading .intro-brand{position:relative;font-size:clamp(40px,12vw,56px);gap:10px}
.intro-brand .brandmark{position:relative;display:inline-block;font-size:1.12em;color:var(--accent);animation:intro-star .9s cubic-bezier(.3,1.5,.5,1) both,intro-spin 9s linear 1.6s infinite}
.intro-brand .brandmark::after{content:'';position:absolute;inset:-10%;border:2px solid var(--accent);border-radius:50%;opacity:0;animation:intro-ring .9s ease-out .55s}
.intro-letter,.intro-brand .brand-ai{display:inline-block;opacity:0;animation:intro-letter .55s cubic-bezier(.2,.8,.2,1) forwards}
.intro-letter:nth-child(1){animation-delay:.45s}.intro-letter:nth-child(2){animation-delay:.53s}.intro-letter:nth-child(3){animation-delay:.61s}.intro-letter:nth-child(4){animation-delay:.69s}
.intro-brand .brand-ai{animation:intro-letter .55s cubic-bezier(.2,.8,.2,1) .85s forwards,intro-shine 1.2s ease-out 1.25s}
.intro-brand .dot{display:inline-block;opacity:0;transform-origin:50% 85%;animation:intro-dot .6s cubic-bezier(.3,1.6,.5,1) 1.15s forwards}
.intro-tagline{position:relative;margin:0;color:var(--muted);font:500 17px/1.4 'DM Sans',sans-serif;letter-spacing:.02em;opacity:0;animation:intro-letter .6s ease-out 1.35s forwards}
#app-loading .loading-dots{position:absolute;bottom:calc(48px + env(safe-area-inset-bottom,0px));opacity:0;animation:intro-fade .4s ease 3.4s forwards}
@keyframes intro-glow{to{opacity:1;transform:translate(-50%,-50%) scale(1)}}
@keyframes intro-breathe{50%{transform:translate(-50%,-50%) scale(1.08)}}
@keyframes intro-star{0%{opacity:0;transform:scale(0) rotate(-200deg)}70%{opacity:1;transform:scale(1.2) rotate(15deg)}100%{transform:scale(1) rotate(0)}}
@keyframes intro-spin{to{rotate:360deg}}
@keyframes intro-ring{0%{opacity:.7;transform:scale(.6)}100%{opacity:0;transform:scale(2.2)}}
@keyframes intro-letter{from{opacity:0;transform:translateY(.35em);filter:blur(6px)}to{opacity:1;transform:none;filter:none}}
@keyframes intro-shine{0%{text-shadow:0 0 0 transparent}40%{text-shadow:0 0 .5em color-mix(in srgb,var(--accent) 80%,transparent)}100%{text-shadow:0 0 0 transparent}}
@keyframes intro-dot{0%{opacity:0;transform:translateY(-1.2em) scale(.4)}60%{opacity:1;transform:translateY(0) scale(1.35,.75)}100%{opacity:1;transform:none}}
@keyframes intro-fade{to{opacity:1}}
@media(prefers-reduced-motion:reduce){#app-loading,#app-loading *,#app-loading *::after{animation:none!important;transition:none!important}.intro-glow,.intro-letter,.intro-brand .brand-ai,.intro-brand .dot,.intro-tagline,#app-loading .loading-dots{opacity:1}.intro-glow{transform:translate(-50%,-50%)}}
/* Quien vuelve a entrar: el logo aparece ya completo y se desvanece hacia su día, sin escribirse letra a letra. */
#app-loading.returning .intro-letter,#app-loading.returning .intro-brand .brand-ai,#app-loading.returning .intro-brand .dot,#app-loading.returning .intro-tagline{animation:none;opacity:1;transform:none;filter:none}
#app-loading.returning .intro-brand .brandmark{animation:intro-spin 9s linear infinite}#app-loading.returning .intro-brand .brandmark::after{animation:none}
#app-loading.returning .intro-glow{animation:intro-glow .5s ease-out forwards,intro-breathe 4s ease-in-out .5s infinite}