/* =========================================================
   REDESIGN.CSS — bold modern homepage layer
   Поверх main/sections/components. Editorial Luxury,
   кинематографичная анимация. Загружать ПОСЛЕДНИМ.
   Острые грани сохранены (бренд = клинки).
   ========================================================= */

:root {
  --ease-spring: cubic-bezier(0.16, 1, 0.3, 1);
  --ease-soft:   cubic-bezier(0.22, 1, 0.36, 1);
  --ease-power:  cubic-bezier(0.65, 0, 0.35, 1);
}

/* скрываем нативный скролл-джамп: Lenis рулит */
html.lenis, html.lenis body { height: auto; }
.lenis.lenis-smooth { scroll-behavior: auto !important; }
.lenis.lenis-stopped { overflow: hidden; }

/* во время прелоадера блокируем прокрутку */
body.is-loading { overflow: hidden; height: 100vh; }

/* =========================================================
   0. CUSTOM CURSOR (desktop fine-pointer only)
========================================================= */
@media (hover: hover) and (pointer: fine) {
  body.has-cursor, body.has-cursor * { cursor: none !important; }

  .cursor-blade {
    position: fixed;
    top: 0; left: 0;
    width: 23px;
    pointer-events: none;
    z-index: 10000;
    /* origin = остриё клинка (см. SVG), вокруг него вращаем */
    transform-origin: 11.5px 1.15px;
    will-change: transform;
    filter: drop-shadow(0 1px 2px rgba(0,0,0,0.5));
    transition: filter .3s var(--ease-soft);
  }
  .cursor-blade svg { display: block; width: 100%; height: auto; transition: transform .12s var(--ease-soft); }
  .cursor-blade.is-stab svg { transform: translateY(4px) scale(0.9); }

  /* мягкое «оживление» клинка при наведении на интерактив */
  body.cursor-hover .cursor-blade {
    filter: drop-shadow(0 0 7px rgba(201,168,76,0.7)) drop-shadow(0 2px 4px rgba(0,0,0,0.5));
  }

  /* пульсирующий блик на лезвии */
  .cursor-blade .blade-glint {
    opacity: 0;
    animation: glint 3.4s ease-in-out infinite;
  }
  @keyframes glint { 0%,82%,100%{opacity:0} 88%{opacity:0.9} 94%{opacity:0} }

  @media (prefers-reduced-motion: reduce) {
    .cursor-blade .blade-glint { animation: none; }
  }
}

/* =========================================================
   1. PRELOADER — занавес + бренд + счётчик 0→100
========================================================= */
.preloader {
  position: fixed;
  inset: 0;
  z-index: 10001;
  background: var(--bg);
  display: flex;
  align-items: center;
  justify-content: center;
  flex-direction: column;
  gap: 2rem;
}
.preloader__brand {
  font-family: var(--font-serif);
  font-size: clamp(2rem, 6vw, 4.5rem);
  letter-spacing: 0.06em;
  color: var(--text);
  overflow: hidden;
  display: flex;
  gap: 0.04em;
}
.preloader__brand span {
  display: inline-block;
  transform: translateY(110%);
}
.preloader__brand .pl-gold { color: var(--gold); }
.preloader__bar {
  width: min(280px, 60vw);
  height: 1px;
  background: var(--border);
  position: relative;
  overflow: hidden;
}
.preloader__bar i {
  position: absolute;
  inset: 0;
  background: linear-gradient(90deg, var(--gold-dark), var(--gold), var(--gold-light));
  transform: scaleX(0);
  transform-origin: left;
}
.preloader__pct {
  font-family: var(--font-sans);
  font-size: 0.7rem;
  letter-spacing: 0.3em;
  color: var(--text-muted);
}
.preloader.is-done { pointer-events: none; }

/* =========================================================
   2. FILM-GRAIN + SCROLL PROGRESS
========================================================= */
.fx-grain {
  position: fixed; inset: 0;
  z-index: 9998; pointer-events: none;
  opacity: 0.04; mix-blend-mode: overlay;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='160' height='160'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.8' numOctaves='3' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E");
}
@media (prefers-reduced-motion: no-preference) {
  .fx-grain { animation: grain 7s steps(6) infinite; }
}
@keyframes grain {
  0%,100%{transform:translate(0,0)} 20%{transform:translate(-3%,2%)}
  40%{transform:translate(3%,-2%)} 60%{transform:translate(-2%,3%)} 80%{transform:translate(3%,-1%)}
}
.fx-progress {
  position: fixed; top: 0; left: 0;
  height: 2px; width: 100%;
  transform: scaleX(var(--p,0)); transform-origin: left;
  background: linear-gradient(90deg, var(--gold-dark), var(--gold), var(--gold-light));
  z-index: 1001; pointer-events: none;
}

