/* ═══════════════════════════════════════════════
   Елизавета Колпачкова — лендинг
   ═══════════════════════════════════════════════ */

:root{
  --ink:    #1B110B;   /* тёплый коричневый      */
  --void:   #100A07;   /* самый тёмный           */
  --paper:  #F6E7E1;   /* кремово-розовый текст  */
  --rose:   #E9B4B4;   /* пастельная роза, акцент*/
  --mist:   #C2A294;   /* приглушённый тёплый    */

  --f-display: 'Unbounded', 'Onest', system-ui, sans-serif;
  --f-serif:   'Cormorant Garamond', 'Times New Roman', serif;
  --f-body:    'Onest', system-ui, -apple-system, sans-serif;

  --pad: clamp(18px, 4vw, 56px);
  --ease: cubic-bezier(.16, 1, .3, 1);
}

*, *::before, *::after{ box-sizing: border-box; }

html{ scroll-behavior: smooth; }

body{
  margin: 0;
  background: var(--void);
  color: var(--paper);
  font-family: var(--f-body);
  font-weight: 300;
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
  overflow-x: hidden;
}

/* глубина фона */
body::before{
  content:'';
  position: fixed; inset: 0; z-index: -2;
  background: linear-gradient(to bottom, #100A07 0%, #19100A 42%, #2A1A11 100%);
}

/* мелкие подписи: тот же основной шрифт, только разряжённый */
.mono{
  font-family: var(--f-body);
  font-weight: 400;
  font-size: clamp(10px, 1.05vw, 12px);
  letter-spacing: .13em;
  text-transform: uppercase;
  font-variant-numeric: tabular-nums;
}

::selection{ background: var(--paper); color: var(--ink); }

/* ── ЭКРАН ЗАГРУЗКИ ──────────────────────────── */
#preloader{
  position: fixed; inset: 0; z-index: 200;
  background: var(--void);
  display: grid; place-items: center;
  transition: opacity .9s var(--ease), visibility .9s;
}
body.ready #preloader{ opacity: 0; visibility: hidden; }

.pre-inner{ display: grid; gap: 18px; justify-items: center; }
.pre-name{ color: var(--mist); opacity: .7; }
.pre-bar{
  width: min(240px, 46vw); height: 1px;
  background: rgba(194,162,148,.25);
  overflow: hidden;
}
.pre-bar i{
  display: block; height: 100%; width: 0%;
  background: var(--paper);
  transition: width .25s linear;
}
.pre-num{
  font-size: clamp(28px, 7vw, 46px);
  letter-spacing: .04em;
  color: var(--paper);
  font-weight: 300;
}

/* ── СЛОИ ФОНА ───────────────────────────────── */
#scene{
  position: fixed; inset: 0; z-index: 0;
  width: 100%; height: 100%;
  pointer-events: none;
  opacity: 0;
  transition: opacity 1.4s var(--ease) .1s;
}
body.ready #scene{ opacity: 1; }

#glow{
  position: fixed; top: 0; left: 0; z-index: 1;
  width: 560px; height: 560px; margin: -280px 0 0 -280px;
  border-radius: 50%;
  pointer-events: none;
  mix-blend-mode: screen;
  opacity: 0;
  background: radial-gradient(circle closest-side,
              rgba(233,180,180,.16), rgba(233,180,180,.05) 45%, transparent 70%);
  transition: opacity .6s ease;
}
body.ready.has-pointer #glow{ opacity: 1; }

.grain{
  position: fixed; inset: -120%; z-index: 3;
  pointer-events: none;
  opacity: .055;
  mix-blend-mode: overlay;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='240' height='240'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.85' numOctaves='3' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E");
  animation: grain 1.1s steps(4) infinite;
}
@keyframes grain{
  0%   { transform: translate(0,0); }
  25%  { transform: translate(-3%, 2%); }
  50%  { transform: translate(2%, -3%); }
  75%  { transform: translate(-2%, -2%); }
  100% { transform: translate(0,0); }
}

.vignette{
  position: fixed; inset: 0; z-index: 3;
  pointer-events: none;
  background: radial-gradient(115% 80% at 50% 45%, transparent 42%, rgba(8,5,3,.6) 100%);
}

