/* Logo animada das telas de carregamento — vetores do manual da marca.
   Medidas em rem; espaçamentos na grade de 8px (0.5rem), com 4px (0.25rem) como menor valor.
   Sequência: o pin de GPS cai → a águia abre as asas → o T sobe e a estrela gira
   → as letras entram na inclinação de 21° → a águia plana enquanto carrega. */
.ll {
  --ll-eagle: #2350a9;
  --ll-pin: #fbc707;
  --ll-word: #2350a9;
  --ll-star: #2350a9;
  --ll-track: rgb(14 27 61 / 0.12);
  --ll-bar: #2350a9;
  --ll-text: #47557a;
  display: inline-grid;
  justify-items: center;
  gap: 1.5rem;
}
.ll--inverse {
  --ll-eagle: #ffffff;
  --ll-word: #ffffff;
  --ll-star: #2350a9;
  --ll-track: rgb(255 255 255 / 0.16);
  --ll-bar: #fbc707;
  --ll-text: rgb(255 255 255 / 0.8);
}
.ll__svg { display: block; width: var(--ll-size, 16.25rem); height: auto; overflow: visible; }
.ll--mark { gap: 1rem; }
.ll--mark .ll__svg { width: var(--ll-size, 4.75rem); }
.ll__svg g, .ll__svg path { transform-box: fill-box; }

.ll-pin { fill: var(--ll-pin); transform-origin: 50% 100%; animation: ll-pin-drop 0.8s cubic-bezier(0.22, 1, 0.36, 1) both; }
.ll-glide { transform-origin: 50% 50%; animation: ll-glide 2.8s ease-in-out 1.6s infinite; }
.ll-eagle { fill: var(--ll-eagle); transform-origin: 50% 62%; animation: ll-eagle-open 0.85s cubic-bezier(0.22, 1, 0.36, 1) 0.3s both; }
.ll-t { fill: var(--ll-pin); transform-origin: 50% 100%; animation: ll-t-rise 0.55s cubic-bezier(0.22, 1, 0.36, 1) 0.75s both; }
.ll-star { fill: var(--ll-star); transform-origin: 50% 50%; animation: ll-star-pop 0.65s cubic-bezier(0.34, 1.56, 0.64, 1) 1s both; }
.ll-letter { fill: var(--ll-word); animation: ll-letter 0.6s cubic-bezier(0.22, 1, 0.36, 1) both; animation-delay: calc(0.95s + var(--n) * 45ms); }

.ll__track { position: relative; display: block; width: min(10.5rem, 64%); height: 0.25rem; border-radius: 0.25rem; overflow: hidden; background: var(--ll-track); animation: ll-fade 0.4s ease 1.2s both; }
.ll__track::before { content: ''; position: absolute; inset: 0 auto 0 0; width: 44%; background: var(--ll-bar); transform: translateX(-130%) skewX(-21deg); animation: ll-bar 1.3s cubic-bezier(0.65, 0, 0.35, 1) 1.2s infinite; }
.ll--mark .ll__track { width: 5.25rem; height: 0.1875rem; animation-delay: 0.85s; }
.ll--mark .ll__track::before { animation-delay: 0.85s; }
.ll--mark .ll-glide { animation-delay: 1.3s; }
.ll--inline { grid-template-columns: auto auto; justify-items: start; align-items: center; column-gap: 1rem; row-gap: 0.5rem; }
.ll--inline .ll__svg { grid-row: 1 / 3; width: var(--ll-size, 2rem); }
.ll--inline .ll__label { grid-column: 2; grid-row: 1; margin: 0; align-self: end; animation: none; }
.ll--inline .ll__track { grid-column: 2; grid-row: 2; width: 4.75rem; height: 0.1875rem; align-self: start; animation-delay: 0.6s; }
.ll--inline .ll__track::before { animation-delay: 0.6s; }
.ll--inline .ll-glide { animation-delay: 1.3s; }
.ll__label { margin: -0.5rem 0 0; font-size: 0.875rem; font-weight: 600; letter-spacing: 0.01em; color: var(--ll-text); animation: ll-fade 0.4s ease 0.6s both; }

