/* =========================================================================
   ШКОЛА СОВ — «фишки»: спокойные анимации и детали
   • появление блоков при прокрутке (.reveal + IntersectionObserver)
   • подчёркивание «маркером» (.hl) — дорисовывается при появлении
   • плавная смена страниц при htmx-переходе + полоска загрузки сверху
   • фоновые рисунки-«дудлы», которые медленно плывут за карточками
   • блик на главной кнопке, подсветка карточек за курсором
   • бегущая лента отзывов, счётчики-цифры, кнопка «наверх»
   Всё отключается при «уменьшить движение» (prefers-reduced-motion).
   ========================================================================= */

@layer motion {
  html { scroll-behavior: smooth; }

  /* ── Появление при прокрутке ──
     Класс js-reveal ставит main.js: без JS блоки просто видны сразу. */
  .js-reveal .reveal,
  .js-reveal .reveal[data-stagger] > * {
    animation: none;
    opacity: 0;
    transform: translateY(1.125rem);
    transition: opacity .7s var(--ease-clay), transform .7s var(--ease-clay);
    transition-delay: var(--d, 0ms);
  }
  .js-reveal .reveal[data-stagger] { opacity: 1; transform: none; }
  .js-reveal .reveal.is-in,
  .js-reveal .reveal[data-stagger].is-in > * { opacity: 1; transform: none; }

  /* ── Маркер-подчёркивание под словом ── */
  .hl { position: relative; z-index: 0; white-space: nowrap; }
  .hl::after {
    content: '';
    position: absolute; z-index: -1;
    left: -0.08em; right: -0.08em; bottom: 0.02em; height: 0.48em;
    background: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 200 24' preserveAspectRatio='none'><path d='M3 15 C 40 7, 80 19, 120 11 S 180 9, 197 14' fill='none' stroke='%23E0A458' stroke-width='9' stroke-linecap='round' opacity='.55'/></svg>") no-repeat center / 100% 100%;
    clip-path: inset(0 100% 0 0);
    transition: clip-path 1.1s var(--ease-clay) .35s;
  }
  .hl--clay::after { filter: hue-rotate(-25deg) saturate(1.2); }
  .hl--teal::after { filter: hue-rotate(120deg) saturate(.8); }
  :root:not(.js-reveal) .hl::after,
  .is-in .hl::after,
  .hl.is-in::after { clip-path: inset(0 0 0 0); }

  /* ── Смена страниц (htmx): контент мягко уходит и приходит ── */
  #page-content { transition: opacity .16s var(--ease-soft), transform .16s var(--ease-soft); }
  #page-content.htmx-swapping { opacity: 0; transform: translateY(6px); }

  /* Полоска загрузки над всем сайтом */
  .page-progress {
    position: fixed; top: 0; left: 0; z-index: calc(var(--z-toast) + 1);
    height: 3px; width: 0;
    background: linear-gradient(90deg, var(--ochre), var(--terracotta));
    box-shadow: 0 0 10px rgba(200, 107, 74, 0.5);
    opacity: 0;
    transition: width .4s var(--ease-soft), opacity .3s var(--ease-soft);
    pointer-events: none;
  }
  .page-progress.is-loading { opacity: 1; width: 70%; transition: width 6s cubic-bezier(.1, .7, .2, 1), opacity .2s; }
  .page-progress.is-done { opacity: 0; width: 100%; transition: width .25s var(--ease-soft), opacity .4s .2s; }

  /* ── Фоновые рисунки-дудлы ── */
  .bg-doodles { position: fixed; inset: 0; z-index: 0; pointer-events: none; overflow: hidden; }
  .app-shell { z-index: 1; }
  .bg-doodle { position: absolute; width: var(--s, 4rem); height: auto; opacity: var(--o, .32); animation: drift var(--t, 26s) ease-in-out infinite alternate; }
  .bg-doodle--1 { --s: 5.5rem; --t: 28s; top: 12%; left: 22%; color: var(--ochre); }
  .bg-doodle--3 { --s: 6rem; --t: 34s; top: 30%; right: 3%; color: var(--terracotta-soft); --o: .55; animation-delay: -12s; }
  .bg-doodle--4 { --s: 4rem; --t: 30s; bottom: 6%; right: 18%; color: var(--lavender); animation-delay: -3s; }
  .bg-doodle--5 { --s: 2.5rem; --t: 20s; top: 4%; right: 34%; color: var(--terracotta); --o: .22; animation-delay: -9s; }
  @keyframes drift {
    0%   { transform: translate(0, 0) rotate(0deg); }
    50%  { transform: translate(1.5rem, -1.25rem) rotate(8deg); }
    100% { transform: translate(-1rem, 1rem) rotate(-6deg); }
  }

  /* ── Блик на главной кнопке ── */
  .btn--accent { overflow: hidden; isolation: isolate; }
  .btn--accent::after {
    content: ''; position: absolute; z-index: -1;
    top: 0; bottom: 0; left: -60%; width: 40%;
    background: linear-gradient(100deg, transparent, rgba(255, 255, 255, 0.35), transparent);
    transform: skewX(-20deg);
    transition: left .7s var(--ease-soft);
  }
  .btn--accent:hover::after { left: 130%; }

  /* ── Подсветка карточки за курсором (--mx/--my ставит main.js) ── */
  [data-glow] { position: relative; }
  [data-glow]::before {
    content: ''; position: absolute; inset: 0; border-radius: inherit; pointer-events: none;
    background: radial-gradient(18rem circle at var(--mx, 50%) var(--my, 50%), rgba(224, 164, 88, 0.14), transparent 60%);
    opacity: 0; transition: opacity .3s var(--ease-soft);
  }
  [data-glow]:hover::before { opacity: 1; }

  /* Иконка «подмигивает» при наведении на карточку */
  @keyframes wiggle {
    0%, 100% { transform: rotate(0); }
    25% { transform: rotate(-9deg) scale(1.06); }
    60% { transform: rotate(6deg) scale(1.06); }
  }

  /* ── Бегущая лента (отзывы на главной; движение — initTicker в main.js) ── */
  .ticker {
    overflow-x: auto; scrollbar-width: none;
    -webkit-mask-image: linear-gradient(90deg, transparent, #000 6%, #000 94%, transparent);
    mask-image: linear-gradient(90deg, transparent, #000 6%, #000 94%, transparent);
  }
  .ticker::-webkit-scrollbar { display: none; }
  .ticker.is-running { overflow: hidden; }
  .ticker__track { display: flex; gap: var(--card-gap); width: max-content; will-change: transform; }

  /* ── Кнопка «наверх» ── */
  .to-top {
    position: fixed; right: 1.25rem; bottom: 1.25rem; z-index: var(--z-sticky);
    width: 2.75rem; height: 2.75rem; border-radius: 50%;
    display: grid; place-items: center;
    background: var(--sheet); color: var(--terracotta-deep);
    border: 1px solid var(--paper-line-soft);
    box-shadow: var(--shadow-clay);
    opacity: 0; transform: translateY(1rem) scale(.9); pointer-events: none;
    transition: opacity .3s var(--ease-soft), transform .3s var(--ease-clay), background .2s;
  }
  .to-top.is-visible { opacity: 1; transform: none; pointer-events: auto; }
  .to-top:hover { background: var(--terracotta); color: #fff; }

  /* ── Мерцающие звёздочки (баннер, шапки) ── */
  .sparkle { position: absolute; width: var(--s, 1rem); height: var(--s, 1rem); color: var(--ochre-soft); pointer-events: none; animation: twinkle var(--t, 3.2s) ease-in-out infinite; animation-delay: var(--dl, 0s); }
  @keyframes twinkle {
    0%, 100% { opacity: .15; transform: scale(.6) rotate(0deg); }
    50% { opacity: 1; transform: scale(1) rotate(25deg); }
  }

  @keyframes progressFill { from { transform: scaleX(0); } to { transform: scaleX(1); } }
}

@layer responsive {
  @media (max-width: 1023px) {
    .bg-doodle--1, .bg-doodle--5 { display: none; }
  }
  @media (max-width: 720px) {
    .bg-doodles { display: none; }
    .to-top { right: 1rem; bottom: 1rem; }
  }
}

@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  .js-reveal .reveal, .js-reveal .reveal[data-stagger] > * { opacity: 1 !important; transform: none !important; }
  .hl::after { clip-path: none !important; }
  .bg-doodle, .sparkle { animation: none !important; }
  .ticker { -webkit-mask-image: none; mask-image: none; }
}