/* ========================================================================
   TRON: Legacy — лёгкие неоновые эффекты для hutool.tech
   Все анимации GPU-композитные (background-position / stroke-dashoffset /
   text-shadow / box-shadow). CPU практически не используется.
   ======================================================================== */

/* ------------------------------------------------------------------------
   СИЛУЭТЫ АВТО на фоне — Lixiang слева, Zeekr справа. Тонкие циан-контуры,
   очень слабая прозрачность, лёгкая анимация контура.
   ------------------------------------------------------------------------ */
.tron-cars {
    position: fixed;
    inset: 0;
    pointer-events: none;     /* контейнер не перехватывает клики */
    z-index: 0;
    overflow: hidden;
}

.tron-car {
    position: absolute;
    bottom: 10%;
    width: 42vw;
    max-width: 620px;
    min-width: 300px;
    opacity: 0.28;            /* базовая видимость заметнее */
    filter: drop-shadow(0 0 6px rgba(34, 211, 238, 0.45));
    pointer-events: auto;     /* сами машины кликабельны → hover работает */
    cursor: pointer;
    transition: opacity 0.4s ease, filter 0.4s ease, transform 0.4s ease;
}

.tron-car-li    { left:  -2%; }
.tron-car-zeekr { right: -2%; transform: scaleX(-1); }

.tron-car:hover {
    opacity: 1;
    filter: drop-shadow(0 0 14px rgba(34, 211, 238, 0.9))
            drop-shadow(0 0 32px rgba(34, 211, 238, 0.5));
}
.tron-car-li:hover    { transform: scale(1.03); }
.tron-car-zeekr:hover { transform: scaleX(-1) scale(1.03); }

.tron-car svg {
    width: 100%;
    height: auto;
    display: block;
}

.tron-car path,
.tron-car circle {
    fill: none;
    stroke: #22D3EE;
    stroke-width: 1.5;
    stroke-linecap: round;
    stroke-linejoin: round;
    vector-effect: non-scaling-stroke;
    transition: stroke-width 0.3s ease;
}

.tron-car:hover path,
.tron-car:hover circle {
    stroke-width: 2.5;
}

.tron-car .body {
    stroke-dasharray: 8 1200;
    animation: tron-car-trace 14s linear infinite;
}

.tron-car-zeekr .body { animation-delay: 7s; animation-duration: 16s; }

/* На hover — трассер ускоряется и становится длиннее */
.tron-car:hover .body {
    animation-duration: 4s !important;
    stroke-dasharray: 60 1140;
}


@keyframes tron-car-trace {
    from { stroke-dashoffset: 0; }
    to   { stroke-dashoffset: -1200; }
}

@media (max-width: 768px) {
    .tron-car {
        width: 70vw;
        bottom: 18%;
        opacity: 0.05;
    }
    .tron-car-li    { left: -10%; bottom: 22%; }
    .tron-car-zeekr { right: -10%; bottom: 10%; }
}

@media (prefers-reduced-motion: reduce) {
    .tron-car .body { animation: none; }
}

/* ------------------------------------------------------------------------
   ПОЛ ГРИДА — фоновая сетка циановых линий, медленно ползёт вверх
   как поверхность игрового мира в фильме. Без перспективы (плоская),
   с радиальной маской по краям чтобы растворялось в темноту.
   ------------------------------------------------------------------------ */
