/* Orivika — анимации главной (предложение design[49], принципы emil-design-eng).
   Только transform/opacity/clip-path/filter; сильные ease-out кривые; UI ≤ 300 мс, объясняющая анимация — длиннее;
   всё — один раз; без JS страница выглядит как раньше; prefers-reduced-motion — только прозрачность. */
:root {
  --ease-out: cubic-bezier(0.23, 1, 0.32, 1);
  --ease-in-out: cubic-bezier(0.77, 0, 0.175, 1);
}

/* 1. Отклик кнопок на нажатие (feedback) */
.btn, .seg, .ang, .lnk, summary { transition: transform 160ms var(--ease-out), background-color 200ms ease, border-color 200ms ease, color 200ms ease; }
.btn:active, .seg:active, .ang:active { transform: scale(0.97); }
@media (hover: hover) and (pointer: fine) {
  .ang:hover { border-color: #9FCFC3 !important; }
}

/* 2. Появление при прокрутке — один раз (marketing, предотвращение «резкого» контента) */
.js-anim .rv { opacity: 0; transform: translateY(12px); transition: opacity 500ms var(--ease-out), transform 500ms var(--ease-out); transition-delay: var(--d, 0ms); }
.js-anim .rv.in { opacity: 1; transform: none; }

/* 3. Первый экран: заголовок по строкам, фото, затем плавающие окна */
.js-anim .hero-photo-wrap { position: relative; }
.hero-photo-wrap img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; }
.hero-photo-wrap img.base { position: relative; }
.js-anim .hero-photo-wrap .plaque { clip-path: inset(0 100% 0 0); }
.js-anim .hero-photo-wrap.scanned .plaque { clip-path: inset(0 0 0 0); transition: clip-path 1400ms var(--ease-in-out); }
.scan-line { position: absolute; top: 0; bottom: 0; left: 0; width: 2px; background: linear-gradient(transparent, #fff 20%, #fff 80%, transparent);
  box-shadow: 0 0 18px 4px rgba(255, 255, 255, .55); opacity: 0; pointer-events: none; transform: translateX(0); }
.hero-photo-wrap.scanned .scan-line { animation: mn-scan 1400ms var(--ease-in-out) forwards; }
@keyframes mn-scan { 0% { opacity: 0; transform: translateX(0); } 8% { opacity: 1; } 92% { opacity: 1; } 100% { opacity: 0; transform: translateX(var(--w, 600px)); } }
.js-anim .hero .float { opacity: 0; transform: translateY(8px) scale(0.97); transition: opacity 400ms var(--ease-out), transform 400ms var(--ease-out); transition-delay: var(--d, 0ms); }
.js-anim .hero .float.in { opacity: 1; transform: none; }
/* «живые» плавающие окна: очень медленное покачивание, только на крупных экранах */
@media (min-width: 901px) and (prefers-reduced-motion: no-preference) {
  .hero .float.in.idle { animation: mn-float 6s ease-in-out infinite; animation-delay: var(--idle, 0s); }
}
@keyframes mn-float { 0%, 100% { transform: translateY(0); } 50% { transform: translateY(-5px); } }
.js-anim .meter-fill { transform: scaleX(0); transform-origin: left; transition: transform 900ms var(--ease-out) 300ms; }
.js-anim .meter-fill.in { transform: scaleX(1); }

/* 4. Студия анализа: смена ракурса / режима — перетекание через лёгкое размытие (вместо резкой подмены) */
#ang-photo { overflow: hidden; }
#ang-img { will-change: filter, opacity; }

/* 5. Отчёт пациенту: столбики растут, кольцо прорисовывается (explanation) */
.js-anim .bar-grow { transform: scaleY(0.15); transform-origin: bottom; transition: transform 700ms var(--ease-out); transition-delay: var(--d, 0ms); }
.js-anim .bar-grow.in { transform: none; }
.ring-svg { position: absolute; inset: -10px; width: calc(100% + 20px); height: calc(100% + 20px); transform: rotate(-90deg); }
.ring-svg circle { fill: none; stroke: #2FAB98; stroke-width: 10; stroke-linecap: round; }
.js-anim .ring-svg circle { stroke-dashoffset: var(--len); transition: stroke-dashoffset 1200ms var(--ease-out) 200ms; }
.js-anim .ring-svg.in circle { stroke-dashoffset: var(--off); }

/* 6. Вопросы: плавное раскрытие (где браузер умеет) */
@supports (interpolate-size: allow-keywords) {
  :root { interpolate-size: allow-keywords; }
  details::details-content { block-size: 0; overflow: hidden; opacity: 0;
    transition: block-size 250ms var(--ease-out), opacity 200ms ease, content-visibility 250ms allow-discrete; }
  details[open]::details-content { block-size: auto; opacity: 1; }
}
details summary { position: relative; padding-right: 56px !important; }
details summary::after { content: ""; position: absolute; right: 26px; top: 50%; width: 10px; height: 10px; margin-top: -7px;
  border-right: 2px solid #147466; border-bottom: 2px solid #147466; transform: rotate(45deg); transition: transform 200ms var(--ease-out); }
details[open] summary::after { transform: rotate(225deg); margin-top: -2px; }

/* Доступность: меньше движения — только прозрачность */
@media (prefers-reduced-motion: reduce) {
  .js-anim .rv, .js-anim .hero .float { transform: none !important; transition: opacity 300ms ease !important; }
  .js-anim .hero-photo-wrap .plaque { clip-path: none !important; }
  .scan-line { display: none; }
  .js-anim .bar-grow, .js-anim .meter-fill { transform: none !important; }
  .btn:active, .seg:active, .ang:active { transform: none; }
}

/* ===== дополнения (вторая волна) ===== */
/* 7. Шапка: при прокрутке — плотнее фон и мягкая тень (состояние «вы листаете») */
header > .w > div { transition: box-shadow 250ms ease, background-color 250ms ease; }
header.scrolled > .w > div { box-shadow: 0 12px 32px rgba(14,59,53,.12) !important; background: rgba(255,255,255,.98) !important; }

/* 8. «Показать налёт / Исходное фото» — шторка со сканирующей линией (объяснение) */
.wipe-old { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; z-index: 1; pointer-events: none; }
.wipe-line { position: absolute; top: 0; bottom: 0; width: 2px; z-index: 2; background: #fff; box-shadow: 0 0 16px 4px rgba(255,255,255,.55); pointer-events: none; }

/* 9. Полоски процентов у ракурсов растут при появлении */
.js-anim .ang span[style*="background: #E0487F"] { transform: scaleX(0); transform-origin: left; transition: transform 800ms var(--ease-out); transition-delay: var(--d, 0ms); }
.js-anim .ang.bars-in span[style*="background: #E0487F"] { transform: none; }

/* 10. Шаги «Как работает»: линия прогресса и номера по очереди */
.steps-line { height: 3px; border-radius: 3px; background: #DCEFEA; margin: 0 0 18px; overflow: hidden; }
.steps-line i { display: block; height: 100%; background: linear-gradient(90deg, #147466, #2FAB98, #E0487F); transform: scaleX(0); transform-origin: left; transition: transform 1400ms var(--ease-in-out) 200ms; }
.steps-line.in i { transform: none; }
.js-anim #steps li > span:first-child { transform: scale(0.8); opacity: 0; transition: transform 400ms var(--ease-out), opacity 300ms ease; transition-delay: calc(var(--d, 0ms) + 250ms); }
.js-anim #steps li.in > span:first-child { transform: none; opacity: 1; }

/* 11. «Врач подтвердил»: галочка прорисовывается */
.check-draw path { stroke-dasharray: 24; stroke-dashoffset: 24; }
.float.in .check-draw path { transition: stroke-dashoffset 450ms var(--ease-out) 450ms; stroke-dashoffset: 0; }

/* 12. Телефон: идёт запись — точка «дышит», таймер тикает */
.rec-dot { animation: mn-pulse 1.6s ease-in-out infinite; }
@keyframes mn-pulse { 0%, 100% { opacity: 1; } 50% { opacity: .35; } }

/* 13. Объём первого экрана: фото и окна чуть следуют за мышью (только компьютер) */
.js-anim .hero .stage { transform-style: preserve-3d; will-change: transform; }  /* design[74b]: композиция наклоняется целиком */
.js-anim .hero .stage .ph-art { position: relative; z-index: 1; transform: translateZ(0); }
.js-anim .hero .stage .float { z-index: 3; }
.tilt { will-change: transform; }

@media (prefers-reduced-motion: reduce) {
  .steps-line i, .js-anim .ang span[style*="background: #E0487F"], .js-anim #steps li > span:first-child { transform: none !important; opacity: 1 !important; }
  .rec-dot { animation: none; }
  .check-draw path { stroke-dashoffset: 0 !important; }
}