/* Йолықтегін — общая тема сайта.
   Палитра, шрифты, шапка, подвал, обрамление инструментов и система движения.
   Чтобы перекрасить сайт, хватит блока :root.

   О движении. Старая главная держалась на GSAP + ScrollTrigger + SplitText +
   Lenis — около 200 КБ скриптов, бесконечные анимации и плавный скролл через
   requestAnimationFrame. Выглядело дорого, но страница из-за этого подвисала
   и на компьютере, и на телефоне. Здесь тот же набор приёмов собран заново
   без единой библиотеки: двигаются только transform и opacity, появления
   включает IntersectionObserver, непрерывных анимаций нет. */

:root {
  /* палитра */
  --y-deep:    #264B66;   /* Глубина — текст и тёмные подложки */
  --y-sky:     #5088AD;   /* Небесный — заливки и иконки */
  --y-apricot-ink: #A85E1E;  /* абрикос для текста: сам #F4A362 даёт 1,9:1 */
  --y-btn-ink: #22425C;   /* текст на абрикосовой заливке: Глубина даёт 4,499:1 */
  --y-link:    #2F6A92;   /* Небесный, затемнённый до 4.5:1 на бумаге:
                             сам #5088AD даёт только 3,7:1 и для текста мал */
  --y-apricot: #F4A362;   /* Абрикос — кнопки и акценты */
  --y-mist:    #A8CCE4;   /* Туман */
  --y-peach:   #FEC494;   /* Персик */
  --y-paper:   #F5F9FC;   /* Бумага — фон страницы */
  --y-white:   #FFFFFF;

  --y-ink:     var(--y-deep);
  --y-muted:   #5A7488;              /* 4.8:1 на Бумаге */
  --y-line:    rgba(38, 75, 102, .14);
  --y-danger:  #A3271F;
  --y-danger-bg: #FBE7E4;

  --y-f-head: "Montserrat", system-ui, -apple-system, "Segoe UI", sans-serif;
  --y-f-body: "Inter", system-ui, -apple-system, "Segoe UI", sans-serif;

  --y-r-sm: 14px;
  --y-r:    22px;
  --y-r-lg: 34px;
  --y-shadow:    0 10px 30px -18px rgba(38, 75, 102, .55);
  --y-shadow-lg: 0 28px 60px -34px rgba(38, 75, 102, .5);
  --y-wrap: 1120px;
  --y-gut: 16px;
  --y-ease: cubic-bezier(.22, 1, .36, 1);   /* мягкое торможение, как в старом макете */
}

*, *::before, *::after { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; scroll-behavior: smooth; }
body {
  margin: 0;
  background: var(--y-paper);
  color: var(--y-ink);
  font: 400 17px/1.6 var(--y-f-body);
  -webkit-font-smoothing: antialiased;
  overflow-x: clip;
}
h1, h2, h3, h4 { font-family: var(--y-f-head); font-weight: 800; line-height: 1.12; letter-spacing: -.025em; margin: 0; }
h1 { font-size: clamp(30px, 7.4vw, 50px); }
h2 { font-size: clamp(24px, 5.2vw, 34px); font-weight: 700; }
h3 { font-size: clamp(19px, 4vw, 22px); font-weight: 700; }
p  { margin: 0 0 14px; }
a  { color: var(--y-link); }
img, svg { max-width: 100%; }
.y-wrap { width: 100%; max-width: var(--y-wrap); margin: 0 auto; padding: 0 var(--y-gut); }
.y-sr { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }
:focus-visible { outline: 3px solid var(--y-apricot); outline-offset: 2px; }
::selection { background: var(--y-apricot); color: var(--y-btn-ink); }

/* ======================================================================
   Система движения

   Начальное состояние прячется ТОЛЬКО когда скрипт жив и поставил
   html.y-motion. Если скрипт не загрузился, упал или выключен — всё видно
   сразу. На этом месте уже один раз обжёгся: полстраницы было невидимым.
   ====================================================================== */

/* появление блока при прокрутке */
.y-motion .y-up {
  opacity: 0;
  transform: translate3d(0, 34px, 0);
  transition: opacity .75s var(--y-ease), transform .9s var(--y-ease);
  transition-delay: calc(var(--i, 0) * 70ms);
}
.y-motion .y-up.is-in { opacity: 1; transform: none; }

