:root { color-scheme: dark; }

html { scroll-behavior: smooth; }

body::selection, *::selection { background: #D4A843; color: #0A0A0F; }

/* Ambient orbs */
.orb {
  position: absolute;
  border-radius: 9999px;
  filter: blur(140px);
  opacity: 0.3;
  animation: drift 24s ease-in-out infinite;
}
.orb-violet {
  width: 560px; height: 560px;
  background: #7C4DDB;
  top: -15%; left: -12%;
}
.orb-gold {
  width: 460px; height: 460px;
  background: #D4A843;
  bottom: -15%; right: -12%;
  animation-delay: -12s;
  opacity: 0.18;
}
@keyframes drift {
  0%,100% { transform: translate(0,0) scale(1); }
  50% { transform: translate(60px,-40px) scale(1.12); }
}

/* Slow rotating star field */
.star-field { animation: spin-slow 240s linear infinite; transform-origin: center; transform-box: fill-box; }
@keyframes spin-slow { from { transform: rotate(0deg); } to { transform: rotate(360deg); } }
.star-spin { animation: spin-slow 60s linear infinite; transform-origin: center; }

/* Background flowing routes */
.route-line {
  stroke-dasharray: 8 14;
  animation: flow 22s linear infinite;
}
.route-line-2 { animation-duration: 28s; animation-direction: reverse; }
.route-line-3 { animation-duration: 36s; }
@keyframes flow {
  to { stroke-dashoffset: -400; }
}

/* Hero scene — parallax dusk drive */
.scene {
  background: linear-gradient(180deg, #0A0A0F 0%, #14101F 100%);
  box-shadow: 0 40px 100px -30px rgba(124, 77, 219, 0.35);
}

.layer-far { animation: pan-far 60s linear infinite; }
.layer-mid { animation: pan-mid 22s linear infinite; }
.layer-road { animation: pan-road 3.2s linear infinite; }

@keyframes pan-far { from { transform: translateX(0); } to { transform: translateX(-1600px); } }
@keyframes pan-mid { from { transform: translateX(0); } to { transform: translateX(-1600px); } }
@keyframes pan-road { from { transform: translateX(0); } to { transform: translateX(-160px); } }

.car-bob { animation: bob 1.8s ease-in-out infinite; transform-origin: center; transform-box: fill-box; }
@keyframes bob {
  0%, 100% { transform: translateY(0); }
  50% { transform: translateY(3px); }
}

.sun-glow { animation: sun-pulse 6s ease-in-out infinite; transform-origin: 1150px 360px; }
@keyframes sun-pulse {
  0%, 100% { opacity: 0.9; transform: scale(1); }
  50% { opacity: 1; transform: scale(1.08); }
}

.mosque-halo { animation: mosque-breath 4s ease-in-out infinite; transform-origin: center; }
@keyframes mosque-breath {
  0%, 100% { opacity: 0.7; }
  50% { opacity: 1; }
}

.window-glow { animation: flicker 3.5s ease-in-out infinite; }
.window-glow:nth-child(8) { animation-delay: -1s; }
.window-glow:nth-child(9) { animation-delay: -2s; }
@keyframes flicker {
  0%, 100% { opacity: 0.7; }
  50% { opacity: 1; }
}

/* Screenshots — floating, no cards */
.phone-shot {
  display: block;
  width: 100%;
  aspect-ratio: 9 / 19.5;
  object-fit: cover;
  border-radius: 28px;
  box-shadow:
    0 30px 60px -25px rgba(124,77,219,0.45),
    inset 0 0 0 1px rgba(255,255,255,0.06);
  transition: transform 400ms cubic-bezier(0.2,0.7,0.2,1);
}
.phone-shot:hover { transform: translateY(-6px); }

/* Empty phone placeholder (matches shot proportions) */
.phone-mini {
  aspect-ratio: 9 / 19.5;
  border-radius: 28px;
  background:
    radial-gradient(circle at 50% 20%, rgba(124,77,219,0.3), transparent 55%),
    radial-gradient(circle at 50% 85%, rgba(212,168,67,0.1), transparent 50%),
    linear-gradient(180deg, #14141c 0%, #0a0a0f 100%);
  position: relative;
  overflow: hidden;
  box-shadow: inset 0 0 0 1px rgba(255,255,255,0.05);
}
.phone-mini::before {
  content: "";
  position: absolute; top: 8px; left: 50%; transform: translateX(-50%);
  width: 50px; height: 12px; border-radius: 0 0 10px 10px;
  background: #000;
}
.phone-mini::after {
  content: "";
  position: absolute; inset: 0;
  background-image: radial-gradient(circle at 50% 50%, rgba(255,255,255,0.03) 0 1px, transparent 2px);
  background-size: 14px 14px;
  opacity: 0.4;
}

/* Scroll reveal */
.reveal {
  opacity: 0; transform: translateY(20px);
  transition: opacity 800ms cubic-bezier(0.2, 0.7, 0.2, 1), transform 800ms cubic-bezier(0.2, 0.7, 0.2, 1);
  transition-delay: var(--delay, 0ms);
}
.reveal.is-visible { opacity: 1; transform: translateY(0); }

@media (prefers-reduced-motion: reduce) {
  .orb, .star-field, .star-spin, .route-line,
  .layer-far, .layer-mid, .layer-road, .car-bob,
  .sun-glow, .mosque-halo, .window-glow { animation: none !important; }
  .reveal { opacity: 1; transform: none; transition: none; }
  html { scroll-behavior: auto; }
}

/* Legal pages */
.prose-safr {
  color: rgba(255,255,255,0.75);
  line-height: 1.8;
  max-width: 68ch;
}
.prose-safr h1 { font-size: 2.75rem; font-weight: 700; color: #fff; margin-bottom: 8px; letter-spacing: -0.02em; }
.prose-safr h2 { font-size: 1.35rem; font-weight: 600; color: #fff; margin-top: 3rem; margin-bottom: 0.75rem; }
.prose-safr h3 { font-size: 1rem; font-weight: 600; color: #EBC87A; margin-top: 2rem; margin-bottom: 0.5rem; text-transform: uppercase; letter-spacing: 0.05em; }
.prose-safr p { margin-bottom: 1.1rem; }
.prose-safr ul { list-style: none; padding-left: 0; margin-bottom: 1rem; }
.prose-safr li { margin-bottom: 0.5rem; padding-left: 1.25rem; position: relative; }
.prose-safr li::before { content: "·"; position: absolute; left: 0.4rem; color: #D4A843; font-weight: 700; }
.prose-safr a { color: #EBC87A; text-decoration: underline; text-decoration-color: rgba(212,168,67,0.3); text-underline-offset: 3px; }
.prose-safr a:hover { text-decoration-color: #D4A843; }
.prose-safr strong { color: #fff; font-weight: 600; }