/* ==========================================================================
   GAYATHRA SAMUDITHA PORTFOLIO - RICH INTERACTIVE ANIMATIONS & EFFECTS
   ========================================================================== */

/* --- 0. Universal Fixed Navbar Auto-Hide & Pop-Up on Scroll --- */
.framer-1b59x81-container,
.framer-1bcxcm-container,
.framer-31ud7w-container,
.framer-n6wtko-container {
    z-index: 1000 !important;
    position: fixed !important;
    top: 0 !important;
    left: 50% !important;
    transform: translate3d(-50%, 0, 0) !important;
    transition: transform 0.4s cubic-bezier(0.16, 1, 0.3, 1), opacity 0.3s ease !important;
    width: 100% !important;
    height: auto !important;
    pointer-events: auto !important;
    will-change: transform !important;
}

.framer-1euzf18-container ~ .framer-1b59x81-container:not(.intro-revealed) {
    opacity: 0 !important;
    pointer-events: none !important;
    transform: translate3d(-50%, -25px, 0) !important;
    transition: transform 0.6s cubic-bezier(0.16, 1, 0.3, 1), opacity 0.5s ease !important;
}

.framer-1b59x81-container.intro-revealed,
.framer-1bcxcm-container.intro-revealed,
.framer-31ud7w-container.intro-revealed,
.framer-n6wtko-container.intro-revealed {
    opacity: 1 !important;
    pointer-events: auto !important;
    transform: translate3d(-50%, 0, 0) !important;
}

.framer-1b59x81-container.nav-scrolled-hidden,
.framer-1b59x81-container.intro-revealed.nav-scrolled-hidden,
.framer-1bcxcm-container.nav-scrolled-hidden,
.framer-31ud7w-container.nav-scrolled-hidden,
.framer-n6wtko-container.nav-scrolled-hidden {
    transform: translate3d(-50%, -120%, 0) !important;
    pointer-events: none !important;
}

/* ==========================================================================
   MOBILE NAVBAR OPTIMIZATIONS (Screen width <= 809.98px)
   Fixes cut-off text, overlapping links, missing backdrop blur & logo sizing
   ========================================================================== */
