/* ===========================================================
   Живой декор: цветочный сад за содержимым + мягкие анимации.
   Всё оформление отключается при prefers-reduced-motion.
   =========================================================== */

.garden {
  position: fixed;
  inset: 0;
  z-index: -1;
  overflow: hidden;
  pointer-events: none;
}

.garden-item,
.falling-petal {
  position: absolute;
  will-change: transform;
}

/* ---------- цветы ---------- */
.flower .petals { fill: currentColor; opacity: .5; }
.flower .core { fill: var(--gold); opacity: .45; }

.flower-a { color: var(--blush-deep); width: 190px; height: 190px; left: -46px; top: 12vh; opacity: .5; animation: garden-sway 19s ease-in-out infinite alternate, garden-turn 70s linear infinite; }
.flower-b { color: var(--sage-deep); width: 130px; height: 130px; right: 3vw;  top: 30vh; opacity: .4; animation: garden-sway 24s ease-in-out infinite alternate-reverse, garden-turn 95s linear infinite reverse; }
.flower-c { color: var(--blush-deep); width: 152px; height: 152px; left: 6vw;  top: 68vh; opacity: .34; animation: garden-sway 27s ease-in-out infinite alternate, garden-turn 110s linear infinite; }
.flower-d { color: var(--lavender); width: 210px; height: 210px; right: -58px; top: 74vh; opacity: .5; animation: garden-sway 22s ease-in-out infinite alternate-reverse, garden-turn 85s linear infinite reverse; }

/* ---------- листья ---------- */
.leaf path { fill: var(--sage-deep); opacity: .30; }
.leaf .vein { fill: none; stroke: rgba(255,255,255,.5); stroke-width: 2; }

.leaf-a { width: 96px;  height: 96px;  left: 14vw; top: 6vh;  transform: rotate(28deg);  animation: garden-sway 17s ease-in-out infinite alternate; }
.leaf-b { width: 124px; height: 124px; right: 15vw; top: 54vh; transform: rotate(-42deg); animation: garden-sway 21s ease-in-out infinite alternate-reverse; }
.leaf-c { width: 78px;  height: 78px;  left: 42vw; bottom: 5vh; transform: rotate(15deg);  animation: garden-sway 25s ease-in-out infinite alternate; }

/* ---------- искры ---------- */
.sparkle path { fill: var(--gold); opacity: .5; }
.sparkle-a { width: 26px; height: 26px; left: 28vw; top: 24vh; animation: garden-twinkle 6s ease-in-out infinite; }
.sparkle-b { width: 18px; height: 18px; right: 26vw; top: 16vh; animation: garden-twinkle 8s ease-in-out infinite 1.4s; }
.sparkle-c { width: 22px; height: 22px; left: 62vw; bottom: 18vh; animation: garden-twinkle 7s ease-in-out infinite .8s; }

/* ---------- акварельные пятна ---------- */
.garden-blur { position: absolute; border-radius: 50%; filter: blur(60px); }
.blur-a { width: 380px; height: 380px; left: -8vw;  top: 34vh; background: rgba(243,215,223,.5);  animation: garden-breathe 16s ease-in-out infinite; }
.blur-b { width: 300px; height: 300px; right: -6vw; top: 8vh;  background: rgba(220,232,220,.55); animation: garden-breathe 21s ease-in-out infinite 2s; }
.blur-c { width: 340px; height: 340px; left: 46vw;  bottom: -12vh; background: rgba(233,226,239,.45); animation: garden-breathe 26s ease-in-out infinite 4s; }

/* ---------- падающие лепестки ---------- */
.falling-petal path { fill: var(--blush-deep); opacity: .55; }
.falling-petal { width: 26px; height: 26px; top: -8vh; }
.petal-a { left: 18vw; animation: petal-fall 26s linear infinite; }
.petal-b { left: 47vw; width: 20px; height: 20px; animation: petal-fall 34s linear infinite 7s; }
.petal-c { left: 72vw; width: 30px; height: 30px; animation: petal-fall 30s linear infinite 14s; }
.petal-d { left: 88vw; width: 18px; height: 18px; animation: petal-fall 38s linear infinite 21s; }
.petal-b path, .petal-d path { fill: var(--sage-deep); opacity: .45; }

