/* =========================================================
   CREATIVE DESIGN SYSTEM
   Global foundation only
========================================================= */

:root {
    --creative-bg: #050505;

    --creative-text: #ffffff;
    --creative-muted: rgba(255, 255, 255, 0.74);
    --creative-soft: rgba(255, 255, 255, 0.48);

    --creative-line: rgba(255, 255, 255, 0.12);

    --creative-card: rgba(255, 255, 255, 0.04);
    --creative-card-hover: rgba(255, 255, 255, 0.07);

    --creative-container: 1600px;

    --creative-ease:
        cubic-bezier(.16, 1, .3, 1);
}

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

[class^="vp-creative-"],
[class*=" vp-creative-"],
[class^="vp-creative-"] *,
[class*=" vp-creative-"] * {
    box-sizing: border-box;
}

.vp-creative-section {
    position: relative;

    overflow: hidden;

    background: var(--creative-bg);
    color: var(--creative-text);
}

.vp-creative-container {
    width:
        min(100% - 64px, var(--creative-container));

    margin-inline: auto;
}

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

.vp-creative-eyebrow {
    display: inline-block;

    font-size: 11px;
    line-height: 1;

    letter-spacing: .28em;
    text-transform: uppercase;

    font-weight: 500;

    color: var(--creative-soft);
}

.vp-creative-title {
    margin: 0;

    color: var(--creative-text);

    text-wrap: balance;

    text-rendering: geometricPrecision;
}

.vp-creative-text {
    color: var(--creative-muted);
}

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

.vp-creative-button {
    position: relative;

    will-change: transform;

    transition:
        transform .55s var(--creative-ease),
        border-color .45s ease,
        background .45s ease,
        box-shadow .55s var(--creative-ease);
}

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

.vp-creative-card {
    position: relative;

    overflow: hidden;

    transition:
        transform .85s var(--creative-ease),
        border-color .55s ease,
        background .55s ease,
        opacity .55s ease,
        box-shadow .85s var(--creative-ease),
        filter .85s var(--creative-ease);
}

.vp-creative-media-card img {
    transition:
        transform 1.2s var(--creative-ease),
        filter 1.2s var(--creative-ease);
}

/* =========================================================
   Reveal System
========================================================= */

.vp-creative-reveal {
    opacity: 0;

    transform:
        translateY(42px) scale(.985);

    filter:
        blur(10px);

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

    will-change:
        opacity,
        transform,
        filter;
}

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

    transform:
        translateY(0) scale(1);

    filter: blur(0);
}

/* =========================================================
   JS Active State
========================================================= */

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

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

@media (max-width: 980px) {

    .vp-creative-container {
        width:
            min(100% - 48px, var(--creative-container));
    }

}

@media (max-width: 768px) {

    .vp-creative-container {
        width:
            min(100% - 32px, var(--creative-container));
    }

}

@media (prefers-reduced-motion: reduce) {

    .vp-creative-reveal {
        opacity: 1;

        transform: none;
        filter: none;

        transition: none;
    }

}

/* =========================================================
   CREATIVE SYSTEM JS STATES
========================================================= */

.vp-creative-card,
.vp-creative-projects__card,
.vp-creative-capabilities__item,
.vp-creative-process__step {
    transform-style: preserve-3d;
    will-change: transform;
}

.vp-creative-card.is-depth-active,
.vp-creative-projects__card.is-depth-active,
.vp-creative-capabilities__item.is-depth-active,
.vp-creative-process__step.is-depth-active {
    z-index: 5;
}

.vp-creative-section.is-section-active {
    isolation: isolate;
}

/* =========================================================
   CREATIVE KINETIC TEXT
========================================================= */

.vp-creative-title {
    transform:
        translate3d(var(--creative-title-shift, 0),
            0,
            0) scale(var(--creative-title-scale, 1));

    transition:
        transform .18s linear;

    will-change: transform;
}

/* =========================================================
   CREATIVE SPOTLIGHT SYSTEM
========================================================= */

.vp-creative-section::before {
    content: "";

    position: absolute;
    inset: 0;

    pointer-events: none;

    opacity: 0;

    background:
        radial-gradient(700px circle at var(--creative-spotlight-x, 50%) var(--creative-spotlight-y, 50%),

            rgba(255, 255, 255, 0.09),
            transparent 60%);

    transition:
        opacity .45s ease;

    z-index: 1;
}

.vp-creative-section.is-spotlight-active::before {
    opacity: 1;
}

.vp-creative-section>* {
    position: relative;
    z-index: 2;
}

/* =========================================================
   CREATIVE PAGE VISUAL LOCK
   Keeps Creative independent from global theme backgrounds
========================================================= */

body:has(.vp-creative-section) {
    background: #0a0a0a;
}

/* Prevent theme background from appearing between creative blocks */
.vp-creative-section {
    background: #050505;
}

/* Prevent tiny gaps between generated blocks */
.vp-creative-section+.vp-creative-section {
    margin-top: -1px;
}

/* Keep media-heavy creative project clean */
body:has(.vp-creative-section) {
    color: #ffffff;
}

/* =========================================================
   CREATIVE PROJECT FOOTER LOCK
   Maps the Minimal Footer tokens
   to the Creative visual identity.
========================================================= */

body:has(.vp-creative-hero) .vp-footer-minimal,
body:has(.vp-creative-section) .vp-footer-minimal,
body:has(.vp-creative-marquee) .vp-footer-minimal,
body:has(.vp-creative-capabilities) .vp-footer-minimal,
body:has(.vp-creative-projects) .vp-footer-minimal,
body:has(.vp-creative-cta) .vp-footer-minimal {
    --primary: var(--creative-text);
    --text: var(--creative-text);
    --subtext: var(--creative-muted);
    --glow-color: 255, 255, 255;
    --button-text: #050505;
    --shadow-soft: 0 22px 70px rgba(255, 255, 255, 0.10);
}