/* ─────────────────────────────────────────────────────────────────────
   solutions-animations.css — премиум-анимации только для /solutions.
   Подключается напрямую из views/solutions.ejs.
   Все эффекты уважают prefers-reduced-motion (см. блок в конце).
   ───────────────────────────────────────────────────────────────────── */

/* 0. ── Адаптивные хелперы (fluid typography + overflow guard) ─────── */

/* Защищает страницу от горизонтального overflow от любых широких
   элементов (marquee, абсолютные декорации). clip лучше hidden —
   не создаёт stacking context, не блокирует sticky. */
html, body {
    overflow-x: clip;
}

/* Fluid headings через clamp(min, vw-based, max). Снимает прыжки
   между breakpoint'ами и гарантирует помещаемость на 320 px.
   overflow-wrap: anywhere — safety-net на случай, если Inter не загрузился
   и системный fallback шире, чем ожидаем. */
/* Системно: разумный wrap для текстовых элементов (защита от переполнения) */
main h1, main h2, main h3 { text-wrap: balance; overflow-wrap: break-word; }
main p { text-wrap: pretty; overflow-wrap: break-word; }

/* Фолбек для Safari < 17.4 / Firefox < 121: text-wrap не критичен,
   деградирует на стандартный word-wrap. Никакого JS-полифила. */


