/* =========================================================
   FAM CRAFT - TRUCK / ROAD STRIP
   Animatie dedicata, bannere sincronizate, linii drum fara salt - 2505-1348
========================================================= */

/* lipit de carousel */
.coverflow-section {
    padding-bottom: 0 !important;
}

.fam-road-strip {
    position: relative;
    z-index: 2;
    width: 100%;
    overflow: hidden;
    margin: 0 !important;
    padding: 0 !important;
    background: #ffffff;
    transform: translate3d(0,0,0);
    backface-visibility: hidden;
    -webkit-backface-visibility: hidden;
}

.fam-road-wrapper {
    position: relative;
    display: block;
    width: 100%;
    height: 92px;
    overflow: hidden;
    margin: 0;
    background:
        linear-gradient(180deg, #fff7ed 0%, #fef3e2 34%, #ffffff 100%);
    isolation: isolate;
    contain: layout paint style;
    --fam-road-scenery-duration: 13.5s;
    transform: translate3d(0,0,0);
    backface-visibility: hidden;
    -webkit-backface-visibility: hidden;
}

.fam-road-wrapper::before {
    content: "";
    position: absolute;
    left: 0;
    right: 0;
    bottom: 24px;
    height: 30px;
    z-index: 1;
    background:
        radial-gradient(90px 28px at 10% 100%, rgba(242,139,0,0.16) 0 65%, transparent 66%),
        radial-gradient(130px 32px at 38% 100%, rgba(245,73,39,0.12) 0 64%, transparent 65%),
        radial-gradient(110px 28px at 72% 100%, rgba(242,139,0,0.14) 0 64%, transparent 65%);
    pointer-events: none;
}

.fam-road-wrapper::after {
    content: "";
    position: absolute;
    left: 0;
    right: 0;
    bottom: 25px;
    height: 1px;
    z-index: 1;
    background: linear-gradient(90deg, transparent, rgba(255,255,255,0.58), transparent);
    opacity: 0.25;
    pointer-events: none;
}

/* soare */
.fam-road-sun {
    position: absolute;
    top: 8px;
    right: 70px;
    width: 24px;
    height: 24px;
    border-radius: 50%;
    background: #ffd34d;
    box-shadow: 0 0 12px rgba(255, 211, 77, 0.45);
    z-index: 2;
}

.fam-road-sun::before {
    content: "";
    position: absolute;
    inset: -7px;
    background: #ffd34d;
    clip-path: polygon(
        50% 0%,
        58% 18%,
        78% 6%,
        72% 28%,
        100% 30%,
        78% 44%,
        94% 62%,
        70% 62%,
        78% 100%,
        50% 78%,
        22% 100%,
        30% 62%,
        6% 62%,
        22% 44%,
        0% 30%,
        28% 28%,
        22% 6%,
        42% 18%
    );
    z-index: -1;
    opacity: 0.65;
}

/* nori */
.fam-road-cloud {
    position: absolute;
    height: 12px;
    background: #e3eefc;
    border-radius: 999px;
    opacity: 0.95;
    z-index: 2;
}

.fam-road-cloud::before,
.fam-road-cloud::after {
    content: "";
    position: absolute;
    background: #fafcff;
    border-radius: 50%;
}

.fam-road-cloud-1 {
    top: 12px;
    left: 16%;
    width: 34px;
    animation: fam-road-cloud-move-1 36s linear infinite;
}

.fam-road-cloud-1::before {
    width: 44px;
    height: 14px;
    left: 5px;
    top: -6px;
}

.fam-road-cloud-1::after {
    width: 56px;
    height: 16px;
    left: 16px;
    top: -7px;
}

.fam-road-cloud-2 {
    top: 22px;
    left: 44%;
    width: 42px;
    animation: fam-road-cloud-move-2 44s linear infinite;
}

.fam-road-cloud-2::before {
    width: 35px;
    height: 15px;
    left: 6px;
    top: -6px;
}

.fam-road-cloud-2::after {
    width: 28px;
    height: 18px;
    left: 20px;
    top: -8px;
}

.fam-road-cloud-3 {
    top: 10px;
    left: 72%;
    width: 30px;
    animation: fam-road-cloud-move-3 38s linear infinite;
}

.fam-road-cloud-3::before {
    width: 12px;
    height: 12px;
    left: 4px;
    top: -5px;
}

.fam-road-cloud-3::after {
    width: 14px;
    height: 14px;
    left: 14px;
    top: -6px;
}

.fam-road-cloud-4 {
    top: 15px;
    left: 8%;
    width: 28px;
    animation: fam-road-cloud-move-4 41s linear infinite;
}

.fam-road-cloud-4::before {
    width: 11px;
    height: 11px;
    left: 4px;
    top: -5px;
}

.fam-road-cloud-4::after {
    width: 13px;
    height: 13px;
    left: 13px;
    top: -6px;
}

.fam-road-cloud-5 {
    top: 7px;
    left: 58%;
    width: 38px;
    animation: fam-road-cloud-move-5 47s linear infinite;
}

.fam-road-cloud-5::before {
    width: 14px;
    height: 14px;
    left: 5px;
    top: -6px;
}

.fam-road-cloud-5::after {
    width: 17px;
    height: 17px;
    left: 18px;
    top: -8px;
}

/* munti */
.fam-road-mountain-back,
.fam-road-mountain-front {
    position: absolute;
    width: 0;
    height: 0;
    bottom: 24px;
    z-index: 1;
}

.fam-road-mountain-back {
    left: 0;
    border-left: 44px solid transparent;
    border-right: 44px solid transparent;
    border-bottom: 28px solid #c8c8c8;
    animation: fam-road-mountain-back-move 58s linear infinite;
}

.fam-road-mountain-front {
    left: 0;
    border-left: 60px solid transparent;
    border-right: 60px solid transparent;
    border-bottom: 36px solid #9c6b3f;
    animation: fam-road-mountain-front-move 43s linear infinite;
}

/* dealuri */
.fam-road-hill {
    position: absolute;
    left: 0;
    width: 200%;
    bottom: 20px;
    height: 28px;
    background:
        radial-gradient(55px 18px at 4% 100%, #8b5e3c 98%, transparent 100%),
        radial-gradient(75px 20px at 11% 100%, #b7b7b7 98%, transparent 100%),
        radial-gradient(70px 20px at 19% 100%, #8b5e3c 98%, transparent 100%),
        radial-gradient(95px 22px at 29% 100%, #b7b7b7 98%, transparent 100%),
        radial-gradient(82px 20px at 38% 100%, #8b5e3c 98%, transparent 100%),
        radial-gradient(70px 18px at 46% 100%, #b7b7b7 98%, transparent 100%),
        radial-gradient(60px 18px at 54% 100%, #8b5e3c 98%, transparent 100%),
        radial-gradient(85px 20px at 63% 100%, #b7b7b7 98%, transparent 100%),
        radial-gradient(75px 20px at 73% 100%, #8b5e3c 98%, transparent 100%),
        radial-gradient(90px 22px at 83% 100%, #b7b7b7 98%, transparent 100%),
        radial-gradient(70px 18px at 93% 100%, #8b5e3c 98%, transparent 100%);
    z-index: 2;
    animation: fam-road-hill-move 31.5s linear infinite;
}

/* bannere */
.fam-road-banner {
    position: absolute;
    left: 0;
    bottom: 30px;
    width: 132px;
    height: 46px;
    z-index: 9;
    will-change: transform;
    transform: translate3d(calc(100vw + 180px),0,0);
    backface-visibility: hidden;
    -webkit-backface-visibility: hidden;
    animation: fam-road-scenery-glide var(--fam-road-scenery-duration) linear infinite both;
}

.fam-road-banner span {
    position: absolute;
    left: 0;
    top: 0;
    width: 100%;
    padding: 7px 9px;
    font-size: 13px;
    font-weight: 900;
    line-height: 1.05;
    text-align: center;
    color: #ffffff;
    background:
        linear-gradient(135deg, rgba(255,255,255,0.26) 0 18%, transparent 19%),
        linear-gradient(180deg, #ff7a18 0%, #f23818 48%, #9f1239 100%);
    border: 1px solid rgba(83, 19, 6, 0.94);
    border-radius: 9px;
    box-sizing: border-box;
    z-index: 2;
    text-shadow: 0 2px 4px rgba(0,0,0,0.38);
    box-shadow:
        inset 0 1px 0 rgba(255,255,255,0.42),
        inset 0 -4px 0 rgba(0,0,0,0.14),
        0 7px 12px rgba(93, 31, 8, 0.18);
    overflow: hidden;
}

.fam-road-banner span::after {
    content: "";
    position: absolute;
    top: -22%;
    left: -42%;
    width: 32%;
    height: 150%;
    background: linear-gradient(90deg, transparent, rgba(255,255,255,0.42), transparent);
    transform: skewX(-18deg);
    animation: fam-road-banner-shine 4.8s ease-in-out infinite;
    pointer-events: none;
}

.fam-road-banner-pole {
    position: absolute;
    bottom: -4px;
    width: 3px;
    height: 4px;
    background: linear-gradient(180deg, #9ca3af 0%, #4b5563 100%);
    border-radius: 2px;
    z-index: 1;
    box-shadow: 0 1px 0 rgba(255,255,255,0.34) inset, 0 2px 4px rgba(0,0,0,0.12);
}

.fam-road-banner-pole-left {
    left: 11px;
}

.fam-road-banner-pole-right {
    right: 11px;
}

.fam-road-banner-1 {
    animation-delay: -1.2s;
}

.fam-road-banner-2 {
    animation-delay: -8.1s;
}

.fam-road-banner-2 span {
    background:
        linear-gradient(135deg, rgba(255,255,255,0.28) 0 18%, transparent 19%),
        linear-gradient(180deg, #22c55e 0%, #16a34a 46%, #047857 100%);
    border-color: rgba(6, 78, 59, 0.95);
}

/* miscari comune */
.fam-road-move-1,
.fam-road-move-2,
.fam-road-move-3 {
    animation: fam-road-scenery-glide var(--fam-road-scenery-duration) linear infinite both;
}

.fam-road-move-1 {
    animation-delay: -3.2s;
}

.fam-road-move-2 {
    animation-delay: -6.4s;
}

.fam-road-move-3 {
    animation-delay: -10.1s;
}

/* copaci */
.fam-road-tree {
    position: absolute;
    bottom: 24px;
    width: 24px;
    height: 48px;
    z-index: 5;
    animation: fam-road-scenery-glide var(--fam-road-scenery-duration) linear infinite both;
}

.fam-road-tree::before {
    content: "";
    position: absolute;
    bottom: 0;
    left: 9px;
    width: 6px;
    height: 14px;
    background: #6f4b2f;
    border-radius: 2px;
    border: 1px solid #000000;
    box-sizing: border-box;
}

.fam-road-tree::after {
    content: "";
    position: absolute;
    left: 0;
    bottom: 10px;
    width: 24px;
    height: 30px;
    background: #2e9b47;
    clip-path: polygon(50% 0%, 0% 100%, 100% 100%);
    border: 1px solid #000000;
    box-sizing: border-box;
}

.fam-road-tree-1 { animation-delay: -0.4s; }
.fam-road-tree-2 { animation-delay: -2.0s; }
.fam-road-tree-3 { animation-delay: -3.7s; }
.fam-road-tree-4 { animation-delay: -5.5s; }
.fam-road-tree-5 { animation-delay: -7.1s; }
.fam-road-tree-6 { animation-delay: -9.0s; }
.fam-road-tree-7 { animation-delay: -11.2s; }
.fam-road-tree-8 { animation-delay: -1.1s; }
.fam-road-tree-9 { animation-delay: -6.0s; }
.fam-road-tree-10 { animation-delay: -10.5s; }

.fam-road-tree-round {
    width: 28px;
    height: 46px;
}

.fam-road-tree-round::before {
    left: 11px;
    width: 6px;
    height: 15px;
    background: linear-gradient(180deg, #8b5a2b 0%, #5b3418 100%);
    border-color: rgba(37, 18, 5, 0.86);
}

.fam-road-tree-round::after {
    left: -2px;
    bottom: 11px;
    width: 32px;
    height: 28px;
    clip-path: none;
    border-radius: 52% 48% 50% 46%;
    background:
        radial-gradient(circle at 28% 34%, #6ee36f 0 17%, transparent 18%),
        radial-gradient(circle at 62% 28%, #4dcc5c 0 20%, transparent 21%),
        radial-gradient(circle at 50% 58%, #2fa84f 0 34%, transparent 35%),
        linear-gradient(180deg, #57d868 0%, #21863f 100%);
    border-color: rgba(10, 82, 35, 0.88);
    box-shadow:
        inset 0 2px 0 rgba(255,255,255,0.28),
        0 3px 6px rgba(16, 89, 38, 0.16);
}

/* blocuri */
.fam-road-building {
    position: absolute;
    bottom: 24px;
    background: #bfc4cb;
    z-index: 3;
    border-radius: 2px 2px 0 0;
}

.fam-road-building::before {
    content: "";
    position: absolute;
    inset: 4px 3px auto 3px;
    height: calc(100% - 8px);
    background:
        repeating-linear-gradient(
            90deg,
            rgba(255,255,255,0.55) 0 4px,
            transparent 4px 9px
        ),
        repeating-linear-gradient(
            180deg,
            rgba(255,255,255,0.35) 0 4px,
            transparent 4px 10px
        );
    opacity: 0.55;
}

.fam-road-building-1 {
    left: 30%;
    width: 24px;
    height: 26px;
}

.fam-road-building-2 {
    left: 66%;
    width: 20px;
    height: 22px;
}

/* case */
.fam-road-house {
    position: absolute;
    bottom: 24px;
    width: 20px;
    height: 14px;
    background: #d9b48f;
    z-index: 3;
    border-radius: 2px;
}

.fam-road-house::before {
    content: "";
    position: absolute;
    left: -2px;
    top: -8px;
    width: 0;
    height: 0;
    border-left: 12px solid transparent;
    border-right: 12px solid transparent;
    border-bottom: 10px solid #9c6b3f;
}

.fam-road-house::after {
    content: "";
    position: absolute;
    left: 7px;
    bottom: 0;
    width: 5px;
    height: 7px;
    background: rgba(255,255,255,0.55);
}

.fam-road-house-1 {
    left: 22%;
}

.fam-road-house-2 {
    left: 74%;
}

/* oameni */
.fam-road-person {
    position: absolute;
    bottom: 24px;
    width: 8px;
    height: 18px;
    z-index: 4;
}

.fam-road-person::before {
    content: "";
    position: absolute;
    top: 0;
    left: 1px;
    width: 6px;
    height: 6px;
    border-radius: 50%;
    background: #6b7280;
}

.fam-road-person::after {
    content: "";
    position: absolute;
    top: 6px;
    left: 3px;
    width: 2px;
    height: 12px;
    background: #6b7280;
    box-shadow:
        -2px 3px 0 #6b7280,
        2px 3px 0 #6b7280,
        -1px 10px 0 #6b7280,
        1px 10px 0 #6b7280;
}

.fam-road-person-1 {
    left: 18%;
}

.fam-road-person-2 {
    left: 80%;
}

/* piatra */
.fam-road-rock {
    position: absolute;
    bottom: 20px;
    width: 18px;
    height: 6px;
    border-radius: 10px;
    background: #8e8e8e;
    z-index: 5;
    animation: fam-road-scenery-glide var(--fam-road-scenery-duration) -4.8s linear infinite both;
}

/* drum */
.fam-road-road {
    position: absolute;
    left: 0;
    bottom: 0;
    width: 100%;
    height: 26px;
    background:
        radial-gradient(120px 16px at 18% 0%, rgba(255,255,255,0.14), transparent 70%),
        linear-gradient(180deg, #747c89 0%, #4b515c 42%, #2c3138 100%);
    box-shadow:
        inset 0 2px 0 rgba(255,255,255,0.22),
        inset 0 -4px 0 rgba(0,0,0,0.22),
        0 -5px 12px rgba(51, 65, 85, 0.08);
    z-index: 6;
    transform: translate3d(0,0,0);
    backface-visibility: hidden;
}

.fam-road-road::before {
    content: "";
    position: absolute;
    left: 0;
    top: 2px;
    width: 100%;
    height: 2px;
    background: rgba(255,255,255,0.24);
}

.fam-road-road::after {
    content: "";
    position: absolute;
    left: 0;
    right: 0;
    bottom: 0;
    height: 6px;
    background: linear-gradient(180deg, rgba(0,0,0,0.00), rgba(0,0,0,0.22));
    pointer-events: none;
}

/* linii */
.fam-road-road-lines {
    position: absolute;
    left: 0;
    bottom: 12px;
    height: 4px;
    z-index: 7;

    /*
       Important: modelul are perioada exacta de 76px.
       Animatia se termina dupa un multiplu exact de 76px, ca resetarea
       de la finalul ciclului sa fie invizibila si sa nu mai sara linia.
    */
    --fam-road-line-cycle: 76px;
    --fam-road-line-travel: 760px;
    width: calc(100% + var(--fam-road-line-travel));

    background: repeating-linear-gradient(
        90deg,
        rgba(255, 222, 79, 0.98) 0 18px,
        transparent 18px var(--fam-road-line-cycle)
    );
    transform-origin: left center;
    transform: translate3d(0,0,0);
    will-change: transform;
    backface-visibility: hidden;
    -webkit-backface-visibility: hidden;
    animation: fam-road-road-lines-move 7.8s linear infinite;
    box-shadow: 0 1px 0 rgba(0,0,0,0.22), 0 0 7px rgba(255, 211, 77, 0.22);
}

/* camion */
.fam-road-truck {
    position: absolute;
    left: 50%;
    bottom: 8px;
    width: 190px;
    height: 78px;
    margin-left: -95px;
    z-index: 10;
    overflow: visible;
    will-change: transform;
    transform: translate3d(0,0,0);
    transform-origin: 50% 100%;
    backface-visibility: hidden;
    -webkit-backface-visibility: hidden;
    animation: fam-road-truck-drive 4.8s ease-in-out infinite;
}

.fam-road-truck::before {
    content: "";
    position: absolute;
    left: 12px;
    right: 8px;
    bottom: -2px;
    height: 13px;
    border-radius: 50%;
    background: radial-gradient(ellipse at center, rgba(0,0,0,0.34) 0 42%, transparent 72%);
    z-index: -1;
    transform: translate3d(0,0,0);
    animation: fam-road-truck-shadow 4.8s ease-in-out infinite;
}

.fam-road-truck::after {
    content: "";
    position: absolute;
    right: 0;
    bottom: 27px;
    width: 11px;
    height: 8px;
    border-radius: 0 999px 999px 0;
    background: radial-gradient(circle at 15% 50%, rgba(255,255,255,0.95), rgba(255,214,102,0.85) 45%, rgba(255,214,102,0.00) 76%);
    opacity: 0.85;
    pointer-events: none;
}

.fam-road-truck-box {
    position: absolute;
    left: 0;
    bottom: 17px;
    width: 128px;
    height: 46px;
    background:
        linear-gradient(135deg, rgba(255,255,255,0.25) 0 18%, transparent 19%),
        linear-gradient(180deg, #ff6a00 0%, #f23818 45%, #a81412 100%);
    border: 1px solid rgba(85, 16, 5, 0.92);
    border-radius: 14px 10px 10px 12px;
    box-sizing: border-box;
    display: flex;
    align-items: center;
    justify-content: center;
    overflow: hidden;
    box-shadow:
        inset 0 2px 0 rgba(255,255,255,0.42),
        inset 0 -5px 0 rgba(0,0,0,0.14),
        0 7px 14px rgba(117, 35, 0, 0.18);
}

.fam-road-truck-box::before {
    content: "";
    position: absolute;
    top: -2px;
    bottom: -2px;
    left: 50%;
    width: 7px;
    transform: translateX(-50%);
    background: linear-gradient(180deg, #4cc9f0 0%, #1e88e5 48%, #0f4cba 100%);
    border-left: 1px solid rgba(255,255,255,0.38);
    border-right: 1px solid rgba(0,0,0,0.26);
    box-sizing: border-box;
    box-shadow: 0 0 10px rgba(30,136,229,0.38);
}

.fam-road-truck-box::after {
    content: "";
    position: absolute;
    left: -2px;
    right: -2px;
    top: 31%;
    height: 7px;
    transform: translateY(-50%);
    background: linear-gradient(90deg, #0f4cba 0%, #4cc9f0 48%, #1e88e5 100%);
    border-top: 1px solid rgba(255,255,255,0.42);
    border-bottom: 1px solid rgba(0,0,0,0.25);
    box-sizing: border-box;
    box-shadow: 0 0 10px rgba(30,136,229,0.26);
}

.fam-road-truck-box span {
    position: relative;
    z-index: 3;
    color: #ffffff;
    font-size: 16px;
    font-weight: 900;
    letter-spacing: 0.6px;
    white-space: nowrap;
    padding: 4px 9px;
    border-radius: 999px;
    background: rgba(17, 24, 39, 0.28);
    text-shadow: 0 2px 4px rgba(0,0,0,0.35);
    box-shadow: inset 0 1px 0 rgba(255,255,255,0.20);
}

.fam-road-truck-gift-bow {
    position: absolute;
    left: 53px;
    bottom: 61px;
    width: 24px;
    height: 15px;
    z-index: 10;
    animation: fam-road-bow-pop 4.8s ease-in-out infinite;
    transform-origin: center bottom;
}

.fam-road-truck-gift-bow::before,
.fam-road-truck-gift-bow::after {
    content: "";
    position: absolute;
    top: 0;
    width: 17px;
    height: 15px;
    border: 1px solid rgba(13,71,161,0.82);
    background: linear-gradient(180deg, #71d6ff 0%, #1e88e5 46%, #0f4cba 100%);
    box-sizing: border-box;
    box-shadow: inset 0 1px 0 rgba(255,255,255,0.55), 0 5px 10px rgba(0,0,0,0.14);
}

.fam-road-truck-gift-bow::before {
    left: -6px;
    border-radius: 12px 12px 2px 12px;
    transform: rotate(-18deg);
}

.fam-road-truck-gift-bow::after {
    right: -6px;
    border-radius: 12px 12px 12px 2px;
    transform: rotate(18deg);
}

.fam-road-truck-cabin {
    position: absolute;
    right: 12px;
    bottom: 17px;
    width: 45px;
    height: 38px;
    background:
        linear-gradient(135deg, rgba(255,255,255,0.24) 0 22%, transparent 23%),
        linear-gradient(180deg, #ff7a18 0%, #ef2a16 46%, #7f0908 100%);
    border: 1px solid rgba(85, 16, 5, 0.92);
    border-radius: 14px 15px 8px 8px;
    box-sizing: border-box;
    box-shadow:
        inset 0 2px 0 rgba(255,255,255,0.38),
        inset 0 -5px 0 rgba(0,0,0,0.14),
        -2px 0 0 rgba(255,255,255,0.08);
}

.fam-road-truck-cabin::before {
    content: "";
    position: absolute;
    top: 7px;
    left: 9px;
    width: 27px;
    height: 13px;
    background: linear-gradient(135deg, #ffffff 0%, #dff7ff 48%, #7dd3fc 100%);
    border-radius: 4px 6px 3px 3px;
    border: 1px solid rgba(15,23,42,0.72);
    box-sizing: border-box;
    box-shadow: inset 2px 1px 0 rgba(255,255,255,0.72);
}

.fam-road-truck-cabin::after {
    content: "";
    position: absolute;
    right: -7px;
    bottom: 3px;
    width: 8px;
    height: 13px;
    background: linear-gradient(180deg, #222 0%, #050505 100%);
    border-radius: 0 6px 6px 0;
    box-shadow: -1px 0 0 rgba(255,255,255,0.14);
}

.fam-road-truck-wheel {
    position: absolute;
    bottom: 0;
    width: 25px;
    height: 25px;
    background:
        radial-gradient(circle at center, #cfd6df 0 22%, #6b7280 23% 33%, transparent 34%),
        conic-gradient(from 0deg, #0b0f14 0 12%, #2f3540 12% 24%, #0b0f14 24% 36%, #2f3540 36% 48%, #0b0f14 48% 60%, #2f3540 60% 72%, #0b0f14 72% 84%, #2f3540 84% 100%);
    border: 3px solid #050505;
    border-radius: 50%;
    box-sizing: border-box;
    backface-visibility: hidden;
    -webkit-backface-visibility: hidden;
    transform: translateZ(0);
    will-change: transform;
    animation: fam-road-wheel-spin 0.92s linear infinite;
    box-shadow: 0 2px 0 rgba(255,255,255,0.08) inset, 0 4px 8px rgba(0,0,0,0.22);
}

.fam-road-truck-wheel::before {
    content: "";
    position: absolute;
    inset: 5px;
    background:
        radial-gradient(circle at center, #ffffff 0 18%, #b8c0ca 19% 48%, #68707c 49% 100%);
    border-radius: 50%;
    box-shadow: inset 0 1px 0 rgba(255,255,255,0.74);
}

.fam-road-truck-wheel-1 {
    left: 14px;
}

.fam-road-truck-wheel-2 {
    left: 99px;
}

.fam-road-truck-wheel-3 {
    right: 22px;
}

/* stabilizare animatii: toate obiectele care se misca raman pe transform, nu pe layout */
.fam-road-cloud,
.fam-road-mountain-back,
.fam-road-mountain-front,
.fam-road-hill,
.fam-road-banner,
.fam-road-move-1,
.fam-road-move-2,
.fam-road-move-3,
.fam-road-tree,
.fam-road-rock {
    will-change: transform;
    transform: translate3d(0,0,0);
    backface-visibility: hidden;
    -webkit-backface-visibility: hidden;
}

/* animatii */
@keyframes fam-road-cloud-move-1 {
    0% { transform: translateX(0); }
    100% { transform: translateX(-80px); }
}

@keyframes fam-road-cloud-move-2 {
    0% { transform: translateX(0); }
    100% { transform: translateX(-110px); }
}

@keyframes fam-road-cloud-move-3 {
    0% { transform: translateX(0); }
    100% { transform: translateX(-90px); }
}

@keyframes fam-road-cloud-move-4 {
    0% { transform: translateX(0); }
    100% { transform: translateX(-95px); }
}

@keyframes fam-road-cloud-move-5 {
    0% { transform: translateX(0); }
    100% { transform: translateX(-120px); }
}

@keyframes fam-road-mountain-back-move {
    0% { transform: translateX(110vw); }
    100% { transform: translateX(-220px); }
}

@keyframes fam-road-mountain-front-move {
    0% { transform: translateX(110vw); }
    100% { transform: translateX(-260px); }
}

@keyframes fam-road-hill-move {
    0% { transform: translateX(0); }
    100% { transform: translateX(-50%); }
}

@keyframes fam-road-scenery-glide {
    0% { transform: translate3d(calc(100vw + 180px),0,0); }
    100% { transform: translate3d(-220px,0,0); }
}

@keyframes fam-road-banner-shine {
    0%, 62% { transform: translateX(0) skewX(-18deg); opacity: 0; }
    72% { opacity: 0.85; }
    100% { transform: translateX(520%) skewX(-18deg); opacity: 0; }
}


@keyframes fam-road-rock-move {
    0% { transform: translate3d(110vw,0,0); }
    100% { transform: translate3d(-120px,0,0); }
}

@keyframes fam-road-road-lines-move {
    0% { transform: translate3d(0,0,0); }
    100% { transform: translate3d(calc(0px - var(--fam-road-line-travel)),0,0); }
}

@keyframes fam-road-truck-drive {
    0%, 100% { transform: translate3d(0,0,0) rotate(0deg); }
    18% { transform: translate3d(0,-1px,0) rotate(-0.15deg); }
    36% { transform: translate3d(0,1px,0) rotate(0.12deg); }
    52% { transform: translate3d(0,-3px,0) rotate(-0.22deg); }
    58% { transform: translate3d(0,0,0) rotate(0.12deg); }
    74% { transform: translate3d(0,-1px,0) rotate(0deg); }
}

@keyframes fam-road-truck-shadow {
    0%, 100% { transform: translate3d(0,0,0) scaleX(1); opacity: 0.78; }
    52% { transform: translate3d(0,3px,0) scaleX(0.92); opacity: 0.56; }
}

@keyframes fam-road-wheel-spin {
    from { transform: translateZ(0) rotate(0deg); }
    to { transform: translateZ(0) rotate(360deg); }
}

@keyframes fam-road-bow-pop {
    0%, 100% { transform: translate3d(0,0,0) rotate(0deg); }
    50% { transform: translate3d(0,-1px,0) rotate(-2deg); }
}

/* responsive */
@media (max-width: 768px) {
    .fam-road-wrapper {
        height: 84px;
        contain: layout paint style;
        transform: translate3d(0,0,0);
    }

    .fam-road-road {
        height: 25px;
    }

    .fam-road-road-lines {
        bottom: 12px;
        height: 4px;
        --fam-road-line-travel: 456px;
        width: calc(100% + var(--fam-road-line-travel));
        animation-duration: 6.4s;
        transform: translate3d(0,0,0);
        will-change: transform;
    }

    .fam-road-truck {
        width: 142px;
        height: 58px;
        margin-left: -71px;
        bottom: 4px;
        animation-duration: 5.2s;
        will-change: transform;
    }

    .fam-road-truck::before {
        left: 8px;
        right: 5px;
        bottom: -1px;
        height: 10px;
    }

    .fam-road-truck::after {
        right: -1px;
        bottom: 22px;
        width: 8px;
        height: 6px;
    }

    .fam-road-truck-box {
        width: 96px;
        height: 34px;
        bottom: 13px;
        border-radius: 11px 8px 8px 10px;
    }

    .fam-road-truck-box span {
        font-size: 10.5px;
        padding: 3px 6px;
        letter-spacing: 0.2px;
    }

    .fam-road-truck-cabin {
        width: 37px;
        height: 29px;
        right: 7px;
        bottom: 13px;
        border-radius: 11px 11px 7px 7px;
    }

    .fam-road-truck-cabin::before {
        top: 6px;
        left: 7px;
        width: 23px;
        height: 10px;
    }

    .fam-road-truck-cabin::after {
        right: -6px;
        bottom: 2px;
        width: 7px;
        height: 10px;
    }

    .fam-road-truck-gift-bow {
        left: 39px;
        bottom: 45px;
        width: 17px;
        height: 9px;
    }

    .fam-road-truck-gift-bow::before,
    .fam-road-truck-gift-bow::after {
        width: 12px;
        height: 10px;
    }

    .fam-road-truck-wheel {
        width: 19px;
        height: 19px;
        border-width: 2px;
        animation-duration: 0.78s;
    }

    .fam-road-truck-wheel::before {
        inset: 4px;
    }

    .fam-road-truck-wheel-1 {
        left: 8px;
    }

    .fam-road-truck-wheel-2 {
        left: 70px;
    }

    .fam-road-truck-wheel-3 {
        right: 11px;
    }

    .fam-road-banner {
        width: 94px;
        height: 34px;
        bottom: 29px;
        animation-duration: var(--fam-road-scenery-duration);
    }

    .fam-road-banner span {
        font-size: 9px;
        padding: 4px 6px;
        border-radius: 7px;
    }

    .fam-road-banner-2 {
        animation-delay: -8.1s;
    }

    .fam-road-banner-pole {
        bottom: -4px;
        width: 2px;
        height: 4px;
    }

    .fam-road-banner-pole-left {
        left: 10px;
    }

    .fam-road-banner-pole-right {
        right: 10px;
    }

    .fam-road-tree {
        width: 18px;
        height: 38px;
    }

    .fam-road-tree::before {
        left: 7px;
        width: 4px;
        height: 12px;
    }

    .fam-road-tree::after {
        width: 18px;
        height: 24px;
    }

    .fam-road-tree-round {
        width: 22px;
        height: 36px;
    }

    .fam-road-tree-round::before {
        left: 9px;
        width: 4px;
        height: 11px;
    }

    .fam-road-tree-round::after {
        left: -2px;
        bottom: 9px;
        width: 25px;
        height: 22px;
    }
}