@keyframes garden-sway {
  from { transform: translate3d(0, 0, 0) rotate(0deg); }
  to   { transform: translate3d(18px, -26px, 0) rotate(6deg); }
}
@keyframes garden-turn { to { rotate: 360deg; } }
@keyframes garden-twinkle {
  0%, 100% { transform: scale(.7); opacity: .25; }
  50%      { transform: scale(1.15); opacity: .85; }
}
@keyframes garden-breathe {
  0%, 100% { transform: translate3d(0, 0, 0) scale(1); }
  50%      { transform: translate3d(24px, -30px, 0) scale(1.12); }
}
@keyframes petal-fall {
  0%   { transform: translate3d(0, 0, 0) rotate(0deg); opacity: 0; }
  8%   { opacity: .75; }
  92%  { opacity: .5; }
  100% { transform: translate3d(90px, 118vh, 0) rotate(420deg); opacity: 0; }
}

/* ===========================================================
   Появление блоков при прокрутке. Класс motion-ready ставит
   встроенный скрипт в <head>, поэтому без JS контент виден сразу.
   =========================================================== */
html.motion-ready .reveal {
  opacity: 0;
  transform: translate3d(0, 26px, 0);
  transition: opacity .8s cubic-bezier(.22,.61,.36,1), transform .8s cubic-bezier(.22,.61,.36,1);
}
html.motion-ready .reveal.visible { opacity: 1; transform: none; }

html.motion-ready .steps-grid .reveal:nth-child(2),
html.motion-ready .directions-grid .reveal:nth-child(2),
html.motion-ready .tariffs-grid .reveal:nth-child(2) { transition-delay: .12s; }
html.motion-ready .steps-grid .reveal:nth-child(3),
html.motion-ready .directions-grid .reveal:nth-child(3),
html.motion-ready .tariffs-grid .reveal:nth-child(3) { transition-delay: .24s; }
html.motion-ready .directions-grid .reveal:nth-child(4) { transition-delay: .36s; }

/* ===========================================================
   Оживление элементов страницы
   =========================================================== */

/* портрет мягко покачивается, узоры вращаются вокруг него */
.portrait-frame > img:first-child { animation: portrait-float 9s ease-in-out infinite; }
.signature-orbit { animation: orbit-spin 44s linear infinite; }
.orbit-two { animation-duration: 58s; animation-direction: reverse; }
@keyframes portrait-float {
  0%, 100% { transform: translateY(0); }
  50%      { transform: translateY(-12px); }
}
@keyframes orbit-spin {
  from { rotate: 0deg; }
  to   { rotate: 360deg; }
}

/* ботанические знаки дышат */
.botanical { animation: botanical-breathe 11s ease-in-out infinite; }
.botanical-two { animation-duration: 14s; animation-delay: 1.5s; }
@keyframes botanical-breathe {
  0%, 100% { transform: translateY(0) rotate(0deg); opacity: .5; }
  50%      { transform: translateY(-14px) rotate(7deg); opacity: .85; }
}

/* карточки приподнимаются */
.soft-card, .tariff-card, .direction-card, .gallery-tile, .webinar-card {
  transition: transform .4s cubic-bezier(.22,.61,.36,1), box-shadow .4s ease;
}
.step-card:hover, .tariff-card:hover, .webinar-card:hover, .soft-card.direction-card:hover {
  transform: translateY(-7px);
  box-shadow: 0 22px 48px rgba(60, 50, 48, .13);
}
.direction-card:hover { transform: translateY(-7px); box-shadow: 0 22px 48px rgba(60, 50, 48, .13); }
.direction-card img { transition: transform .6s cubic-bezier(.22,.61,.36,1); }
.direction-card:hover img { transform: scale(1.08) rotate(2deg); }

/* плитки галереи */
.gallery-tile { overflow: hidden; }
.gallery-tile img { transition: transform .7s cubic-bezier(.22,.61,.36,1); }
.gallery-tile:hover img { transform: scale(1.09); }
.gallery-tile:hover { transform: translateY(-6px); box-shadow: 0 20px 44px rgba(60,50,48,.15); }

