/* =========================================================
   PREMIUM AI DESIGN SYSTEM
   Global visual foundation for the AI premium project
========================================================= */

:root {
    --ai-bg: #050505;
    --ai-bg-deep: #030711;
    --ai-bg-blue: #07101f;

    --ai-text: #ffffff;
    --ai-muted: rgba(255, 255, 255, 0.70);
    --ai-soft: rgba(255, 255, 255, 0.46);

    --ai-line: rgba(255, 255, 255, 0.12);
    --ai-line-strong: rgba(255, 255, 255, 0.18);

    --ai-violet: #b892ff;
    --ai-purple: #8f5cff;
    --ai-blue: #5f8bff;
    --ai-cyan: #00d0ff;

    --ai-container: 1240px;
    --ai-container-wide: 1440px;

    --ai-ease: cubic-bezier(.16, 1, .3, 1);
    --ai-ease-out: cubic-bezier(.19, 1, .22, 1);
}


.vp-ai-section__head,
.vp-ai-head {
    max-width: 820px;
    margin: 0 auto 72px;
    text-align: center;
}

/* =========================================================
   Base
========================================================= */

[class^="vp-ai-"],
[class*=" vp-ai-"],
[class^="vp-premium-"],
[class*=" vp-premium-"],
[class^="vp-cinematic-"],
[class*=" vp-cinematic-"],
[class^="vp-magnetic-"],
[class*=" vp-magnetic-"] {
    box-sizing: border-box;
}

[class^="vp-ai-"] *,
[class*=" vp-ai-"] *,
[class^="vp-premium-"] *,
[class*=" vp-premium-"] *,
[class^="vp-cinematic-"] *,
[class*=" vp-cinematic-"] *,
[class^="vp-magnetic-"] *,
[class*=" vp-magnetic-"] * {
    box-sizing: border-box;
}

/* =========================================================
   Section System
========================================================= */

.vp-ai-section {
    position: relative;
    overflow: hidden;
    isolation: isolate;
    padding-block: var(--ai-section-padding, 140px);

    background:
        radial-gradient(circle at 18% 20%, rgba(143, 92, 255, 0.18), transparent 34%),
        radial-gradient(circle at 82% 74%, rgba(0, 208, 255, 0.13), transparent 36%),
        linear-gradient(180deg, var(--ai-bg) 0%, var(--ai-bg-blue) 48%, var(--ai-bg) 100%);

    color: var(--ai-text);
}

.vp-ai-section::before {
    content: "";
    position: absolute;
    inset: 0;
    z-index: 0;
    pointer-events: none;

    background:
        linear-gradient(rgba(255, 255, 255, 0.035) 1px, transparent 1px),
        linear-gradient(90deg, rgba(255, 255, 255, 0.035) 1px, transparent 1px);

    background-size: 72px 72px;

    mask-image:
        radial-gradient(circle at center, black 0%, transparent 72%);

    opacity: 0.40;
}

.vp-ai-section::after {
    content: "";
    position: absolute;
    inset: 0;
    z-index: 1;
    pointer-events: none;

    background:
        linear-gradient(180deg,
            transparent 0%,
            rgba(0, 0, 0, 0.42) 100%);
}

.vp-ai-section>* {
    position: relative;
    z-index: 3;
}

/* =========================================================
   Container
========================================================= */

.vp-ai-container {
    width: min(100% - 48px, var(--ai-container));
    margin-inline: auto;
}

.vp-ai-container--wide {
    width: min(100% - 80px, var(--ai-container-wide));
    margin-inline: auto;
}

/* =========================================================
   Typography
========================================================= */

.vp-ai-kicker {
    display: inline-flex;
    align-items: center;
    justify-content: center;

    margin-bottom: 22px;
    padding: 9px 16px;

    border: 1px solid rgba(184, 146, 255, 0.22);
    border-radius: 999px;

    background: rgba(255, 255, 255, 0.045);
    backdrop-filter: blur(14px);

    color: var(--ai-violet);

    font-size: 12px;
    line-height: 1;
    font-weight: 800;
    letter-spacing: 0.20em;
    text-transform: uppercase;
}

.vp-ai-title {
    margin: 0;

    color: var(--ai-text);

    font-size: clamp(42px, 6.5vw, 86px) !important;
    line-height: 0.95;
    letter-spacing: -0.06em;
    font-weight: 650;

    text-wrap: balance;
    text-rendering: geometricPrecision;

    text-shadow:
        0 0 12px rgba(255, 255, 255, 0.08),
        0 0 42px rgba(143, 92, 255, 0.18);
}

