/* ============================================
   04-pages.css
   Hero и перебивки 6 продуктовых страниц:
   реклама, клипы, корпоратив, кино, CGI, вирусная
   ============================================ */

/* ============================================
   РЕКЛАМНЫЕ РОЛИКИ
   ============================================ */
.an-hero-bg.an-reklama-hero-bg {
  background:
    linear-gradient(180deg, rgba(13,28,48,0.25) 0%, rgba(13,28,48,0.55) 45%, rgba(13,28,48,0.96) 100%),
    url("/templates/artnonstop_kinostudiya/images/reklama-hero.jpg") center/cover no-repeat !important;
}
.an-reklama-break-bg-1 { background-image: url("/templates/artnonstop_kinostudiya/images/reklama-parallax-1.jpg") !important; }
.an-reklama-break-bg-2 { background-image: url("/templates/artnonstop_kinostudiya/images/reklama-parallax-2.jpg") !important; }
.an-reklama-break-bg-3 { background-image: url("/templates/artnonstop_kinostudiya/images/reklama-parallax-3.jpg") !important; }
.an-reklama-break-bg-4 { background-image: url("/templates/artnonstop_kinostudiya/images/reklama-parallax-4.jpg") !important; }

.an-reklama-break-1 .an-break-inner {
  opacity: 0;
  transform: translateX(60px);
  transition: opacity 1s ease, transform 1s ease;
}
.an-reklama-break-1.is-visible .an-break-inner { opacity: 1; transform: translateX(0); }

.an-reklama-break-2 .an-break-inner {
  opacity: 0;
  transform: rotate(-2deg) scale(0.9);
  transition: opacity 1.1s ease, transform 1.1s cubic-bezier(0.2, 0.9, 0.3, 1.2);
}
.an-reklama-break-2.is-visible .an-break-inner { opacity: 1; transform: rotate(0) scale(1); }

.an-reklama-break-3 .an-break-inner {
  opacity: 0;
  transform: translateY(60px) scale(1.05);
  transition: opacity 1s ease, transform 1s cubic-bezier(0.2, 0.9, 0.3, 1);
}
.an-reklama-break-3.is-visible .an-break-inner { opacity: 1; transform: translateY(0) scale(1); }

.an-reklama-break-4 .an-break-inner {
  opacity: 0;
  transform: translateX(-60px);
  transition: opacity 1s ease, transform 1s cubic-bezier(0.2, 0.9, 0.3, 1);
}
.an-reklama-break-4.is-visible .an-break-inner { opacity: 1; transform: translateX(0); }

/* ============================================
   СЪЁМКА КЛИПОВ
   ============================================ */
.an-hero-bg.an-klipy-hero-bg {
  background:
    linear-gradient(180deg, rgba(13,28,48,0.25) 0%, rgba(13,28,48,0.55) 45%, rgba(13,28,48,0.96) 100%),
    url("/templates/artnonstop_kinostudiya/images/klipy-hero.jpg") center/cover no-repeat !important;
}
.an-klipy-break-bg-1 { background-image: url("/templates/artnonstop_kinostudiya/images/klipy-parallax-1.jpg") !important; }
.an-klipy-break-bg-2 { background-image: url("/templates/artnonstop_kinostudiya/images/klipy-parallax-2.jpg") !important; }
.an-klipy-break-bg-3 { background-image: url("/templates/artnonstop_kinostudiya/images/klipy-parallax-3.jpg") !important; }
.an-klipy-break-bg-4 { background-image: url("/templates/artnonstop_kinostudiya/images/klipy-parallax-4.jpg") !important; }

.an-klipy-break-1 .an-break-inner {
  opacity: 0;
  transform: scale(0.92) translateY(30px);
  transition: opacity 1s ease, transform 1s ease;
}
.an-klipy-break-1.is-visible .an-break-inner { opacity: 1; transform: scale(1) translateY(0); }

.an-klipy-break-2 .an-break-inner {
  opacity: 0;
  transform: translateX(70px);
  transition: opacity 1.1s ease, transform 1.1s cubic-bezier(0.2, 0.9, 0.3, 1.2);
}
.an-klipy-break-2.is-visible .an-break-inner { opacity: 1; transform: translateX(0); }