/* карта и паттерны — лёгкое приближение */
.moscow-illustration img, .pattern-showcase__image { transition: transform .8s cubic-bezier(.22,.61,.36,1); }
.moscow-illustration:hover img, .pattern-showcase:hover .pattern-showcase__image { transform: scale(1.035); }

/* шкатулка покачивается */
.chest-image { animation: chest-float 12s ease-in-out infinite; }
@keyframes chest-float {
  0%, 100% { transform: translateY(0) rotate(-.6deg); }
  50%      { transform: translateY(-16px) rotate(.6deg); }
}

/* кнопки: мягкий блик слева направо */
.button { position: relative; overflow: hidden; }
.button::after {
  content: "";
  position: absolute;
  inset: 0 auto 0 -60%;
  width: 45%;
  background: linear-gradient(100deg, transparent, rgba(255,255,255,.42), transparent);
  transform: skewX(-18deg);
  opacity: 0;
  transition: opacity .2s ease;
}
.button:hover::after { opacity: 1; animation: button-sheen .75s ease; }
@keyframes button-sheen { to { left: 115%; } }

/* лента «Самый гибкий» и значки чуть пульсируют */
.tariff-ribbon { animation: ribbon-pulse 4.5s ease-in-out infinite; }
@keyframes ribbon-pulse {
  0%, 100% { transform: translateY(0); box-shadow: 0 6px 18px rgba(154,99,115,.22); }
  50%      { transform: translateY(-3px); box-shadow: 0 12px 26px rgba(154,99,115,.32); }
}

/* акварельные пятна в первом экране медленно плывут */
.watercolor-a { animation: garden-breathe 19s ease-in-out infinite; }
.watercolor-b { animation: garden-breathe 24s ease-in-out infinite 3s; }

/* анонс мягко въезжает сверху */
.announcement { animation: announcement-in .8s cubic-bezier(.22,.61,.36,1); }
@keyframes announcement-in { from { transform: translateY(-100%); opacity: 0; } }

/* подчёркивание у заголовков разделов при появлении */
html.motion-ready .section-heading .reveal.visible h2::after,
html.motion-ready .reveal.visible > h2::after { animation: underline-draw .9s .2s both cubic-bezier(.22,.61,.36,1); }
@keyframes underline-draw { from { transform: scaleX(0); } to { transform: scaleX(1); } }

/* палитра из фотографии появляется по очереди */
.palette-chip { animation: chip-in .45s backwards cubic-bezier(.22,.61,.36,1); }
.palette-chip:nth-child(2) { animation-delay: .06s; }
.palette-chip:nth-child(3) { animation-delay: .12s; }
.palette-chip:nth-child(4) { animation-delay: .18s; }
.palette-chip:nth-child(5) { animation-delay: .24s; }
.palette-chip:nth-child(6) { animation-delay: .30s; }
@keyframes chip-in { from { opacity: 0; transform: translateY(10px) scale(.85); } }

/* холст сигнатуры проявляется */
.signature-preview.has-preview canvas { animation: signature-in .9s cubic-bezier(.22,.61,.36,1); }
@keyframes signature-in { from { opacity: 0; transform: scale(.92) rotate(-4deg); } }

@media (max-width: 860px) {
  /* на телефонах оставляем только самый лёгкий декор */
  .flower-c, .flower-d, .leaf-b, .leaf-c, .sparkle-c, .petal-c, .petal-d, .blur-c { display: none; }
  .flower-a { width: 130px; height: 130px; }
  .flower-b { width: 96px; height: 96px; }
}

@media (prefers-reduced-motion: reduce) {
  .garden { display: none; }
  html.motion-ready .reveal { opacity: 1; transform: none; transition: none; }
  .portrait-frame > img:first-child,
  .signature-orbit,
  .botanical,
  .chest-image,
  .watercolor-a,
  .watercolor-b,
  .tariff-ribbon,
  .announcement,
  .palette-chip { animation: none; }
}