/* Vidlen — раскатка языка движения на весь сайт (награда-уровень, accessibility-first).
   Всё внутри @media (prefers-reduced-motion: reduce) глушится в конце файла. */

/* ── 2. Split-text заголовков (обобщено из героя; слова «всплывают») ───────── */
.js [data-split] .word{display:inline-block;overflow:hidden;vertical-align:top}
.js [data-split] .word > span{display:inline-block;transform:translateY(112%);transition:transform .8s var(--ease)}
.js [data-split].in .word > span{transform:none}

/* ── 3. Magnetic-кнопки + единый micro-hover ──────────────────────────────── */
.magnetic{transition:transform .28s cubic-bezier(.2,.9,.25,1)}
.btn-gold,.btn-ghost,.pbtn,.navbtn,.cta{transition:color .2s,border-color .2s,background .2s,box-shadow .2s,transform .2s var(--ease)}
.btn-gold:active,.btn-ghost:active,.navbtn:active,.pbtn:active{transform:translateY(1px) scale(.985)}

/* ── 8. Параллакс (мягкий, на композиторе) ────────────────────────────────── */
[data-parallax]{will-change:transform}

/* ── 6. Живые мини-превью в карточках bento ───────────────────────────────── */
.cell .ic{transition:transform .45s var(--ease),box-shadow .45s var(--ease)}
.cell:hover .ic{transform:translateY(-2px) scale(1.06)}
/* нижняя «наполняющаяся» бирюзовая черта — общий признак «оживания» */
.cell .fxbar{position:absolute;left:0;bottom:0;height:2px;width:100%;transform:scaleX(0);transform-origin:left;
  background:linear-gradient(90deg,var(--teal-bright),var(--gold-1));transition:transform .5s var(--ease);opacity:.0}
.cell:hover .fxbar{transform:scaleX(1);opacity:.9}

/* лупа/поиск — иконка увеличивается сильнее */
.cell.fx-mag:hover .ic{transform:scale(1.26)}
/* перевод — иконка мягко переворачивается, показывая «языковую» подмену */
.cell.fx-tr:hover .ic{animation:fxFlip 1.1s var(--ease) infinite}
@keyframes fxFlip{0%,100%{transform:rotateY(0)}50%{transform:rotateY(180deg)}}
/* озвучка — звуковые столбики */
.cell .fxbars{position:absolute;right:16px;bottom:16px;display:flex;gap:3px;align-items:flex-end;height:18px;opacity:0;transition:opacity .3s}
.cell.fx-speak:hover .fxbars{opacity:.9}
.cell .fxbars i{width:3px;height:30%;border-radius:2px;background:var(--teal-bright)}
.cell.fx-speak:hover .fxbars i{animation:fxWave .9s ease-in-out infinite}
.cell .fxbars i:nth-child(2){animation-delay:.12s}.cell .fxbars i:nth-child(3){animation-delay:.24s}.cell .fxbars i:nth-child(4){animation-delay:.36s}
@keyframes fxWave{0%,100%{height:25%}50%{height:95%}}
/* линейка чтения — горизонтальная линия проходит по карточке */
.cell .fxruler{position:absolute;left:8%;right:8%;height:10px;border-radius:6px;top:0;opacity:0;
  background:linear-gradient(180deg,rgba(127,214,221,.0),rgba(127,214,221,.28),rgba(127,214,221,.0))}
