/* ================================================================
   STM TRAVEL — PREMIUM LOADING SCREEN
   ================================================================ */

/* ── Root vars ── */
:root {
  --stm-dark:   #050d0a;
  --stm-deep:   #071410;
  --stm-green:  #0a2218;
  --stm-teal:   #0e4d3a;
  --stm-gold:   #f5a623;
  --stm-orange: #e87c1e;
  --stm-white:  #f0f4f2;
  --stm-muted:  rgba(240,244,242,0.55);
}

/* ── Overlay ── */
#stm-loader {
  position: fixed;
  inset: 0;
  z-index: 99999;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  background: var(--stm-dark);
  overflow: hidden;
  /* starts visible, fades out when .done is added */
  opacity: 1;
  transition: opacity 0.7s cubic-bezier(0.4,0,0.2,1);
  pointer-events: all;
}
#stm-loader.done {
  opacity: 0;
  pointer-events: none;
}
#stm-loader.hidden {
  display: none;
}

/* ── Particle canvas ── */
#loader-canvas {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  pointer-events: none;
}

/* ── Animated gradient background ── */
.loader-bg-glow {
  position: absolute;
  inset: 0;
  background:
    radial-gradient(ellipse 80% 60% at 50% 110%, rgba(14,77,58,0.55) 0%, transparent 70%),
    radial-gradient(ellipse 60% 50% at 20% -10%, rgba(245,166,35,0.12) 0%, transparent 60%),
    radial-gradient(ellipse 60% 50% at 80% -10%, rgba(232,124,30,0.10) 0%, transparent 60%);
  animation: bgPulse 4s ease-in-out infinite alternate;
}
@keyframes bgPulse {
  from { opacity: 0.7; transform: scale(1); }
  to   { opacity: 1;   transform: scale(1.04); }
}

/* ── Logo image ── */
.loader-logo-wrap {
  position: relative;
  margin-bottom: 0.5rem;
  animation: logoFloat 3s ease-in-out infinite;
}
@keyframes logoFloat {
  0%, 100% { transform: translateY(0px); }
  50%       { transform: translateY(-8px); }
}
.loader-logo-img {
  width: 280px;
  max-width: 70vw;
  opacity: 0;
  transform: scale(0.8) translateY(20px);
  animation: logoReveal 0.9s cubic-bezier(0.34,1.56,0.64,1) 0.2s forwards;
  filter: drop-shadow(0 0 30px rgba(245,166,35,0.35));
}
@keyframes logoReveal {
  to { opacity: 1; transform: scale(1) translateY(0); }
}

/* ── Plane trail behind logo ── */
.loader-plane {
  position: absolute;
  font-size: 1.5rem;
  top: -8px;
  right: -40px;
  animation: planeFly 3s ease-in-out infinite;
  filter: drop-shadow(0 2px 8px rgba(245,166,35,0.6));
}
@keyframes planeFly {
  0%   { transform: translate(0,0) rotate(-20deg); opacity: 0.8; }
  30%  { transform: translate(10px,-8px) rotate(-25deg); opacity: 1; }
  60%  { transform: translate(18px,-4px) rotate(-18deg); opacity: 1; }
  100% { transform: translate(0,0) rotate(-20deg); opacity: 0.8; }
}

/* ── Letter animation container ── */
.loader-title {
  display: flex;
  align-items: flex-end;
  gap: 0;
  margin: 0.5rem 0 0.25rem;
  line-height: 1;
  perspective: 600px;
}

/* ── STM group ── */
.loader-stm {
  display: flex;
  gap: 0;
}
/* ── TRAVEL group ── */
.loader-travel {
  display: flex;
  gap: 0;
  margin-left: 0.5rem;
}

/* ── Individual letter ── */
.ll {
  display: inline-block;
  font-family: 'Raleway', sans-serif;
  font-weight: 900;
  font-size: clamp(3rem, 9vw, 5.5rem);
  line-height: 1;
  cursor: default;
  user-select: none;
  position: relative;
  transition: color 0.2s;
}

/* STM = dark navy/charcoal */
.loader-stm .ll {
  color: #1a2e27;
  text-shadow:
    0 0 40px rgba(14,77,58,0.5),
    2px 3px 0 rgba(0,0,0,0.5);
}

/* TRAVEL = orange/gold */
.loader-travel .ll {
  color: var(--stm-gold);
  text-shadow:
    0 0 40px rgba(245,166,35,0.55),
    2px 3px 0 rgba(0,0,0,0.4);
}

/* Hover pop */
.ll:hover {
  animation: letterHoverPop 0.4s cubic-bezier(0.34,1.56,0.64,1) both;
}
@keyframes letterHoverPop {
  0%   { transform: scale(1) rotate(0); }
  40%  { transform: scale(1.35) rotate(-5deg); }
  70%  { transform: scale(1.2) rotate(3deg); }
  100% { transform: scale(1) rotate(0); }
}

/* ── Jump & bounce animations (staggered) ── */
/* Each letter gets its own distinct personality */

