@import "./base.css?v=20260408-1347";
@import "./effects.css?v=20260408-1347";
@import "./layout.css?v=20260408-1347";
@import "./panels.css?v=20260408-1347";
@import "./responsive.css?v=20260408-1347";




/* ===== PANEL 1 ===== */
#cyberHero .cy-main {
  display: grid;
  grid-template-columns: var(--mainLeft) 1fr var(--mainRight);
  grid-template-rows: 1fr auto;
  gap: var(--mainGapY) var(--mainGapX);
  align-items: stretch;
  min-height: 100%;
}

#cyberHero .cy-story {
  grid-column: 1;
  grid-row: 1;
  align-self: start;
  margin-top: var(--storyTop);
  max-width: 320px;
  color: var(--accent);
  font-family: "Archangelsk", Arial, sans-serif;
  font-size: var(--ui);
  line-height: 1.28;
  font-style: italic;
  white-space: pre-line;
  opacity: 0;
  animation: cyFadeUp .9s cubic-bezier(0.22,1,0.36,1) .22s forwards;
}

#cyberHero .cy-center {
  grid-column: 2;
  grid-row: 1 / span 2;
  align-self: center;
  justify-self: center;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  text-align: center;
  min-width: 0;
  min-height: calc(100svh - 180px);
  opacity: 0;
  animation: cyHeroIn 1.15s cubic-bezier(0.22,1,0.36,1) .12s forwards;
  transform: translateY(var(--heroShift));
}

#cyberHero .cy-title {
  margin: 0;
  font-family: "Archangelsk", Arial, sans-serif;
  font-size: var(--title);
  line-height: .92;
  font-weight: 400 !important;
  color: #fff;
  text-shadow: 0 6px 18px rgba(0,0,0,.28);
  font-style: italic;
  text-wrap: balance;
  overflow-wrap: normal;
  word-break: normal;
  hyphens: manual;
}

#cyberHero .cy-title .line { display: block; }
#cyberHero .cy-title .accent { margin-top: 12px; color: var(--accent); }

#cyberHero .glitch-target { position: relative; display: inline-block; }

#cyberHero .glitch-target::before,
#cyberHero .glitch-target::after {
  content: attr(data-text);
  position: absolute;
  inset: 0;
  opacity: 0;
  pointer-events: none;
}

#cyberHero .glitch-target::before {
  color: rgba(183,255,0,.55);
  transform: translate(2px,0);
  animation: cyGlitchA 5.2s infinite;
}

#cyberHero .glitch-target::after {
  color: rgba(255,255,255,.45);
  transform: translate(-2px,0);
  animation: cyGlitchB 4.7s infinite;
}

#cyberHero .cy-cta-wrap {
  margin-top: 52px;
  width: 287px;
}

#cyberHero .cy-cta,
#cyberHero .cy-third-cta,
#cyberHero .cy-tour-btn {
  display: block;
  width: 100%;
  position: relative;
  text-decoration: none !important;
  isolation: isolate;
  transition: transform .28s ease, filter .28s ease;
}

#cyberHero .cy-cta:hover,
#cyberHero .cy-third-cta:hover,
#cyberHero .cy-tour-btn:hover {
  transform: skewX(-6deg) translateY(-1px);
  filter: drop-shadow(0 0 18px rgba(183,255,0,.18));
}

#cyberHero .cy-cta img,
#cyberHero .cy-third-cta img,
#cyberHero .cy-tour-btn img {
  display: block;
  width: 100%;
  height: auto;
}

#cyberHero .cy-cta span,
#cyberHero .cy-third-cta span,
#cyberHero .cy-tour-btn span {
  position: absolute;
  inset: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  color: #111;
  font-family: "Archangelsk", Arial, sans-serif;
  font-size: 21px;
  font-style: italic;
  line-height: 1;
  transform: translateY(1px);
}

#cyberHero .cy-side-wrap {
  grid-column: 3;
  grid-row: 2;
  align-self: center;
  justify-self: end;
  width: 100%;
  max-width: 270px;
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 14px;
  will-change: transform;
  animation: cySideFloat 5.6s ease-in-out 1.2s infinite;
}

#cyberHero .cy-side-logo {
  display: inline-flex;
  align-items: center;
  justify-content: flex-start;
  width: fit-content;
  margin-left: -2px;
  opacity: 0;
  animation: cyBottomIn 1s cubic-bezier(0.22,1,0.36,1) .28s forwards;
}

#cyberHero .cy-side-logo img {
  display: block;
  width: 132px;
  height: auto;
  object-fit: contain;
  opacity: .68;
  transition: opacity .22s ease, transform .22s ease;
}

#cyberHero .cy-side-logo:hover img {
  opacity: .9;
  transform: translateY(-1px);
}

#cyberHero .cy-side {
  width: 100%;
  color: #fff;
  font-family: "Archangelsk", Arial, sans-serif;
  font-size: var(--ui);
  line-height: 1.42;
  font-style: italic;
  opacity: 0;
  animation: cyBottomIn 1s cubic-bezier(0.22,1,0.36,1) .34s forwards;
}

#cyberHero .cy-partners-mini {
  position: absolute;
  left: 50%;
  bottom: 24px;
  transform: translateX(-50%);
  display: flex;
  align-items: center;
  justify-content: center;
  gap: clamp(24px, 4vw, 72px);
  width: 100%;
  max-width: 560px;
  z-index: 5;
  opacity: 0;
  animation: fadeUp 1s ease .6s forwards;
}

#cyberHero .cy-panel--1 .cy-partners-mini {
  display: none;
}

/* Скрываем дубли (для мобильного marquee) на десктопе */
#cyberHero .cy-partners-mini a:nth-child(n+5) { display: none; }

#cyberHero .cy-partners-mini img {
  display: block;
  width: auto;
  height: 28px;
  max-width: 150px;
  object-fit: contain;
  opacity: .52;
  filter: grayscale(1) brightness(1.15);
  transition: opacity .22s ease, filter .22s ease, transform .22s ease;
}

#cyberHero .cy-partners-mini a {
  display: flex;
  align-items: center;
  justify-content: center;
  text-decoration: none !important;
}

#cyberHero .cy-partners-mini a:hover img {
  opacity: .96;
  filter: grayscale(0) brightness(1.2);
  transform: translateY(-2px);
}
/* Десктоп: трек = просто flex-обёртка, наследует gap от родителя */
#cyberHero .cy-partners-mini-track {
  display: contents; /* трек "прозрачен" — его дети ведут себя как прямые дети .cy-partners-mini */
  animation: none;
}

/* ===== MOBILE-ONLY ELEMENTS (hidden on desktop) ===== */
#cyberHero .cy-m-lore,
#cyberHero .cy-m-line,
#cyberHero .cy-m-scroll,
#cyberHero .cy-p2-art { display: none; }

/* ===== TYPO UNIFY ===== */
#cyberHero .cy-second-title .kicker,
#cyberHero .cy-third-title,
#cyberHero .cy-third-title-right,
#cyberHero .cy-tour-title,
#cyberHero .cy-steps-title,
#cyberHero .cy-panel-6-title,
#cyberHero .cy-partner-title {
  font-weight: 400 !important;
}