/* ============================================================
   Yiavashi Christofi — журнальный слой эффектов
   Подключается ПОСЛЕ styles.css и ничего в нём не переопределяет
   без необходимости. Чтобы отключить — убрать одну строку из index.html.
   ============================================================ */

/* ---------- бумажное зерно ----------
   Тёплая полиграфическая фактура поверх всей страницы. Именно она
   отличает этот сайт от глянцевых тёмных: экран выглядит как бумага. */
.paper-grain{
  position:fixed; inset:0; z-index:9998; pointer-events:none;
  opacity:.05; mix-blend-mode:multiply;
  background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='140' height='140'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.85' numOctaves='3'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E");
}

/* ---------- фотопанель в первом экране ---------- */
.hero{position:relative}
.hero__photo{
  position:absolute; top:0; right:0; bottom:0;
  width:42vw; overflow:hidden; z-index:0;
  /* стартовое состояние — шторка закрыта */
  clip-path:inset(0 0 0 100%);
  transition:clip-path 1.5s cubic-bezier(.16,1,.3,1);
}
.hero__photo.is-open{clip-path:inset(0 0 0 0%)}
.hero__photo img{
  width:100%; height:120%; object-fit:cover; object-position:center;
  will-change:transform;
}
/* тёплая вуаль, чтобы фото не спорило с текстом */
.hero__photo::after{
  content:''; position:absolute; inset:0;
  background:linear-gradient(90deg,#FAFAF8 0%,rgba(250,250,248,.55) 22%,rgba(250,250,248,0) 60%);
}
.hero__inner{position:relative; z-index:1}
@media(max-width:900px){ .hero__photo{display:none} }

/* ---------- раскрытие фотографий шторкой ---------- */
.reveal-img{
  clip-path:inset(0 0 100% 0);
  transition:clip-path 1.25s cubic-bezier(.16,1,.3,1);
}
.reveal-img.is-open{clip-path:inset(0 0 0% 0)}
.parallax-img{will-change:transform}

/* ---------- заголовки набираются построчно ---------- */
.line-mask{display:block; overflow:hidden}
.line-mask > span{
  display:block;
  transform:translateY(105%);
  transition:transform 1s cubic-bezier(.16,1,.3,1);
}
.line-mask.is-open > span{transform:translateY(0)}

/* ---------- курсор-подсказка на услугах ----------
   Табличка едет за курсором — приём из журнальных сайтов,
   заменяет 3D и не требует ни одной лишней картинки. */
.hover-chip{
  position:fixed; top:0; left:0; z-index:9997; pointer-events:none;
  display:flex; align-items:center; gap:10px;
  padding:11px 18px; border-radius:999px;
  background:var(--color-accent,#1A3A5C); color:#fff;
  font-family:'Outfit',sans-serif; font-size:.78rem; font-weight:500;
  letter-spacing:.08em; text-transform:uppercase;
  opacity:0; transform:translate(-50%,-50%) scale(.8);
  transition:opacity .3s ease, transform .3s cubic-bezier(.16,1,.3,1);
  box-shadow:0 12px 30px -10px rgba(26,58,92,.5);
  white-space:nowrap;
}
.hover-chip.is-on{opacity:1; transform:translate(-50%,-50%) scale(1)}
.hover-chip b{
  font-family:'Playfair Display',serif; font-size:1rem; font-weight:600;
  color:var(--color-gold,#C9A84C); letter-spacing:0;
}

/* карточка услуги слегка приподнимается и подчёркивается золотом */
.service-card{transition:transform .45s cubic-bezier(.16,1,.3,1), box-shadow .45s ease}
.service-card::after{
  content:''; position:absolute; left:0; right:0; bottom:0; height:2px;
  background:var(--color-gold,#C9A84C);
  transform:scaleX(0); transform-origin:left;
  transition:transform .5s cubic-bezier(.16,1,.3,1);
}
.service-card{position:relative; overflow:hidden}
.service-card:hover{transform:translateY(-6px)}
.service-card:hover::after{transform:scaleX(1)}

@media(prefers-reduced-motion:reduce){
  .hero__photo,.reveal-img{clip-path:none !important; transition:none}
  .line-mask > span{transform:none !important}
  .hover-chip{display:none}
}

/* ---------- декоративная сетка не должна лезть на фото ----------
   Три вертикальные полосы из исходного дизайна тянулись на всю ширину
   героя. Пока справа было пусто — читались как типографская сетка,
   а поверх фотографии выглядят случайной царапиной. Держим их
   в текстовой половине. */
.hero__bg-lines{right:42vw}
@media(max-width:900px){ .hero__bg-lines{right:0} }

/* ---------- хвосты курсива не должны задевать подзаголовок ----------
   У Playfair Display в курсиве «y» и «p» свисают заметно ниже строки.
   Когда заголовок переносится на три строки, они упираются в текст ниже.
   Дефект из исходной вёрстки, лечится воздухом. */
.hero__sub{padding-top:1.1rem}