/* Океаника — слой движения (правка №1338: «максимально добавить анимаций»).
   Правила подключаются поверх макета и ничего не меняют в цвете, сетке и типографике:
   только непрозрачность, сдвиг, масштаб и маски. Палитра — только токены из tokens.css.
   Пользователям с prefers-reduced-motion: reduce движение полностью выключается. */

/* ---------- Базовые длительности ---------- */
:root {
  --mo-fast: 160ms;
  --mo: 280ms;
  --mo-slow: 520ms;
  --mo-ease: cubic-bezier(.22, .61, .36, 1);
  --mo-ease-out: cubic-bezier(.16, 1, .3, 1);
}

html { scroll-behavior: smooth; }

/* ---------- Индикатор прокрутки ---------- */
.oc-progress {
  position: fixed; left: 0; right: 0; top: 0; height: 2px; z-index: 40; pointer-events: none;
  background: var(--grid-line);
}
.oc-progress i {
  display: block; height: 100%; width: 0; background: var(--ink);
  transform-origin: left center;
}

/* ---------- Обёртки под параллакс (раскладка повторяет исходную) ---------- */
.oc-hero-media { position: absolute; right: 0; bottom: 0; width: 1060px; height: 820px; overflow: hidden; }
.oc-hero-media .oc-hero-img { position: absolute; inset: 0; width: 100%; height: 100%; }
.oc-gallery-bg-wrap { position: absolute; inset: 0; overflow: hidden; }
.oc-gallery-bg-wrap .oc-gallery-bg { position: absolute; inset: 0; width: 100%; height: 100%; }
.final-bg-wrap { position: absolute; inset: 0; overflow: hidden; }
.final-bg-wrap .final-bg { position: absolute; inset: 0; width: 100%; height: 100%; }
.oc-footer-links { display: flex; flex-direction: column; gap: 14px; }
.oc-wordmark-link { color: var(--ink); text-decoration: none; }
.oc-menu-contacts a { color: inherit; text-decoration: none; }
.about-media-wrap { overflow: hidden; }

/* Кроссфейд-слои */
.oc-show-media img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; opacity: 0; }
.oc-show-media img.is-on { opacity: 1; }
.oc-show-cta { z-index: 3; }
.oc-gallery-bg { opacity: 0; }
.oc-gallery-bg.is-on { opacity: 1; }

/* ---------- Бургер: две линии, морфинг в крестик ---------- */
.oc-burger-box { position: relative; display: block; width: 24px; height: 16px; }
.oc-burger-box i {
  position: absolute; left: 0; width: 100%; height: 1.5px; background: currentColor;
  transform-origin: center;
}
.oc-burger-box i:first-child { top: 1px; }
.oc-burger-box i:last-child { bottom: 1px; }

/* ---------- Подсказка «прокрутите» ---------- */
.oc-scroll-hint {
  position: absolute; left: 690px; bottom: 92px; z-index: 2;
  display: flex; flex-direction: column; align-items: center; gap: var(--space-2);
  padding: var(--space-3) var(--space-2);
  background: var(--bg-deep); border: var(--hairline) solid var(--grid-line);
  font: 500 12px/16px var(--font-display); letter-spacing: .18em; color: var(--ink-muted);
}
.oc-scroll-hint i { display: block; width: 1px; height: 48px; background: var(--ink-muted); }

/* ===================================================================
   Всё движение — только при prefers-reduced-motion: no-preference
   =================================================================== */
