/* Простые финальные блоки в исходной структуре HiTech. */

.optional-block[hidden] {
  display: none !important;
}

.theme-section {
  position: relative;
  isolation: isolate;
  padding-bottom: 4rem;
}

.theme-wrapper {
  position: relative;
  z-index: 2;
}

.theme-title,
.theme-title.large {
  font-weight: 600;
  text-shadow: none;
}

.theme-wrapper .theme-title.large {
  display: flex;
  flex-direction: column;
  align-items: center;
  width: 100%;
  max-width: 100%;
  box-sizing: border-box;
  text-align: center;
  overflow-wrap: break-word;
}

/* Обычные span — блок по центру. Wide переопределит налево. */
.theme-wrapper .theme-title > span {
  display: block;
  width: 100%;
  max-width: 100%;
  box-sizing: border-box;
  text-align: center;
  white-space: normal;
  overflow-wrap: break-word;
}

/* Широкий вариант: слева, в одну/две строки от левого края, без принудительного center. */
.theme-wrapper.theme-wrapper--wide .theme-title.large {
  align-items: flex-start;
  text-align: left;
}
.theme-wrapper.theme-wrapper--wide .theme-title > span {
  display: inline;
  width: auto;
  max-width: none;
  text-align: left;
}

.team-title-text {
  display: block;
  width: 100%;
  max-width: 100%;
  white-space: normal;
  text-align: center;
}

@media (min-width: 981px) {
  .team-section .theme-title.large { font-size: 2.12rem; }
  .team-section .team-keep { white-space: nowrap; }
}

@media (max-width: 980px) {
  .team-section .theme-wrapper {
    padding-inline: 0.25rem;
  }
  .team-section .theme-title.large {
    padding-inline: 0;
  }
  .team-section .team-keep {
    white-space: normal;
  }
}

@media (max-width: 479px) {
  .team-section .theme-title.large {
    font-size: 1.28rem;
  }
}

.color-purple,
.color-green,
.color-yellow,
.color-x4,
.color-x16,
.color-x64,
.color-x256,
.color-x512 {
  -webkit-text-fill-color: currentColor;
  background: none;
  text-shadow: none;
}

.color-purple {
  color: #b9a3ff;
}