/* то же, но с лёгким наклоном — так в старом макете выезжали карточки */
.y-motion .y-up--card { transform: translate3d(0, 56px, 0) rotate(1.4deg); }
.y-motion .y-up--left { transform: translate3d(-32px, 0, 0); }

/* заголовок по словам: слово выезжает из-под маски */
.y-split { display: block; }
.y-split .y-w { display: inline-block; overflow: hidden; vertical-align: bottom; padding-bottom: .08em; margin-bottom: -.08em; }
.y-split .y-w > i { display: inline-block; font-style: inherit; }
.y-motion .y-split .y-w > i {
  transform: translate3d(0, 110%, 0);
  transition: transform .95s var(--y-ease);
  transition-delay: calc(var(--i, 0) * 55ms);
}
.y-motion .y-split.is-in .y-w > i { transform: none; }

/* ---------- заставка ----------
   Повтор прежней вступительной анимации, но без библиотек: каждая часть
   знака едет своим ключевым кадром, всё — transform и opacity.
   Правила ни на что не влияют, пока заставки нет в разметке. */
.y-load {
  position: fixed; inset: 0; z-index: 200; display: grid; place-items: center;
  background: var(--y-deep); color: var(--y-paper);
  transition: opacity .55s var(--y-ease), visibility .55s;
}
.y-loaded .y-load { opacity: 0; visibility: hidden; pointer-events: none; }
.y-load__in { display: grid; justify-items: center; gap: 24px; padding: 24px; }

.y-load__mark { width: min(240px, 54vw); animation: y-mark .7s cubic-bezier(.34,1.56,.64,1) both; }
.y-load__mark svg { display: block; width: 100%; height: auto; overflow: visible; }
@keyframes y-mark { from { transform: scale(0); } to { transform: scale(1); } }

/* буквы съезжаются к малышу и легонько его обнимают */
.lm-e { animation: y-e .9s cubic-bezier(.34,1.4,.64,1) .15s both, y-hug-l .44s ease-in-out 1.05s both; }
.lm-m { animation: y-m .9s cubic-bezier(.34,1.4,.64,1) .15s both, y-hug-r .44s ease-in-out 1.05s both; }
@keyframes y-e { from { transform: translateX(-380px) rotate(-18deg); opacity: 0; } to { transform: none; opacity: 1; } }
@keyframes y-m { from { transform: translateX(380px) rotate(18deg); opacity: 0; } to { transform: none; opacity: 1; } }
@keyframes y-hug-l { 0%, 100% { transform: none; } 50% { transform: translateX(28px); } }
@keyframes y-hug-r { 0%, 100% { transform: none; } 50% { transform: translateX(-28px); } }

/* малыш выпрыгивает снизу и подпрыгивает в объятиях */
.lm-baby { transform-origin: 50% 100%; animation: y-baby .7s cubic-bezier(.34,1.8,.64,1) .55s both, y-baby-pop .44s ease-in-out 1.05s both; }
@keyframes y-baby { from { transform: translateY(120px) scale(0); } to { transform: none; } }
@keyframes y-baby-pop { 0%, 100% { transform: none; } 50% { transform: scale(1.06); } }

/* половинки сердца слетаются и сердце бьётся */
.lm-h1 { animation: y-h1 .6s cubic-bezier(.34,1.7,.64,1) 1.2s both; }
.lm-h2 { animation: y-h2 .6s cubic-bezier(.34,1.7,.64,1) 1.2s both; }
.lm-heart { transform-origin: 50% 60%; animation: y-beat .32s ease-out 1.75s both; }
@keyframes y-h1 { from { transform: translate(-160px, 60px) rotate(-40deg); opacity: 0; } to { transform: none; opacity: 1; } }
@keyframes y-h2 { from { transform: translate(160px, 60px) rotate(40deg); opacity: 0; } to { transform: none; opacity: 1; } }
@keyframes y-beat { 0%, 100% { transform: none; } 50% { transform: scale(1.3); } }