@media (max-width: 809.98px) {
    /* Sleek Floating Transparent Navbar matching original Framer design */
    .framer-1b59x81-container,
    .framer-1bcxcm-container,
    .framer-31ud7w-container,
    .framer-n6wtko-container,
    div:has(> nav[data-framer-name^="Navigation"]),
    div:has(> .framer-1tcpsyy) {
        position: fixed !important;
        top: 0 !important;
        left: 0 !important;
        right: 0 !important;
        width: 100vw !important;
        max-width: 100vw !important;
        transform: translate3d(0, 0, 0) !important;
        z-index: 9999 !important;
        background: transparent !important;
        backdrop-filter: none !important;
        -webkit-backdrop-filter: none !important;
        border-bottom: none !important;
        box-shadow: none !important;
        padding: 0 !important;
        margin: 0 !important;
        height: 56px !important;
        display: flex !important;
        align-items: center !important;
        justify-content: center !important;
    }

    .framer-1euzf18-container ~ .framer-1b59x81-container:not(.intro-revealed) {
        transform: translate3d(0, -25px, 0) !important;
    }

    .framer-1b59x81-container.intro-revealed,
    .framer-1bcxcm-container.intro-revealed,
    .framer-31ud7w-container.intro-revealed,
    .framer-n6wtko-container.intro-revealed {
        transform: translate3d(0, 0, 0) !important;
        opacity: 1 !important;
    }

    .framer-1b59x81-container.nav-scrolled-hidden,
    .framer-1b59x81-container.intro-revealed.nav-scrolled-hidden,
    .framer-1bcxcm-container.nav-scrolled-hidden,
    .framer-31ud7w-container.nav-scrolled-hidden,
    .framer-n6wtko-container.nav-scrolled-hidden {
        transform: translate3d(0, -120%, 0) !important;
        pointer-events: none !important;
    }

    /* Standalone navs on pages like /about-me, /contact-me, /gallery */
    body > * > nav[data-framer-name^="Navigation"],
    body > * > nav.framer-1tcpsyy,
    body > * > * > nav[data-framer-name^="Navigation"],
    body > * > * > nav.framer-1tcpsyy {
        position: fixed !important;
        top: 0 !important;
        left: 0 !important;
        right: 0 !important;
        width: 100vw !important;
        max-width: 100vw !important;
        z-index: 9999 !important;
        background: transparent !important;
        backdrop-filter: none !important;
        -webkit-backdrop-filter: none !important;
        border-bottom: none !important;
        box-shadow: none !important;
    }

    nav[data-framer-name^="Navigation"],
    .framer-1b59x81-container nav,
    .framer-1tcpsyy {
        width: 100% !important;
        max-width: 100% !important;
        height: 56px !important;
        padding: 0 16px !important;
        margin: 0 !important;
        display: flex !important;
        flex-direction: row !important;
        align-items: center !important;
        justify-content: space-between !important;
        box-sizing: border-box !important;
        gap: 6px !important;
        background: transparent !important;
        transform: none !important;
        position: static !important;
    }

    /* Logo */
    [data-framer-name="Logo"],
    .framer-1u272zq {
        display: flex !important;
        align-items: center !important;
        justify-content: center !important;
        width: 34px !important;
        height: 34px !important;
        min-width: 34px !important;
        max-width: 34px !important;
        flex: 0 0 34px !important;
        padding: 0 !important;
        margin: 0 !important;
        position: relative !important;
        top: auto !important;
        left: auto !important;
        transform: none !important;
    }

    .framer-zvjkeq,
    [data-framer-name="notheredesign 1"] {
        width: 34px !important;
        height: 34px !important;
        border-radius: 8px !important;
        overflow: hidden !important;
        display: block !important;
        position: relative !important;
    }

    .framer-zvjkeq img,
    [data-framer-name="Logo"] img {
        width: 100% !important;
        height: 100% !important;
        object-fit: cover !important;
        border-radius: 8px !important;
    }

    /* Empty link cleanup */
    .framer-fsesce:empty,
    nav a:empty {
        display: none !important;
        width: 0 !important;
        height: 0 !important;
        margin: 0 !important;
        padding: 0 !important;
        flex: 0 0 0px !important;
    }

    /* Nav Links Container */
    [data-framer-name="Nav links"],
    .framer-1hjdqag {
        display: flex !important;
        flex-direction: row !important;
        align-items: center !important;
        justify-content: flex-end !important;
        gap: 6px !important;
        flex: 1 1 auto !important;
        width: auto !important;
        max-width: calc(100% - 40px) !important;
        margin: 0 !important;
        padding: 0 !important;
        position: relative !important;
        top: auto !important;
        left: auto !important;
    }

    [data-framer-name="Left"],
    .framer-1qrhi4g {
        display: flex !important;
        flex-direction: row !important;
        align-items: center !important;
        justify-content: flex-end !important;
        gap: 6px !important;
        width: auto !important;
        flex: 0 1 auto !important;
        margin: 0 !important;
        padding: 0 !important;
    }

    /* Links */
    .framer-1nrk0wl,
    .framer-1l4fi3i,
    .framer-f6b7ar,
    .framer-10tv4xx,
    nav a.framer-o72du7 {
        display: inline-flex !important;
        flex-direction: row !important;
        align-items: center !important;
        justify-content: center !important;
        width: auto !important;
        min-width: auto !important;
        max-width: none !important;
        height: auto !important;
        flex: 0 0 auto !important;
        white-space: nowrap !important;
        text-decoration: none !important;
        padding: 4px 5px !important;
        margin: 0 !important;
        border-radius: 6px !important;
        box-sizing: border-box !important;
        position: relative !important;
        top: auto !important;
        left: auto !important;
    }

    /* Let's Talk CTA Link on Mobile (Clean minimal styling, no harsh pill border) */
    .framer-10tv4xx,
    [data-framer-name="Right"] {
        display: inline-flex !important;
        align-items: center !important;
        justify-content: center !important;
        background: transparent !important;
        border: none !important;
        border-radius: 0 !important;
        padding: 4px 5px !important;
        gap: 2px !important;
        flex: 0 0 auto !important;
        box-shadow: none !important;
    }

    .framer-10tv4xx [class*="rolling-text-inner"],
    .framer-10tv4xx [class*="rolling-text-inner"] span {
        color: #ffffff !important;
        font-weight: 500 !important;
    }

    /* Preloader Intro Splash Screen on Mobile: Show text during loading, then fade out completely once opened */
    .framer-1euzf18-container.intro-done,
    .framer-1b59x81-container.intro-revealed ~ .framer-1euzf18-container {
        opacity: 0 !important;
        visibility: hidden !important;
        pointer-events: none !important;
        transition: opacity 0.5s ease, visibility 0.5s ease !important;
    }

    .framer-1euzf18-container.intro-done * {
        opacity: 0 !important;
        pointer-events: none !important;
    }

    /* All inner text wrapper containers */
    .framer-41r4dk-container,
    .framer-19du2kt-container,
    .framer-u09uki-container,
    .framer-15ddtpd-container,
    .framer-1nrk0wl > div,
    .framer-1l4fi3i > div,
    .framer-f6b7ar > div,
    .framer-10tv4xx > div {
        width: auto !important;
        min-width: auto !important;
        max-width: none !important;
        height: auto !important;
        overflow: visible !important;
        display: inline-flex !important;
        align-items: center !important;
        justify-content: center !important;
        margin: 0 !important;
        padding: 0 !important;
    }

    /* Typography inside mobile nav */
    [class*="rolling-text-inner"] {
        font-family: "PP Neue Montreal Medium", "PP Neue Montreal", "Inter", -apple-system, sans-serif !important;
        font-size: 13px !important;
        font-weight: 500 !important;
        line-height: 1 !important;
        letter-spacing: -0.2px !important;
        display: inline-flex !important;
        width: auto !important;
        overflow: visible !important;
        white-space: nowrap !important;
        text-shadow: none !important;
        user-select: none !important;
    }

    [class*="rolling-text-inner"] span {
        font-size: 13px !important;
        font-weight: 500 !important;
        line-height: 1 !important;
        letter-spacing: -0.2px !important;
        display: inline-block !important;
        white-space: pre !important;
        flex-shrink: 0 !important;
        color: rgba(255, 255, 255, 0.78) !important;
        transform: none !important;
    }

    /* Active link text */
    a[data-framer-page-link-current="true"] [class*="rolling-text-inner"] span {
        color: #ffffff !important;
        font-weight: 600 !important;
    }

    /* Mobile Navbar: Remove small icons / glyphs (*, #, //, arrow-up-right) */
    .framer-1ql7fv7,
    .framer-8fvgo5,
    .framer-xqc0h7,
    .framer-upc2ci,
    .framer-agt84f,
    nav [data-framer-name="*"],
    nav [data-framer-name="(15)"],
    nav [data-framer-name="//"],
    nav [data-framer-name="#"],
    nav [data-framer-name="arrow-up-right"],
    .framer-1tcpsyy [data-framer-name="*"],
    .framer-1tcpsyy [data-framer-name="(15)"],
    .framer-1tcpsyy [data-framer-name="//"],
    .framer-1tcpsyy [data-framer-name="#"],
    .framer-1tcpsyy [data-framer-name="arrow-up-right"],
    .framer-1b59x81-container [data-framer-name="*"],
    .framer-1b59x81-container [data-framer-name="(15)"],
    .framer-1b59x81-container [data-framer-name="//"],
    .framer-1b59x81-container [data-framer-name="#"],
    .framer-1b59x81-container [data-framer-name="arrow-up-right"],
    .framer-1hjdqag .framer-1ql7fv7,
    .framer-1hjdqag .framer-8fvgo5,
    .framer-1hjdqag .framer-xqc0h7,
    .framer-1hjdqag .framer-upc2ci,
    .framer-1hjdqag .framer-agt84f {
        display: none !important;
        visibility: hidden !important;
        opacity: 0 !important;
        pointer-events: none !important;
        width: 0 !important;
        height: 0 !important;
        margin: 0 !important;
        padding: 0 !important;
        overflow: hidden !important;
        position: absolute !important;
        left: -9999px !important;
    }

    /* --- About Me Page Mobile Structure Alignment (Matching Desktop Structure) --- */
    .framer-1cL27 {
        display: flex !important;
        flex-direction: column !important;
        width: 100% !important;
    }

    /* 1. Fixed Navbar */
    .framer-1bcxcm-container {
        order: 1 !important;
    }

    /* 2. Header (3D Starry Canvas Scene) placed at top under navbar */
    .framer-1bwem10,
    [data-framer-name="Header"] {
        order: 2 !important;
        width: 100% !important;
        height: 70vh !important;
        min-height: 440px !important;
        max-height: 600px !important;
        position: relative !important;
        overflow: hidden !important;
        margin-top: 56px !important;
        display: block !important;
    }

    /* 3. Bio / Background Text Section placed below Header */
    #mobile-bio-fallback-section,
    .about-bio-main-section,
    .framer-9i40ma {
        order: 3 !important;
        width: 100% !important;
        display: flex !important;
        flex-direction: column !important;
        padding: 48px 20px 40px !important;
        box-sizing: border-box !important;
        background-color: #000000 !important;
        position: relative !important;
        z-index: 10 !important;
    }

    /* 4. Creative Work CTA */
    .about-creative-cta-row,
    .about-creative-cta-btn,
    .framer-1a61n23 {
        order: 4 !important;
    }

    /* 5. Footer */
    footer,
    .custom-footer-root,
    [data-framer-name*="Footer"] {
        order: 5 !important;
    }

    /* Hide legacy template items on mobile */
    .framer-k8vyu,
    .framer-mqncyk,
    .framer-2h87n1-container,
    .framer-1n50t1,
    .framer-yzlmc4,
    .framer-h59ot7 {
        display: none !important;
    }

    .about-section-tag {
        display: inline-flex !important;
        align-items: center !important;
        gap: 8px !important;
        font-family: "PP Neue Montreal Medium", sans-serif !important;
        font-size: 11px !important;
        font-weight: 600 !important;
        letter-spacing: 0.12em !important;
        text-transform: uppercase !important;
        color: rgba(255, 255, 255, 0.5) !important;
        margin-bottom: 24px !important;
    }

    .about-section-tag-dot {
        width: 7px !important;
        height: 7px !important;
        border-radius: 50% !important;
        background-color: #fb4617 !important;
        box-shadow: 0 0 10px rgba(251, 70, 23, 0.8) !important;
        display: inline-block !important;
    }

    .bio-statement-p1,
    .bio-statement-p2 {
        font-family: "PP Neue Montreal Medium", "PP Neue Montreal", sans-serif !important;
        font-size: 18px !important;
        line-height: 1.45 !important;
        letter-spacing: -0.015em !important;
        color: #ffffff !important;
        margin: 0 0 20px 0 !important;
    }
}

