/* svodno-intro.css — scoped overlay, no :root pollution */

#svodno-intro {
  /* brand dark tokens — локально, не трогают :root темы */
  --svi-bg:          #0A1018;
  --svi-bg-elev:     #111927;
  --svi-bg-sunken:   #070C14;
  --svi-ink:         #ECF1F8;
  --svi-ink-2:       #C9D2DE;
  --svi-ink-3:       #8794A4;
  --svi-ink-4:       #4B5563;
  --svi-line:        #1F2937;
  --svi-line-strong: #2F3B4C;
  --svi-primary:     #7FBC9E;
  --svi-primary-soft:#2A4F3C;
  --svi-primary-deep:#B5D4C2;
  --svi-accent:      #E0A65A;
  --svi-accent-soft: #6E4416;
  --svi-accent-deep: #F2C885;
  --svi-pos:         #7FBC9E;
  --svi-neg:         #FF6E5C;
  --svi-warn:        #F5CE5E;

  position: fixed;
  inset: 0;
  z-index: 2147483000;
  /* full-bleed ночной фон — тянется/сжимается под любой экран (%-based) */
  background:
    radial-gradient(95% 62% at 72% 12%, rgba(127,188,158,0.10), transparent 60%),
    radial-gradient(90% 62% at 14% 92%, rgba(224,166,90,0.07), transparent 60%),
    #0A1018;
  overflow: hidden;
  font-family: 'Manrope', sans-serif;
  -webkit-font-smoothing: antialiased;
  transition: opacity 0.9s ease;
}

#svodno-intro.svi-fading {
  opacity: 0;
  pointer-events: none;
}

/* ─── full-bleed сетка на весь экран ─── */
#svodno-intro::before {
  content: '';
  position: absolute;
  inset: 0;
  z-index: 0;
  pointer-events: none;
  background-image:
    linear-gradient(to right, rgba(255,255,255,0.03) 1px, transparent 1px),
    linear-gradient(to bottom, rgba(255,255,255,0.03) 1px, transparent 1px);
  background-size: 64px 64px;
  -webkit-mask-image: radial-gradient(circle at 50% 46%, #000 0%, transparent 80%);
  mask-image: radial-gradient(circle at 50% 46%, #000 0%, transparent 80%);
}
/* ─── full-bleed виньетка — затемнение краёв экрана ─── */
#svodno-intro::after {
  content: '';
  position: absolute;
  inset: 0;
  z-index: 12;
  pointer-events: none;
  background: radial-gradient(125% 108% at 50% 48%, transparent 58%, rgba(0,0,0,0.32) 90%, rgba(0,0,0,0.5) 100%);
}

/* ─── stage: масштабируемый 1920×1080 ─── */
#svodno-intro .svi-stage {
  position: absolute;
  top: 50%;
  left: 50%;
  width: 1920px;
  height: 1080px;
  transform: translate(-50%, -50%) scale(0.6);
  background: transparent;   /* фон ушёл на контейнер (full-bleed) */
  overflow: hidden;
  z-index: 1;
}

/* ─── ambient blobs на контейнере (full-bleed, не клипаются сценой) ─── */
#svodno-intro .svi-blob {
  z-index: 0;
  pointer-events: none;
}

/* ─── базовый анимируемый класс ─── */
#svodno-intro .svi-a {
  animation-duration: 23s;
  animation-timing-function: cubic-bezier(.22,.61,.36,1);
  animation-fill-mode: both;
  animation-play-state: paused;
  animation-delay: calc(var(--t, 0) * -1s);
}

/* ─── vignette ─── */
#svodno-intro .svi-vignette {
  position: absolute;
  inset: 0;
  pointer-events: none;
  z-index: 25;
  background: radial-gradient(125% 105% at 50% 48%, transparent 56%, rgba(0,0,0,0.34) 88%, rgba(0,0,0,0.5) 100%);
}

