/* ==========================================================================
   II CERAMICS · MOTION LAYER
   Тихий люкс. Нативный CSS: view-transitions + scroll-driven animations.
   Ноль внешних библиотек. Подключается после static.css на всех страницах.
   ========================================================================== */

:root{
  /* Кривые. exp — «дорогое» замедление, как у Salvatori/Antolini */
  --ease-exp:cubic-bezier(.16,1,.3,1);
  --ease-soft:cubic-bezier(.22,.61,.36,1);
  --ease-inout:cubic-bezier(.65,0,.35,1);
  /* Темп. Премиум = медленно, но не вязко */
  --dur-xs:.28s; --dur-s:.45s; --dur-m:.7s; --dur-l:1.1s; --dur-xl:1.6s;
}

/* ==========================================================================
   1. ПЕРЕХОДЫ МЕЖДУ СТРАНИЦАМИ
   То, за что Mutina платит подключением Barba.js. Здесь — нативно, 0 КБ.
   ========================================================================== */
@view-transition{ navigation:auto; }

::view-transition-group(root){ animation-duration:.5s; }
::view-transition-old(root){
  animation:vt-out .34s var(--ease-inout) both;
}
::view-transition-new(root){
  animation:vt-in .52s var(--ease-exp) both;
}
@keyframes vt-out{ to{ opacity:0; transform:translateY(-10px) } }
@keyframes vt-in{ from{ opacity:0; transform:translateY(14px) } }

/* Шапка и плавающие элементы не участвуют в переходе — иначе моргают */
.st-header{ view-transition-name:st-header; }
.st-float-wa{ view-transition-name:st-wa; }
::view-transition-group(st-header),
::view-transition-group(st-wa){ animation:none; }

/* ==========================================================================
   2. ПОЯВЛЕНИЕ ПРИ СКРОЛЛЕ
   Базовый слой — старый JS с .in (работает везде).
   Поверх — нативный scroll-driven: точнее привязан к скроллу, не «прыгает»
   при быстрой прокрутке и не требует JS вообще.
   ========================================================================== */
@keyframes rv-rise{
  from{ opacity:0; transform:translateY(30px) }
  to  { opacity:1; transform:none }
}
@keyframes rv-fade{
  from{ opacity:0 }
  to  { opacity:1 }
}

/* Смягчаем базовый переход, чтобы даже fallback ощущался дорого */
.rv{
  transition:opacity var(--dur-l) var(--ease-exp),
             transform var(--dur-l) var(--ease-exp);
}


/* ==========================================================================
   3. ШАПКА
   Прижимается и уплотняется после старта скролла. Чистый CSS.
   ========================================================================== */
@keyframes hdr-condense{
  from{ height:72px; background:rgba(251,249,245,.94) }
  to  { height:60px; background:rgba(252,250,246,.98) }
}
@supports (animation-timeline:scroll()){
  body:not(.st-heropage) .st-header{
    animation:hdr-condense linear both;
    animation-timeline:scroll(root);
    animation-range:0 180px;
    will-change:height,background;
  }
}