/* --- 1. Custom Interactive Cursor --- */
.custom-cursor-dot {
    position: fixed;
    top: 0;
    left: 0;
    width: 6px;
    height: 6px;
    background-color: #fb4617;
    border-radius: 50%;
    pointer-events: none;
    z-index: 99999;
    transform: translate3d(-50%, -50%, 0);
    margin-left: -3px;
    margin-top: -3px;
    transition: width 0.2s ease, height 0.2s ease, background-color 0.2s ease;
}

.custom-cursor-ring {
    position: fixed;
    top: 0;
    left: 0;
    width: 34px;
    height: 34px;
    border: 1.5px solid rgba(251, 70, 23, 0.55);
    border-radius: 50%;
    pointer-events: none;
    z-index: 99998;
    transform: translate3d(-50%, -50%, 0);
    margin-left: -17px;
    margin-top: -17px;
    transition: width 0.25s cubic-bezier(0.16, 1, 0.3, 1),
                height 0.25s cubic-bezier(0.16, 1, 0.3, 1),
                border-color 0.25s ease,
                background-color 0.25s ease;
}

.custom-cursor-ring.cursor-hover {
    width: 56px;
    height: 56px;
    margin-left: -28px;
    margin-top: -28px;
    border-color: #fb4617;
    background-color: rgba(251, 70, 23, 0.12);
}

