:root{
  --sr-bg:#0b0f14;
  --sr-card:#11161f;
  --sr-gold:#e1c98f;
  --sr-gold-deep:#c7ad77;
  --sr-accent:#5e4b30;
}

#sr-splash{
  position:fixed; inset:0; z-index:9999;
  display:flex; align-items:center; justify-content:center;
  background: var(--sr-bg);
  color:#f0f6ff;
  opacity:0; pointer-events:none; transition:opacity .35s ease;
}
#sr-splash.sr-show{ opacity:1; pointer-events:auto; }
#sr-splash.sr-fadeout{ opacity:0; pointer-events:none; }

.sr-bg{
  position:absolute; inset:0;
  background:
    radial-gradient(80% 60% at 50% 35%, rgba(225,201,143,0.12) 0%, rgba(0,0,0,0) 60%),
    url("../img/splash_bg.jpg") center/cover no-repeat,
    linear-gradient(180deg, #1a202c 0%, #0b0f14 100%);
  filter: saturate(110%) contrast(105%);
}

.sr-center{
  position:relative; z-index:2; text-align:center; padding:24px 18px;
  backdrop-filter: blur(1px);
  animation: sr-pop .5s ease both .2s;
}
@keyframes sr-pop{ from{ transform:translateY(8px) scale(.98); opacity:.0} to{ transform:none; opacity:1} }

.sr-logo{
  width:min(220px, 80vw);
  image-rendering: -webkit-optimize-contrast;
  filter: drop-shadow(0 6px 18px rgba(0,0,0,.35));
  position:relative;
}

/* Shimmer overlay op logo */
.sr-logo::after{ content:""; }
.sr-logo{
  mask-image: linear-gradient(#000 0 0);
}
.sr-logo.shimmer{
  position:relative;
}
.sr-logo.shimmer::after{
  content:""; position:absolute; inset:-8%;
  background: linear-gradient(75deg, rgba(255,255,255,0) 0%, rgba(255,255,255,.22) 40%, rgba(255,255,255,0) 80%);
  transform: translateX(-130%) rotate(8deg);
  animation: sr-shimmer 2.3s ease-in-out infinite .6s;
  pointer-events:none;
}
@keyframes sr-shimmer{
  0%{ transform: translateX(-130%) rotate(8deg); }
  55%{ transform: translateX(130%) rotate(8deg); }
  100%{ transform: translateX(130%) rotate(8deg); }
}

.sr-sub{
  margin-top:12px; font-size:18px; color:var(--sr-gold);
  text-shadow: 0 1px 0 #2b2418;
}

.sr-progress{ margin-top:18px; width:min(420px, 80vw); }
.sr-bar{
  height:10px; border-radius:999px; background:rgba(255,255,255,.08);
  box-shadow: inset 0 0 0 1px rgba(255,255,255,.08);
  overflow:hidden;
}
.sr-bar-fill{
  display:block; height:100%; width:0%;
  background: linear-gradient(90deg, var(--sr-gold) 0%, var(--sr-gold-deep) 100%);
  transition: width .25s ease;
  box-shadow: 0 0 14px rgba(225,201,143,.35);
}
.sr-progress-text{
  margin-top:8px; font-size:13px; color:#cbd5e1; letter-spacing:.2px;
}

/* Karavaan animatie */
.sr-caravan{
  position:absolute; left:0; right:0; bottom:10vh; z-index:1;
  height:120px; pointer-events:none;
}
.sr-caravan-svg{
  position:absolute; left:-20vw; width:70vw; max-width:900px; height:100%;
  animation: sr-ride 5.8s ease-in-out infinite;
  opacity:.95;
}
@keyframes sr-ride{
  0%   { transform: translateX(-20vw); }
  45%  { transform: translateX(18vw); }
  60%  { transform: translateX(20vw); }
  100% { transform: translateX(80vw); }
}
.sr-wheels{ animation: sr-spin 1s linear infinite; transform-origin: 95px 80px; }
.sr-wheels circle:nth-child(3), .sr-wheels circle:nth-child(4){ transform-origin: 145px 80px; }
@keyframes sr-spin{ to { transform: rotate(360deg); } }

.sr-dust{ animation: sr-dust 1.4s ease-in-out infinite; opacity:.7; }
@keyframes sr-dust{
  0% { transform: translateY(0) scale(.95); opacity:.0; }
  20%{ opacity:.6; }
  100%{ transform: translateY(-6px) scale(1.05); opacity:0; }
}

/* Reduced motion respecteren */
@media (prefers-reduced-motion: reduce){
  .sr-caravan-svg, .sr-wheels, .sr-logo.shimmer::after{ animation:none !important; }
}