@import 'tailwindcss';

@source '../../vendor/laravel/framework/src/Illuminate/Pagination/resources/views/*.blade.php';
@source '../../storage/framework/views/*.php';
@source '../**/*.blade.php';
@source '../**/*.js';

@theme {
    --font-sans: 'Instrument Sans', ui-sans-serif, system-ui, sans-serif, 'Apple Color Emoji', 'Segoe UI Emoji',
        'Segoe UI Symbol', 'Noto Color Emoji';
    
    /* Comprehensive Brand Color System */
    /* Primary Brand Colors */
    --color-brand-blue: #0072bc;
    --color-brand-blue-50: #eff8ff;
    --color-brand-blue-100: #dbeafe;
    --color-brand-blue-200: #bfdbfe;
    --color-brand-blue-300: #93c5fd;
    --color-brand-blue-400: #60a5fa;
    --color-brand-blue-500: #0072bc;
    --color-brand-blue-600: #0066a8;
    --color-brand-blue-700: #005a94;
    --color-brand-blue-800: #004e80;
    --color-brand-blue-900: #00426c;
    --color-brand-blue-950: #003658;
    
    --color-brand-orange: #f39c12;
    --color-brand-orange-50: #fffbeb;
    --color-brand-orange-100: #fef3c7;
    --color-brand-orange-200: #fde68a;
    --color-brand-orange-300: #fcd34d;
    --color-brand-orange-400: #fbbf24;
    --color-brand-orange-500: #f39c12;
    --color-brand-orange-600: #d97706;
    --color-brand-orange-700: #b45309;
    --color-brand-orange-800: #92400e;
    --color-brand-orange-900: #78350f;
    --color-brand-orange-950: #451a03;
    
    /* Secondary Colors for Variety */
    --color-brand-gray: #64748b;
    --color-brand-gray-50: #f8fafc;
    --color-brand-gray-100: #f1f5f9;
    --color-brand-gray-200: #e2e8f0;
    --color-brand-gray-300: #cbd5e1;
    --color-brand-gray-400: #94a3b8;
    --color-brand-gray-500: #64748b;
    --color-brand-gray-600: #475569;
    --color-brand-gray-700: #334155;
    --color-brand-gray-800: #1e293b;
    --color-brand-gray-900: #0f172a;
    
    /* Success, Warning, Error Colors aligned with brand */
    --color-success: #10b981;
    --color-warning: #f39c12;
    --color-error: #ef4444;
    --color-info: #0072bc;
}

/* Enhanced Brand Utility Classes */
.brand-gradient {
    background-image: linear-gradient(135deg, var(--color-brand-blue), var(--color-brand-orange));
}

.brand-gradient-reverse {
    background-image: linear-gradient(135deg, var(--color-brand-orange), var(--color-brand-blue));
}

.brand-gradient-subtle {
    background-image: linear-gradient(135deg, var(--color-brand-blue-100), var(--color-brand-orange-100));
}

/* Text Colors */
.text-brand-blue { color: var(--color-brand-blue); }
.text-brand-blue-light { color: var(--color-brand-blue-400); }
.text-brand-blue-dark { color: var(--color-brand-blue-700); }
.text-brand-orange { color: var(--color-brand-orange); }
.text-brand-orange-light { color: var(--color-brand-orange-400); }
.text-brand-orange-dark { color: var(--color-brand-orange-700); }
.text-brand-gray { color: var(--color-brand-gray); }

/* Background Colors */
.bg-brand-blue { background-color: var(--color-brand-blue); }
.bg-brand-blue-50 { background-color: var(--color-brand-blue-50); }
.bg-brand-blue-100 { background-color: var(--color-brand-blue-100); }
.bg-brand-blue-light { background-color: var(--color-brand-blue-400); }
.bg-brand-blue-dark { background-color: var(--color-brand-blue-700); }
.bg-brand-orange { background-color: var(--color-brand-orange); }
.bg-brand-orange-50 { background-color: var(--color-brand-orange-50); }
.bg-brand-orange-100 { background-color: var(--color-brand-orange-100); }
.bg-brand-orange-light { background-color: var(--color-brand-orange-400); }
.bg-brand-orange-dark { background-color: var(--color-brand-orange-700); }

