/* ==========================================================================
   REDBRICK COFFEE EDITORIAL — MOTION & ANIMATIONS (CSS3)
   Кастомные кривые Безье, шторки Clip-Path, каскадный скролл, параллакс
   ========================================================================== */

:root {
  /* ========================================================================
     MOTION SYSTEM: КАСТОМНЫЕ КРИВЫЕ БЕЗЬЕ ПРЕМИУМ-КЛАССА
     ======================================================================== */
  --ease-out-expo: cubic-bezier(0.16, 1, 0.3, 1);
  --ease-smooth: cubic-bezier(0.25, 1, 0.5, 1);
  --ease-reveal: cubic-bezier(0.77, 0, 0.175, 1);
  --transition-hover: 0.35s var(--ease-smooth);
}

/* Аппаратное ускорение для плавности 60 FPS */
.will-animate {
  will-change: transform, opacity;
  transform: translate3d(0, 0, 0);
}

/* ==========================================================================
   1. БЕГУЩИЕ АЛЫЕ ЛИНИИ (HAIRLINE DRAW)
   ========================================================================== */
.section-running-head::before {
  content: '';
  display: block;
  width: 100%;
  height: 1px;
  background-color: var(--color-brick-red);
  margin-bottom: 8px;
  transform: scaleX(0);
  transform-origin: left;
  transition: transform 1.1s var(--ease-out-expo);
  will-change: transform;
}

.section-running-head.revealed::before {
  transform: scaleX(1);
}

/* ==========================================================================
   2. МАГНИТНЫЕ ЭЛЕМЕНТЫ И ПРУЖИНЯЩИЕ СТРЕЛКИ (MAGNETIC ACTIONS)
   ========================================================================== */
.magnetic-elem {
  transition: transform 0.25s var(--ease-smooth);
  will-change: transform;
}

.arrow-char {
  display: inline-block;
  transition: transform 0.35s var(--ease-out-expo);
  will-change: transform;
}

.btn-outlined:hover .arrow-char,
.arrow-link:hover .arrow-char {
  transform: translate3d(6px, 0, 0);
}

/* ==========================================================================
   3. КАСКАДНЫЙ ТЕКСТ И LINE MASK REVEAL ДЛЯ ЗАГОЛОВКОВ
   ========================================================================== */
.line-mask {
  display: block;
  overflow: hidden;
  padding-bottom: 4px;
}

.line-inner {
  display: block;
  transform: translate3d(0, 105%, 0) rotate(1.5deg);
  transition: transform 1.2s var(--ease-out-expo);
  will-change: transform;
  transform-origin: left top;
}

.line-inner.revealed {
  transform: translate3d(0, 0, 0) rotate(0deg);
}

.hero-lead-paragraph {
  opacity: 0;
  transform: translate3d(0, 20px, 0);
  transition: opacity 0.9s var(--ease-out-expo) 0.3s, transform 0.9s var(--ease-out-expo) 0.3s;
  will-change: opacity, transform;
}

.hero-lead-paragraph.revealed {
  opacity: 1;
  transform: translate3d(0, 0, 0);
}

.hero-actions-row {
  opacity: 0;
  transform: translate3d(0, 20px, 0);
  transition: opacity 0.9s var(--ease-out-expo) 0.5s, transform 0.9s var(--ease-out-expo) 0.5s;
  will-change: opacity, transform;
}

.hero-actions-row.revealed {
  opacity: 1;
  transform: translate3d(0, 0, 0);
}

/* ==========================================================================
   4. РАСКРЫТИЕ КАРТИНОК (CLIP-PATH CURTAIN REVEAL & PARALLAX)
   ========================================================================== */
.reveal-media-wrapper {
  position: relative;
  clip-path: inset(100% 0 0 0);
  transition: clip-path 1.1s var(--ease-out-expo);
  will-change: clip-path;
}

.reveal-media-wrapper.revealed {
  clip-path: inset(0 0 0 0);
}

