/**
 * Conscious Campaign — motion.css
 *
 * Alle animatie- en interactie-styling. Hoort bij assets/js/motion.js.
 * Alles is transform/opacity based, dus GPU-versneld en goedkoop.
 *
 * @package ConsciousCampaign
 */

/* =====================================================================
 * Motion tokens
 * ================================================================== */

:root {
    --cc-ease-out: cubic-bezier(0.16, 1, 0.3, 1);
    --cc-ease-in-out: cubic-bezier(0.65, 0, 0.35, 1);
    --cc-ease-spring: cubic-bezier(0.34, 1.56, 0.64, 1);

    --cc-dur-fast: 200ms;
    --cc-dur-base: 420ms;
    --cc-dur-slow: 780ms;

    --cc-reveal-distance: 32px;
    --cc-reveal-delay: 0ms;
}

/* =====================================================================
 * 1. Scroll reveal
 * ================================================================== */

.cc-reveal-init {
    opacity: 0;
    will-change: opacity, transform;
    transition:
        opacity var(--cc-dur-slow) var(--cc-ease-out) var(--cc-reveal-delay),
        transform var(--cc-dur-slow) var(--cc-ease-out) var(--cc-reveal-delay),
        filter var(--cc-dur-slow) var(--cc-ease-out) var(--cc-reveal-delay),
        clip-path var(--cc-dur-slow) var(--cc-ease-out) var(--cc-reveal-delay);
}

.cc-reveal-init[data-cc-reveal="up"]    { transform: translate3d(0, var(--cc-reveal-distance), 0); }
.cc-reveal-init[data-cc-reveal="down"]  { transform: translate3d(0, calc(var(--cc-reveal-distance) * -1), 0); }
.cc-reveal-init[data-cc-reveal="left"]  { transform: translate3d(calc(var(--cc-reveal-distance) * -1.5), 0, 0); }
.cc-reveal-init[data-cc-reveal="right"] { transform: translate3d(calc(var(--cc-reveal-distance) * 1.5), 0, 0); }
.cc-reveal-init[data-cc-reveal="scale"] { transform: scale(0.92) translate3d(0, 16px, 0); }
.cc-reveal-init[data-cc-reveal="blur"]  { filter: blur(14px); transform: translate3d(0, 20px, 0); }
.cc-reveal-init[data-cc-reveal="clip"]  { clip-path: inset(0 0 100% 0); transform: translate3d(0, 12px, 0); }
.cc-reveal-init[data-cc-reveal="fade"]  { transform: none; }

.cc-revealed {
    opacity: 1 !important;
    transform: none !important;
    filter: none !important;
    /*
     * GEEN clip-path hier. Eerder stond hier clip-path: inset(0 0 0 0), maar
     * dat knipt exact op de rand van het element, waardoor de staarten van
     * letters (g, p, j, y) op vrijwel elke kop en alinea met een reveal werden
     * afgekapt. De clip-variant van de reveal wordt nergens gebruikt, dus het
     * resetten is niet nodig.
     */
}

/* will-change opruimen zodra de animatie klaar is, scheelt geheugen. */
.cc-revealed {
    will-change: auto;
}

/* =====================================================================
 * 2. Tilt cards
 * ================================================================== */

.cc-tilt {
    transform-style: preserve-3d;
    transition: box-shadow var(--cc-dur-base) var(--cc-ease-out),
                transform var(--cc-dur-base) var(--cc-ease-out);
    position: relative;
}

.cc-tilt.is-tilting {
    /* Tijdens tilt stuurt JS de transform, dus transitie eruit voor directheid. */
    transition: box-shadow var(--cc-dur-base) var(--cc-ease-out);
    z-index: 2;
    box-shadow:
        0 2px 4px rgba(15, 20, 25, 0.04),
        0 12px 24px rgba(15, 20, 25, 0.08),
        0 32px 64px rgba(15, 20, 25, 0.12);
}

/* Lichtvlek die de cursor volgt binnen de gekantelde kaart. */
.cc-tilt::after {
    content: "";
    position: absolute;
    inset: 0;
    border-radius: inherit;
    pointer-events: none;
    opacity: 0;
    transition: opacity var(--cc-dur-base) var(--cc-ease-out);
    background: radial-gradient(
        420px circle at var(--cc-glow-x, 50%) var(--cc-glow-y, 50%),
        rgba(255, 255, 255, 0.5),
        transparent 60%
    );
}

