/* ══════════════════════════════════════════════════════
   cta3.css — Cinema Projector CTA  (v3 — DRAMATIC)
   ══════════════════════════════════════════════════════ */

/* ── Секция ── */
.tnx-cta3-section {
  position: relative;
  /* Тёплое свечение под линзой — свет реально падает на «пол» */
  background:
    radial-gradient(ellipse 55% 80% at 50% -5%,
      rgba(68, 48, 8, 0.90) 0%,
      rgba(30, 20, 4, 0.60) 35%,
      transparent 70%),
    #04050B;
  padding: 100px 0 84px;
}

/* Виньетка: тёмные края, центр открыт */
.tnx-cta3-section::before {
  content: '';
  position: absolute;
  inset: 0;
  background:
    radial-gradient(ellipse 60% 60% at 50% 50%,
      transparent 25%, rgba(2,3,10,.65) 100%),
    linear-gradient(to right,
      rgba(2,3,10,.55) 0%, transparent 9%,
      transparent 91%, rgba(2,3,10,.55) 100%);
  pointer-events: none;
  z-index: 6;
}

/* Медленная полоска сканирования */
.tnx-cta3-section::after {
  content: '';
  position: absolute;
  left: 0; right: 0; top: 0;
  height: 100px;
  background: linear-gradient(
    to bottom,
    transparent,
    rgba(255,230,130,.032) 50%,
    transparent);
  pointer-events: none;
  z-index: 6;
  animation: tnx3-scan 9s linear infinite;
  will-change: transform, opacity;
}
@keyframes tnx3-scan {
  0%   { transform: translateY(-100px); opacity: 0; }
  5%   { opacity: 1; }
  92%  { opacity: 1; }
  100% { transform: translateY(540px);  opacity: 0; }
}

/* ── Strips-wrap: обрезает всё кроме линзы ── */
.tnx-cta3-strips-wrap {
  position: absolute;
  inset: 0;
  overflow: hidden;
  pointer-events: none;
  z-index: 3;
}

/* ══════════════════════════════════════════════════════
   ЛУЧ ПРОЕКТОРА
   Два слоя:
   1) Широкая мягкая дымка (conic-gradient + blur)
   2) Яркий клиновидный core (clip-path polygon + linear-gradient)
   ══════════════════════════════════════════════════════ */

/* Слой 1 — атмосферная дымка вокруг луча */
.tnx-cta3-beam {
  position: absolute;
  top: 0; left: 50%;
  width: 1200px; height: 115%;
  transform-origin: 50% 0%;
  background: conic-gradient(
    from 270deg at 50% 0%,
    transparent             0deg,
    rgba(255,195, 65, .06)  9deg,
    rgba(255,215,100, .16) 17deg,
    rgba(255,235,145, .26) 22deg,
    rgba(255,240,155, .30) 25.5deg,
    rgba(255,235,145, .26) 29deg,
    rgba(255,215,100, .16) 34deg,
    rgba(255,195, 65, .06) 42deg,
    transparent            52deg
  );
  filter: blur(5px);
  z-index: 1;
  animation:
    tnx3-sweep   13s ease-in-out infinite,
    tnx3-flicker  5s ease-in-out infinite;
  will-change: transform, opacity;
}

/* Слой 2 — яркий клиновидный core */
.tnx-cta3-beam::before {
  content: '';
  position: absolute;
  inset: 0;
  /* Треугольник: узкий у линзы, расширяется вниз */
  clip-path: polygon(49.2% 0%, 50.8% 0%, 76% 100%, 24% 100%);
  background: linear-gradient(
    to bottom,
    rgba(255, 255, 220, 0.82) 0%,
    rgba(255, 248, 185, 0.55) 8%,
    rgba(255, 235, 150, 0.32) 22%,
    rgba(255, 215, 110, 0.16) 45%,
    rgba(255, 190,  70, 0.06) 70%,
    transparent               95%
  );
  /* Слегка мягкие края */
  filter: blur(0.8px);
}

