/* =========================================================
   KREA23 HERO — BASE
   ========================================================= */

.krea-hero {
    position: relative;
    overflow: hidden;
    isolation: isolate;
}


/* =========================================================
   GEOMETRIC ART
   JavaScript moves the OUTER module.
   CSS rotates the INNER artwork.
   ========================================================= */

.krea-hero-art-module {
    position: absolute !important;

    width: clamp(380px, 36vw, 560px) !important;
    height: clamp(380px, 36vw, 560px) !important;

    right: 6vw;
    top: 0;
    bottom: 0;

    margin: auto 0 !important;
    padding: 0 !important;

    z-index: 1;

    pointer-events: none;

    transition:
        opacity 0.55s cubic-bezier(0.22, 1, 0.36, 1),
        filter 0.55s cubic-bezier(0.22, 1, 0.36, 1);
}


/* ---------------------------------------------------------
   DIVI CODE MODULE INNER HEIGHT
   --------------------------------------------------------- */

.krea-hero-art-module .et_pb_code_inner,
.krea-hero-art-module > div {
    width: 100%;
    height: 100%;
}


/* =========================================================
   INNER SPINNING ARTWORK
   ========================================================= */

.krea-hero-art-spin {
    position: relative;

    width: 100%;
    height: 100%;

    box-sizing: border-box;

    border: 2px solid rgba(215, 166, 47, 0.32);
    border-radius: 50%;

    background:

        /* GOLD DIAGONAL */
        linear-gradient(
            135deg,
            transparent 43%,
            rgba(215, 166, 47, 0.24) 43%,
            rgba(215, 166, 47, 0.24) 48%,
            transparent 48%
        ),

        /* GRAY DIAGONAL */
        linear-gradient(
            45deg,
            transparent 47%,
            rgba(17, 17, 17, 0.085) 47%,
            rgba(17, 17, 17, 0.085) 52%,
            transparent 52%
        );

    animation:
        kreaHeroGeometrySpin
        26s
        linear
        infinite;

    transform-origin: center center;

    will-change: transform;
}


/* ---------------------------------------------------------
   GOLD ROTATING ARC
   --------------------------------------------------------- */

.krea-hero-art-spin::before {
    content: "";

    position: absolute;
    inset: -2px;

    box-sizing: border-box;

    border-radius: 50%;
    border: 3px solid transparent;

    border-top-color: rgba(215, 166, 47, 0.72);
    border-right-color: rgba(215, 166, 47, 0.16);

    pointer-events: none;
}


/* ---------------------------------------------------------
   CONTINUOUS ROTATION
   --------------------------------------------------------- */

@keyframes kreaHeroGeometrySpin {

    from {
        transform: rotate(0deg);
    }

    to {
        transform: rotate(360deg);
    }

}


/* =========================================================
   HERO TEXT ABOVE ARTWORK
   ========================================================= */

.krea-hero-heading,
.krea-hero-copy,
.krea-hero-actions {
    position: relative;
    z-index: 20;
}


/* =========================================================
   PROJECT CARDS — SHARED BASE
   ========================================================= */

.krea-hero-card {
    backface-visibility: hidden;

    transition:
        transform 0.68s cubic-bezier(0.22, 1, 0.36, 1),
        box-shadow 0.68s cubic-bezier(0.22, 1, 0.36, 1),
        opacity 0.46s ease,
        filter 0.46s ease !important;

    will-change:
        transform,
        opacity,
        filter;
}


/* =========================================================
   PROJECT CARD 01 — AVENUE
   BACK LAYER
   ========================================================= */

.krea-hero-card-avenue {
    position: absolute !important;

    width: clamp(300px, 27vw, 430px) !important;
    max-width: none !important;

    left: 68%;
    right: auto;
    top: 36%;

    margin: 0 !important;

    z-index: 2 !important;

    background: #ffffff;

    border: 1px solid rgba(17, 17, 17, 0.08);

    box-shadow:
        0 24px 60px rgba(17, 17, 17, 0.13);

    overflow: hidden;

    transform:
        translate3d(0, 0, 0)
        rotate(1.5deg);

    transform-origin: center center;
}


.krea-hero-card-avenue img {
    display: block;
    width: 100%;
    height: auto;
}


/* =========================================================
   PROJECT CARD 02 — NORTHLINE
   MIDDLE LAYER
   ========================================================= */

.krea-hero-card-northline {
    position: absolute !important;

    width: clamp(220px, 20vw, 325px) !important;
    max-width: none !important;

    left: 63%;
    top: 22%;

    margin: 0 !important;

    z-index: 3 !important;

    background: #ffffff;

    border: 1px solid rgba(17, 17, 17, 0.08);

    box-shadow:
        0 20px 50px rgba(17, 17, 17, 0.11);

    overflow: hidden;

    transform:
        translate3d(0, 0, 0)
        rotate(-5deg);

    transform-origin: center center;
}


