/* =====================================================
   footer_anim.css
   CSS-анимации поверх футера okgamer.ru
   ===================================================== */

/* --- Контейнер сцены --- */
.ft-scene {
    position: relative;
    display: block;
    overflow: hidden;
}

/* --- Фон (сама картинка) --- */
.ft-bg {
    background: url(../images/new/footer_bg3.jpg) bottom center no-repeat;
    height: 609px;
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    z-index: 0;
    background-size: auto 609px;
}

/* Контент поверх фона */
.ft-content {
    position: relative;
    z-index: 10;
    padding-top: 800px; /* стандартный отступ как у оригинального footer */
}

/* =====================================================
   ОБЛАКА
   ===================================================== */

/* Оригинальные облака на картинке светлые ~y=10-80px от верха */
.ft-cloud {
    position: absolute;
    z-index: 1;
    border-radius: 50px;
    background: rgba(255,255,255,0.55);
    top: 0;
    /* Анимация: плывут справа налево и появляются снова справа */
    -webkit-animation: ft-cloud-drift linear infinite;
    animation: ft-cloud-drift linear infinite;
}

.ft-cloud-1 {
    width: 180px;
    height: 28px;
    top: 18px;
    -webkit-animation-duration: 55s;
    animation-duration: 55s;
    -webkit-animation-delay: 0s;
    animation-delay: 0s;
    opacity: 0.5;
}
.ft-cloud-2 {
    width: 120px;
    height: 20px;
    top: 42px;
    -webkit-animation-duration: 80s;
    animation-duration: 80s;
    -webkit-animation-delay: -25s;
    animation-delay: -25s;
    opacity: 0.4;
}
.ft-cloud-3 {
    width: 90px;
    height: 16px;
    top: 28px;
    -webkit-animation-duration: 65s;
    animation-duration: 65s;
    -webkit-animation-delay: -40s;
    animation-delay: -40s;
    opacity: 0.35;
}

@-webkit-keyframes ft-cloud-drift {
    0%   { -webkit-transform: translateX(2100px); }
    100% { -webkit-transform: translateX(-300px); }
}
@keyframes ft-cloud-drift {
    0%   { transform: translateX(2100px); }
    100% { transform: translateX(-300px); }
}

/* =====================================================
   СОНИК — бегает по крыше
   Крыша центрального здания: ~x=820, y=148 (от верха картинки)
   Картинка 609px высотой, смотрим % от footer высоты
   ===================================================== */
.ft-sonic {
    position: absolute;
    top: 112px;   /* y=112 от верха картинки */
    z-index: 3;
    width: 50px;
    height: 60px;
    /* Бегает по крыше туда-сюда: от x=800 до x=870 */
    -webkit-animation: ft-sonic-run 4s ease-in-out infinite alternate;
    animation: ft-sonic-run 4s ease-in-out infinite alternate;
}

/* Спрайт Соника — пиксельный персонаж из CSS */
.ft-sonic-sprite {
    width: 32px;
    height: 48px;
    image-rendering: pixelated;
    /* Простой CSS-Соник из форм */
    position: relative;
}
/* Тело */
.ft-sonic-sprite::before {
    content: '';
    position: absolute;
    width: 22px;
    height: 22px;
    background: #1a5cff;
    border-radius: 50%;
    top: 14px;
    left: 5px;
}
/* Голова */
.ft-sonic-sprite::after {
    content: '';
    position: absolute;
    width: 18px;
    height: 18px;
    background: #1a5cff;
    border-radius: 50% 50% 40% 40%;
    top: 0;
    left: 7px;
}

@-webkit-keyframes ft-sonic-run {
    0%   { -webkit-transform: translateX(790px); }
    45%  { -webkit-transform: translateX(840px); }
    55%  { -webkit-transform: translateX(840px) scaleX(-1); }
    100% { -webkit-transform: translateX(790px) scaleX(-1); }
}
@keyframes ft-sonic-run {
    0%   { transform: translateX(790px); }
    45%  { transform: translateX(840px); }
    55%  { transform: translateX(840px) scaleX(-1); }
    100% { transform: translateX(790px) scaleX(-1); }
}

/* =====================================================
   ВЫВЕСКА — неоновое мигание
   Вывеска OkGamer.ru City: ~x=860-1020, y=368-440
   ===================================================== */
.ft-sign-glow {
    position: absolute;
    top: 362px;
    left: 855px;
    width: 175px;
    height: 82px;
    z-index: 2;
    border-radius: 4px;
    /* Имитируем неоновое свечение вывески */
    box-shadow: 0 0 12px 4px rgba(0, 230, 255, 0.5),
                0 0 25px 8px rgba(0, 180, 255, 0.25);
    -webkit-animation: ft-neon-blink 3s ease-in-out infinite;
    animation: ft-neon-blink 3s ease-in-out infinite;
    pointer-events: none;
}