/* --- 2. Floating Project Thumbnail Preview on Hover --- */
.project-floating-preview {
    position: fixed;
    top: 0;
    left: 0;
    width: 260px;
    height: 160px;
    border-radius: 12px;
    overflow: hidden;
    pointer-events: none;
    z-index: 9999;
    opacity: 0;
    transform: scale(0.85);
    transition: opacity 0.3s cubic-bezier(0.16, 1, 0.3, 1), transform 0.3s cubic-bezier(0.16, 1, 0.3, 1);
    box-shadow: 0 20px 40px rgba(0, 0, 0, 0.6), 0 0 0 1px rgba(255, 255, 255, 0.15);
    background: #111;
}

.project-floating-preview.visible {
    opacity: 1;
    transform: scale(1);
}

.project-floating-preview img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    display: block;
}

.project-floating-preview .preview-title {
    position: absolute;
    bottom: 0;
    left: 0;
    right: 0;
    padding: 8px 12px;
    background: linear-gradient(transparent, rgba(0, 0, 0, 0.85));
    color: #fff;
    font-family: "PP Neue Montreal Medium", sans-serif;
    font-size: 12px;
    letter-spacing: 0.02em;
}

/* --- 3. Scroll Reveal Animations --- */
.section-reveal-init {
    opacity: 0;
    transform: translateY(30px);
    transition: opacity 0.8s cubic-bezier(0.16, 1, 0.3, 1), transform 0.8s cubic-bezier(0.16, 1, 0.3, 1);
}

.section-reveal-init.section-revealed {
    opacity: 1 !important;
    transform: translateY(0) !important;
}

/* Signature Red/Orange Block Text Reveal Animation */
.block-text-curtain,
div[style*="position:relative"][style*="inline-block"] > div[style*="position:absolute"] > div[style*="background-color:#FB4617"],
div[style*="position:relative"][style*="inline-block"] > div[style*="position:absolute"] > div[style*="background-color: #FB4617"],
div[style*="position:relative"][style*="inline-block"] > div[style*="position:absolute"] > div[style*="background-color: rgb(251, 70, 23)"],
div[style*="flex:1"][style*="background-color:#FB4617"],
div[style*="flex: 1"][style*="background-color:#FB4617"],
div[style*="flex:1"][style*="background-color: #FB4617"],
div[style*="flex: 1"][style*="background-color: #FB4617"],
div[style*="flex:1"][style*="background-color: rgb(251, 70, 23)"],
div[style*="flex: 1"][style*="background-color: rgb(251, 70, 23)"] {
    transform-origin: right center !important;
    pointer-events: none !important;
    z-index: 10 !important;
    will-change: transform, opacity !important;
}

/* --- 4. "Be Real *", "Be Creative #", "Be Bold ™" Typography & Interactive Hover --- */
.framer-1q4t6n4,
.framer-qnjc74,
.framer-1nwdhdy,
[data-framer-name="Be Real *"],
[data-framer-name="Be Creative #"],
[data-framer-name="Be Bold ™"] {
    display: inline-block !important;
    opacity: 1 !important;
    transform: none !important;
    transition: transform 0.4s cubic-bezier(0.16, 1, 0.3, 1), color 0.3s ease !important;
    cursor: default !important;
}

.framer-1q4t6n4:hover,
.framer-qnjc74:hover,
.framer-1nwdhdy:hover,
[data-framer-name="Be Real *"]:hover,
[data-framer-name="Be Creative #"]:hover,
[data-framer-name="Be Bold ™"]:hover {
    transform: scale(1.06) translateY(-4px) !important;
    color: #fb4617 !important;
    text-shadow: 0 0 25px rgba(251, 70, 23, 0.45) !important;
}

.framer-1q4t6n4 h1,
.framer-qnjc74 h1,
.framer-1nwdhdy h1,
[data-framer-name="Be Real *"] h1,
[data-framer-name="Be Creative #"] h1,
[data-framer-name="Be Bold ™"] h1 {
    font-family: "PP Neue Montreal Medium", sans-serif !important;
    font-size: clamp(38px, 6vw, 76px) !important;
    letter-spacing: -0.03em !important;
    line-height: 1.1 !important;
    color: #ffffff !important;
    transition: color 0.3s ease !important;
}