/* 1. ── Scroll-driven progress bar (CSS-native, без JS) ─────────────── */
.scroll-progress {
    position: fixed;
    top: 0;
    left: 0;
    right: 0;
    height: 2px;
    background: linear-gradient(90deg, #3b82f6 0%, #06b6d4 50%, #3b82f6 100%);
    transform-origin: left;
    transform: scaleX(0);
    z-index: 60;
    pointer-events: none;
    box-shadow: 0 0 12px rgba(6, 182, 212, 0.4);
}
@supports (animation-timeline: scroll()) {
    .scroll-progress {
        animation: scroll-progress-grow linear;
        animation-timeline: scroll(root);
    }
}
@keyframes scroll-progress-grow {
    from { transform: scaleX(0); }
    to   { transform: scaleX(1); }
}

/* 2a. ── Premium brand cards (wordmarks + glass + glow) ─────────────── */
.brand-card {
    background:
        linear-gradient(135deg, rgba(255,255,255,0.04) 0%, rgba(255,255,255,0.01) 100%);
    border: 1px solid rgba(255,255,255,0.08);
    transition:
        border-color 0.4s cubic-bezier(0.16, 1, 0.3, 1),
        background 0.4s cubic-bezier(0.16, 1, 0.3, 1),
        transform 0.4s cubic-bezier(0.16, 1, 0.3, 1);
}
.brand-card:hover {
    border-color: color-mix(in oklab, var(--brand-accent, #3b82f6) 50%, transparent);
    background:
        linear-gradient(135deg,
            color-mix(in oklab, var(--brand-accent, #3b82f6) 8%, transparent) 0%,
            rgba(255,255,255,0.02) 100%);
    transform: translateY(-2px);
}
/* Conic glow rotates inside card on hover */
.brand-card__glow {
    background: conic-gradient(
        from var(--glow-angle, 0deg),
        transparent 0deg,
        color-mix(in oklab, var(--brand-accent, #3b82f6) 70%, transparent) 90deg,
        transparent 180deg
    );
    opacity: 0;
    transition: opacity 0.4s cubic-bezier(0.16, 1, 0.3, 1);
    -webkit-mask:
        linear-gradient(#000 0 0) content-box,
        linear-gradient(#000 0 0);
    -webkit-mask-composite: xor;
            mask-composite: exclude;
    padding: 1px;
}
.brand-card:hover .brand-card__glow {
    opacity: 0.8;
    animation: brand-glow-rotate 4s linear infinite;
}
@property --glow-angle {
    syntax: '<angle>';
    initial-value: 0deg;
    inherits: false;
}
@keyframes brand-glow-rotate {
    to { --glow-angle: 360deg; }
}

/* Wordmark: large, light-weight (premium contrast with bold body text) */
.brand-wordmark {
    font-size: clamp(1.75rem, 2vw + 1rem, 2.5rem);
    font-weight: 300;
    letter-spacing: -0.03em;
    transition: color 0.4s cubic-bezier(0.16, 1, 0.3, 1);
}
.brand-card:hover .brand-wordmark {
    color: color-mix(in oklab, var(--brand-accent, #fff) 30%, #fff);
}

/* Бейдж страны — мини-флаг 24×16 */
.brand-flag {
    display: inline-block;
    width: 28px;
    height: 18px;
    border-radius: 3px;
    background-size: cover;
    background-position: center;
    border: 1px solid rgba(255,255,255,0.12);
    box-shadow: 0 1px 4px rgba(0,0,0,0.4);
    flex-shrink: 0;
}

/* Brand accent dot */
.brand-card__dot {
    width: 8px;
    height: 8px;
    border-radius: 50%;
    box-shadow: 0 0 0 0 color-mix(in oklab, var(--brand-accent, #3b82f6) 60%, transparent);
    transition: box-shadow 0.4s cubic-bezier(0.16, 1, 0.3, 1);
}
.brand-card:hover .brand-card__dot {
    box-shadow: 0 0 0 6px color-mix(in oklab, var(--brand-accent, #3b82f6) 20%, transparent);
}

/* Тонкая линия снизу — появляется при hover */
.brand-card__line {
    background: linear-gradient(90deg,
        transparent,
        color-mix(in oklab, var(--brand-accent, #3b82f6) 80%, transparent),
        transparent);
    opacity: 0;
    transform: scaleX(0);
    transform-origin: center;
    transition:
        opacity 0.4s cubic-bezier(0.16, 1, 0.3, 1),
        transform 0.6s cubic-bezier(0.16, 1, 0.3, 1);
}
.brand-card:hover .brand-card__line {
    opacity: 1;
    transform: scaleX(1);
}

/* Premium certificate badges — те же glass card с blue accent */
.cert-badge {
    background: linear-gradient(135deg, rgba(255,255,255,0.04), rgba(255,255,255,0.01));
    border: 1px solid rgba(255,255,255,0.08);
    transition: border-color 0.3s, background 0.3s, transform 0.3s;
}
.cert-badge:hover {
    border-color: rgba(59,130,246,0.4);
    background: linear-gradient(135deg, rgba(59,130,246,0.08), rgba(255,255,255,0.02));
    transform: translateY(-2px);
}
.cert-badge__icon {
    background: linear-gradient(135deg, rgb(59,130,246), rgb(6,182,212));
    color: #fff;
    box-shadow: 0 4px 16px rgba(59,130,246,0.25);
    transition: box-shadow 0.3s, transform 0.3s;
}
.cert-badge:hover .cert-badge__icon {
    box-shadow: 0 6px 24px rgba(59,130,246,0.4);
    transform: scale(1.05);
}

/* 2. ── Marquee infinite-scroll для брендов ────────────────────────── */
.brands-marquee {
    overflow: hidden;
    position: relative;
    -webkit-mask-image: linear-gradient(to right, transparent, black 8%, black 92%, transparent);
            mask-image: linear-gradient(to right, transparent, black 8%, black 92%, transparent);
}
.brands-marquee__track {
    display: flex;
    gap: 1.25rem;
    width: max-content;
    animation: brands-scroll 50s linear infinite;
}
.brands-marquee:hover .brands-marquee__track,
.brands-marquee:focus-within .brands-marquee__track {
    animation-play-state: paused;
}
@keyframes brands-scroll {
    from { transform: translateX(0); }
    to   { transform: translateX(-50%); }
}

/* 4. ── Spotlight effect на тёмных секциях ─────────────────────────── */
.spotlight {
    position: relative;
    isolation: isolate;
}
.spotlight::before {
    content: '';
    position: absolute;
    inset: 0;
    background: radial-gradient(
        600px circle at var(--mouse-x, 50%) var(--mouse-y, 50%),
        rgba(59, 130, 246, 0.08),
        transparent 40%
    );
    pointer-events: none;
    opacity: 0;
    transition: opacity 0.3s ease;
    z-index: 1;
}
.spotlight:hover::before {
    opacity: 1;
}
.spotlight > * {
    position: relative;
    z-index: 2;
}

/* 5. ── 3D Tilt для карточек каталога ──────────────────────────────── */
.tilt-grid {
    perspective: 1000px;
}
.tilt-card {
    transform-style: preserve-3d;
    transition: transform 0.4s cubic-bezier(0.16, 1, 0.3, 1);
    will-change: transform;
}
.tilt-card__inner {
    transform: translateZ(0);
    transition: transform 0.4s cubic-bezier(0.16, 1, 0.3, 1);
}
.tilt-card:hover .tilt-card__inner {
    transform: translateZ(20px);
}
/* Отключаем tilt на тач-устройствах */
@media (hover: none) {
    .tilt-card { transform: none !important; }
    .tilt-card__inner { transform: none !important; }
}

/* 6. ── SplitText word reveal (для hero h1) ────────────────────────── */
.split-word {
    display: inline-block;
    opacity: 0;
    transform: translateY(40%);
    filter: blur(8px);
    will-change: transform, opacity, filter;
}
.split-word.is-revealed {
    animation: split-word-in 0.8s cubic-bezier(0.16, 1, 0.3, 1) forwards;
}
@keyframes split-word-in {
    to {
        opacity: 1;
        transform: translateY(0);
        filter: blur(0);
    }
}

/* 7. ── Magnetic кнопки (плавный возврат к центру) ─────────────────── */
.magnetic {
    transition: transform 0.3s cubic-bezier(0.16, 1, 0.3, 1);
    will-change: transform;
}

/* 8. ── Animated gradient border для hero primary CTA ──────────────── */
@property --grad-angle {
    syntax: '<angle>';
    initial-value: 0deg;
    inherits: false;
}
.gradient-border {
    position: relative;
    z-index: 0;
    isolation: isolate;
}
.gradient-border::before {
    content: '';
    position: absolute;
    inset: -2px;
    border-radius: inherit;
    padding: 2px;
    background: conic-gradient(
        from var(--grad-angle, 0deg),
        #3b82f6 0%,
        #06b6d4 25%,
        #8b5cf6 50%,
        #06b6d4 75%,
        #3b82f6 100%
    );
    -webkit-mask:
        linear-gradient(#000 0 0) content-box,
        linear-gradient(#000 0 0);
    -webkit-mask-composite: xor;
            mask-composite: exclude;
    animation: grad-rotate 6s linear infinite;
    z-index: -1;
}
@keyframes grad-rotate {
    to { --grad-angle: 360deg; }
}
/* Fallback для браузеров без @property (Firefox <128, Safari <16.4) */
@supports not (background: paint(angle)) {
    .gradient-border::before {
        animation: grad-rotate-fallback 6s linear infinite;
    }
}
@keyframes grad-rotate-fallback {
    from { transform: rotate(0deg); }
    to   { transform: rotate(360deg); }
}

/* 9. ── View Transitions: cross-fade для catalog → /solutions-X ────── */
@view-transition {
    navigation: auto;
}
::view-transition-old(root) {
    animation: vt-fade-out 0.25s cubic-bezier(0.4, 0, 0.2, 1) forwards;
}
::view-transition-new(root) {
    animation: vt-fade-in 0.35s cubic-bezier(0.16, 1, 0.3, 1) forwards;
}
@keyframes vt-fade-out {
    to { opacity: 0; transform: scale(0.99); }
}
@keyframes vt-fade-in {
    from { opacity: 0; transform: scale(1.01); }
}

/* ── prefers-reduced-motion: выключаем всё агрессивное движение ───── */
@media (prefers-reduced-motion: reduce) {
    .scroll-progress { display: none; }
    .brands-marquee__track {
        animation: none !important;
        transform: none !important;
        flex-wrap: wrap;
        justify-content: center;
    }
    .spotlight::before { display: none; }
    .tilt-card,
    .tilt-card__inner { transform: none !important; transition: none !important; }
    .split-word {
        opacity: 1 !important;
        transform: none !important;
        filter: none !important;
    }
    .magnetic { transform: none !important; }
    .gradient-border::before { animation: none !important; }
    ::view-transition-old(root),
    ::view-transition-new(root) { animation: none !important; }
}