.vp-ai-title--hero {
    font-size: clamp(58px, 7.5vw, 112px);
    line-height: 0.92;
    letter-spacing: -0.075em;
}

.vp-ai-text {
    max-width: 720px;

    color: var(--ai-muted);

    font-size: clamp(17px, 1.4vw, 20px);
    line-height: 1.8;
}

/* =========================================================
   Glass Cards
========================================================= */

.vp-ai-card {
    position: relative;
    overflow: hidden;

    border: 1px solid rgba(255, 255, 255, 0.11);
    border-radius: 30px;

    background:
        linear-gradient(135deg,
            rgba(255, 255, 255, 0.09),
            rgba(255, 255, 255, 0.025)),
        rgba(8, 15, 30, 0.72);

    backdrop-filter: blur(22px);

    box-shadow:
        0 28px 90px rgba(0, 0, 0, 0.34),
        inset 0 1px 0 rgba(255, 255, 255, 0.10);

    transition:
        transform 0.55s var(--ai-ease-out),
        border-color 0.45s ease,
        box-shadow 0.45s ease,
        background 0.45s ease,
        opacity 0.45s ease,
        filter 0.45s ease;
}

.vp-ai-card::before {
    content: "";
    position: absolute;
    inset: -1px;
    pointer-events: none;

    background:
        linear-gradient(120deg,
            transparent,
            rgba(0, 208, 255, 0.16),
            rgba(184, 146, 255, 0.12),
            transparent);

    opacity: 0;
    transform: translateX(-38%);

    transition:
        opacity 0.45s ease,
        transform 0.85s var(--ai-ease-out);
}

.vp-ai-card:hover {
    transform: translateY(-10px);

    border-color: rgba(0, 208, 255, 0.34);

    box-shadow:
        0 36px 120px rgba(0, 0, 0, 0.44),
        0 0 60px rgba(0, 208, 255, 0.13),
        0 0 90px rgba(184, 146, 255, 0.10),
        inset 0 1px 0 rgba(255, 255, 255, 0.14);
}

.vp-ai-card:hover::before {
    opacity: 1;
    transform: translateX(38%);
}

/* =========================================================
   Media Cards
========================================================= */

.vp-ai-media-card img {
    transition:
        transform 0.9s var(--ai-ease-out),
        filter 0.55s ease;
}

.vp-ai-media-card:hover img {
    transform: scale(1.075);

    filter:
        saturate(1.18) contrast(1.08) brightness(1.03);
}

/* =========================================================
   Buttons
========================================================= */

.vp-ai-button {
    position: relative;
    overflow: hidden;
    isolation: isolate;

    display: inline-flex;
    align-items: center;
    justify-content: center;

    text-decoration: none;

    will-change: transform;
}

.vp-ai-button::before {
    content: "";
    position: absolute;
    inset: 0;
    z-index: 1;

    transform: translateX(-120%);

    background:
        linear-gradient(90deg,
            transparent,
            rgba(255, 255, 255, 0.24),
            transparent);

    transition:
        transform 0.75s var(--ai-ease-out);
}

.vp-ai-button:hover::before {
    transform: translateX(120%);
}

.vp-ai-button>span {
    position: relative;
    z-index: 3;
}

/* =========================================================
   Global Glow Utilities
========================================================= */

.vp-ai-glow {
    position: absolute;

    width: 540px;
    height: 540px;

    border-radius: 999px;

    filter: blur(150px);
    opacity: 0.18;

    pointer-events: none;

    animation:
        vpAiGlowFloat 12s ease-in-out infinite alternate;
}

.vp-ai-glow--violet {
    background: var(--ai-purple);
}

.vp-ai-glow--cyan {
    background: var(--ai-cyan);
    animation-delay: 2s;
}

@keyframes vpAiGlowFloat {
    from {
        transform: translate3d(0, 0, 0) scale(1);
    }

    to {
        transform: translate3d(42px, -32px, 0) scale(1.12);
    }
}

/* =========================================================
   Reveal Foundation
========================================================= */

.vp-ai-reveal {
    opacity: 0;

    transform:
        translateY(38px) scale(0.965);

    filter: blur(12px);

    transition:
        opacity 1s var(--ai-ease),
        transform 1s var(--ai-ease),
        filter 1s var(--ai-ease);

    will-change:
        opacity,
        transform,
        filter;
}

.vp-ai-reveal-active {
    opacity: 1;

    transform:
        translateY(0) scale(1);

    filter: blur(0);
}