/* Border Colors */
.border-brand-blue { border-color: var(--color-brand-blue); }
.border-brand-orange { border-color: var(--color-brand-orange); }
.border-brand-blue-light { border-color: var(--color-brand-blue-200); }
.border-brand-orange-light { border-color: var(--color-brand-orange-200); }

/* Enhanced Component Styles */
.btn-primary {
    @apply inline-flex items-center justify-center px-6 py-3 bg-brand-blue-500 text-white font-semibold rounded-xl shadow-lg hover:bg-brand-blue-700 hover:shadow-xl transform hover:-translate-y-0.5 transition-all duration-300;
}

.btn-secondary {
    @apply inline-flex items-center justify-center px-6 py-3 bg-brand-orange-500 text-white font-semibold rounded-xl shadow-lg hover:bg-brand-orange-700 hover:shadow-xl transform hover:-translate-y-0.5 transition-all duration-300;
}

.btn-outline {
    @apply inline-flex items-center justify-center px-6 py-3 border-2 border-brand-blue-500 text-brand-blue-500 font-semibold rounded-xl hover:bg-brand-blue-500 hover:text-white transform hover:-translate-y-0.5 transition-all duration-300;
}

.card-brand {
    @apply bg-white rounded-2xl shadow-lg border border-brand-blue-100 hover:shadow-xl hover:border-brand-blue-200 transition-all duration-300;
}

.card-brand-gradient {
    @apply bg-gradient-to-br from-brand-blue-50 to-brand-orange-50 rounded-2xl shadow-lg border border-white/50 hover:shadow-xl transition-all duration-300;
}

/* Typography Enhancements */
.heading-primary {
    @apply text-4xl md:text-5xl lg:text-6xl font-black text-brand-gray-900 leading-tight;
}

.heading-secondary {
    @apply text-2xl md:text-3xl lg:text-4xl font-bold text-brand-gray-800 leading-tight;
}

.heading-brand {
    @apply bg-gradient-to-r from-brand-blue to-brand-orange bg-clip-text text-transparent;
}

.text-body {
    @apply text-base md:text-lg text-brand-gray-600 leading-relaxed;
}

.text-body-large {
    @apply text-lg md:text-xl text-brand-gray-600 leading-relaxed;
}

/* simple container tweak for max-width */
.container { @apply mx-auto px-4 sm:px-6 lg:px-8; max-width: 1440px; }

/* Enhanced Animation utilities */
@keyframes float {
    0% { transform: translateY(0px); }
    50% { transform: translateY(-20px); }
    100% { transform: translateY(0px); }
}

@keyframes float-slow {
    0% { transform: translateY(0px); }
    50% { transform: translateY(-10px); }
    100% { transform: translateY(0px); }
}

@keyframes float-particle {
    0% { transform: translateY(0px) translateX(0px) scale(1); opacity: 0.7; }
    33% { transform: translateY(-15px) translateX(5px) scale(1.1); opacity: 1; }
    66% { transform: translateY(-5px) translateX(-3px) scale(0.9); opacity: 0.8; }
    100% { transform: translateY(0px) translateX(0px) scale(1); opacity: 0.7; }
}

@keyframes gradient-x {
    0%, 100% { background-position: 0% 50%; }
    50% { background-position: 100% 50%; }
}

@keyframes scroll-bounce {
    0%, 100% { transform: translateX(-50%) translateY(0); }
    50% { transform: translateX(-50%) translateY(8px); }
}

@keyframes pulse-glow {
    0%, 100% { box-shadow: 0 0 20px rgba(0, 114, 188, 0.3); }
    50% { box-shadow: 0 0 40px rgba(0, 114, 188, 0.6), 0 0 60px rgba(243, 156, 18, 0.3); }
}

@keyframes fade-in-up {
    0% { opacity: 0; transform: translateY(30px); }
    100% { opacity: 1; transform: translateY(0); }
}