.st-nav a{
  position:relative;
  transition:color var(--dur-s) var(--ease-exp);
}
/* Подчёркивание растёт от левого края */
.st-nav a::after{
  content:''; position:absolute; left:0; right:0; bottom:0; height:1px;
  background:var(--brass-500,#C9A227);
  transform:scaleX(0); transform-origin:left;
  transition:transform var(--dur-m) var(--ease-exp);
}
.st-nav a:hover::after{ transform:scaleX(1); }

/* Тонкая полоса прогресса чтения. Только CSS, без единой строчки JS */
@supports (animation-timeline:scroll()){
  body::before{
    content:''; position:fixed; left:0; top:0; height:2px; z-index:100;
    width:100%; transform-origin:left; transform:scaleX(0);
    background:linear-gradient(90deg,var(--taupe-500,#8D8271),var(--brass-500,#C9A227));
    animation:progress linear both;
    animation-timeline:scroll(root);
  }
  @keyframes progress{ to{ transform:scaleX(1) } }
}

/* ==========================================================================
   4. HERO
   Было: 100vh, тёмный текст на светлом мраморе под белой плашкой.
   Стало: кинематографичная вуаль, светлый текст, параллакс, приглашение скроллить.
   Ровно так это решают Laminam, Antolini и Salvatori.
   ========================================================================== */
/* высота hero живёт в static-v3.css */

/* Вуаль: сверху под шапку, снизу под текст. Камень остаётся виден */
.st-hero2::after{
  content:''; position:absolute; inset:0; z-index:1; pointer-events:none;
  background:
    linear-gradient(180deg,rgba(12,10,9,.58) 0%,rgba(12,10,9,.10) 22%,rgba(12,10,9,0) 38%),
    linear-gradient(0deg,rgba(10,9,8,.88) 0%,rgba(10,9,8,.66) 22%,rgba(10,9,8,.30) 44%,rgba(10,9,8,0) 68%);
}

/* Текст живёт в нижней трети — там, где вуаль плотная и читаемость гарантирована.
   Верхние две трети остаются чистым камнем. Так делают Salvatori и Laminam. */
.st-hero2-inner{
  z-index:2;
  justify-content:flex-end;
  padding-bottom:clamp(72px,9vh,116px);
}

/* Параллакс вместо ken burns: камень уезжает медленнее страницы */
.st-hero2 img{ animation:none; transform:scale(1.06); will-change:transform; }
@supports (animation-timeline:view()){
  .st-hero2 img{
    animation:hero-parallax linear both;
    animation-timeline:view();
    animation-range:cover 0% cover 100%;
  }
  @keyframes hero-parallax{
    from{ transform:scale(1.08) translateY(0) }
    to  { transform:scale(1.08) translateY(9%) }
  }
}

/* Типографика hero. Светлое по тёмному — читается всегда */
.st-hero2-title{
  color:#F6F1E8 !important;
  text-shadow:0 2px 40px rgba(0,0,0,.45);
  letter-spacing:.2em;
}
.st-main p.st-hero2-sub,
.st-hero2-sub{
  color:#EDE6DA !important;
  background:none !important;
  backdrop-filter:none !important;
  -webkit-backdrop-filter:none !important;
  font-weight:400;
  letter-spacing:.26em;
  text-shadow:0 1px 24px rgba(0,0,0,.6);
  padding:0;
  margin-top:20px;
}

/* Появление заголовка по словам. Разбивку делает motion.js */
.mo-word{ display:inline-block; overflow:hidden; vertical-align:bottom; }
.mo-word > i{
  display:inline-block; font-style:inherit;
  transform:translateY(105%);
  animation:word-up var(--dur-xl) var(--ease-exp) forwards;
  animation-delay:calc(var(--i,0) * 90ms + 150ms);
}
@keyframes word-up{ to{ transform:none } }

/* Подзаголовок и кнопки приходят следом */
.st-hero2 .st-hero2-sub,
.st-hero2 .st-hero2-cta{
  opacity:0;
  animation:rv-fade var(--dur-l) var(--ease-exp) forwards;
}
.st-hero2 .st-hero2-sub{ animation-delay:.65s; }
.st-hero2 .st-hero2-cta{ animation-delay:.85s; }

/* Кнопки на hero перекрашиваем под тёмную вуаль */
.st-hero2 .st-btn-dark{ background:var(--accent,#C9A227); color:var(--on-accent,#191717) !important; }
.st-hero2 .st-btn-dark:hover{ background:var(--accent-hover,#D4B04A); }
.st-hero2 .st-btn-line{
  background:rgba(255,255,255,.06);
  box-shadow:inset 0 0 0 1px rgba(246,241,232,.55);
  color:#F6F1E8 !important;
  backdrop-filter:blur(3px); -webkit-backdrop-filter:blur(3px);
}
.st-hero2 .st-btn-line:hover{
  background:rgba(255,255,255,.14);
  box-shadow:inset 0 0 0 1px rgba(246,241,232,.9);
}

/* Приглашение скроллить: линия, которая живёт. Справа, чтобы не спорить с текстом */
.st-hero2-scroll{
  position:absolute; right:34px; bottom:26px; z-index:3;
  display:flex; flex-direction:column; align-items:center; gap:10px;
  font-size:10px; letter-spacing:.3em; text-transform:uppercase;
  color:rgba(246,241,232,.62);
  opacity:0; animation:rv-fade var(--dur-l) var(--ease-exp) 1.2s forwards;
}
.st-hero2-scroll::after{
  content:''; width:1px; height:46px;
  background:linear-gradient(180deg,rgba(246,241,232,.75),rgba(246,241,232,0));
  animation:scroll-hint 2.6s var(--ease-inout) infinite;
  transform-origin:top;
}
@keyframes scroll-hint{
  0%  { transform:scaleY(0); opacity:0 }
  35% { transform:scaleY(1); opacity:1 }
  75% { transform:scaleY(1); opacity:1 }
  100%{ transform:scaleY(1) translateY(46px); opacity:0 }
}

/* ==========================================================================
   5. БЕГУЩАЯ ЛЕНТА
   Мотив из макета Interior Design: LUXURY · CRAFTSMANSHIP · ELEGANCE.
   Здесь несёт смысл, а не просто красоту: факты о товаре.
   ========================================================================== */
.mo-marquee{
  position:relative; overflow:hidden;
  margin:0 -20px; padding:18px 0;
  background:var(--ink-950,#0D0D0D);
  border-top:1px solid rgba(201,162,39,.28);
  border-bottom:1px solid rgba(201,162,39,.28);
  -webkit-mask-image:linear-gradient(90deg,transparent,#000 9%,#000 91%,transparent);
  mask-image:linear-gradient(90deg,transparent,#000 9%,#000 91%,transparent);
}
.mo-marquee-track{
  display:flex; width:max-content;
  animation:marquee 46s linear infinite;
}
.mo-marquee:hover .mo-marquee-track{ animation-play-state:paused; }
.mo-marquee span{
  display:inline-flex; align-items:center;
  padding:0 30px;
  font-family:var(--font-display,Georgia,serif);
  font-size:15px; letter-spacing:.26em; text-transform:uppercase;
  color:var(--taupe-300,#A59E8F); white-space:nowrap;
}
.mo-marquee span::after{
  content:'·'; margin-left:30px; color:var(--brass-500,#C9A227);
}
@keyframes marquee{ to{ transform:translateX(-50%) } }

/* На главной main без внутренних отступов — лента должна идти во всю ширину */
.st-heropage .st-main > .mo-marquee{
  max-width:none; margin:0; padding:18px 0;
}

/* На светлых секциях лента инвертируется */
.band-light .mo-marquee{ background:#EDE7DE; }
.band-light .mo-marquee span{ color:#6E6355; }

/* ==========================================================================
   6. КАРТОЧКИ И СЕТКИ
   ========================================================================== */
.st-card{
  position:relative;
  transition:box-shadow var(--dur-m) var(--ease-exp),
             transform var(--dur-m) var(--ease-exp);
}
.st-card img,.st-car-item img{
  transition:transform var(--dur-xl) var(--ease-exp),
             filter var(--dur-l) var(--ease-exp);
}
.st-card:hover img{ transform:scale(1.05); }

/* Блик, проходящий по камню при наведении. Очень слабый — это плитка, не витрина */
.st-card::before{
  content:''; position:absolute; inset:0; z-index:2; pointer-events:none;
  background:linear-gradient(105deg,transparent 38%,rgba(255,255,255,.16) 50%,transparent 62%);
  transform:translateX(-120%);
  transition:transform 1.1s var(--ease-exp);
}
.st-card:hover::before{ transform:translateX(120%); }

/* Название карточки чуть подаётся вперёд */
.st-card-name{ transition:color var(--dur-s) var(--ease-exp); }
.st-card:hover .st-card-name{ color:var(--gold-700,#8F7318); }
.band-light .st-card:hover .st-card-name{ color:#8a6d1f; }

.st-features a{
  transition:box-shadow var(--dur-m) var(--ease-exp),
             transform var(--dur-m) var(--ease-exp);
}

/* ==========================================================================
   7. КАРУСЕЛЬ АССОРТИМЕНТА
   77 моделей. Края растворяются — видно, что список продолжается.
   ========================================================================== */
.st-car{
  -webkit-mask-image:linear-gradient(90deg,transparent,#000 3%,#000 97%,transparent);
  mask-image:linear-gradient(90deg,transparent,#000 3%,#000 97%,transparent);
  scroll-behavior:smooth;
}
.st-car-item{
  transition:transform var(--dur-m) var(--ease-exp),
             box-shadow var(--dur-m) var(--ease-exp);
}
.st-car-item:hover{ transform:translateY(-5px); }
.st-car-btn{ transition:all var(--dur-s) var(--ease-exp); }
.st-car-btn:hover{ border-color:var(--brass-500,#C9A227); }

/* ==========================================================================
   8. КНОПКИ И ССЫЛКИ
   ========================================================================== */
.st-btn{
  position:relative; overflow:hidden;
  transition:background var(--dur-s) var(--ease-exp),
             box-shadow var(--dur-s) var(--ease-exp),
             transform var(--dur-s) var(--ease-exp);
}
.st-btn:hover{ transform:translateY(-2px); }
.st-btn:active{ transform:translateY(0); }

/* Список статей: маркер уезжает вправо */
.st-reads a{ position:relative; transition:color var(--dur-s) var(--ease-exp); }
.st-reads li{ transition:padding-left var(--dur-m) var(--ease-exp); }
.st-reads li:hover{ padding-left:12px; }

/* Разделитель между секциями наливается при подходе */
@supports (animation-timeline:view()){
  .band-sep{
    transform:scaleX(0); transform-origin:center;
    animation:sep-grow linear both;
    animation-timeline:view();
    animation-range:entry 0% entry 90%;
  }
  @keyframes sep-grow{ to{ transform:scaleX(1) } }
}

/* Фото в блоке «О компании» слегка расходятся при скролле */
@supports (animation-timeline:view()){
  .st-aboutmain-photos img:first-child{
    animation:drift-up linear both;
    animation-timeline:view(); animation-range:cover 0% cover 100%;
  }
  .st-aboutmain-photos img:last-child{
    animation:drift-down linear both;
    animation-timeline:view(); animation-range:cover 0% cover 100%;
  }
  @keyframes drift-up  { from{ transform:translateY(18px) } to{ transform:translateY(-18px) } }
  @keyframes drift-down{ from{ transform:translateY(-14px) } to{ transform:translateY(22px) } }
}

/* Плавающий WhatsApp: мягче, без резкого скачка */
.st-float-wa{ transition:transform var(--dur-m) var(--ease-exp),box-shadow var(--dur-m) var(--ease-exp); }
.st-float-wa:hover{ transform:scale(1.06); box-shadow:0 10px 30px rgba(0,0,0,.45); }

/* ==========================================================================
   9. ЦИФРЫ
   ========================================================================== */
.st-stats b{ font-variant-numeric:tabular-nums; }

/* ==========================================================================
   10. МОБИЛЬНЫЕ И ДОСТУПНОСТЬ
   ========================================================================== */
@media (max-width:860px){
  .st-hero2-title{ letter-spacing:.12em; }
  .mo-marquee span{ font-size:13px; padding:0 20px; }
  .st-card:hover{ transform:none; }
  .st-hero2-scroll{ display:none; }
}

/* Полное уважение к системной настройке. Всё движение выключается.
   Важно: animation-duration не действует на scroll-driven анимации —
   они управляются прогрессом скролла, а не временем. Поэтому такие
   элементы гасим отдельно, иначе они навсегда застынут на кадре opacity:0. */
@media (prefers-reduced-motion:reduce){
  *,*::before,*::after{
    animation-duration:.001ms !important;
    animation-iteration-count:1 !important;
    transition-duration:.001ms !important;
  }

  /* Снимаем привязку к скроллу и возвращаем конечное состояние */
  html.js .rv,
  html.js .st-grid > .st-card,
  html.js .st-features > a,
  .band-sep,
  .st-aboutmain-photos img,
  .st-aboutmain-photos img:first-child,
  .st-aboutmain-photos img:last-child,
  .st-hero2 .st-hero2-sub,
  .st-hero2 .st-hero2-cta,
  .st-hero2-scroll,
  .mo-word > i{
    animation:none !important;
    animation-timeline:auto !important;
    opacity:1 !important;
    transform:none !important;
  }
  .st-aboutmain-photos img:last-child{ margin-top:36px; }

  /* Камень стоит неподвижно, без параллакса и ken burns */
  .st-hero2 img{
    animation:none !important;
    animation-timeline:auto !important;
    transform:scale(1.02) !important;
  }

  body:not(.st-heropage) .st-header{
    animation:none !important;
    animation-timeline:auto !important;
    height:72px !important;
    background:rgba(251,249,245,.96) !important;
  }

  /* Бегущая лента останавливается: движение по кругу — худший случай для вестибулярных нарушений */
  .mo-marquee-track{ animation:none !important; transform:none !important; }

  /* Полоса прогресса просто убирается, чтобы не висеть пустой */
  body::before{ display:none !important; }

  @view-transition{ navigation:none; }
}