/* ═══════════════════════════════════════════════════
   LONDON BIKES UAE — Standalone Loader Page
   ═══════════════════════════════════════════════════ */

:root {
  --primary:    #111111;
  --secondary:  #1E1E1E;
  --accent:     #D62828;
  --accent-dk:  #b52222;
  --bg:         #F7F7F7;
  --gray:       #6B6B6B;
  --white:      #FFFFFF;
  --border:     #EBEBEB;

  --font:       'Inter', -apple-system, BlinkMacSystemFont, sans-serif;
  --display:    'Space Grotesk', var(--font);

  --r-sm: 10px;
  --r-md: 14px;
  --r-lg: 20px;
  --r-xl: 24px;
  --r-full: 100px;

  --ease: cubic-bezier(.16,1,.3,1);
  --safe-b: env(safe-area-inset-bottom, 0px);
}

/* Reset */
*,*::before,*::after{margin:0;padding:0;box-sizing:border-box;-webkit-tap-highlight-color:transparent}
html{font-size:16px;-webkit-text-size-adjust:100%;overflow-x:hidden}
body{font-family:var(--font);background:var(--white);color:var(--primary);line-height:1.5;-webkit-font-smoothing:antialiased;overflow:hidden;min-height:100dvh}
img{max-width:100%;display:block}
button{border:none;background:none;cursor:pointer;font-family:inherit;color:inherit}

/* Loader container */
.loader{
  position:fixed;inset:0;z-index:9999;
  background:var(--white);
  display:flex;align-items:center;justify-content:center;
}

.loader__inner{
  display:flex;flex-direction:column;align-items:center;
  width:100%;max-width:480px;height:100dvh;
  padding:0 32px;padding-top:env(safe-area-inset-top,12px);
  position:relative;
}

/* Progress bar */
.loader__progress{
  width:120px;height:4px;background:var(--border);
  border-radius:var(--r-full);overflow:hidden;
  margin-top:16px;margin-bottom:auto;
}
.loader__bar{
  height:100%;width:0%;background:var(--accent);
  border-radius:var(--r-full);
  transition:width .3s var(--ease);
}

/* Gif visual */
.loader__visual{
  width:330px;height:330px;
  border-radius:28px;
  overflow:hidden;
  margin-bottom:32px;
  animation:loaderFloat 3s ease-in-out infinite;
}
.loader__gif{width:100%;height:100%;object-fit:contain}
@keyframes loaderFloat{
  0%,100%{transform:translateY(0)}
  50%{transform:translateY(-10px)}
}

/* Brand text */
.loader__brand{
  display:flex;gap:8px;font-family:var(--display);overflow:hidden;
  margin-bottom:12px;
}
.loader__london{
  font-size:28px;font-weight:700;color:var(--primary);
  letter-spacing:5px;animation:up .6s var(--ease) .2s both;
}
.loader__bikes{
  font-size:28px;font-weight:300;color:var(--primary);
  letter-spacing:5px;animation:up .6s var(--ease) .4s both;
}
@keyframes up{from{opacity:0;transform:translateY(20px)}to{opacity:1;transform:translateY(0)}}

/* Welcome message */
.loader__msg{
  font-size:13px;line-height:1.6;color:var(--gray);
  text-align:center;max-width:300px;
  margin-bottom:auto;
  animation:fade .6s var(--ease) .6s both;
}
@keyframes fade{from{opacity:0}to{opacity:1}}

/* CTA button */
.loader__cta{
  width:100%;max-width:340px;height:54px;border-radius:var(--r-full);
  background:var(--accent);color:var(--white);
  font-family:var(--display);font-size:15px;font-weight:600;
  display:flex;align-items:center;justify-content:center;gap:8px;
  margin-bottom:calc(40px + var(--safe-b));
  box-shadow:0 6px 24px rgba(214,40,40,.25);
  transition:all .2s var(--ease);
  animation:up .6s var(--ease) .8s both;
  opacity:0;pointer-events:none;
}
.loader__cta.ready{opacity:1;pointer-events:all}
.loader__cta:active{transform:scale(.96);background:var(--accent-dk)}
.loader__cta i{font-size:13px;transition:transform .2s}
.loader__cta:hover i{transform:translateX(3px)}

/* Exit animation */
.loader.exiting{
  animation:loaderExit .5s var(--ease) forwards;
}
@keyframes loaderExit{
  to{opacity:0;transform:translateY(-40px) scale(.96)}
}

/* Desktop frame */
@media(min-width:481px){
  body{background:#080808;display:flex;justify-content:center;padding:20px 0}
  .loader{
    position:relative;
    max-width:480px;
    border-radius:44px;
    box-shadow:0 0 0 10px #1a1a1a,0 0 0 12px #333,0 30px 80px rgba(0,0,0,.6);
    overflow:clip;margin-top:10px;
    min-height:calc(100dvh - 40px);
  }
}