/* ---------- intro: MINI rijdt het beeld in (alleen homepage) ---------- */
.intro{
  position:fixed;inset:0;z-index:1000;
  background:var(--navy);
  color:#fff;
  overflow:hidden;
  cursor:pointer;
  transition:opacity .7s ease;
}
.intro.is-leaving{opacity:0;pointer-events:none;}
/* weg + horizon, in het blauw van de menubalk */
.intro-road{
  position:absolute;inset:0;
  background:
    radial-gradient(60% 30% at 50% 50%, rgba(255,255,255,0.16), transparent 70%),
    linear-gradient(180deg, #123f9e 0%, #123f9e 49%, #0d3184 50%, #0a2a72 100%);
}
.intro-road::before{
  /* wegdek als trapezium richting de horizon */
  content:"";position:absolute;left:50%;top:50%;width:180vw;height:60vh;
  transform:translateX(-50%);
  clip-path:polygon(49% 0,51% 0,100% 100%,0 100%);
  background:linear-gradient(180deg,#0f3690 0%,#082361 100%);
}
.intro-road::after{
  /* middenstreep die naar de kijker toe beweegt */
  content:"";position:absolute;left:50%;top:50%;width:6px;height:60vh;
  transform:translateX(-50%);
  background:repeating-linear-gradient(180deg, transparent 0 14px, rgba(255,255,255,0.7) 14px 26px);
  background-size:100% 40px;
  clip-path:polygon(35% 0,65% 0,100% 100%,0 100%);
  animation:intro-lane 1.1s linear infinite;
}
@keyframes intro-lane{from{background-position:0 0}to{background-position:0 40px}}

/* de auto */
.intro-car{
  position:absolute;left:50%;top:50%;
  width:min(58vw,520px);
  transform:translate(-50%,-50%) scale(.04);
  transform-origin:50% 50%;
  animation:intro-drive 2.4s cubic-bezier(.55,.05,.55,.95) forwards;
  filter:drop-shadow(0 30px 40px rgba(0,0,0,.55));
  will-change:transform;
}
.intro-car img{width:100%;height:auto;display:block;}
/* koplampgloed */
.intro-car::before,.intro-car::after{
  content:"";position:absolute;top:57%;width:30%;height:22%;border-radius:50%;
  background:radial-gradient(circle, rgba(255,250,225,.95) 0%, rgba(255,245,200,.35) 35%, transparent 70%);
  opacity:0;animation:intro-lights 2.4s ease-out forwards;
  mix-blend-mode:screen;pointer-events:none;
}
.intro-car::before{left:-2%;}
.intro-car::after{right:-2%;}
@keyframes intro-drive{
  0%  {transform:translate(-50%,-50%) scale(.04);}
  60% {transform:translate(-50%,-22%) scale(.42);}
  100%{transform:translate(-50%,8%) scale(1);}
}
@keyframes intro-lights{0%{opacity:0}40%{opacity:.35}100%{opacity:.9}}

/* welkom + logo */
.intro-text{
  position:absolute;left:50%;top:7%;
  transform:translateX(-50%);
  width:min(92vw,760px);
  display:grid;justify-items:center;gap:18px;
  opacity:0;
  animation:intro-text .8s ease-out 1.6s forwards;
}
.intro-welkom{
  font-family:var(--font-display);font-weight:600;
  font-size:clamp(2rem,4.2vw,3.2rem);line-height:1;
  letter-spacing:.14em;text-transform:uppercase;
  color:#fff;
}
.intro-logo{
  display:flex;align-items:center;justify-content:center;gap:clamp(14px,2.5vw,32px);
  filter:drop-shadow(0 10px 24px rgba(0,0,0,.35));
}
.intro-logo img{height:clamp(86px,15vw,150px);width:auto;display:block;}
@keyframes intro-text{from{opacity:0;transform:translate(-50%,14px)}to{opacity:1;transform:translate(-50%,0)}}

.intro-skip{
  position:absolute;right:20px;bottom:18px;
  font-family:var(--font-mono);font-size:.72rem;letter-spacing:.12em;text-transform:uppercase;
  color:rgba(255,255,255,.75);background:none;border:1px solid rgba(255,255,255,.35);border-radius:999px;
  padding:8px 14px;cursor:pointer;
}
.intro-skip:hover{color:#fff;border-color:#fff;}
body.intro-open{overflow:hidden;}

@media (max-width:640px){
  .intro-car{width:86vw;}
  .intro-text{top:6%;gap:14px;}
  .intro-logo{flex-direction:column;gap:10px;}
  .intro-logo img{height:clamp(70px,20vw,110px);}
}
@media (prefers-reduced-motion:reduce){
  .intro{display:none;}
}