/* =========================================================
   3. NAV — плавающая стеклянная капсула
========================================================= */
@media (min-width: 1025px) {
  .navbar {
    top: 1.1rem !important;
    left: 50% !important; right: auto !important;
    transform: translateX(-50%);
    width: min(1240px, calc(100% - 3rem));
    border-radius: 100px;
    padding: 0.85rem 0.7rem 0.85rem 2rem !important;
    border: 1px solid rgba(255,255,255,0.07);
    background: rgba(13,13,13,0.5);
    backdrop-filter: blur(20px) saturate(150%);
    -webkit-backdrop-filter: blur(20px) saturate(150%);
    box-shadow: inset 0 1px 0 rgba(255,255,255,0.06), 0 24px 60px -30px #000;
    transition: transform .7s var(--ease-spring), width .7s var(--ease-spring),
                background .5s var(--ease-soft), box-shadow .5s var(--ease-soft), opacity .4s;
  }
  .navbar.is-scrolled {
    width: min(1040px, calc(100% - 3rem));
    background: rgba(11,11,11,0.8);
  }
  .navbar.is-hidden { transform: translateX(-50%) translateY(-170%); opacity: 0; }
  .navbar__cta { border-radius: 100px; padding: 0.7rem 1.4rem; }
}

/* =========================================================
   4. HERO — cinematic full-bleed
========================================================= */
.hero { isolation: isolate; }

/* Full-bleed фон-фото */
.hero__bg {
  position: absolute;
  inset: 0;
  z-index: 0;
  background: url('../images/hero/hero-bg.png') center center / cover no-repeat;
}
/* затемнение слева — под читаемость текста */
.hero__bg::after {
  content: '';
  position: absolute;
  inset: 0;
  background: linear-gradient(95deg,
    rgba(8, 8, 8, 0.94) 0%,
    rgba(8, 8, 8, 0.78) 26%,
    rgba(8, 8, 8, 0.30) 52%,
    rgba(8, 8, 8, 0.10) 72%,
    rgba(8, 8, 8, 0.45) 100%);
}

.hero__image-wrap { perspective: 1300px; }