@keyframes slide-in-left {
    0% { opacity: 0; transform: translateX(-30px); }
    100% { opacity: 1; transform: translateX(0); }
}

@keyframes slide-in-right {
    0% { opacity: 0; transform: translateX(30px); }
    100% { opacity: 1; transform: translateX(0); }
}

@keyframes scale-in {
    0% { opacity: 0; transform: scale(0.9); }
    100% { opacity: 1; transform: scale(1); }
}

@keyframes shimmer {
    0% { background-position: -200% 0; }
    100% { background-position: 200% 0; }
}

@keyframes wiggle {
    0%, 7% { transform: rotateZ(0); }
    15% { transform: rotateZ(-15deg); }
    20% { transform: rotateZ(10deg); }
    25% { transform: rotateZ(-10deg); }
    30% { transform: rotateZ(6deg); }
    35% { transform: rotateZ(-4deg); }
    40%, 100% { transform: rotateZ(0); }
}

.animate-float {
    animation: float 6s ease-in-out infinite;
}

.animate-float-slow {
    animation: float-slow 8s ease-in-out infinite;
}

.animate-float-delayed {
    animation: float 6s ease-in-out 2s infinite;
}

.animate-float-particle {
    animation: float-particle 4s ease-in-out infinite;
}

.animate-gradient-x {
    background-size: 200% 200%;
    animation: gradient-x 3s ease infinite;
}

.animate-scroll-bounce {
    animation: scroll-bounce 2s ease-in-out infinite;
}

.animate-pulse-glow {
    animation: pulse-glow 3s ease-in-out infinite;
}

.animate-fade-in-up { animation: fade-in-up 0.6s ease-out; }
.animate-slide-in-left { animation: slide-in-left 0.6s ease-out; }
.animate-slide-in-right { animation: slide-in-right 0.6s ease-out; }
.animate-scale-in { animation: scale-in 0.5s ease-out; }
.animate-shimmer { animation: shimmer 2s linear infinite; }
.animate-wiggle { animation: wiggle 1s ease-in-out; }

/* Hover and interaction effects */
.hover-lift { transition: all 0.3s ease; }
.hover-lift:hover { transform: translateY(-8px); box-shadow: 0 20px 40px rgba(0,0,0,0.1); }

.hover-glow { transition: all 0.3s ease; }
.hover-glow:hover { box-shadow: 0 0 30px rgba(243, 156, 18, 0.3); }

.hover-scale { transition: transform 0.3s ease; }
.hover-scale:hover { transform: scale(1.05); }

/* Staggered animations */
.stagger-1 { animation-delay: 0.1s; }
.stagger-2 { animation-delay: 0.2s; }
.stagger-3 { animation-delay: 0.3s; }
.stagger-4 { animation-delay: 0.4s; }
.stagger-5 { animation-delay: 0.5s; }
.stagger-6 { animation-delay: 0.6s; }

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

/* Enhanced focus states */
.focus-ring:focus {
    outline: none;
    box-shadow: 0 0 0 3px rgba(243, 156, 18, 0.5);
}

