/* =========================================================
   RAPIDXPERTZ MORPH HERO - CLEAN FINAL CSS
   REPLACE THE OLD HERO CSS FILE WITH THIS FILE
   ========================================================= */

.rx-morph-hero {
    --rx-blue: #12366f;
    --rx-cyan: #22a9c0;
    --rx-purple: #8176c8;
    --rx-orange: #e69a43;
    position: relative;
    width: 100%;
    height: 520px;
    min-height: 520px;
    overflow: hidden;
    background: #ffffff;
    color: #111111;
    isolation: isolate;
    font-family: inherit;
}

.rx-morph-hero::before {
    content: "";
    position: absolute;
    z-index: 0;
    width: 520px;
    height: 520px;
    left: 50%;
    top: 50%;
    transform: translate(-50%, -50%);
    background: radial-gradient(circle, rgba(69,139,190,.045) 0%, rgba(129,118,200,.02) 35%, transparent 70%);
    pointer-events: none;
}

/* ===================== SLIDES ===================== */

.rx-morph-slide {
    position: absolute;
    z-index: 2;
    inset: 0;
    width: 100%;
    height: 100%;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    padding: 30px;
    box-sizing: border-box;
    text-align: center;
    opacity: 0;
    visibility: hidden;
    transform: translateY(16px);
    filter: none !important;
    will-change: opacity, transform;
}

.rx-morph-hero .rx-slide-1 { animation: rxSlide1Clean 32s ease-in-out infinite; }
.rx-morph-hero .rx-slide-2 { animation: rxSlide2Clean 32s ease-in-out infinite; }
.rx-morph-hero .rx-slide-3 { animation: rxSlide3Clean 32s ease-in-out infinite; }
.rx-morph-hero .rx-slide-4 { animation: rxSlide4Clean 32s ease-in-out infinite; }

@keyframes rxSlide1Clean {
    0%, 2% { opacity:0; visibility:hidden; transform:translateY(16px); }
    4%, 23% { opacity:1; visibility:visible; transform:translateY(0); }
    25%, 100% { opacity:0; visibility:hidden; transform:translateY(-10px); }
}
@keyframes rxSlide2Clean {
    0%, 25% { opacity:0; visibility:hidden; transform:translateY(16px); }
    28%, 48% { opacity:1; visibility:visible; transform:translateY(0); }
    50%, 100% { opacity:0; visibility:hidden; transform:translateY(-10px); }
}
@keyframes rxSlide3Clean {
    0%, 50% { opacity:0; visibility:hidden; transform:translateY(16px); }
    53%, 73% { opacity:1; visibility:visible; transform:translateY(0); }
    75%, 100% { opacity:0; visibility:hidden; transform:translateY(-10px); }
}
@keyframes rxSlide4Clean {
    0%, 75% { opacity:0; visibility:hidden; transform:translateY(16px); }
    78%, 98% { opacity:1; visibility:visible; transform:translateY(0); }
    100% { opacity:0; visibility:hidden; transform:translateY(-10px); }
}

/* ===================== SLIDE 1 ===================== */

.rx-morph-kicker {
    position: relative;
    margin-bottom: 24px;
    font-size: 11px;
    line-height: 1;
    letter-spacing: 4px;
    font-weight: 600;
    color: #858585;
}

.rx-morph-kicker::before,
.rx-morph-kicker::after {
    content: "";
    position: absolute;
    top: 50%;
    width: 34px;
    height: 1px;
    background: linear-gradient(90deg, transparent, var(--rx-cyan), var(--rx-purple));
    opacity: .65;
}
.rx-morph-kicker::before { right: calc(100% + 18px); }
.rx-morph-kicker::after { left: calc(100% + 18px); transform: rotate(180deg); }

.rx-slide-1 p,
.rx-slide-2 p,
.rx-slide-3 p,
.rx-slide-4 p {
    color: #777777;
    font-size: clamp(16px, 1.4vw, 20px);
    line-height: 1.6;
    font-weight: 300;
}

.rx-slide-1 p { margin: 22px 0 0; }

/* ===================== SLIDE 2 ===================== */