.krea-hero-card-northline img {
    display: block;
    width: 100%;
    height: auto;
}


/* =========================================================
   PROJECT CARD 03 — PULSE
   FRONT LAYER
   ========================================================= */

.krea-hero-card-pulse {
    position: absolute !important;

    width: clamp(190px, 17vw, 280px) !important;
    max-width: none !important;

    left: 62%;
    top: 53%;

    margin: 0 !important;

    z-index: 4 !important;

    background: #111111;

    border: 1px solid rgba(17, 17, 17, 0.10);

    box-shadow:
        0 18px 45px rgba(17, 17, 17, 0.14);

    overflow: hidden;

    transform:
        translate3d(0, 0, 0)
        rotate(6deg);

    transform-origin: center center;
}


.krea-hero-card-pulse img {
    display: block;
    width: 100%;
    height: auto;
}


/* =========================================================
   HERO TEXT ENTRANCE
   ========================================================= */

.krea-hero-heading {
    overflow: hidden;
}


.krea-hero-line {
    display: block;

    opacity: 0;

    transform: translateY(110%);

    animation-name: kreaHeroLineReveal;
    animation-duration: 1.15s;
    animation-timing-function:
        cubic-bezier(0.22, 1, 0.36, 1);
    animation-fill-mode: forwards;

    will-change:
        transform,
        opacity;
}


.krea-hero-line-1 {
    animation-delay: 0.18s;
}


.krea-hero-line-2 {
    animation-delay: 0.48s;
}


/* ---------------------------------------------------------
   PARAGRAPH
   --------------------------------------------------------- */

.krea-hero-copy {
    opacity: 0;

    transform: translateY(20px);

    animation:
        kreaHeroContentReveal
        0.80s
        cubic-bezier(0.22, 1, 0.36, 1)
        0.95s
        forwards;

    will-change:
        transform,
        opacity;
}


/* ---------------------------------------------------------
   BUTTONS
   --------------------------------------------------------- */

.krea-hero-actions {
    opacity: 0;

    transform: translateY(18px);

    animation:
        kreaHeroContentReveal
        0.80s
        cubic-bezier(0.22, 1, 0.36, 1)
        1.18s
        forwards;

    will-change:
        transform,
        opacity;
}


/* ---------------------------------------------------------
   HEADLINE KEYFRAME
   --------------------------------------------------------- */

@keyframes kreaHeroLineReveal {

    from {
        opacity: 0;
        transform: translateY(110%);
    }

    to {
        opacity: 1;
        transform: translateY(0);
    }

}


/* ---------------------------------------------------------
   COPY / BUTTON KEYFRAME
   --------------------------------------------------------- */

@keyframes kreaHeroContentReveal {

    from {
        opacity: 0;
        transform: translateY(20px);
    }

    to {
        opacity: 1;
        transform: translateY(0);
    }

}


/* =========================================================
   PROJECT COLLAGE ENTRANCE KEYFRAMES
   ========================================================= */

@keyframes kreaNorthlineEntrance {

    from {
        opacity: 0;
        translate: 0 24px;
    }

    to {
        opacity: 1;
        translate: 0 0;
    }

}


@keyframes kreaAvenueEntrance {

    from {
        opacity: 0;
        translate: 28px 8px;
    }

    to {
        opacity: 1;
        translate: 0 0;
    }

}


@keyframes kreaPulseEntrance {

    from {
        opacity: 0;
        translate: -12px 28px;
    }

    to {
        opacity: 1;
        translate: 0 0;
    }

}


/* =========================================================
   SMOOTH PROJECT CARD FOCUS SYSTEM
   Controlled by krea23.js
   ========================================================= */

@media (min-width: 981px) {

    /* -----------------------------------------------------
       NON-ACTIVE CARDS SOFTEN
       ----------------------------------------------------- */

    .krea-hero.krea-card-focus
    .krea-hero-card:not(.krea-card-active):not(.krea-card-prep) {

        opacity: 0.76;

        filter:
            grayscale(2%)
            saturate(94%);
    }


    /* -----------------------------------------------------
       INCOMING CARD PREPARATION
       ----------------------------------------------------- */

    .krea-hero-card.krea-card-prep {

        opacity: 0.84;

        filter:
            grayscale(1%)
            saturate(98%);
    }


    /* -----------------------------------------------------
       ACTIVE CARD
       ----------------------------------------------------- */

    .krea-hero-card.krea-card-active {

        z-index: 10 !important;

        opacity: 1;

        filter:
            grayscale(0%)
            saturate(103%);
    }


    /* -----------------------------------------------------
       ACTIVE — AVENUE
       ----------------------------------------------------- */

    .krea-hero-card-avenue.krea-card-active {

        transform:
            translate3d(0, -5px, 0)
            rotate(0.75deg)
            scale(1.012);

        box-shadow:
            0 31px 72px rgba(17, 17, 17, 0.17);
    }


    /* -----------------------------------------------------
       ACTIVE — NORTHLINE
       ----------------------------------------------------- */

    .krea-hero-card-northline.krea-card-active {

        transform:
            translate3d(-2px, -5px, 0)
            rotate(-3.5deg)
            scale(1.013);

        box-shadow:
            0 29px 68px rgba(17, 17, 17, 0.16);
    }


    /* -----------------------------------------------------
       ACTIVE — PULSE
       ----------------------------------------------------- */

    .krea-hero-card-pulse.krea-card-active {

        transform:
            translate3d(-2px, -5px, 0)
            rotate(4.5deg)
            scale(1.014);

        box-shadow:
            0 29px 68px rgba(17, 17, 17, 0.18);
    }


    /* -----------------------------------------------------
       RELEASE STATE
       ----------------------------------------------------- */

    .krea-hero-card.krea-card-release {

        z-index: 10 !important;

        opacity: 0.86;

        filter:
            grayscale(1%)
            saturate(96%);
    }


    /* -----------------------------------------------------
       QUIET GEOMETRY WHILE PROJECT IS FOCUSED
       ----------------------------------------------------- */

    .krea-hero.krea-card-focus
    .krea-hero-art-module {

        opacity: 0.80;

        filter: none;
    }

}