/* ── ШАПКА ───────────────────────────────────── */
.head{
  position: fixed; top: 0; left: 0; right: 0; z-index: 40;
  display: flex; align-items: center; justify-content: space-between;
  padding: clamp(16px, 2.4vw, 30px) var(--pad);
  opacity: 0; transform: translateY(-12px);
  transition: opacity 1s var(--ease) .5s, transform 1s var(--ease) .5s;
}
body.ready .head{ opacity: 1; transform: none; }

.mark{
  display: block; line-height: 0;
  color: var(--paper);
  text-decoration: none;
}
.mark-g{
  width: clamp(25px, 2.4vw, 31px);
  height: auto;
  display: block;
  transition: transform .9s var(--ease), opacity .5s ease;
}
.mark:hover .mark-g{ transform: rotate(45deg); opacity: .85; }

.head-r{ display: flex; align-items: center; gap: clamp(16px, 2.6vw, 34px); }

.lang{ display: flex; align-items: center; gap: 7px; color: var(--mist); }
.lang button{
  appearance: none; background: none; border: 0; padding: 2px 0;
  font: inherit; letter-spacing: inherit; text-transform: inherit;
  color: rgba(194,162,148,.5); cursor: pointer;
  transition: color .35s ease;
}
.lang button:hover{ color: var(--paper); }
.lang button.is-on{ color: var(--paper); }
.lang-s{ opacity: .3; }

.cta{
  color: var(--paper); text-decoration: none;
  padding: 9px 18px;
  border: 1px solid rgba(194,162,148,.28);
  border-radius: 999px;
  position: relative; overflow: hidden;
  transition: color .5s var(--ease), border-color .5s var(--ease);
}
.cta::before{
  content:''; position: absolute; inset: 0; background: var(--paper);
  transform: translateY(101%);
  transition: transform .6s var(--ease);
}
.cta span, .cta{ position: relative; }
.cta:hover{ color: var(--ink); border-color: var(--paper); }
.cta:hover::before{ transform: translateY(0); }
.cta{ z-index: 0; }
.cta::before{ z-index: -1; }

/* ── БОКОВЫЕ РЕЙЛЫ ───────────────────────────── */
.rail{
  position: fixed; z-index: 30;
  color: var(--mist); opacity: 0;
  transition: opacity 1.2s ease .8s;
}
body.ready .rail{ opacity: .55; }

.rail-r{
  right: clamp(10px, 1.1vw, 18px); top: 50%; transform: translateY(-50%);
  display: grid; justify-items: center; gap: 14px;
}
.rail-track{
  position: relative; display: block;
  width: 1px; height: clamp(90px, 18vh, 190px);
  background: rgba(194,162,148,.25);
}
.rail-track i{
  position: absolute; left: 50%; top: 0;
  width: 5px; height: 5px; margin-left: -2.5px;
  border-radius: 50%; background: var(--paper);
  box-shadow: 0 0 12px 2px rgba(246,231,225,.45);
}
.rail-num{
  font-family: var(--f-body); font-size: 11px; font-weight: 400;
  letter-spacing: .1em; color: var(--paper);
  font-variant-numeric: tabular-nums;
}

@media (max-width: 620px){ .rail-r{ display: none; } }

/* ── СЦЕНЫ ───────────────────────────────────── */
main{ position: relative; z-index: 10; }

.stage{
  position: relative;
  display: flex; align-items: center;
  padding: 0 var(--pad);
}
.wrap{ width: 100%; max-width: 1440px; margin: 0 auto; position: relative; z-index: 1; }

/* мягкая подложка, чтобы текст читался поверх цветка.
   Вертикальная маска убирает шов на стыке соседних секций. */