.cell.fx-ruler:hover .fxruler{animation:fxRuler 1.8s var(--ease) infinite;opacity:1}
@keyframes fxRuler{0%{top:14%}100%{top:88%}}
/* цветной фильтр — карточка мягко перекрашивается */
.cell.fx-color:hover{filter:hue-rotate(28deg) saturate(1.15)}
/* затемнение — карточка слегка темнеет с виньеткой */
.cell.fx-dim:hover{filter:brightness(.82)}
/* приватность — лёгкий блюр-свайп по карточке */
.cell .fxblur{position:absolute;inset:0;border-radius:inherit;pointer-events:none;opacity:0;
  backdrop-filter:blur(4px);-webkit-backdrop-filter:blur(4px);
  -webkit-mask:linear-gradient(120deg,transparent 40%,#000 50%,transparent 60%);
  mask:linear-gradient(120deg,transparent 40%,#000 50%,transparent 60%);-webkit-mask-size:260% 100%;mask-size:260% 100%}
.cell.fx-privacy:hover .fxblur{opacity:1;animation:fxSwipe 1.4s var(--ease) infinite}
@keyframes fxSwipe{0%{-webkit-mask-position:140% 0;mask-position:140% 0}100%{-webkit-mask-position:-40% 0;mask-position:-40% 0}}
/* маркер — подсветка «прокрашивает» заголовок */
.cell.fx-marker h4{background-image:linear-gradient(120deg,rgba(243,217,138,.0),rgba(243,217,138,.45));
  background-repeat:no-repeat;background-size:0% 64%;background-position:0 60%;transition:background-size .5s var(--ease);
  border-radius:3px;padding:0 2px;margin-left:-2px}
.cell.fx-marker:hover h4{background-size:100% 64%}
/* калька/обводка — иконка «обводится» лёгким поворотом */
.cell.fx-trace:hover .ic{animation:fxTrace 1.4s var(--ease) infinite}
@keyframes fxTrace{0%,100%{transform:rotate(-6deg)}50%{transform:rotate(6deg)}}

/* ── 7. Демо «Шторка» прямо на экране макбука (.scr) + чипы под ним ───────── */
/* уровень воды теперь ведёт пружинный драйвер (site.js, --wl) — transition не нужен */
.shmodes{margin-top:16px;text-align:center}
.shmodes-h{font-size:clamp(1.1rem,2.2vw,1.5rem);font-weight:680;letter-spacing:-.01em;margin:0 0 14px}
.shchips{display:flex;flex-wrap:wrap;gap:10px;justify-content:center}
.shchip{position:relative;overflow:hidden;cursor:pointer;font:inherit;font-size:14px;font-weight:700;padding:10px 16px;border-radius:12px;
  color:var(--text);background:var(--glass);border:1px solid var(--edge);
  transition:color .2s,border-color .2s,background .2s,box-shadow .2s,transform .2s var(--ease)}
/* полоска-прогресс на активном чипе: показывает такт авто-карусели (2.8s) */
.shchip.on::after{content:"";position:absolute;left:0;right:0;bottom:0;height:2px;
  background:linear-gradient(90deg,rgba(127,214,221,.9),rgba(243,217,138,.85));
  transform:scaleX(0);transform-origin:0 50%;animation:vlChipFill 2.8s linear forwards}
@keyframes vlChipFill{to{transform:scaleX(1)}}
.shchips.paused .shchip.on::after{display:none}   /* пауза (выбор пользователя) — без полоски */
@media (prefers-reduced-motion:reduce){.shchip.on::after{display:none}}
.shchip:hover{color:var(--teal-bright);border-color:rgba(127,214,221,.5);background:rgba(127,214,221,.07)}
.shchip.on{color:var(--teal-bright);background:rgba(127,214,221,.12);border-color:rgba(127,214,221,.55);box-shadow:0 0 18px rgba(127,214,221,.28)}
/* оверлеи режимов поверх экрана; внутри .scr → проявляются вместе с открытием Mac */
.scr .shfx{position:absolute;inset:0;z-index:4;pointer-events:none}
.scr .shfx > span{position:absolute;opacity:0;transition:opacity .35s ease}
.shfx-ruler{left:6%;right:6%;height:15%;border-radius:8px;top:40%;
  background:linear-gradient(180deg,rgba(127,214,221,0),rgba(127,214,221,.24),rgba(127,214,221,0))}
.scr.sh-ruler .shfx-ruler{opacity:1;animation:shRule 3.4s var(--ease) infinite alternate}
@keyframes shRule{0%{top:12%}100%{top:64%}}
.shfx-tint{inset:0;background:linear-gradient(180deg,rgba(243,217,138,.18),rgba(243,177,98,.20));mix-blend-mode:multiply}
.scr.sh-color .shfx-tint{opacity:1}
.shfx-dim{inset:0;background:radial-gradient(62% 52% at 50% 44%,rgba(0,0,0,0),rgba(0,0,0,.66))}
.scr.sh-dim .shfx-dim{opacity:1}
.shfx-privacy{inset:0;backdrop-filter:blur(5px) saturate(1.05);-webkit-backdrop-filter:blur(5px) saturate(1.05);
  -webkit-mask:linear-gradient(180deg,#000 0,#000 38%,transparent 38%,transparent 58%,#000 58%);
  mask:linear-gradient(180deg,#000 0,#000 38%,transparent 38%,transparent 58%,#000 58%)}
.scr.sh-privacy .shfx-privacy{opacity:1}
.shfx-marker{left:8%;right:34%;height:8%;top:30%;border-radius:4px;background:rgba(243,217,138,.42)}
.scr.sh-marker .shfx-marker{opacity:1}
.shfx-trace{inset:0;background-image:repeating-linear-gradient(180deg,transparent 0,transparent 21px,rgba(127,214,221,.18) 21px,rgba(127,214,221,.18) 22px)}
.scr.sh-trace .shfx-trace{opacity:1}

/* ── Полный fallback для prefers-reduced-motion ───────────────────────────── */
@media (prefers-reduced-motion: reduce){
  [data-split] .word > span{transform:none !important;transition:none !important}
  .magnetic{transition:none !important;transform:none !important}
  [data-parallax]{transform:none !important}
  .cell .ic,.cell:hover .ic,.cell .fxbar,.cell:hover .fxbar{transition:none !important;transform:none !important;animation:none !important;opacity:1}
  .cell.fx-color:hover,.cell.fx-dim:hover{filter:none !important}
  .cell .fxbars,.cell .fxruler,.cell .fxblur{display:none !important}
  .cell.fx-tr:hover .ic,.cell.fx-trace:hover .ic,.cell.fx-speak:hover .fxbars i{animation:none !important}
  .scr.sh-ruler .shfx-ruler{animation:none !important}
  .macstage .mbar{transition:none !important}
}