/* =========================================================
   WAIT FOR PROJECT IMAGES BEFORE ENTRANCE
   ========================================================= */

@media (prefers-reduced-motion: no-preference) {

    /*
     * Keep cards invisible until JavaScript confirms
     * that all project images are ready.
     */

    .krea-hero:not(.krea-cards-ready)
    .krea-hero-card {

        opacity: 0 !important;

        animation: none !important;
    }


    /* -----------------------------------------------------
       NORTHLINE ENTERS FIRST
       ----------------------------------------------------- */

    .krea-hero.krea-cards-ready
    .krea-hero-card-northline {

        animation:
            kreaNorthlineEntrance
            0.80s
            cubic-bezier(0.22, 1, 0.36, 1)
            0.10s
            backwards !important;
    }


    /* -----------------------------------------------------
       AVENUE ENTERS SECOND
       ----------------------------------------------------- */

    .krea-hero.krea-cards-ready
    .krea-hero-card-avenue {

        animation:
            kreaAvenueEntrance
            0.80s
            cubic-bezier(0.22, 1, 0.36, 1)
            0.25s
            backwards !important;
    }


    /* -----------------------------------------------------
       PULSE ENTERS LAST
       ----------------------------------------------------- */

    .krea-hero.krea-cards-ready
    .krea-hero-card-pulse {

        animation:
            kreaPulseEntrance
            0.80s
            cubic-bezier(0.22, 1, 0.36, 1)
            0.40s
            backwards !important;
    }

}


/* =========================================================
   TABLET
   ========================================================= */

@media (max-width: 980px) {

    /* Geometry */

    .krea-hero-art-module {

        width: 440px !important;
        height: 440px !important;

        right: -120px;

        opacity: 0.65;
    }


    /* Avenue */

    .krea-hero-card-avenue {

        width: 330px !important;

        left: auto;
        right: -90px;
        top: 34%;

        transform:
            rotate(1deg);

        opacity: 0.92;
    }


    /* Northline */

    .krea-hero-card-northline {

        width: 270px !important;

        left: auto;
        right: 110px;
        top: 26%;

        transform:
            rotate(-4deg);

        opacity: 0.90;
    }


    /* Pulse */

    .krea-hero-card-pulse {

        width: 250px !important;

        left: auto;
        right: 35px;
        top: 50%;

        transform:
            rotate(5deg);

        opacity: 0.92;
    }

}


/* =========================================================
   PHONE
   ========================================================= */

@media (max-width: 767px) {

    /* Geometry */

    .krea-hero-art-module {

        width: 360px !important;
        height: 360px !important;

        right: -230px;

        opacity: 0.42;
    }


    /* Slower geometry rotation */

    .krea-hero-art-spin {
        animation-duration: 42s;
    }


    /*
     * Portfolio cards remain hidden on phone.
     * Mobile collage can be designed separately later.
     */

    .krea-hero-card-avenue,
    .krea-hero-card-northline,
    .krea-hero-card-pulse {

        display: none !important;
    }

}


/* =========================================================
   REDUCED MOTION ACCESSIBILITY
   ========================================================= */

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

    /* Stop geometry rotation */

    .krea-hero-art-spin {
        animation: none !important;
    }


    /* Show Hero content immediately */

    .krea-hero-line,
    .krea-hero-copy,
    .krea-hero-actions {

        opacity: 1;

        transform: none;

        animation: none !important;
    }


    /* Show project cards immediately */

    .krea-hero-card-northline,
    .krea-hero-card-avenue,
    .krea-hero-card-pulse {

        animation: none !important;

        opacity: 1;

        translate: none;
    }


    /* Disable project-card motion */

    .krea-hero-card {

        transition: none !important;
    }

}