/* Слой 3 — пыль внутри луча */
.tnx-cta3-beam::after {
  content: '';
  position: absolute;
  top: 0; left: 28%; right: 28%;
  height: 200%;
  background-image:
    radial-gradient(circle 1.5px at  16%  3%,  rgba(255,245,160,.80) 0%, transparent 100%),
    radial-gradient(circle 1px  at  61%  9%,  rgba(255,238,145,.70) 0%, transparent 100%),
    radial-gradient(circle 2px  at  36% 16%,  rgba(255,250,170,.60) 0%, transparent 100%),
    radial-gradient(circle 1px  at  80% 21%,  rgba(255,245,160,.72) 0%, transparent 100%),
    radial-gradient(circle 1.5px at  10% 29%,  rgba(255,240,148,.62) 0%, transparent 100%),
    radial-gradient(circle 1px  at  53% 34%,  rgba(255,250,170,.58) 0%, transparent 100%),
    radial-gradient(circle 1px  at   5% 41%,  rgba(255,245,160,.48) 0%, transparent 100%),
    radial-gradient(circle 2px  at  71% 47%,  rgba(255,238,145,.52) 0%, transparent 100%),
    radial-gradient(circle 1px  at  31% 54%,  rgba(255,250,170,.58) 0%, transparent 100%),
    radial-gradient(circle 1.5px at  87% 61%,  rgba(255,245,160,.50) 0%, transparent 100%),
    radial-gradient(circle 1px  at  20% 68%,  rgba(255,240,148,.55) 0%, transparent 100%),
    radial-gradient(circle 1px  at  56% 74%,  rgba(255,250,170,.45) 0%, transparent 100%),
    radial-gradient(circle 1.5px at  44% 81%,  rgba(255,245,160,.52) 0%, transparent 100%),
    radial-gradient(circle 1px  at  75% 88%,  rgba(255,238,145,.40) 0%, transparent 100%),
    /* +100% repeat для бесшовного loop */
    radial-gradient(circle 1.5px at  16% 103%, rgba(255,245,160,.80) 0%, transparent 100%),
    radial-gradient(circle 1px  at  61% 109%, rgba(255,238,145,.70) 0%, transparent 100%),
    radial-gradient(circle 2px  at  36% 116%, rgba(255,250,170,.60) 0%, transparent 100%),
    radial-gradient(circle 1px  at  80% 121%, rgba(255,245,160,.72) 0%, transparent 100%),
    radial-gradient(circle 1.5px at  10% 129%, rgba(255,240,148,.62) 0%, transparent 100%),
    radial-gradient(circle 1px  at  53% 134%, rgba(255,250,170,.58) 0%, transparent 100%),
    radial-gradient(circle 1px  at   5% 141%, rgba(255,245,160,.48) 0%, transparent 100%),
    radial-gradient(circle 2px  at  71% 147%, rgba(255,238,145,.52) 0%, transparent 100%),
    radial-gradient(circle 1px  at  31% 154%, rgba(255,250,170,.58) 0%, transparent 100%),
    radial-gradient(circle 1.5px at  87% 161%, rgba(255,245,160,.50) 0%, transparent 100%),
    radial-gradient(circle 1px  at  20% 168%, rgba(255,240,148,.55) 0%, transparent 100%),
    radial-gradient(circle 1px  at  56% 174%, rgba(255,250,170,.45) 0%, transparent 100%),
    radial-gradient(circle 1.5px at  44% 181%, rgba(255,245,160,.52) 0%, transparent 100%),
    radial-gradient(circle 1px  at  75% 188%, rgba(255,238,145,.40) 0%, transparent 100%);
  animation: tnx3-dust-rise 14s linear infinite;
  will-change: transform;
}

/* Sweep — качание луча вокруг линзы */
@keyframes tnx3-sweep {
  0%   { transform: translateX(-50%) rotate(-12deg); }
  20%  { transform: translateX(-50%) rotate( -1deg); }
  42%  { transform: translateX(-50%) rotate( 11deg); }
  57%  { transform: translateX(-50%) rotate( 14deg); }
  74%  { transform: translateX(-50%) rotate(  3deg); }
  90%  { transform: translateX(-50%) rotate( -9deg); }
  100% { transform: translateX(-50%) rotate(-12deg); }
}

@keyframes tnx3-dust-rise {
  0%   { transform: translateY(0); }
  100% { transform: translateY(-50%); }
}

