/* ===== Движение на главной: спокойное, «дышащее», только transform/opacity =====
   Подключается только на index.html. Скрытие элементов до появления — только при html.motion
   (класс ставит home-motion.js), поэтому без скрипта всё видно сразу. */

/* --- полоса прочтения страницы --- */
.read-progress { position: fixed; top: 0; left: 0; right: 0; height: 3px; z-index: 120; pointer-events: none;
  background: linear-gradient(90deg, var(--sage), var(--terra-light) 55%, var(--terracotta));
  transform-origin: 0 50%; transform: scaleX(0); }

/* --- HERO: мягкие «дышащие» пятна света на фоне --- */
.section--hero { position: relative; overflow: hidden; overflow: clip; }
.section--hero > .container { position: relative; z-index: 1; }
.section--hero::before, .section--hero::after { content: ""; position: absolute; border-radius: 50%; pointer-events: none; z-index: 0; will-change: transform; }
.section--hero::before { width: 640px; height: 640px; right: -140px; top: -180px;
  background: radial-gradient(closest-side, rgba(212,149,106,0.30), rgba(212,149,106,0.10) 55%, transparent 72%);
  animation: hmBreath 13s ease-in-out infinite alternate; }
.section--hero::after { width: 520px; height: 520px; left: -200px; bottom: -220px;
  background: radial-gradient(closest-side, rgba(122,158,126,0.24), rgba(122,158,126,0.08) 55%, transparent 72%);
  animation: hmBreath 16s ease-in-out -6s infinite alternate-reverse; }
@keyframes hmBreath { from { transform: translate3d(0, 0, 0) scale(1); } to { transform: translate3d(-36px, 28px, 0) scale(1.14); } }

/* --- HERO: появление по очереди --- */
.hero__badge, .hero__title, .hero__sub, .hero__actions, .hero__stats { animation: hmUp .8s cubic-bezier(.2,.75,.25,1) both; }
.hero__badge { animation-delay: .05s; }
.hero__title { animation-delay: .12s; }
.hero__sub { animation-delay: .24s; }
.hero__actions { animation-delay: .34s; }
.hero__stats { animation-delay: .44s; }
@keyframes hmUp { from { opacity: .01; transform: translateY(18px); } to { opacity: 1; transform: none; } }
/* фото не прячем (это главная картинка страницы) — только мягкий «наезд» */
.hero__photo { animation: hmSettle 1.6s cubic-bezier(.2,.7,.2,1) both; transform-origin: 50% 30%; }
@keyframes hmSettle { from { transform: scale(1.06); } to { transform: scale(1); } }
/* карточки на фото: появляются и потом медленно «плавают» */
.hero__card--online { animation: hmPop .7s cubic-bezier(.3,1.4,.5,1) .7s both, hmFloat 6.5s ease-in-out 1.5s infinite alternate; }
.hero__card--cert { animation: hmPop .7s cubic-bezier(.3,1.4,.5,1) .95s both, hmFloat 7.5s ease-in-out 1.8s infinite alternate-reverse; }
@keyframes hmPop { from { opacity: 0; transform: translateY(14px) scale(.92); } to { opacity: 1; transform: none; } }
@keyframes hmFloat { from { transform: translateY(0); } to { transform: translateY(-9px); } }

/* «онлайн»-точка в плашке */
.hero__badge-dot { position: relative; }
.hero__badge-dot::after { content: ""; position: absolute; inset: 0; border-radius: 50%; background: var(--sage); animation: hmPing 2.4s cubic-bezier(0,0,.2,1) 1.2s infinite; }
@keyframes hmPing { 0% { transform: scale(1); opacity: .7; } 80%, 100% { transform: scale(3); opacity: 0; } }

/* рукописная линия под «быть собой» */
.hero__title em { position: relative; display: inline-block; }
.hero__swash { position: absolute; left: -2%; bottom: -.16em; width: 104%; height: .32em; overflow: visible; pointer-events: none; }
.hero__swash path { fill: none; stroke: var(--terra-light); stroke-width: 5; stroke-linecap: round; opacity: .85;
  stroke-dasharray: 1; stroke-dashoffset: 1; animation: hmDraw 1.1s cubic-bezier(.6,.05,.3,1) 1s forwards; }
@keyframes hmDraw { to { stroke-dashoffset: 0; } }

/* --- появление блоков при прокрутке --- */
html.motion .rv { opacity: 0; transform: translateY(26px); transition: opacity .8s cubic-bezier(.2,.7,.2,1), transform .8s cubic-bezier(.2,.7,.2,1); transition-delay: var(--rv-d, 0s); }
html.motion .rv.is-in { opacity: 1; transform: none; }
html.motion .rv--photo { opacity: 1; transform: none; clip-path: inset(18% 0 0 0 round var(--radius-lg)); transition: clip-path 1.2s cubic-bezier(.2,.7,.2,1); }
html.motion .rv--photo img { transform: scale(1.08); transition: transform 1.6s cubic-bezier(.2,.7,.2,1); }
html.motion .rv--photo.is-in { clip-path: inset(0 0 0 0 round var(--radius-lg)); }
html.motion .rv--photo.is-in img { transform: none; }

