/* ==========================================================
   DEVELOPING YOUR DREAM
   THREE.JS HERO
   IMPORTANT:
   EVERYTHING IS SCOPED TO THE HERO.
   NOTHING BELOW THE HERO IS TOUCHED.
========================================================== */


/* ==========================================================
   SCROLLBAR SIDE
   Your HTML itself is dir="rtl".
   Keep website RTL but browser scrollbar on RIGHT.
========================================================== */

html {
    direction: ltr;
}

body {
    direction: rtl;
}


/* ==========================================================
   HERO ONLY
========================================================== */

.three-hero {
    position: relative !important;

    width: 100% !important;
    max-width: 100% !important;


    height: 110vh !important;
min-height: 850px !important;

    overflow: hidden !important;

    isolation: isolate;

    background-image: none !important;

    background:
        radial-gradient(
            circle at 20% 40%,
            rgba(255, 112, 32, 0.16),
            transparent 34%
        ),
        radial-gradient(
            circle at 80% 60%,
            rgba(65, 170, 255, 0.08),
            transparent 34%
        ),
        linear-gradient(
            135deg,
            #08090d 0%,
            #101118 45%,
            #0b0c11 100%
        ) !important;
}


/* ==========================================================
   THREE.JS CONTAINER
========================================================== */

.three-hero #hero-three-canvas {
    position: absolute !important;

    top: 0 !important;
    right: 0 !important;
    bottom: 0 !important;
    left: 0 !important;

    z-index: 0 !important;

    width: 100% !important;
    height: 100% !important;

    max-width: 100% !important;

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

    overflow: hidden !important;

    pointer-events: none !important;

    contain: paint;
}


/* ==========================================================
   ACTUAL WEBGL CANVAS
========================================================== */

.three-hero #hero-three-canvas canvas {
    position: absolute !important;

    top: 0 !important;
    left: 0 !important;

    display: block !important;

    width: 100% !important;
    height: 100% !important;

    max-width: 100% !important;

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

    border: 0 !important;

    pointer-events: none !important;
}


/* ==========================================================
   OVERLAY
========================================================== */

.three-hero .hero-three-overlay {
    position: absolute;

    inset: 0;

    z-index: 1;

    pointer-events: none;

    background:
        radial-gradient(
            ellipse at center,
            rgba(6, 7, 11, 0.20) 0%,
            rgba(6, 7, 11, 0.16) 42%,
            rgba(6, 7, 11, 0.38) 76%,
            rgba(6, 7, 11, 0.60) 100%
        ),
        linear-gradient(
            180deg,
            rgba(5, 5, 8, 0.05),
            rgba(5, 5, 8, 0.28)
        );
}


/* ==========================================================
   HERO CONTENT
========================================================== */

.three-hero .hero-content {
    position: relative !important;

    z-index: 5 !important;
}


/* ==========================================================
   TECH LABEL
========================================================== */

.three-hero .hero-tech-label {
    display: inline-flex;

    align-items: center;
    justify-content: center;

    gap: 9px;

    padding: 8px 16px;

    margin-bottom: 18px;

    max-width: 100%;

    border:
        1px solid rgba(255,255,255,0.14);

    border-radius:
        999px;

    background:
        rgba(13,14,20,0.58);

    -webkit-backdrop-filter:
        blur(12px);

    backdrop-filter:
        blur(12px);

    color:
        rgba(255,255,255,0.88);

    font-size:
        0.76rem;

    font-weight:
        700;

    letter-spacing:
        0.04em;

    direction:
        ltr;

    box-shadow:
        inset 0 1px 0 rgba(255,255,255,0.06),
        0 12px 35px rgba(0,0,0,0.20);
}


/* ==========================================================
   TECH DOT
========================================================== */

.three-hero .hero-tech-dot {
    width: 7px;
    height: 7px;

    min-width: 7px;

    border-radius: 50%;

    background:
        #ff7829;

    box-shadow:
        0 0 8px rgba(255,120,41,1),
        0 0 20px rgba(255,120,41,0.65);

    animation:
        threeHeroDot 1.8s ease-in-out infinite;
}


@keyframes threeHeroDot {

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

    50% {
        opacity: 0.55;
        transform: scale(1.45);
    }
}


/* ==========================================================
   TITLE
========================================================== */