@keyframes tnx3-flicker {
  0%,100% { opacity: 1.00; }
  24%     { opacity: .65; }
  26%     { opacity: .92; }
  55%     { opacity: .78; }
  57%     { opacity: 1.00; }
  80%     { opacity: .86; }
  82%     { opacity: 1.00; }
}

/* ══════════════════════════════════════════════════════
   ЛИНЗА — ОСЛЕПЛЯЮЩИЙ BLOOM
   5 слоёв box-shadow = эффект реального источника света
   ══════════════════════════════════════════════════════ */
.tnx-cta3-lens {
  position: absolute;
  top: -24px;
  left: 50%;
  width: 48px; height: 48px;
  border-radius: 50%;
  z-index: 10;
  background: radial-gradient(
    circle at 35% 33%,
    #fffef0 0%,
    #FFE066 18%,
    #FFAD00 46%,
    #E06000 72%,
    #5C2400 100%
  );
  animation:
    tnx3-lens-bloom 5s  ease-in-out infinite,
    tnx3-lens-drift 13s ease-in-out infinite;
  will-change: transform;
}

/* Блик на стекле */
.tnx-cta3-lens::before {
  content: '';
  position: absolute;
  top: 15%; left: 14%;
  width: 32%; height: 32%;
  background: radial-gradient(
    circle, rgba(255,255,255,.95) 0%, transparent 65%);
  border-radius: 50%;
}

/* Внешние лучи — кольцо с градиентом */
.tnx-cta3-lens::after {
  content: '';
  position: absolute;
  inset: -8px;
  border-radius: 50%;
  background: radial-gradient(
    circle,
    rgba(255,210,80,.35) 30%,
    rgba(255,160,30,.12) 60%,
    transparent 75%
  );
  animation: tnx3-lens-bloom 5s ease-in-out infinite reverse;
}

/* BLOOM анимация: пульсирующее свечение как живой источник */
@keyframes tnx3-lens-bloom {
  0%,100% {
    box-shadow:
      /* белый core — "стекло" */
      0 0  3px  2px rgba(255,255,235, 1.00),
      /* жёлтый tight */
      0 0 16px  7px rgba(255,210, 60, 0.95),
      /* оранжевый medium */
      0 0 55px 22px rgba(255,145, 20, 0.65),
      /* широкий bloom */
      0 0 130px 52px rgba(255, 95,  5, 0.35),
      /* атмосферный ореол */
      0 0 300px 110px rgba(255, 65,  0, 0.14);
  }
  24% {
    box-shadow:
      0 0  2px  1px rgba(255,255,235, 0.85),
      0 0 10px  4px rgba(255,210, 60, 0.65),
      0 0 34px 14px rgba(255,145, 20, 0.40),
      0 0  80px 32px rgba(255, 95,  5, 0.22),
      0 0 180px 70px rgba(255, 65,  0, 0.09);
  }
  26% {
    box-shadow:
      0 0  4px  3px rgba(255,255,235, 1.00),
      0 0 22px 10px rgba(255,220, 80, 1.00),
      0 0 70px 28px rgba(255,160, 30, 0.80),
      0 0 160px 65px rgba(255,110, 10, 0.44),
      0 0 380px 140px rgba(255, 70,  0, 0.18);
  }
}

/* Линза дрейфует синхронно с лучом */
@keyframes tnx3-lens-drift {
  0%   { transform: translateX(calc(-50% -  8px)); }
  20%  { transform: translateX(calc(-50% -  1px)); }
  42%  { transform: translateX(calc(-50% +  7px)); }
  57%  { transform: translateX(calc(-50% +  9px)); }
  74%  { transform: translateX(calc(-50% +  2px)); }
  90%  { transform: translateX(calc(-50% -  6px)); }
  100% { transform: translateX(calc(-50% -  8px)); }
}

/* ── Зерно плёнки ── */
.tnx-cta3-grain {
  position: absolute; inset: 0; z-index: 2;
  opacity: .055;
  pointer-events: none;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='200' height='200'%3E%3Cfilter id='g'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.68' numOctaves='4' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23g)'/%3E%3C/svg%3E");
  animation: tnx3-grain .08s steps(1) infinite;
  will-change: transform;
  contain: paint;
}
@keyframes tnx3-grain {
  0%   { transform: translate(  0,   0); }
  25%  { transform: translate(-3px,  2px); }
  50%  { transform: translate( 2px, -3px); }
  75%  { transform: translate(-2px,  3px); }
}

