/* ===== ЭКРАН 1 — ГЛАВНАЯ =====
   Макет 1200 × 650 (как в Тильде), масштабируется под ширину окна.
   Все координаты — в единицах макета: calc(N * var(--u)).
   Чтобы сдвинуть элемент, меняй его --x / --y / --w ниже. */

.hero {
  /* — настройки движения — */
  --mouse-shift: 20;       /* на сколько фон и тень уходят от мышки (ед. макета) */
  --photo-mouse-shift: 6;  /* на сколько фото тянется за мышкой — даёт глубину */
  --photo-shift: 257;      /* насколько фото поднимается при скролле */

  /* — цвета «как в Figma» — */
  --figma-blue: #0D99FF;
  --guide-color: rgba(241, 148, 214, 0.45);

  container-type: inline-size;
  position: relative;
  overflow: hidden;
  background: var(--bg);
}

.hero__stage {
  --u: calc(100cqw / 1200);
  position: relative;
  height: calc(650 * var(--u));
}

.hero__stage > * {
  position: absolute;
  left: calc(var(--x) * var(--u));
  top: calc(var(--y) * var(--u));
  width: calc(var(--w) * var(--u));
  margin: 0;
}

/* — слои снизу вверх — */
.hero__bg      { --x: -159; --y: -25;  --w: 1459; }
.hero__grid    { --x: 4;    --y: 34;   --w: 1230; height: calc(664 * var(--u)); object-fit: cover; opacity: 0.25; }
.hero__name    { --x: 59;   --y: 157;  --w: 742; }
.hero__letter--a { --x: 449; --y: 236; --w: 92;  height: calc(92 * var(--u));  object-fit: cover; }
.hero__letter--k { --x: 305; --y: 236; --w: 113; height: calc(101 * var(--u)); object-fit: cover; }
.hero__shadow  { --x: 458;  --y: -35;  --w: 842; height: calc(811 * var(--u)); object-fit: cover; }

.hero__roles {
  --x: 122; --y: 171; --w: 637;
  font-weight: 300;
  font-size: calc(19 * var(--u));
  line-height: calc(23 * var(--u));
  letter-spacing: calc(7 * var(--u));
  text-transform: uppercase;
  white-space: nowrap;
  background: linear-gradient(311.4deg,
    rgba(54, 221, 255, 0.29) 0%,
    rgba(254, 254, 254, 0.49) 75%,
    rgba(241, 148, 214, 0.61) 97%);
  -webkit-background-clip: text;
  background-clip: text;
  color: transparent;
  filter: drop-shadow(calc(5 * var(--u)) calc(5 * var(--u)) calc(7 * var(--u)) rgba(3, 7, 12, 0.17));
}

.hero__photo   { --x: 470;  --y: -21;  --w: 830; height: calc(800 * var(--u)); object-fit: cover; }

.hero__ruler {
  --x: -1; --y: 606; --w: 1864;
  font-weight: 300; /* в Тильде стоит 100, но она грузит только 300–700 — на сайте видно 300 */
  font-size: calc(14 * var(--u));
  line-height: calc(22 * var(--u));
  color: #DAD9D9;
  white-space: nowrap;
  pointer-events: none;
}

/* — CASES: текст + рамка-выделение + подпись размера как в Figma — */
.hero__cases {
  --x: 111; --y: 456; --w: 243;
  height: calc(88 * var(--u));
  display: flex;
  align-items: center;
  font-weight: 700; /* в Тильде стоит Black, но она грузит только 300–700 — на сайте видно Bold */
  font-size: calc(44 * var(--u));
  line-height: 1.55;
  color: #fff;
  text-decoration: none;
  rotate: -4deg;
  z-index: 1;
}

.hero__frame {
  --x: 81; --y: 452; --w: 250;
  rotate: -4deg;
  pointer-events: none;
  transition: scale 0.35s cubic-bezier(.2,.9,.1,1);
}

.hero__size {
  --x: 177; --y: 553; --w: auto;
  width: auto;
  padding: calc(3 * var(--u)) calc(7 * var(--u));
  border-radius: calc(3 * var(--u));
  background: var(--figma-blue);
  color: #fff;
  font-weight: 400;
  font-size: calc(9 * var(--u));
  line-height: 1.3;
  white-space: nowrap;
  rotate: -4deg;
  opacity: 0;
  translate: 0 calc(-6 * var(--u));
  pointer-events: none;
  transition: opacity 0.25s ease, translate 0.35s cubic-bezier(.2,.9,.1,1);
}