.hero__img-bg {
  background:
    url('../images/hero/knife-hero.png') center center / contain no-repeat,
    radial-gradient(ellipse at 68% 32%, rgba(201,168,76,0.11) 0%, transparent 52%),
    linear-gradient(158deg, #1d1208 0%, #0a0a08 50%, #09090d 100%) !important;
  transform: scale(1.02) rotateX(var(--rx, 0deg)) rotateY(var(--ry, 0deg)) !important;
  transform-style: preserve-3d;
  transition: transform 0.5s var(--ease-spring);
  will-change: transform;
  cursor: grab;
}

/* мышь зажата — убираем инерцию для точного отклика */
.hero__image-wrap.is-grabbing .hero__img-bg {
  transition: none;
  cursor: grabbing;
}

/* вуаль не должна перехватывать перетаскивание */
.hero__image-overlay { pointer-events: none; }

/* бегущий блик при наклоне */
.hero__glare {
  position: absolute;
  inset: 0;
  z-index: 4;
  pointer-events: none;
  opacity: 0;
  transition: opacity 0.4s ease;
  background: radial-gradient(circle at var(--gx, 50%) var(--gy, 38%),
    rgba(255, 244, 210, 0.30) 0%,
    rgba(255, 244, 210, 0.07) 22%,
    transparent 46%);
  mix-blend-mode: screen;
}
.hero__image-wrap.is-grabbing .hero__glare { opacity: 1; }

/* затемняющая вуаль для читаемости */
.hero__image-overlay {
  background: linear-gradient(105deg,
    var(--bg) 0%, rgba(10,10,10,0.55) 18%,
    rgba(10,10,10,0.08) 45%, transparent 100%) !important;
}

/* орбы свечения */
.hero .fx-orb {
  position: absolute; border-radius: 50%;
  filter: blur(80px); pointer-events: none; z-index: 0;
  opacity: 0.55; mix-blend-mode: screen;
}
.hero .fx-orb--gold {
  width: 40vw; height: 40vw; top: -6%; right: -4%;
  background: radial-gradient(circle, rgba(201,168,76,0.45), transparent 65%);
  animation: orbA 15s ease-in-out infinite;
}
.hero .fx-orb--ember {
  width: 32vw; height: 32vw; bottom: -8%; left: 14%;
  background: radial-gradient(circle, rgba(170,70,20,0.36), transparent 65%);
  animation: orbB 19s ease-in-out infinite;
}
@keyframes orbA { 0%,100%{transform:translate(0,0) scale(1)} 50%{transform:translate(-4%,5%) scale(1.1)} }
@keyframes orbB { 0%,100%{transform:translate(0,0) scale(1)} 50%{transform:translate(6%,-4%) scale(1.12)} }
@media (prefers-reduced-motion: reduce) { .hero .fx-orb { animation: none; } }

.hero__content { z-index: 3; }
.hero__image { z-index: 2; }

/* кинетик-заголовок: разбит на слова/строки масками (JS) */
.hero__title { perspective: 800px; }
.hero__title .line { overflow: hidden; }
.hero__title .word {
  display: inline-block;
  transform: translateY(115%) rotate(4deg);
  transform-origin: left bottom;
}

/* бейдж-eyebrow в пилюле */
.hero__label {
  display: inline-flex; align-items: center; gap: 0.5rem;
  padding: 0.45rem 0.95rem;
  border: 1px solid var(--gold-border);
  border-radius: 100px;
  width: max-content;
  background: rgba(201,168,76,0.05);
  backdrop-filter: blur(6px);
}
.hero__label::before {
  content: ''; width: 6px; height: 6px; border-radius: 50%;
  background: var(--gold); box-shadow: 0 0 10px var(--gold);
  animation: pulse 2s ease-in-out infinite;
}
@keyframes pulse { 0%,100%{opacity:1} 50%{opacity:0.3} }

/* =========================================================
   5. SECTION REVEAL STATES (ставит JS)
========================================================= */
.r-up   { opacity: 0; transform: translateY(40px); filter: blur(8px); }
.r-mask { overflow: hidden; }
.r-mask > * { display: block; transform: translateY(110%); }

/* =========================================================
   6. INTRO / MANIFESTO — крупная editorial-фраза с подсветкой слов
========================================================= */
.manifesto {
  padding: 9rem 0;
  border-top: 1px solid var(--border);
  border-bottom: 1px solid var(--border);
  background: var(--bg-2);
  position: relative;
}
.manifesto__inner {
  max-width: 980px;
  margin: 0 auto;
  padding: 0 2rem;
  text-align: center;
}
.manifesto .section-eyebrow { color: var(--gold); }
.manifesto .gold-line { margin: 0 auto 2.25rem; }
.manifesto__text {
  font-family: var(--font-serif);
  font-size: clamp(1.6rem, 3.4vw, 3rem);
  line-height: 1.42;
  font-weight: 400;
  color: var(--text);
  letter-spacing: -0.01em;
}
.manifesto__text b {
  color: var(--gold);
  font-weight: 400;
  font-style: italic;
}
@media (max-width: 768px) { .manifesto { padding: 5.5rem 0; } }

/* =========================================================
   7. CATALOG — 3D-tilt + glow follow
========================================================= */
@media (hover: hover) and (pointer: fine) {
  .catalog-card {
    transform: perspective(1000px) rotateX(var(--ry,0)) rotateY(var(--rx,0));
    transform-style: preserve-3d;
    transition: transform .5s var(--ease-spring), background .3s var(--ease-out);
  }
  .catalog-card::after {
    content:''; position:absolute; inset:0; z-index:2; pointer-events:none; opacity:0;
    background: radial-gradient(440px circle at var(--gx,50%) var(--gy,50%), rgba(201,168,76,0.12), transparent 55%);
    transition: opacity .4s var(--ease-soft);
  }
  .catalog-card:hover::after { opacity: 1; }
  .catalog-card__name { transform: translateZ(30px); }
  .catalog-card__cat  { transform: translateZ(20px); }
}

/* =========================================================
   8. ABOUT — реальное фото-наполнение блоков
========================================================= */
.about-img-bg--1 {
  background:
    url('../images/about/engraving-macro.png') center/cover no-repeat,
    linear-gradient(143deg, #1e1208 0%, #0c0c08 100%) !important;
}

/* =========================================================
   9. PROCESS — карточки-шаги с фото + горизонтальная сцена
========================================================= */
.process-step { position: relative; overflow: hidden; }

/* медиа-превью */
.process-step__media {
  position: relative;
  aspect-ratio: 16 / 10;
  margin-bottom: 1.75rem;
  overflow: hidden;
  background: var(--bg-3);
  border: 1px solid var(--border);
}
.process-step__img {
  position: absolute; inset: 0;
  background-size: cover; background-position: center;
  filter: grayscale(0.2) contrast(1.08) brightness(0.9);
  transform: scale(1.02);
  transition: filter .6s var(--ease-soft), transform .9s var(--ease-spring);
}
.process-step:hover .process-step__img {
  filter: grayscale(0) contrast(1.12) brightness(1);
  transform: scale(1.06);
}
.process-step__media::after {
  content: ''; position: absolute; inset: 0;
  background: linear-gradient(to top, rgba(10,10,10,0.9), transparent 58%);
}
.process-step__icon {
  position: absolute; top: 1rem; left: 1rem; z-index: 2;
  width: 46px; height: 46px;
  display: flex; align-items: center; justify-content: center;
  border: 1px solid var(--gold-border);
  background: rgba(10,10,10,0.45);
  backdrop-filter: blur(6px); -webkit-backdrop-filter: blur(6px);
  color: var(--gold);
  transition: background .4s, border-color .4s, transform .5s var(--ease-spring);
}
.process-step:hover .process-step__icon {
  background: var(--gold); border-color: var(--gold); color: #000;
  transform: translateY(-2px);
}
.process-step__icon svg { width: 22px; height: 22px; }

.process-step__content { position: relative; z-index: 1; }
.process-step__count {
  display: block;
  font-family: var(--font-sans);
  font-size: 0.62rem; font-weight: 700;
  letter-spacing: 0.2em; text-transform: uppercase;
  color: var(--gold);
  margin-bottom: 0.85rem;
}
/* большой ghost-номер как акцент */
.process-step__num {
  font-size: 3.4rem !important;
  color: rgba(201,168,76,0.16) !important;
  margin-bottom: 0.4rem !important;
}

/* статичная сетка 4-в-ряд: компактные медиа сверху */
@media (min-width: 1025px) {
  .process-step__media { aspect-ratio: 4 / 3; }
}

/* =========================================================
   10. MARQUEE — крупнее, золотые акценты
========================================================= */
.marquee-content span { font-size: 0.78rem; }
.marquee-content .marquee-dot { font-size: 1rem; }

/* =========================================================
   11. TO-TOP — стеклянная плавающая
========================================================= */
.fx-totop {
  position: fixed; right: 1.5rem; bottom: 1.5rem;
  width: 48px; height: 48px;
  display: flex; align-items: center; justify-content: center;
  border-radius: 50%;
  border: 1px solid rgba(201,168,76,0.3);
  background: rgba(14,14,14,0.6);
  backdrop-filter: blur(12px); -webkit-backdrop-filter: blur(12px);
  color: var(--gold); z-index: 900; cursor: pointer;
  opacity: 0; transform: translateY(20px) scale(.9); pointer-events: none;
  transition: opacity .4s var(--ease-soft), transform .5s var(--ease-spring), background .3s, color .3s, border-color .3s;
}
.fx-totop.is-visible { opacity: 1; transform: translateY(0) scale(1); pointer-events: auto; }
.fx-totop:hover { background: var(--gold); border-color: var(--gold); color: #000; transform: translateY(-3px) scale(1.06); }
.fx-totop svg { width: 18px; height: 18px; }

/* =========================================================
   12. MAGNETIC BTN + вложенная иконка
========================================================= */
.btn { transition: transform .4s var(--ease-spring), background .28s var(--ease-out),
                   color .28s, border-color .28s, box-shadow .4s var(--ease-spring); }
.btn.is-magnetic { transform: translate(var(--mx,0), var(--my,0)); }
.btn:active { transform: scale(.97); }
.btn .btn__icon {
  display: inline-flex; align-items: center; justify-content: center;
  width: 1.55em; height: 1.55em; margin-left: .15em; margin-right: -.55em;
  border-radius: 50%; background: rgba(0,0,0,0.18);
  transition: transform .45s var(--ease-spring), background .3s;
}
.btn--outline .btn__icon, .btn--ghost .btn__icon { background: rgba(201,168,76,0.14); }
.btn .btn__icon svg { width: .72em; height: .72em; }
.btn:hover .btn__icon { transform: translate(3px,-2px) scale(1.06); }

/* reduced motion — гасим */
@media (prefers-reduced-motion: reduce) {
  .r-up, .r-mask > *, .hero__title .word, .preloader__brand span { opacity:1!important; transform:none!important; filter:none!important; }
}