.cc-tilt.is-tilting::after {
    opacity: 1;
}

/* Op donkere kaarten een subtielere, blauwe glow. */
.has-neutral-900-background-color.cc-tilt::after,
.has-neutral-800-background-color.cc-tilt::after {
    background: radial-gradient(
        420px circle at var(--cc-glow-x, 50%) var(--cc-glow-y, 50%),
        rgba(49, 130, 206, 0.28),
        transparent 62%
    );
}

/* =====================================================================
 * 3. Magnetic buttons
 * ================================================================== */

/*
 * De terugveer naar de rustpositie doet CSS. Zodra de cursor erop staat
 * neemt JS het over en zetten we de transitie op transform uit, anders
 * smoothen CSS en JS allebei en schommelt de knop na.
 */
.cc-magnetic {
    transition: transform 480ms var(--cc-ease-spring),
                box-shadow var(--cc-dur-base) var(--cc-ease-out);
    will-change: transform;
}

.cc-magnetic.is-magnetic-active {
    transition: box-shadow var(--cc-dur-base) var(--cc-ease-out);
}

/* =====================================================================
 * 4. Knoppen: shine sweep en lift
 * ================================================================== */

.wp-element-button,
.wp-block-button__link {
    position: relative;
    overflow: hidden;
    isolation: isolate;
    transition:
        transform var(--cc-dur-fast) var(--cc-ease-out),
        box-shadow var(--cc-dur-base) var(--cc-ease-out),
        background-color var(--cc-dur-fast) var(--cc-ease-out);
}

/*
 * De glans-sweep (::before) is bewust verwijderd. Die schuine gradient bleef
 * in sommige gevallen als een vaag vlak links naast de knop hangen. De knop
 * heeft nog steeds zijn lift-schaduw bij hover, dat is genoeg beweging.
 */

.wp-element-button:hover,
.wp-block-button__link:hover {
    /* Neutrale lift-schaduw, ongeacht de knopkleur. De oranje gloed van
       hiervoor kleurde ook blauwe knoppen roze. */
    box-shadow:
        0 2px 6px rgba(15, 20, 25, 0.08),
        0 10px 24px rgba(15, 20, 25, 0.12);
}

.wp-element-button:active,
.wp-block-button__link:active {
    transform: translateY(1px) scale(0.985);
}

/* Outline-knoppen krijgen een vulling die vanaf onder inschuift. */
.wp-block-button.is-style-outline .wp-block-button__link {
    transition:
        color var(--cc-dur-base) var(--cc-ease-out),
        border-color var(--cc-dur-base) var(--cc-ease-out),
        transform var(--cc-dur-fast) var(--cc-ease-out);
}

/* =====================================================================
 * 5. Roulerende woorden
 * ================================================================== */

