/* Анимированный декор: золотые волны и искры (из айдентики «10 години»), бейдж, reveal.
   Только transform / opacity / stroke-dashoffset. Всё выключается при prefers-reduced-motion. */
:root { --ease-out: cubic-bezier(.16, 1, .3, 1); }

/* ---- Контейнеры декора ---- */
.hero, .section--slate, .promo { position: relative; isolation: isolate; overflow: hidden; }
.decor { position: absolute; inset: 0; z-index: -1; pointer-events: none; }

/* ---- Золотые волны ---- */
.waves { position: absolute; left: -10%; width: 120%; bottom: -6%; height: 70%; opacity: .55; }
.waves path { fill: none; stroke: url(#gold-line); stroke-width: 1.2; vector-effect: non-scaling-stroke; }
.waves g { animation: wave-drift 18s ease-in-out infinite alternate; }
.waves g:nth-child(2) { animation-duration: 24s; animation-delay: -6s; opacity: .7; }
.waves g:nth-child(3) { animation-duration: 30s; animation-delay: -12s; opacity: .45; }
.waves .shimmer { stroke-dasharray: 120 880; animation: shimmer 7s linear infinite; stroke-width: 2; opacity: .9; }
@keyframes wave-drift { from { transform: translate3d(-3%, 0, 0); } to { transform: translate3d(3%, -4%, 0); } }
@keyframes shimmer { from { stroke-dashoffset: 1000; } to { stroke-dashoffset: 0; } }

/* ---- Искры ---- */
.sparkle { position: absolute; width: var(--s, 4px); height: var(--s, 4px); border-radius: 50%;
  background: radial-gradient(circle, #F7E095 0 35%, rgb(230 196 111 / 0) 70%);
  opacity: 0; animation: twinkle var(--d, 5s) ease-in-out var(--delay, 0s) infinite; }
.sparkle--star { background: none; width: var(--s, 10px); height: var(--s, 10px); }
.sparkle--star::before, .sparkle--star::after { content: ""; position: absolute; inset: 45% 0; background: #F2D98A; border-radius: 2px; }
.sparkle--star::after { inset: 0 45%; }
@keyframes twinkle {
  0%, 100% { opacity: 0; transform: translateY(0) scale(.4) rotate(0deg); }
  45% { opacity: .95; transform: translateY(-14px) scale(1) rotate(45deg); }
  70% { opacity: .5; }
}

/* ---- Фото Hero ---- */
.hero__img { position: relative; }

/* ---- Вращающийся бейдж ---- */
.seal { position: absolute; z-index: 2; width: 132px; height: 132px; left: -28px; bottom: -28px; display: grid; place-items: center;
  background: var(--c-night); border-radius: 50%; box-shadow: 0 10px 30px rgb(0 0 0 / .35); }
.seal svg { position: absolute; inset: 0; width: 100%; height: 100%; animation: spin 26s linear infinite; }
.seal text { font: 600 10.5px var(--f-body); letter-spacing: .32em; fill: var(--c-gold); text-transform: uppercase; }
.seal b { font: 400 34px/1 var(--f-display); color: #F7E095; }
@keyframes spin { to { transform: rotate(360deg); } }
@media (max-width: 899px) { .seal { width: 104px; height: 104px; left: auto; right: 12px; bottom: -22px; } .seal b { font-size: 26px; } .seal text { font-size: 9.5px; } }
.hero__img-wrap { position: relative; }

/* ---- Reveal при скролле ---- */
.js [data-reveal] { opacity: 0; transform: translate3d(0, 28px, 0); transition: opacity .9s var(--ease-out), transform .9s var(--ease-out); transition-delay: var(--rd, 0s); }
.js [data-reveal].is-in { opacity: 1; transform: none; }
.eyebrow { position: relative; padding-left: 44px; }
.eyebrow::before { content: ""; position: absolute; left: 0; top: 50%; width: 32px; height: 1.5px; background: linear-gradient(90deg, var(--c-gold-logo, #B08942), #F7E095);
  transform-origin: left; transform: scaleX(1); transition: transform 1.1s var(--ease-out) .2s; }
.js [data-reveal]:not(.is-in) .eyebrow::before, .js .eyebrow[data-reveal]:not(.is-in)::before { transform: scaleX(0); }
.why__item { border-top: 0; position: relative; }
.why__item::before { content: ""; position: absolute; left: 0; right: 0; top: 0; height: 2px; background: linear-gradient(90deg, #B08942, #F7E095, #B08942);
  transform-origin: left; transition: transform 1.2s var(--ease-out) var(--rd, 0s); }
.js .why__item[data-reveal]:not(.is-in)::before { transform: scaleX(0); }

/* ---- Ховеры: прорисовка иконки, блик по фото ---- */
.problem svg path, .problem svg circle { stroke-dasharray: 80; stroke-dashoffset: 0; }
.problem:hover svg path, .problem:hover svg circle { animation: draw 1s var(--ease-out); }
@keyframes draw { from { stroke-dashoffset: 80; } to { stroke-dashoffset: 0; } }
.problem { position: relative; overflow: hidden; }
.problem::after { content: ""; position: absolute; inset: auto 0 0 0; height: 3px; background: linear-gradient(90deg, #B08942, #F7E095); transform: scaleX(0); transform-origin: left; transition: transform .5s var(--ease-out); }
.problem:hover::after { transform: scaleX(1); }
.card__img { position: relative; }
.card__img::after { content: ""; position: absolute; inset: 0; background: linear-gradient(110deg, transparent 35%, rgb(255 246 214 / .45) 50%, transparent 65%); transform: translateX(-120%); }
.card:hover .card__img::after { transform: translateX(120%); transition: transform 1s var(--ease-out); }
.btn--primary { position: relative; overflow: hidden; }

/* ---- Уменьшенное движение ---- */
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { animation: none !important; transition: none !important; }
  .js [data-reveal] { opacity: 1; transform: none; }
  .sparkle { opacity: .6; }
}

/* ======== Нижняя половина страницы ======== */
/* Заголовки секций выезжают из-под маски */
.js .section-head[data-reveal] h2 { clip-path: inset(0 0 100% 0); transform: translateY(24px); transition: clip-path 1.1s var(--ease-out) .1s, transform 1.1s var(--ease-out) .1s; }
.js .section-head[data-reveal].is-in h2 { clip-path: inset(0 0 -10% 0); transform: none; }

/* Цены: строки въезжают по очереди, золотая полоска слева на hover */
.price-row { position: relative; transition: background .3s; }
.price-row::before { content: ""; position: absolute; left: 0; top: 14px; bottom: 14px; width: 3px; border-radius: 3px; background: linear-gradient(180deg, #B08942, #F7E095); transform: scaleY(0); transition: transform .45s var(--ease-out); }
.price-row:hover { background: color-mix(in srgb, var(--c-sand) 55%, transparent); }
.price-row:hover::before { transform: scaleY(1); }
.js .price-list[data-reveal] .price-row { opacity: 0; transform: translateX(-24px); transition: opacity .7s var(--ease-out), transform .7s var(--ease-out); }
.js .price-list[data-reveal].is-in .price-row { opacity: 1; transform: none; }
.price-list .price-row:nth-child(2) { transition-delay: .08s; } .price-list .price-row:nth-child(3) { transition-delay: .16s; }
.price-list .price-row:nth-child(4) { transition-delay: .24s; } .price-list .price-row:nth-child(5) { transition-delay: .32s; }
.package { transition: transform .5s var(--ease-out), box-shadow .5s; } .package:hover { transform: translateY(-6px); box-shadow: var(--shadow); }

/* Команда: портрет раскрывается снизу, hover — приближение и золотая линия под именем */
.member { position: relative; }
.member img { transition: transform .9s var(--ease-out), clip-path 1.2s var(--ease-out); }
.member > :first-child { overflow: hidden; border-radius: var(--r-card); }
.js .member[data-reveal] img { clip-path: inset(100% 0 0 0 round 12px); }
.js .member[data-reveal].is-in img { clip-path: inset(0 0 0 0 round 12px); }
.member:hover img { transform: scale(1.04); }
.member strong { position: relative; display: inline-block; }
.member strong::after { content: ""; position: absolute; left: 0; bottom: -4px; height: 1.5px; width: 100%; background: linear-gradient(90deg, #B08942, #F7E095); transform: scaleX(0); transform-origin: left; transition: transform .5s var(--ease-out); }
.member:hover strong::after { transform: scaleX(1); }

/* Отзывы: звёзды загораются по одной, кавычки влетают, лёгкий подъём на hover */
.review { transition: transform .5s var(--ease-out), box-shadow .5s, opacity .9s var(--ease-out); }
.review:hover { transform: translateY(-6px); box-shadow: var(--shadow); }
.stars .st { display: inline-block; }
.js [data-reveal] .stars .st { opacity: .15; transform: scale(.4) rotate(-40deg); transition: opacity .4s, transform .6s cubic-bezier(.34, 1.56, .64, 1); transition-delay: calc(.35s + var(--i) * .12s); }
.js [data-reveal].is-in .stars .st { opacity: 1; transform: none; }
.js .review[data-reveal]::before { transform: translateY(-14px) scale(.6); opacity: 0; transition: transform .9s var(--ease-out) .2s, opacity .6s .2s; }
.js .review[data-reveal].is-in::before { transform: none; opacity: 1; }

/* Промо: вращающаяся золотая рамка */
@property --spin { syntax: "<angle>"; inherits: false; initial-value: 0deg; }
.promo::before { content: ""; position: absolute; inset: 0; border-radius: inherit; padding: 1.5px; z-index: 0; pointer-events: none;
  background: conic-gradient(from var(--spin), transparent 0 55%, #B08942 70%, #F7E095 80%, #B08942 90%, transparent);
  -webkit-mask: linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0); -webkit-mask-composite: xor; mask-composite: exclude;
  animation: spin-border 7s linear infinite; }
@keyframes spin-border { to { --spin: 360deg; } }
.promo > :not(.decor):not(.grid-dots) { position: relative; z-index: 1; }

/* FAQ: открытый вопрос — золотая метка, ответ выезжает */
.faq summary { transition: color .3s, padding-left .4s var(--ease-out); }
.faq summary:hover { color: var(--c-gold-deep); }
.faq details[open] summary { color: var(--c-gold-deep); padding-left: 16px; }
.faq summary::before { content: ""; position: absolute; left: 0; top: 22px; bottom: 22px; width: 3px; border-radius: 3px; background: linear-gradient(180deg, #B08942, #F7E095); transform: scaleY(0); transition: transform .4s var(--ease-out); }
.faq details[open] summary::before { transform: scaleY(1); }
.faq details[open] > div { animation: faq-open .6s var(--ease-out); }
@keyframes faq-open { from { opacity: 0; transform: translateY(-8px); } to { opacity: 1; transform: none; } }

/* Контакты: иконки прорисовываются, маркер на карте пульсирует */
.js .contact > div[data-reveal] .contact__list svg * { stroke-dasharray: 70; stroke-dashoffset: 70; transition: stroke-dashoffset 1.4s var(--ease-out) .3s; }
.js .contact > div[data-reveal].is-in .contact__list svg * { stroke-dashoffset: 0; }
.map { position: relative; overflow: hidden; }
.pin { position: relative; width: 22px; height: 22px; margin: 0 auto 16px; border-radius: 50% 50% 50% 0; transform: rotate(-45deg); background: linear-gradient(135deg, #F7E095, #B08942); animation: pin-bob 2.4s ease-in-out infinite; }
.pin::after { content: ""; position: absolute; inset: 7px; border-radius: 50%; background: var(--c-night); }
.pin-wrap { position: relative; display: grid; place-items: center; width: 120px; height: 70px; margin: 0 auto; }
.pin-wrap i { position: absolute; bottom: 10px; width: 24px; height: 10px; border-radius: 50%; border: 1.5px solid #C9A55A; opacity: 0; animation: ripple 2.4s ease-out infinite; }
.pin-wrap i:nth-of-type(2) { animation-delay: .8s; } .pin-wrap i:nth-of-type(3) { animation-delay: 1.6s; }
@keyframes pin-bob { 50% { transform: rotate(-45deg) translate(4px, -4px); } }
@keyframes ripple { from { opacity: .9; transform: scale(.4); } to { opacity: 0; transform: scale(4); } }

/* Футер: искры */
.footer { position: relative; isolation: isolate; overflow: hidden; }

@media (prefers-reduced-motion: reduce) {
  .js .section-head[data-reveal] h2, .js .member[data-reveal] img { clip-path: none; transform: none; }
  .js [data-reveal] .stars .st, .js .price-list[data-reveal] .price-row, .js .review[data-reveal]::before { opacity: 1; transform: none; }
  .js .contact > div[data-reveal] .contact__list svg * { stroke-dashoffset: 0; }
}
.member strong + span { display: block; margin-top: 6px; }

.js .glass[data-reveal].is-in { transition: opacity .9s var(--ease-out), transform .5s var(--ease-out), border-color .4s, background .4s; transition-delay: 0s; }

/* hover-подъём сильнее правила появления (.js [data-reveal].is-in { transform: none }) */
.js .glass[data-reveal].is-in:hover { transform: translateY(-8px); }
.js .review[data-reveal].is-in:hover, .js .package[data-reveal].is-in:hover { transform: translateY(-6px); }
@media (prefers-reduced-motion: reduce) { .js .glass[data-reveal].is-in:hover, .js .review[data-reveal].is-in:hover, .js .package[data-reveal].is-in:hover { transform: none; } }

/* ---- Декор бежевых секций: точечный растр (D) + шёлковый свет (F) — выбор владельца ---- */
.section--sand { position: relative; isolation: isolate; overflow: hidden; }
.sand-decor { position: absolute; inset: 0; z-index: -1; pointer-events: none; overflow: hidden; }
.sand-decor .dots { position: absolute; inset: 0; background-image: radial-gradient(rgb(176 137 66 / .45) 1.2px, transparent 1.5px); background-size: 26px 26px;
  -webkit-mask-image: radial-gradient(ellipse 60% 75% at 88% 15%, #000 0%, transparent 70%); mask-image: radial-gradient(ellipse 60% 75% at 88% 15%, #000 0%, transparent 70%); }
.sand-decor--alt .dots { -webkit-mask-image: radial-gradient(ellipse 60% 75% at 10% 88%, #000 0%, transparent 70%); mask-image: radial-gradient(ellipse 60% 75% at 10% 88%, #000 0%, transparent 70%); }
.sand-decor .silk span { position: absolute; border-radius: 50%; filter: blur(50px); opacity: .9; }
.sand-decor .silk .s1 { width: 60vw; height: 40vw; left: -10vw; top: -10vw; background: radial-gradient(closest-side, rgb(255 250 238 / .95), rgb(255 250 238 / 0)); animation: silk-a 18s ease-in-out infinite alternate; }
.sand-decor .silk .s2 { width: 50vw; height: 36vw; right: -12vw; bottom: -14vw; background: radial-gradient(closest-side, rgb(230 196 111 / .5), rgb(230 196 111 / 0)); animation: silk-b 22s ease-in-out infinite alternate; }
@keyframes silk-a { to { transform: translate3d(18vw, 8vw, 0) scale(1.15); } }
@keyframes silk-b { to { transform: translate3d(-16vw, -10vw, 0) scale(1.2); } }
:root[data-theme="dark"] .sand-decor .dots { background-image: radial-gradient(rgb(230 196 111 / .22) 1.2px, transparent 1.5px); }
:root[data-theme="dark"] .sand-decor .silk .s1 { background: radial-gradient(closest-side, rgb(201 165 90 / .14), transparent); }
:root[data-theme="dark"] .sand-decor .silk .s2 { background: radial-gradient(closest-side, rgb(201 165 90 / .12), transparent); }
@media (prefers-reduced-motion: reduce) { .sand-decor .silk span { animation: none; } }