/* ── Кинолента — полосы по краям ── */
.tnx-cta3-strip {
  position: absolute;
  top: 0; bottom: 0;
  width: 36px;
  background: #080910;
}
.tnx-cta3-strip--l {
  left: 0;
  border-right: 1px solid rgba(255,255,255,.04);
}
.tnx-cta3-strip--r {
  right: 0;
  border-left: 1px solid rgba(255,255,255,.04);
}
.tnx-cta3-strip::before {
  content: '';
  position: absolute;
  top: 0; bottom: 0;
  left: 50%;
  transform: translateX(-50%);
  width: 14px;
  background: repeating-linear-gradient(
    to bottom,
    transparent            0px,
    transparent            9px,
    rgba(255,255,255,.07)  9px,
    rgba(255,255,255,.07) 21px,
    transparent           21px,
    transparent           30px
  );
}

/* ── Контент ── */
.tnx-cta3-wrap {
  position: relative;
  z-index: 7;
  text-align: center;
  max-width: 640px;
  margin: 0 auto;
  padding: 0 20px;
}

.tnx-cta3-eyebrow {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  font-size: 11px;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 2.5px;
  color: #FF9F40;
  margin-bottom: 24px;
}
.tnx-cta3-eyebrow::before,
.tnx-cta3-eyebrow::after {
  content: '';
  display: inline-block;
  width: 26px; height: 1px;
  background: rgba(255,159,64,.35);
}

.tnx-cta3-h2 {
  font-size: clamp(32px, 5vw, 58px);
  font-weight: 900;
  line-height: 1.1;
  letter-spacing: -.5px;
  color: #EEE8DF;
  margin: 0 0 16px;
  text-shadow: 0 0 80px rgba(255,200,80,.25);
}

.tnx-cta3-sub {
  font-size: 17px;
  color: #434857;
  line-height: 1.7;
  margin: 0 0 40px;
}

/* ── Кнопка ── */
a.tnx-cta3-btn,
button.tnx-cta3-btn {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  font-family: inherit;
  font-size: 17px;
  font-weight: 700;
  line-height: 1;
  padding: 18px 52px;
  border-radius: 100px;
  border: none;
  cursor: pointer;
  text-decoration: none;
  color: #ffffff;
  background: linear-gradient(135deg, #D95800 0%, #FF7A00 50%, #FFA030 100%);
  box-shadow:
    0 0  0 1px rgba(255,130,0,.28),
    0 0 36px 0  rgba(255,100,0,.45),
    0 8px 28px  rgba(200,70,0,.35);
  transition: transform .28s ease, box-shadow .28s ease;
  margin-bottom: 30px;
  position: relative;
  z-index: 8;
}
a.tnx-cta3-btn:hover,
button.tnx-cta3-btn:hover {
  transform: translateY(-4px) scale(1.03);
  color: #ffffff;
  text-decoration: none;
  box-shadow:
    0 0  0 1px rgba(255,140,0,.40),
    0 0 64px 0  rgba(255,100,0,.60),
    0 16px 44px rgba(200,70,0,.48);
}
a.tnx-cta3-btn svg,
button.tnx-cta3-btn svg {
  width: 18px; height: 18px; flex-shrink: 0;
}

/* ── Trust-строка ── */
.tnx-cta3-trust {
  font-size: 13px;
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: 6px 20px;
}
.tnx-cta3-trust span {
  display: inline-flex;
  align-items: center;
  gap: 5px;
  color: #363C52;
}
.tnx-cta3-trust svg {
  width: 13px; height: 13px; flex-shrink: 0;
}

/* ── Мобильные ── */
@media (max-width: 680px) {
  .tnx-cta3-strip   { display: none; }
  .tnx-cta3-lens    { width: 36px; height: 36px; top: -18px; }
  .tnx-cta3-h2      { font-size: 30px; }
  .tnx-cta3-section { padding: 72px 0 62px; }
  a.tnx-cta3-btn,
  button.tnx-cta3-btn { padding: 16px 36px; font-size: 15px; }
}