/* Loading shimmer effect */
.shimmer-bg {
    background: linear-gradient(90deg, #f0f0f0 25%, #e0e0e0 50%, #f0f0f0 75%);
    background-size: 200% 100%;
}

.hero-content .book-now-btn:hover{
    background-color: var(--color-brand-blue);
    color: #fff;
    transition: all 0.3s ease-in-out;
}

/* Enhanced Hero Section Animations */
@keyframes pulse-slow {
    0%, 100% { opacity: 0.6; transform: scale(1); }
    50% { opacity: 0.8; transform: scale(1.05); }
}

@keyframes glow-pulse {
    0%, 100% { box-shadow: 0 0 20px rgba(0, 114, 188, 0.2), 0 0 40px rgba(243, 156, 18, 0.1); }
    50% { box-shadow: 0 0 40px rgba(0, 114, 188, 0.4), 0 0 80px rgba(243, 156, 18, 0.2); }
}

@keyframes text-glow {
    0%, 100% { text-shadow: 0 0 10px rgba(0, 114, 188, 0.3); }
    50% { text-shadow: 0 0 20px rgba(0, 114, 188, 0.5), 0 0 30px rgba(243, 156, 18, 0.3); }
}

.animate-pulse-slow { animation: pulse-slow 4s ease-in-out infinite; }
.animate-glow-pulse { animation: glow-pulse 3s ease-in-out infinite; }
.animate-text-glow { animation: text-glow 2s ease-in-out infinite; }

/* Enhanced Glass Effect */
.glass-enhanced {
    backdrop-filter: blur(20px);
    -webkit-backdrop-filter: blur(20px);
    background: rgba(255, 255, 255, 0.15);
    border: 1px solid rgba(255, 255, 255, 0.3);
    box-shadow: 0 25px 50px rgba(0, 0, 0, 0.1);
}

/* Improved Gradient Animation */
@keyframes gradient-shift {
    0% { background-position: 0% 50%; }
    25% { background-position: 100% 50%; }
    50% { background-position: 100% 100%; }
    75% { background-position: 0% 100%; }
    100% { background-position: 0% 50%; }
}

.animate-gradient-shift {
    background-size: 400% 400%;
    animation: gradient-shift 6s ease infinite;
}

/* Enhanced animations for team page */
@keyframes float-delayed {
    0%, 100% { transform: translateY(0px) rotate(0deg); }
    33% { transform: translateY(-10px) rotate(1deg); }
    66% { transform: translateY(5px) rotate(-1deg); }
}

@keyframes spin-slow {
    from { transform: rotate(0deg); }
    to { transform: rotate(360deg); }
}

@keyframes pulse-slow {
    0%, 100% { opacity: 0.3; transform: scale(1); }
    50% { opacity: 0.8; transform: scale(1.05); }
}

@keyframes shadow-3xl {
    0% { box-shadow: 0 25px 50px -12px rgba(0, 0, 0, 0.25); }
    100% { box-shadow: 0 35px 60px -12px rgba(0, 0, 0, 0.35); }
}

.animate-float-delayed {
    animation: float-delayed 6s ease-in-out infinite;
    animation-delay: 2s;
}

.animate-spin-slow {
    animation: spin-slow 20s linear infinite;
}

.animate-pulse-slow {
    animation: pulse-slow 4s ease-in-out infinite;
}

.hover\:shadow-3xl:hover {
    animation: shadow-3xl 0.3s ease-out forwards;
}

/* Enhanced scroll animations */
@keyframes slide-in-bottom {
    0% {
        transform: translateY(50px);
        opacity: 0;
    }
    100% {
        transform: translateY(0);
        opacity: 1;
    }
}

@keyframes zoom-in {
    0% {
        transform: scale(0.8);
        opacity: 0;
    }
    100% {
        transform: scale(1);
        opacity: 1;
    }
}

@keyframes rotate-in {
    0% {
        transform: rotate(-10deg) scale(0.8);
        opacity: 0;
    }
    100% {
        transform: rotate(0deg) scale(1);
        opacity: 1;
    }
}

.animate-slide-in-bottom {
    animation: slide-in-bottom 0.8s ease-out forwards;
}

.animate-zoom-in {
    animation: zoom-in 0.6s ease-out forwards;
}

.animate-rotate-in {
    animation: rotate-in 0.8s ease-out forwards;
}

/* Staggered animation delays */
.animate-delay-100 { animation-delay: 100ms; }
.animate-delay-200 { animation-delay: 200ms; }
.animate-delay-300 { animation-delay: 300ms; }
.animate-delay-400 { animation-delay: 400ms; }
.animate-delay-500 { animation-delay: 500ms; }
.animate-delay-600 { animation-delay: 600ms; }

/* Enhanced hover effects for team cards */
.group:hover .group-hover\:scale-110 {
    transform: scale(1.1);
}

.group:hover .group-hover\:translate-y-2 {
    transform: translateY(0.5rem);
}

.group\/cta:hover .group-hover\/cta\:scale-110 {
    transform: scale(1.1);
}

.group\/cta:hover .group-hover\/cta\:translate-x-1 {
    transform: translateX(0.25rem);
}

/* Enhanced Responsive Design Optimizations */
@media (max-width: 640px) {
    /* Mobile-first animations - reduced motion for performance */
    .animate-float,
    .animate-float-slow,
    .animate-float-delayed {
        animation-duration: 8s;
        animation-timing-function: ease-in-out;
    }
    
    /* Simplified gradients for mobile */
    .bg-gradient-to-br,
    .bg-gradient-to-r {
        background-size: 200% 200%;
    }
    
    /* Touch-friendly hover states */
    .group:active .group-hover\:scale-110 {
        transform: scale(1.05);
    }
    
    /* Reduced blur for performance */
    .blur-3xl {
        filter: blur(20px);
    }
    
    /* Optimized shadows */
    .shadow-2xl {
        box-shadow: 0 20px 25px -5px rgba(0, 0, 0, 0.1), 0 10px 10px -5px rgba(0, 0, 0, 0.04);
    }
}

@media (max-width: 768px) {
    /* Tablet optimizations */
    .hero-title {
        font-size: clamp(2rem, 6vw, 3.5rem);
    }
    
    .section-title {
        font-size: clamp(1.75rem, 5vw, 2.5rem);
    }
    
    /* Improved spacing for tablets */
    .visual-section {
        padding: 3rem 0;
    }
    
    .visual-content {
        margin-bottom: 2rem;
    }
}

@media (min-width: 1024px) {
    /* Desktop enhancements */
    .animate-float {
        animation-duration: 6s;
    }
    
    .animate-float-slow {
        animation-duration: 8s;
    }
    
    /* Enhanced parallax effects for desktop */
    .parallax-bg {
        transform: translateZ(0);
        will-change: transform;
    }
}

/* Performance optimizations */
.animate-float,
.animate-float-slow,
.animate-float-delayed,
.animate-spin-slow,
.animate-pulse-slow {
    will-change: transform;
    backface-visibility: hidden;
    perspective: 1000px;
}

/* Accessibility improvements */
@media (prefers-reduced-motion: reduce) {
    *,
    *::before,
    *::after {
        animation-duration: 0.01ms !important;
        animation-iteration-count: 1 !important;
        transition-duration: 0.01ms !important;
    }
    
    .animate-float,
    .animate-float-slow,
    .animate-float-delayed,
    .animate-spin-slow,
    .animate-pulse-slow {
        animation: none;
    }
}

/* High contrast mode support */
@media (prefers-contrast: high) {
    .bg-gradient-to-r,
    .bg-gradient-to-br {
        background: var(--brand-blue);
    }
    
    .text-gray-600 {
        color: #000;
    }
    
    .border-white\/50 {
        border-color: #000;
    }
}

/* Contact Page Specific Animations */
@keyframes float-slow {
    0%, 100% {
        transform: translateY(0px) rotate(0deg);
    }
    50% {
        transform: translateY(-20px) rotate(2deg);
    }
}

@keyframes pulse-slow {
    0%, 100% {
        opacity: 0.8;
        transform: scale(1);
    }
    50% {
        opacity: 1;
        transform: scale(1.05);
    }
}

@keyframes pulse-glow {
    0%, 100% {
        box-shadow: 0 0 20px rgba(59, 130, 246, 0.3);
        transform: scale(1);
    }
    50% {
        box-shadow: 0 0 30px rgba(59, 130, 246, 0.6);
        transform: scale(1.02);
    }
}

/* Animation Classes */
.animate-float-slow {
    animation: float-slow 6s ease-in-out infinite;
}

.animate-pulse-slow {
    animation: pulse-slow 4s ease-in-out infinite;
}

.animate-pulse-glow {
    animation: pulse-glow 3s ease-in-out infinite;
}

/* Scroll-triggered Animation System */
[data-animate] {
    opacity: 0;
    transform: translateY(30px);
    transition: all 0.8s cubic-bezier(0.25, 0.46, 0.45, 0.94);
}

[data-animate].animate-in {
    opacity: 1;
    transform: translateY(0);
}

[data-animate="fade-up"] {
    transform: translateY(50px);
}

[data-animate="fade-up"].animate-in {
    transform: translateY(0);
}

/* Staggered Animation Delays */
[data-delay="100"] {
    transition-delay: 100ms;
}

[data-delay="200"] {
    transition-delay: 200ms;
}

[data-delay="300"] {
    transition-delay: 300ms;
}

[data-delay="400"] {
    transition-delay: 400ms;
}

[data-delay="500"] {
    transition-delay: 500ms;
}

/* Enhanced Form Interactions */
.group:focus-within .group-focus-within\:text-brand-blue {
    color: #1e40af;
}

.group:focus-within .group-focus-within\:border-brand-blue {
    border-color: #1e40af;
}

/* Contact Page Specific Hover Effects */
.contact-card:hover {
    transform: translateY(-8px) scale(1.02);
    box-shadow: 0 25px 50px -12px rgba(0, 0, 0, 0.25);
}

.contact-form-field:focus {
    transform: translateY(-2px);
    box-shadow: 0 10px 25px -5px rgba(59, 130, 246, 0.1);
}

/* Social Media Hover Effects */
.social-link:hover {
    transform: translateY(-3px) rotate(5deg) scale(1.1);
    box-shadow: 0 10px 20px rgba(0, 0, 0, 0.2);
}

/* Contact Page Responsive Design Optimizations */
@media (max-width: 640px) {
    /* Mobile-first responsive adjustments */
    .hero-title {
        font-size: 2.5rem;
        line-height: 1.1;
    }
    
    .section-title {
        font-size: 2rem;
        line-height: 1.2;
    }
    
    .body-large {
        font-size: 1.125rem;
    }
    
    /* Mobile hero section */
    #contact-hero {
        min-height: 60vh;
        padding: 2rem 0;
    }
    
    /* Mobile contact cards */
    .contact-card {
        padding: 1.5rem;
        margin-bottom: 1rem;
    }
    
    /* Mobile form adjustments */
    .contact-form input,
    .contact-form textarea,
    .contact-form select {
        padding: 0.875rem;
        font-size: 1rem;
    }
    
    /* Mobile button adjustments */
    .contact-form button {
        padding: 1rem;
        font-size: 1rem;
    }
    
    /* Mobile map height */
    .map-container {
        height: 250px;
    }
    
    /* Mobile spacing adjustments */
    .visual-section {
        padding: 3rem 0;
    }
    
    .visual-content {
        margin-bottom: 2rem;
    }
}

