/* Движение и мелкие улучшения вида (26.10.2026).
   Палитра и шрифты прежние. Всё, что прячет элементы до появления,
   работает только при prefers-reduced-motion: no-preference и только
   после того, как motion.js поставил на <html> класс motion-ready.
   Без JS и при «уменьшить движение» сайт выглядит как раньше, просто статично. */
:root{--ease:cubic-bezier(.22,.8,.24,1);--ease-soft:cubic-bezier(.4,0,.2,1)}

/* ───────── Статические улучшения (работают всегда) ───────── */

/* План из четырёх шагов: верхняя линия каждого шага — отрезок шкалы прогресса */
.steps li::before{width:100%;transform-origin:0 50%}

/* Блог на главной: превью крупнее, у коротких карточек тоже есть описание — без пустых провалов */
.journal-item:not(.journal-featured){grid-template-columns:184px 1fr;align-items:center}
.journal-item:not(.journal-featured) .journal-image{aspect-ratio:4/3}
.journal-item:not(.journal-featured) .journal-body p{display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;overflow:hidden;margin-top:8px;font-size:13px}
.journal-item h3{transition:color .2s}
.journal-item:hover h3{color:#a74520}

/* Ссылки и кнопки: стрелка подаётся вперёд, подчёркивание окрашивается */
.button .icon,.text-link .icon,.journal-read .icon,.hero-bottom a .icon,.blog-read .icon{transition:transform .3s var(--ease)}
.button:hover .icon,.text-link:hover .icon,.journal-item:hover .journal-read .icon,.hero-bottom a:hover .icon,.blog-read:hover .icon{transform:translateX(4px)}
.text-link{transition:color .2s,text-decoration-color .2s}
.text-link:hover{text-decoration-color:currentColor}
.button{transition:background-color .2s,border-color .2s,color .2s,transform .2s var(--ease)}
.button:active{transform:scale(.98)}

/* Шапка: короткая оранжевая черта под названием тянется при наведении, при прокрутке появляется тень */
.brand::after{transform-origin:0 50%;transition:transform .4s var(--ease)}
.brand:hover::after{transform:scaleX(2.2)}
.site-header{transition:box-shadow .3s}
.site-header.is-scrolled{box-shadow:0 10px 30px #0b10123d}
@media(min-width:961px){
  .site-nav>a:not(.button){position:relative}
  .site-nav>a:not(.button)::after{content:'';position:absolute;left:0;right:0;bottom:-7px;height:2px;background:var(--accent);transform:scaleX(0);transform-origin:0 50%;transition:transform .35s var(--ease)}
  .site-nav>a:not(.button):hover::after,.site-nav>a[aria-current=page]::after{transform:scaleX(1)}
}
.nav-useful summary span{display:inline-block;transition:transform .3s var(--ease)}
.nav-useful[open] summary span{transform:rotate(180deg)}

/* Вкладки историй: оранжевая полоска переезжает к выбранному имени */
.case-tabs{position:relative}
.case-tabs-indicator{position:absolute;left:0;bottom:-1px;height:2px;width:var(--w,0);background:var(--accent);transform:translateX(var(--x,0));transition:transform .45s var(--ease),width .45s var(--ease);pointer-events:none}
.case-tabs.has-indicator button[aria-selected=true]{border-bottom-color:transparent}

/* Фото: мягкое увеличение при наведении */
.gallery-item img,.case-photo img,.journal-image img,.blog-card-image img,.blog-featured-image img{transition:transform .8s var(--ease)}
.gallery-item:hover img,.journal-item:hover .journal-image img,.blog-card:hover .blog-card-image img,.blog-featured:hover .blog-featured-image img{transform:scale(1.045)}
.case-photo:hover img{transform:scale(1.03)}
.gallery-item-3:hover img{transform:scale(1.045)}
.gallery-expand{transition:transform .35s var(--ease),background-color .2s}
.gallery-item:hover .gallery-expand{transform:rotate(90deg);background:var(--accent)}
.blog-card-image,.blog-featured-image{overflow:hidden}

/* Вопросы: плюс превращается в крестик, ответ раскрывается плавно (где браузер умеет) */
.faq-list summary{transition:color .2s}
.faq-list summary:hover{color:#a74520}
.faq-list summary .icon{transition:transform .35s var(--ease)}
@supports (interpolate-size:allow-keywords){
  .faq-list{interpolate-size:allow-keywords}
  .faq-list details::details-content{block-size:0;overflow:clip;transition:block-size .45s var(--ease),content-visibility .45s allow-discrete}
  .faq-list details[open]::details-content{block-size:auto}
}

/* Поля формы */
.form-field input{transition:border-color .2s,box-shadow .2s}
.form-field input:focus{border-color:#ad491f;box-shadow:0 0 0 3px #ed753b2e}

/* Кофе в блоке записи: пар отдельной линией, чтобы он мог подниматься */
.coffee-drawing .coffee-steam{transform-box:fill-box;transform-origin:50% 100%}

/* Полоса прогресса чтения в статье */
@supports (animation-timeline:scroll()){
  .blog-article-page::before{content:'';position:fixed;left:0;right:0;top:var(--header);height:3px;z-index:11;background:var(--accent);transform-origin:0 50%;transform:scaleX(0);pointer-events:none;animation:tt-progress linear both;animation-timeline:scroll(root)}
  @keyframes tt-progress{to{transform:scaleX(1)}}
}

/* ───────── Анимации ───────── */
@media (prefers-reduced-motion:no-preference){
  /* Переходы между страницами: шапка стоит на месте, содержимое мягко сменяется */
  @view-transition{navigation:auto}
  .site-header{view-transition-name:tt-header}
  ::view-transition-old(root){animation:.18s ease-out both tt-fade-out}
  ::view-transition-new(root){animation:.38s var(--ease) both tt-page-in}
  @keyframes tt-fade-out{to{opacity:0}}
  @keyframes tt-page-in{from{opacity:0;transform:translateY(12px)}}

  /* Главная, первый экран — одна сцена: Женька проявляется в цвете,
     заголовок выходит построчно, оранжевая черта дотягивается до конца */
  .hero-line{display:block;overflow:clip;padding-bottom:.06em;margin-bottom:-.06em}
  .hero-photo{animation:tt-photo-in 2.4s var(--ease) both}
  @keyframes tt-photo-in{0%{transform:scale(1.07);filter:grayscale(1) brightness(.78)}35%{filter:grayscale(1) brightness(.85)}100%{transform:none;filter:none}}
  .hero-line>span{animation:tt-line-up 1.05s var(--ease) both}
  .hero-line:nth-child(1)>span{animation-delay:.18s}
  .hero-line:nth-child(2)>span{animation-delay:.32s}
  @keyframes tt-line-up{from{transform:translateY(106%)}}
  .hero h1::after{transform-origin:0 50%;animation:tt-bar .9s var(--ease) .75s both}
  @keyframes tt-bar{from{transform:scaleX(0)}}
  .hero-intro{animation:tt-rise .8s var(--ease) .05s both}
  .hero-description{animation:tt-rise .9s var(--ease) .6s both}
  .hero-actions{animation:tt-rise .9s var(--ease) .74s both}
  .hero-bottom-inner{animation:tt-fade .9s ease-out 1.05s both}
  @keyframes tt-rise{from{opacity:0;transform:translateY(16px)}}
  @keyframes tt-fade{from{opacity:0}}

  /* При прокрутке фото первого экрана уходит медленнее текста */
  @supports (animation-timeline:scroll()){
    @media(min-width:701px){
      .hero-visual{animation:tt-hero-parallax linear both;animation-timeline:scroll(root);animation-range:0 100vh}
      @keyframes tt-hero-parallax{to{transform:translateY(16%)}}
    }
  }

  /* Заголовки других страниц появляются при загрузке */
  .page-heading>*,.blog-intro-inner>*,.article-heading,.article-crumbs{animation:tt-rise .8s var(--ease) both}
  .page-heading>*:nth-child(2),.blog-intro-inner>*:nth-child(2){animation-delay:.1s}
  .page-heading>*:nth-child(3){animation-delay:.18s}
  .article-heading{animation-delay:.06s}
  .article-cover{animation:tt-fade 1s ease-out .2s both}

  /* Появление при прокрутке: только заголовки блоков и несколько «сюжетных» мест */
  .motion-ready [data-reveal]:not(.is-in){opacity:0;transform:translateY(26px)}
  .motion-ready [data-reveal].is-in{transition:opacity .9s var(--ease),transform .9s var(--ease)}

  /* Шаги: линия проходит слева направо по очереди — план «заполняется» */
  .motion-ready .steps:not(.is-in) li::before{transform:scaleX(0)}
  .motion-ready .steps:not(.is-in) li>*{opacity:0;transform:translateY(14px)}
  .motion-ready .steps.is-in li::before{transition:transform .75s var(--ease-soft) calc(var(--i,0) * .32s)}
  .motion-ready .steps.is-in li>*{transition:opacity .7s var(--ease) calc(var(--i,0) * .32s + .12s),transform .7s var(--ease) calc(var(--i,0) * .32s + .12s)}

  /* Истории: при переключении фото «до/после» и текст въезжают по очереди */
  .case-panel:not([hidden]) .case-photo{animation:tt-rise .7s var(--ease) both}
  .case-panel:not([hidden]) .case-photo+.case-photo{animation-delay:.08s}
  .case-panel:not([hidden]) .case-story{animation:tt-story .7s var(--ease) .12s both}
  @keyframes tt-story{from{opacity:0;transform:translateX(18px)}}

  /* Галерея открывается шторкой снизу вверх, снимки чуть «отъезжают» */
  .motion-ready .gallery-grid:not(.is-in) .gallery-item{clip-path:inset(100% 0 0 0)}
  .motion-ready .gallery-grid:not(.is-in) .gallery-item picture{transform:scale(1.12)}
  .motion-ready .gallery-grid.is-in .gallery-item{clip-path:inset(0);transition:clip-path 1.1s var(--ease) calc(var(--i,0) * .09s)}
  .motion-ready .gallery-grid.is-in .gallery-item picture{transition:transform 1.4s var(--ease) calc(var(--i,0) * .09s)}
  .gallery-item-3 picture{transition:none!important}
  .motion-ready .gallery-grid:not(.is-in) .gallery-item-3 picture{transform:translate(-50%,-50%) rotate(90deg)}

  /* Ленивые картинки проявляются, а не «выскакивают» */
  .motion-ready img.img-pending{opacity:0}
  .motion-ready img.img-shown{transition:opacity .6s ease-out,transform .8s var(--ease)}

  /* Пар над кофе поднимается, пока блок на экране */
  .coffee-steam{animation:tt-steam 2.8s ease-in-out infinite;animation-play-state:paused}
  .offer-section.is-in .coffee-steam{animation-play-state:running}
  @keyframes tt-steam{0%{opacity:0;transform:translateY(4px) scaleY(.85)}35%{opacity:1}75%{opacity:.6}100%{opacity:0;transform:translateY(-5px) scaleY(1.05)}}

  /* Диалоги (фото, калькулятор), выпадающее меню, мобильное меню */
  dialog[open]{animation:tt-dialog-in .38s var(--ease)}
  dialog[open]::backdrop{animation:tt-fade .3s ease-out}
  @keyframes tt-dialog-in{from{opacity:0;transform:translateY(14px) scale(.98)}}
  .nav-useful[open] .nav-dropdown{animation:tt-drop .28s var(--ease)}
  @keyframes tt-drop{from{opacity:0;transform:translateY(-6px)}}
  @media(max-width:960px){.site-nav.is-open{animation:tt-drop .3s var(--ease)}}

  /* Сообщение формы и подсказки появляются мягко */
  .form-message[data-state]{animation:tt-rise .5s var(--ease)}
  .selection-note:not([hidden]){animation:tt-fade .4s ease-out}

  /* Вопросы без поддержки плавной высоты: ответ хотя бы проявляется */
  .faq-list details[open] p{animation:tt-rise .45s var(--ease)}
}

/* Адаптив для статических правок */
@media(max-width:1100px){.journal-item:not(.journal-featured){grid-template-columns:150px 1fr}}
@media(max-width:960px){.journal-item:not(.journal-featured) .journal-body p{display:none}}
@media(max-width:700px){.journal-item:not(.journal-featured){grid-template-columns:96px 1fr;align-items:start}.journal-item:not(.journal-featured) .journal-image{aspect-ratio:auto}}