.cc-rotator {
    display: inline-block;
    min-width: var(--cc-rotator-ch, auto);
    text-align: left;
    background: var(--wp--preset--gradient--sunset-gradient, linear-gradient(90deg, #fe5b24, #3182ce));
    -webkit-background-clip: text;
    background-clip: text;
    color: transparent;
    /*
     * background-clip:text knipt de achtergrond op de tekstvorm. Bij een
     * krappe regelhoogte valt de staart van letters als g en p buiten het
     * vlak en wordt die afgekapt. Extra ruimte onderin lost dat op.
     */
    line-height: 1.15;
    padding-bottom: 0.18em;
    transition:
        opacity 300ms var(--cc-ease-out),
        transform 300ms var(--cc-ease-out),
        filter 300ms var(--cc-ease-out);
}

.cc-rotator.is-swapping {
    opacity: 0;
    transform: translate3d(0, -0.35em, 0);
    filter: blur(6px);
}

/* =====================================================================
 * 6. Scroll progress bar
 * ================================================================== */

.cc-progress {
    position: fixed;
    inset: 0 0 auto 0;
    height: 3px;
    z-index: 999;
    pointer-events: none;
    background: transparent;
}

.cc-progress__fill {
    display: block;
    height: 100%;
    width: 100%;
    transform: scaleX(0);
    transform-origin: 0 50%;
    background: var(--wp--preset--gradient--sunset-gradient, linear-gradient(90deg, #fe5b24, #3182ce));
    will-change: transform;
}

/* =====================================================================
 * 7. Marquee
 * ================================================================== */

.cc-marquee {
    --cc-marquee-gap: clamp(2rem, 5vw, 4.5rem);
    position: relative;
    display: flex;
    overflow: hidden;
    gap: var(--cc-marquee-gap);
    user-select: none;
    /* Randen laten uitfaden zodat het oneindig aanvoelt. */
    -webkit-mask-image: linear-gradient(90deg, transparent, #000 12%, #000 88%, transparent);
    mask-image: linear-gradient(90deg, transparent, #000 12%, #000 88%, transparent);
}

.cc-marquee__track {
    display: flex;
    align-items: center;
    flex-shrink: 0;
    gap: var(--cc-marquee-gap);
    padding-right: var(--cc-marquee-gap);
    min-width: 100%;
    animation: cc-marquee-scroll var(--cc-marquee-duration, 40s) linear infinite;
    will-change: transform;
}

.cc-marquee:hover .cc-marquee__track {
    animation-play-state: paused;
}

.cc-marquee--reverse .cc-marquee__track {
    animation-direction: reverse;
}

.cc-marquee__item {
    flex-shrink: 0;
    white-space: nowrap;
    display: inline-flex;
    align-items: center;
    gap: 0.6em;
}

@keyframes cc-marquee-scroll {
    from { transform: translate3d(0, 0, 0); }
    to   { transform: translate3d(calc(-100% - var(--cc-marquee-gap)), 0, 0); }
}

/* =====================================================================
 * 8. Sticky scroll story
 * ================================================================== */

.cc-story {
    position: relative;
}

@media (min-width: 782px) {
    .cc-story {
        display: grid;
        grid-template-columns: 1fr 1fr;
        gap: clamp(2rem, 6vw, 5rem);
        align-items: start;
    }

    .cc-story__visual {
        position: sticky;
        top: clamp(6rem, 18vh, 11rem);
        height: min(66vh, 560px);
        border-radius: 20px;
        overflow: hidden;
    }

    .cc-story__visual > * {
        position: absolute;
        inset: 0;
        opacity: 0;
        transform: scale(1.04);
        transition:
            opacity var(--cc-dur-slow) var(--cc-ease-out),
            transform var(--cc-dur-slow) var(--cc-ease-out);
    }

    .cc-story__visual > *.is-active {
        opacity: 1;
        transform: scale(1);
    }
}

.cc-story__step {
    padding-block: clamp(3rem, 14vh, 8rem);
    opacity: 0.35;
    transition: opacity var(--cc-dur-slow) var(--cc-ease-out);
}

.cc-story__step.is-active {
    opacity: 1;
}

/* Verticale voortgangslijn naast de stappen. */
.cc-story__steps {
    position: relative;
}

@media (min-width: 782px) {
    .cc-story__steps::before {
        content: "";
        position: absolute;
        left: -1.75rem;
        top: 0;
        bottom: 0;
        width: 2px;
        background: var(--wp--preset--color--neutral-200, #e2e8f0);
    }
}

/* =====================================================================
 * 9. Spotlight secties
 * ================================================================== */

.cc-spotlight {
    position: relative;
    isolation: isolate;
}

.cc-spotlight::before {
    content: "";
    position: absolute;
    inset: 0;
    z-index: -1;
    pointer-events: none;
    opacity: 0;
    transition: opacity 500ms var(--cc-ease-out);
    background: radial-gradient(
        600px circle at var(--cc-spot-x, 50%) var(--cc-spot-y, 50%),
        rgba(49, 130, 206, 0.16),
        transparent 65%
    );
}

.cc-spotlight:hover::before {
    opacity: 1;
}

/* =====================================================================
 * 10. Animated gradient border
 * ================================================================== */

.cc-gradient-border {
    position: relative;
    isolation: isolate;
    border-radius: 18px;
}

.cc-gradient-border::before {
    content: "";
    position: absolute;
    inset: -1.5px;
    z-index: -1;
    border-radius: inherit;
    background: conic-gradient(
        from var(--cc-angle, 0deg),
        #3182ce,
        #fe5b24,
        #7fb4e9,
        #fe5b24,
        #3182ce
    );
    animation: cc-rotate-border 6s linear infinite;
}

@property --cc-angle {
    syntax: "<angle>";
    initial-value: 0deg;
    inherits: false;
}

@keyframes cc-rotate-border {
    to { --cc-angle: 360deg; }
}

/* Fallback voor browsers zonder @property: dan gewoon een statische rand. */
@supports not (background: conic-gradient(from 0deg, red, blue)) {
    .cc-gradient-border::before {
        background: linear-gradient(135deg, #3182ce, #fe5b24);
        animation: none;
    }
}

/* =====================================================================
 * 11. Mesh gradient achtergronden (decoratieve blobs)
 * ================================================================== */

.cc-mesh {
    position: relative;
    isolation: isolate;
    overflow: hidden;
}

/*
 * Zachte tint bovenaan de lichte mesh-secties. Zonder dit is de bovenkant van
 * de hero puur wit, en omdat het menu zweeft en doorschijnend is, zag je onder
 * het menu een wit vlak in plaats van een doorlopende achtergrond. Deze wash
 * vult dat op met een subtiele kleur die naadloos onder de balk doorloopt.
 * Niet op de donkere variant, die heeft juist een donkere achtergrond nodig.
 */
.cc-mesh:not(.cc-mesh--dark) {
    background: linear-gradient(180deg, #eef3fb 0%, #ffffff 55%);
}

/*
 * Op de lichte secties laten we de zwevende kleurvlekken weg. Samen met de
 * tint gaven die een tweede, zichtbaar begrensd vlak, terwijl we juist één
 * doorlopende achtergrond willen. De donkere variant houdt zijn vlekken.
 */
.cc-mesh:not(.cc-mesh--dark)::before,
.cc-mesh:not(.cc-mesh--dark)::after {
    display: none;
}

.cc-mesh::before,
.cc-mesh::after {
    content: "";
    position: absolute;
    z-index: -1;
    border-radius: 50%;
    filter: blur(80px);
    opacity: 0.55;
    pointer-events: none;
}

.cc-mesh::before {
    width: 46vw;
    height: 46vw;
    max-width: 640px;
    max-height: 640px;
    top: -14%;
    left: -10%;
    background: radial-gradient(circle, #3182ce, transparent 70%);
    animation: cc-float-a 18s var(--cc-ease-in-out) infinite;
}

.cc-mesh::after {
    width: 38vw;
    height: 38vw;
    max-width: 520px;
    max-height: 520px;
    bottom: -18%;
    right: -8%;
    background: radial-gradient(circle, #fe5b24, transparent 70%);
    animation: cc-float-b 22s var(--cc-ease-in-out) infinite;
}

.cc-mesh--dark::before {
    background: radial-gradient(circle, #5b9ed8, transparent 70%);
    opacity: 0.4;
}

.cc-mesh--dark::after {
    background: radial-gradient(circle, #fe804e, transparent 70%);
    opacity: 0.32;
}

@keyframes cc-float-a {
    0%, 100% { transform: translate3d(0, 0, 0) scale(1); }
    33%      { transform: translate3d(6%, 8%, 0) scale(1.12); }
    66%      { transform: translate3d(-4%, 4%, 0) scale(0.95); }
}

@keyframes cc-float-b {
    0%, 100% { transform: translate3d(0, 0, 0) scale(1); }
    40%      { transform: translate3d(-7%, -6%, 0) scale(1.15); }
    70%      { transform: translate3d(3%, -3%, 0) scale(0.92); }
}

/* Fijn rasterpatroon over hero secties, geeft diepte. */
.cc-grid-overlay::after {
    content: "";
    position: absolute;
    inset: 0;
    z-index: -1;
    pointer-events: none;
    background-image:
        linear-gradient(rgba(15, 20, 25, 0.045) 1px, transparent 1px),
        linear-gradient(90deg, rgba(15, 20, 25, 0.045) 1px, transparent 1px);
    background-size: 56px 56px;
    -webkit-mask-image: radial-gradient(ellipse 80% 60% at 50% 40%, #000, transparent);
    mask-image: radial-gradient(ellipse 80% 60% at 50% 40%, #000, transparent);
}

.cc-grid-overlay--light::after {
    background-image:
        linear-gradient(rgba(255, 255, 255, 0.07) 1px, transparent 1px),
        linear-gradient(90deg, rgba(255, 255, 255, 0.07) 1px, transparent 1px);
}

/* =====================================================================
 * 12. Glassmorphism kaart
 * ================================================================== */

.cc-glass {
    background: rgba(255, 255, 255, 0.62);
    -webkit-backdrop-filter: blur(18px) saturate(150%);
    backdrop-filter: blur(18px) saturate(150%);
    border: 1px solid rgba(255, 255, 255, 0.72);
    box-shadow:
        0 1px 2px rgba(15, 20, 25, 0.04),
        0 12px 32px rgba(15, 20, 25, 0.08);
}

.cc-glass--dark {
    background: rgba(26, 32, 44, 0.55);
    border-color: rgba(255, 255, 255, 0.1);
    color: #fff;
}

@supports not ((backdrop-filter: blur(1px)) or (-webkit-backdrop-filter: blur(1px))) {
    .cc-glass { background: rgba(255, 255, 255, 0.94); }
    .cc-glass--dark { background: rgba(26, 32, 44, 0.94); }
}

/* =====================================================================
 * 13. Kaart hover lift (generiek, voor pattern-kaarten)
 * ================================================================== */

.cc-card {
    transition:
        transform var(--cc-dur-base) var(--cc-ease-out),
        box-shadow var(--cc-dur-base) var(--cc-ease-out),
        border-color var(--cc-dur-base) var(--cc-ease-out);
}

.cc-card:hover {
    transform: translateY(-6px);
    box-shadow:
        0 2px 4px rgba(15, 20, 25, 0.04),
        0 16px 32px rgba(15, 20, 25, 0.1);
}

/* Afbeeldingen binnen kaarten zoomen subtiel mee. */
.cc-card figure,
.cc-card .wp-block-image,
.cc-card .wp-block-post-featured-image {
    overflow: hidden;
    border-radius: 12px;
}

.cc-card img {
    transition: transform 900ms var(--cc-ease-out);
}

.cc-card:hover img {
    transform: scale(1.06);
}

/* =====================================================================
 * 14. Bento grid
 * ================================================================== */

.cc-bento {
    display: grid;
    grid-template-columns: repeat(6, 1fr);
    gap: clamp(0.9rem, 1.6vw, 1.4rem);
}

.cc-bento > * {
    grid-column: span 6;
    min-height: 200px;
}

@media (min-width: 600px) {
    .cc-bento > * { grid-column: span 3; }
    .cc-bento > .cc-bento--wide { grid-column: span 6; }
}

@media (min-width: 900px) {
    .cc-bento > *                { grid-column: span 2; }
    .cc-bento > .cc-bento--wide  { grid-column: span 4; }
    .cc-bento > .cc-bento--tall  { grid-row: span 2; }
    .cc-bento > .cc-bento--full  { grid-column: span 6; }
}

/* =====================================================================
 * 15. Link underline animatie
 * ================================================================== */

.wp-block-post-content a:not(.wp-element-button),
.cc-link-anim {
    background-image: linear-gradient(currentColor, currentColor);
    background-size: 0% 1.5px;
    background-position: 0 100%;
    background-repeat: no-repeat;
    transition: background-size 380ms var(--cc-ease-out);
    text-decoration: none;
}

.wp-block-post-content a:not(.wp-element-button):hover,
.cc-link-anim:hover {
    background-size: 100% 1.5px;
}

/* =====================================================================
 * 16. View Transitions
 * ================================================================== */

@view-transition {
    navigation: auto;
}

::view-transition-old(root) {
    animation: cc-vt-out 260ms var(--cc-ease-in-out) both;
}

::view-transition-new(root) {
    animation: cc-vt-in 380ms var(--cc-ease-out) both;
}

@keyframes cc-vt-out {
    to { opacity: 0; transform: translateY(-8px); }
}

@keyframes cc-vt-in {
    from { opacity: 0; transform: translateY(12px); }
}

/* Header en footer blijven staan tijdens de overgang. */
.site-header { view-transition-name: cc-header; }

::view-transition-old(cc-header),
::view-transition-new(cc-header) {
    animation: none;
    mix-blend-mode: normal;
}

/* =====================================================================
 * 17. Reduced motion: alles uit
 * ================================================================== */

@media (prefers-reduced-motion: reduce) {
    *,
    *::before,
    *::after {
        animation-duration: 0.01ms !important;
        animation-iteration-count: 1 !important;
        transition-duration: 0.01ms !important;
        scroll-behavior: auto !important;
    }

    .cc-reveal-init {
        opacity: 1;
        transform: none;
        filter: none;
        clip-path: none;
    }

    .cc-marquee__track { animation: none; }
    .cc-mesh::before,
    .cc-mesh::after { animation: none; }

    @view-transition {
        navigation: none;
    }
}