/* ============================================================
   FLEXYPRO — FORT LAYER v1
   Кинематографичный слой уровня Fort Energy (Awwwards):
   · интро: дождь света + туман + разрежённый wordmark
   · hero: канвас световых нитей
   · хроматический blur-reveal заголовков + нумерация секций
   · scroll-прогресс
   · «Анатомия профиля» — чертёж-голограмма (line-draw SVG)
   · wordmark-band со scroll-tracking
   · контраст-финал: кремовый футер
   Палитра графит/ember/ivory. Без библиотек. 60fps.
   ============================================================ */

/* ---------- 1. SCROLL PROGRESS ---------- */
.fx-progress {
  position: fixed; top: 0; left: 0; height: 2px; width: 0;
  background: linear-gradient(90deg, #FD6143, #ff8a6b);
  box-shadow: 0 0 12px rgba(253,97,67,0.55);
  z-index: 12000; pointer-events: none;
  transition: opacity .4s ease;
}

/* ---------- 2. INTRO — туман + дождь света + wordmark ---------- */
.intro { overflow: hidden; }
.intro__fog, .intro__fog2 {
  position: absolute; inset: -20%; pointer-events: none; z-index: 0;
  background:
    radial-gradient(42% 34% at 28% 38%, rgba(247,243,236,0.065), transparent 70%),
    radial-gradient(36% 30% at 72% 62%, rgba(253,97,67,0.05), transparent 70%);
  filter: blur(28px);
  animation: fx-fog-drift 9s ease-in-out infinite alternate;
}
.intro__fog2 {
  background:
    radial-gradient(38% 32% at 70% 30%, rgba(247,243,236,0.05), transparent 70%),
    radial-gradient(30% 26% at 30% 72%, rgba(253,97,67,0.04), transparent 70%);
  animation-duration: 12s; animation-direction: alternate-reverse;
}
@keyframes fx-fog-drift {
  0%   { transform: translate3d(-2.5%, -1.5%, 0) scale(1); }
  100% { transform: translate3d(2.5%, 2%, 0) scale(1.06); }
}
.intro__rain { position: absolute; inset: 0; pointer-events: none; z-index: 1; }
.intro__rain i {
  position: absolute; top: -22%;
  width: 1px; height: 16%;
  background: linear-gradient(180deg, transparent, rgba(253,97,67,0.85) 55%, rgba(255,214,170,0.95));
  box-shadow: 0 0 8px rgba(253,97,67,0.5);
  opacity: 0;
  animation: fx-rain-fall var(--d, 2.2s) var(--dl, 0s) cubic-bezier(.55,.06,.68,.19) infinite;
}
@keyframes fx-rain-fall {
  0%   { transform: translateY(0); opacity: 0; }
  12%  { opacity: var(--o, .7); }
  82%  { opacity: var(--o, .7); }
  100% { transform: translateY(130vh); opacity: 0; }
}
.intro__inner { position: relative; z-index: 2; }
.intro__word {
  font-family: 'Manrope', 'Outfit', sans-serif;
  font-size: clamp(30px, 6.4vw, 78px);
  font-weight: 200;
  color: #f7f3ec;
  letter-spacing: .92em; margin-right: -.92em; /* компенсация хвоста */
  white-space: nowrap;
  opacity: 0;
  filter: blur(14px);
  text-shadow: 0 0 34px rgba(253,97,67,0.3);
  animation: fx-word-in 1.5s .12s cubic-bezier(.22,1,.36,1) forwards;
}
@keyframes fx-word-in {
  0%   { opacity: 0; filter: blur(14px); letter-spacing: .92em; margin-right: -.92em; }
  55%  { opacity: 1; }
  100% { opacity: 1; filter: blur(0); letter-spacing: .34em; margin-right: -.34em; }
}
@media (max-width: 600px) {
  .intro__word { font-size: clamp(22px, 7.4vw, 34px); }
  .intro__rain i { box-shadow: 0 0 5px rgba(253,97,67,0.4); }
}

/* ---------- 3. СВЕТОВЫЕ НИТИ — только по чистому фону (wordmark-band) ---------- */
.fx-streams {
  position: absolute; inset: 0; z-index: 0; width: 100%; height: 100%;
  pointer-events: none; mix-blend-mode: screen; opacity: .85;
}
@media (prefers-reduced-motion: reduce) { .fx-streams { display: none !important; } }

/* ---------- 4. ХРОМАТИЧЕСКИЙ BLUR-REVEAL ---------- */
.fx-rev {
  opacity: 0;
  transform: translateY(26px);
  filter: blur(12px);
  transition:
    opacity 1.05s cubic-bezier(.22,1,.36,1),
    transform 1.05s cubic-bezier(.22,1,.36,1),
    filter 1.05s cubic-bezier(.22,1,.36,1);
  transition-delay: var(--fxd, 0s);
  will-change: opacity, transform, filter;
}
.fx-rev.fx-on { opacity: 1; transform: none; filter: blur(0); }
/* хроматический «след» на заголовках в момент появления */
h2.fx-rev { text-shadow: -7px 0 14px rgba(253,97,67,0.0), 7px 0 14px rgba(120,180,200,0.0); }
h2.fx-rev.fx-on { animation: fx-chroma 1.15s cubic-bezier(.22,1,.36,1) var(--fxd, 0s) 1; }
@keyframes fx-chroma {
  0%   { text-shadow: -9px 0 16px rgba(253,97,67,0.5), 9px 0 16px rgba(150,190,210,0.35); }
  100% { text-shadow: -9px 0 16px rgba(253,97,67,0), 9px 0 16px rgba(150,190,210,0); }
}
/* нумерация секций в eyebrow */
.fx-num {
  font-style: normal; font-weight: 600; color: #FD6143;
  letter-spacing: .14em; margin-right: 10px;
}
.fx-num::after { content: ''; display: inline-block; width: 26px; height: 1px; background: linear-gradient(90deg, #FD6143, transparent); vertical-align: middle; margin-left: 10px; }

/* ---------- 5. АНАТОМИЯ ПРОФИЛЯ — чертёж-голограмма ---------- */
.blueprint {
  position: relative;
  padding: clamp(72px, 10vh, 128px) clamp(20px, 6vw, 96px);
  background:
    radial-gradient(60% 50% at 50% 0%, rgba(253,97,67,0.05), transparent 70%),
    #262423;
  border-top: 1px solid rgba(247,243,236,0.08);
  border-bottom: 1px solid rgba(247,243,236,0.08);
  overflow: hidden;
}
.blueprint::before { /* миллиметровка */
  content: ''; position: absolute; inset: 0; pointer-events: none;
  background-image:
    linear-gradient(rgba(247,243,236,0.035) 1px, transparent 1px),
    linear-gradient(90deg, rgba(247,243,236,0.035) 1px, transparent 1px);
  background-size: 44px 44px;
  mask-image: radial-gradient(70% 70% at 50% 45%, #000 30%, transparent 100%);
}
.blueprint .s__head { position: relative; z-index: 1; }
.bp-grid {
  position: relative; z-index: 1;
  display: grid; grid-template-columns: repeat(3, 1fr);
  gap: clamp(18px, 3vw, 36px);
  margin-top: clamp(36px, 5vh, 56px);
}
@media (max-width: 880px) { .bp-grid { grid-template-columns: 1fr; max-width: 480px; margin-left: auto; margin-right: auto; } }
.bp-card {
  border: 1px solid rgba(247,243,236,0.09);
  background: rgba(20,18,17,0.45);
  backdrop-filter: blur(6px);
  padding: clamp(18px, 2.4vw, 28px);
  border-radius: 4px;
  position: relative;
}
.bp-card::after { /* уголки-маркеры как на чертеже */
  content: ''; position: absolute; inset: 8px; pointer-events: none;
  background:
    linear-gradient(#FD6143, #FD6143) top left    / 12px 1px,
    linear-gradient(#FD6143, #FD6143) top left    / 1px 12px,
    linear-gradient(#FD6143, #FD6143) bottom right/ 12px 1px,
    linear-gradient(#FD6143, #FD6143) bottom right/ 1px 12px;
  background-repeat: no-repeat; opacity: .55;
}
.bp-card svg { width: 100%; height: auto; display: block; filter: drop-shadow(0 0 6px rgba(253,97,67,0.35)); }
.bp-card svg .draw {
  stroke: #FD6143; stroke-width: 1.6; fill: none;
  stroke-linecap: round; stroke-linejoin: round;
}
.bp-card svg .dim {
  stroke: rgba(247,243,236,0.32); stroke-width: 0.8; fill: none;
}
.bp-card svg text {
  font-family: 'Manrope', sans-serif; font-size: 7.5px; letter-spacing: .12em;
  fill: rgba(247,243,236,0.62);
}
.bp-card h3 {
  margin: 18px 0 6px; font-size: 15px; font-weight: 600; letter-spacing: .04em; color: #f7f3ec;
}
.bp-card p { margin: 0; font-size: 13px; line-height: 1.55; color: rgba(247,243,236,0.6); }
.bp-tag {
  display: inline-block; margin-top: 12px;
  font-size: 10px; letter-spacing: .26em; text-transform: uppercase;
  color: #FD6143;
}
/* line-draw: dasharray/offset выставляет JS, класс .on запускает */
.bp-card svg .draw { transition: stroke-dashoffset 2.4s cubic-bezier(.45,.05,.35,1); }
.bp-card svg .dim, .bp-card svg text { opacity: 0; transition: opacity .9s ease 1.6s; }
.bp-card.on svg .dim, .bp-card.on svg text { opacity: 1; }

/* ---------- 6. WORDMARK-BAND — объёмный мир + scroll-tracking ---------- */
.fx-word-band {
  position: relative;
  min-height: clamp(420px, 72vh, 760px);
  display: flex; flex-direction: column; align-items: center; justify-content: center;
  padding: clamp(56px, 9vh, 110px) 0;
  background:
    radial-gradient(70% 60% at 50% 50%, rgba(253,97,67,0.04), transparent 75%),
    #161413;
  border-top: 1px solid rgba(247,243,236,0.06);
  overflow: hidden;
  text-align: center;
}
.fx-word-band .fx-word, .fx-word-band .fx-cap { position: relative; z-index: 1; }
.fx-word-band .fx-word {
  font-family: 'Manrope', 'Outfit', sans-serif;
  font-size: clamp(38px, 9.6vw, 150px);
  font-weight: 200;
  white-space: nowrap;
  color: transparent;
  -webkit-text-stroke: 1px rgba(253,97,67,0.55);
  letter-spacing: .5em; margin-right: -.5em;
  text-shadow: 0 0 44px rgba(253,97,67,0.14);
  display: inline-block;
  will-change: letter-spacing, opacity;
}
.fx-word-band .fx-word b { font-weight: 200; color: #FD6143; -webkit-text-stroke: 0; }
.fx-word-band .fx-cap {
  display: block; margin-top: 18px;
  font-size: 11px; letter-spacing: .34em; text-transform: uppercase;
  color: rgba(247,243,236,0.45);
}

/* ---------- 7. КОНТРАСТ-ФИНАЛ — кремовый футер ---------- */
footer.f {
  background: #F2EDE3 !important;
  border-top: none !important;
  position: relative;
  color: #2c241d !important;
}
footer.f::before { /* ember-волос сверху как срез света */
  content: ''; position: absolute; top: 0; left: 0; right: 0; height: 2px;
  background: linear-gradient(90deg, transparent, #FD6143 30%, #ff9a7d 50%, #FD6143 70%, transparent);
  box-shadow: 0 0 18px rgba(253,97,67,0.45);
}
footer.f .f__mark {
  grid-column: 1 / -1;
  font-family: 'Manrope', sans-serif;
  font-weight: 200;
  font-size: clamp(30px, 6.4vw, 92px);
  letter-spacing: .42em; margin-right: -.42em;
  text-align: center;
  color: transparent;
  -webkit-text-stroke: 1px rgba(44,36,29,0.34);
  margin-bottom: clamp(28px, 5vh, 56px);
  user-select: none;
}
footer.f h4 { color: #9a8b7a !important; }
footer.f p { color: rgba(44,36,29,0.72) !important; }
footer.f a { color: #2c241d !important; }
footer.f a:hover { color: #d44f33 !important; }
footer.f span, footer.f .f__bottom span { color: rgba(44,36,29,0.55) !important; }
footer.f .f__bottom { border-top: 1px solid rgba(44,36,29,0.14) !important; }
footer.f span[style] { color: rgba(44,36,29,0.55) !important; }

/* ---------- reduced motion ---------- */
@media (prefers-reduced-motion: reduce) {
  .fx-rev { opacity: 1 !important; transform: none !important; filter: none !important; transition: none !important; }
  h2.fx-rev.fx-on { animation: none !important; }
  .intro__rain, .intro__fog, .intro__fog2 { display: none !important; }
  .bp-card svg .draw { stroke-dashoffset: 0 !important; transition: none !important; }
  .bp-card svg .dim, .bp-card svg text { opacity: 1 !important; transition: none !important; }
}