/* TripFlow cinematic loading splash, 2026-10-22.
   Visual layer only: authentication, data loading and screen handoff remain unchanged. */
#startup-loader {
  position: fixed;
  inset: 0;
  z-index: 9999;
  display: grid;
  place-items: center;
  isolation: isolate;
  overflow: hidden;
  background: linear-gradient(108deg,#5652fb 0%,#3986ff 48%,#83e9f3 100%);
  color: #101d76;
  font-family: 'Inter', 'Poppins', sans-serif;
  transition: opacity .4s ease-out, visibility .4s ease-out;
}
#startup-loader, #startup-loader * { box-sizing: border-box; }
#startup-loader .tf-splash-scene {
  position:absolute; inset:-2%; z-index:-3;
  background: url('../assets/tripflow-splash-background.webp') center center / cover no-repeat;
  animation: tf-splash-drift 24s ease-in-out infinite alternate;
  will-change:transform;
}
#startup-loader .tf-splash-scene::before {
  content:''; position:absolute; inset:0;
  background: radial-gradient(circle at 53% 47%,rgba(255,255,255,.05),transparent 35%),linear-gradient(180deg,rgba(255,255,255,.02),rgba(27,67,219,.03));
}
#startup-loader .tf-splash-haze {
  position: absolute; inset: 0; z-index:-2; pointer-events:none;
  background:radial-gradient(circle at 47% 36%,rgba(255,255,255,.10),transparent 42%);
  animation: tf-haze 8s ease-in-out infinite alternate;
}
#startup-loader .tf-flight-trails {
  position:absolute;inset:0;width:100%;height:100%;z-index:-1;pointer-events:none;opacity:.70;
}
#startup-loader .tf-flight-trails path {
  fill:none;stroke:#fff;stroke-width:1.35;stroke-dasharray:5 12;stroke-linecap:round;
  animation:tf-route 17s linear infinite;
}
#startup-loader .tf-flight-trails path:last-child {opacity:.62;animation-direction:reverse;animation-duration:22s}
#startup-loader .tf-splash-plane {
  position:absolute;top:19%;left:-4%;z-index:-1;width:40px;height:40px;
  filter:drop-shadow(0 1px 8px rgba(255,255,255,.75));
  color:white;opacity:0;
  animation:tf-airplane 14s cubic-bezier(.27,.22,.72,.75) infinite;
}
#startup-loader .tf-splash-plane svg {display:block;width:100%;height:100%;transform:rotate(12deg)}
#startup-loader .tf-orb {position:absolute;border-radius:50%;z-index:-1;pointer-events:none;background:rgba(255,255,255,.85);box-shadow:0 0 20px 5px rgba(156,243,255,.7);animation:tf-orb-float 8s ease-in-out infinite alternate}
#startup-loader .tf-orb-1 {width:6px;height:6px;left:17%;top:29%;animation-delay:-2s}
#startup-loader .tf-orb-2 {width:4px;height:4px;left:78%;top:19%;animation-delay:-5s}
#startup-loader .tf-orb-3 {width:7px;height:7px;left:72%;top:73%;animation-delay:-3s}
#startup-loader .tf-orb-4 {width:5px;height:5px;left:24%;top:82%;animation-delay:-6s}
#startup-loader .tf-splash-card {
  width:min(660px,calc(100vw - 40px));
  min-height:460px;
  padding:70px 32px 54px;
  display:flex;flex-direction:column;align-items:center;justify-content:center;
  position:relative;
  border:1.5px solid rgba(255,255,255,.85);
  border-radius:36px;
  background:radial-gradient(ellipse at 64% 28%,rgba(255,255,255,.96),rgba(241,250,255,.89) 65%,rgba(241,241,255,.85));
  box-shadow:0 25px 85px rgba(25,76,200,.20),inset 0 2px 2px rgba(255,255,255,.9),inset 0 -1px 1px rgba(148,172,247,.28);
  backdrop-filter:blur(25px); -webkit-backdrop-filter:blur(25px);
  animation:tf-card-arrive .8s cubic-bezier(.16,1,.3,1) both,tf-card-breathe 7s ease-in-out .8s infinite;
  text-align:center;
}
#startup-loader .tf-splash-card::before {
 content:'';position:absolute;inset:0;pointer-events:none;border-radius:inherit;
 background:radial-gradient(ellipse at 5% 68%,rgba(255,187,228,.20),transparent 46%),radial-gradient(ellipse at 95% 35%,rgba(123,223,255,.23),transparent 42%);
}
#startup-loader .tf-splash-card > * {position:relative;z-index:1}
#startup-loader .tf-splash-logo {
 display:block;width:min(475px,90%);max-height:112px;height:auto;object-fit:contain;
 margin:0 auto 37px;filter:drop-shadow(0 2px 1px rgba(30,72,131,.05));
 animation:tf-brand-enter 1s .15s both;
}
#startup-loader .tf-logo-fallback {
 font-family:'Poppins','Inter',sans-serif;font-size:clamp(24px,4vw,34px);font-weight:800;color:#162c99;
 line-height:1.6;margin:0 auto 38px;display:none;letter-spacing:-1.2px;
}
#startup-loader .tf-logo-fallback span {background:#ff5c6c;color:white;border-radius:8px;padding:3px 6px;margin:0 2px}
#startup-loader .tf-splash-ring {
 width:88px;height:88px;flex:0 0 88px;border-radius:50%;position:relative;
 background:conic-gradient(from 5deg,#0862ec 0deg,#0987fa 50deg,#38cafd 97deg,#e0eafa 100deg,#cfdef8 360deg);
 box-shadow:0 8px 23px rgba(27,121,253,.19),inset 0 1px 4px rgba(255,255,255,.7);
 animation:tf-ring-rotate 1.45s linear infinite;
}
#startup-loader .tf-splash-ring::before {
 content:'';position:absolute;inset:13px;border-radius:50%;background:#f7fbff;
 box-shadow:inset 0 3px 9px rgba(108,168,236,.20);
}
#startup-loader .tf-splash-ring::after {
 content:'';position:absolute;width:13px;height:13px;border-radius:50%;top:-1px;left:50%;transform:translateX(-50%);
 background:white;box-shadow:0 0 9px 2px rgba(255,255,255,.9),0 0 17px 5px rgba(35,171,255,.58);
}
#startup-loader .tf-splash-title {
 margin:27px 0 0;color:#071c79;font-size:clamp(12px,1.15vw,19px);font-weight:800;
 letter-spacing:1.5px;line-height:1.35;text-align:center;
}
#startup-loader .tf-splash-subtitle {
 margin:7px 0 0;font-size:clamp(12px,1.07vw,16px);font-weight:500;line-height:1.4;
 color:#7d91bd;text-align:center;
}
#startup-loader .tf-splash-dots {
 display:flex;align-items:center;justify-content:center;gap:13px;margin-top:36px;
}
#startup-loader .tf-splash-dots span {
 width:13px;height:13px;border-radius:50%;background:#a6beee;
 animation:tf-dot 1.35s ease-in-out infinite;
}
#startup-loader .tf-splash-dots span:nth-child(1) {background:#0966f5;animation-delay:0s}
#startup-loader .tf-splash-dots span:nth-child(2) {animation-delay:.18s}
#startup-loader .tf-splash-dots span:nth-child(3) {animation-delay:.36s}
@keyframes tf-ring-rotate {to{transform:rotate(360deg)}}
@keyframes tf-dot {0%,65%,100%{transform:translateY(0);opacity:.68}28%{transform:translateY(-7px);opacity:1}}
@keyframes tf-route {to{stroke-dashoffset:-180}}
@keyframes tf-splash-drift {from{transform:scale(1.025) translate3d(-.2%,.1%,0)}to{transform:scale(1.085) translate3d(.8%,-.8%,0)}}
@keyframes tf-card-arrive {from{opacity:0;transform:translateY(16px) scale(.97)}to{opacity:1;transform:translateY(0) scale(1)}}
@keyframes tf-card-breathe {0%,100%{box-shadow:0 25px 85px rgba(25,76,200,.20),inset 0 2px 2px rgba(255,255,255,.9)}50%{box-shadow:0 30px 100px rgba(25,76,200,.28),inset 0 2px 2px rgba(255,255,255,.9)}}
@keyframes tf-brand-enter {from{opacity:0;transform:translateY(9px)}to{opacity:1;transform:translateY(0)}}
@keyframes tf-orb-float {from{transform:translate(0,0);opacity:.4}to{transform:translate(18px,-27px);opacity:.9}}
@keyframes tf-haze {to{transform:translate3d(1.5%,1%,0);opacity:.75}}
@keyframes tf-airplane {
 0%{transform:translate(-5vw,20vh) rotate(-15deg) scale(.7);opacity:0}
 8%{opacity:.7}48%{opacity:.95}
 92%{transform:translate(102vw,-12vh) rotate(-8deg) scale(1.08);opacity:.78}
 100%{transform:translate(108vw,-15vh) rotate(-8deg) scale(1.08);opacity:0}
}
@media(max-width:640px){
 #startup-loader .tf-splash-scene {background-position:57% center}
 #startup-loader .tf-splash-card{width:min(90vw,480px);min-height:355px;border-radius:26px;padding:50px 16px 42px}
 #startup-loader .tf-splash-logo{width:min(315px,94%);margin-bottom:29px}
 #startup-loader .tf-logo-fallback{margin-bottom:29px}
 #startup-loader .tf-splash-ring{height:70px;width:70px;flex-basis:70px}
 #startup-loader .tf-splash-ring::before{inset:11px}
 #startup-loader .tf-splash-title{margin-top:23px;letter-spacing:.7px;font-size:clamp(11px,3.2vw,15px)}
 #startup-loader .tf-splash-subtitle{font-size:12px}
 #startup-loader .tf-splash-dots{margin-top:25px;gap:10px}
 #startup-loader .tf-splash-dots span{width:10px;height:10px}
}
@media (max-height:520px){
 #startup-loader .tf-splash-card{min-height:0;padding:18px 25px 16px;border-radius:22px}
 #startup-loader .tf-splash-logo{max-width:285px;margin-bottom:14px;max-height:68px}
 #startup-loader .tf-logo-fallback{margin-bottom:14px}
 #startup-loader .tf-splash-ring{width:55px;height:55px;flex-basis:55px}
 #startup-loader .tf-splash-ring::before{inset:9px}
 #startup-loader .tf-splash-title{margin-top:12px}
 #startup-loader .tf-splash-dots{margin-top:12px}
}
@media (prefers-reduced-motion: reduce){
 #startup-loader .tf-splash-scene,#startup-loader .tf-splash-haze,#startup-loader .tf-splash-card,#startup-loader .tf-splash-logo,#startup-loader .tf-splash-ring,#startup-loader .tf-splash-dots span,#startup-loader .tf-flight-trails path,#startup-loader .tf-orb,#startup-loader .tf-splash-plane{animation:none!important}
 #startup-loader .tf-splash-plane{display:none}
}

/* Connectivity state: keep the screen visible until online and auth has resolved. */
#startup-loader.tf-splash-offline .tf-splash-title { color:#bb2635; }
#startup-loader.tf-splash-offline .tf-splash-ring { opacity:.55; animation-duration:3s; }
#startup-loader.tf-splash-offline .tf-splash-subtitle { color:#64748b; }