.framer-1q4t6n4:hover h1,
.framer-qnjc74:hover h1,
.framer-1nwdhdy:hover h1,
[data-framer-name="Be Real *"]:hover h1,
[data-framer-name="Be Creative #"]:hover h1,
[data-framer-name="Be Bold ™"]:hover h1 {
    color: #fb4617 !important;
}

/* --- 4.1 Hide Glitch Scramble Text Animation in Selected Works (Desktop & Mobile) --- */
.framer-xn0k8-container,
.framer-1pgzsx3-container,
[data-framer-name="test"],
[data-framer-name="(GPT® — 579)"],
.framer-1p26sui,
.framer-1r9ayw9 > .framer-xn0k8-container,
.framer-1r9ayw9 > .framer-1pgzsx3-container,
.framer-1r9ayw9 > [data-framer-name="test"],
.framer-1r9ayw9 [data-framer-name="test"],
.framer-1r9ayw9 [data-framer-name="(GPT® — 579)"],
.framer-1r9ayw9 p[style*="PP Neue Montreal Medium"] {
    display: none !important;
    visibility: hidden !important;
    opacity: 0 !important;
    pointer-events: none !important;
    height: 0 !important;
    width: 0 !important;
    overflow: hidden !important;
    position: absolute !important;
    left: -9999px !important;
}

/* --- 5. Interactive Works Row Hover State --- */
.framer-irl9ni a,
[data-framer-name="Selected Projects"] a,
.framer-18861k-container a {
    transition: background-color 0.3s ease, padding-left 0.3s cubic-bezier(0.16, 1, 0.3, 1) !important;
}

.framer-irl9ni a:hover,
[data-framer-name="Selected Projects"] a:hover {
    background-color: rgba(255, 255, 255, 0.04) !important;
    padding-left: 12px !important;
}

/* --- 6. Hero Profile Image Subtle Float --- */
@keyframes heroFloat {
    0%, 100% { transform: translateY(0); }
    50% { transform: translateY(-8px); }
}

[data-framer-name="Ava"],
[data-framer-name="image 12"] {
    animation: heroFloat 6s ease-in-out infinite !important;
}

/* --- 7. Signature Red/Orange Block Text Reveal Animation on Scroll & Load --- */
@keyframes framerBlockReveal {
    0% {
        transform: scaleX(1);
        transform-origin: right center;
        opacity: 1;
    }
    100% {
        transform: scaleX(0);
        transform-origin: right center;
        opacity: 1;
    }
}

div[style*="position:relative"][style*="inline-block"] > div[style*="position:absolute"][style*="pointer-events:none"] > div[style*="background-color:#FB4617"],
div[style*="position:relative"][style*="inline-block"] > div[style*="position:absolute"][style*="pointer-events:none"] > div[style*="background-color: #FB4617"],
div[style*="position:relative"][style*="inline-block"] > div[style*="position:absolute"][style*="pointer-events:none"] > div[style*="background-color: rgb(251, 70, 23)"],
.block-text-curtain {
    transform-origin: right center !important;
    pointer-events: none !important;
    z-index: 10 !important;
    will-change: transform !important;
}

.block-text-revealing {
    animation: framerBlockReveal 0.75s cubic-bezier(0.77, 0, 0.175, 1) forwards !important;
    display: block !important;
    visibility: visible !important;
}

.block-text-revealed {
    display: none !important;
    visibility: hidden !important;
    opacity: 0 !important;
    transform: scaleX(0) !important;
}

/* --- 8. Rolling Text Flip Animation for Buttons & Links --- */
[class*="rolling-text-inner"] {
    --font-size: 15px;
    --text: var(--token-41c31563-680c-472b-88ad-ba622f5d8fbd, rgba(255, 255, 255, 0.75));
    --line-height-abs: 100px;
    box-sizing: border-box !important;
    margin: 0 !important;
    padding: 0 !important;
    vertical-align: top !important;
    display: flex !important;
    overflow: hidden !important;
    width: max-content !important;
    font-family: "PP Neue Montreal Medium", -apple-system, sans-serif !important;
    font-size: 15px !important;
    text-transform: none !important;
    user-select: none !important;
    text-shadow: 0 var(--line-height-abs, 100px) 0 var(--text) !important;
}

[class*="rolling-text-inner"] span {
    display: block !important;
    -webkit-backface-visibility: hidden !important;
    backface-visibility: hidden !important;
    white-space: pre !important;
    flex-shrink: 0 !important;
    font-family: inherit !important;
    font-weight: inherit !important;
    font-style: inherit !important;
    font-size: inherit !important;
    letter-spacing: inherit !important;
    line-height: 100% !important;
    color: var(--text) !important;
    transform: translateY(0) !important;
    transition: none !important;
    transition-delay: 0s !important;
    will-change: transform !important;
}

/* Trigger roll on hover enter */
a:hover [class*="rolling-text-inner"] span,
button:hover [class*="rolling-text-inner"] span,
.framer-MOFHh:hover [class*="rolling-text-inner"] span,
.framer-1pgaq7q:hover [class*="rolling-text-inner"] span,
.framer-1tcpsyy a:hover [class*="rolling-text-inner"] span {
    transform: translateY(-100px) !important;
    transition: transform 0.45s cubic-bezier(0.16, 1, 0.3, 1) !important;
}

