{"id":262,"date":"2025-06-05T20:48:59","date_gmt":"2025-06-06T00:48:59","guid":{"rendered":"https:\/\/mse.ucf.edu\/fms\/?page_id=262"},"modified":"2026-04-15T13:59:26","modified_gmt":"2026-04-15T17:59:26","slug":"home","status":"publish","type":"page","link":"https:\/\/mse.ucf.edu\/fms\/","title":{"rendered":"Home"},"content":{"rendered":"\n<!-- Main Content Sections -->\n<div class=\"main-content\">\n    <!-- Animated Background -->\n    <div class=\"animated-background\">\n        <div class=\"floating-orbs\">\n            <div class=\"orb orb-1\"><\/div>\n            <div class=\"orb orb-2\"><\/div>\n            <div class=\"orb orb-3\"><\/div>\n            <div class=\"orb orb-4\"><\/div>\n        <\/div>\n        <canvas id=\"homeParticleCanvas\"><\/canvas>\n    <\/div>\n\n    <!-- Quick Links Section -->\n    <section class=\"quick-links-section\">\n        <div class=\"container\">\n            <h2 class=\"section-title floating-title\" data-aos=\"fade-up\">Explore Our Lab<\/h2>\n            <div class=\"quick-links-grid\">\n                <div class=\"quick-link-card floating-card\" data-aos=\"fade-up\" data-aos-delay=\"100\">\n                    <div class=\"card-glow\"><\/div>\n                    <div class=\"card-icon\">\n                        <i class=\"fas fa-microscope\"><\/i>\n                        <div class=\"icon-particles\"><\/div>\n                    <\/div>\n                    <h3>Research<\/h3>\n                    <p>Discover our innovative research areas and ongoing projects in materials science and engineering.<\/p>\n                    <a href=\"\/fms\/research\" class=\"card-btn magnetic-btn\">\n                        <span class=\"btn-text\">Learn More<\/span>\n                        <div class=\"btn-ripple\"><\/div>\n                    <\/a>\n                <\/div>\n                <div class=\"quick-link-card floating-card\" data-aos=\"fade-up\" data-aos-delay=\"200\">\n                    <div class=\"card-glow\"><\/div>\n                    <div class=\"card-icon\">\n                        <i class=\"fas fa-book\"><\/i>\n                        <div class=\"icon-particles\"><\/div>\n                    <\/div>\n                    <h3>Publications<\/h3>\n                    <p>Browse our latest publications and research findings in leading scientific journals.<\/p>\n                    <a href=\"\/fms\/publications\" class=\"card-btn magnetic-btn\">\n                        <span class=\"btn-text\">View Publications<\/span>\n                        <div class=\"btn-ripple\"><\/div>\n                    <\/a>\n                <\/div>\n                <div class=\"quick-link-card floating-card\" data-aos=\"fade-up\" data-aos-delay=\"300\">\n                    <div class=\"card-glow\"><\/div>\n                    <div class=\"card-icon\">\n                        <i class=\"fas fa-users\"><\/i>\n                        <div class=\"icon-particles\"><\/div>\n                    <\/div>\n                    <h3>Team<\/h3>\n                    <p>Meet our talented researchers, students, and collaborators driving innovation forward.<\/p>\n                    <a href=\"\/fms\/team\" class=\"card-btn magnetic-btn\">\n                        <span class=\"btn-text\">Meet the Team<\/span>\n                        <div class=\"btn-ripple\"><\/div>\n                    <\/a>\n                <\/div>\n            <\/div>\n        <\/div>\n    <\/section>\n    <!-- Industry Partners Section -->\n    <section class=\"partners-section\">\n        <div class=\"partners-bg-effects\">\n            <div class=\"partners-grid-lines\"><\/div>\n            <div class=\"partners-glow partners-glow-1\"><\/div>\n            <div class=\"partners-glow partners-glow-2\"><\/div>\n        <\/div>\n        <div class=\"container\">\n            <h2 class=\"section-title floating-title\" data-aos=\"fade-up\">Sponsors and Partners<\/h2>\n            <p class=\"partners-subtitle\" data-aos=\"fade-up\" data-aos-delay=\"50\">Proudly supported by leading institutions advancing scientific research<\/p>\n            <div class=\"partners-grid\">\n                <div class=\"partner-card floating-card\" data-aos=\"zoom-in\" data-aos-delay=\"100\">\n                    <div class=\"partner-card-glow\"><\/div>\n                    <div class=\"partner-card-border\"><\/div>\n                    <a href=\"https:\/\/www.nsf.gov\/\" target=\"_blank\" rel=\"noopener noreferrer\">\n                        <div class=\"partner-logo-wrapper\">\n                            <div class=\"partner-logo-ring\"><\/div>\n                            <div class=\"partner-logo-ring partner-logo-ring-2\"><\/div>\n                            <div class=\"partner-logo\">\n                                <img decoding=\"async\" src=\"https:\/\/upload.wikimedia.org\/wikipedia\/commons\/thumb\/7\/7e\/NSF_logo.png\/960px-NSF_logo.png\" alt=\"National Science Foundation\">\n                            <\/div>\n                        <\/div>\n                        <div class=\"partner-info\">\n                            <h3>National Science Foundation<\/h3>\n                            <span class=\"partner-tag\">Federal Agency<\/span>\n                        <\/div>\n                        <div class=\"partner-hover-effect\">\n                            <span class=\"visit-text\">Visit Website <i class=\"fas fa-external-link-alt\"><\/i><\/span>\n                        <\/div>\n                    <\/a>\n                <\/div>\n                <div class=\"partner-card floating-card\" data-aos=\"zoom-in\" data-aos-delay=\"200\">\n                    <div class=\"partner-card-glow\"><\/div>\n                    <div class=\"partner-card-border\"><\/div>\n                    <a href=\"https:\/\/www.ornl.gov\/\" target=\"_blank\" rel=\"noopener noreferrer\">\n                        <div class=\"partner-logo-wrapper\">\n                            <div class=\"partner-logo-ring\"><\/div>\n                            <div class=\"partner-logo-ring partner-logo-ring-2\"><\/div>\n                            <div class=\"partner-logo\">\n                                <img decoding=\"async\" src=\"https:\/\/mse.ucf.edu\/fms\/wp-content\/uploads\/2026\/04\/ornl_logo.png\" alt=\"Oak Ridge National Laboratory\">\n                            <\/div>\n                        <\/div>\n                        <div class=\"partner-info\">\n                            <h3>Oak Ridge National Laboratory<\/h3>\n                            <span class=\"partner-tag\">National Lab<\/span>\n                        <\/div>\n                        <div class=\"partner-hover-effect\">\n                            <span class=\"visit-text\">Visit Website <i class=\"fas fa-external-link-alt\"><\/i><\/span>\n                        <\/div>\n                    <\/a>\n                <\/div>\n            <\/div>\n        <\/div>\n    <\/section>\n\n    <!-- Call to Action Section -->\n    <section class=\"cta-section\">\n        <div class=\"container\">\n            <div class=\"cta-content\">\n                <div class=\"cta-text\" data-aos=\"fade-right\">\n                    <h2>Interested in Joining Our Lab?<\/h2>\n                    <p>We&#8217;re always looking for talented researchers, graduate students, and postdocs to join our team. Explore opportunities to contribute to cutting-edge materials science research.<\/p>\n                <\/div>\n                <div class=\"cta-button\" data-aos=\"fade-left\">\n                    <a href=\"\/fms\/contact\" class=\"cta-btn\">Contact Us<\/a>\n                <\/div>\n            <\/div>\n        <\/div>\n    <\/section>\n<\/div>\n\n<style>\n    \/* CSS Variables for visibility *\/\n    :root {\n        --primary-color: #00f2fe;\n        --secondary-color: #4facfe;\n        --dark-bg: #0a192f;\n        --darker-bg: #020c1b;\n        --text-color: #ccd6f6;\n        --text-muted: #8892b0;\n        --success-color: #28a745;\n        --error-color: #dc3545;\n        --border-color: rgba(255, 255, 255, 0.1);\n    }\n\n    \/* Main Content Styles *\/\n    .main-content {\n        background: var(--dark-bg);\n        color: var(--text-color);\n        min-height: 100vh;\n        position: relative;\n        z-index: 1;\n        overflow-x: hidden;\n    }\n\n    \/* Animated Background *\/\n    .animated-background {\n        position: fixed;\n        top: 0;\n        left: 0;\n        width: 100%;\n        height: 100%;\n        z-index: 0;\n        pointer-events: none;\n    }\n\n    .floating-orbs {\n        position: absolute;\n        width: 100%;\n        height: 100%;\n    }\n\n    .orb {\n        position: absolute;\n        border-radius: 50%;\n        filter: blur(80px);\n        opacity: 0.1;\n        animation: floatOrb 20s infinite ease-in-out;\n    }\n\n    .orb-1 {\n        width: 400px;\n        height: 400px;\n        background: radial-gradient(circle, var(--primary-color), transparent);\n        top: 10%;\n        left: 10%;\n        animation-delay: 0s;\n    }\n\n    .orb-2 {\n        width: 300px;\n        height: 300px;\n        background: radial-gradient(circle, var(--secondary-color), transparent);\n        top: 60%;\n        right: 15%;\n        animation-delay: -7s;\n    }\n\n    .orb-3 {\n        width: 250px;\n        height: 250px;\n        background: radial-gradient(circle, #64ffda, transparent);\n        bottom: 20%;\n        left: 20%;\n        animation-delay: -14s;\n    }\n\n    .orb-4 {\n        width: 350px;\n        height: 350px;\n        background: radial-gradient(circle, #4facfe, transparent);\n        top: 30%;\n        right: 30%;\n        animation-delay: -10s;\n    }\n\n    #homeParticleCanvas {\n        position: absolute;\n        top: 0;\n        left: 0;\n        width: 100%;\n        height: 100%;\n        opacity: 0.3;\n    }\n\n    @keyframes floatOrb {\n        0%, 100% {\n            transform: translate(0, 0) scale(1);\n        }\n        25% {\n            transform: translate(20px, -30px) scale(1.1);\n        }\n        50% {\n            transform: translate(-10px, -20px) scale(0.9);\n        }\n        75% {\n            transform: translate(-20px, 10px) scale(1.05);\n        }\n    }\n\n    .container {\n        max-width: 1200px;\n        margin: 0 auto;\n        padding: 0 2rem;\n    }\n\n    \/* Section Titles *\/\n    .section-title {\n        font-size: 2.5rem;\n        font-weight: 700;\n        text-align: center;\n        margin-bottom: 3rem;\n        background: linear-gradient(90deg, var(--primary-color), var(--secondary-color));\n        -webkit-background-clip: text;\n        background-clip: text;\n        -webkit-text-fill-color: transparent;\n        position: relative;\n        color: var(--text-color);\n    }\n\n    .floating-title {\n        animation: floatTitle 6s ease-in-out infinite;\n    }\n\n    .section-title::after {\n        content: '';\n        position: absolute;\n        bottom: -10px;\n        left: 50%;\n        transform: translateX(-50%);\n        width: 80px;\n        height: 3px;\n        background: linear-gradient(90deg, var(--primary-color), var(--secondary-color));\n        border-radius: 2px;\n        animation: pulseGlow 2s ease-in-out infinite;\n    }\n\n    @keyframes floatTitle {\n        0%, 100% {\n            transform: translateY(0px);\n        }\n        50% {\n            transform: translateY(-5px);\n        }\n    }\n\n    @keyframes pulseGlow {\n        0%, 100% {\n            box-shadow: 0 0 5px var(--primary-color);\n            opacity: 1;\n        }\n        50% {\n            box-shadow: 0 0 20px var(--primary-color);\n            opacity: 0.8;\n        }\n    }\n\n    \/* Quick Links Section *\/\n    .quick-links-section {\n        padding: 100px 0;\n        background: var(--dark-bg);\n        position: relative;\n        z-index: 2;\n    }\n\n    .quick-links-grid {\n        display: grid;\n        grid-template-columns: repeat(auto-fit, minmax(300px, 1fr));\n        gap: 2rem;\n        margin-top: 3rem;\n    }\n\n    .quick-link-card {\n        background: rgba(255, 255, 255, 0.05);\n        border: 1px solid var(--border-color);\n        border-radius: 15px;\n        padding: 2.5rem;\n        text-align: center;\n        transition: all 0.4s cubic-bezier(0.175, 0.885, 0.32, 1.275);\n        backdrop-filter: blur(10px);\n        -webkit-backdrop-filter: blur(10px);\n        position: relative;\n        overflow: hidden;\n        color: var(--text-color);\n    }\n\n    .floating-card {\n        animation: floatCard 8s ease-in-out infinite;\n    }\n\n    .floating-card:nth-child(2) {\n        animation-delay: -2s;\n    }\n\n    .floating-card:nth-child(3) {\n        animation-delay: -4s;\n    }\n\n    .card-glow {\n        position: absolute;\n        top: -2px;\n        left: -2px;\n        right: -2px;\n        bottom: -2px;\n        background: linear-gradient(45deg, var(--primary-color), var(--secondary-color), var(--primary-color));\n        border-radius: 17px;\n        opacity: 0;\n        z-index: -1;\n        transition: opacity 0.3s ease;\n        filter: blur(10px);\n    }\n\n    .quick-link-card::before {\n        content: '';\n        position: absolute;\n        top: 0;\n        left: 0;\n        right: 0;\n        height: 3px;\n        background: linear-gradient(90deg, var(--primary-color), var(--secondary-color));\n        transform: scaleX(0);\n        transition: transform 0.3s ease;\n    }\n\n    .quick-link-card:hover::before {\n        transform: scaleX(1);\n    }\n\n    .quick-link-card:hover {\n        transform: translateY(-15px) scale(1.02);\n        box-shadow: 0 25px 50px rgba(0, 242, 254, 0.2);\n        border-color: var(--primary-color);\n    }\n\n    .quick-link-card:hover .card-glow {\n        opacity: 0.3;\n    }\n\n    @keyframes floatCard {\n        0%, 100% {\n            transform: translateY(0px) rotate(0deg);\n        }\n        25% {\n            transform: translateY(-8px) rotate(0.5deg);\n        }\n        50% {\n            transform: translateY(-5px) rotate(0deg);\n        }\n        75% {\n            transform: translateY(-12px) rotate(-0.5deg);\n        }\n    }\n\n    .card-icon {\n        width: 80px;\n        height: 80px;\n        background: linear-gradient(135deg, var(--primary-color), var(--secondary-color));\n        border-radius: 50%;\n        display: flex;\n        align-items: center;\n        justify-content: center;\n        margin: 0 auto 1.5rem;\n        font-size: 2rem;\n        color: var(--dark-bg);\n        transition: all 0.4s ease;\n        position: relative;\n        overflow: hidden;\n    }\n\n    .icon-particles {\n        position: absolute;\n        top: 50%;\n        left: 50%;\n        width: 100%;\n        height: 100%;\n        transform: translate(-50%, -50%);\n        pointer-events: none;\n    }\n\n    .quick-link-card:hover .card-icon {\n        transform: scale(1.15) rotate(10deg);\n        box-shadow: 0 15px 30px rgba(0, 242, 254, 0.4);\n        animation: iconPulse 0.6s ease-out;\n    }\n\n    @keyframes iconPulse {\n        0% {\n            transform: scale(1) rotate(0deg);\n        }\n        50% {\n            transform: scale(1.2) rotate(5deg);\n        }\n        100% {\n            transform: scale(1.15) rotate(10deg);\n        }\n    }\n\n    .quick-link-card h3 {\n        font-size: 1.5rem;\n        font-weight: 600;\n        color: var(--text-color);\n        margin-bottom: 1rem;\n    }\n\n    .quick-link-card p {\n        color: var(--text-muted);\n        line-height: 1.6;\n        margin-bottom: 2rem;\n    }\n\n    .card-btn {\n        display: inline-block;\n        padding: 12px 30px;\n        background: linear-gradient(90deg, var(--primary-color), var(--secondary-color));\n        color: var(--dark-bg);\n        text-decoration: none;\n        border-radius: 25px;\n        font-weight: 600;\n        transition: all 0.4s cubic-bezier(0.175, 0.885, 0.32, 1.275);\n        position: relative;\n        overflow: hidden;\n    }\n\n    .btn-text {\n        position: relative;\n        z-index: 2;\n        transition: all 0.3s ease;\n    }\n\n    .btn-ripple {\n        position: absolute;\n        top: 50%;\n        left: 50%;\n        width: 0;\n        height: 0;\n        background: rgba(255, 255, 255, 0.3);\n        border-radius: 50%;\n        transform: translate(-50%, -50%);\n        transition: all 0.6s ease;\n        z-index: 1;\n    }\n\n    .magnetic-btn:hover .btn-ripple {\n        width: 300px;\n        height: 300px;\n    }\n\n    .card-btn::before {\n        content: '';\n        position: absolute;\n        top: 0;\n        left: -100%;\n        width: 100%;\n        height: 100%;\n        background: linear-gradient(90deg, transparent, rgba(255, 255, 255, 0.3), transparent);\n        transition: 0.5s;\n        z-index: 1;\n    }\n\n    .card-btn:hover::before {\n        left: 100%;\n    }\n\n    .magnetic-btn:hover {\n        transform: translateY(-3px) scale(1.05);\n        box-shadow: 0 15px 30px rgba(0, 242, 254, 0.4);\n    }\n\n    .magnetic-btn:hover .btn-text {\n        transform: translateY(-1px);\n    }\n\n    \/* News Section *\/\n    .news-section {\n        padding: 100px 0;\n        background: var(--darker-bg);\n        position: relative;\n        z-index: 2;\n    }\n\n    .news-grid {\n        display: grid;\n        grid-template-columns: repeat(auto-fit, minmax(350px, 1fr));\n        gap: 2rem;\n        margin-top: 3rem;\n    }\n\n    .news-card {\n        background: rgba(255, 255, 255, 0.05);\n        border: 1px solid var(--border-color);\n        border-radius: 15px;\n        padding: 2rem;\n        transition: all 0.3s ease;\n        backdrop-filter: blur(10px);\n        -webkit-backdrop-filter: blur(10px);\n        position: relative;\n        overflow: hidden;\n        color: var(--text-color);\n    }\n\n    .news-card::before {\n        content: '';\n        position: absolute;\n        top: 0;\n        left: 0;\n        right: 0;\n        height: 3px;\n        background: linear-gradient(90deg, var(--primary-color), var(--secondary-color));\n        transform: scaleX(0);\n        transition: transform 0.3s ease;\n    }\n\n    .news-card:hover::before {\n        transform: scaleX(1);\n    }\n\n    .news-card:hover {\n        transform: translateY(-5px);\n        box-shadow: 0 15px 30px rgba(0, 242, 254, 0.1);\n        border-color: var(--primary-color);\n    }\n\n    .news-date {\n        color: var(--primary-color);\n        font-weight: 600;\n        font-size: 0.9rem;\n        margin-bottom: 1rem;\n        text-transform: uppercase;\n        letter-spacing: 1px;\n    }\n\n    .news-card h3 {\n        font-size: 1.3rem;\n        font-weight: 600;\n        color: var(--text-color);\n        margin-bottom: 1rem;\n        line-height: 1.4;\n    }\n\n    .news-card p {\n        color: var(--text-muted);\n        line-height: 1.6;\n        margin-bottom: 1.5rem;\n    }\n\n    .read-more {\n        color: var(--primary-color);\n        text-decoration: none;\n        font-weight: 600;\n        display: inline-flex;\n        align-items: center;\n        gap: 0.5rem;\n        transition: all 0.3s ease;\n    }\n\n    .read-more:hover {\n        color: var(--secondary-color);\n        transform: translateX(5px);\n    }\n\n    .read-more i {\n        transition: transform 0.3s ease;\n    }\n\n    .read-more:hover i {\n        transform: translateX(3px);\n    }\n\n    \/* Industry Partners Section *\/\n    .partners-section {\n        padding: 120px 0;\n        background: linear-gradient(180deg, var(--darker-bg) 0%, var(--dark-bg) 50%, var(--darker-bg) 100%);\n        position: relative;\n        z-index: 2;\n        overflow: hidden;\n    }\n\n    .partners-bg-effects {\n        position: absolute;\n        top: 0;\n        left: 0;\n        right: 0;\n        bottom: 0;\n        pointer-events: none;\n        overflow: hidden;\n    }\n\n    .partners-grid-lines {\n        position: absolute;\n        top: 0;\n        left: 0;\n        right: 0;\n        bottom: 0;\n        background-image: \n            linear-gradient(rgba(0, 242, 254, 0.03) 1px, transparent 1px),\n            linear-gradient(90deg, rgba(0, 242, 254, 0.03) 1px, transparent 1px);\n        background-size: 50px 50px;\n        animation: gridMove 20s linear infinite;\n    }\n\n    @keyframes gridMove {\n        0% { transform: translate(0, 0); }\n        100% { transform: translate(50px, 50px); }\n    }\n\n    .partners-glow {\n        position: absolute;\n        border-radius: 50%;\n        filter: blur(100px);\n        animation: partnerGlowPulse 8s ease-in-out infinite;\n    }\n\n    .partners-glow-1 {\n        width: 400px;\n        height: 400px;\n        background: radial-gradient(circle, rgba(0, 242, 254, 0.15), transparent 70%);\n        top: -100px;\n        left: 10%;\n        animation-delay: 0s;\n    }\n\n    .partners-glow-2 {\n        width: 350px;\n        height: 350px;\n        background: radial-gradient(circle, rgba(79, 172, 254, 0.15), transparent 70%);\n        bottom: -100px;\n        right: 10%;\n        animation-delay: -4s;\n    }\n\n    @keyframes partnerGlowPulse {\n        0%, 100% { opacity: 0.5; transform: scale(1); }\n        50% { opacity: 0.8; transform: scale(1.1); }\n    }\n\n    .partners-subtitle {\n        text-align: center;\n        color: var(--text-muted);\n        font-size: 1.15rem;\n        margin-top: -1.5rem;\n        margin-bottom: 3.5rem;\n        letter-spacing: 0.5px;\n    }\n\n    .partners-grid {\n        display: flex;\n        justify-content: center;\n        flex-wrap: wrap;\n        gap: 4rem;\n        margin-top: 2rem;\n        position: relative;\n    }\n\n    .partner-card {\n        background: rgba(10, 25, 47, 0.8);\n        border: 1px solid rgba(0, 242, 254, 0.1);\n        border-radius: 24px;\n        padding: 3rem 2.5rem;\n        text-align: center;\n        transition: all 0.5s cubic-bezier(0.175, 0.885, 0.32, 1.275);\n        backdrop-filter: blur(20px);\n        -webkit-backdrop-filter: blur(20px);\n        position: relative;\n        overflow: hidden;\n        width: 320px;\n    }\n\n    .partner-card.floating-card {\n        animation: partnerFloat 6s ease-in-out infinite;\n    }\n\n    .partner-card.floating-card:nth-child(2) {\n        animation-delay: -3s;\n    }\n\n    @keyframes partnerFloat {\n        0%, 100% { transform: translateY(0px); }\n        50% { transform: translateY(-10px); }\n    }\n\n    .partner-card-glow {\n        position: absolute;\n        top: -50%;\n        left: -50%;\n        width: 200%;\n        height: 200%;\n        background: radial-gradient(circle at center, rgba(0, 242, 254, 0.1) 0%, transparent 50%);\n        opacity: 0;\n        transition: opacity 0.5s ease;\n        pointer-events: none;\n    }\n\n    .partner-card:hover .partner-card-glow {\n        opacity: 1;\n    }\n\n    .partner-card-border {\n        position: absolute;\n        top: 0;\n        left: 0;\n        right: 0;\n        bottom: 0;\n        border-radius: 24px;\n        padding: 2px;\n        background: linear-gradient(135deg, transparent 0%, rgba(0, 242, 254, 0.3) 50%, transparent 100%);\n        -webkit-mask: linear-gradient(#fff 0 0) content-box, linear-gradient(#fff 0 0);\n        mask: linear-gradient(#fff 0 0) content-box, linear-gradient(#fff 0 0);\n        -webkit-mask-composite: xor;\n        mask-composite: exclude;\n        opacity: 0;\n        transition: opacity 0.5s ease;\n        pointer-events: none;\n    }\n\n    .partner-card:hover .partner-card-border {\n        opacity: 1;\n        animation: borderRotate 3s linear infinite;\n    }\n\n    @keyframes borderRotate {\n        0% { background: linear-gradient(0deg, transparent 0%, rgba(0, 242, 254, 0.5) 50%, transparent 100%); }\n        25% { background: linear-gradient(90deg, transparent 0%, rgba(0, 242, 254, 0.5) 50%, transparent 100%); }\n        50% { background: linear-gradient(180deg, transparent 0%, rgba(0, 242, 254, 0.5) 50%, transparent 100%); }\n        75% { background: linear-gradient(270deg, transparent 0%, rgba(0, 242, 254, 0.5) 50%, transparent 100%); }\n        100% { background: linear-gradient(360deg, transparent 0%, rgba(0, 242, 254, 0.5) 50%, transparent 100%); }\n    }\n\n    .partner-card:hover {\n        transform: translateY(-15px) scale(1.02);\n        box-shadow: \n            0 25px 50px rgba(0, 242, 254, 0.2),\n            0 0 100px rgba(0, 242, 254, 0.1),\n            inset 0 1px 0 rgba(255, 255, 255, 0.1);\n        border-color: rgba(0, 242, 254, 0.3);\n    }\n\n    .partner-card a {\n        text-decoration: none;\n        color: inherit;\n        display: block;\n    }\n\n    .partner-logo-wrapper {\n        position: relative;\n        width: 140px;\n        height: 140px;\n        margin: 0 auto 2rem;\n    }\n\n    .partner-logo-ring {\n        position: absolute;\n        top: -5px;\n        left: -5px;\n        right: -5px;\n        bottom: -5px;\n        border: 2px solid rgba(0, 242, 254, 0.2);\n        border-radius: 50%;\n        animation: ringPulse 3s ease-in-out infinite;\n    }\n\n    .partner-logo-ring-2 {\n        top: -12px;\n        left: -12px;\n        right: -12px;\n        bottom: -12px;\n        border-color: rgba(79, 172, 254, 0.1);\n        animation-delay: -1.5s;\n    }\n\n    @keyframes ringPulse {\n        0%, 100% { transform: scale(1); opacity: 0.5; }\n        50% { transform: scale(1.05); opacity: 1; }\n    }\n\n    .partner-logo {\n        width: 140px;\n        height: 140px;\n        display: flex;\n        align-items: center;\n        justify-content: center;\n        background: linear-gradient(135deg, rgba(255, 255, 255, 0.98) 0%, rgba(240, 240, 255, 0.95) 100%);\n        border-radius: 50%;\n        padding: 20px;\n        transition: all 0.5s cubic-bezier(0.175, 0.885, 0.32, 1.275);\n        box-shadow: \n            0 10px 30px rgba(0, 0, 0, 0.3),\n            inset 0 2px 10px rgba(255, 255, 255, 0.5);\n        position: relative;\n        z-index: 1;\n    }\n\n    .partner-logo img {\n        max-width: 85%;\n        max-height: 85%;\n        object-fit: contain;\n        transition: transform 0.5s ease;\n    }\n\n    .partner-card:hover .partner-logo {\n        transform: scale(1.1) rotate(5deg);\n        box-shadow: \n            0 20px 40px rgba(0, 242, 254, 0.3),\n            0 0 30px rgba(0, 242, 254, 0.2),\n            inset 0 2px 10px rgba(255, 255, 255, 0.5);\n    }\n\n    .partner-card:hover .partner-logo img {\n        transform: scale(1.05);\n    }\n\n    .partner-card:hover .partner-logo-ring {\n        border-color: rgba(0, 242, 254, 0.5);\n        animation: ringPulseActive 1s ease-in-out infinite;\n    }\n\n    @keyframes ringPulseActive {\n        0%, 100% { transform: scale(1); opacity: 0.8; }\n        50% { transform: scale(1.1); opacity: 1; }\n    }\n\n    .partner-info {\n        margin-bottom: 1rem;\n    }\n\n    .partner-info h3 {\n        font-size: 1.25rem;\n        font-weight: 700;\n        color: var(--text-color);\n        margin: 0 0 0.75rem 0;\n        line-height: 1.3;\n        transition: all 0.3s ease;\n    }\n\n    .partner-card:hover .partner-info h3 {\n        background: linear-gradient(90deg, var(--primary-color), var(--secondary-color));\n        -webkit-background-clip: text;\n        background-clip: text;\n        -webkit-text-fill-color: transparent;\n    }\n\n    .partner-tag {\n        display: inline-block;\n        padding: 6px 16px;\n        background: linear-gradient(135deg, rgba(0, 242, 254, 0.1) 0%, rgba(79, 172, 254, 0.1) 100%);\n        border: 1px solid rgba(0, 242, 254, 0.2);\n        border-radius: 20px;\n        font-size: 0.8rem;\n        font-weight: 600;\n        color: var(--primary-color);\n        text-transform: uppercase;\n        letter-spacing: 1px;\n        transition: all 0.3s ease;\n    }\n\n    .partner-card:hover .partner-tag {\n        background: linear-gradient(135deg, rgba(0, 242, 254, 0.2) 0%, rgba(79, 172, 254, 0.2) 100%);\n        border-color: rgba(0, 242, 254, 0.4);\n        box-shadow: 0 0 15px rgba(0, 242, 254, 0.2);\n    }\n\n    .partner-hover-effect {\n        position: absolute;\n        bottom: 0;\n        left: 0;\n        right: 0;\n        padding: 1rem;\n        background: linear-gradient(to top, rgba(0, 242, 254, 0.15) 0%, transparent 100%);\n        transform: translateY(100%);\n        transition: transform 0.4s cubic-bezier(0.175, 0.885, 0.32, 1.275);\n        border-radius: 0 0 24px 24px;\n    }\n\n    .partner-card:hover .partner-hover-effect {\n        transform: translateY(0);\n    }\n\n    .visit-text {\n        display: inline-flex;\n        align-items: center;\n        gap: 8px;\n        color: var(--primary-color);\n        font-weight: 600;\n        font-size: 0.9rem;\n    }\n\n    .visit-text i {\n        transition: transform 0.3s ease;\n    }\n\n    .partner-card:hover .visit-text i {\n        transform: translate(3px, -3px);\n    }\n\n    @media (max-width: 768px) {\n        .partners-section {\n            padding: 80px 0;\n        }\n        .partners-subtitle {\n            font-size: 1rem;\n            padding: 0 1rem;\n        }\n        .partners-grid {\n            gap: 2.5rem;\n        }\n        .partner-card {\n            width: 280px;\n            padding: 2.5rem 2rem;\n        }\n        .partner-logo-wrapper {\n            width: 120px;\n            height: 120px;\n        }\n        .partner-logo {\n            width: 120px;\n            height: 120px;\n            padding: 15px;\n        }\n        .partner-info h3 {\n            font-size: 1.1rem;\n        }\n    }\n\n    @media (max-width: 480px) {\n        .partner-card {\n            width: 100%;\n            max-width: 300px;\n        }\n    }\n\n    \/* CTA Section *\/\n    .cta-section {\n        padding: 100px 0;\n        background: var(--dark-bg);\n        position: relative;\n        overflow: hidden;\n        z-index: 2;\n    }\n\n    .cta-section::before {\n        content: '';\n        position: absolute;\n        top: 0;\n        left: 0;\n        right: 0;\n        bottom: 0;\n        background: \n            radial-gradient(circle at 20% 20%, rgba(0, 242, 254, 0.1) 0%, transparent 50%),\n            radial-gradient(circle at 80% 80%, rgba(79, 172, 254, 0.1) 0%, transparent 50%);\n        pointer-events: none;\n    }\n\n    .cta-content {\n        display: grid;\n        grid-template-columns: 2fr 1fr;\n        gap: 4rem;\n        align-items: center;\n        position: relative;\n        z-index: 1;\n    }\n\n    .cta-text h2 {\n        font-size: 2.5rem;\n        font-weight: 700;\n        color: var(--text-color);\n        margin-bottom: 1.5rem;\n        background: linear-gradient(90deg, var(--primary-color), var(--secondary-color));\n        -webkit-background-clip: text;\n        background-clip: text;\n        -webkit-text-fill-color: transparent;\n    }\n\n    .cta-text p {\n        font-size: 1.2rem;\n        color: var(--text-muted);\n        line-height: 1.6;\n        margin-bottom: 0;\n    }\n\n    .cta-btn {\n        display: inline-block;\n        padding: 15px 40px;\n        background: var(--text-color);\n        color: var(--dark-bg);\n        text-decoration: none;\n        border-radius: 25px;\n        font-weight: 600;\n        font-size: 1.1rem;\n        transition: all 0.3s ease;\n        position: relative;\n        overflow: hidden;\n    }\n\n    .cta-btn::before {\n        content: '';\n        position: absolute;\n        top: 0;\n        left: -100%;\n        width: 100%;\n        height: 100%;\n        background: linear-gradient(90deg, transparent, rgba(255, 255, 255, 0.3), transparent);\n        transition: 0.5s;\n    }\n\n    .cta-btn:hover::before {\n        left: 100%;\n    }\n\n    .cta-btn:hover {\n        transform: translateY(-3px);\n        box-shadow: 0 15px 30px rgba(204, 214, 246, 0.3);\n    }\n\n    \/* Responsive Design *\/\n    @media (max-width: 768px) {\n        .container {\n            padding: 0 1.5rem;\n        }\n\n        .section-title {\n            font-size: 2rem;\n        }\n\n        .quick-links-section,\n        .news-section,\n        .cta-section {\n            padding: 60px 0;\n        }\n\n        .quick-links-grid,\n        .news-grid {\n            grid-template-columns: 1fr;\n        }\n\n        .cta-content {\n            grid-template-columns: 1fr;\n            gap: 2rem;\n            text-align: center;\n        }\n\n        .cta-text h2 {\n            font-size: 2rem;\n        }\n\n        .cta-text p {\n            font-size: 1.1rem;\n        }\n    }\n\n    @media (max-width: 480px) {\n        .container {\n            padding: 0 1rem;\n        }\n\n        .section-title {\n            font-size: 1.8rem;\n        }\n\n        .quick-link-card,\n        .news-card {\n            padding: 1.5rem;\n        }\n\n        .cta-text h2 {\n            font-size: 1.8rem;\n        }\n    }\n\n    \/* Loading State *\/\n    .loading-container {\n        display: flex;\n        justify-content: center;\n        align-items: center;\n        min-height: 200px;\n        flex-direction: column;\n        gap: 2rem;\n        position: relative;\n    }\n\n    .loading-content {\n        display: flex;\n        flex-direction: column;\n        align-items: center;\n        gap: 2rem;\n        z-index: 2;\n    }\n\n    .loading-spinner {\n        width: 60px;\n        height: 60px;\n        position: relative;\n    }\n\n    .spinner-ring {\n        position: absolute;\n        width: 100%;\n        height: 100%;\n        border: 3px solid transparent;\n        border-radius: 50%;\n        animation: spinRing 2s linear infinite;\n    }\n\n    .spinner-ring:nth-child(1) {\n        border-top-color: var(--primary-color);\n        animation-delay: 0s;\n    }\n\n    .spinner-ring:nth-child(2) {\n        border-right-color: var(--secondary-color);\n        animation-delay: -0.5s;\n        width: 80%;\n        height: 80%;\n        top: 10%;\n        left: 10%;\n    }\n\n    .spinner-ring:nth-child(3) {\n        border-bottom-color: #64ffda;\n        animation-delay: -1s;\n        width: 60%;\n        height: 60%;\n        top: 20%;\n        left: 20%;\n    }\n\n    @keyframes spinRing {\n        0% { transform: rotate(0deg); }\n        100% { transform: rotate(360deg); }\n    }\n\n    .loading-text {\n        color: var(--text-muted);\n        font-size: 1.1rem;\n    }\n\n    .loading-dots {\n        display: inline-flex;\n        align-items: center;\n        gap: 2px;\n    }\n\n    .loading-dots .dot {\n        animation: dotPulse 1.4s ease-in-out infinite both;\n    }\n\n    .loading-dots .dot:nth-child(2) {\n        animation-delay: 0.2s;\n    }\n\n    .loading-dots .dot:nth-child(3) {\n        animation-delay: 0.4s;\n    }\n\n    .loading-dots .dot:nth-child(4) {\n        animation-delay: 0.6s;\n    }\n\n    @keyframes dotPulse {\n        0%, 80%, 100% {\n            opacity: 0.3;\n            transform: scale(1);\n        }\n        40% {\n            opacity: 1;\n            transform: scale(1.2);\n        }\n    }\n\n    .loading-particles {\n        position: absolute;\n        top: 0;\n        left: 0;\n        width: 100%;\n        height: 100%;\n        pointer-events: none;\n    }\n\n    .loading-particles::before,\n    .loading-particles::after {\n        content: '';\n        position: absolute;\n        width: 4px;\n        height: 4px;\n        background: var(--primary-color);\n        border-radius: 50%;\n        animation: floatParticle 3s ease-in-out infinite;\n    }\n\n    .loading-particles::before {\n        top: 20%;\n        left: 20%;\n        animation-delay: 0s;\n    }\n\n    .loading-particles::after {\n        top: 70%;\n        right: 20%;\n        animation-delay: -1.5s;\n    }\n\n    @keyframes floatParticle {\n        0%, 100% {\n            transform: translateY(0px) scale(1);\n            opacity: 0.5;\n        }\n        50% {\n            transform: translateY(-20px) scale(1.2);\n            opacity: 1;\n        }\n    }\n\n    \/* Error State *\/\n    .error-container {\n        text-align: center;\n        padding: 4rem 2rem;\n        background: rgba(220, 53, 69, 0.1);\n        border: 1px solid rgba(220, 53, 69, 0.3);\n        border-radius: 15px;\n        margin: 2rem 0;\n    }\n\n    .error-icon {\n        font-size: 3rem;\n        color: var(--error-color);\n        margin-bottom: 1rem;\n    }\n\n    .error-title {\n        font-size: 1.5rem;\n        color: var(--error-color);\n        margin-bottom: 1rem;\n    }\n\n    .error-message {\n        color: var(--text-muted);\n        margin-bottom: 2rem;\n    }\n\n    .retry-btn {\n        background: linear-gradient(135deg, var(--primary-color), var(--secondary-color));\n        color: var(--dark-bg);\n        border: none;\n        padding: 12px 30px;\n        border-radius: 25px;\n        font-weight: 600;\n        cursor: pointer;\n        transition: all 0.3s ease;\n        text-decoration: none;\n        display: inline-block;\n    }\n\n    .retry-btn:hover {\n        transform: translateY(-2px);\n        box-shadow: 0 10px 20px rgba(0, 242, 254, 0.3);\n    }\n<\/style>\n<script src=\"https:\/\/unpkg.com\/aos@next\/dist\/aos.js\"><\/script>\n<script>\n    \/\/ Initialize AOS\n    AOS.init({\n        duration: 800,\n        once: true,\n        offset: 100\n    });\n\n    \/\/ Home page news loading functionality\n    async function loadHomeNews() {\n        const loading = document.getElementById('news-loading');\n        const error = document.getElementById('news-error');\n        const newsGrid = document.getElementById('home-news-grid');\n\n        \/\/ Show loading, hide others\n        loading.style.display = 'flex';\n        error.style.display = 'none';\n        newsGrid.style.display = 'none';\n\n        try {\n            \/\/ Fetch news from WordPress REST API (limit to 3 for home page)\n            const response = await fetch('https:\/\/mse.ucf.edu\/fms\/wp-json\/wp\/v2\/posts?per_page=3&_embed');\n            \n            if (!response.ok) {\n                throw new Error('Failed to fetch news');\n            }\n\n            const posts = await response.json();\n\n            if (posts.length === 0) {\n                throw new Error('No news articles found');\n            }\n\n            \/\/ Hide loading\n            loading.style.display = 'none';\n\n            \/\/ Display news\n            displayHomeNewsGrid(posts);\n            newsGrid.style.display = 'grid';\n\n        } catch (err) {\n            console.error('Error loading news:', err);\n            loading.style.display = 'none';\n            error.style.display = 'block';\n        }\n    }\n\n    function displayHomeNewsGrid(posts) {\n        const newsGrid = document.getElementById('home-news-grid');\n        newsGrid.innerHTML = '';\n\n        posts.forEach((post, index) => {\n            const newsCard = document.createElement('div');\n            newsCard.className = 'news-card';\n            newsCard.setAttribute('data-aos', 'fade-up');\n            newsCard.setAttribute('data-aos-delay', `${(index + 1) * 100}`);\n\n            \/\/ Use ACF subtitle field if available, otherwise fallback to excerpt\n            let description = '';\n            if (post.acf && post.acf.subtitle) {\n                description = post.acf.subtitle;\n            } else {\n                description = stripHtml(post.excerpt.rendered);\n            }\n\n            newsCard.innerHTML = `\n                <div class=\"news-date\">${formatDate(post.date)}<\/div>\n                <h3>${post.title.rendered}<\/h3>\n                <p>${description}<\/p>\n                <a href=\"${post.link}\" class=\"read-more\" target=\"_blank\">\n                    Read More <i class=\"fas fa-arrow-right\"><\/i>\n                <\/a>\n            `;\n\n            newsGrid.appendChild(newsCard);\n        });\n\n        \/\/ Reinitialize AOS for new elements\n        AOS.refresh();\n    }\n\n    function formatDate(dateString) {\n        const date = new Date(dateString);\n        return date.toLocaleDateString('en-US', {\n            year: 'numeric',\n            month: 'long',\n            day: 'numeric'\n        });\n    }\n\n    function stripHtml(html) {\n        const tmp = document.createElement('div');\n        tmp.innerHTML = html;\n        return tmp.textContent || tmp.innerText || '';\n    }\n\n    \/\/ Enhanced dynamic interactions\n    function initHomeAnimations() {\n        initParticleSystem();\n        initMagneticButtons();\n        initCardParticles();\n        initScrollAnimations();\n    }\n\n    \/\/ Particle system for background\n    function initParticleSystem() {\n        const canvas = document.getElementById('homeParticleCanvas');\n        if (!canvas) return;\n        \n        const ctx = canvas.getContext('2d');\n        let particles = [];\n        let mouse = { x: 0, y: 0 };\n\n        function resizeCanvas() {\n            canvas.width = canvas.offsetWidth;\n            canvas.height = canvas.offsetHeight;\n        }\n\n        class Particle {\n            constructor() {\n                this.reset();\n                this.hue = Math.random() * 60 + 180;\n            }\n\n            reset() {\n                this.x = Math.random() * canvas.width;\n                this.y = Math.random() * canvas.height;\n                this.size = Math.random() * 2 + 0.5;\n                this.speedX = Math.random() * 0.3 - 0.15;\n                this.speedY = Math.random() * 0.3 - 0.15;\n                this.opacity = Math.random() * 0.3 + 0.1;\n            }\n\n            update() {\n                this.x += this.speedX;\n                this.y += this.speedY;\n\n                if (this.x < 0 || this.x > canvas.width) this.speedX *= -1;\n                if (this.y < 0 || this.y > canvas.height) this.speedY *= -1;\n            }\n\n            draw() {\n                ctx.beginPath();\n                ctx.arc(this.x, this.y, this.size, 0, Math.PI * 2);\n                ctx.fillStyle = `hsla(${this.hue}, 70%, 60%, ${this.opacity})`;\n                ctx.fill();\n            }\n        }\n\n        function createParticles() {\n            const particleCount = Math.min(30, Math.floor(canvas.width * canvas.height \/ 25000));\n            particles = [];\n            for (let i = 0; i < particleCount; i++) {\n                particles.push(new Particle());\n            }\n        }\n\n        function animate() {\n            ctx.clearRect(0, 0, canvas.width, canvas.height);\n            particles.forEach(particle => {\n                particle.update();\n                particle.draw();\n            });\n            requestAnimationFrame(animate);\n        }\n\n        resizeCanvas();\n        createParticles();\n        animate();\n\n        window.addEventListener('resize', () => {\n            resizeCanvas();\n            createParticles();\n        });\n    }\n\n    \/\/ Magnetic button effects\n    function initMagneticButtons() {\n        const buttons = document.querySelectorAll('.magnetic-btn');\n        \n        buttons.forEach(button => {\n            button.addEventListener('mousemove', (e) => {\n                const rect = button.getBoundingClientRect();\n                const x = e.clientX - rect.left - rect.width \/ 2;\n                const y = e.clientY - rect.top - rect.height \/ 2;\n                \n                button.style.transform = `translate(${x * 0.1}px, ${y * 0.1}px) scale(1.05)`;\n            });\n\n            button.addEventListener('mouseleave', () => {\n                button.style.transform = 'translate(0px, 0px) scale(1)';\n            });\n        });\n    }\n\n    \/\/ Card particle effects\n    function initCardParticles() {\n        const cards = document.querySelectorAll('.quick-link-card');\n        \n        cards.forEach(card => {\n            const icon = card.querySelector('.card-icon');\n            const particles = card.querySelector('.icon-particles');\n            \n            if (!icon || !particles) return;\n\n            card.addEventListener('mouseenter', () => {\n                createIconParticles(particles);\n            });\n        });\n\n        function createIconParticles(container) {\n            for (let i = 0; i < 6; i++) {\n                const particle = document.createElement('div');\n                particle.style.cssText = `\n                    position: absolute;\n                    width: 3px;\n                    height: 3px;\n                    background: var(--primary-color);\n                    border-radius: 50%;\n                    pointer-events: none;\n                    animation: particleFloat 1s ease-out forwards;\n                `;\n                \n                const angle = (Math.PI * 2 * Math.random());\n                const distance = 40 + Math.random() * 20;\n                const x = Math.cos(angle) * distance;\n                const y = Math.sin(angle) * distance;\n                \n                particle.style.left = '50%';\n                particle.style.top = '50%';\n                particle.style.transform = `translate(${x}px, ${y}px)`;\n                \n                container.appendChild(particle);\n                \n                setTimeout(() => {\n                    if (particle.parentNode) {\n                        particle.parentNode.removeChild(particle);\n                    }\n                }, 1000);\n            }\n        }\n\n        \/\/ Add particle animation CSS\n        if (!document.querySelector('#particle-animation-styles')) {\n            const style = document.createElement('style');\n            style.id = 'particle-animation-styles';\n            style.textContent = `\n                @keyframes particleFloat {\n                    0% {\n                        opacity: 1;\n                        transform: translate(var(--x, 0), var(--y, 0)) scale(1);\n                    }\n                    100% {\n                        opacity: 0;\n                        transform: translate(var(--x, 0), var(--y, 0)) scale(0);\n                    }\n                }\n            `;\n            document.head.appendChild(style);\n        }\n    }\n\n    \/\/ Scroll-triggered animations\n    function initScrollAnimations() {\n        const observerOptions = {\n            threshold: 0.1,\n            rootMargin: '0px 0px -50px 0px'\n        };\n\n        const observer = new IntersectionObserver((entries) => {\n            entries.forEach(entry => {\n                if (entry.isIntersecting) {\n                    entry.target.classList.add('animate-in');\n                }\n            });\n        }, observerOptions);\n\n        \/\/ Observe all animated elements\n        document.querySelectorAll('[data-aos]').forEach(el => {\n            observer.observe(el);\n        });\n    }\n\n    \/\/ Load news on page load\n    document.addEventListener('DOMContentLoaded', () => {\n        initHomeAnimations();\n    });\n<\/script>\n","protected":false},"excerpt":{"rendered":"<p>Explore Our Lab Research Discover our innovative research areas and ongoing projects in materials science and engineering. Learn More Publications Browse our latest publications and research findings in leading scientific journals. View Publications Team Meet our talented researchers, students, and collaborators driving innovation forward. Meet the Team Sponsors and Partners Proudly supported by leading institutions [&hellip;]<\/p>\n","protected":false},"author":3,"featured_media":0,"parent":0,"menu_order":0,"comment_status":"closed","ping_status":"closed","template":"blank","meta":{"_acf_changed":false,"_seopress_robots_primary_cat":"","_seopress_titles_title":"","_seopress_titles_desc":"","_seopress_robots_index":"","_seopress_analysis_target_kw":"","footnotes":""},"class_list":["post-262","page","type-page","status-publish","hentry"],"acf":[],"_links":{"self":[{"href":"https:\/\/mse.ucf.edu\/fms\/wp-json\/wp\/v2\/pages\/262","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/mse.ucf.edu\/fms\/wp-json\/wp\/v2\/pages"}],"about":[{"href":"https:\/\/mse.ucf.edu\/fms\/wp-json\/wp\/v2\/types\/page"}],"author":[{"embeddable":true,"href":"https:\/\/mse.ucf.edu\/fms\/wp-json\/wp\/v2\/users\/3"}],"replies":[{"embeddable":true,"href":"https:\/\/mse.ucf.edu\/fms\/wp-json\/wp\/v2\/comments?post=262"}],"version-history":[{"count":42,"href":"https:\/\/mse.ucf.edu\/fms\/wp-json\/wp\/v2\/pages\/262\/revisions"}],"predecessor-version":[{"id":965,"href":"https:\/\/mse.ucf.edu\/fms\/wp-json\/wp\/v2\/pages\/262\/revisions\/965"}],"wp:attachment":[{"href":"https:\/\/mse.ucf.edu\/fms\/wp-json\/wp\/v2\/media?parent=262"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}