/* Эффекты поверх style.css. Все «скрывающие» правила действуют только при включённых анимациях и JS. */

/* ---------- всегда ---------- */
.top { transition: transform .45s cubic-bezier(.2,.7,.2,1), background .3s, border-color .3s; }
.top.hide { transform: translateY(-100%); }

.nav a { position: relative; padding: 6px 0; }
.nav a::after { content: ""; position: absolute; left: 0; bottom: 0; height: 1px; width: 100%; background: var(--brass); transform: scaleX(0); transform-origin: right; transition: transform .5s cubic-bezier(.2,.7,.2,1); }
.nav a:hover::after { transform: scaleX(1); transform-origin: left; }

.btn { position: relative; overflow: hidden; isolation: isolate; }
.btn:not(.btn--ghost)::before { content: ""; position: absolute; inset: 0; z-index: -1; background: linear-gradient(110deg, transparent 30%, rgba(255,255,255,.35) 50%, transparent 70%); transform: translateX(-120%); transition: transform .8s cubic-bezier(.2,.7,.2,1); }
.btn:not(.btn--ghost):hover::before { transform: translateX(120%); }

.progress { position: fixed; top: 0; left: 0; right: 0; height: 2px; z-index: 60; background: var(--brass); transform: scaleX(0); transform-origin: left; pointer-events: none; }
.grain { position: fixed; inset: 0; z-index: 55; pointer-events: none; opacity: .07; mix-blend-mode: overlay; background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='220' height='220'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.85' numOctaves='2' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E"); }

[data-parallax] { transform: translate3d(var(--mx0, 0px), var(--py, 0px), 0) scale(var(--sc, 1)); will-change: transform; }
.hero__bg { top: -12%; height: 124%; inset-inline: 0; filter: brightness(.35); transition: filter 2.2s ease; --sc: 1.06; }
body.ready .hero__bg { filter: brightness(1); }
.hero__glow { position: absolute; inset: 0; pointer-events: none; background: radial-gradient(520px circle at var(--gx, 72%) var(--gy, 42%), rgba(214, 160, 84, .22), transparent 65%); mix-blend-mode: screen; opacity: 0; transition: opacity 1.6s ease .6s; }
body.ready .hero__glow { opacity: 1; }

/* hover-эффекты */
.cols3 article { position: relative; transition: background .4s; }
.cols3 article::before { content: ""; position: absolute; top: -1px; left: 0; height: 1px; width: 0; background: var(--brass); transition: width .9s cubic-bezier(.2,.7,.2,1); }
.cols3 article:hover::before { width: 100%; }
.cols3 article:hover .num { letter-spacing: .5em; }
.num { transition: letter-spacing .6s cubic-bezier(.2,.7,.2,1); }
.cols3 h3 { transition: color .3s, transform .5s cubic-bezier(.2,.7,.2,1); }
.cols3 article:hover h3 { color: var(--brass); transform: translateX(6px); }

.list li { transition: padding-left .4s cubic-bezier(.2,.7,.2,1), color .3s; }
.list li::before { transition: width .4s cubic-bezier(.2,.7,.2,1); }
.list li:hover { padding-left: 46px; color: #fff; }
.list li:hover::before { width: 30px; }

.pi { position: relative; overflow: hidden; }
.pi::before { content: ""; position: absolute; inset: 0; pointer-events: none; opacity: 0; transition: opacity .35s; background: radial-gradient(380px circle at var(--x, 50%) var(--y, 50%), rgba(193, 154, 91, .16), transparent 62%); }
.pi:hover::before, .pi.on::before { opacity: 1; }
.pi > * { position: relative; }
.pi h3 { transition: transform .5s cubic-bezier(.2,.7,.2,1), color .3s; }
.pi:hover h3, .pi.on h3 { transform: translateX(10px); color: var(--brass); }
.pi__price b { transition: color .3s; }
.pi:hover .pi__price b { color: var(--brass); }

.procpic { transform: perspective(900px) rotateX(var(--rx, 0deg)) rotateY(var(--ry, 0deg)); transition: transform .5s cubic-bezier(.2,.7,.2,1); will-change: transform; }
.procpic::after { content: ""; position: absolute; inset: 0; pointer-events: none; background: radial-gradient(420px circle at var(--sx, 50%) var(--sy, 30%), rgba(255, 238, 205, .16), transparent 60%); }
.procpic img { transform: scale(1.04); transition: opacity .35s, transform 1.2s cubic-bezier(.2,.7,.2,1); }

.about__pic .imgwrap { position: relative; z-index: 1; overflow: hidden; aspect-ratio: 4 / 4.4; }
.about__pic .imgwrap img { aspect-ratio: auto; height: 100%; width: 100%; }
.way__pic img { height: 100%; }
.way__pic:hover img, .about__pic:hover img { filter: saturate(1.08) contrast(1.03); }
.way__pic img, .about__pic img { transition: filter .6s; }

.rev blockquote::before { transition: transform .5s cubic-bezier(.2,.7,.2,1); }
.rev:hover blockquote::before { transform: translateY(-6px) scale(1.15); }
.cl a { transition: color .3s, text-decoration-color .3s; }
.cl a:hover { text-decoration-color: var(--brass); }
.cl dd:has(a[data-tel]) { font: 400 clamp(26px, 3vw, 38px)/1.2 var(--serif); }

.form label { position: relative; }
.form label::after { content: ""; position: absolute; left: 0; right: 0; bottom: 0; height: 1px; background: var(--brass); transform: scaleX(0); transform-origin: left; transition: transform .55s cubic-bezier(.2,.7,.2,1); }
.form label:focus-within::after { transform: scaleX(1); }
.form label:focus-within { color: var(--brass); }

.wa::after { content: ""; position: absolute; inset: 0; border-radius: 50%; border: 1px solid var(--brass); animation: pulse 2.6s ease-out infinite; pointer-events: none; }
@keyframes pulse { 0% { transform: scale(1); opacity: .7; } 100% { transform: scale(1.7); opacity: 0; } }

.quote p .qw { opacity: .2; transition: opacity .5s; }
.quote p .qw.lit { opacity: 1; }
.quote img { height: 120%; top: -10%; inset-inline: 0; --sc: 1.05; }

/* ---------- прелоадер ---------- */
.preloader { position: fixed; inset: 0; z-index: 100; background: var(--bg); display: none; place-items: center; }
.js .preloader { display: grid; transition: transform 1s cubic-bezier(.8,0,.2,1) .1s; }
.preloader.done { transform: translateY(-100%); }
.preloader__in { text-align: center; }
.pl-name { display: block; font: 400 clamp(22px, 4vw, 40px) var(--serif); letter-spacing: .32em; text-transform: uppercase; opacity: 0; animation: plname 1.1s ease .2s forwards; }
.pl-line { display: block; height: 1px; margin: 22px auto 0; background: var(--brass); width: 0; animation: plline 1.2s cubic-bezier(.7,0,.2,1) .3s forwards; }
@keyframes plname { to { opacity: 1; letter-spacing: .4em; } }
@keyframes plline { to { width: min(260px, 60vw); } }
.preloader.done .pl-name { opacity: 0; transition: opacity .4s; animation: none; }

/* ---------- анимации появления (только если разрешены) ---------- */
@media (prefers-reduced-motion: no-preference) {
  .js .hero h1 .wm { display: inline-block; overflow: hidden; vertical-align: top; padding-bottom: .14em; margin-bottom: -.14em; }
  .js .hero h1 .wm > span { display: inline-block; transform: translateY(112%) rotate(4deg); transform-origin: left bottom; transition: transform 1.1s cubic-bezier(.2,.7,.1,1) calc(var(--i) * 60ms + 80ms); }
  .js body.ready .hero h1 .wm > span { transform: none; }
  .js .hero__in > :not(h1) { opacity: 0; transform: translateY(22px); transition: opacity 1s ease, transform 1s cubic-bezier(.2,.7,.2,1); }
  .js body.ready .hero__in > .eyebrow { opacity: 1; transform: none; transition-delay: .15s; }
  .js body.ready .hero__in > .lead { opacity: 1; transform: none; transition-delay: .4s; }
  .js body.ready .hero__in > .hero__cta { opacity: 1; transform: none; transition-delay: .55s; }
  .js .facts { transform: translateY(100%); opacity: 0; transition: transform .9s cubic-bezier(.2,.7,.2,1) .7s, opacity .9s ease .7s; }
  .js body.ready .facts { transform: none; opacity: 1; }
  .js .top { transform: translateY(-100%); }
  .js body.ready .top { transform: none; transition-delay: .1s; }
  .js body.ready .top.hide { transform: translateY(-100%); transition-delay: 0s; }

  .js [data-reveal] { opacity: 0; transform: translateY(34px); transition: opacity .9s cubic-bezier(.2,.7,.2,1) calc(var(--d, 0) * 100ms), transform .9s cubic-bezier(.2,.7,.2,1) calc(var(--d, 0) * 100ms); }
  .js [data-reveal].in { opacity: 1; transform: none; }
  .js .eyebrow[data-reveal]::before { width: 0; transition: width 1s cubic-bezier(.2,.7,.2,1) .4s; }
  .js .eyebrow[data-reveal].in::before { width: 34px; }

  .js .wipe { clip-path: inset(0 0 100% 0); transition: clip-path 1.3s cubic-bezier(.7,0,.2,1); }
  .js .wipe.in { clip-path: inset(0 0 0 0); }
}

@media (max-width: 960px) {
  }
@media (prefers-reduced-motion: reduce) {
  .wa::after { animation: none; }
  .preloader { display: none !important; }
  .grain { display: none; }
}