/* слово выезжает из-под маски, как и раньше */
.y-load__word { overflow: hidden; font-family: var(--y-f-head); font-weight: 800; font-size: clamp(24px, 5vw, 38px); letter-spacing: -.03em; }
.y-load__word span { display: inline-block; animation: y-word 1s var(--y-ease) .3s both; }
.y-load__word em { font-style: normal; color: var(--y-peach); }
@keyframes y-word { from { transform: translateY(110%); } to { transform: none; } }

.y-load__count { font-family: var(--y-f-head); font-weight: 700; font-size: 13px; letter-spacing: .2em; color: var(--y-mist); }

/* ---------- сердечки ----------
   Тот же знак, что был на прежней главной. Стоят только там, где у разворота
   действительно пусто: заголовок занимает левую половину, правая свободна.
   Анимация transform идёт на композиторе и главный поток не трогает —
   раньше этим же занимался GSAP в цикле requestAnimationFrame. */
.heart { position: absolute; pointer-events: none; z-index: -1; opacity: .9; }
.heart__svg { display: block; width: 100%; height: auto; }
.heart--1 { width: 58px; right: 6%;  top: 12%;   animation: y-float 7s ease-in-out infinite; }
.heart--2 { width: 34px; right: 26%; top: 38%;   animation: y-float 9s ease-in-out -3s infinite reverse; }
.heart--3 { width: 46px; right: 13%; bottom: 14%; animation: y-float 8s ease-in-out -1.5s infinite; }
.heart--4 { width: 40px; right: 2%;  top: 2px;    animation: y-float 10s ease-in-out -4s infinite reverse; }
@keyframes y-float {
  0%, 100% { transform: translate3d(0, 0, 0) rotate(-7deg); }
  50%      { transform: translate3d(0, -16px, 0) rotate(8deg); }
}
/* На телефоне свободного места нет: оставляем одно, в самом верху разворота. */
@media (max-width: 859px) {
  .heart--2, .heart--3, .heart--4 { display: none; }
  .heart--1 { width: 38px; right: 2%; top: 0; }
}

/* полоса прочитанного вверху страницы */
.y-prog {
  position: fixed; top: 0; left: 0; right: 0; height: 3px; z-index: 60;
  background: var(--y-apricot); transform: scaleX(0); transform-origin: 0 50%;
  pointer-events: none;
}

/* еле заметное зерно — от него старая главная казалась «напечатанной».
   Слой неподвижен: анимировать его, как раньше, слишком дорого. */
.y-grain {
  position: fixed; inset: 0; z-index: 55; pointer-events: none; opacity: .035;
  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='.85' numOctaves='2' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='160' height='160' filter='url(%23n)'/%3E%3C/svg%3E");
}

/* кнопка, которая тянется к курсору (только мышь, не палец) */
.y-magnet { transition: transform .45s var(--y-ease); }

@media (hover: none), (pointer: coarse) { .y-grain { display: none; } }

/* ---------- кнопки ---------- */
.y-btn {
  position: relative; overflow: hidden;
  display: inline-flex; align-items: center; justify-content: center; gap: 9px;
  min-height: 54px; padding: 0 24px; border: 0; border-radius: 999px;
  font: 600 16px/1 var(--y-f-body); text-decoration: none; cursor: pointer;
  transition: transform .18s var(--y-ease), box-shadow .3s var(--y-ease), filter .2s;
}
.y-btn:active { transform: scale(.975); }
.y-btn--call  { background: var(--y-apricot); color: var(--y-btn-ink); box-shadow: 0 10px 26px -14px rgba(196, 118, 46, .9); }
.y-btn--call:hover { filter: brightness(1.04); box-shadow: 0 18px 34px -16px rgba(196, 118, 46, .95); }
.y-btn--ghost { background: transparent; color: var(--y-deep); box-shadow: inset 0 0 0 1.5px var(--y-line); }
.y-btn--ghost:hover { background: var(--y-white); box-shadow: inset 0 0 0 1.5px var(--y-line), var(--y-shadow); }
.y-btn--wide  { width: 100%; }
.y-btn .y-i { width: 18px; height: 18px; flex: none; }

