/* GSAP Text Animation Styles */

/* Word, Character, and Line wrappers */
.word,
.char {
    display: inline-block;
    position: relative;
}

.line {
    display: block;
    overflow: hidden;
}

/* Prevent layout shift during animation */
.word,
.char,
.line {
    will-change: transform, opacity;
}

/* Smooth text rendering */
.word,
.char {
    backface-visibility: hidden;
    -webkit-font-smoothing: antialiased;
}

/* Enhanced text animations */
.home-content .word,
.home-content .char {
    transform-origin: center;
}

/* Service card hover effects */
.service-card {
    will-change: transform;
    backface-visibility: hidden;
}

.service-card img {
    will-change: transform;
    transition: transform 0.3s ease;
}

/* Team member animations */
.team-member {
    will-change: transform;
    backface-visibility: hidden;
}

.team-member img {
    will-change: transform;
    transition: transform 0.4s ease;
}

/* Scroll to top button */
.scroll-top {
    will-change: transform, opacity;
    backface-visibility: hidden;
}

.scroll-top.visible {
    opacity: 1;
    pointer-events: all;
}

/* Smooth scrolling container */
html {
    scroll-behavior: auto; /* Let Lenis handle it */
}

body {
    overflow-x: hidden;
}

/* Parallax image containers */
.section-image {
    overflow: hidden;
    will-change: transform;
}

.section-image img {
    will-change: transform;
    display: block;
}

/* Navigation animations */
nav {
    will-change: transform, opacity;
    backface-visibility: hidden;
}

nav a {
    position: relative;
    overflow: hidden;
}

/* Enhanced marquee text */
.text-wrapper .char {
    display: inline-block;
    transform-origin: center;
}

/* Footer animations */
.footer-section {
    will-change: transform, opacity;
}

/* Smooth transitions for interactive elements */
a,
button {
    transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
}

/* Performance optimizations */
* {
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
}

/* Prevent text selection during animations (optional) */
.animating {
    user-select: none;
    -webkit-user-select: none;
    -moz-user-select: none;
    -ms-user-select: none;
}

/* Enhanced service card interactions */
.service-card {
    position: relative;
    overflow: hidden;
}

.service-card::before {
    content: '';
    position: absolute;
    top: 0;
    left: -100%;
    width: 100%;
    height: 100%;
    background: linear-gradient(90deg, transparent, rgba(255, 255, 255, 0.1), transparent);
    transition: left 0.5s;
}

.service-card:hover::before {
    left: 100%;
}

/* Enhanced team member overlay */
.team-member {
    position: relative;
    overflow: hidden;
}

.member-overlay {
    will-change: transform, opacity;
}

/* Smooth page transitions */
body {
    opacity: 1;
    transition: opacity 0.3s ease;
}

/* Loading state (if needed) */
body.loading {
    opacity: 0;
}

/* Enhanced text gradients for animated text */
.home-content h1 .word,
.home-content .precode .char {
    background-clip: text;
    -webkit-background-clip: text;
}

/* Improved scrollbar for Lenis smooth scrolling */
html {
    overflow-x: hidden;
}

/* Better focus states for accessibility */
a:focus-visible,
button:focus-visible {
    outline: 2px solid rgba(167, 21, 173, 0.5);
    outline-offset: 2px;
    border-radius: 4px;
}

/* Override old animation classes to prevent conflicts */
.fade-up,
.fade-down,
.fade-left,
.fade-right {
    /* GSAP will handle these, so we ensure they don't stay hidden */
    opacity: 1 !important;
}

/* Ensure animated elements stay visible after GSAP animations */
.word,
.char {
    opacity: 1 !important;
}

/* Prevent old scroll-animations from interfering */
.fade-up.active,
.fade-down.active,
.fade-left.active,
.fade-right.active {
    opacity: 1 !important;
}

/* Ensure service cards and team members stay visible */
.service-card,
.team-member {
    opacity: 1 !important;
}

/* Section content visibility */
.section-content,
.section-image,
.team-header,
.footer-section {
    opacity: 1 !important;
}

/* Ensure navigation is always visible */
nav {
    opacity: 1 !important;
    visibility: visible !important;
    z-index: 1000 !important;
    display: flex !important;
}

nav a,
nav .logo,
nav .hamburger,
nav .nav-links,
nav .nav-links ul,
nav .nav-links li,
nav .nav-links a {
    opacity: 1 !important;
    visibility: visible !important;
}

/* Ensure nav links container is visible */
.nav-links {
    opacity: 1 !important;
    visibility: visible !important;
}

.nav-links ul {
    opacity: 1 !important;
    visibility: visible !important;
}