/* ============================================================
   Переходы между секциями при прокрутке
   ============================================================ */

/* секция: тонкая акцентная линия прочерчивается сверху при въезде */
.section[data-sec]::before {
  content: "";
  position: absolute; top: 0; left: 0; right: 0;
  height: 1px;
  background: linear-gradient(90deg, transparent, var(--accent), transparent);
  transform: scaleX(0);
  transform-origin: left center;
  opacity: 0;
  transition: transform 1s var(--ease), opacity .6s var(--ease);
}
.section[data-sec].sec-in::before { transform: scaleX(1); opacity: .65; }

/* направленные reveal-варианты */
.reveal[data-dir="left"]  { transform: translateX(-42px); }
.reveal[data-dir="right"] { transform: translateX(42px); }
.reveal[data-dir="scale"] { transform: scale(.94); }
.reveal[data-dir="up"]    { transform: translateY(36px); }
.reveal.in { transform: none; }

/* стаггер для детей контейнера: задаётся через --i */
.stagger-child { opacity: 0; transform: translateY(30px); transition: opacity .7s var(--ease), transform .7s var(--ease); transition-delay: calc(var(--i, 0) * 90ms); }
.stagger-child.in { opacity: 1; transform: none; }

/* заголовок секции: eyebrow-линия растёт, текст поднимается с маской */
.section-head .eyebrow { transition: opacity .6s var(--ease); }
.section-head.reveal h2 { transition: transform .8s var(--ease), opacity .8s var(--ease); }

/* sticky-фон: лёгкий параллакс свечения за секцией */
.section[data-sec] { position: relative; }

/* плавный «фокус» активной секции: соседние чуть тусклее на больших экранах */
@media (min-width: 981px) and (prefers-reduced-motion: no-preference) {
  .sec-dim { transition: opacity .5s var(--ease), filter .5s var(--ease); }
}

@media (prefers-reduced-motion: reduce) {
  .reveal, .stagger-child, .section[data-sec]::before { transition: none !important; transform: none !important; opacity: 1 !important; }
}

/* ---------- появляющиеся украшения ---------- */
.decor {
  position: absolute; z-index: 0; pointer-events: none;
  opacity: 0; transform: translateY(14px) scale(.6);
  transition: opacity .8s var(--ease), transform .8s var(--ease);
  transition-delay: calc(var(--di, 0) * 140ms + 200ms);
  color: var(--accent);
  font-family: var(--font-mono); font-weight: 700;
}
.section.sec-in .decor { opacity: 1; transform: none; }

.decor-dot { width: 9px; height: 9px; border-radius: 50%; background: var(--accent); box-shadow: 0 0 12px var(--accent); animation: floaty 6s ease-in-out infinite; }
.decor-ring { width: 34px; height: 34px; border: 2px solid var(--accent-line); border-radius: 50%; animation: floaty 7.5s ease-in-out infinite; }
.decor-ring::after { content: ""; position: absolute; inset: 8px; border-radius: 50%; border: 1.5px solid var(--accent); opacity: .55; }
.decor-plus { font-size: 26px; line-height: 1; opacity: 0; animation: floaty 6.8s ease-in-out infinite; }
.section.sec-in .decor-plus { opacity: .7; }
.decor-bracket-l, .decor-bracket-r { font-size: 64px; line-height: .8; font-weight: 300; opacity: 0; color: var(--accent-line); }
.section.sec-in .decor-bracket-l, .section.sec-in .decor-bracket-r { opacity: .5; }

@keyframes floaty { 0%, 100% { translate: 0 0; } 50% { translate: 0 -12px; } }

/* украшения прячем на узких экранах, чтобы не мешали */
@media (max-width: 760px) { .decor { display: none; } }