/* RideMarket — global styles */

:root {
  --rm-bg: #0A0A0C;
  --rm-accent: #FF4D1C;
  /* iOS Safari over-reports the bottom safe area when the URL bar is visible
     (100dvh already excludes it), leaving a blank strip under the nav. Cap it. */
  --rm-sb: min(env(safe-area-inset-bottom, 0px), 10px);
}

html, body, #root { margin: 0; padding: 0; height: 100%; }

html { background: var(--rm-bg); }

body {
  font-family: 'Archivo', system-ui, -apple-system, sans-serif;
  background: var(--rm-bg);
  color: #F4F3F1;
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
  overflow: hidden;
  /* lock the layout to the visual viewport on mobile, accounting for the
     browser chrome and the notch / home indicator */
  overscroll-behavior: none;
  -webkit-tap-highlight-color: transparent;
}

#root { height: 100dvh; }

/* fullscreen phone shell — the app fills the whole screen like a native app */
.rm-fullscreen {
  position: fixed;
  inset: 0;
  width: 100vw;
  height: 100dvh;
  background: #000;
  overflow: hidden;
}

.rm-scroll { -ms-overflow-style: none; scrollbar-width: none; }
.rm-scroll::-webkit-scrollbar { display: none; }

/* entrance system — transform-only animations (visible at frame 0) */
.rm-screen   { animation: rmScreenIn 340ms cubic-bezier(0.22,1,0.36,1); }
.rm-in-up    { animation: rmRiseIn 320ms cubic-bezier(0.22,1,0.36,1); }
.rm-in-sheet { animation: rmSheetUp 400ms cubic-bezier(0.22,1,0.36,1); }
.rm-in-drop  { animation: rmDropIn 200ms cubic-bezier(0.22,1,0.36,1); }
.rm-in-fade  { animation: rmFadeIn 240ms ease; }
.rm-in-toast { animation: rmToastIn 380ms cubic-bezier(0.22,1,0.36,1); }
@keyframes rmScreenIn { from { transform: translateY(14px); } }
@keyframes rmRiseIn   { from { transform: translateY(9px) scale(0.985); } }
@keyframes rmSheetUp  { from { transform: translateY(24px); } }
@keyframes rmDropIn   { from { transform: translateY(-7px) scale(0.99); } }
@keyframes rmFadeIn   { from { opacity: 0.25; } }
@keyframes rmToastIn  { from { transform: translateY(18px) scale(0.97); } }

/* press feedback */
.rm-press { transition: transform 140ms cubic-bezier(0.22,1,0.36,1), filter 140ms; }
.rm-press:active { transform: scale(0.94); }
.rm-hover { transition: background 140ms; }
.rm-hover:hover { background: rgba(255,255,255,0.04); }
.rm-row { transition: opacity 140ms; }
.rm-row:active { opacity: 0.7; }

@keyframes rmKenBurns {
  from { transform: scale(1.0) translate(0, 0); }
  to   { transform: scale(1.09) translate(-1.2%, 0.8%); }
}
@keyframes rmBurst {
  0%   { opacity: 0; transform: scale(0.3) rotate(-8deg); }
  35%  { opacity: 1; transform: scale(1.12) rotate(3deg); }
  60%  { opacity: 1; transform: scale(0.98) rotate(0deg); }
  100% { opacity: 0; transform: scale(1.25); }
}
@keyframes rmBob {
  0%, 100% { transform: translate(-50%, 0); opacity: 0.55; }
  50%      { transform: translate(-50%, 4px); opacity: 1; }
}
@keyframes rmTypingDot {
  0%, 60%, 100% { transform: translateY(0); opacity: 0.4; }
  30%           { transform: translateY(-4px); opacity: 1; }
}
@keyframes rmSpin { to { transform: rotate(360deg); } }
.rm-spin { animation: rmSpin 0.7s linear infinite; }

/* fundal premium pe ecranul de autentificare — orbs blurate, animate, ieftine */
.rm-auth-orb {
  position: absolute; pointer-events: none; z-index: 0;
  width: 60vh; height: 60vh; max-width: 440px; max-height: 440px;
  border-radius: 50%; filter: blur(72px); opacity: 0.16;
  top: -12%; left: -16%;
  animation: rmOrb 18s ease-in-out infinite;
}
.rm-auth-orb2 {
  top: auto; left: auto; bottom: -14%; right: -16%; opacity: 0.14;
  animation: rmOrb2 23s ease-in-out infinite;
}
@keyframes rmOrb  { 0%,100% { transform: translate(0,0); } 50% { transform: translate(38px, 28px); } }
@keyframes rmOrb2 { 0%,100% { transform: translate(0,0); } 50% { transform: translate(-38px,-26px); } }

button { font-family: inherit; }
textarea, input { font-family: inherit; }
*::selection { background: #FF4D1C; color: #120B08; }

/* ───────── boot splash ───────── */
#rm-splash {
  position: fixed;
  inset: 0;
  z-index: 9999;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 18px;
  background:
    radial-gradient(70% 55% at 50% 38%, rgba(255,77,28,0.16) 0%, transparent 60%),
    #0A0A0C;
  transition: opacity 420ms ease, visibility 420ms ease;
}
#rm-splash.rm-splash-out { opacity: 0; visibility: hidden; pointer-events: none; }

.rm-splash-logo {
  width: 72px; height: 72px; border-radius: 20px;
  background: linear-gradient(135deg, #FF6A3D, #FF4D1C);
  display: grid; place-items: center;
  font-family: 'Archivo', system-ui, sans-serif;
  font-weight: 900; font-size: 40px; color: #120B08;
  font-stretch: 120%;
  box-shadow: 0 0 48px rgba(255,77,28,0.55), inset 0 1px 0 rgba(255,255,255,0.35);
  animation: rmSplashPulse 1.6s ease-in-out infinite;
}
.rm-splash-word {
  font-family: 'Archivo', system-ui, sans-serif;
  font-weight: 900; font-size: 20px; letter-spacing: -0.4px; color: #F4F3F1;
  font-stretch: 116%;
}
.rm-splash-sub {
  font-family: 'JetBrains Mono', ui-monospace, monospace;
  font-size: 10px; letter-spacing: 2.4px; color: rgba(244,243,241,0.4);
  margin-top: -8px;
}
@keyframes rmSplashPulse {
  0%, 100% { transform: scale(1); box-shadow: 0 0 40px rgba(255,77,28,0.45), inset 0 1px 0 rgba(255,255,255,0.35); }
  50%      { transform: scale(1.06); box-shadow: 0 0 64px rgba(255,77,28,0.7), inset 0 1px 0 rgba(255,255,255,0.35); }
}

@media (prefers-reduced-motion: reduce) {
  * { animation-duration: 0.01ms !important; animation-iteration-count: 1 !important; }
}