/* ============================================================
   Новости ИИ — tunnel hero — prefixed tn-* to avoid
   clashing with the portal styles in styles.css
   ============================================================ */
.tn-stage {
  --tn-orange: #f1a23a;
  --tn-bg: #070b12;
  --tn-line: #323847;
  --tn-muted: #8b95a6;
  position: relative; width: 100%; height: 100vh; min-height: 640px;
  overflow: hidden;
  background: radial-gradient(120% 80% at 50% 16%, #0c2230 0%, #0a131d 45%, var(--tn-bg) 100%);
  perspective: 900px; perspective-origin: 50% 46%;
}

/* base tunnel photo — the receding block */
.tn-corridor {
  position: absolute; inset: -4%;
  background: url("../assets/tunnel.jpg") center 48% / cover no-repeat;
  transform: translate(calc(var(--px) * -.4), calc(var(--py) * -.4)) scale(1.04);
  filter: saturate(1.05) brightness(calc(.62 * var(--tn-bright, 1))) contrast(1.05);
}
.tn-corridor::after {
  content: ""; position: absolute; inset: 0;
  background:
    radial-gradient(60% 50% at 50% 47%, transparent 0%, rgba(7,11,18,.30) 60%, rgba(7,11,18,.86) 100%),
    linear-gradient(180deg, rgba(7,11,18,.55) 0%, transparent 26%, transparent 64%, rgba(7,11,18,.9) 100%);
}

/* the city glowing at the vanishing point — sits behind & below the logo */
.tn-city {
  position: absolute; left: 50%; top: 47%;
  transform: translate(-50%, -50%) translate(calc(var(--px) * -.15), calc(var(--py) * -.15));
  width: clamp(300px, 38vw, 600px); aspect-ratio: 1000 / 269;
  background: url("../assets/city.jpg") center top / 100% auto no-repeat;
  opacity: calc(.62 * var(--tn-citybright, 1));
  filter: brightness(calc(.95 * var(--tn-citybright, 1))) saturate(1.15);
  -webkit-mask-image: radial-gradient(78% 84% at 50% 50%, #000 26%, transparent 78%);
          mask-image: radial-gradient(78% 84% at 50% 50%, #000 26%, transparent 78%);
  pointer-events: none;
}
.tn-glow {
  position: absolute; left: 50%; top: 44%;
  transform: translate(-50%, -50%);
  width: clamp(300px, 40vw, 620px); height: clamp(120px, 16vw, 230px);
  background: radial-gradient(closest-side, color-mix(in srgb, var(--accent) 55%, transparent), transparent 75%);
  filter: blur(18px); opacity: calc(.6 * var(--tn-citybright, 1)); pointer-events: none;
}

/* neon section frames receding into infinity */
.tn-tunnel3d {
  position: absolute; inset: 0; transform-style: preserve-3d;
  transform: translate(calc(var(--px) * -.25), calc(var(--py) * -.25));
}
.tn-frame {
  position: absolute; left: 50%; top: 46%;
  width: min(62vw, 760px); height: min(40vw, 470px);
  border-radius: 14px;
  border: 1.5px solid color-mix(in srgb, var(--accent) 75%, transparent);
  box-shadow:
    0 0 22px color-mix(in srgb, var(--accent) 30%, transparent),
    inset 0 0 30px color-mix(in srgb, var(--accent) 12%, transparent);
  transform: translate(-50%, -50%) translateZ(-3200px);
  animation: tnTunnel linear infinite;
  will-change: transform, opacity;
}
.tn-seg-label {
  position: absolute; top: -2px; left: 50%; transform: translate(-50%, -100%);
  font-family: "Orbitron", sans-serif; font-weight: 700;
  font-size: 14px; letter-spacing: 4px; color: var(--accent-bright);
  text-shadow: 0 0 12px color-mix(in srgb, var(--accent) 70%, transparent);
  white-space: nowrap;
}
.tn-seg-tick {
  position: absolute; bottom: 12px; left: 12px; right: 12px; height: 2px;
  background: linear-gradient(90deg, transparent, var(--accent), transparent); opacity: .5;
}
.tn-stage.no-labels .tn-seg-label { display: none; }

@keyframes tnTunnel {
  0%   { transform: translate(-50%, -50%) translateZ(-3200px); opacity: 0; }
  14%  { opacity: .85; }
  80%  { opacity: .8; }
  100% { transform: translate(-50%, -50%) translateZ(430px); opacity: 0; }
}

.tn-scanline {
  position: absolute; left: 0; right: 0; top: 46%; height: 1px;
  background: linear-gradient(90deg, transparent, color-mix(in srgb, var(--accent) 55%, transparent), transparent);
  opacity: .5; pointer-events: none;
}
.tn-grain {
  position: absolute; inset: 0; pointer-events: none; opacity: .05; mix-blend-mode: overlay;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='120' height='120'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.9' numOctaves='2'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E");
}

/* floating logo — dead center over the vanishing point */
.tn-logo-wrap {
  position: absolute; left: 50%; top: 47%; z-index: 8;
  transform: translate(-50%, -50%) translate(calc(var(--px) * .35), calc(var(--py) * .35));
  text-align: center; pointer-events: none; width: 92%;
}
.tn-logo-wrap::before {
  content: ""; position: absolute; left: 50%; top: 44%; transform: translate(-50%, -50%);
  width: 116%; height: 235%; z-index: -1;
  background: radial-gradient(closest-side, rgba(5,12,20,.6), rgba(5,12,20,.26) 55%, transparent 72%);
  filter: blur(10px);
}
.tn-logo-float { animation: tnFloaty 6.5s ease-in-out infinite; animation-play-state: var(--tn-float, running); }
.tn-logo {
  font-family: "Bitter", serif; font-weight: 700;
  font-size: clamp(76px, 16vw, 230px); line-height: .96; letter-spacing: 1px;
  color: #f3f8fb;
  text-shadow: 0 4px 30px rgba(0,0,0,.55), 0 0 60px rgba(8,20,28,.6);
  display: inline-block; white-space: nowrap;
}
.tn-logo .ai {
  font-family: "Orbitron", sans-serif; font-weight: 900; letter-spacing: 2px; margin: 0 .04em 0 0;
  background: url("../assets/city.jpg") center 40% / 180% auto;
  -webkit-background-clip: text; background-clip: text; color: transparent;
  filter:
    drop-shadow(0 0 10px var(--accent))
    drop-shadow(0 0 30px color-mix(in srgb, var(--accent) 70%, transparent))
    brightness(1.3) saturate(1.35);
  animation: tnAiPulse 3.4s ease-in-out infinite;
}
.tn-logo .ya {
  font-family: "Orbitron", sans-serif; font-weight: 900; letter-spacing: 2px;
  color: #f3f8fb;
  text-shadow: 0 0 10px var(--accent), 0 0 40px color-mix(in srgb, var(--accent) 60%, transparent);
}
@keyframes tnAiPulse { 0%,100% { opacity: 1; } 50% { opacity: .82; } }
@keyframes tnFloaty { 0%,100% { transform: translateY(0); } 50% { transform: translateY(-16px); } }

.tn-reflection {
  margin-top: 6px; font-family: "Bitter", serif; font-weight: 700;
  font-size: clamp(76px, 16vw, 230px); line-height: .96; letter-spacing: 1px;
  color: #f3f8fb; opacity: .14; transform: scaleY(-1);
  -webkit-mask-image: linear-gradient(180deg, rgba(0,0,0,.5), transparent 55%);
          mask-image: linear-gradient(180deg, rgba(0,0,0,.5), transparent 55%);
  white-space: nowrap; filter: blur(.5px);
}
.tn-reflection .ai { font-family: "Orbitron", sans-serif; font-weight: 900; color: var(--accent); }
.tn-reflection .ya { font-family: "Orbitron", sans-serif; font-weight: 900; color: #f3f8fb; }
.tn-tagline {
  margin-top: clamp(18px, 3vh, 40px);
  font-family: "Exo 2", sans-serif; font-weight: 500;
  font-size: clamp(11px, 1.3vw, 16px); letter-spacing: 7px;
  color: var(--tn-muted); text-transform: uppercase;
}
.tn-tagline b { color: var(--accent-bright); font-weight: 600; }

/* scroll hint */
.tn-scroll {
  position: absolute; left: 50%; bottom: 26px; transform: translateX(-50%);
  z-index: 9; display: flex; flex-direction: column; align-items: center; gap: 9px;
  color: var(--tn-muted); font-family: "Orbitron", sans-serif; font-size: 11px; letter-spacing: 4px;
}
.tn-mouse { width: 22px; height: 36px; border: 1.5px solid var(--tn-muted); border-radius: 12px; position: relative; }
.tn-mouse::after {
  content: ""; position: absolute; left: 50%; top: 7px; width: 3px; height: 7px; border-radius: 2px;
  background: var(--accent-bright); transform: translateX(-50%); animation: tnWheel 1.8s ease-in-out infinite;
}
@keyframes tnWheel { 0%{opacity:0;transform:translate(-50%,0)} 30%{opacity:1} 70%{opacity:1} 100%{opacity:0;transform:translate(-50%,11px)} }

@media (prefers-reduced-motion: reduce) {
  .tn-frame, .tn-logo-float, .tn-mouse::after, .tn-logo .ai { animation: none !important; }
}