/* EALP — Human Firewall hero scene (index2), v2. Дополняет hero-motion.css. */

.ealp-shield-hero {
  background: #020503;
}

.ealp-shield-backdrop,
.ealp-shield-canvas,
.ealp-shield-shade {
  position: absolute;
  inset: 0;
  z-index: 0;
  pointer-events: none;
}

.ealp-shield-backdrop {
  background:
    radial-gradient(ellipse 34% 52% at 67% 50%, rgba(96, 168, 0, .13), transparent 72%),
    radial-gradient(ellipse 60% 70% at 72% 46%, rgba(30, 64, 8, .26), transparent 76%),
    linear-gradient(180deg, #020503 0%, #030805 60%, #020403 100%);
  transition: opacity 1.2s ease;
}

.ealp-shield-backdrop::after {
  position: absolute;
  inset: 0;
  content: "";
  opacity: .5;
  background:
    linear-gradient(rgba(156, 255, 0, .045) 1px, transparent 1px) 0 0 / 56px 56px,
    linear-gradient(90deg, rgba(156, 255, 0, .045) 1px, transparent 1px) 0 0 / 56px 56px;
  -webkit-mask-image: radial-gradient(ellipse 44% 62% at 67% 50%, #000 0%, transparent 78%);
  mask-image: radial-gradient(ellipse 44% 62% at 67% 50%, #000 0%, transparent 78%);
}

.ealp-shield-canvas {
  display: block;
  width: 100%;
  height: 100%;
  opacity: 0;
  transition: opacity .6s ease;
}

.ealp-shield-hero.is-shield-ready .ealp-shield-canvas {
  opacity: 1;
}

.ealp-shield-shade {
  background:
    linear-gradient(90deg, rgba(2, 5, 3, .94) 0%, rgba(2, 5, 3, .8) 26%, rgba(2, 5, 3, .34) 46%, rgba(2, 5, 3, 0) 60%),
    linear-gradient(0deg, rgba(2, 4, 3, .92) 0%, rgba(2, 4, 3, .4) 18%, transparent 34%);
}

/* Во время интро: фон без сетки-подсветки справа, слайды и управление неактивны */
.ealp-shield-hero.is-shield-intro .ealp-shield-backdrop {
  opacity: .35;
}

.ealp-shield-hero.is-shield-intro .ealp-motion-slides,
.ealp-shield-hero:not(.is-intro-complete) .ealp-motion-controls {
  pointer-events: none;
}

/* ---------- интро: титры и световые эффекты ---------- */

.ealp-shield-intro {
  position: absolute;
  inset: 0;
  z-index: 4;
  overflow: hidden;
  pointer-events: none;
}

.ealp-shield-hero.is-intro-complete .ealp-shield-intro {
  opacity: 0;
  transition: opacity .6s ease;
}

.ealp-shield-intro__veil,
.ealp-shield-intro__flash {
  position: absolute;
  inset: 0;
  opacity: 0;
}

.ealp-shield-intro__veil {
  background:
    radial-gradient(ellipse 70% 70% at 50% 50%, transparent 30%, rgba(255, 86, 24, .32) 78%, rgba(120, 24, 0, .6) 100%);
  mix-blend-mode: screen;
}

.ealp-shield-intro__flash {
  --fx: 50% 50%;
  background: radial-gradient(circle at var(--fx), rgba(235, 255, 200, .95) 0%, rgba(156, 255, 0, .45) 16%, rgba(60, 120, 0, .12) 42%, transparent 68%);
  mix-blend-mode: screen;
}

/* титры: базово — по центру */
.ealp-shield-intro__title {
  --edge: max(40px, calc((100vw - 1280px) / 2));
  position: absolute;
  top: 50%;
  left: 50%;
  width: min(1100px, calc(100vw - 48px));
  text-align: center;
  opacity: 0;
  filter: blur(14px);
  transform: translate3d(-50%, -42%, 0) scale(1.06);
  transition: opacity .55s ease, filter .7s ease, transform 1.4s cubic-bezier(.16, .8, .2, 1);
  text-shadow: 0 0 60px rgba(0, 0, 0, .75), 0 0 18px rgba(0, 0, 0, .6);
}

/* мягкая тёмная подложка за титрами, чтобы текст не сливался с анимацией */
.ealp-shield-intro__title::before {
  position: absolute;
  inset: -18% -12%;
  z-index: -1;
  background: radial-gradient(ellipse at center, rgba(1, 4, 2, .82) 0%, rgba(1, 4, 2, .55) 45%, transparent 72%);
  content: "";
  pointer-events: none;
}

.ealp-shield-intro__title.is-on {
  opacity: 1;
  filter: blur(0);
  transform: translate3d(-50%, -50%, 0) scale(1);
}

/* слева */
.ealp-shield-intro__title--left {
  left: var(--edge);
  width: min(760px, 58vw);
  text-align: left;
  transform: translate3d(-40px, -50%, 0);
}

.ealp-shield-intro__title--left.is-on {
  transform: translate3d(0, -50%, 0);
}

/* справа */
.ealp-shield-intro__title--right {
  right: var(--edge);
  left: auto;
  width: min(720px, 56vw);
  text-align: right;
  transform: translate3d(40px, -50%, 0);
}

.ealp-shield-intro__title--right.is-on {
  transform: translate3d(0, -50%, 0);
}

.ealp-shield-intro__title span {
  display: block;
  margin-bottom: 26px;
  color: rgba(210, 255, 145, .82);
  font-family: "Inter", Arial, sans-serif;
  font-size: 11px;
  font-weight: 700;
  letter-spacing: .32em;
  text-transform: uppercase;
}

.ealp-shield-intro__title strong {
  display: block;
  color: #fff;
  font-family: "Manrope", "Inter", Arial, sans-serif;
  font-size: clamp(42px, 6vw, 104px);
  font-weight: 400;
  line-height: .96;
  letter-spacing: -.05em;
}

.ealp-shield-intro__title strong i {
  display: block;
  color: #9cff00;
  font-style: normal;
  font-weight: 300;
}

.ealp-shield-intro__title--threat span {
  color: rgba(255, 170, 120, .9);
}

.ealp-shield-intro__title--threat strong i {
  color: #ff7a3c;
}

/* бренд: крупно слева, там же, где потом появится заголовок слайда */
.ealp-shield-intro__title--brand {
  top: 46%;
  width: min(900px, 64vw);
  transition: opacity .8s ease, filter 1s ease, transform 2.6s cubic-bezier(.16, .8, .2, 1);
}

.ealp-shield-intro__title--brand strong {
  font-size: clamp(44px, 6.4vw, 118px);
  font-weight: 500;
  letter-spacing: -.045em;
  line-height: .92;
  text-transform: uppercase;
}

.ealp-shield-intro__title--brand strong i {
  display: inline;
  color: #fff;
  font-weight: 300;
}

.ealp-shield-intro__title--brand strong b {
  display: block;
  color: #9cff00;
  font-weight: 300;
}

.ealp-shield-intro__title--brand em {
  display: block;
  margin-top: 30px;
  color: rgba(255, 255, 255, .7);
  font-family: "Inter", Arial, sans-serif;
  font-size: clamp(11px, 1vw, 14px);
  font-style: normal;
  font-weight: 600;
  letter-spacing: .2em;
  text-transform: uppercase;
}

.ealp-shield-skip {
  position: absolute;
  right: clamp(24px, 4vw, 64px);
  bottom: 32px;
  z-index: 7;
  display: inline-flex;
  align-items: center;
  gap: 10px;
  min-height: 40px;
  padding: 0 16px;
  border: 1px solid rgba(255, 255, 255, .22);
  background: rgba(5, 12, 7, .4);
  color: rgba(255, 255, 255, .72);
  font: 600 10px/1 "Inter", Arial, sans-serif;
  letter-spacing: .18em;
  text-transform: uppercase;
  cursor: pointer;
  transition: opacity .4s ease, border-color .2s ease, color .2s ease;
}

.ealp-shield-skip span {
  color: #9cff00;
}

.ealp-shield-skip:hover,
.ealp-shield-skip:focus-visible {
  border-color: #9cff00;
  color: #fff;
}

.ealp-shield-hero.is-shield-skipping .ealp-shield-skip,
.ealp-shield-hero.is-intro-complete .ealp-shield-skip {
  opacity: 0;
  pointer-events: none;
}

/* Без JS — показываем контент сразу */
html:not(.has-js) .ealp-shield-hero .ealp-motion-content > *,
html:not(.has-js) .ealp-shield-hero .ealp-motion-controls {
  opacity: 1;
  transform: none;
}

html:not(.has-js) .ealp-shield-intro,
html:not(.has-js) .ealp-shield-skip {
  display: none;
}

/* Без WebGL — статичный фон */
.ealp-shield-hero.is-shield-fallback .ealp-shield-canvas {
  display: none;
}

.ealp-shield-hero.is-shield-fallback .ealp-shield-backdrop {
  background:
    radial-gradient(circle at 67% 50%, rgba(156, 255, 0, .2) 0, rgba(156, 255, 0, .05) 22%, transparent 34%),
    radial-gradient(ellipse 60% 70% at 72% 46%, rgba(30, 64, 8, .3), transparent 76%),
    #020503;
}

@media (max-width: 900px) {
  .ealp-shield-shade {
    background:
      linear-gradient(90deg, rgba(2, 7, 4, .9), rgba(2, 7, 4, .5) 62%, rgba(2, 7, 4, .2)),
      linear-gradient(0deg, rgba(2, 5, 3, .92), transparent 46%);
  }
}

@media (max-width: 620px) {
  .ealp-shield-backdrop {
    background:
      radial-gradient(ellipse 60% 34% at 74% 30%, rgba(96, 168, 0, .16), transparent 72%),
      linear-gradient(180deg, #020503 0%, #030805 60%, #020403 100%);
  }

  .ealp-shield-backdrop::after {
    -webkit-mask-image: radial-gradient(ellipse 60% 34% at 74% 30%, #000 0%, transparent 78%);
    mask-image: radial-gradient(ellipse 60% 34% at 74% 30%, #000 0%, transparent 78%);
  }

  .ealp-shield-shade {
    background:
      linear-gradient(90deg, rgba(2, 7, 4, .82), rgba(2, 7, 4, .45) 70%, rgba(2, 7, 4, .25)),
      linear-gradient(0deg, rgba(2, 5, 3, .94), transparent 50%);
  }

  .ealp-shield-intro__title span {
    margin-bottom: 18px;
    font-size: 8px;
    letter-spacing: .2em;
  }

  .ealp-shield-intro__title strong {
    font-size: clamp(34px, 10.5vw, 46px);
  }

  .ealp-shield-intro__title::before {
    inset: -30% -20%;
    background: radial-gradient(ellipse at center, rgba(1, 4, 2, .9) 0%, rgba(1, 4, 2, .7) 50%, transparent 76%);
  }

  .ealp-shield-intro__title--brand strong {
    font-size: clamp(30px, 9vw, 42px);
  }

  .ealp-shield-intro__title--left,
  .ealp-shield-intro__title--right,
  .ealp-shield-intro__title--brand {
    left: 20px;
    right: 20px;
    width: auto;
    text-align: left;
  }

  .ealp-shield-skip {
    right: 16px;
    bottom: 22px;
  }
}

@media (prefers-reduced-motion: reduce) {
  .ealp-shield-intro,
  .ealp-shield-skip {
    display: none !important;
  }

  .ealp-shield-canvas,
  .ealp-shield-backdrop {
    transition: none !important;
  }
}

.ealp-shield-skip[hidden] {
  display: none;
}

/* ---------- мобильные и планшеты: лёгкое стекло на всём фоне после интро ---------- */
@media (max-width: 900px) {
  .ealp-shield-hero.is-intro-complete .ealp-shield-shade,
  html:not(.has-js) .ealp-shield-hero .ealp-shield-shade {
    background:
      linear-gradient(160deg, rgba(255, 255, 255, .035), transparent 45%),
      linear-gradient(180deg, rgba(3, 9, 5, .18), rgba(3, 9, 5, .26));
    -webkit-backdrop-filter: blur(5px) saturate(115%);
    backdrop-filter: blur(5px) saturate(115%);
  }

  .ealp-shield-hero .ealp-motion-content {
    box-sizing: border-box;
    margin-left: -22px;
    width: min(800px, calc(100vw - 36px));
    padding: 26px 24px 28px;
    border: 1px solid transparent;
    background: transparent;
    opacity: 0;
    transition: opacity .7s ease;
  }

  .ealp-shield-hero.is-intro-complete .ealp-motion-slide.is-active .ealp-motion-content,
  html:not(.has-js) .ealp-shield-hero .ealp-motion-content {
    opacity: 1;
  }

  /* после интро сцена — спокойный фон */
  .ealp-shield-hero.is-intro-complete .ealp-shield-canvas {
    opacity: .92;
  }
}

@media (max-width: 620px) {
  .ealp-shield-hero {
    height: 612px;
    min-height: 612px;
  }

  .ealp-shield-hero .ealp-motion-content {
    top: 20px;
    transform: none;
    margin-left: -10px;
    width: calc(100vw - 32px);
    padding: 22px 18px 24px;
    border-radius: 6px;
  }

  .ealp-shield-hero .ealp-motion-eyebrow {
    margin-bottom: 16px;
  }

  .ealp-shield-hero .ealp-motion-content h1,
  .ealp-shield-hero .ealp-motion-content h2 {
    font-size: clamp(34px, 10.6vw, 52px);
  }

  .ealp-shield-hero .ealp-motion-lead {
    margin: 16px 0 20px;
  }

  .ealp-shield-hero .ealp-motion-cta {
    width: 100%;
    justify-content: space-between;
  }
}

/* Браузеры без backdrop-filter сохраняют прозрачную дымку на всём фоне. */
@supports not ((-webkit-backdrop-filter: blur(1px)) or (backdrop-filter: blur(1px))) {
  @media (max-width: 900px) {
    .ealp-shield-hero.is-intro-complete .ealp-shield-shade,
    html:not(.has-js) .ealp-shield-hero .ealp-shield-shade {
      background: rgba(3, 9, 5, .3);
    }
  }
}