/* ─── progress bar ─── */
#svodno-intro .svi-prog-wrap {
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  height: 3px;
  background: rgba(255,255,255,0.06);
  z-index: 30;
  transition: opacity 0.4s;
}

#svodno-intro .svi-prog-bar {
  height: 100%;
  width: 0%;
  background: var(--svi-primary);
  box-shadow: 0 0 10px rgba(127,188,158,0.7);
  transition: width 0.05s linear;
}

/* ─── skip button ─── */
#svodno-intro .svi-skip-btn {
  position: absolute;
  right: 28px;
  bottom: 24px;
  z-index: 30;
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 11px 20px;
  border-radius: 9999px;
  border: 1px solid var(--svi-line-strong);
  background: rgba(17,25,39,0.78);
  -webkit-backdrop-filter: blur(12px);
  backdrop-filter: blur(12px);
  color: var(--svi-ink-2);
  font-family: 'Manrope', sans-serif;
  font-size: 14px;
  font-weight: 600;
  cursor: pointer;
  transition: color 0.15s, border-color 0.15s;
}

#svodno-intro .svi-skip-btn:hover {
  color: var(--svi-ink);
  border-color: var(--svi-primary);
}

#svodno-intro .svi-skip-btn:focus-visible {
  outline: 2px solid var(--svi-primary);
  outline-offset: 2px;
}

/* ─── SCENE CONTAINERS ─── */
@keyframes svi-scBrand {
  0%   { opacity: 1; }
  11.3%{ opacity: 1; }
  13.9%{ opacity: 0; }
  100% { opacity: 0; }
}
@keyframes svi-scData {
  0%, 13%  { opacity: 0; }
  15.6%    { opacity: 1; }
  28.7%    { opacity: 1; }
  31.3%    { opacity: 0; }
  100%     { opacity: 0; }
}
@keyframes svi-scConv {
  0%, 29.6%{ opacity: 0; }
  32.2%    { opacity: 1; }
  49.1%    { opacity: 1; }
  51.7%    { opacity: 0; }
  100%     { opacity: 0; }
}
@keyframes svi-scDash {
  0%, 50%  { opacity: 0; }
  52.6%    { opacity: 1; }
  70.9%    { opacity: 1; }
  73.5%    { opacity: 0; }
  100%     { opacity: 0; }
}

/* ─── AMBIENT ─── */
@keyframes svi-drift {
  0%   { transform: translate(0,0) scale(1); }
  25%  { transform: translate(40px,-30px) scale(1.07); }
  50%  { transform: translate(-28px,22px) scale(1.03); }
  75%  { transform: translate(26px,30px) scale(1.06); }
  100% { transform: translate(0,0) scale(1); }
}
@keyframes svi-drift2 {
  0%   { transform: translate(0,0) scale(1); }
  33%  { transform: translate(-36px,24px) scale(1.05); }
  66%  { transform: translate(30px,-22px) scale(1.04); }
  100% { transform: translate(0,0) scale(1); }
}

/* ─── SCENE: BRAND ─── */
@keyframes svi-brandLogo {
  0%   { opacity: 0; transform: scale(.92); }
  5.7% { opacity: 1; transform: scale(1); }
  100% { opacity: 1; transform: scale(1); }
}
@keyframes svi-brandDivider {
  0%, 5.7%{ transform: scaleX(0); }
  9.6%    { transform: scaleX(1); }
  100%    { transform: scaleX(1); }
}
@keyframes svi-brandSlogan {
  0%, 7%  { opacity: 0; transform: translateY(14px); }
  10.4%   { opacity: 1; transform: none; }
  100%    { opacity: 1; transform: none; }
}
@keyframes svi-brandGlow {
  0%   { opacity: 0; }
  5.7% { opacity: .5; }
  10%  { opacity: .22; }
  100% { opacity: .22; }
}