@media (min-width: 641px) and (max-width: 768px) {
    /* Tablet adjustments */
    .hero-title {
        font-size: 3rem;
    }
    
    .section-title {
        font-size: 2.5rem;
    }
    
    #contact-hero {
        min-height: 65vh;
    }
    
    .contact-card {
        padding: 2rem;
    }
    
    .map-container {
        height: 300px;
    }
}

@media (min-width: 769px) and (max-width: 1024px) {
    /* Desktop small adjustments */
    .hero-title {
        font-size: 3.5rem;
    }
    
    .section-title {
        font-size: 2.75rem;
    }
    
    .contact-card {
        padding: 2.5rem;
    }
    
    .map-container {
        height: 350px;
    }
}

@media (min-width: 1025px) {
    /* Desktop large optimizations */
    .hero-title {
        font-size: 4rem;
    }
    
    .section-title {
        font-size: 3rem;
    }
    
    .contact-card {
        padding: 3rem;
    }
    
    .map-container {
        height: 400px;
    }
}

/* Touch device optimizations */
@media (hover: none) and (pointer: coarse) {
    /* Remove hover effects on touch devices */
    .contact-card:hover {
        transform: none;
        box-shadow: 0 10px 25px -5px rgba(0, 0, 0, 0.1);
    }
    
    .social-link:hover {
        transform: none;
    }
    
    /* Increase touch targets */
    .contact-form input,
    .contact-form textarea,
    .contact-form select,
    .contact-form button {
        min-height: 48px;
    }
    
    /* Improve button spacing for touch */
    .contact-form button {
        padding: 1rem 2rem;
        margin-top: 1rem;
    }
}