.scrim::before,
.scrim-c::before{
  content:''; position: absolute; inset: 0; z-index: 0; pointer-events: none;
  background: linear-gradient(100deg,
    rgba(16,10,7,.88) 0%, rgba(16,10,7,.66) 32%, rgba(16,10,7,.16) 60%, transparent 78%);
  mask-image: linear-gradient(to bottom, transparent 0%, #000 20%, #000 80%, transparent 100%);
  -webkit-mask-image: linear-gradient(to bottom, transparent 0%, #000 20%, #000 80%, transparent 100%);
}
.scrim[data-side="r"]::before{
  background: linear-gradient(260deg,
    rgba(16,10,7,.88) 0%, rgba(16,10,7,.66) 32%, rgba(16,10,7,.16) 60%, transparent 78%);
}
/* манифест и контакты перекрывают всю ширину — вуаль по центру */
.stage-manifest::before{
  background:
    radial-gradient(130% 78% at 42% 50%, rgba(16,10,7,.9) 0%, rgba(16,10,7,.66) 46%, rgba(16,10,7,.1) 82%, transparent 100%);
}
.scrim-c::before{
  background: linear-gradient(to bottom,
    rgba(16,10,7,.14) 0%, rgba(16,10,7,.54) 18%, rgba(16,10,7,.66) 50%, rgba(16,10,7,.54) 86%, rgba(16,10,7,.14) 100%);
  mask-image: none; -webkit-mask-image: none;
}

.stage-hero     { min-height: 100svh; }
.stage-manifest { min-height: 120svh; }
.stage-areas-t  { min-height: 62svh; }
.area           { min-height: 92svh; }
.stage-contact  { min-height: 108svh; }

@media (max-width: 720px){
  .stage-manifest{ min-height: 105svh; }
  .area{ min-height: 78svh; }
}

/* на узких экранах скала занимает весь кадр — вуаль сплошная */
@media (max-width: 720px){
  .scrim::before,
  .scrim[data-side="r"]::before,
  .stage-manifest::before{
    background: linear-gradient(to bottom,
      rgba(16,10,7,.32) 0%, rgba(16,10,7,.74) 28%, rgba(16,10,7,.74) 72%, rgba(16,10,7,.32) 100%);
  }
}

/* ── АНИМАЦИЯ ПОЯВЛЕНИЯ ──────────────────────── */
.rv{
  opacity: 0; transform: translateY(26px); filter: blur(7px);
  transition: opacity 1s var(--ease), transform 1s var(--ease), filter 1s var(--ease);
  transition-delay: var(--d, 0ms);
}
.reveal.in .rv{ opacity: 1; transform: none; filter: none; }

.split .w{
  display: inline-block; overflow: hidden; vertical-align: bottom;
  padding: .06em .04em .14em 0; margin-bottom: -.14em;
}
.split .wi{
  display: inline-block;
  transform: translateY(115%);
  opacity: 0;
  transition: transform 1.1s var(--ease), opacity .8s var(--ease);
  transition-delay: calc(var(--d, 0ms) + var(--i) * 42ms);
}
.reveal.in .split .wi{ transform: none; opacity: 1; }

/* ── ГЕРОЙ ───────────────────────────────────── */
.stage-hero .wrap{ position: relative; }

.h-1{
  margin: 0;
  font-family: var(--f-display);
  font-weight: 200;
  font-size: clamp(2.9rem, 10.4vw, 9.4rem);
  line-height: .93;
  letter-spacing: -.045em;
}
.h-1 .l1, .h-1 .l2{ display: block; }
.h-1 .l2{
  font-family: var(--f-serif);
  font-style: italic;
  font-weight: 300;
  font-size: 1.14em;
  letter-spacing: -.02em;
  color: var(--rose);
  margin-left: clamp(14px, 7vw, 130px);
  margin-top: -.06em;
}

.role{
  margin: clamp(24px, 3.6vw, 44px) 0 0;
  max-width: 34ch;
  font-size: clamp(1rem, 1.55vw, 1.35rem);
  line-height: 1.5;
  color: var(--paper);
  opacity: .92;
}

/* ── ИНДЕКСЫ РАЗДЕЛОВ ────────────────────────── */
.idx{
  display: block; color: var(--mist); opacity: .55;
  margin-bottom: clamp(18px, 2.6vw, 32px);
  padding-left: 2px;
  position: relative;
}
.idx::before{
  content:''; position: absolute; left: -18px; top: 50%;
  width: 10px; height: 1px; background: currentColor;
}

/* ── МАНИФЕСТ ────────────────────────────────── */
.stage-manifest .wrap{ max-width: 1180px; }
.manifest{
  margin: 0;
  font-family: var(--f-display);
  font-weight: 200;
  font-size: clamp(1.5rem, 4.15vw, 4rem);
  line-height: 1.18;
  letter-spacing: -.035em;
  color: var(--paper);
}
.manifest .em{
  font-family: var(--f-serif);
  font-style: italic;
  font-weight: 400;
  font-size: 1.2em;
  letter-spacing: -.01em;
  color: var(--rose);
}

/* ── ЗАГОЛОВОК РАЗДЕЛА ───────────────────────── */
/* заголовки разделов — той же курсивной антиквой, что и фамилия */
.h-2{
  margin: 0;
  font-family: var(--f-serif);
  font-style: italic;
  font-weight: 300;
  font-size: clamp(2.7rem, 8.2vw, 7rem);
  line-height: 1;
  letter-spacing: -.02em;
  color: var(--rose);
}

/* ── ОБЛАСТИ РАБОТЫ ──────────────────────────── */
.area-in{ display: grid; justify-items: start; }
.area[data-side="r"] .area-in{ justify-items: end; text-align: right; }

.area-n{
  color: var(--mist);
  font-size: clamp(11px, 1.15vw, 13px);
  letter-spacing: .3em;
  margin-bottom: clamp(14px, 1.8vw, 22px);
  padding-bottom: 10px;
  border-bottom: 1px solid rgba(194,162,148,.3);
  display: inline-block;
}
.area-t{
  margin: 0;
  font-family: var(--f-display);
  font-weight: 200;
  font-size: clamp(1.9rem, 5.6vw, 4.6rem);
  line-height: 1.02;
  letter-spacing: -.045em;
  max-width: 14ch;
}
.area[data-side="r"] .area-t{ margin-left: auto; }
.area-d{
  margin: clamp(16px, 2vw, 26px) 0 0;
  max-width: 30ch;
  font-size: clamp(.95rem, 1.35vw, 1.2rem);
  line-height: 1.55;
  color: var(--mist);
}
.area[data-side="r"] .area-d{ margin-left: auto; }

@media (max-width: 720px){
  .area[data-side="r"] .area-in{ justify-items: start; text-align: left; }
  .area[data-side="r"] .area-t,
  .area[data-side="r"] .area-d{ margin-left: 0; }
}

/* ── КОНТАКТЫ ────────────────────────────────── */
.stage-contact{
  align-items: flex-end;               /* прижимаем к низу: в конце страницы блок не уезжает под шапку */
  padding-top: clamp(142px, 23vh, 250px);
  padding-bottom: clamp(18px, 3vh, 34px);
}
.h-2c{ margin-bottom: clamp(34px, 5vw, 68px); }

.rows{ border-top: 1px solid rgba(194,162,148,.22); }

.row{
  position: relative; display: grid;
  grid-template-columns: clamp(90px, 12vw, 160px) 1fr auto;
  align-items: center; gap: 18px;
  padding: clamp(18px, 2.5vw, 30px) clamp(10px, 1.6vw, 22px);
  border-bottom: 1px solid rgba(194,162,148,.22);
  text-decoration: none; color: var(--paper);
  isolation: isolate;
  transition: color .55s var(--ease);
}
.row::before{
  content:''; position: absolute; inset: 0; z-index: -1;
  background: var(--paper);
  transform: scaleX(0); transform-origin: left;
  transition: transform .7s var(--ease);
}
.row:hover{ color: var(--ink); }
.row:hover::before{ transform: scaleX(1); }

.row-k{ color: var(--mist); transition: color .55s var(--ease); }
.row:hover .row-k{ color: rgba(27,17,11,.55); }
.row-v{
  font-family: var(--f-display);
  font-weight: 200;
  font-size: clamp(1.05rem, 2.7vw, 2.1rem);
  letter-spacing: -.035em;
  overflow-wrap: anywhere;
}
.row-a{
  font-size: clamp(1rem, 1.8vw, 1.5rem);
  transition: transform .6s var(--ease);
}
.row:hover .row-a{ transform: translate(6px, -6px); }

@media (max-width: 620px){
  .row{ grid-template-columns: 1fr auto; row-gap: 6px; }
  .row-k{ grid-column: 1 / -1; }
}

/* ── ПОДВАЛ ──────────────────────────────────── */
.foot{
  position: relative; z-index: 10;
  display: flex; justify-content: space-between; align-items: center;
  gap: 16px; flex-wrap: wrap;
  padding: clamp(26px, 4vw, 46px) var(--pad) clamp(30px, 5vw, 54px);
  color: var(--mist);
  border-top: 1px solid rgba(194,162,148,.14);
}
.foot-r{ color: var(--mist); text-decoration: none; transition: color .4s ease; }
.foot-r:hover{ color: var(--paper); }

/* ── ДОСТУПНОСТЬ ─────────────────────────────── */
:focus-visible{
  outline: 1px solid var(--paper);
  outline-offset: 4px;
}

@media (prefers-reduced-motion: reduce){
  html{ scroll-behavior: auto; }
  .grain{ animation: none; }
  .rv, .split .wi{ transition-duration: .01ms !important; transition-delay: 0ms !important; }
}