/* ==========================================================================
   Delivery Scene Animation — Pakete regnen, LKWs holen ab
   ========================================================================== */

@keyframes pkgDrop {
    0%   { bottom: calc(100% + 40px); opacity: 0; }
    8%   { opacity: 1; }
    30%  { bottom: 20px; opacity: 1; transform: rotate(4deg); }
    42%  { bottom: 36px; opacity: 1; transform: rotate(-2deg); }
    54%  { bottom: 20px; opacity: 1; transform: rotate(1deg); }
    64%  { bottom: 26px; opacity: 1; }
    72%  { bottom: 20px; opacity: 1; transform: rotate(0); }
    100% { bottom: 20px; opacity: 1; transform: rotate(0); }
}

@keyframes pkgPickup {
    0%   { opacity: 1; transform: scale(1); }
    60%  { opacity: 1; transform: scale(0.8) translateY(-16px); }
    100% { opacity: 0; transform: scale(0.4) translateY(-30px); }
}

@keyframes lkwEnter {
    0%   { right: -220px; opacity: 0; }
    5%   { opacity: 1; }
    100% { right: 48%; opacity: 1; }
}

@keyframes lkwLeave {
    0%   { right: 48%; opacity: 1; }
    100% { right: calc(100% + 220px); opacity: 1; }
}

@keyframes lkw2Enter {
    0%   { right: -200px; opacity: 0; }
    5%   { opacity: 1; }
    100% { right: 8%; opacity: 1; }
}

@keyframes lkw2Leave {
    0%   { right: 8%; opacity: 1; }
    100% { right: calc(100% + 200px); opacity: 1; }
}

@keyframes arrowBounce {
    0%, 100% { transform: translateX(-50%) translateY(0); }
    50%      { transform: translateX(-50%) translateY(10px); }
}

/* Scene */
.landing-delivery-scene {
    position: absolute;
    bottom: 10px;
    left: 0;
    right: 0;
    height: 110px;
    z-index: 5;
    overflow: hidden;
}

/* Pakete */
.landing-pkg {
    position: absolute;
    bottom: calc(100% + 40px);
    opacity: 0;
    z-index: 7;
    filter: drop-shadow(0 2px 8px rgba(201, 168, 76, 0.35));
}

.pkg-1 { left: 15%;  animation: pkgDrop 1.3s cubic-bezier(0.34,1,0.64,1) 1.4s forwards; }
.pkg-2 { left: 35%;  animation: pkgDrop 1.3s cubic-bezier(0.34,1,0.64,1) 1.8s forwards,
                                 pkgPickup 0.5s ease-in 4.6s forwards; }
.pkg-3 { left: 55%;  animation: pkgDrop 1.3s cubic-bezier(0.34,1,0.64,1) 2.2s forwards; }
.pkg-4 { left: 75%;  animation: pkgDrop 1.3s cubic-bezier(0.34,1,0.64,1) 2.6s forwards,
                                 pkgPickup 0.5s ease-in 7.6s forwards; }

/* LKWs (gespiegelt = Kabine links = faehrt nach links) */
.landing-lkw {
    position: absolute;
    bottom: 2px;
    z-index: 6;
    filter: drop-shadow(0 2px 6px rgba(201, 168, 76, 0.2));
}

.landing-lkw svg {
    transform: scaleX(-1);
}

/* LKW 1: faehrt rein bei 3.5s, stoppt bei Paket 2 (left:35%), faehrt bei 5.2s raus */
.lkw-1 {
    right: -220px;
    opacity: 0;
    animation:
        lkwEnter 1.2s cubic-bezier(0.25,0,0.3,1) 3.5s forwards,
        lkwLeave 1.8s cubic-bezier(0.5,0,0.7,1) 5.2s forwards;
}

/* LKW 2: faehrt rein bei 6.5s, stoppt bei Paket 4 (left:75%), faehrt bei 8.2s raus */
.lkw-2 {
    right: -200px;
    opacity: 0;
    animation:
        lkw2Enter 1.2s cubic-bezier(0.25,0,0.3,1) 6.5s forwards,
        lkw2Leave 1.8s cubic-bezier(0.5,0,0.7,1) 8.2s forwards;
}

/* Pfeil (gleicher Circle-Stil wie .landing-section-nav) */
.landing-delivery-scene .landing-scroll-arrow {
    position: absolute;
    bottom: 24px;
    left: 50%;
    transform: translateX(-50%);
    width: 36px;
    height: 36px;
    display: flex;
    align-items: center;
    justify-content: center;
    border-radius: 50%;
    color: rgba(201, 168, 76, 0.55);
    border: 1px solid rgba(201, 168, 76, 0.25);
    background: rgba(10, 15, 26, 0.4);
    opacity: 0;
    text-decoration: none;
    z-index: 8;
    transition: color 0.25s ease, border-color 0.25s ease, background 0.25s ease;
    animation: fadeIn 0.6s ease 9.5s forwards, arrowBounce 2s ease-in-out 9.5s infinite;
}

.landing-delivery-scene .landing-scroll-arrow:hover {
    color: #dfc06a;
    border-color: rgba(201, 168, 76, 0.7);
    background: rgba(10, 15, 26, 0.7);
}