/* =====================================================
   ОСНОВА ДЕЛА — animations.css
   Все анимации обёрнуты в prefers-reduced-motion:
   при reduce-motion сайт остаётся полностью статичным.
   2026-05-30
   ===================================================== */

@media (prefers-reduced-motion: no-preference) {

  /* ─────────────────────────────────────────────────────
     1. GRAIN-ТЕКСТУРА
     Использование: добавить <div class="grain-overlay" aria-hidden="true"></div>
     внутрь любого .section-dark / .section-soft
  ───────────────────────────────────────────────────── */

  @keyframes grain {
    0%,  100% { transform: translate(0,    0);    }
    10%        { transform: translate(-2%,  -2%);  }
    20%        { transform: translate( 2%,   1%);  }
    30%        { transform: translate(-1%,   3%);  }
    40%        { transform: translate( 3%,  -1%);  }
    50%        { transform: translate(-2%,   2%);  }
    60%        { transform: translate( 1%,  -3%);  }
    70%        { transform: translate(-3%,   1%);  }
    80%        { transform: translate( 2%,   2%);  }
    90%        { transform: translate(-1%,  -1%);  }
  }

  .grain-overlay {
    position:        absolute;
    inset:           -50%;
    width:           200%;
    height:          200%;
    background-image: url("data:image/svg+xml,%3Csvg viewBox='0 0 256 256' xmlns='http://www.w3.org/2000/svg'%3E%3Cfilter id='noise'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.9' numOctaves='4' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23noise)' opacity='1'/%3E%3C/svg%3E");
    background-repeat: repeat;
    background-size: 200px 200px;
    opacity:         .025;
    pointer-events:  none;
    mix-blend-mode:  overlay;
    animation:       grain 8s steps(10) infinite;
    /* z-index ниже содержимого секции */
    z-index:         0;
  }

  /* Контент внутри секций с grain должен лежать выше */
  .section-dark  > .container,
  .section-soft  > .container { position: relative; z-index: 1; }


  /* ─────────────────────────────────────────────────────
     2. MARQUEE — бесшовная горизонтальная лента ниш
     HTML-контракт:
       <div class="marquee" aria-hidden="true">
         <div class="marquee__track">
           <span class="marquee__item">Строительство</span>
           <span class="marquee__sep" aria-hidden="true">·</span>
           … (JS продублирует innerHTML для петли)
         </div>
       </div>
  ───────────────────────────────────────────────────── */

  @keyframes marquee {
    to { transform: translateX(-50%); }
  }

  .marquee {
    overflow:    hidden;
    width:       100%;
    white-space: nowrap;
    -webkit-mask-image: linear-gradient(
      to right,
      transparent 0%,
      black 8%,
      black 92%,
      transparent 100%
    );
    mask-image: linear-gradient(
      to right,
      transparent 0%,
      black 8%,
      black 92%,
      transparent 100%
    );
  }

  .marquee__track {
    display:         inline-flex;
    align-items:     center;
    gap:             0;
    animation:       marquee 30s linear infinite;
    will-change:     transform;
  }

  /* Пауза при наведении */
  .marquee:hover .marquee__track {
    animation-play-state: paused;
  }

  .marquee__item {
    padding:     0 28px;
    font-family: var(--ff-head);
    font-size:   clamp(1rem, 1.4vw, 1.25rem);
    color:       var(--muted-on-dark, #B0ABA4);
    letter-spacing: .02em;
    white-space: nowrap;
  }

  /* Золотой разделитель · между элементами */
  .marquee__sep {
    color:       var(--accent, #C5A059);
    font-size:   1.1em;
    flex-shrink: 0;
    user-select: none;
  }


  /* ─────────────────────────────────────────────────────
     3. CLIP-REVEAL заголовков
     HTML-контракт: добавить класс .reveal-clip к h1/h2/h3.
     JS-observer (тот же что для .reveal) добавляет .visible.
     Работает вместе с обёрткой .reveal-clip-wrap (overflow:hidden),
     которую JS создаёт автоматически.
  ───────────────────────────────────────────────────── */

  .reveal-clip {
    clip-path:  inset(0 0 100% 0);
    transform:  translateY(18px);
    opacity:    0;
    transition:
      clip-path  .65s cubic-bezier(.16,1,.3,1),
      transform  .65s cubic-bezier(.16,1,.3,1),
      opacity    .45s ease;
  }

  .reveal-clip.visible {
    clip-path:  inset(0 0 0% 0);
    transform:  translateY(0);
    opacity:    1;
  }


  /* ─────────────────────────────────────────────────────
     4. MAGNETIC / TILT — только устройства с точным курсором
     CSS отвечает только за плавность перехода.
     Саму трансформацию делает main.js.
     HTML-контракт:
       data-magnetic — кнопки, иконки (смещение translate)
       data-tilt     — карточки (наклон rotateX/Y)
  ───────────────────────────────────────────────────── */

  @media (hover: hover) and (pointer: fine) {
    [data-magnetic],
    [data-tilt] {
      transition: transform .2s cubic-bezier(.16,1,.3,1);
    }
  }


  /* ─────────────────────────────────────────────────────
     5. HOVER-ZOOM обложек кейсов
     HTML-контракт:
       <div class="case-tile">
         <img src="..." alt="…">
       </div>
     Родитель .case-tile должен иметь overflow:hidden.
  ───────────────────────────────────────────────────── */

  .case-tile {
    overflow: hidden;
  }

  .case-tile img {
    transition: transform .5s cubic-bezier(.16,1,.3,1);
    display:    block;
    width:      100%;
  }

  .case-tile:hover img {
    transform: scale(1.05);
  }

} /* конец @media (prefers-reduced-motion: no-preference) */