/* Staggered delay for organic rolling wave on hover enter */
a:hover [class*="rolling-text-inner"] span:nth-child(1),
button:hover [class*="rolling-text-inner"] span:nth-child(1),
.framer-1tcpsyy a:hover [class*="rolling-text-inner"] span:nth-child(1) { transition-delay: 0.00s !important; }

a:hover [class*="rolling-text-inner"] span:nth-child(2),
button:hover [class*="rolling-text-inner"] span:nth-child(2),
.framer-1tcpsyy a:hover [class*="rolling-text-inner"] span:nth-child(2) { transition-delay: 0.02s !important; }

a:hover [class*="rolling-text-inner"] span:nth-child(3),
button:hover [class*="rolling-text-inner"] span:nth-child(3),
.framer-1tcpsyy a:hover [class*="rolling-text-inner"] span:nth-child(3) { transition-delay: 0.04s !important; }

a:hover [class*="rolling-text-inner"] span:nth-child(4),
button:hover [class*="rolling-text-inner"] span:nth-child(4),
.framer-1tcpsyy a:hover [class*="rolling-text-inner"] span:nth-child(4) { transition-delay: 0.06s !important; }

a:hover [class*="rolling-text-inner"] span:nth-child(5),
button:hover [class*="rolling-text-inner"] span:nth-child(5),
.framer-1tcpsyy a:hover [class*="rolling-text-inner"] span:nth-child(5) { transition-delay: 0.08s !important; }

a:hover [class*="rolling-text-inner"] span:nth-child(6),
button:hover [class*="rolling-text-inner"] span:nth-child(6),
.framer-1tcpsyy a:hover [class*="rolling-text-inner"] span:nth-child(6) { transition-delay: 0.10s !important; }

a:hover [class*="rolling-text-inner"] span:nth-child(7),
button:hover [class*="rolling-text-inner"] span:nth-child(7),
.framer-1tcpsyy a:hover [class*="rolling-text-inner"] span:nth-child(7) { transition-delay: 0.12s !important; }

a:hover [class*="rolling-text-inner"] span:nth-child(8),
button:hover [class*="rolling-text-inner"] span:nth-child(8),
.framer-1tcpsyy a:hover [class*="rolling-text-inner"] span:nth-child(8) { transition-delay: 0.14s !important; }

a:hover [class*="rolling-text-inner"] span:nth-child(9),
button:hover [class*="rolling-text-inner"] span:nth-child(9),
.framer-1tcpsyy a:hover [class*="rolling-text-inner"] span:nth-child(9) { transition-delay: 0.16s !important; }

a:hover [class*="rolling-text-inner"] span:nth-child(10),
button:hover [class*="rolling-text-inner"] span:nth-child(10),
.framer-1tcpsyy a:hover [class*="rolling-text-inner"] span:nth-child(10) { transition-delay: 0.18s !important; }

/* Button pill border glow & arrow circle micro-animations */
.framer-MOFHh,
.framer-1pgaq7q,
.framer-19sn2j0 {
    transition: all 0.35s cubic-bezier(0.16, 1, 0.3, 1) !important;
}

.framer-MOFHh:hover .framer-1pgaq7q {
    border-color: rgba(255, 255, 255, 0.6) !important;
    background-color: rgba(255, 255, 255, 0.06) !important;
}

.framer-MOFHh:hover .framer-19sn2j0 {
    border-color: #FB4617 !important;
    background-color: #FB4617 !important;
    transform: scale(1.08) !important;
}

.framer-MOFHh:hover .framer-19sn2j0 svg {
    fill: #ffffff !important;
    color: #ffffff !important;
    transform: translate(2px, -2px) !important;
}

.framer-19sn2j0 svg {
    transition: transform 0.3s cubic-bezier(0.16, 1, 0.3, 1), fill 0.3s ease, color 0.3s ease !important;
}

/* --- 9. Mobile Project Photo Popup Modal --- */
.mobile-project-modal {
    position: fixed !important;
    top: 0 !important;
    left: 0 !important;
    right: 0 !important;
    bottom: 0 !important;
    z-index: 999999 !important;
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
    padding: 20px 16px !important;
    opacity: 0 !important;
    pointer-events: none !important;
    visibility: hidden !important;
    transition: opacity 0.3s cubic-bezier(0.16, 1, 0.3, 1), visibility 0.3s ease !important;
}

.mobile-project-modal.active {
    opacity: 1 !important;
    pointer-events: auto !important;
    visibility: visible !important;
}

.mobile-project-modal-backdrop {
    position: absolute !important;
    top: 0 !important;
    left: 0 !important;
    right: 0 !important;
    bottom: 0 !important;
    background: rgba(0, 0, 0, 0.88) !important;
    backdrop-filter: blur(16px) !important;
    -webkit-backdrop-filter: blur(16px) !important;
}