/* --- «Три шага»: линия бежит от шага к шагу --- */
html.motion .steps .step::after { transform: scaleX(0); transform-origin: 0 50%; transition: transform .7s ease .3s; background: var(--terra-light); }
html.motion .steps .step:nth-child(2)::after { transition-delay: .75s; }
html.motion .steps.is-in .step::after { transform: scaleX(1); }
html.motion .steps .step__num { transform: scale(.4); opacity: 0; transition: transform .6s cubic-bezier(.3,1.5,.5,1), opacity .4s; }
html.motion .steps .step:nth-child(2) .step__num { transition-delay: .45s; }
html.motion .steps .step:nth-child(3) .step__num { transition-delay: .9s; }
html.motion .steps.is-in .step__num { transform: none; opacity: 1; }
.steps .step__num { position: relative; }
.steps.is-in .step__num::after { content: ""; position: absolute; inset: 0; border-radius: 50%; border: 2px solid var(--terra-light); animation: hmRing 1.4s ease-out both; }
.steps.is-in .step:nth-child(2) .step__num::after { animation-delay: .45s; }
.steps.is-in .step:nth-child(3) .step__num::after { animation-delay: .9s; }
@keyframes hmRing { from { transform: scale(1); opacity: .8; } to { transform: scale(1.7); opacity: 0; } }

/* --- «Образование»: линия времени заполняется по мере прокрутки --- */
.edu__timeline::after { content: ""; position: absolute; left: 7px; top: 8px; bottom: 8px; width: 2px; background: var(--terracotta);
  transform-origin: 50% 0; transform: scaleY(var(--edu-p, 0)); transition: transform .25s linear; }
html.motion .edu__item::before { transition: background .4s, box-shadow .4s, transform .4s; }
html.motion .edu__item.is-on::before { background: var(--terracotta); box-shadow: 0 0 0 5px rgba(150,91,53,.14); }
html.motion .edu__item.is-on .edu__year { color: var(--terracotta); }
.edu__item::before { z-index: 1; }

/* --- рейтинг над отзывами --- */
.rating-strip { display: flex; align-items: center; justify-content: center; gap: 18px; flex-wrap: wrap; margin: -12px auto 34px; text-align: left; }
.rating-strip__score { font-family: var(--font-heading); font-size: 3rem; line-height: 1; color: var(--terracotta); font-variant-numeric: tabular-nums; }
.rating-strip__stars { position: relative; display: inline-block; font-size: 1.35rem; letter-spacing: 3px; line-height: 1; color: var(--border); }
.rating-strip__stars span { position: absolute; left: 0; top: 0; overflow: hidden; white-space: nowrap; color: #E0A458; width: var(--fill, 99.6%); }
html.motion .rating-strip__stars span { width: 0; transition: width 1.4s cubic-bezier(.3,.7,.2,1) .25s; }
html.motion .rating-strip.is-in .rating-strip__stars span { width: var(--fill, 99.6%); }
.rating-strip__text { font-size: .9rem; color: var(--brown-mid); margin-top: 6px; line-height: 1.45; }
.rating-strip__text a { color: var(--terracotta); font-weight: 600; }

/* --- карточки «С чем я работаю»: иконка оживает при наведении --- */
.issue-card__icon svg { transition: transform .5s cubic-bezier(.3,1.5,.5,1); }
.issue-card:hover .issue-card__icon svg { transform: scale(1.18) rotate(-6deg); }

/* --- кнопки: мягкий блик при наведении --- */
.btn--primary, .btn--white { position: relative; overflow: hidden; isolation: isolate; }
.btn--primary::after, .btn--white::after { content: ""; position: absolute; top: 0; bottom: 0; left: -60%; width: 45%; z-index: -1; pointer-events: none;
  background: linear-gradient(100deg, transparent, rgba(255,255,255,.28), transparent); transform: skewX(-18deg); transition: left .7s ease; }
.btn--white::after { background: linear-gradient(100deg, transparent, rgba(212,149,106,.25), transparent); }
.btn--primary:hover::after, .btn--white:hover::after { left: 115%; }

/* --- финальный призыв: медленно плывущий свет --- */
.cta-banner { position: relative; overflow: hidden; overflow: clip; }
.cta-banner > .container { position: relative; z-index: 1; }
.cta-banner::before, .cta-banner::after { content: ""; position: absolute; border-radius: 50%; pointer-events: none; }
.cta-banner::before { width: 520px; height: 520px; left: -120px; top: -260px; background: radial-gradient(closest-side, rgba(255,255,255,.16), transparent 70%); animation: hmBreath 12s ease-in-out infinite alternate; }
.cta-banner::after { width: 420px; height: 420px; right: -100px; bottom: -240px; background: radial-gradient(closest-side, rgba(168,197,172,.22), transparent 70%); animation: hmBreath 15s ease-in-out -5s infinite alternate-reverse; }

@media (max-width: 768px) {
  .section--hero::before { width: 420px; height: 420px; right: -180px; top: -140px; }
  .section--hero::after { width: 360px; height: 360px; left: -180px; bottom: -160px; }
  .rating-strip { margin-top: -8px; gap: 12px; }
  .rating-strip__score { font-size: 2.4rem; }
}