/* =========================================================
   JS State Helpers
========================================================= */

.vp-ai-js-ready * {
    backface-visibility: hidden;
}

.vp-ai-depth-target {
    transform-style: preserve-3d;
    will-change: transform;
}

.vp-ai-depth-target.is-depth-active {
    z-index: 5;
}

/* =========================================================
   Responsive
========================================================= */

@media (max-width: 980px) {

    .vp-ai-container,
    .vp-ai-container--wide {
        width: min(100% - 36px, var(--ai-container));
    }

    .vp-ai-title {
        font-size: clamp(38px, 9vw, 68px);
    }

    .vp-ai-title--hero {
        font-size: clamp(48px, 13vw, 82px);
    }
}

@media (max-width: 640px) {

    .vp-ai-container,
    .vp-ai-container--wide {
        width: min(100% - 28px, var(--ai-container));
    }

    .vp-ai-kicker {
        font-size: 11px;
        letter-spacing: 0.16em;
    }

    .vp-ai-text {
        font-size: 16px;
        line-height: 1.75;
    }
}

@media (prefers-reduced-motion: reduce) {
    .vp-ai-reveal {
        opacity: 1;
        transform: none;
        filter: none;
        transition: none;
    }

    .vp-ai-glow {
        animation: none;
    }
}

.vp-ai-section {
    transition:
        opacity 0.7s var(--ai-ease),
        filter 0.7s var(--ai-ease);
}

.vp-ai-section:not(.vp-ai-section-active) {
    opacity: 0.82;
    filter: saturate(0.86);
}

.vp-ai-section.vp-ai-section-active {
    opacity: 1;
    filter: saturate(1.08);
}



.vp-ai-section {
    --scene-glow-a: 0.18;
    --scene-glow-b: 0.12;
    --scene-shift: 0px;
}

.vp-ai-section.vp-ai-section-active {
    background:
        radial-gradient(circle at calc(18% + var(--scene-shift)) 20%, rgba(143, 92, 255, var(--scene-glow-a)), transparent 34%),
        radial-gradient(circle at calc(82% - var(--scene-shift)) 74%, rgba(0, 208, 255, var(--scene-glow-b)), transparent 36%),
        linear-gradient(180deg, var(--ai-bg) 0%, var(--ai-bg-blue) 48%, var(--ai-bg) 100%) !important;
}

.vp-cinematic-features__card {
    transition:
        opacity 0.75s var(--ai-ease),
        transform 0.75s var(--ai-ease),
        filter 0.75s var(--ai-ease),
        border-color 0.45s ease,
        box-shadow 0.45s ease;
}

.vp-cinematic-features__card:not(.vp-ai-card-awake) {
    opacity: 0.42;
    transform: translateY(44px) scale(0.94);
    filter: blur(10px) saturate(0.75);
}

.vp-cinematic-features__card.vp-ai-card-awake {
    opacity: 1;
    transform: translateY(0) scale(1);
    filter: blur(0) saturate(1.12);
}

.vp-ai-showcase__stat,
.vp-ai-showcase__card {
    transition:
        opacity 0.75s var(--ai-ease),
        transform 0.75s var(--ai-ease),
        filter 0.75s var(--ai-ease);
}

/* =========================================================
   AI PROJECT VISUAL LOCK
   Stabilize body background between generated AI blocks
========================================================= */

body:has(.vp-ai-section),
body:has(.vp-premium-hero),
body:has(.vp-cinematic-features),
body:has(.vp-magnetic-cta) {
    background:
        radial-gradient(circle at 18% 22%, rgba(143, 92, 255, 0.10), transparent 34%),
        radial-gradient(circle at 82% 70%, rgba(0, 208, 255, 0.08), transparent 36%),
        linear-gradient(180deg, #030711 0%, #07101f 50%, #050505 100%);
}

/* =========================================================
   AI PROJECT FOOTER LOCK
   Keep Enterprise Footer aligned with AI identity
   and isolated from global theme collections.
========================================================= */

body:has(.vp-premium-hero) .vp-footer-enterprise,
body:has(.vp-ai-section) .vp-footer-enterprise,
body:has(.vp-cinematic-features) .vp-footer-enterprise,
body:has(.vp-magnetic-cta) .vp-footer-enterprise {
    --primary: var(--ai-cyan);
    --text: var(--ai-text);
    --subtext: var(--ai-muted);
    --glow-color: 0, 208, 255;
    --button-text: #031018;
    --shadow-soft: 0 22px 70px rgba(0, 208, 255, 0.18);
}