/* ---------- шапка-таблетка ---------- */
.y-hdr {
  position: fixed; top: 10px; left: 0; right: 0; z-index: 45;
  transition: transform .5s var(--y-ease);
}
.y-hdr.is-up { transform: translate3d(0, calc(-100% - 16px), 0); }
.y-hdr__bar {
  display: flex; align-items: center; gap: 10px; min-height: 60px;
  padding: 0 8px 0 18px; border-radius: 999px;
  background: color-mix(in srgb, var(--y-paper) 90%, transparent);
  border: 1px solid rgba(255, 255, 255, .8);
  box-shadow: 0 12px 34px -22px rgba(38, 75, 102, .6);
}
/* Размытие — только на широких экранах с мышью: на телефоне фон за липкой
   шапкой перерисовывается каждый кадр прокрутки, и это заметно тормозит. */
@media (min-width: 900px) and (hover: hover) {
  .y-hdr__bar { backdrop-filter: blur(16px) saturate(1.3); -webkit-backdrop-filter: blur(16px) saturate(1.3); }
}
.y-hdr__name { display: inline-flex; align-items: center; flex: none; text-decoration: none; }
.y-hdr__logo { display: block; height: 40px; width: auto; }
@media (max-width: 559px) { .y-hdr__logo { height: 34px; } }
.y-hdr__spacer { flex: 1; }
/* Навигация. На узких экранах в «таблетку» она не помещается —
   там те же разделы продублированы в подвале. */
.y-nav { display: none; gap: 2px; margin-right: 6px; }
@media (min-width: 900px) { .y-nav { display: flex; } }
.y-nav a {
  padding: 9px 12px; border-radius: 999px; white-space: nowrap;
  color: var(--y-deep); text-decoration: none; font-size: 14.5px; font-weight: 500;
  transition: background .25s var(--y-ease), color .25s;
}
.y-nav a:hover { background: rgba(38, 75, 102, .07); color: var(--y-link); }
.y-lang { display: inline-flex; gap: 2px; padding: 3px; background: var(--y-white); border: 1px solid var(--y-line); border-radius: 999px; }
.y-lang button {
  min-width: 46px; height: 40px; padding: 0 10px; border: 0; border-radius: 999px;
  background: transparent; color: var(--y-muted); font: 600 13px/1 var(--y-f-body); cursor: pointer;
  transition: background .2s var(--y-ease), color .2s;
}
.y-lang button:hover { background: rgba(38, 75, 102, .06); }
.y-lang button[aria-pressed="true"] { background: var(--y-deep); color: var(--y-paper); }
.y-hdr .y-btn--call { min-height: 44px; padding: 0 18px; font-size: 14.5px; }
@media (max-width: 719px) { .y-hdr .y-btn--call { display: none; } }

/* Высота шапки отдаётся странице отступом сверху — но только там, где эта
   шапка есть. У страниц инструментов свои верхние панели, их трогать нельзя.
   Два отдельных правила, не через запятую: если браузер не знает :has(),
   он выбросит всё правило целиком вместе с запасным селектором. */
body:has(> .y-hdr) { padding-top: 80px; }
body.y-has-hdr     { padding-top: 80px; }

/* ---------- подвал ---------- */
.y-ftr {
  margin-top: 56px; padding: 44px 0 calc(28px + env(safe-area-inset-bottom));
  background: var(--y-deep); color: var(--y-paper);
}
.y-ftr a { color: var(--y-mist); text-decoration: none; }
.y-ftr a:hover { color: var(--y-peach); }
.y-ftr__name { font-family: var(--y-f-head); font-weight: 800; font-size: 20px; margin-bottom: 6px; }
.y-ftr__row { display: grid; gap: 18px; }
.y-ftr__links { display: flex; flex-wrap: wrap; gap: 8px 18px; font-size: 15px; }
.y-ftr__nav { display: flex; flex-wrap: wrap; gap: 8px 18px; margin-top: 14px; font-size: 15px; font-weight: 600; }
.y-ftr__nav a { color: var(--y-paper); }
.y-ftr__small { margin: 0; font-size: 13.5px; color: var(--y-mist); }
@media (min-width: 720px) { .y-ftr__row { grid-template-columns: 1fr auto; align-items: end; } }