.parallax-media-target {
  width: 100%;
  height: 100%;
  object-fit: cover;
  transform: scale(1.18) translate3d(0, 0, 0);
  transition: transform 1.4s var(--ease-out-expo);
  will-change: transform;
}

.reveal-media-wrapper.revealed .parallax-media-target {
  transform: scale(1) translate3d(0, var(--parallax-y, 0px), 0);
}

.parallax-box {
  will-change: transform;
}

/* Синемаграфичный пар чашки кофе */
.steam-track {
  animation: steamAscent 4s infinite ease-out;
}

@keyframes steamAscent {
  0% { transform: translateY(0) scaleX(0.8); opacity: 0; }
  25% { opacity: 0.35; }
  70% { transform: translateY(-70px) scaleX(1.3); opacity: 0.15; }
  100% { transform: translateY(-110px) scaleX(1.8); opacity: 0; }
}

/* ==========================================================================
   5. КАСКАД КАРТОЧЕК В СЕТКЕ (STAGGERED GRID REVEAL & CARD HOVER)
   ========================================================================== */
.product-brick-card {
  opacity: 0;
  transform: translate3d(0, 35px, 0) scale(0.98);
  filter: blur(6px);
  transition: opacity 0.85s var(--ease-out-expo),
              transform 0.85s var(--ease-out-expo),
              filter 0.85s var(--ease-out-expo);
  transition-delay: calc(var(--index, 0) * 110ms);
  will-change: opacity, transform, filter;
}

.product-brick-card.revealed {
  opacity: 1;
  transform: translate3d(0, 0, 0) scale(1);
  filter: blur(0);
}

.product-photo-holder img {
  transition: transform 0.8s var(--ease-out-expo);
  will-change: transform;
}

.product-brick-card:hover .product-photo-holder img {
  transform: scale(1.05);
}

.product-brick-card.fade-out {
  opacity: 0 !important;
  transform: translate3d(0, 20px, 0) scale(0.97) !important;
  filter: blur(8px) !important;
  transition: opacity 0.25s ease, transform 0.25s ease, filter 0.25s ease !important;
  transition-delay: 0s !important;
}

/* ==========================================================================
   6. КОНСТРУКТОР ЧАШКИ: ПАНЕЛИ И ПЕРЕСЧЕТ
   ========================================================================== */
/* Builder options visible by default */
.builder-options-pane,
.builder-result-pane {
  opacity: 1 !important;
  transform: none !important;
}

.builder-summary-card {
  transition-delay: 0.15s;
}

.price-bump {
  transform: scale(1.08);
  color: var(--color-brick-red) !important;
  transition: transform 0.2s var(--ease-smooth), color 0.2s ease;
}

/* ==========================================================================
   7. ВСПЛЫВАЮЩИЕ ПАНЕЛИ И УВЕДОМЛЕНИЯ
   ========================================================================== */
.cart-drawer-overlay {
  transition: opacity 0.4s var(--ease-smooth), visibility 0.4s;
}

.cart-panel-sheet {
  transition: transform 0.45s var(--ease-out-expo);
  will-change: transform;
}

.cart-drawer-overlay.open .cart-panel-sheet {
  transform: translate3d(0, 0, 0);
}

.modal-doc-overlay {
  transition: opacity 0.35s var(--ease-smooth), visibility 0.35s;
}

.modal-doc-sheet {
  transition: transform 0.45s var(--ease-out-expo);
  will-change: transform;
}

.modal-doc-overlay.open .modal-doc-sheet {
  transform: translate3d(0, 0, 0);
}

.mobile-nav-drawer {
  transition: opacity 0.3s ease, visibility 0.3s;
}

.mobile-nav-sheet {
  transition: transform 0.35s ease;
}

.mobile-nav-drawer.open .mobile-nav-sheet {
  transform: translate3d(0, 0, 0);
}


/* ==========================================================================
   HERO ENTRANCE ANIMATIONS (МГНОВЕННЫЙ ЗАПУСК 0.8s)
   Каскадный старт без задержек и морганий
   ========================================================================== */