.mobile-project-modal-card {
    position: relative !important;
    width: 100% !important;
    max-width: 360px !important;
    background: #121212 !important;
    border: 1px solid rgba(255, 255, 255, 0.16) !important;
    border-radius: 20px !important;
    padding: 16px !important;
    box-shadow: 0 25px 60px rgba(0, 0, 0, 0.9), 0 0 0 1px rgba(255, 255, 255, 0.08) !important;
    transform: scale(0.92) translateY(15px) !important;
    transition: transform 0.35s cubic-bezier(0.16, 1, 0.3, 1) !important;
    display: flex !important;
    flex-direction: column !important;
    gap: 12px !important;
    box-sizing: border-box !important;
    z-index: 2 !important;
}

.mobile-project-modal.active .mobile-project-modal-card {
    transform: scale(1) translateY(0) !important;
}

.mobile-project-modal-header {
    display: flex !important;
    align-items: center !important;
    justify-content: space-between !important;
}

.mobile-project-modal-meta {
    display: flex !important;
    align-items: center !important;
    gap: 8px !important;
}

.mobile-project-modal-tag {
    display: inline-flex !important;
    align-items: center !important;
    gap: 6px !important;
    font-family: "PP Neue Montreal Medium", sans-serif !important;
    font-size: 11px !important;
    font-weight: 600 !important;
    letter-spacing: 0.08em !important;
    color: rgba(255, 255, 255, 0.7) !important;
    text-transform: uppercase !important;
}

.mobile-project-modal-tag .modal-dot {
    width: 6px !important;
    height: 6px !important;
    border-radius: 50% !important;
    background: #fb4617 !important;
    box-shadow: 0 0 8px #fb4617 !important;
    display: inline-block !important;
}

.mobile-project-modal-year {
    font-family: "PP Neue Montreal", sans-serif !important;
    font-size: 11px !important;
    color: rgba(255, 255, 255, 0.45) !important;
}

.mobile-project-modal-close {
    width: 32px !important;
    height: 32px !important;
    border-radius: 50% !important;
    background: rgba(255, 255, 255, 0.1) !important;
    border: 1px solid rgba(255, 255, 255, 0.15) !important;
    color: #fff !important;
    font-size: 13px !important;
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
    cursor: pointer !important;
    outline: none !important;
    padding: 0 !important;
    transition: background-color 0.2s ease, transform 0.2s ease !important;
}

.mobile-project-modal-close:active {
    transform: scale(0.92) !important;
    background: rgba(255, 255, 255, 0.2) !important;
}

.mobile-project-modal-title {
    font-family: "PP Neue Montreal Medium", sans-serif !important;
    font-size: 17px !important;
    font-weight: 600 !important;
    color: #fff !important;
    letter-spacing: -0.01em !important;
    line-height: 1.25 !important;
}

.mobile-project-modal-img-wrap {
    width: 100% !important;
    aspect-ratio: 16 / 10 !important;
    border-radius: 12px !important;
    overflow: hidden !important;
    background: #1a1a1a !important;
    border: 1px solid rgba(255, 255, 255, 0.08) !important;
    cursor: pointer !important;
}

.mobile-project-modal-img {
    width: 100% !important;
    height: 100% !important;
    object-fit: cover !important;
    display: block !important;
}

.mobile-project-modal-footer {
    display: flex !important;
    align-items: center !important;
    justify-content: space-between !important;
    padding-top: 4px !important;
}

.mobile-project-modal-hint {
    font-family: "PP Neue Montreal", sans-serif !important;
    font-size: 11px !important;
    color: rgba(255, 255, 255, 0.4) !important;
}

.mobile-project-modal-link {
    font-family: "PP Neue Montreal Medium", sans-serif !important;
    font-size: 12px !important;
    font-weight: 500 !important;
    color: #fb4617 !important;
    text-decoration: none !important;
    display: inline-flex !important;
    align-items: center !important;
    gap: 3px !important;
}

/* ==========================================================================
   ABOUT PAGE HERO: Remove blur particle / shader animation ONLY in mobile view
   ========================================================================== */
@media (max-width: 809.98px) {
    .framer-1cL27 .framer-1yo5fvw-container,
    .framer-1yo5fvw-container,
    [data-framer-name="Header"] .framer-1yo5fvw-container,
    .framer-1bwem10 .framer-1yo5fvw-container,
    div[data-us-project="yPbekk0o79LieI3fPBpZ"],
    div[data-us-project*="yPbe"] {
        display: none !important;
        visibility: hidden !important;
        opacity: 0 !important;
        pointer-events: none !important;
    }
}

/* ==========================================================================
   HOME PAGE SKILLS SECTION: Mobile Layout & Alignment Fix
   Fixes cut-off titles (My Skills / Overview), left-column width, and orange blocks
   ========================================================================== */
