/* ==========================================================================
   ТРИУМФ — story.css
   Графика ниже первого экрана: продолжение истории «искры». Тексты секций
   не меняются — только свет, глубина и связь с первым экраном.
   1. Нить света: от искры вниз по сценам 01–05 тянется тонкая красная линия,
      которая «дорисовывается», когда сцена входит в экран.
   2. Тарифы наследуют стороны: «Первичный разбор» — холодный край (машина),
      «Консультация юриста» — тёплый (человек).
   3. Финальный призыв: руки возвращаются — маленькие, по углам, снова
      тянутся друг к другу.
   ========================================================================== */

/* 1. нить */
.scene{ position:relative; }
.scene::before{
  content:""; position:absolute; left:calc(var(--gutter) - 1px); top:0; bottom:0; width:2px; z-index:0;
  background:linear-gradient(180deg, rgba(163,47,54,0) 0%, rgba(163,47,54,.55) 18%, rgba(163,47,54,.55) 82%, rgba(163,47,54,0) 100%);
  transform:scaleY(0); transform-origin:50% 0;
  transition:transform 1.4s var(--ease);
}
.scene:has(.scene-n.seen)::before{ transform:scaleY(1); }
.scene-n{ position:relative; padding-left:22px; }
.scene-n::before{
  content:""; position:absolute; left:-1px; top:.55em; width:8px; height:8px; border-radius:50%;
  background:#c33c46; box-shadow:0 0 14px 4px rgba(163,47,54,.45);
  transform:translateX(-50%) scale(0); transition:transform .6s var(--ease) .9s;
}
.scene-n.seen::before{ transform:translateX(-50%) scale(1); }
@media (max-width: 860px){ .scene::before, .scene-n::before{ display:none; } .scene-n{ padding-left:0; } }

/* 2. тарифы — те же две стороны */
.tiers .tier{ position:relative; overflow:hidden; }
.tiers .tier::after{
  content:""; position:absolute; inset:0; pointer-events:none; opacity:.9;
  background:radial-gradient(70% 60% at 0% 0%, rgba(120,150,210,.16), transparent 70%);
}
.tiers .tier--human::after{ background:radial-gradient(70% 60% at 100% 0%, rgba(163,47,54,.20), transparent 70%); }

/* 3. финал — руки возвращаются */
.close-cta{ isolation:isolate; }
.cta-hands{ position:absolute; inset:0; z-index:1; pointer-events:none; overflow:hidden; }
.cta-hands img{
  position:absolute; top:50%; width:clamp(260px, 34vw, 560px); height:auto; opacity:.55;
  filter:drop-shadow(0 30px 40px rgba(0,0,0,.7)) brightness(.9);
  transition:transform 1.4s var(--ease), opacity 1.4s var(--ease);
}
.cta-hands .h-ai{ left:-6vw; transform:translate3d(-10vw, -46%, 0); }
.cta-hands .h-human{ right:-6vw; transform:translate3d(10vw, -46%, 0); }
.close-cta:has([data-reveal].seen) .cta-hands .h-ai{ transform:translate3d(0, -46%, 0); }
.close-cta:has([data-reveal].seen) .cta-hands .h-human{ transform:translate3d(0, -46%, 0); }
.close-cta .wrap{ z-index:2; }
@media (max-width: 860px){ .cta-hands img{ width:52vw; opacity:.35; } }