.an-klipy-break-3 .an-break-inner {
  opacity: 0;
  transform: translateY(60px) rotate(1deg);
  transition: opacity 1s ease, transform 1s cubic-bezier(0.2, 0.9, 0.3, 1);
}
.an-klipy-break-3.is-visible .an-break-inner { opacity: 1; transform: translateY(0) rotate(0); }

.an-klipy-break-4 .an-break-inner {
  opacity: 0;
  transform: translateX(-50px) scale(1.05);
  transition: opacity 1s ease, transform 1s cubic-bezier(0.2, 0.9, 0.3, 1);
}
.an-klipy-break-4.is-visible .an-break-inner { opacity: 1; transform: translateX(0) scale(1); }

/* ============================================
   КОРПОРАТИВНЫЙ ФИЛЬМ
   ============================================ */
.an-hero-bg.an-korporativ-hero-bg {
  background:
    linear-gradient(180deg, rgba(13,28,48,0.25) 0%, rgba(13,28,48,0.55) 45%, rgba(13,28,48,0.96) 100%),
    url("/templates/artnonstop_kinostudiya/images/korporativ-hero.jpg") center/cover no-repeat !important;
}
.an-korporativ-break-bg-1 { background-image: url("/templates/artnonstop_kinostudiya/images/korporativ-parallax-1.jpg") !important; }
.an-korporativ-break-bg-2 { background-image: url("/templates/artnonstop_kinostudiya/images/korporativ-parallax-2.jpg") !important; }
.an-korporativ-break-bg-3 { background-image: url("/templates/artnonstop_kinostudiya/images/korporativ-parallax-3.jpg") !important; }
.an-korporativ-break-bg-4 { background-image: url("/templates/artnonstop_kinostudiya/images/korporativ-parallax-4.jpg") !important; }

.an-korporativ-break-1 .an-break-inner {
  opacity: 0;
  transform: translateY(-40px);
  transition: opacity 1s ease, transform 1s ease;
}
.an-korporativ-break-1.is-visible .an-break-inner { opacity: 1; transform: translateY(0); }

.an-korporativ-break-2 .an-break-inner {
  opacity: 0;
  transform: translateX(-60px) rotate(-1deg);
  transition: opacity 1.1s ease, transform 1.1s cubic-bezier(0.2, 0.9, 0.3, 1.2);
}
.an-korporativ-break-2.is-visible .an-break-inner { opacity: 1; transform: translateX(0) rotate(0); }

.an-korporativ-break-3 .an-break-inner {
  opacity: 0;
  transform: scale(1.08);
  transition: opacity 1s ease, transform 1s cubic-bezier(0.2, 0.9, 0.3, 1);
}
.an-korporativ-break-3.is-visible .an-break-inner { opacity: 1; transform: scale(1); }

.an-korporativ-break-4 .an-break-inner {
  opacity: 0;
  transform: translateY(50px) rotate(1deg);
  transition: opacity 1s ease, transform 1s cubic-bezier(0.2, 0.9, 0.3, 1);
}
.an-korporativ-break-4.is-visible .an-break-inner { opacity: 1; transform: translateY(0) rotate(0); }

/* ============================================
   КИНО ПРОИЗВОДСТВО
   ============================================ */
.an-hero-bg.an-movie-hero-bg {
  background:
    linear-gradient(180deg, rgba(13,28,48,0.25) 0%, rgba(13,28,48,0.55) 45%, rgba(13,28,48,0.96) 100%),
    url("/templates/artnonstop_kinostudiya/images/movie-hero.jpg") center/cover no-repeat !important;
}
.an-movie-break-bg-1 { background-image: url("/templates/artnonstop_kinostudiya/images/movie-parallax-1.jpg") !important; }
.an-movie-break-bg-2 { background-image: url("/templates/artnonstop_kinostudiya/images/movie-parallax-2.jpg") !important; }
.an-movie-break-bg-3 { background-image: url("/templates/artnonstop_kinostudiya/images/movie-parallax-3.jpg") !important; }
.an-movie-break-bg-4 { background-image: url("/templates/artnonstop_kinostudiya/images/movie-parallax-4.jpg") !important; }