/* S — big dramatic flip */
.ll-S {
  animation:
    letterAppear 0.6s cubic-bezier(0.34,1.56,0.64,1) 0.35s both,
    jumpS 2.4s ease-in-out 1.4s infinite;
}
@keyframes jumpS {
  0%,100%{ transform: translateY(0) rotate(0deg) scale(1); }
  20%    { transform: translateY(-30px) rotate(-12deg) scale(1.1); }
  35%    { transform: translateY(4px) rotate(4deg) scale(0.95); }
  50%    { transform: translateY(-14px) rotate(6deg) scale(1.05); }
  65%    { transform: translateY(2px) rotate(-2deg) scale(0.98); }
}

/* T — sharp quick bounce */
.ll-T {
  animation:
    letterAppear 0.6s cubic-bezier(0.34,1.56,0.64,1) 0.5s both,
    jumpT 2.0s ease-in-out 1.7s infinite;
}
@keyframes jumpT {
  0%,100%{ transform: translateY(0) scaleY(1); }
  25%    { transform: translateY(-24px) scaleY(1.08); }
  38%    { transform: translateY(3px) scaleY(0.93); }
  55%    { transform: translateY(-10px) scaleY(1.04); }
  70%    { transform: translateY(1px) scaleY(0.98); }
}

/* M — wide wobble */
.ll-M {
  animation:
    letterAppear 0.6s cubic-bezier(0.34,1.56,0.64,1) 0.65s both,
    jumpM 2.6s ease-in-out 2.0s infinite;
}
@keyframes jumpM {
  0%,100%{ transform: translateY(0) rotate(0) scaleX(1); }
  20%    { transform: translateY(-28px) rotate(8deg) scaleX(0.95); }
  40%    { transform: translateY(5px) rotate(-4deg) scaleX(1.05); }
  60%    { transform: translateY(-12px) rotate(3deg) scaleX(0.98); }
  75%    { transform: translateY(2px) rotate(-1deg); }
}

/* T — lean forward slide */
.ll-T2 {
  animation:
    letterAppear 0.6s cubic-bezier(0.34,1.56,0.64,1) 0.9s both,
    jumpT2 2.2s ease-in-out 1.5s infinite;
}
@keyframes jumpT2 {
  0%,100%{ transform: translateY(0) skewX(0); }
  20%    { transform: translateY(-22px) skewX(-8deg); }
  38%    { transform: translateY(4px) skewX(4deg); }
  55%    { transform: translateY(-10px) skewX(-2deg); }
  72%    { transform: translateY(1px) skewX(1deg); }
}

/* R — spin jump */
.ll-R {
  animation:
    letterAppear 0.6s cubic-bezier(0.34,1.56,0.64,1) 1.05s both,
    jumpR 3.0s ease-in-out 1.8s infinite;
}
@keyframes jumpR {
  0%,100%{ transform: translateY(0) rotate(0); }
  20%    { transform: translateY(-35px) rotate(15deg) scale(1.12); }
  38%    { transform: translateY(6px) rotate(-5deg) scale(0.93); }
  55%    { transform: translateY(-16px) rotate(5deg) scale(1.06); }
  72%    { transform: translateY(2px) rotate(-2deg); }
}

/* A — wave dip */
.ll-A {
  animation:
    letterAppear 0.6s cubic-bezier(0.34,1.56,0.64,1) 1.2s both,
    jumpA 2.8s ease-in-out 2.2s infinite;
}
@keyframes jumpA {
  0%,100%{ transform: translateY(0) rotate(0); }
  15%    { transform: translateY(-18px) rotate(-6deg); }
  30%    { transform: translateY(-32px) rotate(4deg) scale(1.08); }
  45%    { transform: translateY(5px) rotate(-3deg) scale(0.95); }
  60%    { transform: translateY(-12px) rotate(2deg); }
  78%    { transform: translateY(1px) rotate(0); }
}

/* V — V-shape bounce fitting */
.ll-V {
  animation:
    letterAppear 0.6s cubic-bezier(0.34,1.56,0.64,1) 1.35s both,
    jumpV 2.5s ease-in-out 1.6s infinite;
}
@keyframes jumpV {
  0%,100%{ transform: translateY(0) scaleY(1); }
  20%    { transform: translateY(-26px) scaleY(1.1) rotate(-8deg); }
  38%    { transform: translateY(4px) scaleY(0.92) rotate(4deg); }
  58%    { transform: translateY(-11px) scaleY(1.04) rotate(-2deg); }
  75%    { transform: translateY(1px); }
}

/* E — elastic squish */
.ll-E {
  animation:
    letterAppear 0.6s cubic-bezier(0.34,1.56,0.64,1) 1.5s both,
    jumpE 2.3s ease-in-out 2.4s infinite;
}
@keyframes jumpE {
  0%,100%{ transform: translateY(0) scaleX(1); }
  18%    { transform: translateY(-20px) scaleX(1.12); }
  32%    { transform: translateY(-28px) scaleX(0.9) rotate(5deg); }
  48%    { transform: translateY(5px) scaleX(1.06); }
  65%    { transform: translateY(-9px) scaleX(0.98); }
  80%    { transform: translateY(1px) scaleX(1); }
}

