/* =========================================================================
   T&L Assist · Abertura "Pino + chegada do socorro"
   Duração: ~3,1 s de animação + 0,28 s de saída.
   Unidade: 1em = 1% da largura da tela (limitado a 4.4px em telas largas).
   NÃO altere tempos, curvas ou posições: são idênticos ao protótipo aprovado.
   ========================================================================= */
.tl-splash{
  --tls-navy:#0A0E1A; --tls-amber:#FCA308; --tls-orange:#FF7A1A; --tls-cream:#FBF3E8; --tls-muted:#8C93A8;
  --tls-display:'Bebas Neue',Impact,'Arial Narrow',sans-serif;
  --tls-mono:'JetBrains Mono',ui-monospace,Menlo,monospace;
  --W:66em; --road:54%;
  position:fixed; inset:0; z-index:2147483000;
  background:var(--tls-navy); overflow:hidden;
  font-size:min(1vw,4.4px);
  cursor:pointer; -webkit-tap-highlight-color:transparent;
  transition:opacity .28s ease;
}
.tl-splash.is-leaving{opacity:0}
.tl-splash *{box-sizing:border-box}

/* pista */
.tl-splash .tls-road{position:absolute;left:6%;right:6%;top:var(--road);height:2px;
  background:linear-gradient(90deg,transparent,#2A3350 18%,#2A3350 82%,transparent);transform:scaleX(0)}

/* pino de localização (cai no ponto onde o giroflex vai parar) */
.tl-splash .tls-pin{position:absolute;left:calc(50% + 15.7em);top:calc(var(--road) - 14.6em);
  width:12em;height:12em;margin-left:-6em;transform:translateY(-140em);z-index:4}
.tl-splash .tls-pin b{position:absolute;inset:0;border-radius:50% 50% 50% 0;transform:rotate(-45deg);
  background:linear-gradient(135deg,#FFB020,var(--tls-orange))}
.tl-splash .tls-pin b::after{content:"";position:absolute;inset:31%;border-radius:50%;background:var(--tls-navy)}
.tl-splash .tls-shadow{position:absolute;left:calc(50% + 15.7em);top:var(--road);width:11em;height:2.2em;
  margin:-1.1em 0 0 -5.5em;border-radius:50%;background:#000;opacity:0;filter:blur(1em)}
.tl-splash .tls-ripple{position:absolute;left:calc(50% + 15.7em);top:var(--road);width:30em;height:6em;
  margin:-3em 0 0 -15em;border-radius:50%;border:.5em solid var(--tls-amber);opacity:0;transform:scale(.2)}

/* guincho (logo oficial) */
.tl-splash .tls-rig{position:absolute;left:50%;top:var(--road);width:var(--W);aspect-ratio:1608/629;
  margin-left:calc(var(--W) / -2);transform:translateY(-100%) translateX(-150em);z-index:3}
.tl-splash .tls-body{position:absolute;inset:0;transform-origin:85% 100%}
.tl-splash .tls-truck{position:absolute;inset:0;width:100%;height:100%;object-fit:contain;display:block;user-select:none;-webkit-user-drag:none}
.tl-splash .tls-lines{position:absolute;right:104%;top:20%;width:60%;height:60%;display:flex;flex-direction:column;justify-content:space-around;opacity:0}
.tl-splash .tls-lines i{display:block;height:2px;border-radius:2px;background:linear-gradient(90deg,transparent,var(--tls-amber))}
.tl-splash .tls-lines i:nth-child(2){margin-left:30%}
.tl-splash .tls-lines i:nth-child(3){margin-left:12%}
.tl-splash .tls-glow{position:absolute;left:10%;right:18%;bottom:-16%;height:24%;border-radius:50%;
  background:radial-gradient(closest-side,#FFB020DD,#FF8A1A55 55%,transparent);filter:blur(.8em);opacity:0}
.tl-splash .tls-beacon{position:absolute;left:73.8%;top:4.6%;width:17%;aspect-ratio:1;margin:-8.5% 0 0 -8.5%;border-radius:50%;
  background:radial-gradient(circle,#FFF3C4 0%,#FFB020 30%,#FF7A1A55 55%,transparent 72%);opacity:0;mix-blend-mode:screen}

/* marca */
.tl-splash .tls-word{position:absolute;left:0;right:0;top:61%;text-align:center;
  font:400 12.5em/1 var(--tls-display);letter-spacing:.06em;color:#F4F6FB;white-space:nowrap}
.tl-splash .tls-word span{display:inline-block;opacity:0;transform:translateY(40%)}
.tl-splash .tls-word em{font-style:normal;color:var(--tls-amber)}
.tl-splash .tls-tag{position:absolute;left:0;right:0;top:71%;text-align:center;
  font:700 3.3em/1 var(--tls-mono);letter-spacing:.3em;color:var(--tls-muted);opacity:0}

/* luz do giroflex que abre o app (creme = fundo da tela de boas-vindas) */
.tl-splash .tls-iris{position:absolute;left:calc(50% + 15.7em);top:calc(var(--road) - 24.6em);
  width:20px;height:20px;margin:-10px;border-radius:50%;background:var(--tls-cream);transform:scale(0);z-index:8}

/* ---------------- roteiro (tempos em segundos) ---------------- */
.tl-splash .tls-pin{animation:tls-drop .6s cubic-bezier(.34,1.56,.64,1) .05s forwards,tls-toBeacon .7s cubic-bezier(.45,0,.25,1) .9s forwards}
.tl-splash .tls-pin b{animation:tls-squash .3s ease-out .5s}
.tl-splash .tls-shadow{animation:tls-shOn .5s ease-out .1s forwards,tls-fadeOut .25s linear .95s forwards}
.tl-splash .tls-ripple{animation:tls-ripple .7s ease-out .55s forwards}
.tl-splash .tls-road{animation:tls-road .5s cubic-bezier(.65,0,.35,1) .5s forwards}
.tl-splash .tls-rig{animation:tls-drive .9s cubic-bezier(.16,1,.3,1) .75s forwards}
.tl-splash .tls-lines{animation:tls-lines .95s linear .75s}
.tl-splash .tls-body{animation:tls-brake .6s cubic-bezier(.34,1.56,.64,1) 1.45s}
.tl-splash .tls-beacon{animation:tls-beacon .62s steps(1,end) 1.58s forwards}
.tl-splash .tls-glow{animation:tls-fadeIn .45s ease-out 1.5s forwards}
.tl-splash .tls-word span{animation:tls-rise .5s cubic-bezier(.16,1,.3,1) forwards;animation-delay:calc(1.85s + var(--i) * 45ms)}
.tl-splash .tls-tag{animation:tls-fadeIn .45s ease-out 2.2s forwards}
.tl-splash .tls-iris{animation:tls-iris .55s cubic-bezier(.7,0,.84,0) 2.5s forwards}

@keyframes tls-drop{to{transform:none}}
@keyframes tls-squash{0%{transform:rotate(-45deg)}40%{transform:rotate(-45deg) scale(1.12,.86)}100%{transform:rotate(-45deg)}}
@keyframes tls-toBeacon{0%{transform:none;opacity:1}55%{transform:translateY(-21em) scale(.75);opacity:1}100%{transform:translateY(-16.1em) scale(.18);opacity:0}}
@keyframes tls-shOn{to{opacity:.6}}
@keyframes tls-ripple{0%{opacity:.9;transform:scale(.2)}100%{opacity:0;transform:scale(1.6)}}
@keyframes tls-road{to{transform:scaleX(1)}}
@keyframes tls-drive{to{transform:translateY(-100%)}}
@keyframes tls-lines{0%{opacity:0}15%{opacity:1}70%{opacity:.7}100%{opacity:0;transform:translateX(-30%)}}
@keyframes tls-brake{0%{transform:none}35%{transform:rotate(1.6deg) scaleY(.96)}70%{transform:rotate(-.5deg) scaleY(1.01)}100%{transform:none}}
@keyframes tls-beacon{0%{opacity:1}22%{opacity:.1}42%{opacity:1}62%{opacity:.1}80%,100%{opacity:.8}}
@keyframes tls-fadeIn{to{opacity:1}}
@keyframes tls-fadeOut{to{opacity:0}}
@keyframes tls-rise{to{opacity:1;transform:none}}
@keyframes tls-iris{to{transform:scale(95)}}

/* Quem ativou "remover animações" no celular: logo parada por 0,9 s e saída suave. */
.tl-splash.is-calm *{animation:none!important}
.tl-splash.is-calm .tls-road{transform:scaleX(1)}
.tl-splash.is-calm .tls-rig{transform:translateY(-100%)}
.tl-splash.is-calm .tls-pin,.tl-splash.is-calm .tls-shadow,.tl-splash.is-calm .tls-ripple,.tl-splash.is-calm .tls-iris{display:none}
.tl-splash.is-calm .tls-glow{opacity:1}
.tl-splash.is-calm .tls-beacon{opacity:.8}
.tl-splash.is-calm .tls-word span{opacity:1;transform:none}
.tl-splash.is-calm .tls-tag{opacity:1}