/* крупное имя внизу — последний акцент страницы */
.y-ftr__big {
  margin: 34px 0 0; padding-bottom: .1em; font-family: var(--y-f-head); font-weight: 800;
  font-size: clamp(34px, 10.5vw, 118px); line-height: 1; letter-spacing: -.04em;
  color: rgba(245, 249, 252, .14); text-align: center; user-select: none;
  overflow: hidden; text-overflow: clip;
}

/* ---------- обрамление страницы инструмента ---------- */
.y-toollogo { display: inline-flex; align-items: center; flex: none; text-decoration: none; }
.y-toollogo img { display: block; height: 36px; width: auto; }
@media (max-width: 559px) { .y-toollogo img { height: 30px; } }

.y-back {
  display: inline-flex; align-items: center; gap: 7px; min-height: 44px;
  margin: 14px 0 2px; color: var(--y-link); font-weight: 600; font-size: 15px; text-decoration: none;
  transition: gap .25s var(--y-ease);
}
.y-back:hover { text-decoration: underline; gap: 11px; }

.y-tool-head { padding: 6px 0 18px; }
.y-tool-head p.lead { margin: 10px 0 0; color: var(--y-muted); font-size: 17px; max-width: 62ch; }

/* предупреждение «не заменяет осмотр» */
.y-safety {
  margin: 30px 0 0; padding: 20px 22px; border-radius: var(--y-r);
  background: var(--y-danger-bg); color: var(--y-danger);
}
.y-safety h3 { font-size: 17px; margin-bottom: 6px; color: var(--y-danger); }
.y-safety p { margin: 0; font-size: 15.5px; line-height: 1.5; }
.y-safety a { color: var(--y-danger); font-weight: 600; }

/* карточка вызова врача */
.y-offer {
  position: relative; overflow: hidden;
  margin: 16px 0 0; padding: 26px; border-radius: var(--y-r-lg);
  background: var(--y-white); border: 1px solid var(--y-line); box-shadow: var(--y-shadow);
  display: grid; gap: 14px;
}
.y-offer::after {
  content: ""; position: absolute; right: -70px; top: -90px; width: 230px; height: 230px;
  border-radius: 50%; background: radial-gradient(circle, rgba(254, 196, 148, .5), transparent 68%);
  pointer-events: none;
}
.y-offer h3 { font-size: 21px; }
.y-offer p { margin: 0; color: var(--y-muted); font-size: 15.5px; }
.y-offer__txt, .y-offer .y-btn { position: relative; z-index: 1; }
.y-offer__price { font-family: var(--y-f-head); font-weight: 800; font-size: 27px; color: var(--y-deep); }
@media (min-width: 720px) {
  .y-offer { grid-template-columns: 1fr auto; align-items: center; }
  .y-offer__txt { grid-column: 1; }
  .y-offer .y-btn { grid-column: 2; grid-row: 1 / span 2; }
}

/* закреплённая кнопка вызова на телефоне */
.y-callbar {
  position: fixed; left: 0; right: 0; bottom: 0; z-index: 50;
  padding: 10px var(--y-gut) calc(10px + env(safe-area-inset-bottom));
  background: color-mix(in srgb, var(--y-paper) 94%, transparent);
  border-top: 1px solid var(--y-line);
  transform: translate3d(0, 130%, 0);
  transition: transform .5s var(--y-ease);
}
.y-callbar.is-in { transform: none; }
.y-callbar .y-btn { width: 100%; }
body.y-has-callbar { padding-bottom: 88px; }
@media (min-width: 720px) { .y-callbar { display: none; } body.y-has-callbar { padding-bottom: 0; } }

/* ---------- переключение языка ---------- */
html[lang="ru"] [data-y-kz], html[lang="kk"] [data-y-ru] { display: none !important; }

/* ---------- если человек просил меньше движения ---------- */
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { animation: none !important; transition-duration: .01ms !important; }
  html { scroll-behavior: auto; }
  .y-motion .y-up, .y-motion .y-split .y-w > i { opacity: 1 !important; transform: none !important; }
  .y-callbar { transform: none; }
  .y-load { display: none; }
  .heart { animation: none; }
  .y-grain { display: none; }
}