.hero__cases:hover ~ .hero__frame,
.hero__cases:focus-visible ~ .hero__frame { scale: 1.04; }
.hero__cases:hover ~ .hero__size,
.hero__cases:focus-visible ~ .hero__size { opacity: 1; translate: 0 0; }
.hero__cases:focus-visible { outline: none; }

/* — верхняя плашка «досье» — */
.hero__topbar {
  --x: -100; --y: 0; --w: 1404;
  height: calc(34 * var(--u));
  background: linear-gradient(355.68deg, rgb(42, 42, 42) 20%, rgb(0, 0, 0) 100%);
}

.hero__dossier {
  /* одна строка: CREATIVE PROFILE / 2025 / A.CHUCHUKIN */
  --x: 878; --y: 11;
  width: auto;
  font-weight: 400;
  font-size: calc(10 * var(--u));
  line-height: calc(16 * var(--u));
  white-space: nowrap;
  color: #F8F8F8;
}
.hero__dossier .pink  { color: #D6638F; margin-left: calc(6 * var(--u)); }
.hero__dossier .slash { color: #fff;    margin-left: calc(6 * var(--u)); }

/* — направляющая за мышкой + отметка на линейке (js/hero.js) — */
.hero__guide {
  --x: 0; --y: 34; --w: 1;
  width: 1px;
  height: calc(572 * var(--u));
  background: var(--guide-color);
  translate: var(--gx, 0px) 0;
  opacity: 0;
  pointer-events: none;
  transition: opacity 0.3s ease;
}

.hero__mark {
  --x: 0; --y: 586; --w: auto;
  width: auto;
  padding: calc(2 * var(--u)) calc(6 * var(--u));
  border-radius: calc(3 * var(--u));
  background: var(--pink);
  color: #fff;
  font-weight: 400;
  font-size: calc(9 * var(--u));
  line-height: 1.3;
  white-space: nowrap;
  translate: calc(var(--gx, 0px) - 50%) 0;
  opacity: 0;
  pointer-events: none;
  transition: opacity 0.3s ease;
}

.hero.is-guiding .hero__guide,
.hero.is-guiding .hero__mark { opacity: 1; }

/* — движение от мышки и скролла (js/hero.js) — */
[data-parallax-mouse] {
  translate: calc(var(--mx, 0) * var(--u)) calc(var(--my, 0) * var(--u));
  will-change: translate;
}
.hero__photo {
  translate: calc(var(--pmx, 0) * var(--u)) calc((var(--py, 0) + var(--pmy, 0)) * var(--u));
  will-change: translate;
}

/* ===== ИНТРО: курсор раскладывает макет (js/intro.js) ===== */
.intro-pending [data-intro] { opacity: 0; }

.intro-select {
  --x: 0; --y: 0; --w: 0;
  border: 1px solid var(--figma-blue);
  opacity: 0;
  pointer-events: none;
  z-index: 5;
}
.intro-select i {
  position: absolute;
  width: calc(7 * var(--u));
  height: calc(7 * var(--u));
  background: #fff;
  border: 1px solid var(--figma-blue);
}
.intro-select i:nth-child(1) { left: 0;    top: 0;    translate: -50% -50%; }
.intro-select i:nth-child(2) { right: 0;   top: 0;    translate: 50% -50%; }
.intro-select i:nth-child(3) { left: 0;    bottom: 0; translate: -50% 50%; }
.intro-select i:nth-child(4) { right: 0;   bottom: 0; translate: 50% 50%; }

.intro-cursor {
  --x: 0; --y: 0; --w: auto;
  width: auto;
  display: flex;
  align-items: flex-start;
  gap: calc(2 * var(--u));
  opacity: 0;
  pointer-events: none;
  z-index: 6;
}
.intro-cursor svg {
  width: calc(16 * var(--u));
  height: calc(20 * var(--u));
  fill: var(--pink);
  stroke: #fff;
  stroke-width: 1.2;
  stroke-linejoin: round;
  filter: drop-shadow(0 1px 2px rgba(0,0,0,0.4));
}
.intro-cursor span {
  margin-top: calc(14 * var(--u));
  padding: calc(3 * var(--u)) calc(7 * var(--u));
  border-radius: calc(3 * var(--u)) calc(8 * var(--u)) calc(8 * var(--u)) calc(8 * var(--u));
  background: var(--pink);
  color: #fff;
  font-weight: 400;
  font-size: calc(10 * var(--u));
  line-height: 1.3;
  white-space: nowrap;
}