/* ===== VAN ANIMATION (hero van image + fallout sequence) ===== */

.hero-van{
  --van-pad: 20px;            /* vertical padding adjustment for van height calculation */
  position:absolute;
  
  /* Vertical centering: bottom: 50% + translateY(50%) centers the van */
  bottom: 50%;
  transform:translateX(0) translateY(50%);
  
  /* Horizontal positioning: starts offscreen to the left */
  left: calc(-1 * var(--van-w, 35vw));
  
  /* Height: reduce hero height by padding (40px total), then scale up 20% for visual prominence */
  /* Formula: (heroHeight - 40px) * 1.2 ensures van doesn't touch hero edges while staying prominent */
  height: calc((var(--hero-h, 60vh) - (var(--van-pad) * 2)) * 1.2);
  width:auto;                 /* maintains aspect ratio based on height */
  
  z-index:3;
  visibility: hidden;         /* hidden until measurements complete */
  will-change: transform;     /* GPU acceleration for smooth animation */
  opacity: 1 !important;
  transition: none !important;
}


/* Drive animation keyframes */
@keyframes drive{
  0%   { transform: translateX(0) translateY(50%); }
  100% { transform: translateX(var(--van-path, calc(100vw + 35vw + 40px))) translateY(50%); }
}

/* Animáció csak akkor induljon, ha a body megkapja a hero-anim-start-ot */
body.hero-anim-start .hero-van{
  visibility: visible;
  animation: drive var(--van-duration,3600ms) linear forwards;
}

/* Hide van after animation completes */
body.hero-anim-complete .hero-van{
  visibility: hidden !important;
  animation: none !important;
}

/* Fallout sequence: a hero-innerben lévő itemek */
.fallout-seq{
  display:grid;
  gap:12px;
}
.fallout-seq .fall-item{
  opacity:0;
  transform:translateY(-20px);
  transition: none !important;
}

/* Ha a body-hoz bekerül a fallout-now, indul a „kiesés” */
body.fallout-now .fallout-seq .fall-item{
  animation: fall-from-van 600ms cubic-bezier(.2,.8,.4,1) forwards;
}

/* Időzítés nth-child-del */
body.fallout-now .fallout-seq .fall-item:nth-of-type(1){ animation-delay:   0ms; }
body.fallout-now .fallout-seq .fall-item:nth-of-type(2){ animation-delay: 120ms; }
body.fallout-now .fallout-seq .fall-item:nth-of-type(3){ animation-delay: 240ms; }
body.fallout-now .fallout-seq .fall-item:nth-of-type(4){ animation-delay: 360ms; }
body.fallout-now .fallout-seq .fall-item:nth-of-type(5){ animation-delay: 480ms; }
body.fallout-now .fallout-seq .fall-item:nth-of-type(6){ animation-delay: 600ms; }
body.fallout-now .fallout-seq .fall-item:nth-of-type(7){ animation-delay: 720ms; }
body.fallout-now .fallout-seq .fall-item:nth-of-type(8){ animation-delay: 840ms; }
/* ha több elem van, itt lehet folytatni */

@keyframes fall-from-van{
  0%{
    opacity:0;
    transform:translateY(-20px) rotate(-5deg);
  }
  100%{
    opacity:1;
    transform:translateY(0) rotate(0);
  }
}

/* Mobile */
@media (max-width: 640px){
  .hero-van{
    display: none;
  }
  
  /* Show content immediately on mobile */
  .fallout-seq .fall-item{
    opacity: 1;
    transform: translateY(0);
  }
}

/* Reduced motion support */
@media (prefers-reduced-motion: reduce) {
  .hero-van {
    display: none;
  }
  
  .fallout-seq .fall-item {
    opacity: 1 !important;
    transform: none !important;
    animation: none !important;
  }
}