/* Тема «Градострой» для лендинга (/{locale}/city). Грузится после landing2.css и
   просто переопределяет его CSS-переменные — вся вёрстка (glass/grad-text/btn-glow/aurora
   и т.д.) в landing2.css построена на var(--a/--b/--c/--bg/...), так что палитра меняется
   без переписывания разметки. */

body.city-landing {
    --bg: #0a1628;
    --card: rgba(59, 130, 246, .06);
    --line: rgba(59, 130, 246, .18);
    --txt: #eaf2ff;
    --muted: #93a8c9;
    --a: #2563eb;
    --b: #f59e0b;
    --c: #38bdf8;
}

body.city-landing .aurora i:nth-child(3) { opacity: .22; }

/* Хиро-карточка (growth-chart): самодостаточный блок вместо ряда иконок-«коробочек» и
   перекрывающих плавающих карточек — один график роста по 7 этапам строительства с 3D-наклоном
   за курсором (JS в landing-city.blade.php) + спотлайт-свечение (.spot из landing2.js). */
.city-hero-card {
    max-width: 440px;
    z-index: 2;
    transition: transform .15s ease-out, box-shadow .3s;
    transform-style: preserve-3d;
    will-change: transform;
    box-shadow: 0 30px 60px -20px rgba(0, 0, 0, .5);
}

.city-hero-glow {
    position: absolute;
    border-radius: 999px;
    filter: blur(64px);
    z-index: 0;
    pointer-events: none;
}

.city-hero-glow-1 { width: 260px; height: 260px; background: var(--a); opacity: .35; bottom: -12%; left: 2%; animation: cityGlowDrift 8s ease-in-out infinite; }
.city-hero-glow-2 { width: 200px; height: 200px; background: var(--b); opacity: .38; top: -8%; right: 6%; animation: cityGlowDrift 10s ease-in-out infinite reverse; }
@keyframes cityGlowDrift { 50% { transform: translate(16px, -12px) scale(1.1); } }

.city-particle { position: absolute; font-size: 22px; opacity: .55; z-index: 1; filter: drop-shadow(0 4px 6px rgba(0, 0, 0, .35)); animation: cityParticleFloat 7s ease-in-out infinite; pointer-events: none; }
.city-particle.p1 { top: 6%; left: 0; animation-duration: 7s; }
.city-particle.p2 { bottom: 10%; right: 2%; animation-duration: 9s; animation-delay: 1.5s; }
.city-particle.p3 { top: 46%; right: -2%; font-size: 17px; opacity: .35; animation-duration: 8s; animation-delay: .7s; }
@keyframes cityParticleFloat { 50% { transform: translateY(-20px) rotate(8deg); } }

/* Растущие столбики-«этажи» (вместо биржевой линии): каждый тянется из фундамента вверх,
   сверху — настоящая иконка этапа строительства (та же, что в investments::city.levels). */
.city-bar { transform-box: fill-box; transform-origin: 50% 100%; transform: scaleY(0); animation: cityBarGrow .6s cubic-bezier(.3, 1.4, .4, 1) forwards; }
.city-bar-icon { opacity: 0; transform-box: fill-box; transform-origin: 50% 100%; transform: translateY(8px) scale(.5); animation: cityIconPop .45s cubic-bezier(.3, 1.6, .4, 1) forwards; }
.city-bar-icon-locked { animation-name: cityIconPopDim; }
.city-chart-pulse { transform-box: fill-box; transform-origin: center; animation: cityChartPulse 2.2s ease-out .9s infinite; }

@keyframes cityBarGrow { to { transform: scaleY(1); } }
@keyframes cityIconPop { to { opacity: 1; transform: none; } }
@keyframes cityIconPopDim { to { opacity: .45; transform: none; } }
@keyframes cityChartPulse { 0% { opacity: .35; transform: scale(.4); } 100% { opacity: 0; transform: scale(1.9); } }

.city-hero-badge {
    position: absolute;
    transform: translate(-50%, -100%);
    background: rgba(10, 22, 40, .78);
    backdrop-filter: blur(8px);
    -webkit-backdrop-filter: blur(8px);
    border: 1px solid var(--line);
    border-radius: 12px;
    padding: 6px 12px;
    text-align: center;
    box-shadow: 0 10px 26px -10px rgba(0, 0, 0, .6);
    animation: cityBadgePop .5s cubic-bezier(.3, 1.5, .4, 1) 1.1s both;
    pointer-events: none;
}

@keyframes cityBadgePop { from { opacity: 0; transform: translate(-50%, -75%) scale(.7); } to { opacity: 1; transform: translate(-50%, -100%) scale(1); } }

@media (prefers-reduced-motion: reduce) {
    .city-hero-card { transition: none; }
    .city-hero-glow, .city-particle { animation: none !important; }
    .city-bar { animation: none !important; transform: scaleY(1) !important; }
    .city-bar-icon { animation: none !important; opacity: 1 !important; transform: none !important; }
    .city-bar-icon-locked { opacity: .45 !important; }
    .city-hero-badge { animation: none !important; opacity: 1 !important; transform: translate(-50%, -100%) !important; }
    .city-chart-pulse { display: none; }
}

@media (max-width: 640px) {
    .city-particle { display: none; }
}