/* GSAP Animation Styles for Nyoman Bali Tour */

/* Smooth scrolling */
html {
    scroll-behavior: smooth;
}

/* Force hardware acceleration for smoother animations */
body {
    transform: translateZ(0);
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
}

/* Prevent layout shift during animations */
* {
    box-sizing: border-box;
}

/* Smooth transitions for better UX */
* {
    -webkit-tap-highlight-color: transparent;
}

/* Optimize rendering */
.hero-image,
.parallax,
.hero-gradient {
    image-rendering: -webkit-optimize-contrast;
    image-rendering: crisp-edges;
}

/* Header scroll effect - handled by GSAP */

/* Button hover effects */
.btn-primary,
.btn-secondary {
    transition: all 0.2s ease;
    cursor: pointer;
}

.btn-primary:hover,
.btn-secondary:hover {
    transform: translateY(-2px);
}

/* Hero section animations */
.hero-title {
    opacity: 0;
    transform: translateY(100px);
}

.hero-subtitle {
    opacity: 0;
    transform: translateY(50px);
}

.hero-buttons {
    opacity: 0;
    transform: translateY(30px);
}

.hero-image {
    opacity: 0;
    transform: translateY(100px) scale(0.8);
}

.hero-gradient {
    opacity: 0;
    transform: scale(0.8);
}

/* Header animations - REMOVED opacity: 0 to ensure visibility even if GSAP fails */
.header-logo {
    opacity: 1;
    /* GSAP will animate from opacity: 0 to opacity: 1 */
}

.nav-item {
    opacity: 1;
    /* GSAP will animate from opacity: 0 to opacity: 1 */
}

.mobile-menu-btn {
    opacity: 1;
    /* GSAP will animate from opacity: 0 to opacity: 1 */
}

/* Scroll-triggered animations */
.fade-in {
    opacity: 0;
    transform: translateY(50px);
}

.slide-left {
    opacity: 0;
    transform: translateX(-100px);
}

.slide-right {
    opacity: 0;
    transform: translateX(100px);
}

.scale-in {
    opacity: 0;
    transform: scale(0.8);
}

/* Parallax elements */
.parallax {
    will-change: transform;
}

/* Mobile menu animations */
#mobile-menu {
    transform: translateX(100%);
    opacity: 0;
}

/* Loading states */
.loading {
    opacity: 0;
    transform: translateY(20px);
}

/* Stagger animations */
.stagger-item {
    opacity: 0;
    transform: translateY(30px);
}

/* Text reveal animations */
.text-reveal {
    overflow: hidden;
}

.text-reveal .line {
    transform: translateY(100%);
}

/* Image hover effects */
.hero-image:hover {
    transform: scale(1.05);
    transition: transform 0.3s ease;
}

/* Smooth transitions for specific elements only - GSAP handles most animations */
.btn-primary,
.btn-secondary,
.hero-image:hover {
    transition: transform 0.3s ease, opacity 0.3s ease;
}

/* Performance optimizations */
.hero-image,
.parallax,
.hero-gradient,
.hero-title,
.hero-subtitle,
.hero-buttons,
.header-logo,
.nav-item,
.mobile-menu-btn {
    will-change: transform, opacity;
    transform: translateZ(0);
    backface-visibility: hidden;
    perspective: 1000px;
}

/* Mobile optimizations */
@media (max-width: 768px) {
    .hero-title,
    .hero-subtitle,
    .hero-buttons {
        transform: translateZ(0);
    }

    .hero-image {
        transform: translateZ(0);
        will-change: auto;
    }
}

/* Support Features Section Animations */
.support-features-title {
    opacity: 0;
    transform: translateY(50px);
}

.feature-card {
    opacity: 0;
    transform: translateY(60px) scale(0.9);
    transition: all 0.3s ease;
    cursor: pointer;
}

.feature-card:hover {
    transform: translateY(-5px) scale(1.02);
}

.feature-icon {
    opacity: 0;
    transform: scale(0.8);
    transition: all 0.3s ease;
}

.feature-card:hover .feature-icon {
    transform: scale(1.05);
}

.feature-icon img {
    transition: all 0.3s ease;
}

.feature-card:hover .feature-icon img {
    transform: scale(1.1);
}

