/* ===== Carstom Tire Track (FORCE KEYFRAMES) ===== */

/* родитель секции (hero) должен быть relative, см. шаг 3 */
.carstom-tt-wrap{
  position:absolute;
  inset:0;
  pointer-events:none;
  overflow:hidden;
  z-index:20;
}

/* след */
.carstom-tt-track{
  position:absolute;
  left:-6%;
  top:8%;
  width:112%;
  height:clamp(160px, 28vh, 420px);

  background-image:url("https://carstom.app/wp-content/uploads/2025/02/Frame-1321316106-1.png");
  background-repeat:no-repeat;
  background-position:left center;
  background-size:cover;

  /* СТАРТ: скрыто (важно: !important) */
  clip-path: inset(0 100% 0 0) !important;
  -webkit-clip-path: inset(0 100% 0 0) !important;

  filter: blur(10px) contrast(1.08) brightness(0.95) !important;
  transform: rotate(-2deg) scale(1.02) translateX(-10px) !important;

  opacity:1 !important;
  will-change: clip-path, filter, transform;
}

/* запуск */
.carstom-tt-wrap.tt-go .carstom-tt-track{
  animation: carstomTrackReveal 1600ms cubic-bezier(.16,1,.3,1) forwards;
}

/* сама анимация */
@keyframes carstomTrackReveal{
  0%{
    clip-path: inset(0 100% 0 0);
    -webkit-clip-path: inset(0 100% 0 0);
    filter: blur(10px) contrast(1.08) brightness(0.95);
    transform: rotate(-2deg) scale(1.02) translateX(-10px);
  }
  65%{
    filter: blur(2px) contrast(1.08) brightness(0.95);
  }
  100%{
    clip-path: inset(0 0% 0 0);
    -webkit-clip-path: inset(0 0% 0 0);
    filter: blur(0px) contrast(1.08) brightness(0.95);
    transform: rotate(-2deg) scale(1.02) translateX(0px);
  }
}

/* reduced motion */
@media (prefers-reduced-motion: reduce){
  .carstom-tt-track{
    clip-path: inset(0 0% 0 0) !important;
    -webkit-clip-path: inset(0 0% 0 0) !important;
    filter:none !important;
    transform:none !important;
  }
  .carstom-tt-wrap.tt-go .carstom-tt-track{ animation:none !important; }
}