@media (max-width: 809.98px) {
    .framer-1bcpa7g,
    [data-framer-name="What I Can Do For Products "] {
        padding: 60px 20px 80px !important;
        width: 100% !important;
        box-sizing: border-box !important;
        overflow: visible !important;
    }

    .framer-19n0fv,
    .framer-1bcpa7g [data-framer-name="Container"] {
        width: 100% !important;
        max-width: 100% !important;
        display: flex !important;
        flex-direction: column !important;
        align-items: flex-start !important;
        justify-content: flex-start !important;
        gap: 40px !important;
        overflow: visible !important;
        padding: 0 !important;
        margin: 0 !important;
    }

    .framer-y0a93v,
    .framer-1bcpa7g [data-framer-name="Left"] {
        position: relative !important;
        top: auto !important;
        left: 0 !important;
        right: auto !important;
        width: 100% !important;
        max-width: 100% !important;
        min-width: 100% !important;
        height: auto !important;
        display: flex !important;
        flex-direction: column !important;
        align-items: flex-start !important;
        justify-content: flex-start !important;
        margin: 0 !important;
        padding: 0 !important;
        z-index: 2 !important;
    }

    .framer-1o3t2f8,
    .framer-1x3gjdo,
    .framer-ehati5,
    .framer-1l5v3kx,
    .framer-10o4dcf,
    .framer-125xrq9,
    .framer-1m2sl69,
    .framer-u1p9d7,
    .framer-1yx8nyh,
    .framer-10orsg3 {
        position: relative !important;
        left: 0 !important;
        right: auto !important;
        top: auto !important;
        bottom: auto !important;
        width: 100% !important;
        max-width: 100% !important;
        margin-left: 0 !important;
        margin-right: 0 !important;
        padding-left: 0 !important;
        box-sizing: border-box !important;
        align-items: flex-start !important;
        text-align: left !important;
    }

    .framer-ehati5 h1,
    .framer-ehati5 .framer-text,
    .framer-1m2sl69 h1,
    .framer-u1p9d7 h1 {
        text-align: left !important;
        margin-left: 0 !important;
        padding-left: 0 !important;
        font-size: clamp(32px, 8vw, 42px) !important;
        line-height: 1.1 !important;
        letter-spacing: -0.02em !important;
    }

    /* Skills Section Divider */
    .framer-1l5v3kx,
    .framer-1bcpa7g [data-framer-name="Rectangle 9"] {
        width: 100% !important;
        max-width: 100% !important;
        height: 1px !important;
        background-color: rgba(255, 255, 255, 0.15) !important;
        margin: 20px 0 !important;
    }

    /* Selected Works Section Divider & Header on Mobile */
    .framer-1krvh14,
    [data-framer-name="Frame 50126803"],
    .framer-1tyhbk2 > .framer-1krvh14 {
        background-color: transparent !important;
        background: transparent !important;
        height: auto !important;
        min-height: 0 !important;
        max-height: none !important;
        width: 100% !important;
        padding: 0 !important;
        margin: 0 !important;
        gap: 0 !important;
        display: block !important;
        border: none !important;
    }

    .framer-cl5njm,
    .framer-1krvh14 [data-framer-name="Rectangle 9"],
    .framer-1krvh14 .framer-cl5njm,
    .framer-1ghiy57 [data-framer-name="Rectangle 9"] {
        width: 100% !important;
        max-width: 100% !important;
        height: 1px !important;
        min-height: 1px !important;
        max-height: 1px !important;
        background-color: rgba(255, 255, 255, 0.15) !important;
        margin: 14px 0 20px 0 !important;
        border: none !important;
        padding: 0 !important;
        box-sizing: border-box !important;
    }

    /* Selected Works: Remove red 3D wireframe animation/mesh crashing with text on mobile */
    .framer-f843om-container,
    .framer-158afwf-container,
    [data-framer-name="Shape 1.1 (new)"],
    [data-framer-name="Shape 1.1 (old)"],
    [name="Shape 1.1 (new)"],
    [name="Shape 1.1 (old)"],
    .framer-1bf645j > .framer-f843om-container,
    .framer-1bf645j > .framer-158afwf-container {
        display: none !important;
        visibility: hidden !important;
        opacity: 0 !important;
        pointer-events: none !important;
        width: 0 !important;
        height: 0 !important;
        overflow: hidden !important;
        position: absolute !important;
        left: -9999px !important;
        z-index: -999 !important;
    }

    .framer-10o4dcf,
    .framer-1bcpa7g p {
        font-size: 15px !important;
        line-height: 1.55 !important;
        color: rgba(255, 255, 255, 0.7) !important;
        max-width: 100% !important;
    }

    /* Right Column: Skills Lists */
    .framer-1rk0yv2,
    .framer-13x63k1,
    .framer-1bcpa7g [data-framer-name="Right"] {
        position: relative !important;
        width: 100% !important;
        max-width: 100% !important;
        min-width: 100% !important;
        left: 0 !important;
        right: auto !important;
        margin: 0 !important;
        padding: 0 !important;
        display: flex !important;
        flex-direction: column !important;
        gap: 36px !important;
    }

    .framer-crk9f6,
    .framer-1bcgi1r,
    .framer-1njwksv,
    .framer-3535qt,
    [data-framer-name="Skill Set 1"],
    [data-framer-name="Skill Set 2"],
    [data-framer-name="Skill Set 3"],
    [data-framer-name="UI design"],
    [data-framer-name="Product design"],
    [data-framer-name="Design System"] {
        width: 100% !important;
        max-width: 100% !important;
        position: relative !important;
        left: 0 !important;
        right: auto !important;
        box-sizing: border-box !important;
    }
}