/* ═══════════════════════════════════════════════════════════════════
   AvenShop — слой 3D и «спатиального» дизайна (2026)
   Подключается после style2.css. Всё деградирует мягко: без WebGL — CSS-кристаллы,
   без animation-timeline — статичные секции, prefers-reduced-motion — всё выключено.
   ═══════════════════════════════════════════════════════════════════ */

/* ── 1. Аврора за hero убрана: blur 40px на весь экран, голубой и розовый вне бренда (фон — .hero-bg в style2) ── */

/* ── 4. Градиент заголовка: только фиолетовый бренд (голубой #60a5fa вне семантики) ── */
.hero-title .gradient-text {
    background-image: linear-gradient(100deg, #e9d5ff 0%, #c084fc 45%, #a855f7 100%);
    background-size: 100% 100%;
}
.light-theme .hero-title .gradient-text { background-image: linear-gradient(100deg, #6d28d9 0%, #7c3aed 50%, #a855f7 100%); }

/* ── 5. Глубина на карточках (слои внутри наклона) ────────────────── */
.tilt-card { transform-style: preserve-3d; }
.tilt-card .product-card-image, .tilt-card .feature-icon, .tilt-card .how-ico,
.tilt-card .category-card-content, .tilt-card .bestseller-media, .tilt-card .product-card-body,
.tilt-card .how-num, .tilt-card .feature-card h3, .tilt-card .feature-card p {
    transition: transform .35s cubic-bezier(.2,.8,.2,1);
}
.tilt-active .feature-icon, .tilt-active .how-ico { transform: translateZ(34px) scale(1.06); }
.tilt-active .how-num { transform: translateZ(26px); }
.tilt-active .feature-card h3 { transform: translateZ(18px); }
.tilt-active .feature-card p { transform: translateZ(8px); }
.tilt-active .product-card-body { transform: translateZ(14px); }
.tilt-active .category-card-content { transform: translateZ(24px); }
.tilt-active.product-card .product-card-image img { transform: scale(1.06) translateZ(0); }
.tilt-active::after { opacity: 1; }

/* ── 6. Бенто-сетка преимуществ + 3D-иконки ───────────────────────── */
@media (min-width: 960px) {
    .features-grid {
        grid-template-columns: repeat(6, 1fr);
        grid-auto-rows: minmax(200px, auto);
        gap: 1.25rem;
    }
    .features-grid .feature-card { grid-column: span 2; text-align: left; padding: 2rem 1.9rem; display: flex; flex-direction: column; justify-content: flex-end; min-height: 220px; }
    .features-grid .feature-card:nth-child(1) { grid-column: span 4; grid-row: span 1; }
    .features-grid .feature-card:nth-child(2) { grid-column: span 2; grid-row: span 2; }
    .features-grid .feature-card:nth-child(3), .features-grid .feature-card:nth-child(4) { grid-column: span 2; }
    .features-grid .feature-card:nth-child(5) { grid-column: span 3; }
    .features-grid .feature-card:nth-child(6) { grid-column: span 3; }
    .features-grid .feature-icon { margin: 0 0 1.2rem; }
    .features-grid .feature-card:nth-child(1) .feature-icon,
    .features-grid .feature-card:nth-child(2) .feature-icon { width: 84px; height: 84px; font-size: 2rem; border-radius: 22px; }
    .features-grid .feature-card:nth-child(1) h3, .features-grid .feature-card:nth-child(2) h3 { font-size: 1.45rem; }
}
.feature-icon {
    transform-style: preserve-3d;
    box-shadow: 0 10px 24px -12px rgba(124,58,237,.6), inset 0 1px 0 rgba(255,255,255,.25);
}
.feature-card:hover .feature-icon { animation: fxIconFloat 3s ease-in-out infinite; }
@keyframes fxIconFloat { 0%,100% { translate: 0 0; rotate: -3deg; } 50% { translate: 0 -7px; rotate: 3deg; } }
.feature-card::after { top: auto; bottom: -140px; left: auto; right: -80px; transform: none; width: 320px; height: 320px; }

/* ── 7. Шаги «Как это работает»: объёмные номера ───────────────────── */
.how-num {
    text-shadow: 0 2px 0 rgba(91,33,182,.9), 0 4px 0 rgba(76,29,149,.85), 0 6px 0 rgba(60,20,120,.8), 0 14px 28px rgba(124,58,237,.5);
}

/* ── 8. Парящие чипы и статы в hero ───────────────────────────────── */
.hero-trust-chips .htc { animation: fxChipFloat 7s ease-in-out infinite; will-change: transform; }
.hero-trust-chips .htc:nth-child(2) { animation-delay: -2.3s; }
.hero-trust-chips .htc:nth-child(3) { animation-delay: -4.6s; }
@keyframes fxChipFloat { 0%,100% { translate: 0 0; } 50% { translate: 0 -4px; } }
.hero-stats { transform-style: preserve-3d; }
.hero-stats .stat-item { transition: transform .5s cubic-bezier(.2,.8,.2,1); }
.hero-stats:hover .stat-item { transform: translateZ(10px); }
.hero-stats .stat-item:hover { transform: translateZ(28px) translateY(-4px); }

/* ── 9. Магнитные кнопки ──────────────────────────────────────────── */
.fx-magnet { transition: transform .25s cubic-bezier(.2,.8,.2,1), box-shadow .3s ease; will-change: transform; }
.fx-magnet.is-near { box-shadow: 0 14px 40px rgba(124,58,237,.45), 0 0 0 1px rgba(192,132,252,.35); }

/* ── 10. Скролл-анимации: параллакс и «всплытие» на нативном таймлайне ── */
@supports (animation-timeline: view()) {
    .section-header .section-title { animation: fxTitleIn linear both; animation-timeline: view(); animation-range: entry 0% entry 60%; }
    @keyframes fxTitleIn { from { opacity: 0; transform: translateY(28px) scale(.96); } to { opacity: 1; transform: none; } }
    .hero-mascot-img { animation-name: mascotFloat, fxMascotScroll; animation-timeline: auto, scroll(root); animation-duration: 6s, 1s; animation-iteration-count: infinite, 1; animation-timing-function: ease-in-out, linear; animation-fill-mode: none, both; animation-range: normal, 0 60vh; }
    @keyframes fxMascotScroll { from { scale: 1; opacity: 1; } to { scale: .92; opacity: .35; } }
    .trust-strip { animation: fxSectionIn linear both; animation-timeline: view(); animation-range: entry 0% entry 50%; }
    @keyframes fxSectionIn { from { opacity: 0; transform: translateY(24px); } to { opacity: 1; transform: none; } }
}

/* ── 11. Навбар глубже ────────────────────────────────────────────── */
.navbar.scrolled { box-shadow: 0 10px 40px -10px rgba(0,0,0,.6), 0 1px 0 rgba(192,132,252,.15) inset; }

/* ── 12. Разделители секций: волосяная линия в цвете бренда (радуга со свечением размывала бренд) ── */
.section-dark::before, .section-dark::after {
    background: rgba(168,85,247,.22) !important;
    height: 1px; box-shadow: none;
}

/* ── 13. Товар: 3D-подиум под картинкой ─────────────────────────────── */
.product-main-image, .product-gallery-main { transform-style: preserve-3d; }
.product-main-image::after {
    content: ''; position: absolute; left: 10%; right: 10%; bottom: -18px; height: 40px; border-radius: 50%;
    background: radial-gradient(ellipse at center, rgba(168,85,247,.45), transparent 70%); filter: blur(10px); pointer-events: none;
}

/* ── Ручной/автоматический «лёгкий режим» (html.fx-lite, ставится в <head> base.html) ─────────── */
html.fx-lite .hero-trust-chips .htc, html.fx-lite .feature-card:hover .feature-icon,
html.fx-lite .mascot-aura, html.fx-lite .mascot-orb, html.fx-lite .hero-mascot-img, html.fx-lite .particle { animation: none !important; }
html.fx-lite .mascot-particles { display: none; }

/* ── Отключение ──────────────────────────────────────────────────── */
@media (prefers-reduced-motion: reduce) {
    .hero-title .gradient-text, .feature-icon, .hero-trust-chips .htc { animation: none !important; }
    .tilt-active * { transform: none !important; }
    .section-header .section-title, .trust-strip, .hero-mascot-img { animation: none !important; }
}