/* ============================================
   КОМПОНЕНТ: Новогодние шары (b-page_newyear)
   Анимированная гирлянда с шарами вверху страницы
   
   Использование:
   1. Подключите этот CSS файл
   2. Подключите newyear-balls.js
   3. Подключите jQuery
   4. Скопируйте папку img/balls/ с изображениями
   ============================================ */

.b-page__content {
    min-height: 105px;
}

.b-head-decor {
    display: none;
}

.b-page_newyear {
    position: relative;
}

.b-page_newyear .b-head-decor {
    position: absolute;
    left: 0;
    display: block;
    height: 115px;
    width: 100%;
    overflow: hidden;
    /* ВАЖНО: Замените путь к фоновому изображению на актуальный */
    background: url(./img/balls/b-head-decor_newyear.png) repeat-x 0 0;
}

.b-page_newyear .b-head-decor__inner {
    position: absolute;
    top: 0;
    left: 0;
    height: 115px;
    display: block;
    width: 373px;
}

.b-page_newyear .b-head-decor::before {
    content: '';
    display: block;
    position: absolute;
    top: -115px;
    left: 0;
    z-index: 3;
    height: 115px;
    width: 100%;
    box-shadow: 0 15px 30px rgba(0, 0, 0, 0.75);
}

/* Позиционирование внутренних блоков (повторяющийся паттерн) */
.b-page_newyear .b-head-decor__inner_n2 { left: 373px; }
.b-page_newyear .b-head-decor__inner_n3 { left: 746px; }
.b-page_newyear .b-head-decor__inner_n4 { left: 1119px; }
.b-page_newyear .b-head-decor__inner_n5 { left: 1492px; }
.b-page_newyear .b-head-decor__inner_n6 { left: 1865px; }
.b-page_newyear .b-head-decor__inner_n7 { left: 2238px; }


/* ============================================
   ШАРЫ - Позиционирование
   ============================================ */

.b-ball {
    position: absolute;
}

.b-ball_n1 { top: 0; left: 3px; width: 59px; height: 83px; }
.b-ball_n2 { top: -19px; left: 51px; width: 55px; height: 70px; }
.b-ball_n3 { top: 9px; left: 88px; width: 49px; height: 67px; }
.b-ball_n4 { top: 0; left: 133px; width: 57px; height: 102px; }
.b-ball_n5 { top: 0; left: 166px; width: 49px; height: 57px; }
.b-ball_n6 { top: 6px; left: 200px; width: 54px; height: 70px; }
.b-ball_n7 { top: 0; left: 240px; width: 56px; height: 67px; }
.b-ball_n8 { top: 0; left: 283px; width: 54px; height: 53px; }
.b-ball_n9 { top: 10px; left: 321px; width: 49px; height: 66px; }


/* ============================================
   ШАРЫ - Изображения
   ВАЖНО: Замените пути на актуальные
   ============================================ */

.b-ball_n1 .b-ball__i { background: url(./img/balls/b-ball_n1.png) no-repeat; }
.b-ball_n2 .b-ball__i { background: url(./img/balls/b-ball_n2.png) no-repeat; }
.b-ball_n3 .b-ball__i { background: url(./img/balls/b-ball_n3.png) no-repeat; }
.b-ball_n4 .b-ball__i { background: url(./img/balls/b-ball_n4.png) no-repeat; }
.b-ball_n5 .b-ball__i { background: url(./img/balls/b-ball_n5.png) no-repeat; }
.b-ball_n6 .b-ball__i { background: url(./img/balls/b-ball_n6.png) no-repeat; }
.b-ball_n7 .b-ball__i { background: url(./img/balls/b-ball_n7.png) no-repeat; }
.b-ball_n8 .b-ball__i { background: url(./img/balls/b-ball_n8.png) no-repeat; }
.b-ball_n9 .b-ball__i { background: url(./img/balls/b-ball_n9.png) no-repeat; }


/* ============================================
   ДЕКОРАТИВНЫЕ ЭЛЕМЕНТЫ
   ============================================ */

.b-ball_i1 .b-ball__i { background: url(./img/balls/b-ball_i1.png) no-repeat; }
.b-ball_i2 .b-ball__i { background: url(./img/balls/b-ball_i2.png) no-repeat; }
.b-ball_i3 .b-ball__i { background: url(./img/balls/b-ball_i3.png) no-repeat; }
.b-ball_i4 .b-ball__i { background: url(./img/balls/b-ball_i4.png) no-repeat; }
.b-ball_i5 .b-ball__i { background: url(./img/balls/b-ball_i5.png) no-repeat; }
.b-ball_i6 .b-ball__i { background: url(./img/balls/b-ball_i6.png) no-repeat; }