.team-section .theme-title .color-purple,
.footer-studio {
  background-image: linear-gradient(105deg, #b9a3ff 0%, #cbb6ff 37%, #e6d8ff 44%, #f8f4ff 48%, #fff 50%, #f0e7ff 53%, #9b78ee 58%, #cbb6ff 65%, #b9a3ff 100%);
  background-size: 270% 100%;
  background-position: 140% 50%;
  -webkit-background-clip: text;
  background-clip: text;
  -webkit-text-fill-color: transparent;
  animation: wipe-date-chrome 5s ease-in-out infinite;
}

.color-green,
.color-x4 {
  color: #a9e6a5;
}

.color-yellow,
.color-x16 {
  color: #f3db78;
}

.color-x64 {
  color: #91e4ea;
}

.color-x256 {
  color: #eba4df;
}

.color-x512 {
  color: #ec8d8d;
}

/* Нанит-комплекс: заголовок, текст и изображение без карточки-оболочки. */
.core-section {
  padding-top: 2rem;
}

.core-section .theme-wrapper {
  margin-bottom: 0;
}

.core-stage {
  position: relative;
  display: grid;
  width: min(100%, 74rem);
  min-height: 0;
  margin: 0 auto;
  place-items: center;
  overflow: visible;
}

.core-stage::before,
.core-stage::after {
  content: "";
  position: absolute;
  top: 20%;
  bottom: 15%;
  width: 50%;
  opacity: 0.35;
  pointer-events: none;
  background: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 600 400' preserveAspectRatio='xMidYMid meet' fill='none' stroke='%23b9a3ff' stroke-width='1'%3E%3Cpath d='M600 200H440L355 115H225L150 40H0M600 225H465L385 305H240L190 355H0'/%3E%3Ccircle cx='150' cy='40' r='3' fill='%23b9a3ff' stroke='none'/%3E%3Ccircle cx='190' cy='355' r='3' fill='%23b9a3ff' stroke='none'/%3E%3C/svg%3E") no-repeat center / 100% 100%;
}

.core-stage::before {
  left: 0;
}

.core-stage::after {
  right: 0;
  transform: scaleX(-1);
}

.core-signal {
  position: absolute;
  top: 20%;
  width: 50%;
  height: 65%;
  overflow: visible;
  pointer-events: none;
  fill: none;
  stroke: #e5c9ff;
  stroke-width: 2;
  filter: drop-shadow(0 0 5px #c776ff);
}

.core-signal-left { left: 0; }
.core-signal-right { right: 0; transform: scaleX(-1); }
.core-signal-right * { animation-delay: -3s; }
.core-mobile { display: none; }
.core-mobile-base { opacity: 0.35; stroke: #b9a3ff; stroke-width: 0.5; filter: none; }
.core-mobile-base path { animation: none; opacity: 1; stroke-dasharray: none; }
.core-mobile-base circle { fill: #b9a3ff; stroke: none; }
.core-mobile-right { right: 0; transform: scaleX(-1); }
.core-mobile-right > *:not(.core-mobile-base) { animation-delay: -3s; }
.core-mobile-left { left: 0; }

.core-signal path {
  stroke-dasharray: var(--signal-length) 100;
  stroke-linecap: round;
  opacity: 0;
  animation: core-signal-in 7s linear infinite;
}

.core-signal .core-signal-out { animation-name: core-signal-out; }
.core-signal .core-signal-out:nth-of-type(2) { animation-name: core-signal-edge; }
.core-signal-flash {
  fill: #f3e4ff;
  stroke: #e5c9ff;
  opacity: 0;
  animation: core-signal-flash 7s ease-out infinite;
}

@keyframes core-signal-in {
  0%, 5% { stroke-dashoffset: 0; opacity: 0; }
  6% { opacity: 1; }
  35% { stroke-dashoffset: -100; opacity: 1; }
  36%, 100% { stroke-dashoffset: -100; opacity: 0; }
}

@keyframes core-signal-out {
  0%, 38% { stroke-dashoffset: 0; opacity: 0; }
  39% { opacity: 1; }
  72% { stroke-dashoffset: -100; opacity: 1; }
  73%, 100% { stroke-dashoffset: -100; opacity: 0; }
}

@keyframes core-signal-edge {
  0%, 38% { stroke-dashoffset: 0; opacity: 0; }
  39% { opacity: 1; }
  50% { stroke-dashoffset: -100; opacity: 1; }
  51%, 100% { stroke-dashoffset: -100; opacity: 0; }
}

@keyframes core-signal-flash {
  0%, 34%, 48%, 100% { opacity: 0; stroke-width: 0; }
  38% { opacity: 1; stroke-width: 5; }
}

@media (prefers-reduced-motion: reduce) {
  .core-signal { display: none; }
}

.core-video {
  position: relative;
  z-index: 1;
  width: min(52rem, 94vw);
  height: auto;
  overflow: visible;
  pointer-events: none;
}

.core-fill,
.core-poster,
.core-video canvas {
  display: none;
}

.core-video video {
  display: block;
  width: 100%;
  max-width: 100%;
  height: auto;
  margin: 0;
  object-fit: contain;
  background: transparent;
}

.theme-section:has(> .theme-wrapper .theme-title, > .team-portal)::after {
  content: "";
  position: absolute;
  z-index: -1;
  width: min(16rem, 22vw);
  aspect-ratio: 240 / 160;
  pointer-events: none;
  opacity: 0.16;
  background: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 240 160' fill='none' stroke='%238c98a6' stroke-width='1'%3E%3Cpath d='M240 22H106L70 58M240 53H165L128 90H58L10 138'/%3E%3C/svg%3E") no-repeat center / contain;
  top: 8%;
  right: 0;
  transform: none;
}

.theme-section:nth-child(even of .theme-section:has(> .theme-wrapper .theme-title, > .team-portal):not([hidden]))::after {
  right: auto;
  left: 0;
  transform: scaleX(-1);
}

.theme-section:nth-child(3n of .theme-section:has(> .theme-wrapper .theme-title, > .team-portal):not([hidden]))::after {
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 240 160' fill='none' stroke='%238c98a6' stroke-width='1'%3E%3Cpath d='M0 12L66 78H154L224 148M0 128H94L174 208'/%3E%3C/svg%3E");
  transform: scaleX(-1);
}

.theme-section:nth-child(6n of .theme-section:has(> .theme-wrapper .theme-title, > .team-portal):not([hidden]))::after {
  transform: none;
}

/* Топ игроков и команда: привычные card-top-player по центру. */
.card-container.three,
.team-cards {
  width: auto;
  max-width: 63rem;
  margin-right: auto;
  margin-left: auto;
  justify-content: center;
  flex-wrap: wrap;
  overflow: visible;
}

.ranking-section .card-top-player,
.team-cards .card-top-player {
  flex: 0 0 11.1rem;
  width: 11.1rem;
  min-width: 11.1rem;
  max-width: 11.1rem;
  min-height: 0;
  padding: 1.5rem 2rem;
  border-radius: 3rem;
  background-color: #00000080;
}

.team-cards .top-avatar.shadow-purple {
  position: relative;
  overflow: visible;
  filter: none;
}

.team-cards .top-avatar.shadow-purple::before,
.team-cards .top-avatar.shadow-purple::after {
  content: "";
  position: absolute;
  left: 50%;
  top: 50%;
  z-index: 0;
  pointer-events: none;
  border-radius: 50%;
  transform: translate(-50%, -48%);
}

.team-cards .top-avatar.shadow-purple::before {
  width: 6.8rem;
  height: 5.8rem;
  background: radial-gradient(ellipse at center, rgba(136, 0, 255, 0.9) 0%, rgba(136, 0, 255, 0.42) 48%, transparent 74%);
  filter: blur(7px);
}

.team-cards .top-avatar.shadow-purple::after {
  width: 9rem;
  height: 7.4rem;
  background: radial-gradient(ellipse at center, rgba(168, 85, 255, 0.55) 0%, rgba(136, 0, 255, 0.2) 46%, transparent 72%);
  filter: blur(18px);
}

.team-cards .top-avatar.shadow-purple > .top-avatar {
  position: relative;
  z-index: 2;
  overflow: hidden;
  border-radius: 1rem;
  box-shadow: none;
}

.team-band {
  --orbit-period: 36s;
  position: relative;
  align-self: stretch;
  width: 100%;
  max-width: 100%;
  min-width: 0;
}

.team-cards {
  position: relative;
  z-index: 1;
}

@media (min-width: 981px) {
  .card-container.three.team-cards {
    --team-gap: clamp(0.65rem, 1.25vw, 1.5rem);
    width: calc(100% - 4rem);
    max-width: calc(6 * 11.1rem + 5 * var(--team-gap));
    flex-wrap: nowrap;
    gap: var(--team-gap);
  }

  .team-cards .card-top-player {
    flex: 1 1 0;
    min-width: 0;
    padding-inline: clamp(0.6rem, calc(4vw - 1.65rem), 2rem);
  }
}

.ranking-section .card-title,
.team-cards .card-title,
.footer-credit .card-title {
  margin: 1rem 0 0;
  color: var(--silver);
  font-size: 1rem;
  font-weight: 500;
  line-height: 130%;
  text-transform: none;
}

.ranking-section .card-text,
.team-cards .card-text {
  width: auto;
  max-width: 10rem;
  margin: 0;
  color: var(--silver);
  font-size: 0.75rem;
  font-weight: 300;
  line-height: 130%;
  text-align: center;
}

.ranking-section .number {
  margin-top: 0;
  color: var(--atom);
  font-size: 1.5rem;
  font-weight: 100;
  line-height: 110%;
  text-shadow: 0 0 0.3125rem #fff;
}

.ranking-section .top-avatar,
.team-cards .top-avatar {
  width: 5rem;
  height: 5rem;
  border-radius: 1rem;
}

/* Промокод повторяет обычную большую карточку HiTech. */
.promo-card.card-big {
  width: min(100%, 75rem);
  max-width: 75rem;
  min-height: 25rem;
  padding: 4rem;
  border-color: rgba(243, 219, 120, 0.22);
  justify-content: center;
  background: rgba(4, 8, 16, 0.62);
  box-shadow: none;
  backdrop-filter: none;
  -webkit-backdrop-filter: none;
}

.promo-card .card-text-wrapper-big {
  width: 100%;
  max-width: 34rem;
  padding: 0;
  align-items: center;
  text-align: center;
}

.promo-card .promo-heading .theme-title {
  max-width: 33rem;
  font-size: 2rem;
  line-height: 1.2;
  letter-spacing: normal;
  text-align: center;
}

@media (min-width: 981px) {
  .promo-card .promo-heading .theme-title { font-size: 2.65rem; }
}

.promo-heading {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 0.6rem;
}

.promo-card .promo-intro {
  text-align: center;
}

@media (max-width: 980px) {
  .promo-card .promo-intro { font-size: 0.9rem; }
}

.promo-card .promo-code {
  border-color: rgba(243, 219, 120, 0.38);
  color: var(--silver);
  background: rgba(0, 0, 0, 0.22);
}

.promo-card .nav-button-start.inactive {
  color: #f3db78;
  border-color: rgba(243, 219, 120, 0.45);
  background: rgba(20, 19, 12, 0.65);
  text-shadow: none;
  filter: none;
  box-shadow: inset 0 0 1.5rem rgba(243, 219, 120, 0.05);
  transition: border-color 180ms ease, box-shadow 180ms ease, background-color 180ms ease;
}

.promo-card .nav-button-start.inactive span {
  background-image: linear-gradient(105deg, #f3db78 0%, #f8e594 37%, #fff5c4 44%, #fffdf0 48%, #fff 50%, #fff7cf 53%, #e4bc55 58%, #f8e594 65%, #f3db78 100%);
  background-size: 270% 100%;
  background-position: 140% 50%;
  -webkit-background-clip: text;
  background-clip: text;
  -webkit-text-fill-color: transparent;
  animation: wipe-date-chrome 5s ease-in-out infinite;
}

@media (prefers-reduced-motion: reduce) {
  .promo-card .nav-button-start.inactive span {
    animation: none;
    background: none;
    -webkit-text-fill-color: currentColor;
  }
}

.promo-card .nav-button-start.inactive:hover,
.promo-card .nav-button-start.inactive:focus-visible {
  color: #fff3b3;
  border-color: rgba(243, 219, 120, 0.85);
  background: rgba(45, 40, 18, 0.8);
  box-shadow: 0 0 1.5rem rgba(243, 219, 120, 0.16);
}

.promo-card .nav-button-start.inactive:active {
  color: #fff3b3;
  border-color: #f3db78;
  background: rgba(55, 48, 20, 0.85);
}

.promo-card > .grid {
  opacity: 1;
}

.promo-card .promo-circuit {
  top: 50%;
  width: 48%;
  height: 210%;
  transform: translateY(-50%);
  overflow: hidden;
  -webkit-mask-image: linear-gradient(to bottom, transparent, black 20%, black 80%, transparent);
  mask-image: linear-gradient(to bottom, transparent, black 20%, black 80%, transparent);
}

.promo-card .promo-circuit.left {
  left: -15%;
  right: auto;
}

.promo-card .promo-circuit.right {
  left: auto;
  right: -15%;
}

/* Команда и нижняя кнопка используют исходные классы HiTech. */
.team-section {
  padding-bottom: 0;
  overflow: visible;
  isolation: auto;
}

.team-section .theme-wrapper {
  margin-top: 2.2rem;
  margin-bottom: 0.35rem;
}

.button-end {
  order: 2;
  position: relative;
  z-index: 5;
  margin-top: 1.25rem;
  margin-bottom: 2.5rem;
}

@media (max-width: 980px) {
@media (max-width: 680px) {
  .team-section .button-end {
    flex-flow: column;
    align-items: center;
    height: auto;
    gap: 1.6rem;
  }
}

  .card-container.three,
  .team-cards {
    flex-flow: row nowrap;
    justify-content: flex-start;
    width: 100%;
    max-width: none;
    margin: 1.5rem 0 0;
    padding: 0.4rem 0 1rem;
    overflow-x: auto;
    overflow-y: hidden;
    -webkit-overflow-scrolling: touch;
  }

  .card-container.three.team-cards {
    margin-top: 0.35rem;
    padding: 2.2rem 1rem 2.4rem;
  }
}

@media (max-width: 680px) {
@media (max-width: 479px) {
  .team-section { row-gap: 0.75rem; }
  .card-container.three.team-cards { padding-top: 1.2rem; padding-bottom: 1.2rem; }
  .team-section .button-end { row-gap: 1.6rem; }
}

  .theme-section {
    padding-bottom: 2.5rem;
    overflow: visible;
  }

  .team-section {
    padding-bottom: 0;
  }

  .theme-section:has(> .theme-wrapper .theme-title, > .team-portal)::after {
    top: -3rem;
    width: min(16rem, 30vw);
    opacity: 0.3;
  }

  .core-section {
    row-gap: 0.35rem;
    padding-top: 1.25rem;
    padding-bottom: 0.5rem;
  }

  .core-stage {
    display: flex;
    justify-content: center;
    align-items: flex-start;
    width: 100%;
    min-height: 0;
    margin-top: 0;
    overflow: hidden;
  }

  .core-stage::before,
  .core-stage::after {
    display: none;
  }

  .core-signal-left, .core-signal-right { display: none; }
  .core-mobile {
    display: block;
    top: 23%;
    height: auto;
    stroke-width: 0.8;
  }

  @media (prefers-reduced-motion: reduce) {
    .core-mobile > :not(.core-mobile-base) { display: none; }
  }

  .core-video {
    flex: 0 0 30rem;
    width: 30rem;
    max-width: none;
    height: auto;
  }

  .core-mobile {
    display: none;
  }

  .ranking-section .card-top-player,
  .team-cards .card-top-player {
    padding: 1.5rem;
    border-radius: 2rem;
  }

  .ranking-section .card-title,
  .team-cards .card-title,
  .footer-credit .card-title {
    font-size: 0.85rem;
  }

  .ranking-section .card-text,
  .team-cards .card-text {
    max-width: 7rem;
    font-size: 0.6rem;
  }

  .footer-credit .card-text {
    font-size: 0.65rem;
  }

  .ranking-section .number {
    margin-bottom: 0;
    font-size: 1rem;
  }

  .promo-card.card-big {
    width: calc(100% - 2rem);
    min-height: 27rem;
    padding: 3rem 1.5rem;
    border-radius: 2.5rem;
  }

  .promo-card .promo-heading .theme-title {
    font-size: 1.75rem;
  }

  .promo-card .promo-intro { font-size: 0.85rem; }

  .promo-card .promo-circuit {
    width: 40%;
    height: 150%;
    opacity: 0.65;
  }

  .promo-card .promo-circuit.left { left: -25%; }
  .promo-card .promo-circuit.right { right: -25%; }

  .promo-card .promo-code {
    padding-right: 1rem;
    padding-left: 1rem;
  }

}


/* Аккуратная перекраска финальной кнопки HiTech в GregTech. */
.button-start {
  color: #03101e;
  background-color: #6bd0ff;
  background-image: linear-gradient(90deg, #6bd0ff 34%, #9fd4ff);
}

.button-start:hover {
  color: #fff;
  border: .0625rem solid #6bd0ff;
  background-color: transparent;
  background-image: none;
  box-shadow: 0 2px 1.25rem -.3125rem #6bd0ff;
}

.button-end {
  border-color: #6bd0ff;
}

@supports (mask-composite: exclude) or (-webkit-mask-composite: xor) {
  .card-container .card:nth-child(n),
  .feature-section .card-big,
  .energy-section .card-big,
  .promo-card.card-big,
  .card-top-player {
    border-color: transparent;
  }

  .card-top-player {
    position: relative;
    isolation: isolate;
  }

  .promo-card.card-big {
    --card-accent: var(--color-x16);
  }

  .card::after,
  .card-big::after,
  .card-top-player::after {
    content: "";
    display: block;
    position: absolute;
    inset: 0;
    z-index: 10;
    border-radius: inherit;
    padding: 1px;
    pointer-events: none;
    background: linear-gradient(to bottom right,
      color-mix(in srgb, var(--card-accent, #91b6d0) 45%, transparent),
      color-mix(in srgb, var(--card-accent, #91b6d0) 8%, transparent) 35%,
      color-mix(in srgb, var(--card-accent, #91b6d0) 8%, transparent) 65%,
      color-mix(in srgb, var(--card-accent, #91b6d0) 45%, transparent));
    -webkit-mask: linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0);
    -webkit-mask-composite: xor;
    mask: linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0);
    mask-composite: exclude;
  }

  .card::after {
    background: linear-gradient(to bottom right,
      color-mix(in srgb, var(--card-accent) 88%, white),
      color-mix(in srgb, var(--card-accent) 10%, transparent) 35%,
      color-mix(in srgb, var(--card-accent) 10%, transparent) 65%,
      color-mix(in srgb, var(--card-accent) 88%, white));
  }
}

@property --portal-hue {
  syntax: "<angle>";
  inherits: true;
  initial-value: 0deg;
}

.team-portal {
  order: 1;
  position: static;
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  width: 100%;
  min-height: 0;
  padding: 0.2rem 0 0;
  overflow: visible;
  background: none;
}

.team-portal[data-reveal] {
  transform: none;
}

/* The second selector also hides the control created by a cached older script. */
.team-orbit-copy,
.team-orbit-toggle {
  display: none;
}

@media (min-width: 981px) and (hover: hover) and (pointer: fine) and (prefers-reduced-motion: no-preference) {
  .team-section:has(> .team-band.is-orbit) > .theme-wrapper {
    margin-top: 3.2rem;
  }

  .team-band.is-orbit .team-cards {
    --orbit-drop: clamp(28rem, 42vw, 41rem);
    container-type: inline-size;
    display: grid;
    grid-template: max-content / 1fr;
    height: 39rem;
    padding: 1rem 0 0;
    overflow: clip;
    pointer-events: none;
    mask-image: linear-gradient(#000 72%, transparent),
      linear-gradient(90deg, transparent, #000 5%, #000 95%, transparent);
    mask-composite: intersect;
  }

  .team-band.is-orbit .card-top-player {
    display: flex;
    grid-area: 1 / 1;
    justify-self: start;
    width: min(11.1rem, 15.4cqw);
    pointer-events: auto;
    animation: team-orbit-across calc(2 * var(--orbit-period)) linear infinite,
      team-orbit-arc calc(2 * var(--orbit-period)) infinite;
    animation-delay: calc(var(--orbit-phase) * var(--orbit-period));
  }

  .team-band.is-orbit ~ .team-portal {
    z-index: 2;
    margin-top: -21rem;
    pointer-events: none;
  }

  .team-band.is-orbit ~ .button-end {
    margin-bottom: 1.5rem;
  }
}

/* Each copy starts half a cycle apart. The reset happens beyond the mask. */
@keyframes team-orbit-across {
  0% { translate: calc(-12.5cqw - 50%) 0; }
  62.5%, 100% { translate: calc(112.5cqw - 50%) 0; }
}

@keyframes team-orbit-arc {
  0% {
    transform: translateY(var(--orbit-drop));
    animation-timing-function: cubic-bezier(0.18, 0.63, 0.57, 1);
  }
  31.25% {
    transform: translateY(0);
    animation-timing-function: cubic-bezier(0.43, 0, 0.82, 0.37);
  }
  62.5%, 100% { transform: translateY(var(--orbit-drop)); }
}

.footer-scene {
  position: relative;
  z-index: 2;
  flex: none;
  width: 100%;
  height: 11rem;
  margin: 0;
  overflow: visible;
  pointer-events: none;
}

.portal-rift {
  position: absolute;
  left: 50%;
  top: 50%;
  z-index: 1;
  width: min(22.5rem, 92vw);
  aspect-ratio: 16 / 9;
  transform: translate(-50%, -54%) scale(1);
  transform-origin: center;
  pointer-events: none;
  -webkit-mask-image: radial-gradient(ellipse 58% 62% at 50% 48%, #000 22%, transparent 72%);
  mask-image: radial-gradient(ellipse 58% 62% at 50% 48%, #000 22%, transparent 72%);
}

.portal-void {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: cover;
  background: #12081f;
  -webkit-transform: translateZ(0);
  transform: translateZ(0);
  filter: hue-rotate(var(--portal-hue, 0deg)) saturate(1.15) brightness(1.08);
}

.footer-studio {
  position: relative;
  z-index: 1;
  margin: 0.15rem 0 0;
  color: #b9a3ff;
  font-family: "Ruberoid", Arial, sans-serif;
  font-size: 0.95rem;
  font-weight: 500;
  letter-spacing: 0.16em;
  text-align: center;
}

.footer-portal-button {
  position: absolute;
  left: 50%;
  top: 50%;
  z-index: 2;
  height: 10rem;
  margin: 0;
  padding: 0;
  border: 0;
  background: none;
  transform: translate(-50%, -50%);
  cursor: pointer;
  pointer-events: auto;
}

.footer-portal-button:focus-visible {
  outline: 2px solid #b9a3ff;
  outline-offset: 0.35rem;
}

.footer-portal-button .footer-portal {
  display: block;
  height: 10rem;
  width: auto;
  filter: hue-rotate(var(--portal-hue, 0deg));
}

.portal-spiral {
  transform-box: view-box;
  transform-origin: 51.73% 48.38%;
  transform: rotate(var(--spiral-turn, 0deg));
  /* Иначе непрозрачная заливка спирали полностью закрывает void-видео. */
  opacity: 0.48;
  mix-blend-mode: screen;
}

.team-section:has(.team-portal.is-ignited) {
  animation: portal-hue-wash 6.4s ease forwards;
}

.team-portal.is-ignited .portal-rift {
  animation: rift-grow 6.1s ease forwards;
}

.team-portal.is-ignited .footer-studio {
  animation: wipe-date-chrome 5s ease-in-out infinite, studio-pulse 6.4s ease-in-out;
}

@keyframes rift-grow {
  0%, 24% { transform: translate(-50%, -54%) scale(1); }
  58%, 74% { transform: translate(-50%, -54%) scale(1.14); }
  100% { transform: translate(-50%, -54%) scale(1); }
}

@keyframes portal-hue-wash {
  0% { --portal-hue: 0deg; }
  28% { --portal-hue: 85deg; }
  64% { --portal-hue: 85deg; }
  100% { --portal-hue: 0deg; }
}

@keyframes studio-pulse {
  0%, 100% { filter: brightness(1); }
  40%, 65% { filter: brightness(1.35); }
}

@media (prefers-reduced-motion: reduce) {
  .team-section .theme-title .color-purple,
  .footer-studio {
    animation: none !important;
    background: none;
    -webkit-text-fill-color: currentColor;
  }
  .team-portal.is-ignited .portal-rift,
  .team-portal.is-ignited .footer-studio { animation: none !important; }
  .team-portal.is-ignited .footer-portal { filter: hue-rotate(85deg); }
  .team-portal.is-ignited .footer-studio { color: #f7f4ff; }
}

.footer-eruption {
  position: absolute;
  z-index: 4;
  inset: auto 8rem 0;
  height: 28rem;
  overflow: visible;
  pointer-events: none;
}

@media (max-width: 991px) {
  .footer-eruption {
    left: 0;
    right: 0;
  }
}

@media (min-width: 681px) {
  .energy-section .card-big {
    padding-left: calc(5rem / 1.5);
  }
}

@media (min-width: 981px) {
  .energy-section .card-big {
    padding-left: calc(6rem / 1.5);
  }
}

.footer-eruption::before {
  content: "";
  position: absolute;
  inset: 0;
  background: radial-gradient(ellipse 22% 70% at 27% 110%, rgba(128, 56, 255, .25), transparent 70%),
    radial-gradient(ellipse 25% 75% at 73% 110%, rgba(159, 88, 255, .22), transparent 70%);
  mask-image: linear-gradient(transparent, #000 35%, transparent);
  animation: eruption-glow 5s ease-in-out infinite;
}

.footer-eruption .eruption-ray {
  position: absolute;
  bottom: 0;
  left: var(--x);
  width: 3px;
  height: var(--height);
  opacity: 0;
  background: linear-gradient(to top, #b271ff, rgba(197, 146, 255, .6) 38%, transparent);
  box-shadow: 0 0 1rem .15rem rgba(150, 76, 255, .35);
  transform-origin: bottom;
  animation: eruption-ray 5.5s ease-out var(--delay) infinite;
}

.footer-eruption .eruption-spark {
  position: absolute;
  left: calc(var(--x) * 1vw - (100vw - 100%) / 2);
  bottom: 0;
  width: var(--size, 3px);
  height: var(--size, 3px);
  border-radius: 50%;
  opacity: 0;
  background: #ead8ff;
  box-shadow: 0 0 5px 2px rgba(183, 112, 255, .7);
  animation: eruption-rise var(--duration, 5s) ease-out var(--delay) infinite;
}

@keyframes eruption-glow {
  0%, 100% { opacity: .35; }
  18% { opacity: 1; }
  35% { opacity: .45; }
  65% { opacity: .8; }
}

@keyframes eruption-ray {
  0%, 12%, 50%, 100% { opacity: 0; transform: rotate(var(--angle)) scaleY(.2); }
  20% { opacity: .65; }
  38% { opacity: 0; transform: rotate(var(--angle)) scaleY(1); }
}

@keyframes eruption-rise {
  0% { opacity: 0; transform: translate(0, 0) scale(.5); }
  8% { opacity: .95; }
  72% { opacity: .65; }
  100% { opacity: 0; transform: translate(var(--drift), var(--rise, -78vh)) scale(.3); }
}

@media (prefers-reduced-motion: reduce) {
  .footer-eruption::before { animation: none; opacity: .4; }
  .footer-eruption .eruption-ray, .footer-eruption .eruption-spark { display: none; }
}

/* Видимые эффекты продолжают работать во время прокрутки страницы. */
html.is-scrolling .electric-circuit *,
html.is-scrolling .pattern-signal,
html.is-scrolling .pattern-pulse,
html.is-scrolling .item-swarm-fly,
html.is-scrolling .item-swarm-hero,
html.is-scrolling .item-swarm-softit,
html.is-scrolling .item-swarm-spark,
html.is-scrolling .item-swarm-ambience,
html.is-scrolling .hero-logo,
html.is-scrolling .scroll-cue i {
  animation-play-state: running !important;
}

@media (max-width: 980px) {
  main > .theme-section {
    content-visibility: visible;
    contain-intrinsic-size: none;
  }

  .card-container.is-autoscroll,
  .locator-cards.is-autoscroll {
    scroll-snap-type: none;
  }

  @media (pointer: coarse) {
    .card-container.is-autoscroll,
    .locator-cards.is-autoscroll {
      -webkit-touch-callout: none;
      -webkit-user-select: none;
      user-select: none;
    }
  }
}

@media (max-width: 680px) {
  .card-big-text-only { min-height: 22rem; }
}

main > .theme-section.is-effects-paused,
main > .theme-section.is-effects-paused::before,
main > .theme-section.is-effects-paused::after,
main > .theme-section.is-effects-paused *,
main > .theme-section.is-effects-paused *::before,
main > .theme-section.is-effects-paused *::after {
  animation-play-state: paused !important;
}