.rx-slide-2 h2 {
    display: flex;
    flex-wrap: wrap;
    gap: 16px;
    align-items: center;
    justify-content: center;
    margin: 0;
    font-size: clamp(38px, 4.8vw, 64px);
    line-height: 1.1;
    letter-spacing: -2px;
    font-weight: 300;
}
.rx-slide-2 .dark { color: #202020; }
.rx-slide-2 .gradient {
    background: linear-gradient(105deg,#786dc1,#398fc6,#22a9bf,#c67991,#e59a45);
    background-size: 220% 100%;
    -webkit-background-clip: text;
    background-clip: text;
    -webkit-text-fill-color: transparent;
    font-weight: 500;
    animation: rxColorFlow 4.5s ease-in-out infinite;
}

.rx-slide-line {
    position: relative;
    width: 105px;
    height: 2px;
    margin: 22px 0 18px;
    background: #ededed;
    overflow: hidden;
}
.rx-slide-line::after {
    content: "";
    position: absolute;
    left: -100%;
    top: 0;
    width: 100%;
    height: 100%;
    background: linear-gradient(90deg,var(--rx-purple),var(--rx-cyan),var(--rx-orange));
    animation: rxLineSweep 2.4s ease-in-out infinite;
}
.rx-slide-2 p { margin: 0; }

/* ===================== SLIDE 3 ===================== */

.rx-gradient-text {
    margin: 0;
    font-size: clamp(36px, 4.5vw, 60px);
    line-height: 1.08;
    letter-spacing: -2px;
    font-weight: 500;
    background: linear-gradient(105deg,#8276c9,#419ac9,#28aabe,#78916f,#c77d8d,#e49b47);
    background-size: 260% 100%;
    -webkit-background-clip: text;
    background-clip: text;
    -webkit-text-fill-color: transparent;
    animation: rxColorFlow 5s ease-in-out infinite;
}

.rx-with {
    margin-top: 16px;
    font-size: clamp(25px, 2.8vw, 36px);
    color: #777777;
    font-weight: 300;
}

.rx-gradient-box {
    position: relative;
    width: 440px;
    max-width: 85vw;
    height: 70px;
    margin-top: 14px;
    display: flex;
    align-items: center;
    justify-content: center;
    border-radius: 60px;
    background: #ffffff;
    box-shadow: 0 15px 45px rgba(20,60,100,.035);
}
.rx-gradient-box::before {
    content: "";
    position: absolute;
    inset: 0;
    border-radius: inherit;
    padding: 2px;
    background: linear-gradient(100deg,#7c72c7,#419ac8,#22a9bf,#8b8c74,#c77891,#e69a43,#7c72c7);
    background-size: 300% 100%;
    animation: rxBorderFlow 5s linear infinite;
    -webkit-mask: linear-gradient(#fff 0 0) content-box,linear-gradient(#fff 0 0);
    -webkit-mask-composite: xor;
    mask-composite: exclude;
}
.rx-gradient-box span {
    position: relative;
    z-index: 2;
    font-size: clamp(18px,2vw,24px);
    font-weight: 500;
    color: #555555;
}
.rx-slide-3 p { margin: 16px 0 0; }

/* ===================== SLIDE 4 ===================== */

.rx-final-small {
    font-size: clamp(16px,1.8vw,22px);
    color: #888888;
    font-weight: 300;
}
.rx-slide-4 h2 {
    margin: 10px 0 0;
    font-size: clamp(46px,5.5vw,74px);
    letter-spacing: -3px;
    line-height: 1;
    font-weight: 500;
}
.rx-slide-4 h2 span {
    background: linear-gradient(105deg,#7f74c8,#3c99c9,#2baabe,#d17d8c,#e59b44);
    background-size: 220% 100%;
    -webkit-background-clip: text;
    background-clip: text;
    -webkit-text-fill-color: transparent;
    animation: rxColorFlow 4.5s ease-in-out infinite;
}
.rx-slide-4 h2 strong { color:#161616; font-weight:500; }
.rx-slide-4 p { margin:18px auto 0; }

.rx-final-pill {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 22px;
    margin-top: 24px;
    padding: 14px 35px;
    border-radius: 50px;
    color: #ffffff;
    font-size: 17px;
    font-weight: 600;
    background: linear-gradient(105deg,#536fb3,#338fc3,#20a6bd,#667fb2,#b66b91,#e08c47);
    background-size: 250% 100%;
    animation: rxButtonFlow 5s ease-in-out infinite;
}

/* ===================== REAL TYPEWRITER =====================
   This targets ONLY the span already added in your HTML.
   ========================================================== */

.rx-type-text {
    display: inline-block;
    position: relative;
    white-space: nowrap;
    overflow: hidden;
    vertical-align: bottom;
    max-width: 0;
    border-right: 2px solid #777777;
    box-sizing: border-box;
}

/* Slide 1: 53 characters */
.rx-slide-1 .rx-type-text {
    animation:
        rxTypingOne 32s steps(53, end) infinite,
        rxCursor .65s step-end infinite;
}

/* Slide 2: 70 characters */
.rx-slide-2 .rx-type-text {
    animation:
        rxTypingTwo 32s steps(70, end) infinite,
        rxCursor .65s step-end infinite;
}

@keyframes rxTypingOne {
    0%, 7% { max-width: 0; }
    18%, 23% { max-width: 700px; }
    25%, 100% { max-width: 0; }
}
@keyframes rxTypingTwo {
    0%, 31% { max-width: 0; }
    43%, 48% { max-width: 900px; }
    50%, 100% { max-width: 0; }
}
@keyframes rxCursor {
    50% { border-right-color: transparent; }
}

/* ===================== PROGRESS ===================== */

.rx-morph-progress {
    position: absolute;
    z-index: 20;
    left: 7%;
    right: 7%;
    bottom: 28px;
    height: 1px;
    background: #eeeeee;
}
.rx-morph-progress span {
    display: block;
    width: 0;
    height: 1px;
    background: linear-gradient(90deg,#6f7fc1,#27a8c0,#e28b45);
    animation: rxProgress 32s linear infinite;
}

/* ===================== COMMON ANIMATION ===================== */

@keyframes rxColorFlow {
    0% { background-position:0% 50%; }
    50% { background-position:100% 50%; }
    100% { background-position:0% 50%; }
}
@keyframes rxLineSweep {
    0% { left:-100%; }
    45%,65% { left:100%; }
    100% { left:100%; }
}
@keyframes rxBorderFlow {
    0% { background-position:0% 50%; }
    100% { background-position:300% 50%; }
}
@keyframes rxButtonFlow {
    0% { background-position:0% 50%; }
    50% { background-position:100% 50%; }
    100% { background-position:0% 50%; }
}
@keyframes rxProgress {
    from { width:0; }
    to { width:100%; }
}

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

@media (max-width: 1024px) {
    .rx-morph-hero { height:480px; min-height:480px; }
}

/* ===================== MOBILE ===================== */

@media (max-width: 768px) {
    .rx-morph-hero {
        height: 430px;
        min-height: 430px;
    }
    .rx-morph-slide {
        padding-left:20px;
        padding-right:20px;
    }
    .rx-morph-kicker {
        margin-bottom:16px;
        font-size:8px;
        letter-spacing:3px;
    }
    .rx-morph-kicker::before,
    .rx-morph-kicker::after { display:none; }

    .rx-slide-1 p,
    .rx-slide-2 p,
    .rx-slide-3 p,
    .rx-slide-4 p {
        max-width:90%;
        margin-left:auto;
        margin-right:auto;
        font-size:15px;
    }

    /* On mobile keep text readable instead of forcing one line */
    .rx-type-text {
        max-width:100%;
        white-space:normal;
        overflow:visible;
        border-right:0;
        animation:none !important;
    }

    .rx-slide-2 h2 {
        font-size:clamp(30px,8vw,42px);
        letter-spacing:-1px;
        gap:10px;
    }
    .rx-gradient-text { font-size:clamp(28px,7vw,38px); }
    .rx-with { font-size:clamp(22px,6vw,30px); }
    .rx-gradient-box {
        width:90%;
        max-width:90%;
        height:60px;
    }
    .rx-gradient-box span { font-size:16px; }
    .rx-slide-4 h2 { font-size:clamp(36px,9vw,48px); }

    .rx-slide-4 .rx-final-pill {
        flex-direction:column;
        gap:10px;
        padding:0;
        background:none;
        animation:none;
    }
    .rx-slide-4 .rx-final-pill span {
        min-width:150px;
        padding:12px 22px;
        border-radius:50px;
        background:linear-gradient(105deg,#536fb3,#338fc3,#20a6bd,#667fb2,#b66b91,#e08c47);
        background-size:250% 100%;
        animation:rxButtonFlow 5s ease-in-out infinite;
    }
    .rx-morph-progress {
        left:20px;
        right:20px;
        bottom:18px;
    }
}

@media (max-width: 480px) {
    .rx-morph-hero {
        height:400px;
        min-height:400px;
    }
    .rx-slide-1 p,
    .rx-slide-2 p,
    .rx-slide-3 p,
    .rx-slide-4 p { font-size:14px; }
}
/* =========================================================
   FIRST SLIDE - AANTRIO LOGO IMAGE
   ========================================================= */

.rx-slide-1 .rx-slide-logo {
    width: 100%;
    display: flex;
    justify-content: center;
    align-items: center;

    margin-bottom: 20px;

    opacity: 0;

    animation:
        rxLogoReveal 1.2s ease-out forwards;
}


/* LOGO IMAGE */

.rx-slide-1 .rx-slide-logo img {
    display: block;

    width: min(420px, 75vw);
    height: auto;

    max-height: 150px;

    object-fit: contain;

    /* Prevent blur */
    filter: none !important;

    animation:
        rxLogoFloat 4s ease-in-out infinite 1.2s;
}


/* =========================================================
   LOGO ENTER ANIMATION
   ========================================================= */

@keyframes rxLogoReveal {

    0% {
        opacity: 0;
        transform: translateY(-30px) scale(0.92);
    }

    100% {
        opacity: 1;
        transform: translateY(0) scale(1);
    }

}


/* =========================================================
   VERY SUBTLE FLOAT
   ========================================================= */

@keyframes rxLogoFloat {

    0%,
    100% {
        transform: translateY(0);
    }

    50% {
        transform: translateY(-5px);
    }

}


/* =========================================================
   KEEP FIRST SLIDE TEXT CLEAR
   ========================================================= */

.rx-slide-1 .rx-morph-kicker {
    position: relative;
    z-index: 2;

    margin-top: 5px;
}


.rx-slide-1 p {
    position: relative;
    z-index: 2;

    opacity: 1 !important;
    filter: none !important;
}


/* =========================================================
   MOBILE
   ========================================================= */

@media (max-width: 768px) {

    .rx-slide-1 .rx-slide-logo {
        margin-bottom: 15px;
    }

    .rx-slide-1 .rx-slide-logo img {
        width: min(300px, 82vw);
        max-height: 110px;
    }

}
/* =========================================================
   UNIQUE AANTRIO LOGO ANIMATION
   ONLY FOR .rx-slide-logo
   ========================================================= */

.rx-slide-1 .rx-slide-logo {
    position: relative;
    display: flex;
    justify-content: center;
    align-items: center;

    width: 100%;
    margin-bottom: 20px;

    perspective: 1000px;

    /* Same 32-second slider cycle */
    animation: rxLogoEntrance 32s ease-in-out infinite;
}


/* =========================================================
   LOGO IMAGE
   ========================================================= */

.rx-slide-1 .rx-slide-logo img {
    display: block;

    width: min(420px, 75vw);
    height: auto;

    max-height: 150px;
    object-fit: contain;

    filter: none !important;

    transform-origin: center;

    /* Floating after entrance */
    animation: rxLogoFloatUnique 3s ease-in-out infinite;
}


/* =========================================================
   LOGO ENTRANCE
   Starts from slightly back + rotates into position
   ========================================================= */

@keyframes rxLogoEntrance {

    /* Before slide appears */
    0%,
    2% {
        opacity: 0;
        transform:
            translateY(-35px)
            rotateX(-35deg)
            scale(0.82);
    }


    /* Logo smoothly enters */
    5% {
        opacity: 1;
        transform:
            translateY(5px)
            rotateX(5deg)
            scale(1.04);
    }


    /* Settle */
    7%,
    22% {
        opacity: 1;
        transform:
            translateY(0)
            rotateX(0deg)
            scale(1);
    }


    /* Exit with first slide */
    25%,
    100% {
        opacity: 0;
        transform:
            translateY(15px)
            rotateX(15deg)
            scale(0.95);
    }

}


/* =========================================================
   SUBTLE FLOATING MOTION
   ========================================================= */

@keyframes rxLogoFloatUnique {

    0%,
    100% {
        transform:
            translateY(0)
            rotate(0deg);
    }

    50% {
        transform:
            translateY(-7px)
            rotate(0.3deg);
    }

}


/* =========================================================
   UNIQUE LIGHT SWEEP
   A light passes across the logo
   ========================================================= */

.rx-slide-1 .rx-slide-logo::after {
    content: "";

    position: absolute;

    width: 55%;
    height: 120%;

    top: -10%;
    left: -80%;

    pointer-events: none;

    background:
        linear-gradient(
            90deg,
            transparent 0%,
            rgba(255, 255, 255, 0.05) 25%,
            rgba(255, 255, 255, 0.9) 50%,
            rgba(255, 255, 255, 0.05) 75%,
            transparent 100%
        );

    transform:
        skewX(-20deg);

    animation:
        rxLogoLightSweep 32s ease-in-out infinite;
}


/* =========================================================
   LIGHT SWEEP TIMING
   ========================================================= */

@keyframes rxLogoLightSweep {

    0%,
    7% {
        left: -80%;
        opacity: 0;
    }

    8% {
        opacity: 1;
    }

    13% {
        left: 130%;
        opacity: 1;
    }

    14%,
    100% {
        left: 130%;
        opacity: 0;
    }

}


/* =========================================================
   MOBILE
   ========================================================= */

@media (max-width: 768px) {

    .rx-slide-1 .rx-slide-logo {
        margin-bottom: 15px;
    }


    .rx-slide-1 .rx-slide-logo img {
        width: min(300px, 82vw);
        max-height: 110px;
    }


    @keyframes rxLogoFloatUnique {

        0%,
        100% {
            transform: translateY(0);
        }

        50% {
            transform: translateY(-4px);
        }

    }

}