/* ===== Эффекты карточек ===== */
.fx { position: relative; isolation: isolate; --mx: 50%; --my: 50%; --rx: 0deg; --ry: 0deg; }

/* ===== Заставка загрузки: при первом открытии сайта за сеанс (класс is-loading ставит theme-init.js) ===== */
.loader { display: none; }
html.is-loading .loader {
  position: fixed; inset: 0; z-index: 9999; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 28px;
  background: radial-gradient(700px 420px at 50% 55%, rgba(168, 57, 74, .32), transparent 70%), #350d13;
  transition: opacity .7s, visibility .7s;
  animation: loader-failsafe 0s linear 4s forwards;  /* если скрипт не сработал — через 4 с заставка скроется сама */
}
html.is-loading .loader.done { opacity: 0; visibility: hidden; pointer-events: none; }
.loader__logo { width: 230px; height: auto; opacity: 0; transform: translateY(8px); animation: loader-logo .7s cubic-bezier(.2, .8, .2, 1) .05s forwards; }
.loader__bar { width: 180px; height: 2px; border-radius: 2px; overflow: hidden; background: rgba(255, 255, 255, .12); }
.loader__fill { width: 0; height: 100%; border-radius: 2px; background: linear-gradient(90deg, #8d6633, #f6e2b3 60%, #d2ad6f); box-shadow: 0 0 10px rgba(246, 226, 179, .6);
  animation: load-fill 1s cubic-bezier(.4, 0, .2, 1) forwards; }
@keyframes load-fill { to { width: 100%; } }
@keyframes loader-logo { to { opacity: 1; transform: none; } }
@keyframes loader-failsafe { to { opacity: 0; visibility: hidden; pointer-events: none; } }

/* Въезд первого экрана главной сразу после заставки */
html.hero-intro .h-hero__title, html.hero-intro .h-hero__sub, html.hero-intro .h-hero__btn, html.hero-intro .h-hero__content, html.hero-intro .marquee--hero {
  animation: hero-up .9s cubic-bezier(.2, .8, .2, 1) both;
}
html.hero-intro .h-hero__title { animation-delay: 1.15s; }
html.hero-intro .h-hero__sub { animation-delay: 1.3s; }
html.hero-intro .h-hero__btn { animation-delay: 1.45s; }
html.hero-intro .h-hero__content { animation-delay: 1.6s; }
html.hero-intro .marquee--hero { animation-name: hero-fade; animation-delay: 1.5s; }
@keyframes hero-up { from { opacity: 0; transform: translateY(36px); } to { opacity: 1; transform: none; } }
@keyframes hero-fade { from { opacity: 0; } to { opacity: 1; } }

/* 3D-наклон */
.fx--tilt {
  transform: perspective(1000px) rotateX(var(--ry)) rotateY(var(--rx)) translateY(0);
  transform-style: preserve-3d;
  transition: transform .5s cubic-bezier(.2, .8, .2, 1), box-shadow .4s, opacity .7s, translate .7s;
  will-change: transform;
}
.fx--tilt.is-hover {
  transform: perspective(1000px) rotateX(var(--ry)) rotateY(var(--rx)) translateY(-6px);
  transition: transform .12s linear, box-shadow .4s, opacity .7s, translate .7s;
  box-shadow: 0 30px 60px -28px rgba(0, 0, 0, .9), 0 0 0 1px rgba(201, 164, 106, .3), 0 0 40px -10px rgba(168, 57, 74, .45) !important;
}

/* Пятно света за курсором */
.fx::before {
  content: ''; position: absolute; inset: 0; border-radius: inherit; pointer-events: none; z-index: -1;
  background: radial-gradient(420px circle at var(--mx) var(--my), rgba(246, 226, 179, .13), transparent 45%);
  opacity: 0; transition: opacity .4s;
}
.fx.is-hover::before { opacity: 1; }

/* Золотая обводка, разгорающаяся у курсора */
.fx::after {
  content: ''; position: absolute; inset: 0; border-radius: inherit; pointer-events: none; z-index: 2; padding: 1.5px;
  background: radial-gradient(260px circle at var(--mx) var(--my), rgba(246, 226, 179, .9), rgba(201, 164, 106, .35) 40%, transparent 70%);
  -webkit-mask: linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0);
  -webkit-mask-composite: xor; mask-composite: exclude;
  opacity: 0; transition: opacity .4s;
}
.fx.is-hover::after { opacity: 1; }

/* Иконки «выступают» вперёд */
.fx--tilt.is-hover .h-trust__icon, .fx--tilt.is-hover .h-step__icon, .fx--tilt.is-hover .h-promo__item > .ico,
.fx--tilt.is-hover .flag, .fx--tilt.is-hover .h-dir__icon--ico, .fx--tilt.is-hover .step__ico, .fx--tilt.is-hover .trust__item > .ico {
  transform: translateZ(40px) translateY(-4px) scale(1.06);
  box-shadow: inset 0 0 0 1px rgba(246, 226, 179, .6), 0 14px 30px -10px rgba(201, 164, 106, .45);
}
.h-trust__icon, .h-step__icon, .h-promo__item > .ico, .flag, .h-dir__icon--ico, .step__ico, .trust__item > .ico { transition: transform .4s cubic-bezier(.2, .8, .2, 1), box-shadow .4s; }
.fx--tilt.is-hover .h-dir__title .ico { transform: translate(3px, -3px); }
.h-dir__title .ico { transition: transform .3s; }

/* Блик на фото */
.h-car__img, .card__img, .row__gallery { position: relative; overflow: hidden; }
.h-car__img::after, .card__img::after, .row__gallery::after {
  content: ''; position: absolute; inset: 0; pointer-events: none; z-index: 2;
  background: linear-gradient(115deg, transparent 30%, rgba(255, 240, 210, .28) 48%, transparent 62%);
  transform: translateX(-120%); transition: transform 0s;
}
.fx.is-hover .h-car__img::after, .fx.is-hover .card__img::after, .row.is-hover .row__gallery::after { transform: translateX(120%); transition: transform .9s cubic-bezier(.2, .8, .2, 1); }
.fx.is-hover .h-car__img img, .fx.is-hover .card__img img { transform: scale(1.07); }

/* Цена «светится» */
.fx.is-hover .h-car__price, .fx.is-hover .card__foot b, .row.is-hover .row__price > b { text-shadow: 0 0 18px rgba(201, 164, 106, .55); }
.h-car__price, .card__foot b, .row__price > b { transition: text-shadow .4s; }

/* Кнопки внутри карточек */
.fx.is-hover .icon-btn--gold { transform: translateX(3px); box-shadow: 0 8px 20px -8px rgba(201, 164, 106, .8); }

/* Появление при прокрутке */
.fx-ready .reveal { opacity: 0; translate: 0 28px; }
.fx-ready .reveal.is-in { opacity: 1; translate: 0 0; transition: opacity .7s ease var(--d, 0ms), translate .7s cubic-bezier(.2, .8, .2, 1) var(--d, 0ms); }

/* Старые hover-сдвиги заменены наклоном */
.fx--tilt:hover { transform: perspective(1000px) rotateX(var(--ry)) rotateY(var(--rx)) translateY(-6px); }

@media (hover: none), (prefers-reduced-motion: reduce) {
  .fx--tilt, .fx--tilt:hover, .fx--tilt.is-hover { transform: none; }
  .fx::before, .fx::after { display: none; }
}
@media (prefers-reduced-motion: reduce) {
  .fx-ready .reveal { opacity: 1; translate: none; }
}

/* место под подъём карточек в слайдерах */
.slider { padding-top: 14px; margin-top: -14px; }