/* ─── SCENE A: TABLES ─── */
@keyframes svi-capA {
  0%, 17.4%{ opacity: 0; transform: translateY(14px); }
  20.9%    { opacity: 1; transform: none; }
  26.1%    { opacity: 1; transform: none; }
  28.3%    { opacity: 0; transform: translateY(-10px); }
  100%     { opacity: 0; }
}
@keyframes svi-tblIn {
  0%, 15.6%{ opacity: 0; transform: translateY(16px) scale(.97); }
  21.7%    { opacity: 1; transform: none; }
  27.8%    { opacity: 1; transform: none; }
  30.9%    { opacity: 0; transform: translate(var(--dx,0), var(--dy,0)) scale(.55); }
  100%     { opacity: 0; }
}
@keyframes svi-sweep {
  0%, 16.5%{ opacity: 0; transform: translateY(-4px); }
  18.3%    { opacity: .6; }
  27%      { opacity: .6; transform: translateY(var(--sweepH, 300px)); }
  28.3%    { opacity: 0; }
  100%     { opacity: 0; }
}

/* ─── SCENE B/C: SOURCES ─── */
@keyframes svi-capB {
  0%, 32.6%{ opacity: 0; transform: translateY(14px); }
  37%      { opacity: 1; transform: none; }
  47.8%    { opacity: 1; }
  50%      { opacity: 0; transform: translateY(-10px); }
  100%     { opacity: 0; }
}
@keyframes svi-chipA {
  0%, 32.2%{ opacity: 0; transform: translateX(-26px); }
  36.5%    { opacity: 1; transform: none; }
  47.8%    { opacity: 1; transform: none; }
  50%      { opacity: 0; transform: translate(var(--cx,0), var(--cy,0)) scale(.6); }
  100%     { opacity: 0; }
}
@keyframes svi-chipB {
  0%, 33%  { opacity: 0; transform: translateX(-26px); }
  37.4%    { opacity: 1; transform: none; }
  47.8%    { opacity: 1; transform: none; }
  50%      { opacity: 0; transform: translate(var(--cx,0), var(--cy,0)) scale(.6); }
  100%     { opacity: 0; }
}
@keyframes svi-chipC {
  0%, 33.9%{ opacity: 0; transform: translateX(26px); }
  38.3%    { opacity: 1; transform: none; }
  47.8%    { opacity: 1; transform: none; }
  50%      { opacity: 0; transform: translate(var(--cx,0), var(--cy,0)) scale(.6); }
  100%     { opacity: 0; }
}
@keyframes svi-chipD {
  0%, 34.8%{ opacity: 0; transform: translateX(26px); }
  39.1%    { opacity: 1; transform: none; }
  47.8%    { opacity: 1; transform: none; }
  50%      { opacity: 0; transform: translate(var(--cx,0), var(--cy,0)) scale(.6); }
  100%     { opacity: 0; }
}
@keyframes svi-lineDraw {
  0%, 33.9%  { stroke-dashoffset: 1; }
  43.5%      { stroke-dashoffset: 0; }
  46.5%      { stroke-dashoffset: 0; opacity: 1; }
  49.1%      { opacity: 0; }
  100%       { opacity: 0; }
}
@keyframes svi-flow {
  0%, 37%  { offset-distance: 0%; opacity: 0; }
  39.1%    { opacity: 1; }
  46.5%    { offset-distance: 100%; opacity: 1; }
  47.8%    { offset-distance: 100%; opacity: 0; }
  100%     { opacity: 0; }
}
@keyframes svi-flow2 {
  0%, 38.5%{ offset-distance: 0%; opacity: 0; }
  40.5%    { opacity: 1; }
  47.8%    { offset-distance: 100%; opacity: 1; }
  48.8%    { offset-distance: 100%; opacity: 0; }
  100%     { opacity: 0; }
}
@keyframes svi-hubCard {
  0%, 37%{ opacity: 0; transform: translateY(16px) scale(.94); }
  42%    { opacity: 1; transform: none; }
  100%   { opacity: 1; transform: none; }
}