.three-hero h1 {
    position: relative;

    z-index: 5;

    text-shadow:
        0 4px 22px rgba(0,0,0,0.80),
        0 0 55px rgba(255,115,35,0.10);
}


/* ==========================================================
   SUBTEXT
========================================================== */

.three-hero .lead {
    position: relative;

    z-index: 5;

    text-shadow:
        0 3px 18px rgba(0,0,0,0.75);
}


/* ==========================================================
   EXISTING TEXT BOX
========================================================== */

.three-hero .text-bg-box {
    position: relative;

    z-index: 5;
}


/* ==========================================================
   DIVIDER
========================================================== */

.three-hero .divider {
    position: relative;

    z-index: 5;
}


/* ==========================================================
   CTA
========================================================== */

.three-hero .hero-main-cta {
    position: relative;

    z-index: 6;

    display: inline-flex;

    align-items: center;
    justify-content: center;

    gap: 12px;

    overflow: hidden;

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

    box-shadow:
        0 15px 40px rgba(238,102,35,0.28),
        0 0 35px rgba(255,120,40,0.10);

    transition:
        transform 0.28s ease,
        box-shadow 0.28s ease;
}


.three-hero .hero-main-cta:hover {
    transform:
        translateY(-3px);

    box-shadow:
        0 20px 50px rgba(238,102,35,0.36),
        0 0 45px rgba(255,120,40,0.14);
}


/* ==========================================================
   CTA ARROW
========================================================== */

.three-hero .hero-cta-arrow {
    display: inline-block;

    transition:
        transform 0.28s ease;
}


.three-hero .hero-main-cta:hover .hero-cta-arrow {
    transform:
        translateX(-5px);
}


/* ==========================================================
   REMOVE OLD DECORATIVE LIGHT DIVS
   ONLY INSIDE HERO
========================================================== */

.three-hero .hero-light,
.three-hero .hero-light-one,
.three-hero .hero-light-two {
    display: none !important;
}


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

@media (max-width: 991px) {

    .three-hero #hero-three-canvas {
        opacity: 0.86;
    }


    .three-hero .hero-three-overlay {
        background:
            radial-gradient(
                ellipse at center,
                rgba(7,8,13,0.30),
                rgba(7,8,13,0.58) 78%
            ),
            linear-gradient(
                rgba(5,5,8,0.08),
                rgba(5,5,8,0.34)
            );
    }
}


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

@media (max-width: 767px) {

    .three-hero {
        overflow: hidden !important;

        height: 100svh !important;
        min-height: 640px !important;

        background:
            radial-gradient(
                circle at 18% 28%,
                rgba(255, 112, 32, 0.26),
                transparent 36%
            ),
            radial-gradient(
                circle at 82% 72%,
                rgba(65, 170, 255, 0.18),
                transparent 38%
            ),
            linear-gradient(
                160deg,
                #06080d 0%,
                #0b0f17 52%,
                #09111a 100%
            ) !important;
    }


    /* KEEP THREE.JS FULLY VISIBLE */

    .three-hero #hero-three-canvas {
        opacity: 1 !important;
        overflow: hidden !important;
    }


    /* LIGHT MOBILE OVERLAY */

    .three-hero .hero-three-overlay {
        background:
            radial-gradient(
                ellipse at center,
                rgba(7, 8, 13, 0.05) 0%,
                rgba(7, 8, 13, 0.14) 52%,
                rgba(7, 8, 13, 0.34) 100%
            ),
            linear-gradient(
                180deg,
                rgba(5, 5, 8, 0.02),
                rgba(5, 5, 8, 0.14)
            );
    }


    /* REMOVE EMPTY HTML STUFF OVER THREE.JS */

    .three-hero .text-bg-box,
    .three-hero .divider {
        display: none !important;
    }


    /* SMALL CENTER BADGE */

    .three-hero .hero-tech-label {
        position: absolute !important;

        top: 39% !important;
        left: 50% !important;

        transform:
            translate(-50%, -50%) !important;

        margin: 0 !important;

        width: max-content !important;
        max-width: 90% !important;

        white-space: nowrap !important;

        padding: 6px 10px !important;

        font-size: 0.60rem !important;
        letter-spacing: 0.02em !important;

        z-index: 20 !important;
    }

}
/* ==========================================================
   SMALL MOBILE
========================================================== */

