/* MassageCo · первый экран страниц подарочных сертификатов (тот же стиль, что у НГ-страницы, префикс gh).
   H1 и карточка видны с первого кадра (стартуют с прозрачности .25–.35, не с нуля), поэтому LCP не ждёт анимацию.
   Анимации только на transform/opacity; при prefers-reduced-motion — сразу финальный кадр.
   Цвет страницы — модификатор: gh--green, gh--rose, gh--navy, gh--khaki, gh--amber, gh--violet. Снег — gh--snow, конфетти — gh--confetti. */
.gh-hero{padding:clamp(10px,1.6vw,20px) 0 clamp(28px,4vw,52px)}
@media (max-width:600px){.gh-hero>.wrap{padding-inline:8px}}

.gh{
  --bg1:#0C2E20; --bg2:#071A12; --bg3:#040F0A; --glow:rgba(28,122,76,.55); --glow2:rgba(242,162,58,.16);
  --hi:#FFD27A; --hi2:#F2A23A; --hl1:#FFE3A0; --hl2:#F2A23A;
  --ink:#F2FAF6; --mist:rgba(226,241,233,.8);
  --display:"Unbounded","Unbounded Fallback","Unbounded Fallback B","Unbounded Fallback R","Arial Black",system-ui,sans-serif;
  --font:"Manrope","Manrope Fallback","Manrope Fallback R",ui-sans-serif,system-ui,-apple-system,"Segoe UI",sans-serif;
  --ease:cubic-bezier(.2,.75,.15,1); --spring:cubic-bezier(.34,1.56,.64,1);
  position:relative;isolation:isolate;overflow:hidden;
  border-radius:clamp(22px,3vw,32px);
  color:var(--ink);font:400 16px/1.55 var(--font);-webkit-font-smoothing:antialiased;
  background:
    radial-gradient(90% 70% at 88% 0%,var(--glow),transparent 62%),
    radial-gradient(70% 55% at 0% 100%,var(--glow2),transparent 60%),
    linear-gradient(165deg,var(--bg1) 0%,var(--bg2) 52%,var(--bg3) 100%);
  box-shadow:0 50px 90px -50px rgba(4,15,10,.75);
}
.gh--rose{--bg1:#3B0F25;--bg2:#1F0714;--bg3:#12040B;--glow:rgba(232,49,122,.5);--glow2:rgba(255,178,120,.16);--hi:#FFB3CF;--hi2:#FF6FA5;--hl1:#FFD1E2;--hl2:#FF5C9A}
.gh--navy{--bg1:#0F2140;--bg2:#091428;--bg3:#050B17;--glow:rgba(70,130,220,.45);--glow2:rgba(242,162,58,.16)}
.gh--khaki{--bg1:#2A3519;--bg2:#161D0C;--bg3:#0B0F06;--glow:rgba(120,150,60,.45);--glow2:rgba(242,162,58,.18)}
.gh--violet{--bg1:#2C1244;--bg2:#170A26;--bg3:#0C0516;--glow:rgba(156,84,232,.48);--glow2:rgba(255,111,165,.18)}
.gh--amber{--bg1:#3A260C;--bg2:#1F1406;--bg3:#120B03;--glow:rgba(242,162,58,.42);--glow2:rgba(232,49,122,.12)}
.gh *,.gh *::before,.gh *::after{box-sizing:border-box}
.gh :where(h1,p,figure,picture){margin:0;padding:0}
.gh img{max-width:100%;display:block}

/* Фон: два мягких пятна света плывут, снег — два слоя точек (без скрипта и перерисовки) */
.gh__bg{position:absolute;inset:0;z-index:0;pointer-events:none;overflow:hidden}
.gh__bg i{position:absolute;width:70vmax;max-width:900px;aspect-ratio:1;border-radius:50%;will-change:transform}
/* Отступ сверху — в px, а не в % высоты: если блок на миг меняет высоту (догружается шрифт), пятна не прыгают (CLS).
   Значения = прежние -40% / 30% при средней высоте блока: ~1000px на телефоне, ~650px на компьютере. */
.gh__bg i:nth-child(1){left:-18%;top:-400px;background:radial-gradient(closest-side,var(--glow),transparent);opacity:.8;animation:gh-drift 19s ease-in-out infinite alternate}
.gh__bg i:nth-child(2){right:-25%;top:300px;background:radial-gradient(closest-side,var(--glow2),transparent);animation:gh-drift 23s ease-in-out infinite alternate-reverse}
@media (min-width:944px){.gh__bg i:nth-child(1){top:-260px}.gh__bg i:nth-child(2){top:195px}}
.gh__snow{display:none;position:absolute;inset:0;z-index:1;overflow:hidden;pointer-events:none}
.gh--snow .gh__snow{display:block}
.gh__snow i{position:absolute;left:-12px;right:-12px;bottom:0;background-repeat:repeat;will-change:transform}
.gh__snow i:nth-child(1){top:-240px;background-size:240px 240px;background-image:radial-gradient(circle at 172px 128px,rgba(255,255,255,.79) 2.1px,transparent 3.2px),radial-gradient(circle at 56px 24px,rgba(255,255,255,.75) 1.6px,transparent 2.7px),radial-gradient(circle at 91px 70px,rgba(255,255,255,.74) 1.8px,transparent 2.9px),radial-gradient(circle at 210px 196px,rgba(255,255,255,.6) 1.5px,transparent 2.6px),radial-gradient(circle at 20px 168px,rgba(255,255,255,.7) 2px,transparent 3.1px);animation:gh-snow1 16s linear infinite}
.gh__snow i:nth-child(2){top:-150px;background-size:150px 150px;background-image:radial-gradient(circle at 9px 128px,rgba(255,255,255,.36) .8px,transparent 1.9px),radial-gradient(circle at 92px 64px,rgba(255,255,255,.34) 1.1px,transparent 2.2px),radial-gradient(circle at 31px 106px,rgba(255,255,255,.43) 1.1px,transparent 2.2px),radial-gradient(circle at 128px 18px,rgba(255,255,255,.4) .9px,transparent 2px);animation:gh-snow2 21s linear infinite}
/* Конфетти (день рождения): тот же слой и та же анимация, что у снега, только точки разноцветные и покрупнее */
.gh--confetti .gh__snow{display:block}
.gh--confetti .gh__snow i:nth-child(1){background-image:radial-gradient(circle at 172px 128px,#FFD27A 2.6px,transparent 3.6px),radial-gradient(circle at 56px 24px,#FF6FA5 2.3px,transparent 3.3px),radial-gradient(circle at 91px 70px,#7FD8FF 2.2px,transparent 3.2px),radial-gradient(circle at 210px 196px,#7CF0B5 2.2px,transparent 3.2px),radial-gradient(circle at 20px 168px,#FFD27A 2px,transparent 3px),radial-gradient(circle at 132px 214px,#FF6FA5 1.9px,transparent 2.9px),radial-gradient(circle at 226px 52px,#C9A7FF 2px,transparent 3px)}
.gh--confetti .gh__snow i:nth-child(2){opacity:.6;background-image:radial-gradient(circle at 9px 128px,#FFD27A 1.3px,transparent 2.3px),radial-gradient(circle at 92px 64px,#7FD8FF 1.5px,transparent 2.5px),radial-gradient(circle at 31px 106px,#FF6FA5 1.5px,transparent 2.5px),radial-gradient(circle at 128px 18px,#7CF0B5 1.3px,transparent 2.3px)}

/* ---------- Сетка: телефон — заголовок, сцена, текст; компьютер — две колонки ---------- */
.gh__in{--pad:20px;position:relative;z-index:2;display:grid;grid-template-columns:minmax(0,1fr);grid-template-areas:"head" "stage" "body";padding:26px var(--pad) 30px}
.gh__head{grid-area:head;min-width:0}
.gh__body{grid-area:body;min-width:0;display:flex;flex-direction:column;gap:14px}
.gh__stage{grid-area:stage;position:relative;margin:10px calc(var(--pad)*-1) 4px;aspect-ratio:1/.86;perspective:900px}
@media (min-width:944px){
  .gh__in{--pad:clamp(36px,4vw,56px);grid-template-columns:minmax(0,1.05fr) minmax(0,1fr);grid-template-rows:auto 1fr;grid-template-areas:"head stage" "body stage";column-gap:24px;padding:var(--pad)}
  .gh__head{align-self:end}
  .gh__body{margin-top:18px;align-self:start}
  /* Сцена фиксированной высоты и прижата к верху: когда догружается шрифт и текст слева меняет высоту, сцена не сдвигается */
  .gh__stage{margin:0;aspect-ratio:auto;height:540px;align-self:start;perspective:1100px}
}

/* ---------- Заголовок ---------- */
.gh__eyebrow{display:inline-flex;align-items:center;gap:10px;font:700 12.5px/1.3 var(--font);letter-spacing:.15em;text-transform:uppercase;color:var(--hi)}
.gh__eyebrow svg{width:15px;height:15px;flex:none;fill:currentColor;animation:gh-twinkle 3.2s ease-in-out 1.2s infinite}
.gh__title{margin-top:14px;font:700 clamp(27px,3.6vw,46px)/1.08 var(--display);letter-spacing:-.04em;color:#fff;text-wrap:balance}
.gh__title strong{font-weight:inherit}
.gh__w{display:inline-block;transform-origin:0 100%}
.gh__w--hl{background:linear-gradient(100deg,var(--hl1) 0%,var(--hi) 45%,var(--hl2) 100%);-webkit-background-clip:text;background-clip:text;color:transparent;-webkit-box-decoration-break:clone}

/* ---------- Текст и кнопки ---------- */
.gh__body>p,.gh__lead{font-size:15.5px;line-height:1.6;color:var(--mist);max-width:36.6em}
.gh__body strong{color:#fff}
.gh__body a:not(.btn):not(.gh__ny){color:var(--hi);text-decoration:underline;text-underline-offset:3px;text-decoration-thickness:1px}
.gh__ny{align-self:flex-start;display:inline-flex;align-items:center;gap:10px;margin-top:4px;padding:10px 16px 10px 12px;border-radius:999px;font:700 14px/1.25 var(--font);color:#fff;text-decoration:none;background:linear-gradient(100deg,rgba(242,162,58,.22),rgba(232,49,122,.18));border:1px solid rgba(255,210,122,.45);box-shadow:0 10px 30px -14px rgba(242,162,58,.8);transition:transform .25s var(--ease),border-color .25s}
.gh__ny:hover{transform:translateY(-2px);border-color:#FFD27A}
.gh__ny svg{width:18px;height:18px;flex:none;fill:#FFD27A}
.gh__ny svg:last-child{width:14px;height:14px;fill:none;stroke:#FFD27A;stroke-width:2.4;stroke-linecap:round;stroke-linejoin:round}
.gh .btn-row{margin-top:6px;padding-top:0;gap:12px}
.gh .btn{position:relative;isolation:isolate;overflow:hidden;min-height:56px;flex:1 1 200px;width:auto;margin:0}
.gh .btn--green{background:linear-gradient(180deg,#FFCB66 0%,#F2A23A 100%);color:#3A2203;border:0;box-shadow:0 16px 36px -14px rgba(242,162,58,.9),inset 0 1px 0 rgba(255,255,255,.55)}
.gh .btn--green:hover{transform:translateY(-2px)}
.gh .btn--green::after{content:"";position:absolute;top:-30%;bottom:-30%;left:0;width:38%;z-index:-1;background:linear-gradient(90deg,transparent,rgba(255,255,255,.75),transparent);transform:skewX(-22deg) translateX(-160%);animation:gh-shine 4.4s ease-in-out 2.4s infinite}
.gh .btn--line{background:rgba(255,255,255,.07);border:1px solid rgba(255,255,255,.24);color:#fff}
.gh .btn--line:hover{background:rgba(255,255,255,.14);border-color:rgba(255,255,255,.4)}
.gh .btn svg{color:inherit;fill:currentColor}
.gh .btn:focus-visible,.gh__ny:focus-visible{outline:3px solid var(--hi);outline-offset:3px}

/* ---------- Сцена: сертификат парит, веер карточек, кольцо, печать, искры ---------- */
.gh__glow{position:absolute;left:50%;top:50%;width:78%;aspect-ratio:1;border-radius:50%;translate:-50% -50%;background:radial-gradient(closest-side,var(--glow),transparent 72%);animation:gh-breathe 6s ease-in-out infinite;pointer-events:none}
.gh__ring{position:absolute;left:50%;top:50%;width:84%;aspect-ratio:1;translate:-50% -50%;pointer-events:none;opacity:.55}
.gh__ring svg{width:100%;height:100%;fill:none;stroke:var(--hi);stroke-width:.6;stroke-dasharray:1.2 3.4;animation:gh-spin 60s linear infinite}
.gh__ring svg circle+circle{stroke-dasharray:24 8 2 8;stroke-width:.35;opacity:.7;animation:none}
.gh__tilt{position:absolute;inset:0;display:grid;place-items:center;transform-style:preserve-3d;transform:rotateX(var(--rx,0deg)) rotateY(var(--ry,0deg));transition:transform .6s var(--ease)}
.gh__deck{position:relative;width:min(80%,520px);transform-style:preserve-3d;animation:gh-float 7s ease-in-out 1.6s infinite}
.gh__card{position:relative;border-radius:clamp(12px,1.6vw,18px);overflow:hidden;background:#111;box-shadow:0 30px 60px -22px rgba(0,0,0,.75),0 0 0 1px rgba(255,255,255,.14)}
.gh__card img{width:100%;height:100%;object-fit:cover}
.gh__card--main{z-index:3;transform:rotate(-4deg);animation:gh-card-in 1s var(--spring) .15s backwards}
.gh__card--photo{width:78%;margin-inline:auto}
/* Веер из трёх сертификатов: задние карточки поворачиваются вокруг общей точки под колодой, как карты в руке,
   симметрично на ±16° (и чуть в стороны), и раскрываются из-под главной после её появления. Главная стоит ровно.
   Задние меньше главной (78%) — их рамка с поворотом всё равно меньше главной карточки, поэтому LCP не меняется.
   Ширина колоды подобрана так, чтобы веер помещался в сцену на 360–1440 px. */
.gh__card--back{position:absolute;left:11%;top:5%;width:78%;height:78%;z-index:1;background:#111 center/cover no-repeat;transform-origin:50% 185%;transform:var(--fan);animation:gh-fan 1.1s var(--spring) .7s backwards}
.gh__card--back::after{content:"";position:absolute;inset:0;background:linear-gradient(180deg,rgba(0,0,0,.22),rgba(0,0,0,.5))}
.gh__card--back:nth-child(1){--fan:translateX(-14%) rotate(-16deg)}
.gh__card--back:nth-child(2){--fan:translateX(14%) rotate(16deg)}
.gh__card--back~.gh__card--main{transform:none;animation-name:gh-card-in-fan}
.gh__deck:has(.gh__card--back){width:min(62%,380px)}
.gh__stage:has(.gh__card--back) .gh__seal{top:auto;bottom:8%;right:7%}
/* Вариант gh--vfan: вертикальный веер — главная сверху, две карточки уходят вниз лесенкой и поворачиваются вокруг
   левого края (6° и 12°), как веер образцов. Надписи «Абонемент на N» нижних карточек видны.
   Задние 86% и 78% — с поворотом их рамка меньше главной (LCP). Колода поднята на четверть своей высоты, чтобы
   весь веер стоял по центру сцены. */
.gh--vfan .gh__deck:has(.gh__card--back){width:min(58%,370px);translate:0 -24%}
@media (min-width:944px){.gh--vfan .gh__deck:has(.gh__card--back){width:min(66%,400px)}}
.gh--vfan .gh__card--back{transform-origin:0 50%;animation-name:gh-vfan}
.gh--vfan .gh__card--back::after{background:linear-gradient(180deg,rgba(0,0,0,.3),rgba(0,0,0,.06))}
.gh--vfan .gh__card--back:nth-child(1){left:7%;top:35%;width:86%;height:86%;z-index:2;--fan:rotate(6deg);--fan0:translateY(-41%) rotate(0)}
.gh--vfan .gh__card--back:nth-child(2){left:11%;top:64%;width:78%;height:78%;--fan:rotate(12deg);--fan0:translateY(-82%) rotate(0)}
.gh--vfan .gh__stage:has(.gh__card--back) .gh__seal{top:6%;bottom:auto;right:6%}
.gh__sheen{position:absolute;inset:0;z-index:4;pointer-events:none;background:linear-gradient(115deg,transparent 30%,rgba(255,255,255,.5) 46%,rgba(255,240,200,.18) 52%,transparent 64%);background-size:260% 100%;background-position:120% 0;mix-blend-mode:screen;animation:gh-sheen 5.5s ease-in-out 1.4s infinite}
.gh__seal{position:absolute;z-index:5;right:6%;top:10%;width:clamp(58px,15%,86px);aspect-ratio:1;border-radius:50%;display:grid;place-items:center;background:radial-gradient(circle at 35% 30%,#FFE7A8,#F2A23A 60%,#B86E12);box-shadow:0 12px 28px -8px rgba(0,0,0,.6),inset 0 0 0 3px rgba(255,255,255,.35);animation:gh-seal .9s var(--spring) 1s backwards,gh-bob 4.5s ease-in-out 2s infinite}
.gh__seal svg{width:52%;height:52%;fill:none;stroke:#4A2B04;stroke-width:1.8;stroke-linecap:round;stroke-linejoin:round}
.gh__seal::before{content:"";position:absolute;inset:-7px;border-radius:50%;border:1.5px dashed rgba(255,210,122,.7);animation:gh-spin 14s linear infinite}
.gh__sp{position:absolute;z-index:6;width:14px;height:14px;pointer-events:none;fill:var(--hi);animation:gh-twinkle 2.8s ease-in-out infinite}
.gh__sp:nth-of-type(1){left:9%;top:18%;animation-delay:.4s}
.gh__sp:nth-of-type(2){left:16%;bottom:14%;width:10px;height:10px;animation-delay:1.3s}
.gh__sp:nth-of-type(3){right:12%;bottom:20%;width:18px;height:18px;animation-delay:.9s}
.gh__sp:nth-of-type(4){right:30%;top:6%;width:9px;height:9px;animation-delay:2s}
.gh__sp:nth-of-type(5){left:42%;bottom:4%;width:12px;height:12px;animation-delay:1.7s}

/* Доставка: конверт едет по маршруту к четырём салонам */
.gh__map{position:absolute;inset:4% 2%;display:grid;place-items:center}
.gh__map svg{width:100%;height:100%;overflow:visible}
.gh__road{fill:none;stroke:rgba(255,255,255,.12);stroke-width:10;stroke-linecap:round;stroke-linejoin:round}
.gh__route{fill:none;stroke:var(--hi);stroke-width:2.4;stroke-linecap:round;stroke-dasharray:6 9;stroke-dashoffset:0;animation:gh-dash 1.4s linear infinite}
.gh__pin circle:first-child{fill:var(--hi);opacity:.25;transform-box:fill-box;transform-origin:center;animation:gh-ping 2.4s ease-out infinite}
.gh__pin circle:nth-child(2){fill:#fff}
.gh__pin circle:nth-child(3){fill:var(--hi2)}
.gh__pin:nth-of-type(2) circle:first-child{animation-delay:.6s}
.gh__pin:nth-of-type(3) circle:first-child{animation-delay:1.2s}
.gh__pin:nth-of-type(4) circle:first-child{animation-delay:1.8s}
.gh__env{offset-path:path("M30 250 C 90 170, 150 260, 200 190 S 300 60, 370 80");offset-rotate:0deg;animation:gh-ride 6s var(--ease) .6s infinite}
.gh__env rect{fill:#F7E7C6}
.gh__env path{fill:none;stroke:#B9873A;stroke-width:2;stroke-linejoin:round}
.gh__env .gh__bow{fill:#E8317A;stroke:none}

/* ---------- Основные страницы сайта (gh--site): главная, цены, мастера. Без новогодних деталей ----------
   Вместо снега — тёплые огоньки поднимаются вверх (gh--bokeh, тот же слой и те же ключевые кадры, обратное направление).
   Вместо печати с подарком — значок с фирменными камнями и вращающейся надписью (gh__badge).
   Плашки поверх фото (gh__float) и ценники (gh__tag) — в колоде, поэтому парят и наклоняются вместе с фото.
   Тексты страниц переносятся дословно в свои прежние классы (hero__lead, hero__sub, ph__chips, sub) — здесь им тёмная тема. */
.gh--teal{--bg1:#0B3036;--bg2:#06191D;--bg3:#030E10;--glow:rgba(38,168,168,.45);--glow2:rgba(242,162,58,.16)}
.gh--bokeh .gh__snow{display:block}
.gh--bokeh .gh__snow i{animation-direction:reverse}
.gh--bokeh .gh__snow i:nth-child(1){animation-duration:30s;background-image:radial-gradient(circle at 172px 128px,rgba(255,214,140,.5) 2px,transparent 9px),radial-gradient(circle at 56px 24px,rgba(255,255,255,.32) 1.5px,transparent 7px),radial-gradient(circle at 210px 196px,rgba(255,214,140,.38) 2.5px,transparent 10px),radial-gradient(circle at 20px 168px,rgba(160,240,200,.3) 1.5px,transparent 8px)}
.gh--bokeh .gh__snow i:nth-child(2){animation-duration:40s;opacity:.8;background-image:radial-gradient(circle at 9px 128px,rgba(255,214,140,.42) 1px,transparent 4px),radial-gradient(circle at 92px 64px,rgba(255,255,255,.3) 1px,transparent 4px),radial-gradient(circle at 128px 18px,rgba(160,240,200,.32) 1px,transparent 4px)}

.gh--site .gh__card--main{transform:rotate(-2deg);animation-name:gh-card-in-site}
.gh--site .gh__tilt{z-index:2}
.gh--site .gh__sp{z-index:1} /* искорки — за фото и плашками, не поверх текста */
.gh--site .gh__title{font-size:clamp(28px,3.9vw,50px)}
.gh--home .gh__title{font-size:clamp(36px,5.2vw,66px)}
.gh--home .gh__deck{width:min(92%,580px)}
.gh--price .gh__card--photo{width:86%}
.gh--olga .gh__deck{width:min(58%,330px)}
.gh--olga .gh__card--photo{width:100%}
@media (max-width:943px){
  .gh--home .gh__stage{aspect-ratio:1/.78}
  .gh--olga .gh__stage{aspect-ratio:1/1.02}
}

/* Значок: камни MassageCo в круге, надпись по кругу вращается */
.gh__badge{position:absolute;z-index:5;right:5%;top:6%;width:clamp(84px,20%,118px);aspect-ratio:1;border-radius:50%;display:grid;place-items:center;background:radial-gradient(circle at 35% 30%,rgba(255,255,255,.2),rgba(8,26,18,.86) 70%);border:1px solid rgba(255,210,122,.4);box-shadow:0 18px 40px -16px rgba(0,0,0,.7);animation:gh-seal .9s var(--spring) 1s backwards}
.gh__badge-txt{position:absolute;inset:0;width:100%;height:100%;animation:gh-spin 30s linear infinite}
.gh__badge-txt text{font:700 8.4px var(--font);letter-spacing:.1em;fill:var(--hi)}
.gh__stones{width:50%;height:50%;overflow:visible;animation:gh-bob 4.5s ease-in-out 2s infinite}
.gh__stones ellipse{fill:#5E6E66;stroke:rgba(255,236,190,.45);stroke-width:.8}
.gh__stones ellipse:nth-child(2){fill:#74847C}
.gh__stones ellipse:nth-child(3){fill:#8C9B93}
.gh__leaf{fill:#4CC27F;transform-box:fill-box;transform-origin:0 100%;animation:gh-leaf 3.6s ease-in-out infinite}
.gh--home .gh__badge{right:auto;left:3%;top:2%}
.gh--price .gh__badge{top:auto;bottom:4%;right:3%}
.gh--olga .gh__badge{right:4%;top:auto;bottom:10%}

/* Плашки поверх фото */
.gh__float{position:absolute;z-index:4;display:flex;align-items:center;gap:10px;max-width:250px;padding:11px 15px;border-radius:16px;background:rgba(255,255,255,.95);color:#0E1E17;font:700 14px/1.3 var(--font);box-shadow:0 18px 40px -18px rgba(0,0,0,.7);animation:gh-pop .8s var(--spring) var(--d,1s) backwards,gh-bob 5s ease-in-out calc(var(--d,1s) + 1s) infinite}
.gh__float .ico{flex:none;width:20px;height:20px;color:#1C7A4C}
.gh__float--a{left:-3%;bottom:-12%;--d:1.05s}
.gh__float--b{right:-2%;top:-10%;--d:1.25s}
.gh__tag{position:absolute;z-index:4;display:flex;flex-direction:column;padding:10px 16px 11px;border-radius:16px;background:rgba(255,255,255,.95);color:#0E1E17;box-shadow:0 18px 40px -18px rgba(0,0,0,.7);animation:gh-pop .8s var(--spring) var(--d,1s) backwards,gh-bob 5s ease-in-out calc(var(--d,1s) + 1s) infinite}
.gh__tag b{font:700 clamp(17px,2vw,22px)/1.1 var(--display);letter-spacing:-.03em}
.gh__tag span{font-size:12.5px;color:#52625A}
.gh__tag:nth-of-type(1){left:-7%;top:4%;--d:.95s}
.gh__tag:nth-of-type(2){right:-8%;top:36%;--d:1.15s}
.gh__tag:nth-of-type(3){left:4%;bottom:-11%;--d:1.35s}
.gh__tag:nth-of-type(3) b{color:#1C7A4C}
@media (max-width:600px){
  .gh__float{font-size:12.5px;padding:8px 11px;gap:7px;max-width:240px}
  .gh__float .ico{width:16px;height:16px}
  .gh__tag{padding:7px 11px 8px;border-radius:13px}
  .gh__tag span{font-size:11px}
}

/* «Четыре огонька» — 4 салона с фото в правой колонке первого экрана главной, под фото команды.
   Карточки салонов (настоящие фото с сайта, 320 px, по 5–14 КБ) — ссылки на страницы салонов. Каждые 2,5 с «зажигается»
   следующая: приподнимается, золотая рамка, огонёк в углу, фото проясняется; остальные притемнены. Только CSS.
   Наведение — пауза и подсветка карточки под курсором; «уменьшить движение» — все карточки светлые и неподвижные.
   Компьютер: ряд из 4 под сценой (сцена главной ниже — 420 px, чтобы ряд не уходил под кнопку чата); телефон: сетка 2×2 под кнопками. */
.gh__salons{grid-area:salons;margin-top:22px;animation:gh-in .8s var(--ease) .9s backwards}
.gh__salons-h{display:flex;align-items:center;justify-content:space-between;gap:12px;margin-bottom:12px}
.gh__salons-t{font:700 11.5px/1.3 var(--font);letter-spacing:.13em;text-transform:uppercase;color:var(--hi)}
.gh__lights{display:flex;gap:7px}
.gh__lights i{width:8px;height:8px;border-radius:50%;background:#5E7E6C;animation:gh-salon-dot 10s linear calc(var(--n)*2.5s) infinite}
.gh__tiles{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:10px;margin:0;padding:0;list-style:none}
.gh__tile{position:relative;animation:gh-tile 10s var(--ease) calc(var(--n)*2.5s) infinite}
.gh__tile a{position:relative;display:block;aspect-ratio:4/3.2;border-radius:14px;overflow:hidden;color:#fff;text-decoration:none;background:#0C2E20;box-shadow:0 16px 30px -18px rgba(0,0,0,.9),0 0 0 1px rgba(255,255,255,.14)}
.gh__tile img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;animation:lead-kb 14s ease-in-out calc(var(--n)*-3s) infinite alternate}
.gh__tile a::before{content:"";position:absolute;inset:0;z-index:1;background:linear-gradient(180deg,transparent 38%,rgba(4,15,10,.88))}
.gh__tile a::after{content:"";position:absolute;inset:0;z-index:2;background:rgba(4,15,10,.42);animation:gh-tile-dim 10s var(--ease) calc(var(--n)*2.5s) infinite}
.gh__tile b{position:absolute;z-index:3;left:10px;right:8px;bottom:8px;display:flex;flex-direction:column;font:700 13px/1.25 var(--font);white-space:nowrap}
.gh__tile b,.gh__tile b span{overflow:hidden;text-overflow:ellipsis}
.gh__tile b span{font-size:11.5px;font-weight:600;color:var(--hi)}
.gh__frame{position:absolute;inset:0;z-index:4;border-radius:inherit;box-shadow:inset 0 0 0 2px #FFD27A,0 0 26px -4px rgba(255,210,122,.75);opacity:0;animation:gh-tile-on 10s var(--ease) calc(var(--n)*2.5s) infinite}
.gh__spot{position:absolute;z-index:4;left:9px;top:9px;width:10px;height:10px;border-radius:50%;background:#FFD27A;box-shadow:0 0 12px 3px rgba(255,210,122,.8);opacity:0;animation:gh-tile-on 10s var(--ease) calc(var(--n)*2.5s) infinite}
.gh__spot::after{content:"";position:absolute;inset:-6px;border-radius:50%;border:1.5px solid #FFD27A;opacity:0;animation:gh-salon-ping 10s ease-out calc(var(--n)*2.5s) infinite}
.gh__tiles:hover *,.gh__tiles:hover *::after,.gh__tiles:hover *::before,.gh__salons:hover .gh__lights i{animation-play-state:paused!important}
.gh__tile a:hover::after,.gh__tile a:focus-visible::after{opacity:0!important}
.gh__tile a:hover .gh__frame,.gh__tile a:focus-visible .gh__frame{opacity:1!important}
.gh__tile a:focus-visible{outline:3px solid var(--hi);outline-offset:3px}
@media (min-width:944px){
  /* ряд салонов — сразу под сценой (третья строка тянется, ряд прижат к её верху), а не у низа длинной левой колонки */
  .gh--home .gh__in{grid-template-rows:auto auto 1fr;grid-template-areas:"head stage" "body stage" "body salons"}
  .gh--home .gh__stage{height:420px}
  .gh--home .gh__salons{align-self:start;margin-top:14px}
}
@media (max-width:943px){.gh--home .gh__in{grid-template-areas:"head" "stage" "body" "salons"}}
/* узкая колонка (компьютер 944–1199 px) и телефон — 2×2, иначе «Кечкеметская, 27» не помещается */
@media (max-width:1199px){
  .gh__tiles{grid-template-columns:repeat(2,minmax(0,1fr))}
  .gh__tile a{aspect-ratio:4/2.7}
  .gh__tile b{font-size:13.5px}
}
@media (prefers-reduced-motion:reduce){
  .gh__tile a::after{opacity:0}
}

/* Общие модификаторы основных страниц (с 21.10 вечером: отзывы, услуги, парный, массажисты, контакты, спина, лечебный,
   антицеллюлитный, Анна, Евгений, Виктория). gh--wide — широкое фото 1400×600, gh--portrait — вертикальное 3:4. */
.gh--wide .gh__deck{width:min(92%,580px)}
.gh--wide .gh__badge{right:auto;left:3%;top:2%}
.gh--portrait .gh__deck{width:min(58%,330px)}
.gh--portrait .gh__card--photo{width:100%}
.gh--portrait .gh__badge{right:4%;top:auto;bottom:10%}
@media (max-width:943px){
  .gh--wide .gh__stage{aspect-ratio:1/.72}
  .gh--portrait .gh__stage{aspect-ratio:1/1.02}
}

/* Страница отзывов (gh--reviews): фото сдвинуто влево, справа на него наезжают ДВЕ карточки-отзыва одновременно —
   «полки» сверху и снизу, у каждой по 3 настоящих отзыва (дословно, inc/reviews.php: 2ГИС о салонах, YCLIENTS о мастерах).
   Карточка влетает с разворотом (rotateY) и пружинкой, звёзды загораются по одной, по ней пробегает золотой блик,
   появляется кавычка; через 3,5 с улетает вверх с поворотом. Нижняя полка сдвинута на полпериода — карточки меняются
   по очереди. Полки слегка парят (свойство translate, не мешает transform карточек). Только CSS. */
.gh--reviews .gh__deck{margin-right:30%}
.gh--reviews .gh__badge{left:3%;top:4%;right:auto;bottom:auto}
.gh__revs{position:absolute;z-index:6;width:min(56%,290px);height:156px;perspective:800px;animation:gh-bob 5.5s ease-in-out infinite}
.gh__revs--a{right:1%;top:7%}
.gh__revs--b{right:7%;bottom:4%;animation-delay:-2.7s}
.gh__rev{position:absolute;inset:0;margin:0;display:flex;flex-direction:column;gap:7px;padding:14px 16px;border-radius:18px;overflow:hidden;background:#fff;color:#0E1E17;box-shadow:0 26px 54px -20px rgba(0,0,0,.85),0 0 0 1px rgba(255,210,122,.35);opacity:0;transform-origin:20% 50%;
  animation:gh-rev 10.5s var(--ease) calc(var(--off,0s) + .9s + var(--n,0)*3.5s) infinite}
.gh__rev::before{content:"";position:absolute;top:-20%;bottom:-20%;left:0;width:40%;background:linear-gradient(90deg,transparent,rgba(255,214,140,.55),transparent);transform:skewX(-20deg) translateX(-200%);animation:gh-rev-shine 10.5s ease-out calc(var(--off,0s) + 1.25s + var(--n,0)*3.5s) infinite;pointer-events:none}
.gh__rev::after{content:"\201C";position:absolute;right:12px;bottom:-26px;font:700 96px/1 Georgia,serif;color:rgba(242,162,58,.18);animation:gh-rev-q 10.5s var(--spring) calc(var(--off,0s) + 1.15s + var(--n,0)*3.5s) infinite}
.gh__rev-h{position:relative;z-index:1;display:flex;align-items:center;justify-content:space-between;gap:8px}
.gh__rev-h .stars svg{width:15px;height:15px;animation:gh-rev-star 10.5s var(--spring) calc(var(--off,0s) + 1.1s + var(--n,0)*3.5s + var(--k,0)*.09s) infinite}
.gh__rev-h .stars svg:nth-child(2){--k:1}.gh__rev-h .stars svg:nth-child(3){--k:2}.gh__rev-h .stars svg:nth-child(4){--k:3}.gh__rev-h .stars svg:nth-child(5){--k:4}
.gh__rev-src{display:inline-flex;align-items:center;gap:5px;padding:3px 8px;border-radius:999px;background:#F1F5F2;font:700 11.5px/1.2 var(--font);color:#52625A;white-space:nowrap}
.gh__rev-src img{width:14px;height:14px;border-radius:50%}
.gh__rev blockquote{position:relative;z-index:1;margin:0;font:500 13.5px/1.45 var(--font);display:-webkit-box;-webkit-line-clamp:4;-webkit-box-orient:vertical;overflow:hidden}
.gh__rev figcaption{position:relative;z-index:1;margin-top:auto;font:700 13px/1.2 var(--font)}
@keyframes gh-rev{0%{opacity:0;transform:rotateY(-80deg) translateX(-24px) scale(.86)}5%{opacity:1;transform:rotateY(10deg) scale(1.03)}8%{transform:rotateY(0) scale(1)}29%{opacity:1;transform:none}33.3%,100%{opacity:0;transform:translate(36px,-22px) rotate(8deg) scale(.9)}}
@keyframes gh-rev-shine{0%{transform:skewX(-20deg) translateX(-200%)}7%,100%{transform:skewX(-20deg) translateX(360%)}}
@keyframes gh-rev-star{0%{scale:0;rotate:-90deg}3%{scale:1.45;rotate:0deg}5%,100%{scale:1;rotate:0deg}}
@keyframes gh-rev-q{0%{scale:.2;opacity:0}5%,100%{scale:1;opacity:1}}
@media (max-width:943px){
  .gh--reviews .gh__deck{margin-right:34%}
  .gh__revs{width:64%;height:150px}
  .gh__revs--a{top:3%}
  .gh__revs--b{bottom:2%;right:4%}
  .gh__rev{padding:11px 13px;gap:5px}
  .gh__rev blockquote{font-size:12.5px;-webkit-line-clamp:4}
}
/* Компьютер: сцена тянется на всю высоту текста слева, фото наверху, вокруг — 4 «полки» одновременно (c и d — только тут) */
.gh__revs--c,.gh__revs--d{display:none}
@media (min-width:944px){
  .gh--reviews .gh__stage{height:auto;min-height:640px;align-self:stretch}
  .gh--reviews .gh__tilt{align-items:start;padding-top:26px}
  .gh__revs--c,.gh__revs--d{display:block}
  .gh__revs--a{top:2%;right:0}
  .gh__revs--b{top:37%;right:0;bottom:auto}
  .gh__revs--c{left:0;bottom:9%;animation-delay:-1.3s}
  .gh__revs--d{right:0;bottom:0;animation-delay:-4s}
  .gh--reviews .gh__revs{height:178px}
  .gh--reviews .gh__revs--c,.gh--reviews .gh__revs--d{height:200px;width:min(49%,290px)}
  .gh--reviews .gh__rev blockquote{-webkit-line-clamp:6}  /* отзывы с Карт до 165 знаков — целиком */
}
@media (prefers-reduced-motion:reduce){.gh__rev:first-child{opacity:1}}

/* «Орбита процедур» (страница услуг, первый экран без фото): золотой медальон «18 процедур», вокруг по двум кольцам
   плывут названия видов массажа; плашки остаются ровными (обратное вращение вокруг своего центра — свойство rotate,
   центр — свойство translate, чтобы поворот не сдвигал плашку с орбиты). Радиусы — от размера сцены (cqmin). */
.gh__orbit{position:absolute;inset:0;display:grid;place-items:center;container-type:size;--r1:200px;--r2:122px}
@supports (width:1cqmin){.gh__orbit{--r1:41cqmin;--r2:25.5cqmin}}
/* телефон: одно кольцо из 6 процедур и медальон поменьше — два кольца на 390 px налезают друг на друга и на медальон */
@media (max-width:600px){
  .gh__orbit{--r1:115px}  /* самая длинная плашка «Лимфодренажный» ≈130 px: 115 + 65 < половины карточки (187 px) */
  .gh__orb--2{display:none}
  .gh__orbit .gh__core{width:88px}
  .gh__orbit .gh__core b{font-size:32px}
  .gh__orbit .gh__core span{font-size:10.5px}
  .gh__orbit .gh__core small{font-size:10.5px}
}
@media (max-width:943px){.gh--orbit .gh__stage{aspect-ratio:1/1}}
@media (max-width:380px){.gh .gh__orbit{--r1:106px}.gh .gh__orbit .gh__orb i{font-size:10.5px;padding:5px 9px}.gh__orbit .gh__core{width:80px}.gh__orbit .gh__core b{font-size:28px}.gh__orbit .gh__core span,.gh__orbit .gh__core small{font-size:9.5px}}
.gh__core{position:relative;z-index:3;width:130px;width:clamp(108px,23cqmin,148px);aspect-ratio:1;border-radius:50%;display:grid;place-content:center;justify-items:center;text-align:center;background:radial-gradient(circle at 35% 30%,#FFE7A8,#F2A23A 60%,#B86E12);color:#3A2203;box-shadow:0 22px 50px -14px rgba(0,0,0,.75),inset 0 0 0 4px rgba(255,255,255,.35);animation:gh-seal .9s var(--spring) .35s backwards,gh-bob 5s ease-in-out 1.5s infinite}
.gh__core b{font:700 48px/1 var(--display);font-size:clamp(38px,11cqmin,62px);letter-spacing:-.05em}
.gh__core span{margin-top:2px;font:700 12px/1.2 var(--font);letter-spacing:.14em;text-transform:uppercase}
.gh__core small{margin-top:4px;font:700 12px/1.2 var(--font);opacity:.75}
.gh__orb{position:absolute;inset:0;animation:gh-spin 70s linear infinite}
.gh__orb--2{animation-duration:52s;animation-direction:reverse}
.gh__orb>span{position:absolute;left:50%;top:50%;width:0;height:0;transform:rotate(var(--a)) translateY(calc(var(--r1) * -1)) rotate(calc(var(--a) * -1))}
.gh__orb--2>span{transform:rotate(var(--a)) translateY(calc(var(--r2) * -1)) rotate(calc(var(--a) * -1))}
.gh__orb i{position:absolute;left:0;top:0;translate:-50% -50%;padding:8px 13px;border-radius:999px;white-space:nowrap;font:700 13px/1 var(--font);font-style:normal;background:rgba(255,255,255,.95);color:#0E1E17;box-shadow:0 14px 30px -14px rgba(0,0,0,.8);animation:gh-spin 70s linear infinite reverse,gh-pop .7s var(--spring) var(--d,.8s) backwards}
.gh__orb--2 i{background:rgba(255,255,255,.1);color:#fff;border:1px solid rgba(255,255,255,.25);animation-duration:52s,.7s;animation-direction:normal,normal}
@media (max-width:600px){.gh__orbit .gh__orb i{padding:6px 10px;font-size:11.5px}}

/* Тексты основных страниц на тёмном фоне */
.gh .hero__badge{align-self:flex-start;display:inline-flex;align-items:center;gap:10px;padding:7px 14px 7px 7px;border-radius:999px;background:rgba(255,255,255,.08);border:1px solid rgba(255,255,255,.18);color:#fff;font-size:14px;text-decoration:none;animation:gh-in .7s var(--ease) backwards}
.gh .hero__badge:hover{background:rgba(255,255,255,.14)}
.gh .hero__badge-ico{display:flex}
.gh .hero__badge-ico img{width:26px;height:26px;border-radius:50%;border:2px solid #fff;background:#fff;object-fit:contain;padding:2px}
.gh .hero__badge-ico img+img{margin-left:-8px}
.gh .hero__badge .stars svg{animation:gh-star 3.2s ease-in-out infinite}
.gh .hero__badge .stars svg:nth-child(2){animation-delay:.15s}.gh .hero__badge .stars svg:nth-child(3){animation-delay:.3s}.gh .hero__badge .stars svg:nth-child(4){animation-delay:.45s}.gh .hero__badge .stars svg:nth-child(5){animation-delay:.6s}
.gh--home .gh__title{margin-top:18px}
.gh .hero__lead{font-size:clamp(15.5px,1.25vw,17.5px);font-weight:600;line-height:1.6;color:#fff;max-width:36.6em}
.gh .hero__sub{font-size:14.5px;line-height:1.6;color:var(--mist);max-width:36.6em}
.gh .hero__btns{display:flex;flex-wrap:wrap;gap:12px;margin-top:6px}
.gh .btn--ghost{background:transparent;border:0;color:var(--hi);min-height:44px;flex:1 1 100%;justify-content:flex-start;padding-inline:4px}
.gh .btn--ghost:hover{color:#fff}
.gh .sub{font-size:13px;color:var(--mist);opacity:.8}
.gh .ph__h2{font:600 clamp(17px,1.6vw,21px)/1.3 var(--display);letter-spacing:-.02em;color:#fff;margin:0}
.gh .gh__lead p+p{margin-top:10px}
.gh__body>ul:not(.ph__chips){display:grid;gap:6px;margin:0;padding:0;list-style:none;font-size:15px;color:var(--mist)}
.gh__body>ul:not(.ph__chips) li{position:relative;padding-left:18px}
.gh__body>ul:not(.ph__chips) li::before{content:"";position:absolute;left:2px;top:.62em;width:6px;height:6px;border-radius:50%;background:var(--hi)}
.gh .ph__note{font-size:14px;line-height:1.6;color:var(--mist)}
.gh .gh__body a.chip-link{display:inline-flex;padding:4px 11px;border-radius:999px;background:rgba(255,255,255,.12);color:#fff;text-decoration:none;font-weight:700}
.gh .ph__chips{display:flex;flex-wrap:wrap;gap:8px;margin:0;padding:0;list-style:none}
.gh .ph__chips li{display:flex;flex-direction:column;padding:10px 16px;border-radius:14px;background:rgba(255,255,255,.07);border:1px solid rgba(255,255,255,.16);animation:gh-pop .7s var(--spring) calc(.6s + var(--k,0)*.12s) backwards}
.gh .ph__chips li:nth-child(2){--k:1}.gh .ph__chips li:nth-child(3){--k:2}
.gh .ph__chips b{font:600 18px/1.15 var(--display);letter-spacing:-.02em;color:#fff}
.gh .ph__chips span{font-size:12.5px;color:var(--mist)}

/* ---------- Блок записи на главной (lead--motion): тот же стиль, что у первого экрана ----------
   Блок ниже первого экрана: вступление запускается, когда app.js ставит .is-vis (блок доехал до экрана).
   Переливы и огоньки — слой lead__fx позади текста; фото «дышит», по нему проходит блик; заголовок — по словам;
   галочки выпрыгивают по очереди; телефон иногда «звонит»; по краю формы бежит световая линия.
   Вне экрана — пауза (is-off ставит gh.js). Тексты и ссылки — прежние. */
.lead--motion{--hl1:#FFE3A0;--hi:#FFD27A;--hl2:#F2A23A;position:relative;isolation:isolate}
.lead--motion>:not(.lead__fx){position:relative;z-index:1}
.lead__fx{position:absolute;inset:0;z-index:0;overflow:hidden;pointer-events:none}
.lead__fx i{position:absolute;width:70%;aspect-ratio:1;border-radius:50%;will-change:transform}
.lead__fx i:nth-child(1){left:-25%;bottom:-45%;background:radial-gradient(closest-side,rgba(28,122,76,.75),transparent);animation:gh-drift 17s ease-in-out infinite alternate}
.lead__fx i:nth-child(2){left:15%;bottom:-20%;width:45%;background:radial-gradient(closest-side,rgba(242,162,58,.2),transparent);animation:gh-drift 21s ease-in-out infinite alternate-reverse}
.lead__fx b{position:absolute;left:-12px;right:-12px;top:-240px;bottom:0;background-size:240px 240px;background-image:radial-gradient(circle at 172px 128px,rgba(255,214,140,.45) 2px,transparent 9px),radial-gradient(circle at 56px 24px,rgba(255,255,255,.28) 1.5px,transparent 7px),radial-gradient(circle at 210px 196px,rgba(255,214,140,.32) 2.5px,transparent 10px),radial-gradient(circle at 20px 168px,rgba(160,240,200,.26) 1.5px,transparent 8px);will-change:transform;animation:gh-snow1 32s linear infinite reverse}
.lead--motion .lead__ph{overflow:hidden}
.lead--motion .lead__ph img{animation:lead-kb 18s ease-in-out infinite alternate}
.lead__sheen{position:absolute;inset:0;overflow:hidden;pointer-events:none}
.lead__sheen::after{content:"";position:absolute;top:-20%;bottom:-20%;left:0;width:35%;background:linear-gradient(90deg,transparent,rgba(255,255,255,.28),transparent);transform:skewX(-20deg) translateX(-180%);animation:lead-sheen 7s ease-in-out 2s infinite}
.lead--motion .lead__live{z-index:2}
.lead--motion .lead__tel .ico{transform-origin:50% 60%;animation:lead-ring 4.5s ease-in-out 3s infinite}
.lead--motion .yaform::before{content:"";position:absolute;z-index:3;left:0;top:0;width:3px;height:34%;pointer-events:none;background:linear-gradient(180deg,transparent,#F2A23A,#FFD27A,transparent);animation:lead-beam 6s ease-in-out 1s infinite}
@media (max-width:1024px){
  /* Блоки идут столбиком (фото, текст, форма): переливы — на уровне текста, а не за формой внизу */
  .lead__fx i{width:110%}
  .lead__fx i:nth-child(1){bottom:auto;top:12%}
  .lead__fx i:nth-child(2){bottom:auto;top:28%;width:80%}
  .lead--motion .yaform::before{width:34%;height:3px;background:linear-gradient(90deg,transparent,#F2A23A,#FFD27A,transparent);animation-name:lead-beam-x}
}
/* Вступление, когда блок появился на экране */
.lead--motion.is-vis .lead__title .gh__w{animation:gh-h1 .85s var(--ease,cubic-bezier(.2,.75,.15,1)) calc(.25s + var(--i,0)*.06s) backwards}
.lead--motion.is-vis .lead__live{animation:gh-pop .8s cubic-bezier(.34,1.56,.64,1) .5s backwards}
.lead--motion.is-vis .lead__checks .ico{animation:gh-pop .7s cubic-bezier(.34,1.56,.64,1) calc(.7s + var(--i,0)*.12s) backwards}
.lead--motion.is-off *,.lead--motion.is-off *::before,.lead--motion.is-off *::after{animation-play-state:paused!important}
@media (prefers-reduced-motion:reduce){
  .lead--motion *,.lead--motion *::before,.lead--motion *::after{animation:none!important}
}

/* ---------- Блок мастеров на главной (msgrid--motion), версия 3 — карточки парят ----------
   По просьбе владельца: все карточки всегда в полном цвете, без притушивания и подсветки по кругу. Вместо этого
   карточки постоянно и спокойно парят: поднимаются на 10 px, «дышат» размером (до +2,5 %) и чуть покачиваются;
   у каждой свой темп (6,2–8,9 с) и свой наклон — получается живая волна, а не синхронное движение.
   Изредка по фото проходит блик. Вступление (app.js ставит .is-vis): карточки «раздаются» с разлётом и поворотом,
   фото открывается шторкой, плашка отзывов выпрыгивает, звезда делает оборот, число отзывов считается от нуля.
   Фон: плывущие пятна света и мерцающие искорки (msgrid__fx в конце сетки — nth-child карточек не сбивается).
   Свойства translate/scale/rotate отдельно — не спорят с наклоном за мышью (app.js пишет transform). Вне экрана — пауза. */
.msgrid--motion{position:relative;isolation:isolate}
.msgrid--motion>.ms{position:relative;box-shadow:0 22px 44px -30px rgba(14,30,23,.45)}
.msgrid--motion>.ms:nth-child(even){--r:-.5deg}
.msgrid__fx{position:absolute;inset:-80px 0;z-index:-1;pointer-events:none;overflow:hidden}  /* по бокам не шире сетки — иначе страница шире экрана (iPhone даёт сдвинуть вбок) */
.msgrid__fx i{position:absolute;width:48%;aspect-ratio:1;border-radius:50%;will-change:transform}
.msgrid__fx i:nth-of-type(1){left:-10%;top:-14%;background:radial-gradient(closest-side,rgba(28,122,76,.24),transparent);animation:gh-drift 16s ease-in-out infinite alternate}
.msgrid__fx i:nth-of-type(2){right:-12%;top:18%;background:radial-gradient(closest-side,rgba(242,162,58,.26),transparent);animation:gh-drift 20s ease-in-out infinite alternate-reverse}
.msgrid__fx i:nth-of-type(3){left:28%;bottom:-24%;background:radial-gradient(closest-side,rgba(28,122,76,.18),transparent);animation:gh-drift 24s ease-in-out infinite alternate}
.msgrid__fx svg{position:absolute;width:16px;height:16px;fill:#F2A23A;animation:gh-twinkle 3s ease-in-out infinite}
.msgrid__fx svg:nth-of-type(1){left:6%;top:4%;animation-delay:.3s}
.msgrid__fx svg:nth-of-type(2){right:5%;top:9%;width:22px;height:22px;animation-delay:1.1s}
.msgrid__fx svg:nth-of-type(3){left:3%;top:52%;width:12px;height:12px;animation-delay:1.9s}
.msgrid__fx svg:nth-of-type(4){right:3%;bottom:18%;width:18px;height:18px;animation-delay:.7s}
.msgrid__fx svg:nth-of-type(5){left:48%;top:2%;width:12px;height:12px;animation-delay:2.4s}
.msgrid__fx svg:nth-of-type(6){left:20%;bottom:4%;width:20px;height:20px;fill:#1C7A4C;animation-delay:1.5s}
.msgrid--motion .ms__ph::after{content:"";position:absolute;top:-10%;bottom:-10%;left:0;width:40%;z-index:2;background:linear-gradient(90deg,transparent,rgba(255,255,255,.45),transparent);transform:skewX(-18deg) translateX(-240%);pointer-events:none}
.msgrid--motion .ms__rate{z-index:3}
.msgrid--motion.is-vis>.ms{animation:ms-deal 1s cubic-bezier(.34,1.56,.64,1) calc(var(--n,0)*.1s) backwards,
  ms-float calc(6.2s + var(--n,0)*.45s) ease-in-out calc(1.2s + var(--n,0)*.1s) infinite}
.msgrid--motion.is-vis .ms__ph img{animation:ms-reveal 1.1s cubic-bezier(.2,.75,.15,1) calc(.15s + var(--n,0)*.1s) backwards}
.msgrid--motion.is-vis .ms__ph::after{animation:ms-sheen 9s ease-out calc(2.5s + var(--n,0)*1.3s) infinite}
.msgrid--motion.is-vis .ms__rate{animation:gh-pop .8s cubic-bezier(.34,1.56,.64,1) calc(.55s + var(--n,0)*.1s) backwards}
.msgrid--motion.is-vis .ms__rate svg{animation:ms-star 1s cubic-bezier(.34,1.56,.64,1) calc(.7s + var(--n,0)*.1s) backwards}
.msgrid--motion.is-off,.msgrid--motion.is-off *,.msgrid--motion.is-off *::before,.msgrid--motion.is-off *::after{animation-play-state:paused!important}
@keyframes ms-deal{from{opacity:0;translate:0 90px;rotate:calc(var(--n,0)*2deg - 7deg);scale:.88}to{opacity:1;translate:0 0;rotate:0deg;scale:1}}
@keyframes ms-float{0%,100%{translate:0 0;scale:1;rotate:0deg}50%{translate:0 -10px;scale:1.025;rotate:var(--r,.5deg)}}
@keyframes ms-reveal{from{clip-path:inset(100% 0 0 0);scale:1.3}to{clip-path:inset(0 0 0 0);scale:1}}
@keyframes ms-star{from{rotate:-180deg;scale:.3}to{rotate:0deg;scale:1}}
@keyframes ms-sheen{0%{transform:skewX(-18deg) translateX(-240%)}10%,100%{transform:skewX(-18deg) translateX(340%)}}
@media (prefers-reduced-motion:reduce){
  .msgrid--motion *,.msgrid--motion>.ms,.msgrid--motion .ms__ph::after{animation:none!important}
  .msgrid__fx{display:none}
}

/* ---------- Вступление ---------- */
.gh__eyebrow{animation:gh-in .7s var(--ease) backwards}
.gh__title .gh__w{animation:gh-h1 .85s var(--ease) calc(.04s + var(--i,0)*.06s) backwards}
.gh__body>*{animation:gh-in .8s var(--ease) calc(.35s + var(--j,0)*.08s) backwards}
.gh__body>:nth-child(2){--j:1}.gh__body>:nth-child(3){--j:2}.gh__body>:nth-child(4){--j:3}.gh__body>:nth-child(5){--j:4}.gh__body>:nth-child(6){--j:5}

@keyframes gh-in{from{opacity:.3;transform:translateY(14px)}to{opacity:1;transform:none}}
@keyframes gh-h1{from{opacity:.25;transform:translateY(.32em) rotate(4deg);filter:blur(9px)}to{opacity:1;transform:none;filter:blur(0)}}
@keyframes gh-card-in{from{opacity:.35;transform:translateY(16%) rotateX(28deg) rotate(4deg) scale(.86)}to{opacity:1;transform:rotate(-4deg)}}
@keyframes gh-card-in-fan{from{opacity:.35;transform:translateY(16%) rotateX(28deg) scale(.86)}to{opacity:1;transform:none}}
@keyframes gh-fan{from{transform:translateX(0) rotate(0)}to{transform:var(--fan)}}
@keyframes gh-vfan{from{transform:var(--fan0)}to{transform:var(--fan)}}
@keyframes gh-card-in-site{from{opacity:.35;transform:translateY(12%) rotateX(22deg) rotate(3deg) scale(.9)}to{opacity:1;transform:rotate(-2deg)}}
@keyframes gh-pop{from{opacity:.3;transform:translateY(12px) scale(.7)}to{opacity:1;transform:none}}
@keyframes gh-leaf{0%,100%{rotate:-8deg}50%{rotate:10deg}}
@keyframes gh-star{0%,70%,100%{transform:none}80%{transform:scale(1.35) rotate(18deg)}}
@keyframes gh-salon-dot{0%{background:#FFD27A;transform:scale(1.5);box-shadow:0 0 12px 2px rgba(255,210,122,.7)}22%{background:#FFD27A;transform:scale(1.5);box-shadow:0 0 12px 2px rgba(255,210,122,.7)}28%,100%{background:#5E7E6C;transform:none;box-shadow:none}}
@keyframes gh-tile{0%{transform:none}5%,21%{transform:translateY(-8px) scale(1.04)}28%,100%{transform:none}}
@keyframes gh-tile-on{0%{opacity:0}5%,21%{opacity:1}28%,100%{opacity:0}}
@keyframes gh-tile-dim{0%{opacity:1}5%,21%{opacity:0}28%,100%{opacity:1}}
@keyframes gh-salon-ping{0%{opacity:.9;transform:scale(.6)}20%,100%{opacity:0;transform:scale(2.2)}}
@keyframes lead-kb{from{transform:scale(1)}to{transform:scale(1.07) translate(-1.5%,-1%)}}
@keyframes lead-sheen{0%,60%{transform:skewX(-20deg) translateX(-180%)}100%{transform:skewX(-20deg) translateX(420%)}}
@keyframes lead-ring{0%,82%,100%{transform:none}85%{transform:rotate(-16deg)}88%{transform:rotate(14deg)}91%{transform:rotate(-10deg)}94%{transform:rotate(6deg)}}
@keyframes lead-beam{0%{transform:translateY(-100%);opacity:0}15%{opacity:1}85%{opacity:1}100%{transform:translateY(300%);opacity:0}}
@keyframes lead-beam-x{0%{transform:translateX(-100%);opacity:0}15%{opacity:1}85%{opacity:1}100%{transform:translateX(300%);opacity:0}}
@keyframes gh-float{0%,100%{transform:translateY(0) rotate(0)}50%{transform:translateY(-10px) rotate(.8deg)}}
@keyframes gh-sheen{0%,55%{background-position:120% 0}100%{background-position:-60% 0}}
@keyframes gh-seal{from{opacity:0;transform:scale(.3) rotate(-90deg)}to{opacity:1;transform:none}}
@keyframes gh-bob{0%,100%{translate:0 0}50%{translate:0 -6px}}
@keyframes gh-twinkle{0%,100%{opacity:.35;transform:scale(.7) rotate(0)}50%{opacity:1;transform:scale(1.15) rotate(45deg)}}
@keyframes gh-breathe{0%,100%{opacity:.75;scale:1}50%{opacity:1;scale:1.08}}
@keyframes gh-spin{to{rotate:360deg}}
@keyframes gh-drift{from{transform:translate(0,0)}to{transform:translate(8%,10%)}}
@keyframes gh-shine{0%,62%{transform:skewX(-22deg) translateX(-160%)}100%{transform:skewX(-22deg) translateX(330%)}}
@keyframes gh-snow1{0%{transform:translate(0,0)}25%{transform:translate(9px,60px)}50%{transform:translate(0,120px)}75%{transform:translate(-9px,180px)}100%{transform:translate(0,240px)}}
@keyframes gh-snow2{0%{transform:translate(0,0)}25%{transform:translate(-5px,37.5px)}50%{transform:translate(0,75px)}75%{transform:translate(5px,112.5px)}100%{transform:translate(0,150px)}}
@keyframes gh-dash{to{stroke-dashoffset:-30}}
@keyframes gh-ping{0%{transform:scale(.6);opacity:.55}100%{transform:scale(2.4);opacity:0}}
@keyframes gh-ride{0%{offset-distance:0%;opacity:0}8%{opacity:1}80%{offset-distance:100%;opacity:1}92%,100%{offset-distance:100%;opacity:0}}

/* Блок вне экрана — анимации на паузе (класс ставит gh.js) */
.gh.is-off *,.gh.is-off *::before,.gh.is-off *::after{animation-play-state:paused!important}

@media (prefers-reduced-motion:reduce){
  .gh *,.gh *::before,.gh *::after{animation:none!important;transition:none!important}
  .gh__tilt{transform:none}
}