/* ─── SCENE D: DASHBOARD ─── */
@keyframes svi-capD {
  0%, 54.3%{ opacity: 0; transform: translateY(14px); }
  58.7%    { opacity: 1; transform: none; }
  69.6%    { opacity: 1; }
  71.7%    { opacity: 0; transform: translateY(-10px); }
  100%     { opacity: 0; }
}
@keyframes svi-kA {
  0%, 54.3%{ opacity: 0; transform: translateY(28px) scale(.92); }
  58.7%    { opacity: 1; transform: none; }
  69.6%    { opacity: 1; transform: none; }
  73%      { opacity: 0; transform: scale(.96); }
  100%     { opacity: 0; }
}
@keyframes svi-kB {
  0%, 54.8%{ opacity: 0; transform: translateY(28px) scale(.92); }
  59.1%    { opacity: 1; transform: none; }
  69.6%    { opacity: 1; transform: none; }
  73%      { opacity: 0; transform: scale(.96); }
  100%     { opacity: 0; }
}
@keyframes svi-kC {
  0%, 55.2%{ opacity: 0; transform: translateY(28px) scale(.92); }
  59.6%    { opacity: 1; transform: none; }
  69.6%    { opacity: 1; transform: none; }
  73%      { opacity: 0; transform: scale(.96); }
  100%     { opacity: 0; }
}
@keyframes svi-kD {
  0%, 55.7%{ opacity: 0; transform: translateY(28px) scale(.92); }
  60%      { opacity: 1; transform: none; }
  69.6%    { opacity: 1; transform: none; }
  73%      { opacity: 0; transform: scale(.96); }
  100%     { opacity: 0; }
}

/* ─── continuous (infinite) ─── */
@keyframes svi-dotPulse {
  0%, 100%{ opacity: 1; transform: scale(1); }
  50%     { opacity: .32; transform: scale(.78); }
}

/* ══════════════════════════════════════════════
   MOBILE PORTRAIT (1080×1920) — добавлено ниже,
   существующие стили НЕ изменены.
══════════════════════════════════════════════ */

/* ─── stage override для портрета ─── */
#svodno-intro .svi-stage--m {
  width: 1080px;
  height: 1920px;
  background: transparent;   /* фон ушёл на контейнер (full-bleed) */
}

/* ─── мобильные чипы: вход вертикально ─── */
/* chipA — верхний левый, вход сверху (translateY(-22px)) */
@keyframes svi-mchipA {
  0%, 32.2%{ opacity: 0; transform: translateY(-22px); }
  36.5%    { opacity: 1; transform: none; }
  47.8%    { opacity: 1; transform: none; }
  50%      { opacity: 0; transform: translate(var(--cx,0), var(--cy,0)) scale(.6); }
  100%     { opacity: 0; }
}
/* chipB — нижний левый, вход снизу (translateY(22px)) */
@keyframes svi-mchipB {
  0%, 33%  { opacity: 0; transform: translateY(22px); }
  37.4%    { opacity: 1; transform: none; }
  47.8%    { opacity: 1; transform: none; }
  50%      { opacity: 0; transform: translate(var(--cx,0), var(--cy,0)) scale(.6); }
  100%     { opacity: 0; }
}
/* chipC — верхний правый, вход сверху (translateY(-22px)) */
@keyframes svi-mchipC {
  0%, 33.9%{ opacity: 0; transform: translateY(-22px); }
  38.3%    { opacity: 1; transform: none; }
  47.8%    { opacity: 1; transform: none; }
  50%      { opacity: 0; transform: translate(var(--cx,0), var(--cy,0)) scale(.6); }
  100%     { opacity: 0; }
}
/* chipD — нижний правый, вход снизу (translateY(22px)) */
@keyframes svi-mchipD {
  0%, 34.8%{ opacity: 0; transform: translateY(22px); }
  39.1%    { opacity: 1; transform: none; }
  47.8%    { opacity: 1; transform: none; }
  50%      { opacity: 0; transform: translate(var(--cx,0), var(--cy,0)) scale(.6); }
  100%     { opacity: 0; }
}