/* Auth Page Specific Animations */
.auth-bg-shape {
    will-change: transform;
    transform: translateZ(0);
}

.auth-particle {
    will-change: transform;
    transform: translateZ(0);
}

.auth-logo,
.auth-mobile-logo,
.auth-hero-title,
.auth-hero-subtitle,
.auth-main-image,
.auth-features,
.auth-form-container {
    opacity: 0;
    transform: translateY(30px);
}

.auth-bg-image {
    transition: opacity 1s ease-in-out;
}

.auth-feature-badge {
    transition: all 0.2s ease;
}

.auth-feature-badge:hover {
    transform: scale(1.1) translateY(-2px);
}

/* Login Form Animations */
.login-form-card {
    opacity: 0;
    transform: scale(0.9) translateY(30px);
}

.login-icon-container,
.login-title,
.login-subtitle {
    opacity: 0;
    transform: translateY(20px);
}

.login-field-group {
    opacity: 0;
    transform: translateY(30px);
}

.login-remember,
.login-button {
    opacity: 0;
    transform: translateY(20px);
}

.login-register-section,
.login-benefits {
    opacity: 0;
    transform: translateY(30px);
}

.login-footer {
    opacity: 0;
    transform: translateY(20px);
}

.login-input {
    transition: all 0.3s ease;
}

.login-input:focus {
    transform: scale(1.02);
}

.login-button {
    transition: all 0.3s ease;
}

.login-button:hover {
    transform: scale(1.05);
}

.login-benefit-item {
    transition: all 0.3s ease;
}

.login-benefit-item:hover {
    transform: scale(1.05) translateY(-5px);
}

.login-benefit-icon {
    transition: all 0.3s ease;
}

.login-benefit-item:hover .login-benefit-icon {
    transform: rotate(5deg) scale(1.1);
}

.login-register-link {
    transition: all 0.2s ease;
}

.login-register-link:hover {
    transform: scale(1.02) translateY(-2px);
}

.login-error {
    opacity: 0;
    transform: scale(0.8) translateY(-10px);
}

/* Performance optimizations for auth elements */
.auth-bg-shape,
.auth-particle,
.auth-logo,
.auth-mobile-logo,
.auth-hero-title,
.auth-hero-subtitle,
.auth-main-image,
.auth-features,
.auth-form-container,
.login-form-card,
.login-icon-container,
.login-title,
.login-subtitle,
.login-field-group,
.login-remember,
.login-button,
.login-register-section,
.login-benefits,
.login-footer {
    will-change: transform, opacity;
    transform: translateZ(0);
    backface-visibility: hidden;
    perspective: 1000px;
}

/* Mobile optimizations for auth */
@media (max-width: 768px) {
    .auth-hero-side {
        display: none;
    }

    .auth-form-side {
        padding: 1rem;
    }

    .login-form-card {
        padding: 1.5rem;
    }

    .auth-mobile-logo {
        margin-bottom: 2rem;
    }

    .login-benefits-grid {
        grid-template-columns: 1fr;
        gap: 1rem;
    }

    .login-benefit-item {
        padding: 1rem;
    }
}

/* Reduced motion support */
@media (prefers-reduced-motion: reduce) {
    .hero-title,
    .hero-subtitle,
    .hero-buttons,
    .hero-image,
    .hero-gradient,
    .header-logo,
    .nav-item,
    .mobile-menu-btn,
    .fade-in,
    .slide-left,
    .slide-right,
    .scale-in,
    .support-features-title,
    .feature-card,
    .feature-icon,
    .auth-logo,
    .auth-mobile-logo,
    .auth-hero-title,
    .auth-hero-subtitle,
    .auth-main-image,
    .auth-features,
    .auth-form-container,
    .login-form-card,
    .login-icon-container,
    .login-title,
    .login-subtitle,
    .login-field-group,
    .login-remember,
    .login-button,
    .login-register-section,
    .login-benefits,
    .login-footer {
        opacity: 1 !important;
        transform: none !important;
    }

    .hero-image:hover,
    .feature-card:hover,
    .feature-card:hover .feature-icon,
    .auth-feature-badge:hover,
    .login-button:hover,
    .login-benefit-item:hover,
    .login-register-link:hover {
        transform: none !important;
    }
}