/* Начальное состояние элементов Hero: opacity: 0; animation-fill-mode: forwards */
.hero-enter-title,
.hero-enter-desc,
.hero-enter-actions,
.hero-enter-media {
  opacity: 0;
  animation-fill-mode: forwards;
  will-change: transform, opacity;
}

/* 1. Хедер опускается сверху (0.6s) */
@keyframes headerEntrance {
  from {
    opacity: 0;
    transform: translate3d(0, -15px, 0);
  }
  to {
    opacity: 1;
    transform: translate3d(0, 0, 0);
  }
}

.header-entrance {
  animation: headerEntrance 0.6s cubic-bezier(0.16, 1, 0.3, 1) 0s forwards;
  will-change: transform, opacity;
}

/* 2. Заголовок H1: animation: heroFadeInUp 0.8s cubic-bezier(0.16, 1, 0.3, 1) forwards */
@keyframes heroFadeInUp {
  from {
    opacity: 0;
    transform: translateY(30px);
  }
  to {
    opacity: 1;
    transform: translateY(0);
  }
}

.hero-enter-title {
  display: block;
  animation: heroFadeInUp 0.8s cubic-bezier(0.16, 1, 0.3, 1) 0s forwards;
}

.hero-enter-title .line-inner {
  transform: translate3d(0, 0, 0) rotate(0deg) !important;
}

/* 3. Текст описания: delay 0.15s */
.hero-enter-desc {
  animation: heroFadeInUp 0.8s cubic-bezier(0.16, 1, 0.3, 1) 0.15s forwards;
}

/* 4. Кнопка «Выбрать зерно →»: delay 0.3s */
.hero-enter-actions {
  animation: heroFadeInUp 0.7s cubic-bezier(0.16, 1, 0.3, 1) 0.3s forwards;
}

/* 5. Фотография с френч-прессом:
   animation: heroPhotoReveal 1s cubic-bezier(0.16, 1, 0.3, 1) 0.2s forwards; */
@keyframes heroPhotoReveal {
  from {
    opacity: 0;
    transform: scale(0.96);
  }
  to {
    opacity: 1;
    transform: scale(1);
  }
}

.hero-enter-media {
  clip-path: inset(0 0 0 0) !important;
  animation: heroPhotoReveal 1s cubic-bezier(0.16, 1, 0.3, 1) 0.2s forwards;
}

.hero-enter-media .parallax-media-target {
  transform: scale(1) translate3d(0, 0, 0) !important;
}

/* Гарантия видимости секции конструктора */
.builder-section,
.builder-split-grid,
.builder-options-pane,
.builder-result-pane {
  opacity: 1 !important;
  visibility: visible !important;
}

/* При режиме prefers-reduced-motion отключаем анимацию для ГОСТ Р 52872-2019 */
@media (prefers-reduced-motion: reduce) {
  .header-entrance,
  .hero-enter-title,
  .hero-enter-desc,
  .hero-enter-actions,
  .hero-enter-media {
    animation: none !important;
    opacity: 1 !important;
    transform: none !important;
  }
}

/* ==========================================================================
   8. АДАПТИВНОСТЬ И ДОСТУПНОСТЬ (PREFERS-REDUCED-MOTION)
   ГОСТ Р 52872-2019 / WCAG 2.1 AA
   ========================================================================== */
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after {
    animation-duration: 0.01ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.01ms !important;
    scroll-behavior: auto !important;
  }

  .reveal-media-wrapper,
  .reveal-media-wrapper.revealed {
    clip-path: none !important;
  }

  .line-inner,
  .line-inner.revealed {
    transform: none !important;
  }

  .stagger-item,
  .stagger-item.revealed,
  .product-brick-card,
  .product-brick-card.revealed,
  .builder-options-pane,
  .builder-options-pane.revealed,
  .builder-summary-card,
  .builder-summary-card.revealed,
  .hero-lead-paragraph,
  .hero-actions-row {
    opacity: 1 !important;
    transform: none !important;
    filter: none !important;
  }

  .section-running-head::before {
    transform: scaleX(1) !important;
  }
}