/* High DPI display optimizations */
@media (-webkit-min-device-pixel-ratio: 2), (min-resolution: 192dpi) {
    /* Crisp borders and shadows for retina displays */
    .contact-card,
    .contact-form input,
    .contact-form textarea,
    .contact-form select {
        border-width: 0.5px;
    }
}

/* Landscape mobile optimizations */
@media (max-width: 768px) and (orientation: landscape) {
    #contact-hero {
        min-height: 50vh;
        padding: 1.5rem 0;
    }
    
    .hero-title {
        font-size: 2.25rem;
    }
    
    .visual-section {
        padding: 2rem 0;
    }
}

/* Print styles */
@media print {
    #contact-hero {
        min-height: auto;
        background: white !important;
        color: black !important;
    }
    
    .contact-card {
        box-shadow: none;
        border: 1px solid #ccc;
    }
    
    .contact-form {
        display: none;
    }
    
    .map-container {
        display: none;
    }
    
    /* Show only essential contact information for print */
    .print-hide {
        display: none;
    }
}

/* Missing animation classes for JavaScript integration */
.animate-slide-in-left {
    animation: slide-in-left 0.6s cubic-bezier(0.4, 0, 0.2, 1) forwards;
}

.animate-slide-in-right {
    animation: slide-in-right 0.6s cubic-bezier(0.4, 0, 0.2, 1) forwards;
}

