@import url("https://fonts.googleapis.com/css2?family=Poppins:ital,wght@0,300;0,400;0,500;0,600;0,700;1,400&display=swap");

:root { --ease: cubic-bezier(.22,.61,.36,1); }

html { scroll-behavior: smooth; }
body { margin: 0; background: #000; font-family: 'Poppins', sans-serif; -webkit-font-smoothing: antialiased; }
a { color: #1DC9ED; text-decoration: none; }
a:hover { color: #6FE3F5; }
section[id] { scroll-margin-top: 96px; }

.stage { position: relative; width: 100%; overflow: hidden; background: #000; }
.canvas { width: 1440px; margin: 0 auto; position: relative; background: #000; color: #fff; font-family: 'Poppins', sans-serif; transform-origin: top left; }

.menu-toggle { display: inline-flex; flex-direction: column; justify-content: center; gap: 7px; width: 44px; height: 44px; padding: 0; background: transparent; border: none; cursor: default; }
.menu-toggle span { display: block; height: 2px; border-radius: 2px; background: #fff; }
.menu-toggle span:nth-child(1) { width: 30px; }
.menu-toggle span:nth-child(2) { width: 30px; }
.menu-toggle span:nth-child(3) { width: 20px; align-self: flex-end; }

.social-rail a { display: inline-flex; color: #fff; transition: color 240ms var(--ease); }
.social-rail a:hover { color: #E94A49; }
.social-icon { display: inline-block; flex: 0 0 auto; background-color: currentColor; -webkit-mask-position: center; mask-position: center; -webkit-mask-repeat: no-repeat; mask-repeat: no-repeat; -webkit-mask-size: contain; mask-size: contain; }

/* ---------- цветные пятна на фоне ---------- */
/* Три слоя вместо одного: каждый цвет дрейфует по своей траектории и в своём темпе,
   поэтому пятна не двигаются синхронно. */
.glow-field { position: absolute; inset: 0; z-index: 3; pointer-events: none; mix-blend-mode: screen; will-change: transform, opacity; }

.glow-cyan {
  background:
    radial-gradient(300px 300px at 150px 760px, rgba(29,201,237,.13) 0%, rgba(29,201,237,.058) 45%, rgba(29,201,237,0) 100%),
    radial-gradient(300px 300px at 220px 1750px, rgba(29,201,237,.18) 0%, rgba(29,201,237,.081) 45%, rgba(29,201,237,0) 100%),
    radial-gradient(300px 300px at 1180px 3100px, rgba(29,201,237,.18) 0%, rgba(29,201,237,.081) 45%, rgba(29,201,237,0) 100%);
  animation: glowDriftA 26s ease-in-out infinite alternate;
}
.glow-pink {
  background:
    radial-gradient(280px 280px at 1330px 240px, rgba(246,62,128,.16) 0%, rgba(246,62,128,.072) 45%, rgba(246,62,128,0) 100%),
    radial-gradient(280px 280px at 1240px 2150px, rgba(246,62,128,.16) 0%, rgba(246,62,128,.072) 45%, rgba(246,62,128,0) 100%),
    radial-gradient(280px 280px at 320px 3600px, rgba(246,62,128,.15) 0%, rgba(246,62,128,.068) 45%, rgba(246,62,128,0) 100%);
  animation: glowDriftB 34s ease-in-out infinite alternate;
}
.glow-warm {
  background:
    radial-gradient(320px 320px at 980px 1300px, rgba(242,112,32,.18) 0%, rgba(242,112,32,.081) 45%, rgba(242,112,32,0) 100%),
    radial-gradient(320px 320px at 420px 2650px, rgba(242,112,32,.17) 0%, rgba(242,112,32,.077) 45%, rgba(242,112,32,0) 100%),
    radial-gradient(320px 320px at 1080px 4050px, rgba(242,112,32,.16) 0%, rgba(242,112,32,.072) 45%, rgba(242,112,32,0) 100%);
  animation: glowDriftC 30s ease-in-out infinite alternate;
}

@keyframes glowDriftA {
  0%   { transform: translate3d(-16px, 8px, 0);  opacity: .8; }
  50%  { transform: translate3d(20px, -22px, 0); opacity: 1; }
  100% { transform: translate3d(-6px, 26px, 0);  opacity: .86; }
}
@keyframes glowDriftB {
  0%   { transform: translate3d(18px, -10px, 0); opacity: .85; }
  50%  { transform: translate3d(-24px, 18px, 0); opacity: 1; }
  100% { transform: translate3d(10px, -20px, 0); opacity: .8; }
}
@keyframes glowDriftC {
  0%   { transform: translate3d(-10px, -18px, 0); opacity: .82; }
  50%  { transform: translate3d(16px, 22px, 0);   opacity: 1; }
  100% { transform: translate3d(-20px, -8px, 0);  opacity: .88; }
}

/* ---------- загрузка страницы ---------- */
/* Вуаль держит чёрный экран, пока не посчитан масштаб холста и не подгружен шрифт,
   иначе первый кадр показывает несмасштабированную вёрстку. */
.page-veil { position: fixed; inset: 0; z-index: 200; background: #000; pointer-events: none; transition: opacity 520ms var(--ease); }
.page-veil.is-gone { opacity: 0; }

.scroll-progress { position: fixed; top: 0; left: 0; z-index: 100; width: 100%; height: 2px; transform: scaleX(0); transform-origin: 0 50%; background: linear-gradient(90deg, #1DC9ED 0%, #F63E80 62%, #F27020 100%); opacity: 0; pointer-events: none; transition: opacity 300ms var(--ease); }
.scroll-progress.is-active { opacity: 1; }

/* ---------- появление блоков ---------- */
[data-reveal] { opacity: 0; transform: translateY(16px); transition: opacity 620ms var(--ease), transform 620ms var(--ease); transition-delay: var(--d, 0ms); }
[data-reveal].is-in { opacity: 1; transform: none; }

/* ---------- пословное появление заголовков ---------- */
/* .word — маска, внутренний span выезжает из-под её нижней границы.
   padding/margin по .14em дают descender'ам ("р", "у") место, не ломая маску. */
.word { display: inline-block; overflow: hidden; vertical-align: bottom; padding-bottom: .14em; margin-bottom: -.14em; }
.word > span { display: inline-block; transform: translateY(115%); transition: transform 760ms var(--ease); transition-delay: var(--d, 0ms); }
[data-words].is-typed .word > span { transform: none; }

@keyframes sectionPulse { 0% { opacity: .35; transform: translateY(14px); } 100% { opacity: 1; transform: none; } }
@keyframes dotPulse { 0% { box-shadow: 0 0 0 0 rgba(61,220,132,.55); } 70% { box-shadow: 0 0 0 10px rgba(61,220,132,0); } 100% { box-shadow: 0 0 0 0 rgba(61,220,132,0); } }

@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  .glow-field { animation: none; }
  .page-veil { transition: none; }
  .scroll-progress { transition: none; }
  [data-reveal], [data-reveal].is-in { opacity: 1; transform: none; transition: none; }
  .word > span { transform: none; transition: none; }
}