.tron-floor {
    position: fixed;
    inset: 0;
    z-index: 0;
    pointer-events: none;
    background-image:
        repeating-linear-gradient(0deg,
            transparent 0,
            transparent 79px,
            rgba(34, 211, 238, 0.14) 80px),
        repeating-linear-gradient(90deg,
            transparent 0,
            transparent 79px,
            rgba(34, 211, 238, 0.14) 80px);
    background-size: 80px 80px;
    animation: tron-floor-scroll 24s linear infinite;
    -webkit-mask-image: radial-gradient(ellipse at center, #000 20%, transparent 80%);
            mask-image: radial-gradient(ellipse at center, #000 20%, transparent 80%);
    will-change: background-position;
}

@keyframes tron-floor-scroll {
    from { background-position: 0 0, 0 0; }
    to   { background-position: 0 -80px, -80px 0; }
}

/* ------------------------------------------------------------------------
   СВЕТОВОЙ ГОРИЗОНТ — тонкая яркая горизонтальная полоса вдалеке,
   медленно пульсирует. Стилизованный «закат над Гридом».
   ------------------------------------------------------------------------ */
.tron-horizon {
    position: fixed;
    left: 0;
    right: 0;
    top: 38%;
    height: 1px;
    background: linear-gradient(90deg,
        transparent 0%,
        rgba(34, 211, 238, 0.6) 30%,
        rgba(34, 211, 238, 0.9) 50%,
        rgba(34, 211, 238, 0.6) 70%,
        transparent 100%);
    box-shadow: 0 0 20px rgba(34, 211, 238, 0.55), 0 0 60px rgba(34, 211, 238, 0.2);
    pointer-events: none;
    z-index: 0;
    animation: tron-horizon-breathe 6s ease-in-out infinite;
}

@keyframes tron-horizon-breathe {
    0%, 100% { opacity: 0.35; transform: scaleX(0.9); }
    50%      { opacity: 0.9;  transform: scaleX(1); }
}

/* ------------------------------------------------------------------------
   ЛУЧ РАСПОЗНАВАТЕЛЯ (Recognizer beam) — узкий вертикальный циан-луч
   медленно проходит слева направо. Как прожектор «вертушек» в фильме.
   ------------------------------------------------------------------------ */
.tron-beam {
    position: fixed;
    top: 0;
    bottom: 0;
    left: 0;
    width: 2px;
    background: linear-gradient(180deg,
        transparent 0%,
        rgba(34, 211, 238, 0.5) 20%,
        rgba(34, 211, 238, 0.95) 50%,
        rgba(34, 211, 238, 0.5) 80%,
        transparent 100%);
    box-shadow: 0 0 24px rgba(34, 211, 238, 0.6), 0 0 60px rgba(34, 211, 238, 0.25);
    pointer-events: none;
    z-index: 0;
    opacity: 0;
    animation: tron-beam-sweep 18s linear infinite;
    will-change: transform, opacity;
}

@keyframes tron-beam-sweep {
    0%   { transform: translateX(-30px);  opacity: 0; }
    5%   { opacity: 0.7; }
    95%  { opacity: 0.7; }
    100% { transform: translateX(100vw);  opacity: 0; }
}

/* ------------------------------------------------------------------------
   ГЛИТЧ на hover у заголовков — RGB-расщепление букв на циан+оранж.
   Запускается только при наведении, исчезает за 0.4с.
   ------------------------------------------------------------------------ */
h1:hover, h2:hover, h3:hover, .section-title:hover {
    animation: tron-glitch 0.4s steps(2) 1;
}

@keyframes tron-glitch {
    0%   { text-shadow: 1px 0 #22D3EE, -1px 0 #ff9d3d; }
    25%  { text-shadow: -1px 0 #22D3EE, 1px 0 #ff9d3d; transform: translateX(1px); }
    50%  { text-shadow: 1px 0 #ff9d3d, -1px 0 #22D3EE; transform: translateX(-1px); }
    75%  { text-shadow: -1px 0 #ff9d3d, 1px 0 #22D3EE; }
    100% { text-shadow: none; transform: translateX(0); }
}

/* ------------------------------------------------------------------------
   ТРАССЕР по периметру экрана (был с самого начала, не меняем).
   ------------------------------------------------------------------------ */

.tron-trace {
    position: fixed;
    inset: 0;
    pointer-events: none;
    z-index: 1;
    overflow: hidden;
}

.tron-trace svg {
    width: 100%;
    height: 100%;
    display: block;
}

.tron-trace rect {
    fill: none;
    stroke: #22D3EE;
    stroke-width: 2;
    stroke-linecap: round;
    filter: drop-shadow(0 0 6px #22D3EE) drop-shadow(0 0 14px rgba(34, 211, 238, 0.65));

    /* Длина любого периметра rect = 2*(w+h). При 100vw+100vh периметр зависит
       от размеров экрана, поэтому stroke-dasharray в относительных единицах
       не подойдёт — используем pathLength чтобы нормализовать. */
    stroke-dasharray: 12 988;        /* короткий светящийся отрезок ~1.2% периметра */
    stroke-dashoffset: 0;
    animation: tron-trace-run 9s linear infinite;
}

@keyframes tron-trace-run {
    from { stroke-dashoffset: 0; }
    to   { stroke-dashoffset: -1000; }
}

/* ------------------------------------------------------------------------
   Пульсирующее свечение заголовков gradient-text — как Encom UI в фильме.
   Только text-shadow, никаких transform/filter → GPU-композит, нагрузка ~0.
   ------------------------------------------------------------------------ */
.gradient-text {
    text-shadow: 0 0 10px rgba(34, 211, 238, 0.55);
    animation: tron-text-glow 4.5s ease-in-out infinite;
}

@keyframes tron-text-glow {
    0%, 100% { text-shadow: 0 0 10px rgba(34, 211, 238, 0.45); }
    50%      { text-shadow: 0 0 16px rgba(34, 211, 238, 0.8),
                            0 0 32px rgba(34, 211, 238, 0.35); }
}

/* ------------------------------------------------------------------------
   Лёгкий неоновый glow на главных кнопках при наведении (без анимации).
   ------------------------------------------------------------------------ */
.btn-primary,
.cta,
.connect-btn {
    transition: box-shadow 0.25s ease;
}
.btn-primary:hover,
.cta:hover,
.connect-btn:hover {
    box-shadow:
        0 0 0 1px rgba(34, 211, 238, 0.55),
        0 0 22px rgba(34, 211, 238, 0.45),
        0 0 44px rgba(34, 211, 238, 0.15);
}

/* ------------------------------------------------------------------------
   Вкладки и кнопки-переключатели — циан-glow на hover и активном состоянии.
   Покрывает: бренд-переключатель (lixiang/zeekr), категории магазина,
   категории скриптов, любые .tab/.tab-btn в проекте.
   ------------------------------------------------------------------------ */
.brand-btn,
.cat-tab,
.script-category,
.tab,
.tab-btn {
    transition: box-shadow 0.25s ease, border-color 0.25s ease;
}

.brand-btn:hover,
.cat-tab:hover,
.script-category:hover,
.tab:hover,
.tab-btn:hover {
    box-shadow:
        0 0 0 1px rgba(34, 211, 238, 0.4),
        0 0 16px rgba(34, 211, 238, 0.25);
}

.brand-btn.active,
.cat-tab.active,
.script-category.active,
.tab.active,
.tab-btn.active {
    box-shadow:
        0 0 0 1px rgba(34, 211, 238, 0.7),
        0 0 22px rgba(34, 211, 238, 0.4),
        inset 0 0 8px rgba(34, 211, 238, 0.12);
}

/* ------------------------------------------------------------------------
   ПУНКТЫ ВЕРХНЕЙ НАВИГАЦИИ — Tron-glow + бегущая нижняя линия как у
   Encom-UI терминалов в фильме.
   ------------------------------------------------------------------------ */
.nav-link {
    position: relative;
    transition: color 0.25s ease, text-shadow 0.25s ease;
}

/* Тонкая циан-линия снизу — расширяется от центра при hover */
.nav-link::after {
    content: "";
    position: absolute;
    left: 50%;
    bottom: 2px;
    width: 0;
    height: 1px;
    background: #22D3EE;
    box-shadow: 0 0 8px rgba(34, 211, 238, 0.9), 0 0 16px rgba(34, 211, 238, 0.5);
    transition: width 0.3s ease, left 0.3s ease;
}

.nav-link:hover {
    color: #22D3EE !important;
    text-shadow: 0 0 10px rgba(34, 211, 238, 0.7);
}

.nav-link:hover::after {
    width: calc(100% - 16px);
    left: 8px;
}

/* Активная страница — постоянная подсветка (нижняя линия + лёгкий glow) */
.nav-link.active {
    color: #22D3EE !important;
    text-shadow: 0 0 8px rgba(34, 211, 238, 0.5);
}

.nav-link.active::after {
    width: calc(100% - 16px);
    left: 8px;
    animation: nav-active-pulse 3s ease-in-out infinite;
}

@keyframes nav-active-pulse {
    0%, 100% { opacity: 0.6; box-shadow: 0 0 6px rgba(34, 211, 238, 0.7); }
    50%      { opacity: 1;   box-shadow: 0 0 12px rgba(34, 211, 238, 1), 0 0 24px rgba(34, 211, 238, 0.5); }
}

/* Hutools Soft License — особый пункт, остаётся с акцентной рамкой */
.nav-link-license::after { display: none; }

/* ------------------------------------------------------------------------
   Модальные окна — тонкая неоновая рамка как у Encom-диалогов.
   ------------------------------------------------------------------------ */
.modal-content {
    box-shadow:
        0 0 0 1px rgba(34, 211, 238, 0.35),
        0 0 32px rgba(34, 211, 238, 0.2),
        0 24px 80px rgba(0, 0, 0, 0.6);
}

/* ------------------------------------------------------------------------
   evoCAR — главное слово сайта. Везде где встречается — циан-glow
   с пульсацией. Применяется автоматически через evocar-glow.js.
   ------------------------------------------------------------------------ */
.evocar-glow {
    color: #22D3EE;
    font-weight: 700;
    letter-spacing: 0.02em;
    text-shadow: 0 0 8px rgba(34, 211, 238, 0.6),
                 0 0 18px rgba(34, 211, 238, 0.3);
    animation: evocar-pulse 3.2s ease-in-out infinite;
    display: inline-block;
}

@keyframes evocar-pulse {
    0%, 100% { text-shadow: 0 0 8px rgba(34, 211, 238, 0.55),
                            0 0 18px rgba(34, 211, 238, 0.25); }
    50%      { text-shadow: 0 0 14px rgba(34, 211, 238, 0.95),
                            0 0 32px rgba(34, 211, 238, 0.5),
                            0 0 60px rgba(34, 211, 238, 0.2); }
}

/* Добавляем такую же пульсацию к .logo-sub-accent (где «by evoCAR» в шапке)
   — там уже gradient через background-clip:text, glow ложится поверх. */
.logo-sub-accent {
    animation: evocar-pulse 3.2s ease-in-out infinite;
}

/* ------------------------------------------------------------------------
   МАНИФЕСТ В СТИЛЕ TRON — компьютерный шрифт Orbitron (тот же что в
   оригинальной графике фильма), циан-glow, разрядка букв.
   ------------------------------------------------------------------------ */
.manifesto-eyebrow,
.manifesto-title,
.manifesto-text,
.manifesto-cta-line {
    font-family: 'Orbitron', 'JetBrains Mono', monospace;
}

.manifesto-eyebrow {
    color: var(--accent) !important;
    letter-spacing: 0.5em !important;
    text-shadow: 0 0 8px rgba(34, 211, 238, 0.7);
}

.manifesto-title {
    letter-spacing: 0.04em !important;
    text-shadow: 0 0 12px rgba(34, 211, 238, 0.5), 0 0 28px rgba(34, 211, 238, 0.25);
}

.manifesto-text {
    letter-spacing: 0.02em !important;
    line-height: 1.85 !important;
    font-weight: 500;
    text-shadow: 0 0 6px rgba(34, 211, 238, 0.2);
}

.manifesto-text strong {
    color: var(--accent) !important;
    text-shadow: 0 0 10px rgba(34, 211, 238, 0.8), 0 0 22px rgba(34, 211, 238, 0.35);
    letter-spacing: 0.08em;
    font-weight: 700;
}

.manifesto-text em {
    color: rgba(34, 211, 238, 0.85) !important;
    font-style: normal !important;
    letter-spacing: 0.05em;
    text-shadow: 0 0 8px rgba(34, 211, 238, 0.5);
}

.manifesto-cta-line {
    color: var(--accent) !important;
    letter-spacing: 0.06em !important;
    font-weight: 600;
    text-shadow: 0 0 10px rgba(34, 211, 238, 0.65), 0 0 24px rgba(34, 211, 238, 0.3);
    animation: tron-manifesto-pulse 3.5s ease-in-out infinite;
}

@keyframes tron-manifesto-pulse {
    0%, 100% { text-shadow: 0 0 10px rgba(34, 211, 238, 0.55), 0 0 24px rgba(34, 211, 238, 0.2); }
    50%      { text-shadow: 0 0 16px rgba(34, 211, 238, 0.9), 0 0 40px rgba(34, 211, 238, 0.4); }
}

/* ------------------------------------------------------------------------
   GRID MODE — пасхалка по Konami Code (↑↑↓↓←→←→BA) или 5 тапам на лого.
   На 8 секунд весь сайт «уходит в Грид».
   ------------------------------------------------------------------------ */
body.grid-mode .tron-floor {
    animation-duration: 4s !important;
    background-image:
        repeating-linear-gradient(0deg, transparent 0, transparent 39px, rgba(34, 211, 238, 0.35) 40px),
        repeating-linear-gradient(90deg, transparent 0, transparent 39px, rgba(34, 211, 238, 0.35) 40px) !important;
    background-size: 40px 40px !important;
}
body.grid-mode .tron-trace rect  { animation-duration: 3s !important; stroke-width: 3 !important; }
body.grid-mode .tron-beam        { animation-duration: 5s !important; opacity: 1 !important; }
body.grid-mode .tron-horizon     { opacity: 1 !important; animation-duration: 2s !important; }
body.grid-mode .gradient-text    { animation-duration: 1s !important; }

/* Баннер «GREETINGS, PROGRAMS» */
.grid-mode-banner {
    position: fixed;
    inset: 0;
    z-index: 9999;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    background: radial-gradient(ellipse at center, rgba(7, 9, 15, 0.85) 0%, rgba(7, 9, 15, 0.4) 70%, transparent 100%);
    pointer-events: none;
    animation: grid-banner-in 0.4s ease-out;
}

.gmb-line {
    font-family: 'Orbitron', 'JetBrains Mono', monospace;
    color: #22D3EE;
    text-align: center;
    text-shadow:
        0 0 12px #22D3EE,
        0 0 28px rgba(34, 211, 238, 0.6),
        0 0 60px rgba(34, 211, 238, 0.3);
}

.gmb-line-1 {
    font-size: clamp(28px, 7vw, 92px);
    font-weight: 800;
    letter-spacing: 0.15em;
    animation: gmb-flicker 0.12s steps(2) infinite, gmb-glow 2s ease-in-out infinite;
}

.gmb-line-2 {
    font-size: clamp(14px, 2.4vw, 26px);
    font-weight: 500;
    letter-spacing: 0.4em;
    margin-top: 14px;
    opacity: 0.85;
}

.gmb-hint {
    position: absolute;
    bottom: 40px;
    left: 50%;
    transform: translateX(-50%);
    font-family: 'JetBrains Mono', monospace;
    color: rgba(34, 211, 238, 0.7);
    font-size: 12px;
    letter-spacing: 0.3em;
    text-shadow: 0 0 6px rgba(34, 211, 238, 0.5);
}

@keyframes grid-banner-in {
    from { opacity: 0; transform: scale(0.96); }
    to   { opacity: 1; transform: scale(1); }
}

@keyframes gmb-flicker {
    0%, 100% { opacity: 1; }
    50%      { opacity: 0.92; }
}

@keyframes gmb-glow {
    0%, 100% { text-shadow: 0 0 12px #22D3EE, 0 0 28px rgba(34, 211, 238, 0.6); }
    50%      { text-shadow: 0 0 20px #22D3EE, 0 0 50px rgba(34, 211, 238, 0.9), 0 0 90px rgba(34, 211, 238, 0.5); }
}

/* Уважение к настройкам пользователя */
@media (prefers-reduced-motion: reduce) {
    .tron-trace rect      { animation: none; opacity: 0.3; }
    .gradient-text        { animation: none; }
    .manifesto-cta-line   { animation: none; }
    .gmb-line-1           { animation: none; }
}