/* L — sideways flick */
.ll-L {
  animation:
    letterAppear 0.6s cubic-bezier(0.34,1.56,0.64,1) 1.65s both,
    jumpL 2.7s ease-in-out 1.9s infinite;
}
@keyframes jumpL {
  0%,100%{ transform: translateY(0) rotate(0); }
  22%    { transform: translateY(-22px) rotate(-10deg) skewY(5deg); }
  40%    { transform: translateY(4px) rotate(5deg); }
  58%    { transform: translateY(-10px) rotate(-3deg); }
  75%    { transform: translateY(0); }
}

/* ── Appear keyframe shared ── */
@keyframes letterAppear {
  from { opacity:0; transform: translateY(60px) scale(0.5) rotate(-15deg); }
  to   { opacity:1; transform: translateY(0) scale(1) rotate(0); }
}

/* ── Tagline ── */
.loader-tagline {
  font-family: 'Raleway', sans-serif;
  font-size: clamp(0.7rem, 2.2vw, 0.95rem);
  letter-spacing: 0.25em;
  text-transform: uppercase;
  color: var(--stm-muted);
  margin-top: 0.35rem;
  opacity: 0;
  animation: taglineIn 0.8s ease 2.1s forwards;
}
@keyframes taglineIn {
  from { opacity:0; transform:translateY(12px); }
  to   { opacity:1; transform:translateY(0); }
}

/* ── Progress bar ── */
.loader-progress-wrap {
  width: clamp(200px, 40vw, 340px);
  margin-top: 2.5rem;
  opacity: 0;
  animation: fadeIn 0.6s ease 2.4s forwards;
}
.loader-progress-track {
  width: 100%;
  height: 3px;
  background: rgba(255,255,255,0.1);
  border-radius: 99px;
  overflow: hidden;
  position: relative;
}
.loader-progress-fill {
  height: 100%;
  width: 0%;
  background: linear-gradient(90deg, var(--stm-teal), var(--stm-gold), var(--stm-orange));
  border-radius: 99px;
  transition: width 0.15s linear;
  box-shadow: 0 0 12px rgba(245,166,35,0.7);
}
.loader-progress-label {
  display: flex;
  justify-content: space-between;
  margin-top: 0.5rem;
  font-family: 'Raleway', sans-serif;
  font-size: 0.72rem;
  letter-spacing: 0.08em;
  color: var(--stm-muted);
}

@keyframes fadeIn {
  from { opacity:0; }
  to   { opacity:1; }
}

/* ── Dashed travel line under letters ── */
.loader-route-line {
  display: flex;
  align-items: center;
  gap: 6px;
  margin-top: 0.6rem;
  opacity: 0;
  animation: fadeIn 0.8s ease 2.2s forwards;
}
.route-dot {
  width: 9px; height: 9px;
  border-radius: 50%;
  background: var(--stm-teal);
  border: 2px solid var(--stm-gold);
  flex-shrink: 0;
}
.route-dashes {
  flex: 1;
  height: 1px;
  background: repeating-linear-gradient(
    90deg,
    var(--stm-gold) 0px, var(--stm-gold) 6px,
    transparent 6px, transparent 12px
  );
  width: clamp(120px, 30vw, 240px);
  animation: dashTravel 1.5s linear 2.5s infinite;
  background-size: 200% 100%;
}
@keyframes dashTravel {
  from { background-position: 0 0; }
  to   { background-position: 100% 0; }
}
.route-x {
  font-size: 0.7rem;
  color: var(--stm-gold);
  font-weight: 900;
  font-family: 'Raleway', sans-serif;
}

/* ── Wave decoration ── */
.loader-waves {
  position: absolute;
  bottom: 0;
  left: 0;
  width: 100%;
  overflow: hidden;
  line-height: 0;
  opacity: 0.18;
}
.loader-waves svg {
  width: 100%;
  height: 80px;
  animation: waveDrift 6s ease-in-out infinite;
}
@keyframes waveDrift {
  0%,100% { transform: translateX(0); }
  50%      { transform: translateX(-3%); }
}

/* ── Stars / sparkles ── */
.loader-stars {
  position: absolute;
  inset: 0;
  pointer-events: none;
}
.star {
  position: absolute;
  width: 2px; height: 2px;
  background: var(--stm-gold);
  border-radius: 50%;
  opacity: 0;
  animation: starTwinkle var(--dur, 3s) var(--delay, 0s) ease-in-out infinite;
}
@keyframes starTwinkle {
  0%,100%{ opacity:0; transform:scale(0.5); }
  50%    { opacity:0.8; transform:scale(1.8); }
}

/* ── Mobile adjustments ── */
@media (max-width: 480px) {
  .loader-logo-img { width: 200px; }
  .ll { font-size: clamp(2.2rem, 12vw, 3.5rem); }
  .loader-travel { margin-left: 0.3rem; }
}