/* v87.08 · Escena del splash de arranque (animación aprobada: Splash.html).
   Compartida por /login (con la tarjeta de acceso encima) y por la app
   (app.html, cada vez que se carga). Todo cuelga de .tfsplash y las
   animaciones llevan el prefijo "tfs-" para no chocar con app.css (que ya
   tiene, p. ej., su propio @keyframes fade). */
.tfsplash{position:fixed;inset:0;overflow:hidden;cursor:pointer;background:#7FB2DF}
.tfsplash .sky{position:absolute;inset:-3%;
  background:linear-gradient(180deg,#4E93C9 0%,#5498CC 22%,#7FB2D9 58%,#A0C1D7 100%);
  animation:tfs-skydrift 6s ease-out forwards}
@keyframes tfs-skydrift{from{transform:translateY(0) scale(1.0)}to{transform:translateY(2.2%) scale(1.05)}}

.tfsplash .cloud{position:absolute;pointer-events:none;filter:blur(14px)}
.tfsplash .cloud i{position:absolute;border-radius:50%;background:rgba(255,255,255,.85)}
.tfsplash .c1{left:64%;top:12%;width:46vw;height:12vw;opacity:.5;filter:blur(10px);animation:tfs-drift1 6s linear forwards}
.tfsplash .c1 i:nth-child(1){left:0;top:38%;width:55%;height:52%}
.tfsplash .c1 i:nth-child(2){left:26%;top:8%;width:44%;height:70%}
.tfsplash .c1 i:nth-child(3){left:52%;top:30%;width:48%;height:56%}
.tfsplash .c2{left:-12%;top:34%;width:64vw;height:16vw;opacity:.38;animation:tfs-drift2 6s linear forwards}
.tfsplash .c2 i:nth-child(1){left:0;top:34%;width:52%;height:58%}
.tfsplash .c2 i:nth-child(2){left:24%;top:0;width:46%;height:78%}
.tfsplash .c2 i:nth-child(3){left:50%;top:28%;width:50%;height:60%}
.tfsplash .c3{left:24%;top:73%;width:110vw;height:24vw;opacity:.6;filter:blur(20px);animation:tfs-drift3 6s linear forwards}
.tfsplash .c3 i:nth-child(1){left:0;top:30%;width:50%;height:62%}
.tfsplash .c3 i:nth-child(2){left:22%;top:0;width:48%;height:82%}
.tfsplash .c3 i:nth-child(3){left:48%;top:24%;width:52%;height:66%}
@keyframes tfs-drift1{to{transform:translateX(-6vw)}}
@keyframes tfs-drift2{to{transform:translateX(-11vw)}}
@keyframes tfs-drift3{to{transform:translateX(-20vw)}}

.tfsplash .flight{position:absolute;left:-40%;top:64%;width:186%;transform:rotate(-15deg);transform-origin:left center;pointer-events:none}
.tfsplash .trail{position:absolute;height:5px;width:2%;
  background:linear-gradient(90deg,rgba(255,255,255,0) 0%,rgba(255,255,255,.25) 35%,rgba(255,255,255,.85) 100%);
  filter:blur(2.5px);border-radius:99px;transform-origin:right center;
  animation:tfs-trailgrow 4.6s cubic-bezier(.4,.1,.3,1) .15s forwards;opacity:0}
.tfsplash .t2{right:50.0%;top:67.0%}
.tfsplash .t1{right:62.0%;top:47.0%;height:3.5px;
  background:linear-gradient(90deg,rgba(255,255,255,0) 0%,rgba(255,255,255,.18) 35%,rgba(255,255,255,.6) 100%)}
@keyframes tfs-trailgrow{from{width:2%;opacity:0}10%{opacity:.95}to{width:140%;opacity:.95}}
.tfsplash .plane{position:absolute;left:4%;top:0;width:46%;transform:translateX(0);
  animation:tfs-fly 4.6s cubic-bezier(.4,.1,.3,1) .15s forwards;
  filter:drop-shadow(0 6px 18px rgba(10,30,60,.18))}
.tfsplash .plane img{width:100%;height:auto;display:block;transform:rotate(9deg)}
@keyframes tfs-fly{from{transform:translateX(0) scale(.86)}to{transform:translateX(128%) scale(1)}}

.tfsplash .overlay{position:absolute;left:0;right:0;bottom:0;
  padding:0 22px calc(10vh + env(safe-area-inset-bottom,0px));text-align:center;pointer-events:none}
.tfsplash .wm{font-family:Marcellus,Georgia,serif;color:#111417;font-size:clamp(2.5rem,11vw,3.6rem);line-height:1.06;
  opacity:0;transform:translateY(12px);animation:tfs-reveal 1s ease-out 2.6s forwards}
/* v87.09 · dentro de .wm va el wordmark .tf1 de /marca.css (TravelFace One) */
.tfsplash .overlay .by{margin-top:.35rem;font-family:Inter,Arial,sans-serif;font-size:clamp(.72rem,2.8vw,.82rem);letter-spacing:.06em;color:#22303C;
  opacity:0;animation:tfs-fade .9s ease-out 3s forwards}
.tfsplash .overlay .by b{color:#3F6690;font-weight:600}
.tfsplash .tg{margin-top:.5rem;font-family:Inter,Arial,sans-serif;color:#22303C;font-size:clamp(.8rem,3.2vw,.95rem);
  opacity:0;animation:tfs-fade .9s ease-out 3.4s forwards}
@keyframes tfs-reveal{to{opacity:1;transform:translateY(0)}}
@keyframes tfs-fade{to{opacity:1}}

/* Un toque: todo salta a su fotograma final */
.splash-saltado .tfsplash,.splash-saltado .tfsplash *{animation-delay:0s!important;animation-duration:.01s!important}

@media(max-height:560px){.tfsplash .overlay{display:none}}
@media (prefers-reduced-motion: reduce){
  .tfsplash .sky,.tfsplash .c1,.tfsplash .c2,.tfsplash .c3{animation:none}
  .tfsplash .trail{animation:none;width:58%;opacity:.9}
  .tfsplash .plane{animation:none;transform:translateX(128%) scale(1)}
  .tfsplash .wm,.tfsplash .tg,.tfsplash .overlay .by{animation:none;opacity:1;transform:none}
}

/* ---- Versión de la app (app.html): se superpone a todo y se desvanece sola ---- */
.tfsplash.tfs-app{z-index:900;transition:opacity .45s ease}
.tfsplash.tfs-app.tfs-fuera{opacity:0;pointer-events:none}