@-webkit-keyframes ft-neon-blink {
    0%,100% {
        opacity: 1;
        -webkit-box-shadow: 0 0 12px 4px rgba(0,230,255,0.5), 0 0 25px 8px rgba(0,180,255,0.25);
        box-shadow: 0 0 12px 4px rgba(0,230,255,0.5), 0 0 25px 8px rgba(0,180,255,0.25);
    }
    20% {
        opacity: 0.3;
        -webkit-box-shadow: none;
        box-shadow: none;
    }
    25% {
        opacity: 1;
        -webkit-box-shadow: 0 0 16px 6px rgba(0,230,255,0.7), 0 0 35px 12px rgba(0,180,255,0.4);
        box-shadow: 0 0 16px 6px rgba(0,230,255,0.7), 0 0 35px 12px rgba(0,180,255,0.4);
    }
    80% {
        opacity: 1;
        -webkit-box-shadow: 0 0 12px 4px rgba(0,230,255,0.5), 0 0 25px 8px rgba(0,180,255,0.25);
        box-shadow: 0 0 12px 4px rgba(0,230,255,0.5), 0 0 25px 8px rgba(0,180,255,0.25);
    }
    85% {
        opacity: 0.5;
        -webkit-box-shadow: none;
        box-shadow: none;
    }
    90% {
        opacity: 1;
    }
}
@keyframes ft-neon-blink {
    0%,100% {
        opacity: 1;
        box-shadow: 0 0 12px 4px rgba(0,230,255,0.5), 0 0 25px 8px rgba(0,180,255,0.25);
    }
    20% { opacity: 0.3; box-shadow: none; }
    25% { opacity: 1; box-shadow: 0 0 16px 6px rgba(0,230,255,0.7), 0 0 35px 12px rgba(0,180,255,0.4); }
    80% { opacity: 1; box-shadow: 0 0 12px 4px rgba(0,230,255,0.5), 0 0 25px 8px rgba(0,180,255,0.25); }
    85% { opacity: 0.5; box-shadow: none; }
    90% { opacity: 1; }
}

/* =====================================================
   ПЭК-МАН — едет по тротуару
   Тротуар: y≈500px от верха картинки
   ===================================================== */
.ft-pacman-wrap {
    position: absolute;
    top: 490px;
    left: 0;
    width: 100%;
    height: 30px;
    z-index: 3;
    pointer-events: none;
    /* Весь блок едет слева направо */
    -webkit-animation: ft-pacman-move 18s linear infinite;
    animation: ft-pacman-move 18s linear infinite;
}

/* Сам Пэк-Ман */
.ft-pacman {
    position: absolute;
    left: 0;
    top: 0;
    width: 24px;
    height: 24px;
    background: #FFD700;
    border-radius: 50%;
    /* Рот открывается/закрывается */
    -webkit-animation: ft-pacman-chomp 0.3s linear infinite;
    animation: ft-pacman-chomp 0.3s linear infinite;
    overflow: hidden;
}
.ft-pacman::before {
    content: '';
    position: absolute;
    width: 0;
    height: 0;
    border-style: solid;
    border-width: 12px 14px 12px 0;
    border-color: transparent #000 transparent transparent;
    top: 0;
    right: 0;
    -webkit-transform-origin: left center;
    transform-origin: left center;
    -webkit-animation: ft-mouth-open 0.3s linear infinite;
    animation: ft-mouth-open 0.3s linear infinite;
}

/* Точки которые Пэк-Ман ест — статичны в блоке, уходят за Пэк-Мана */
.ft-dot {
    position: absolute;
    width: 6px;
    height: 6px;
    background: #FFD700;
    border-radius: 50%;
    top: 9px;
    opacity: 0.8;
}
.ft-dot-1 { left: 40px; }
.ft-dot-2 { left: 65px; }
.ft-dot-3 { left: 90px; }
.ft-dot-4 { left: 115px; }
.ft-dot-5 { left: 140px; }

@-webkit-keyframes ft-pacman-move {
    0%   { -webkit-transform: translateX(-200px); }
    100% { -webkit-transform: translateX(2100px); }
}
@keyframes ft-pacman-move {
    0%   { transform: translateX(-200px); }
    100% { transform: translateX(2100px); }
}

@-webkit-keyframes ft-pacman-chomp {
    0%,100% { -webkit-transform: rotate(0deg); }
    50%      { -webkit-transform: rotate(0deg); }
    25%      { -webkit-transform: rotate(-30deg); }
    75%      { -webkit-transform: rotate(-30deg); }
}
@keyframes ft-pacman-chomp {
    0%,100% { border-radius: 50%; }
    50%      { border-radius: 50% 50% 50% 0; }
}