.an-movie-break-1 .an-break-inner {
  opacity: 0;
  transform: translateX(80px) scale(0.95);
  transition: opacity 1s ease, transform 1s ease;
}
.an-movie-break-1.is-visible .an-break-inner { opacity: 1; transform: translateX(0) scale(1); }

.an-movie-break-2 .an-break-inner {
  opacity: 0;
  transform: translateY(70px);
  transition: opacity 1.1s ease, transform 1.1s cubic-bezier(0.2, 0.9, 0.3, 1.2);
}
.an-movie-break-2.is-visible .an-break-inner { opacity: 1; transform: translateY(0); }

.an-movie-break-3 .an-break-inner {
  opacity: 0;
  transform: scale(1.1) rotate(-1deg);
  transition: opacity 1s ease, transform 1s cubic-bezier(0.2, 0.9, 0.3, 1);
}
.an-movie-break-3.is-visible .an-break-inner { opacity: 1; transform: scale(1) rotate(0); }

.an-movie-break-4 .an-break-inner {
  opacity: 0;
  transform: translateY(-60px);
  transition: opacity 1s ease, transform 1s cubic-bezier(0.2, 0.9, 0.3, 1);
}
.an-movie-break-4.is-visible .an-break-inner { opacity: 1; transform: translateY(0); }

/* ============================================
   CGI-ГРАФИКА
   ============================================ */
.an-hero-bg.an-cgi-hero-bg {
  background:
    linear-gradient(180deg, rgba(13,28,48,0.25) 0%, rgba(13,28,48,0.55) 45%, rgba(13,28,48,0.96) 100%),
    url("/templates/artnonstop_kinostudiya/images/cgi-hero.jpg") center/cover no-repeat !important;
}
.an-cgi-break-bg-1 { background-image: url("/templates/artnonstop_kinostudiya/images/cgi-parallax-1.jpg") !important; }
.an-cgi-break-bg-2 { background-image: url("/templates/artnonstop_kinostudiya/images/cgi-parallax-2.jpg") !important; }
.an-cgi-break-bg-3 { background-image: url("/templates/artnonstop_kinostudiya/images/cgi-parallax-3.jpg") !important; }
.an-cgi-break-bg-4 { background-image: url("/templates/artnonstop_kinostudiya/images/cgi-parallax-4.jpg") !important; }

.an-cgi-break-1 .an-break-inner {
  opacity: 0;
  transform: translateX(-70px);
  transition: opacity 1s ease, transform 1s ease;
}
.an-cgi-break-1.is-visible .an-break-inner { opacity: 1; transform: translateX(0); }

.an-cgi-break-2 .an-break-inner {
  opacity: 0;
  transform: scale(0.9) rotate(-1.5deg);
  transition: opacity 1.1s ease, transform 1.1s cubic-bezier(0.2, 0.9, 0.3, 1.2);
}
.an-cgi-break-2.is-visible .an-break-inner { opacity: 1; transform: scale(1) rotate(0); }

.an-cgi-break-3 .an-break-inner {
  opacity: 0;
  transform: translateY(70px);
  transition: opacity 1s ease, transform 1s cubic-bezier(0.2, 0.9, 0.3, 1);
}
.an-cgi-break-3.is-visible .an-break-inner { opacity: 1; transform: translateY(0); }

.an-cgi-break-4 .an-break-inner {
  opacity: 0;
  transform: translateX(60px) scale(1.04);
  transition: opacity 1s ease, transform 1s cubic-bezier(0.2, 0.9, 0.3, 1);
}
.an-cgi-break-4.is-visible .an-break-inner { opacity: 1; transform: translateX(0) scale(1); }

/* ============================================
   ВИРУСНАЯ РЕКЛАМА
   ============================================ */
.an-hero-bg.an-viral-hero-bg {
  background:
    linear-gradient(180deg, rgba(13,28,48,0.25) 0%, rgba(13,28,48,0.55) 45%, rgba(13,28,48,0.96) 100%),
    url("/templates/artnonstop_kinostudiya/images/viral-hero.jpg") center/cover no-repeat !important;
}
.an-viral-break-bg-1 { background-image: url("/templates/artnonstop_kinostudiya/images/viral-parallax-1.jpg") !important; }
.an-viral-break-bg-2 { background-image: url("/templates/artnonstop_kinostudiya/images/viral-parallax-2.jpg") !important; }
.an-viral-break-bg-3 { background-image: url("/templates/artnonstop_kinostudiya/images/viral-parallax-3.jpg") !important; }
.an-viral-break-bg-4 { background-image: url("/templates/artnonstop_kinostudiya/images/viral-parallax-4.jpg") !important; }