@media (max-width: 420px) {

    .three-hero .hero-tech-label {
        font-size:
            0.58rem;
    }
}


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

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

    .three-hero .hero-tech-dot {
        animation:
            none;
    }


    .three-hero .hero-main-cta,
    .three-hero .hero-cta-arrow {
        transition:
            none;
    }
}













/* ==========================================================
   HERO → ABOUT PREMIUM HINGE FLIP
   ONLY ANIMATION — NO ABOUT DESIGN CHANGES
========================================================== */


/* ------------------------------------------
   STAGE

   This is what makes the animation safe.
   The card may rotate in 3D, but its projected
   width cannot create page horizontal scrolling.
------------------------------------------- */

.about-card-stage {
    position: relative;

    width: 100%;
    max-width: 100%;

    margin-top: -16px;

    perspective: 1500px;
    perspective-origin: 50% 0%;

    overflow: hidden;

    isolation: isolate;
}


/* Your current About already uses -16px.
   Stage now owns that overlap instead. */

.about-card-stage > #about.about-flip-card {
    margin-top: 0 !important;

    transform-origin: 50% 0%;
    transform-style: preserve-3d;

    backface-visibility: hidden;
    -webkit-backface-visibility: hidden;

    will-change: transform;
}


/* ==========================================================
   CLOSED CARD
========================================================== */

.about-card-stage > #about.about-flip-card.about-hinge-ready {
    transform:
        translate3d(0, -18px, 0)
        rotateX(-32deg)
        scale3d(0.988, 0.988, 1);
}


/* ==========================================================
   OPEN ANIMATION
========================================================== */

.about-card-stage > #about.about-flip-card.about-hinge-open {
    animation:
        aboutPremiumHingeOpen
        660ms
        cubic-bezier(0.16, 1, 0.3, 1)
        forwards;
}


/* ==========================================================
   ACTUAL CARD MOVEMENT
========================================================== */

@keyframes aboutPremiumHingeOpen {

    /* Folded against bottom of hero */
    0% {
        transform:
            translate3d(0, -18px, 0)
            rotateX(-32deg)
            scale3d(0.988, 0.988, 1);
    }


    /* Card swings toward viewer */
    58% {
        transform:
            translate3d(0, 4px, 0)
            rotateX(5deg)
            scale3d(1, 1, 1);
    }


    /* Small controlled rebound */
    78% {
        transform:
            translate3d(0, -1px, 0)
            rotateX(-1.8deg)
            scale3d(1, 1, 1);
    }


    /* Perfectly flat */
    100% {
        transform:
            translate3d(0, 0, 0)
            rotateX(0deg)
            scale3d(1, 1, 1);
    }
}


/* ==========================================================
   TOP EDGE EMPHASIS WHILE OPENING
========================================================== */

.about-card-stage::before {
    content: "";

    position: absolute;

    top: 0;
    left: 8%;
    right: 8%;

    height: 1px;

    z-index: 30;

    pointer-events: none;

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

    opacity: 0;

    transition:
        opacity 180ms ease;
}


.about-card-stage.is-opening::before {
    opacity: 1;
}


.about-card-stage.is-finished::before {
    opacity: 0;
}


/* Once animation finishes there is no transform,
   therefore we can restore normal overflow and preserve
   your existing About shadow exactly as designed. */

.about-card-stage.is-finished {
    overflow: visible;
}


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

@media (max-width: 767px) {

    .about-card-stage {
        margin-top: 0;

        perspective:
            1050px;
    }


    .about-card-stage > #about.about-flip-card.about-hinge-ready {
        transform:
            translate3d(0, -10px, 0)
            rotateX(-23deg)
            scale3d(0.992, 0.992, 1);
    }


    @keyframes aboutPremiumHingeOpen {

        0% {
            transform:
                translate3d(0, -10px, 0)
                rotateX(-23deg)
                scale3d(0.992, 0.992, 1);
        }

        60% {
            transform:
                translate3d(0, 3px, 0)
                rotateX(3deg)
                scale3d(1, 1, 1);
        }

        80% {
            transform:
                translate3d(0, -1px, 0)
                rotateX(-1deg)
                scale3d(1, 1, 1);
        }

        100% {
            transform:
                translate3d(0, 0, 0)
                rotateX(0deg)
                scale3d(1, 1, 1);
        }
    }

}


/* ==========================================================
   ACCESSIBILITY
========================================================== */

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

    .about-card-stage > #about.about-flip-card {
        transform: none !important;
        animation: none !important;
    }

}