@-webkit-keyframes ft-mouth-open {
    0%,100% { -webkit-transform: rotate(35deg); }
    50%      { -webkit-transform: rotate(0deg); }
}
@keyframes ft-mouth-open {
    0%,100% { transform: rotate(35deg); }
    50%      { transform: rotate(0deg); }
}

/* =====================================================
   СВЕТОФОР — мигает между красным и зелёным
   Светофор на картинке: ~x=930, y=440-480
   ===================================================== */
.ft-traffic-light {
    position: absolute;
    top: 432px;
    left: 924px;
    z-index: 3;
    pointer-events: none;
}
.ft-tl-red, .ft-tl-green {
    width: 8px;
    height: 8px;
    border-radius: 50%;
    margin-bottom: 2px;
}
.ft-tl-red {
    background: #ff2200;
    -webkit-animation: ft-tl-red-blink 4s ease-in-out infinite;
    animation: ft-tl-red-blink 4s ease-in-out infinite;
    box-shadow: 0 0 6px 2px rgba(255,30,0,0.7);
}
.ft-tl-green {
    background: #333;
    -webkit-animation: ft-tl-green-blink 4s ease-in-out infinite;
    animation: ft-tl-green-blink 4s ease-in-out infinite;
}

@-webkit-keyframes ft-tl-red-blink {
    0%,45% { background:#ff2200; box-shadow: 0 0 6px 2px rgba(255,30,0,0.7); }
    50%,95% { background:#330000; box-shadow: none; }
    100% { background:#ff2200; box-shadow: 0 0 6px 2px rgba(255,30,0,0.7); }
}
@keyframes ft-tl-red-blink {
    0%,45% { background:#ff2200; box-shadow: 0 0 6px 2px rgba(255,30,0,0.7); }
    50%,95% { background:#330000; box-shadow: none; }
    100% { background:#ff2200; box-shadow: 0 0 6px 2px rgba(255,30,0,0.7); }
}
@-webkit-keyframes ft-tl-green-blink {
    0%,45% { background:#003300; box-shadow: none; }
    50%,95% { background:#00dd44; box-shadow: 0 0 6px 2px rgba(0,200,60,0.7); }
    100% { background:#003300; box-shadow: none; }
}
@keyframes ft-tl-green-blink {
    0%,45% { background:#003300; box-shadow: none; }
    50%,95% { background:#00dd44; box-shadow: 0 0 6px 2px rgba(0,200,60,0.7); }
    100% { background:#003300; box-shadow: none; }
}

/* =====================================================
   HOVER — при наведении на футер всё оживает быстрее
   ===================================================== */
.ft-scene:hover .ft-sonic {
    -webkit-animation-duration: 1.5s;
    animation-duration: 1.5s;
}
.ft-scene:hover .ft-pacman-wrap {
    -webkit-animation-duration: 6s;
    animation-duration: 6s;
}
.ft-scene:hover .ft-sign-glow {
    -webkit-animation-duration: 0.8s;
    animation-duration: 0.8s;
}
.ft-scene:hover .ft-cloud-1 {
    -webkit-animation-duration: 20s;
    animation-duration: 20s;
}

/* =====================================================
   ШАГ 2 — Новые персонажи
   ===================================================== */

/* ── МАРИО прыгает на крыше красного дома слева ── */
/* Крыша красного дома: ~x=75px (от центра 2000px картинки, масштаб 50%) */
.ft-mario {
    position: absolute;
    top: 130px;   /* крыша красного дома */
    left: 75px;
    z-index: 4;
    -webkit-animation: ft-mario-jump 2.2s ease-in-out infinite;
    animation: ft-mario-jump 2.2s ease-in-out infinite;
}
@-webkit-keyframes ft-mario-jump {
    0%,100% { -webkit-transform: translateY(0); }
    40%,60%  { -webkit-transform: translateY(-18px); }
}
@keyframes ft-mario-jump {
    0%,100% { transform: translateY(0); }
    40%,60%  { transform: translateY(-18px); }
}

/* Звезда над Марио */
.ft-mario-star {
    position: absolute;
    top: 118px;
    left: 82px;
    z-index: 5;
    font-size: 10px;
    pointer-events: none;
    -webkit-animation: ft-star-pop 2.2s ease-in-out infinite;
    animation: ft-star-pop 2.2s ease-in-out infinite;
}
@-webkit-keyframes ft-star-pop {
    0%,100% { opacity: 0; -webkit-transform: translateY(0) scale(0.5); }
    35%      { opacity: 1; -webkit-transform: translateY(-22px) scale(1); }
    65%      { opacity: 1; -webkit-transform: translateY(-22px) scale(1); }
    80%      { opacity: 0; }
}
@keyframes ft-star-pop {
    0%,100% { opacity: 0; transform: translateY(0) scale(0.5); }
    35%      { opacity: 1; transform: translateY(-22px) scale(1); }
    65%      { opacity: 1; transform: translateY(-22px) scale(1); }
    80%      { opacity: 0; }
}

/* ── КИРБИ летит по небу ── */
.ft-kirby {
    position: absolute;
    top: 25px;
    z-index: 3;
    -webkit-animation: ft-kirby-fly 12s linear infinite;
    animation: ft-kirby-fly 12s linear infinite;
}
.ft-kirby-inner {
    -webkit-animation: ft-kirby-bob 1s ease-in-out infinite alternate;
    animation: ft-kirby-bob 1s ease-in-out infinite alternate;
}
@-webkit-keyframes ft-kirby-fly {
    0%   { -webkit-transform: translateX(105%); }
    100% { -webkit-transform: translateX(-80px); }
}
@keyframes ft-kirby-fly {
    0%   { transform: translateX(105%); }
    100% { transform: translateX(-80px); }
}
@-webkit-keyframes ft-kirby-bob {
    0%   { -webkit-transform: translateY(0); }
    100% { -webkit-transform: translateY(6px); }
}
@keyframes ft-kirby-bob {
    0%   { transform: translateY(0); }
    100% { transform: translateY(6px); }
}

/* ── ЛИНК стоит справа ── */
.ft-link {
    position: absolute;
    top: 218px;
    left: 756px;
    z-index: 4;
    -webkit-animation: ft-link-idle 2s ease-in-out infinite alternate;
    animation: ft-link-idle 2s ease-in-out infinite alternate;
}
@-webkit-keyframes ft-link-idle {
    0%   { -webkit-transform: scaleY(1); }
    100% { -webkit-transform: scaleY(0.96); }
}
@keyframes ft-link-idle {
    0%   { transform: scaleY(1); }
    100% { transform: scaleY(0.96); }
}

/* ── КОНГ выглядывает из окна ── */
.ft-kong {
    position: absolute;
    top: 143px;
    left: 347px;
    z-index: 4;
    -webkit-animation: ft-kong-peek 5s ease-in-out infinite;
    animation: ft-kong-peek 5s ease-in-out infinite;
}
@-webkit-keyframes ft-kong-peek {
    0%,100%  { -webkit-transform: translateX(0); }
    20%,80%  { -webkit-transform: translateX(0); }
    30%,70%  { -webkit-transform: translateX(8px); }
    45%,55%  { -webkit-transform: translateX(12px); }
}
@keyframes ft-kong-peek {
    0%,100%  { transform: translateX(0); }
    20%,80%  { transform: translateX(0); }
    30%,70%  { transform: translateX(8px); }
    45%,55%  { transform: translateX(12px); }
}

/* ── ПРИЗРАКИ за Пэк-маном ── */
.ft-ghost {
    position: absolute;
    top: -2px;
    width: 12px;
    height: 13px;
    -webkit-border-radius: 6px 6px 0 0;
    border-radius: 6px 6px 0 0;
    -webkit-animation: ft-ghost-bob 0.5s ease-in-out infinite alternate;
    animation: ft-ghost-bob 0.5s ease-in-out infinite alternate;
}
.ft-ghost::after {
    content: '';
    position: absolute;
    bottom: 0; left: 0; right: 0;
    height: 4px;
    background: inherit;
    -webkit-clip-path: polygon(0 0,16% 100%,33% 0,50% 100%,66% 0,83% 100%,100% 0);
    clip-path: polygon(0 0,16% 100%,33% 0,50% 100%,66% 0,83% 100%,100% 0);
}
.ft-ghost-1 { left: -28px; background: #FF6B9D; -webkit-animation-delay: 0s; animation-delay: 0s; }
.ft-ghost-2 { left: -46px; background: #00CFCF; -webkit-animation-delay: .15s; animation-delay: .15s; }
.ft-ghost-3 { left: -64px; background: #FFB8FF; -webkit-animation-delay: .3s; animation-delay: .3s; }
@-webkit-keyframes ft-ghost-bob {
    0%   { -webkit-transform: translateY(0); }
    100% { -webkit-transform: translateY(-3px); }
}
@keyframes ft-ghost-bob {
    0%   { transform: translateY(0); }
    100% { transform: translateY(-3px); }
}

/* ── Hover ускоряет новых персонажей тоже ── */
.ft-scene:hover .ft-kirby    { -webkit-animation-duration: 5s; animation-duration: 5s; }
.ft-scene:hover .ft-mario    { -webkit-animation-duration: .8s; animation-duration: .8s; }
.ft-scene:hover .ft-kong     { -webkit-animation-duration: 1.5s; animation-duration: 1.5s; }