.an-viral-break-1 .an-break-inner {
  opacity: 0;
  transform: translateY(-50px) scale(0.95);
  transition: opacity 1s ease, transform 1s cubic-bezier(0.2, 0.9, 0.3, 1);
}
.an-viral-break-1.is-visible .an-break-inner { opacity: 1; transform: translateY(0) scale(1); }

.an-viral-break-2 .an-break-inner {
  opacity: 0;
  transform: translateX(70px) rotate(1.5deg);
  transition: opacity 1.1s ease, transform 1.1s cubic-bezier(0.2, 0.9, 0.3, 1.2);
}
.an-viral-break-2.is-visible .an-break-inner { opacity: 1; transform: translateX(0) rotate(0); }

.an-viral-break-3 .an-break-inner {
  opacity: 0;
  transform: translateY(60px);
  transition: opacity 1s ease, transform 1s cubic-bezier(0.2, 0.9, 0.3, 1);
}
.an-viral-break-3.is-visible .an-break-inner { opacity: 1; transform: translateY(0); }

.an-viral-break-4 .an-break-inner {
  opacity: 0;
  transform: translateX(-60px) scale(1.04);
  transition: opacity 1s ease, transform 1s cubic-bezier(0.2, 0.9, 0.3, 1);
}
.an-viral-break-4.is-visible .an-break-inner { opacity: 1; transform: translateX(0) scale(1); }
/* ============================================
   СОБЫТИЙНАЯ СЪЁМКА
   ============================================ */
.an-hero-bg.an-event-hero-bg {
  background:
    linear-gradient(180deg, rgba(13,28,48,0.25) 0%, rgba(13,28,48,0.55) 45%, rgba(13,28,48,0.96) 100%),
    url("/templates/artnonstop_kinostudiya/images/event-hero.jpg") center/cover no-repeat !important;
}
.an-event-break-bg-1 { background-image: url("/templates/artnonstop_kinostudiya/images/event-parallax-1.jpg") !important; }
.an-event-break-bg-2 { background-image: url("/templates/artnonstop_kinostudiya/images/event-parallax-2.jpg") !important; }
.an-event-break-bg-3 { background-image: url("/templates/artnonstop_kinostudiya/images/event-parallax-3.jpg") !important; }
.an-event-break-bg-4 { background-image: url("/templates/artnonstop_kinostudiya/images/event-parallax-4.jpg") !important; }

.an-event-break-1 .an-break-inner {
  opacity: 0;
  transform: translateY(-50px) scale(0.95);
  transition: opacity 1s ease, transform 1s cubic-bezier(0.2, 0.9, 0.3, 1);
}
.an-event-break-1.is-visible .an-break-inner { opacity: 1; transform: translateY(0) scale(1); }

.an-event-break-2 .an-break-inner {
  opacity: 0;
  transform: translateX(70px) rotate(1.5deg);
  transition: opacity 1.1s ease, transform 1.1s cubic-bezier(0.2, 0.9, 0.3, 1.2);
}
.an-event-break-2.is-visible .an-break-inner { opacity: 1; transform: translateX(0) rotate(0); }

.an-event-break-3 .an-break-inner {
  opacity: 0;
  transform: translateY(60px);
  transition: opacity 1s ease, transform 1s cubic-bezier(0.2, 0.9, 0.3, 1);
}
.an-event-break-3.is-visible .an-break-inner { opacity: 1; transform: translateY(0); }

.an-event-break-4 .an-break-inner {
  opacity: 0;
  transform: translateX(-60px) scale(1.04);
  transition: opacity 1s ease, transform 1s cubic-bezier(0.2, 0.9, 0.3, 1);
}
.an-event-break-4.is-visible .an-break-inner { opacity: 1; transform: translateX(0) scale(1); }