/* движение: одна кривая и три длительности — одинаково в index.html, case.css, blog.css, 404.html, motion.css */
:root { --ease:cubic-bezier(.2,.7,.2,1); --t-fast:.25s; --t-base:.45s; --t-slow:.9s; }
/* Слой движения для главной и кейсов.
   Всё здесь — украшение поверх обычной страницы: без JS и при «уменьшить движение»
   контент виден сразу и полностью. */

/* Переход между страницами: обложка карточки «перетекает» в шапку кейса */
@media (prefers-reduced-motion: no-preference) {
  @view-transition { navigation: auto; }
  ::view-transition-old(root), ::view-transition-new(root) { animation-duration: var(--t-base); }
  ::view-transition-group(*) { animation-duration: var(--t-base); animation-timing-function: var(--ease); }
}

/* Лёгкое зерно плёнки поверх всего — убирает «пластиковость» градиентов */
body::before {
  content: ""; position: fixed; inset: 0; z-index: 90; pointer-events: none; opacity: .07; mix-blend-mode: multiply;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='160' height='160'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.9' numOctaves='2' stitchTiles='stitch'/%3E%3CfeColorMatrix values='0 0 0 0 .15 0 0 0 0 .15 0 0 0 0 .16 0 0 0 .55 0'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E");
}

/* Полоска прогресса чтения — тонкая «линия воды» под шапкой */
.progress { position: absolute; left: 0; right: 0; bottom: -1px; height: 2px; transform-origin: 0 50%; transform: scaleX(0);
  background: linear-gradient(90deg, #A9C0D1, #642B39); opacity: 0; }
@supports (animation-timeline: scroll()) {
  @media (prefers-reduced-motion: no-preference) {
    .progress { opacity: 1; animation: grow linear both; animation-timeline: scroll(root); }
    @keyframes grow { to { transform: scaleX(1); } }
  }
}

/* Появление блоков при прокрутке. Класс .js ставит скрипт — без него всё видно сразу */
@media (prefers-reduced-motion: no-preference) {
  .js .reveal { opacity: 0; transform: translateY(28px); transition: opacity var(--t-slow) var(--ease), transform var(--t-slow) var(--ease); transition-delay: var(--d, 0s); }
  .js .reveal.in { opacity: 1; transform: none; }
  /* заголовки поднимаются «из-под воды»: проявляются снизу вверх из-за маски */
  .js .rise { clip-path: inset(0 0 100% 0); transform: translateY(.25em); transition: clip-path var(--t-slow) var(--ease), transform var(--t-slow) var(--ease); }
  .js .rise.in { clip-path: inset(-0.2em -0.2em -0.3em -0.2em); transform: none; }
  .js .rise em { display: block; opacity: 0; transform: translateY(.4em); transition: opacity var(--t-slow) var(--ease) .45s, transform var(--t-slow) .45s var(--ease); }
  .js .rise.in em { opacity: 1; transform: none; }

  /* имя собирается по буквам, всплывая из воды */
  .split .ln { display: inline-block; overflow: hidden; vertical-align: top; padding-bottom: .06em; }
  .split .ch { display: inline-block; transform: translateY(105%); animation: chup var(--t-slow) var(--ease) forwards; animation-delay: calc(var(--i) * 45ms + .15s); }
  @keyframes chup { to { transform: none; } }

  /* плавное открытие меню и окон встроенными средствами браузера */
  .menu-panel { transition: opacity var(--t-base) var(--ease), transform var(--t-base) var(--ease), display var(--t-base) var(--ease) allow-discrete; }
  @starting-style { .menu-panel.open { opacity: 0; transform: translateY(-8px); } }

  /* раскрытие строк прайса с анимацией высоты (новые браузеры) */
  :root { interpolate-size: allow-keywords; }
  details.svc::details-content { height: 0; overflow: clip; transition: height var(--t-base) var(--ease), content-visibility var(--t-base) var(--ease) allow-discrete; }
  details.svc[open]::details-content { height: auto; }
}

/* Жемчужина в «Подходе»: сфера-луна получает перламутр — перелив розового, голубого,
   золотистого и мятного (без фиолетового), сильнее к краю, как у настоящего жемчуга. */
@property --nacre { syntax: "<angle>"; inherits: false; initial-value: 0deg; }
.moon { background: radial-gradient(circle at 36% 30%, #fffaf7 0%, #f4e9e6 24%, #e6d6d6 55%, #c7b2b9 100%);
  box-shadow: 0 0 110px 26px rgba(245,224,226,.55), inset -16px -20px 44px rgba(110,90,100,.22); isolation: isolate; overflow: hidden; }
.moon::before, .moon::after { content: ""; position: absolute; inset: 0; border-radius: 50%; pointer-events: none; }
.moon::before {
  background: conic-gradient(from var(--nacre) at 44% 42%, #f39aae, #7fc4dc, #f0c97c, #8fd6b8, #f5a3b4, #86b9e0, #f39aae);
  opacity: .62; filter: blur(4px);
  -webkit-mask: radial-gradient(circle at 38% 32%, transparent 8%, rgba(0,0,0,.6) 40%, #000 74%); mask: radial-gradient(circle at 38% 32%, transparent 8%, rgba(0,0,0,.6) 40%, #000 74%);
}
.moon::after {
  background: radial-gradient(circle at 34% 27%, rgba(255,255,255,.95) 0 4%, rgba(255,255,255,0) 14%),
              radial-gradient(circle at 70% 78%, rgba(255,244,240,.6) 0 4%, rgba(255,244,240,0) 22%);
  box-shadow: inset 0 0 0 1.5px rgba(255,255,255,.55);
}
.moon::before { animation: nacre 14s linear infinite; }
@keyframes nacre { to { --nacre: 360deg; } }
@supports not (background: conic-gradient(from var(--nacre), red, blue)) { .moon::before { animation: nacrespin 14s linear infinite; } }
@keyframes nacrespin { to { transform: rotate(360deg); } }
@media (prefers-reduced-motion: reduce) { .moon::before { animation: none; } }

/* Лёгкий туман у нижнего края экрана: блоки выплывают из дымки при прокрутке.
   Включает скрипт (класс .on): на первом экране (море) и в самом конце страницы тумана нет. */
.fog { position: fixed; left: 0; right: 0; bottom: 0; height: 26vh; z-index: 35; pointer-events: none; opacity: 0; transition: opacity .8s ease;
  background:
    radial-gradient(55% 85% at 15% 100%, rgba(247,245,242,.95), rgba(247,245,242,0) 72%),
    radial-gradient(50% 80% at 60% 100%, rgba(238,242,246,.9), rgba(238,242,246,0) 72%),
    radial-gradient(45% 75% at 95% 100%, rgba(246,240,240,.9), rgba(246,240,240,0) 72%),
    linear-gradient(to top, rgba(243,241,238,.85), rgba(243,241,238,0));
  background-size: 170% 100%, 160% 100%, 150% 100%, 100% 100%;
  -webkit-mask: linear-gradient(to top, #000 25%, transparent); mask: linear-gradient(to top, #000 25%, transparent); }
.fog.on { opacity: 1; }
@media (prefers-reduced-motion: no-preference) {
  .fog { animation: fogdrift 30s ease-in-out infinite alternate; }
  @keyframes fogdrift { to { background-position: 70% 0, 0% 0, 40% 0, 0 0; } }
}