@keyframes ll-pin-drop {
  0% { transform: translateY(-150%) scale(0.92, 1.12); opacity: 0; }
  30% { opacity: 1; }
  55% { transform: translateY(6%) scale(1.1, 0.84); }
  76% { transform: translateY(-5%) scale(0.97, 1.04); }
  100% { transform: none; }
}
@keyframes ll-eagle-open {
  0% { transform: scale(0.1, 0.5); opacity: 0; }
  20% { opacity: 1; }
  58% { transform: scale(1.08, 1.03); }
  80% { transform: scale(0.97, 1); }
  100% { transform: none; }
}
@keyframes ll-glide {
  0%, 100% { transform: none; }
  50% { transform: translateY(-5%) scaleX(0.96); }
}
@keyframes ll-t-rise { 0% { transform: translateY(40%) scaleY(0.2); opacity: 0; } 100% { transform: none; } }
@keyframes ll-star-pop { 0% { transform: scale(0) rotate(-216deg); opacity: 0; } 100% { transform: none; } }
@keyframes ll-letter { 0% { transform: translateX(-45%) skewX(-21deg); opacity: 0; } 100% { transform: none; } }
@keyframes ll-bar { to { transform: translateX(330%) skewX(-21deg); } }
@keyframes ll-fade { from { opacity: 0; } }

@media (prefers-reduced-motion: reduce) {
  .ll *, .ll *::before { animation: none !important; }
  .ll__track::before { transform: none; width: 100%; opacity: 0.45; }
}

/* ——— Splash de abertura do app (marcação no index.html, ciclo em src/lib/splash.ts) ——— */
.splash { --splash-band: 4.75rem; --splash-slant: 38.4vh; position: fixed; inset: 0; z-index: 100; font-family: 'Urbanist Variable', system-ui, sans-serif; }
.splash-seen .splash { display: none; }
.splash__bg { position: absolute; inset: 0; display: grid; place-items: center; padding: 1.5rem; background: #0e1b3d; cursor: pointer; }
.splash .ll { --ll-size: min(17.5rem, 70vw); }
.splash__sr { position: absolute; width: 0.0625rem; height: 0.0625rem; overflow: hidden; clip-path: inset(50%); white-space: nowrap; }
.splash__skip {
  position: absolute; right: 1.5rem; bottom: max(1.5rem, env(safe-area-inset-bottom));
  min-height: 2.75rem; padding: 0 1.5rem; border: 0.0625rem solid rgb(255 255 255 / 0.32); border-radius: 999rem;
  background: transparent; color: #fff; font-family: inherit; font-size: 0.9rem; font-weight: 600; line-height: 1; cursor: pointer;
  animation: ll-fade 0.4s ease 0.9s both;
}
.splash__skip:hover { background: rgb(255 255 255 / 0.1); }
.splash__skip:focus-visible { outline: 0.1875rem solid #fbc707; outline-offset: 0.25rem; }
.splash__band { position: absolute; top: 0; bottom: 0; left: 0; width: var(--splash-band); background: #fbc707; transform: translateX(calc(100vw + var(--splash-slant) / 2)) skewX(-21deg); }
.splash.is-leaving { pointer-events: none; }
.splash.is-leaving .splash__bg { animation: splash-wipe 0.9s cubic-bezier(0.76, 0, 0.24, 1) forwards; }
.splash.is-leaving .splash__band { animation: splash-band 0.9s cubic-bezier(0.76, 0, 0.24, 1) forwards; }
@keyframes splash-wipe {
  from { clip-path: polygon(0 0, calc(100% + var(--splash-slant)) 0, 100% 100%, 0 100%); }
  to { clip-path: polygon(0 0, calc(var(--splash-band) * -1) 0, calc(var(--splash-slant) * -1 - var(--splash-band)) 100%, 0 100%); }
}
@keyframes splash-band {
  from { transform: translateX(calc(100vw + var(--splash-slant) / 2)) skewX(-21deg); }
  to { transform: translateX(calc(var(--splash-slant) / -2 - var(--splash-band))) skewX(-21deg); }
}
/* Rede de segurança: se o app não subir, a splash não prende a tela */
.splash:not(.is-leaving) { animation: splash-failsafe 0s linear 8s forwards; }
@keyframes splash-failsafe { to { visibility: hidden; pointer-events: none; } }
@media (prefers-reduced-motion: reduce) {
  .splash.is-leaving { display: none; }
}