.b-ball_i1 { top: 0; left: 0; width: 25px; height: 71px; }
.b-ball_i2 { top: 0; left: 25px; width: 61px; height: 27px; }
.b-ball_i3 { top: 0; left: 176px; width: 29px; height: 31px; }
.b-ball_i4 { top: 0; left: 205px; width: 50px; height: 51px; }
.b-ball_i5 { top: 0; left: 289px; width: 78px; height: 28px; }
.b-ball_i6 { top: 0; left: 367px; width: 6px; height: 69px; }


/* ============================================
   АНИМАЦИЯ ШАРОВ
   ============================================ */

.b-ball__i {
    position: absolute;
    width: 100%;
    height: 100%;
    -webkit-transform-origin: 50% 0;
    -moz-transform-origin: 50% 0;
    -o-transform-origin: 50% 0;
    transform-origin: 50% 0;
    -webkit-transition: all .3s ease-in-out;
    -moz-transition: all .3s ease-in-out;
    -o-transition: all .3s ease-in-out;
    transition: all .3s ease-in-out;
    pointer-events: none;
}

.b-ball_bounce .b-ball__right {
    position: absolute;
    top: 0;
    right: 0;
    left: 50%;
    bottom: 0;
    z-index: 9;
}

.b-ball_bounce:hover .b-ball__right {
    display: none;
}

.b-ball_bounce .b-ball__right:hover {
    left: 0;
    display: block !important;
}

/* Состояния анимации качания */
.b-ball_bounce.bounce > .b-ball__i {
    -webkit-transform: rotate(-9deg);
    -moz-transform: rotate(-9deg);
    -o-transform: rotate(-9deg);
    transform: rotate(-9deg);
}

.b-ball_bounce .b-ball__right.bounce + .b-ball__i {
    -webkit-transform: rotate(9deg);
    -moz-transform: rotate(9deg);
    -o-transform: rotate(9deg);
    transform: rotate(9deg);
}

.b-ball_bounce.bounce1 > .b-ball__i {
    -webkit-transform: rotate(6deg);
    -moz-transform: rotate(6deg);
    -o-transform: rotate(6deg);
    transform: rotate(6deg);
}

.b-ball_bounce .b-ball__right.bounce1 + .b-ball__i {
    -webkit-transform: rotate(-6deg);
    -moz-transform: rotate(-6deg);
    -o-transform: rotate(-6deg);
    transform: rotate(-6deg);
}

.b-ball_bounce.bounce2 > .b-ball__i {
    -webkit-transform: rotate(-3deg);
    -moz-transform: rotate(-3deg);
    -o-transform: rotate(-3deg);
    transform: rotate(-3deg);
}

.b-ball_bounce .b-ball__right.bounce2 + .b-ball__i {
    -webkit-transform: rotate(3deg);
    -moz-transform: rotate(3deg);
    -o-transform: rotate(3deg);
    transform: rotate(3deg);
}

.b-ball_bounce.bounce3 > .b-ball__i {
    -webkit-transform: rotate(1.5deg);
    -moz-transform: rotate(1.5deg);
    -o-transform: rotate(1.5deg);
    transform: rotate(1.5deg);
}

.b-ball_bounce .b-ball__right.bounce3 + .b-ball__i {
    -webkit-transform: rotate(-1.5deg);
    -moz-transform: rotate(-1.5deg);
    -o-transform: rotate(-1.5deg);
    transform: rotate(-1.5deg);
}


/* ============================================
   КНОПКА УПРАВЛЕНИЯ ЗВУКОМ
   ============================================ */

.b-cmnewyear-sound {
    position: absolute;
    z-index: 100;
    top: 10px;
    left: 15px;
}

.b-sound-button {
    font-size: 10px;
    cursor: pointer;
    color: #999;
    border: 1px solid #aaa;
    text-shadow: #66666666 0 0 3px;
    box-shadow: #66666666 0 0 5px;
    background-color: #fff;
    border-radius: 5px;
    padding: 3px 5px;
    line-height: 10px;
}

.b-sound-button:hover {
    color: red;
}

@media screen and (max-width: 760px) {
    .b-cmnewyear-sound {
        display: none;
    }
}