@media (prefers-reduced-motion: no-preference) {

  /* ---------- Кроссфейды и переключатели ---------- */
  .oc-show-media img { transition: opacity var(--mo-slow) var(--mo-ease); }
  .oc-gallery-bg { transition: opacity var(--mo-slow) var(--mo-ease); }

  /* ---------- Появление при прокрутке ---------- */
  html.anim-on [data-anim] { will-change: transform, opacity; }
  html.anim-on [data-anim="rise"] { opacity: 0; transform: translateY(28px); }
  html.anim-on [data-anim="chip"] { opacity: 0; transform: translateY(14px) scale(.94); }
  html.anim-on [data-anim="tile"] { opacity: 0; transform: translateY(16px); }
  html.anim-on [data-anim="line"] { opacity: 0; clip-path: inset(0 100% 0 0); }
  html.anim-on [data-anim="reveal"] { clip-path: inset(0 0 100% 0); }
  html.anim-on [data-anim] {
    transition: opacity var(--mo-slow) var(--mo-ease-out), transform var(--mo-slow) var(--mo-ease-out),
                clip-path 700ms var(--mo-ease-out);
    transition-delay: var(--mo-delay, 0ms);
  }
  html.anim-on [data-anim].is-in {
    opacity: 1; transform: none; clip-path: inset(0 0 0 0);
  }
  /* Внутреннее «отъезжание» фото — только там, где есть обрезающая обёртка:
     у одиночных <img> масштаб давал бы лишнюю ширину документа. */
  html.anim-on [data-anim="reveal"] > img { transform: scale(1.08); transition: transform 1100ms var(--mo-ease-out); }
  html.anim-on [data-anim="reveal"].is-in > img { transform: scale(1); }

  /* ---------- Первый экран: заголовок по словам ---------- */
  .oc-split-word { display: inline-block; overflow: hidden; vertical-align: bottom; }
  .oc-split-word > i {
    display: inline-block; font-style: inherit;
    transform: translateY(105%); opacity: 0;
    transition: transform 760ms var(--mo-ease-out), opacity 500ms linear;
    transition-delay: var(--mo-delay, 0ms);
  }
  html.hero-in .oc-split-word > i { transform: translateY(0); opacity: 1; }

  /* Медленное «дыхание» фото первого экрана */
  .oc-hero-media .oc-hero-img { animation: oc-kenburns 26s ease-in-out infinite alternate; }
  @keyframes oc-kenburns {
    from { transform: scale(1); }
    to { transform: scale(1.07); }
  }

  /* Подсказка прокрутки */
  .oc-scroll-hint i { animation: oc-hint 2.2s ease-in-out infinite; transform-origin: top center; }
  @keyframes oc-hint {
    0%, 100% { transform: scaleY(.25); opacity: .4; }
    50% { transform: scaleY(1); opacity: 1; }
  }
  .oc-scroll-hint.is-gone { opacity: 0; transition: opacity var(--mo) linear; }

  /* ---------- Направляющие сетки: прорисовка при загрузке ---------- */
  .oc-grid-lines i {
    transform: scaleY(0); transform-origin: top center;
    transition: transform 1200ms var(--mo-ease-out);
  }
  html.anim-on.page-in .oc-grid-lines i { transform: scaleY(1); }
  html.anim-on.page-in .oc-grid-lines i:nth-child(2) { transition-delay: 60ms; }
  html.anim-on.page-in .oc-grid-lines i:nth-child(3) { transition-delay: 120ms; }
  html.anim-on.page-in .oc-grid-lines i:nth-child(4) { transition-delay: 180ms; }
  html.anim-on.page-in .oc-grid-lines i:nth-child(5) { transition-delay: 240ms; }
  html.anim-on.page-in .oc-grid-lines i:nth-child(6) { transition-delay: 300ms; }
  html.anim-on.page-in .oc-grid-lines i:nth-child(7) { transition-delay: 360ms; }

  /* ---------- Шапка ---------- */
  .oc-header {
    transition: height var(--mo) var(--mo-ease), transform 380ms var(--mo-ease),
                background-color var(--mo) linear;
  }
  .oc-header.is-compact { height: 72px; }
  .oc-header.is-hidden { transform: translateY(-101%); }
  .oc-progress i { transition: width 90ms linear; }
  .oc-wordmark-link { display: inline-block; transition: transform var(--mo) var(--mo-ease); }
  .oc-wordmark-link:hover { transform: translateY(-2px); }

  /* Меню: подчёркивание растёт от левого края */
  .oc-nav-link { position: relative; transition: color var(--mo-fast) linear; }
  .oc-nav-link::after {
    content: ""; position: absolute; left: 0; right: 0; bottom: -6px; height: 1px;
    background: currentColor; transform: scaleX(0); transform-origin: left center;
    transition: transform var(--mo) var(--mo-ease);
  }
  .oc-nav-link:hover::after, .oc-nav-link.is-active::after { transform: scaleX(1); }

  /* ---------- Кнопки ---------- */
  .oc-btn {
    position: relative; overflow: hidden;
    transition: background-color var(--mo) linear, color var(--mo) linear,
                border-color var(--mo) linear, transform var(--mo-fast) var(--mo-ease);
  }
  .oc-btn > span { position: relative; z-index: 1; }
  .oc-btn::after {
    content: ""; position: absolute; inset: 0; z-index: 0; pointer-events: none;
    background: linear-gradient(90deg, transparent 0%, currentColor 50%, transparent 100%);
    opacity: 0; transform: translateX(-100%);
  }
  .oc-btn:hover::after {
    opacity: .14;
    transform: translateX(100%);
    transition: transform 620ms var(--mo-ease-out), opacity var(--mo-fast) linear;
  }
  .oc-btn:hover { transform: translateY(-2px); }
  .oc-btn:active { transform: translateY(0) scale(.99); }

  .oc-arrow-btn, .oc-rail-btn {
    transition: background-color var(--mo-fast) linear, color var(--mo-fast) linear,
                transform var(--mo-fast) var(--mo-ease);
  }
  .oc-arrow-btn .oc-arrow, .oc-rail-btn .oc-arrow { transition: transform var(--mo) var(--mo-ease); }
  #rev-next:hover .oc-arrow, #gal-next:hover .oc-arrow { transform: translateX(4px); }
  #rev-prev:hover .oc-arrow { transform: translateX(-4px); }
  #gal-prev:hover .oc-arrow { transform: translateY(-4px); }
  #gal-next:hover .oc-arrow { transform: translateY(4px); }
  .oc-arrow-btn:active, .oc-rail-btn:active { transform: scale(.97); }

  /* ---------- Направления работы ---------- */
  .oc-show-band { transition: top 460ms var(--mo-ease-out); }
  .oc-show-cta { transition: top 460ms var(--mo-ease-out); }
  .oc-show-row {
    transition: color var(--mo-fast) linear, background-color var(--mo-fast) linear,
                border-color var(--mo-fast) linear, padding-left var(--mo) var(--mo-ease),
                padding-right var(--mo) var(--mo-ease);
  }
  .oc-show-left .oc-show-row.is-active { padding-left: var(--space-5); }
  .oc-show-right .oc-show-row.is-active { padding-right: var(--space-5); }
  .oc-show-row .oc-arrow { animation: oc-pop var(--mo) var(--mo-ease-out) both; }
  @keyframes oc-pop {
    from { opacity: 0; transform: scale(.6); }
    to { opacity: 1; transform: scale(1); }
  }

  /* ---------- Проекты ---------- */
  .oc-rail-thumb { transition: flex-grow 420ms var(--mo-ease-out), width 420ms var(--mo-ease-out), outline-color var(--mo) linear; }
  .oc-rail-thumb img { transition: transform 620ms var(--mo-ease-out), opacity var(--mo) linear; }
  .oc-rail-thumb:hover img { transform: scale(1.07); }
  .oc-rail-thumb:not(.is-active) img { opacity: .72; }
  .oc-project.is-swap { animation: oc-swap 420ms var(--mo-ease-out) both; }
  @keyframes oc-swap {
    from { opacity: 0; transform: translateY(16px); }
    to { opacity: 1; transform: none; }
  }

  /* ---------- Этапы и сервис ---------- */
  .oc-step {
    transition: border-color var(--mo) linear, transform var(--mo) var(--mo-ease),
                background-color var(--mo) linear;
  }
  .oc-step:hover { transform: translateY(-6px); border-color: var(--ink); background: var(--surface); }
  .oc-step-number { transition: transform var(--mo) var(--mo-ease-out), color var(--mo) linear; }
  .oc-step:hover .oc-step-number { transform: translateX(6px); }
  .oc-service .oc-drop { transition: transform 420ms var(--mo-ease-out); }
  .oc-service:hover .oc-drop { transform: translateY(4px) scale(1.15); }
  .oc-service-title { transition: color var(--mo-fast) linear; }

  /* ---------- Цифры ---------- */
  .oc-stat { transition: transform var(--mo) var(--mo-ease), border-color var(--mo) linear; }
  .oc-stat:hover { transform: translateY(-6px); border-color: var(--ink); }
  .oc-stat-value { font-variant-numeric: tabular-nums; }

  /* ---------- Партнёры ---------- */
  .oc-logotile {
    transition: background-color var(--mo) linear, color var(--mo) linear,
                border-color var(--mo) linear, transform var(--mo) var(--mo-ease);
  }
  .oc-logotile:hover { background: var(--ink); color: var(--on-ink); transform: translateY(-5px); }

  /* ---------- Отзывы ---------- */
  .reviews-viewport { overflow: hidden; }
  .reviews-track.is-next { animation: oc-slide-next 480ms var(--mo-ease-out) both; }
  .reviews-track.is-prev { animation: oc-slide-prev 480ms var(--mo-ease-out) both; }
  @keyframes oc-slide-next {
    from { opacity: .2; transform: translateX(8%); }
    to { opacity: 1; transform: none; }
  }
  @keyframes oc-slide-prev {
    from { opacity: .2; transform: translateX(-8%); }
    to { opacity: 1; transform: none; }
  }
  .oc-testimonial { transition: border-color var(--mo) linear, opacity var(--mo) linear; }
  .oc-testimonial:not(.is-current) { opacity: .55; }
  .oc-testimonial.is-current { border-color: var(--ink); }
  .oc-avatar { transition: transform var(--mo-slow) var(--mo-ease-out); }
  .oc-testimonial:hover .oc-avatar { transform: scale(1.04); }

  /* ---------- Форма ---------- */
  .oc-control {
    transition: background-color var(--mo-fast) linear, outline-color var(--mo-fast) linear,
                transform var(--mo-fast) var(--mo-ease);
  }
  .oc-control:focus { background: var(--surface-active); }
  .oc-label { transition: color var(--mo-fast) linear, transform var(--mo) var(--mo-ease); }
  .oc-field:focus-within .oc-label { color: var(--ink); transform: translateX(4px); }
  .oc-field.is-invalid { animation: oc-shake 420ms var(--mo-ease) both; }
  @keyframes oc-shake {
    0%, 100% { transform: translateX(0); }
    20% { transform: translateX(-7px); }
    40% { transform: translateX(6px); }
    60% { transform: translateX(-4px); }
    80% { transform: translateX(2px); }
  }
  .field-error { animation: oc-fade-in var(--mo) linear both; }
  .form-note:not(:empty) { animation: oc-fade-in var(--mo) linear both; }
  @keyframes oc-fade-in { from { opacity: 0; } to { opacity: 1; } }
  .oc-select svg { transition: transform var(--mo) var(--mo-ease); }
  .oc-select:focus-within svg { transform: rotate(180deg); }

  /* ---------- Подвал и мелочи ---------- */
  .oc-footer-col a, .oc-sub a { transition: color var(--mo-fast) linear, transform var(--mo-fast) var(--mo-ease); }
  .oc-footer-col a:hover { transform: translateX(4px); }

  /* ---------- Плавающая кнопка WhatsApp ---------- */
  .wa-float { transition: transform var(--mo) var(--mo-ease-out), background-color var(--mo) linear, color var(--mo) linear; }
  .wa-float:hover { transform: scale(1.08) rotate(-4deg); }
  .wa-float svg { position: relative; z-index: 1; }
  .wa-pulse {
    position: absolute; inset: -1px; border: var(--hairline) solid var(--ink);
    animation: oc-pulse 2.6s var(--mo-ease-out) infinite;
  }
  @keyframes oc-pulse {
    0% { transform: scale(1); opacity: .7; }
    70% { transform: scale(1.5); opacity: 0; }
    100% { transform: scale(1.5); opacity: 0; }
  }

  /* ---------- Мобильное меню ---------- */
  @media (max-width: 1023px) {
    .oc-menu { transform: translateX(100%); opacity: 0; transition: transform 380ms var(--mo-ease-out), opacity 200ms linear; }
    .oc-menu.is-open { transform: translateX(0); opacity: 1; }
    .oc-menu-link {
      opacity: 0; transform: translateX(26px);
      transition: opacity var(--mo) linear, transform var(--mo) var(--mo-ease-out), color var(--mo-fast) linear;
    }
    .oc-menu.is-open .oc-menu-link { opacity: 1; transform: none; }
    .oc-menu.is-open .oc-menu-link:nth-child(1) { transition-delay: 90ms; }
    .oc-menu.is-open .oc-menu-link:nth-child(2) { transition-delay: 140ms; }
    .oc-menu.is-open .oc-menu-link:nth-child(3) { transition-delay: 190ms; }
    .oc-menu.is-open .oc-menu-link:nth-child(4) { transition-delay: 240ms; }
    .oc-menu.is-open .oc-menu-link:nth-child(5) { transition-delay: 290ms; }
    .oc-menu-foot { opacity: 0; transform: translateY(16px); transition: opacity var(--mo) linear 280ms, transform var(--mo) var(--mo-ease-out) 280ms; }
    .oc-menu.is-open .oc-menu-foot { opacity: 1; transform: none; }
    .oc-menu-link .oc-arrow { transition: transform var(--mo) var(--mo-ease); }
    .oc-menu-link:active .oc-arrow { transform: translateX(6px); }
  }

  .oc-burger-box i { transition: transform var(--mo) var(--mo-ease), opacity var(--mo-fast) linear; }
  .oc-burger.is-open .oc-burger-box i:first-child { transform: translateY(6.5px) rotate(45deg); }
  .oc-burger.is-open .oc-burger-box i:last-child { transform: translateY(-6.5px) rotate(-45deg); }
}

/* ---------- Мобильная раскладка обёрток (повторяет исходные правила) ---------- */
@media (max-width: 1023px) {
  .oc-hero-media {
    position: relative; order: 3; width: calc(100% + 2 * var(--m-margin)); height: 300px;
    margin: var(--space-4) calc(-1 * var(--m-margin)) 0; right: auto; bottom: auto;
  }
  .oc-hero-media .oc-hero-img { position: absolute; inset: 0; width: 100%; height: 100%; margin: 0; }
  .oc-gallery-bg-wrap {
    position: relative; inset: auto; order: 1; height: 360px;
    width: calc(100% + 2 * var(--m-margin)); margin: 0 calc(-1 * var(--m-margin));
  }
  .final-bg-wrap { position: relative; inset: auto; height: 300px; }
  .oc-scroll-hint { display: none; }
  .oc-progress { height: 2px; }
}