.animate-scale-in {
    animation: scale-in 0.5s cubic-bezier(0.4, 0, 0.2, 1) forwards;
}

/* Enhanced responsive utilities */
@media (max-width: 640px) {
    .animate-stagger-1 { animation-delay: 0.1s; }
    .animate-stagger-2 { animation-delay: 0.2s; }
    .animate-stagger-3 { animation-delay: 0.3s; }
    .animate-stagger-4 { animation-delay: 0.4s; }
    .animate-stagger-5 { animation-delay: 0.5s; }
    .animate-stagger-6 { animation-delay: 0.6s; }
}

/* Touch device enhancements */
.touch-device .touch-active {
    transform: scale(0.98);
    transition: transform 0.1s ease;
}

.touch-device .group:hover {
    transform: none;
}

.touch-device .group.touch-active {
    transform: translateY(-4px) scale(1.01);
}

/* Focus states for accessibility */
.focused {
    outline: 2px solid #3b82f6;
    outline-offset: 2px;
    border-radius: 0.375rem;
}

/* Performance optimizations */
@media (prefers-reduced-motion: reduce) {
    *,
    *::before,
    *::after {
        animation-duration: 0.01ms !important;
        animation-iteration-count: 1 !important;
        transition-duration: 0.01ms !important;
        scroll-behavior: auto !important;
    }
}

/* Enhanced mobile responsiveness */
@media (max-width: 768px) {
    .container {
        padding-left: 1rem;
        padding-right: 1rem;
    }
    
    .grid {
        gap: 1rem;
    }
    
    .text-4xl {
        font-size: 2rem;
        line-height: 2.5rem;
    }
    
    .text-5xl {
        font-size: 2.5rem;
        line-height: 3rem;
    }
    
    .text-6xl {
        font-size: 3rem;
        line-height: 3.5rem;
    }
}

@media (max-width: 480px) {
    .px-6 {
        padding-left: 1rem;
        padding-right: 1rem;
    }
    
    .py-12 {
        padding-top: 2rem;
        padding-bottom: 2rem;
    }
    
    .py-16 {
        padding-top: 3rem;
        padding-bottom: 3rem;
    }
    
    .py-20 {
        padding-top: 4rem;
        padding-bottom: 4rem;
    }
}